/* ================================================================
   VENET — iOS DESIGN LAYER
   ================================================================
   Loaded LAST, after style.css and venet.css. Everything here is
   additive: deleting the one <link> in index.html reverts the site.

   Why this is a plain stylesheet and not @layer
   ---------------------------------------------
   Unlayered CSS beats layered CSS in the cascade. Wrapping this in
   `@layer ios {}` would make it lose to all 7,859 lines of the two
   stylesheets before it. So: plain sheet, loaded after, matching or
   higher specificity.

   How it reaches 6,313 lines of venet.css without touching them
   -------------------------------------------------------------
   venet.css is token-driven by design — its own header says
   "override :root to retheme". Section 2 below rebinds those tokens
   to iOS values, which rethemes the whole portal in one pass.
   Selector-level work is reserved for what tokens cannot express.

   Theme: monochrome. Venet is black and white, so the greys here are
   pure neutrals (no blue cast like Apple's systemGray) and the tint
   is Venet black, never iOS blue. Colour appears only where it
   carries meaning: success, destructive, warning.
   ================================================================ */

/* ════════════════════════════════════════════════════════════════
   1. TOKENS
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Type ──
     Real SF Pro on Apple devices, Segoe UI Variable on Windows,
     Roboto on Android. Nothing downloaded. */
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
              "SF Pro Display", "Segoe UI Variable Text", "Segoe UI",
              Roboto, system-ui, sans-serif;
  --ios-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace;

  /* iOS type scale. Tracking is optical — tighter as size grows. */
  --ios-t-large-title: 700 2.125rem/1.206 var(--ios-font);   /* 34/41 */
  --ios-t-title1:      700 1.75rem/1.214  var(--ios-font);   /* 28/34 */
  --ios-t-title2:      600 1.375rem/1.273 var(--ios-font);   /* 22/28 */
  --ios-t-title3:      600 1.25rem/1.25   var(--ios-font);   /* 20/25 */
  --ios-t-headline:    600 1.0625rem/1.294 var(--ios-font);  /* 17/22 */
  --ios-t-body:        400 1.0625rem/1.294 var(--ios-font);  /* 17/22 */
  --ios-t-callout:     400 1rem/1.3125    var(--ios-font);   /* 16/21 */
  --ios-t-subhead:     400 0.9375rem/1.333 var(--ios-font);  /* 15/20 */
  --ios-t-footnote:    400 0.8125rem/1.385 var(--ios-font);  /* 13/18 */
  --ios-t-caption1:    400 0.75rem/1.333  var(--ios-font);   /* 12/16 */
  --ios-t-caption2:    400 0.6875rem/1.182 var(--ios-font);  /* 11/13 */

  --ios-tr-large-title: -0.022em;
  --ios-tr-title1:      -0.020em;
  --ios-tr-title2:      -0.016em;
  --ios-tr-title3:      -0.013em;
  --ios-tr-headline:    -0.011em;
  --ios-tr-body:        -0.011em;
  --ios-tr-callout:     -0.009em;
  --ios-tr-subhead:     -0.006em;
  --ios-tr-footnote:    -0.001em;
  --ios-tr-caption1:     0em;
  --ios-tr-caption2:     0.006em;

  /* ── Monochrome ramp ──
     Pure neutrals. Apple's systemGray carries a blue cast that fights
     a black-and-white brand, so these are desaturated equivalents. */
  --ios-gray:   #8e8e8e;
  --ios-gray2:  #aeaeae;
  --ios-gray3:  #c4c4c4;
  --ios-gray4:  #d4d4d4;
  --ios-gray5:  #e6e6e6;
  --ios-gray6:  #f2f2f2;

  --ios-label:      #0f0f0f;
  --ios-label2:     rgba(15, 15, 15, 0.58);
  --ios-label3:     rgba(15, 15, 15, 0.32);
  --ios-label4:     rgba(15, 15, 15, 0.18);

  --ios-separator:        rgba(0, 0, 0, 0.13);
  --ios-separator-opaque: #dcdcdc;

  --ios-bg-grouped:   #f2f2f2;
  --ios-bg-elevated:  #ffffff;
  --ios-bg-tertiary:  #fafafa;

  /* ── Tint — Venet black, deliberately not #007AFF ── */
  --ios-tint:      #0f0f0f;
  --ios-tint-soft: rgba(15, 15, 15, 0.08);
  --ios-on-tint:   #ffffff;

  /* ── Semantic colour, used sparingly ── */
  --ios-green:  #34c759;
  --ios-red:    #ff3b30;
  --ios-orange: #ff9500;
  --ios-blue:   #007aff;

  --ios-green-bg:  rgba(52, 199, 89, 0.12);
  --ios-red-bg:    rgba(255, 59, 48, 0.11);
  --ios-orange-bg: rgba(255, 149, 0, 0.13);

  /* ── Glass materials ──
     backdrop-filter cannot be packed into one custom property with a
     background, so each material is a bg/blur pair.

     The saturate() is not decoration: without it, blurred backdrops
     go muddy grey. It is what keeps avatars and logos luminous
     through the glass — and it is what makes this read as iOS rather
     than as a frosted overlay. */
  --ios-mat-ultrathin-bg: rgba(255, 255, 255, 0.52);
  --ios-mat-ultrathin-fx: saturate(180%) blur(24px);
  --ios-mat-thin-bg:      rgba(255, 255, 255, 0.64);
  --ios-mat-thin-fx:      saturate(180%) blur(28px);
  --ios-mat-regular-bg:   rgba(255, 255, 255, 0.74);
  --ios-mat-regular-fx:   saturate(180%) blur(32px);
  --ios-mat-thick-bg:     rgba(255, 255, 255, 0.86);
  --ios-mat-thick-fx:     saturate(180%) blur(40px);
  --ios-mat-chrome-bg:    rgba(250, 250, 250, 0.78);
  --ios-mat-chrome-fx:    saturate(190%) blur(36px);

  /* Dark glass — landing page and any ink surface */
  --ios-mat-dark-bg:      rgba(22, 22, 24, 0.58);
  --ios-mat-dark-fx:      saturate(170%) blur(28px);
  --ios-mat-dark-thick-bg: rgba(18, 18, 20, 0.78);
  --ios-mat-dark-thick-fx: saturate(170%) blur(40px);

  /* Specular edges — the lit top rim that sells glass as a surface
     with thickness rather than a flat translucent rectangle. */
  --ios-edge: linear-gradient(180deg,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(255, 255, 255, 0.35) 34%,
                rgba(255, 255, 255, 0) 62%);
  --ios-edge-dark: linear-gradient(180deg,
                rgba(255, 255, 255, 0.34) 0%,
                rgba(255, 255, 255, 0.10) 38%,
                rgba(255, 255, 255, 0.02) 70%);
  --ios-edge-hairline: inset 0 0 0 0.5px rgba(0, 0, 0, 0.07);

  /* ── Radii ── */
  --ios-r-xs:   6px;
  --ios-r-sm:   10px;
  --ios-r-md:   14px;
  --ios-r-lg:   18px;
  --ios-r-xl:   22px;
  --ios-r-2xl:  26px;
  --ios-r-full: 999px;

  /* ── Shadows — monochrome, wide and soft like iOS ── */
  --ios-sh-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --ios-sh-2: 0 4px 16px -4px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.05);
  --ios-sh-3: 0 12px 32px -8px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
  --ios-sh-sheet: 0 -8px 40px -12px rgba(0, 0, 0, 0.22);

  /* ── Motion ── */
  --ios-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ios-spring: linear(
    0, 0.006, 0.025, 0.101 8.1%, 0.539 21.3%, 0.721, 0.849,
    0.937, 0.991 43.5%, 1.007, 1.014, 1.011, 1.003 62.4%,
    0.997, 0.996 75.9%, 1
  );
  --ios-dur-fast: 0.22s;
  --ios-dur:      0.35s;
  --ios-dur-slow: 0.5s;

  /* ── Chrome metrics ── */
  --ios-navbar-h: 44px;
  --ios-tabbar-h: 49px;
  --ios-safe-t: env(safe-area-inset-top, 0px);
  --ios-safe-b: env(safe-area-inset-bottom, 0px);
  --ios-safe-l: env(safe-area-inset-left, 0px);
  --ios-safe-r: env(safe-area-inset-right, 0px);

  /* Minimum comfortable touch target (Apple HIG) */
  --ios-touch: 44px;
}

/* ════════════════════════════════════════════════════════════════
   2. TOKEN BRIDGE
   Rebinds the two existing design systems onto iOS values. This is
   what rethemes thousands of existing rules without editing them.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Landing (css/style.css) ── */
  --font-body: var(--ios-font);
  /* Space Mono is handed back to the wordmark and eyebrow labels in
     section 4 — remapping here and re-applying there is far fewer
     overrides than the reverse. */
  --font-heading: var(--ios-font);

  --radius-sm: var(--ios-r-sm);
  --radius-md: var(--ios-r-md);
  --radius-lg: var(--ios-r-xl);

  --blur-glass: 28px;
  --blur-nav:   36px;
  --blur-heavy: 40px;

  /* ── Portal (venet/venet.css) ── */
  --v-bg:        var(--ios-bg-grouped);
  --v-bg-card:   var(--ios-bg-elevated);
  --v-bg-hover:  rgba(0, 0, 0, 0.035);
  --v-bg-active: rgba(0, 0, 0, 0.06);
  --v-bg-soft:   var(--ios-bg-tertiary);
  --v-bg-panel:  var(--ios-gray6);

  --v-text:           var(--ios-label);
  --v-text-secondary: var(--ios-label2);
  --v-text-muted:     var(--ios-label3);

  --v-border:        var(--ios-separator);
  --v-border-subtle: rgba(0, 0, 0, 0.07);

  --v-accent:       var(--ios-tint);
  --v-accent-hover: #262626;
  --v-accent-text:  var(--ios-on-tint);

  --v-success: var(--ios-green);
  --v-warning: var(--ios-orange);
  --v-danger:  var(--ios-red);
  --v-info:    var(--ios-blue);

  --v-success-bg: var(--ios-green-bg);
  --v-warning-bg: var(--ios-orange-bg);
  --v-danger-bg:  var(--ios-red-bg);

  --v-shadow-xs:   var(--ios-sh-1);
  --v-shadow-sm:   var(--ios-sh-1);
  --v-shadow-md:   var(--ios-sh-2);
  --v-shadow-card: var(--ios-sh-1), var(--ios-edge-hairline);

  --v-radius-sm: var(--ios-r-sm);
  --v-radius-md: var(--ios-r-md);
  --v-radius-lg: var(--ios-r-lg);
  --v-radius-xl: var(--ios-r-xl);

  /* Sidebar becomes an iPadOS glass rail */
  --v-sidebar-bg:      transparent;
  --v-sidebar-surface: transparent;
  --v-sidebar-text:     var(--ios-label2);
  --v-sidebar-text-act: var(--ios-label);
  --v-sidebar-hover:    rgba(0, 0, 0, 0.045);
  --v-sidebar-active:   rgba(0, 0, 0, 0.075);
  --v-sidebar-divider:  var(--ios-separator);
  --v-sidebar-label:    var(--ios-label3);
  --v-sidebar-shadow:   1px 0 0 var(--ios-separator);
}

/* ════════════════════════════════════════════════════════════════
   3. BASE
   ════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--ios-font);
  letter-spacing: var(--ios-tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Native app feel: no 300ms tap flash, no rubber-band chaining. */
body.venet-mode {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, a, [role="button"], input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Headings pick up SF's optical tracking. Without this they keep
   Inter's looser default and read subtly un-Apple at large sizes. */
h1 { letter-spacing: var(--ios-tr-large-title); }
h2 { letter-spacing: var(--ios-tr-title1); }
h3 { letter-spacing: var(--ios-tr-title2); }
h4, h5, h6 { letter-spacing: var(--ios-tr-title3); }

/* iOS momentum scrolling inside panes */
.venet-main, .vc-sv, .vc-msg-list { -webkit-overflow-scrolling: touch; }

/* ════════════════════════════════════════════════════════════════
   4. BRAND — Space Mono retained where it is identity
   ════════════════════════════════════════════════════════════════ */
.nav__logo,
.venet-topbar__logo,
.venet-sidebar__logo,
.legal__eyebrow,
.land-access__step span,
.land-price-card__name,
.land-price-card__badge {
  font-family: var(--ios-font-mono);
}

/* ════════════════════════════════════════════════════════════════
   5. SQUIRCLES
   iOS corners are superellipses, not circular arcs. `corner-shape`
   is native CSS; where it is unsupported the plain radius stands in
   and nothing breaks.

   Applied to containers only. A squircle at 999px would distort
   pills and avatars, so those keep true circular geometry.
   ════════════════════════════════════════════════════════════════ */
@supports (corner-shape: squircle) {
  .ios-sq,
  .ios-card,
  .ios-list,
  .ios-sheet,
  .ios-btn,
  .glass,
  .v-card,
  .v-member-card,
  .disc-startup-card,
  .evt-card,
  .land-price-card,
  .v-price-card,
  .vc-post,
  .vc-story-tile,
  .biz-panel,
  .vw-hero {
    corner-shape: squircle;
  }
}

/* ════════════════════════════════════════════════════════════════
   6. GLASS
   ════════════════════════════════════════════════════════════════ */
.ios-glass,
.ios-glass-thin,
.ios-glass-thick,
.ios-glass-dark {
  position: relative;
  isolation: isolate;
}

.ios-glass {
  background: var(--ios-mat-regular-bg);
  -webkit-backdrop-filter: var(--ios-mat-regular-fx);
  backdrop-filter: var(--ios-mat-regular-fx);
}
.ios-glass-thin {
  background: var(--ios-mat-thin-bg);
  -webkit-backdrop-filter: var(--ios-mat-thin-fx);
  backdrop-filter: var(--ios-mat-thin-fx);
}
.ios-glass-thick {
  background: var(--ios-mat-thick-bg);
  -webkit-backdrop-filter: var(--ios-mat-thick-fx);
  backdrop-filter: var(--ios-mat-thick-fx);
}
.ios-glass-dark {
  background: var(--ios-mat-dark-bg);
  -webkit-backdrop-filter: var(--ios-mat-dark-fx);
  backdrop-filter: var(--ios-mat-dark-fx);
}

/* Specular rim. A 1px gradient border drawn with a mask so it sits
   exactly on the edge and follows any radius, including squircles. */
.ios-glass::before,
.ios-glass-thin::before,
.ios-glass-thick::before,
.ios-glass-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  padding: 1px;
  background: var(--ios-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.ios-glass-dark::before { background: var(--ios-edge-dark); }

/* Fallback: where backdrop-filter is unavailable the translucent
   background alone would let text collide with content behind it. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ios-glass, .ios-glass-thin, .ios-glass-thick { background: rgba(255, 255, 255, 0.96); }
  .ios-glass-dark { background: rgba(20, 20, 22, 0.96); }
}

/* ════════════════════════════════════════════════════════════════
   7. CARDS
   ════════════════════════════════════════════════════════════════ */
.ios-card {
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-r-xl);
  box-shadow: var(--ios-sh-1), var(--ios-edge-hairline);
}
.ios-card--flush { border-radius: 0; box-shadow: none; }
.ios-card--raised { box-shadow: var(--ios-sh-2), var(--ios-edge-hairline); }

/* ════════════════════════════════════════════════════════════════
   8. GROUPED INSET LISTS
   The single most recognisable iOS pattern.
   ════════════════════════════════════════════════════════════════ */
.ios-list {
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-r-md);
  box-shadow: var(--ios-edge-hairline);
  overflow: hidden;
}
.ios-list__header {
  font: var(--ios-t-footnote);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ios-label2);
  padding: 0 16px 7px;
}
.ios-list__footer {
  font: var(--ios-t-footnote);
  letter-spacing: var(--ios-tr-footnote);
  color: var(--ios-label2);
  padding: 7px 16px 0;
}

.ios-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--ios-touch);
  padding: 11px 16px;
  font: var(--ios-t-body);
  letter-spacing: var(--ios-tr-body);
  color: var(--ios-label);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background var(--ios-dur-fast) var(--ios-ease);
}
/* Separators inset to the text edge, not full-bleed — this detail is
   most of what makes a list read as iOS rather than as a table. */
.ios-row + .ios-row::after {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 1px;
  background: var(--ios-separator);
}
.ios-row--inset-icon + .ios-row--inset-icon::after { left: 52px; }
@media (min-resolution: 2dppx) {
  .ios-row + .ios-row::after { height: 0.5px; }
}

.ios-row:active { background: var(--ios-gray5); }
.ios-row__label { flex: 1 1 auto; min-width: 0; }
.ios-row__value {
  font: var(--ios-t-body);
  color: var(--ios-label2);
  flex: 0 0 auto;
}
/* Disclosure chevron */
.ios-row__chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 12px;
  color: var(--ios-label3);
}
.ios-row--destructive { color: var(--ios-red); }

/* ════════════════════════════════════════════════════════════════
   9. BUTTONS
   ════════════════════════════════════════════════════════════════ */
.ios-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ios-touch);
  padding: 0 18px;
  border: 0;
  border-radius: var(--ios-r-md);
  font: var(--ios-t-headline);
  letter-spacing: var(--ios-tr-headline);
  cursor: pointer;
  user-select: none;
  transition: transform var(--ios-dur-fast) var(--ios-spring),
              background var(--ios-dur-fast) var(--ios-ease),
              opacity var(--ios-dur-fast) var(--ios-ease);
}
/* The press: scale plus fade, never a colour flash. */
.ios-btn:active { transform: scale(0.96); opacity: 0.82; }

.ios-btn--filled { background: var(--ios-tint); color: var(--ios-on-tint); }
.ios-btn--tinted { background: var(--ios-tint-soft); color: var(--ios-tint); }
.ios-btn--gray   { background: var(--ios-gray5); color: var(--ios-label); }
.ios-btn--plain  { background: transparent; color: var(--ios-tint); padding: 0 8px; }
.ios-btn--destructive { background: var(--ios-red-bg); color: var(--ios-red); }
.ios-btn--glass {
  background: var(--ios-mat-thin-bg);
  -webkit-backdrop-filter: var(--ios-mat-thin-fx);
  backdrop-filter: var(--ios-mat-thin-fx);
  color: var(--ios-label);
  box-shadow: var(--ios-edge-hairline);
}
.ios-btn--full  { width: 100%; }
.ios-btn--pill  { border-radius: var(--ios-r-full); }
.ios-btn--small { min-height: 34px; padding: 0 14px; font: var(--ios-t-subhead); }
.ios-btn:disabled { opacity: 0.4; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════
   10. CONTROLS
   ════════════════════════════════════════════════════════════════ */

/* Segmented control */
.ios-segmented {
  display: inline-flex;
  padding: 2px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--ios-r-sm);
  gap: 2px;
}
.ios-segmented__item {
  flex: 1 1 0;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font: var(--ios-t-subhead);
  font-weight: 500;
  color: var(--ios-label);
  cursor: pointer;
  transition: background var(--ios-dur-fast) var(--ios-ease),
              box-shadow var(--ios-dur-fast) var(--ios-ease);
}
.ios-segmented__item[aria-selected="true"] {
  background: #fff;
  box-shadow: var(--ios-sh-1);
  font-weight: 600;
}

/* Switch */
.ios-switch {
  position: relative;
  flex: 0 0 auto;
  width: 51px;
  height: 31px;
  border: 0;
  padding: 0;
  border-radius: var(--ios-r-full);
  background: var(--ios-gray4);
  cursor: pointer;
  transition: background var(--ios-dur-fast) var(--ios-ease);
}
.ios-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform var(--ios-dur-fast) var(--ios-spring);
}
.ios-switch[aria-checked="true"] { background: var(--ios-tint); }
.ios-switch[aria-checked="true"]::after { transform: translateX(20px); }

/* Search field */
.ios-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--ios-r-sm);
  color: var(--ios-label2);
}
.ios-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: var(--ios-t-body);
  color: var(--ios-label);
  outline: none;
}
.ios-search input::placeholder { color: var(--ios-label3); }

/* Text fields */
.ios-field {
  width: 100%;
  min-height: var(--ios-touch);
  padding: 11px 14px;
  background: var(--ios-bg-elevated);
  border: 1px solid var(--ios-separator);
  border-radius: var(--ios-r-sm);
  font: var(--ios-t-body);
  color: var(--ios-label);
  transition: border-color var(--ios-dur-fast) var(--ios-ease),
              box-shadow var(--ios-dur-fast) var(--ios-ease);
}
.ios-field:focus {
  outline: none;
  border-color: var(--ios-tint);
  box-shadow: 0 0 0 3px rgba(15, 15, 15, 0.08);
}

/* Badge / pill */
.ios-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--ios-r-full);
  background: var(--ios-gray5);
  font: var(--ios-t-caption1);
  font-weight: 600;
  letter-spacing: var(--ios-tr-caption1);
  color: var(--ios-label2);
}
.ios-badge--success { background: var(--ios-green-bg); color: #1c7a3c; }
.ios-badge--danger  { background: var(--ios-red-bg);   color: #c22a20; }
.ios-badge--warning { background: var(--ios-orange-bg); color: #9a5a00; }
.ios-badge--tint    { background: var(--ios-tint); color: var(--ios-on-tint); }

/* ════════════════════════════════════════════════════════════════
   11. FOCUS
   Keyboard users get a visible ring; pointer users never see it.
   ════════════════════════════════════════════════════════════════ */
.ios-btn:focus-visible,
.ios-row:focus-visible,
.ios-switch:focus-visible,
.ios-segmented__item:focus-visible {
  outline: 2px solid var(--ios-tint);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════
   12. APP CHROME

   Section 2 rebinds --v-sidebar-* to transparent so the bars can carry
   real material instead of flat fills. That rebinding is only safe
   because this section supplies the material — the two belong
   together. `.venet-bottom-nav` in particular derives its fill from
   color-mix(--v-sidebar-surface …), which resolves to near-nothing
   without the override below.
   ════════════════════════════════════════════════════════════════ */

/* ── Sidebar (desktop): iPadOS glass rail ── */
.venet-sidebar {
  background: var(--ios-mat-chrome-bg);
  -webkit-backdrop-filter: var(--ios-mat-chrome-fx);
  backdrop-filter: var(--ios-mat-chrome-fx);
  border-right: 0;
  box-shadow: inset -0.5px 0 0 var(--ios-separator);
}

/* Selection is an inset pill, not a full-bleed bar. */
.venet-sidebar__link {
  border-radius: var(--ios-r-sm);
  margin-inline: 8px;
  font: var(--ios-t-callout);
  letter-spacing: var(--ios-tr-callout);
  font-weight: 500;
  transition: background var(--ios-dur-fast) var(--ios-ease),
              color var(--ios-dur-fast) var(--ios-ease);
}
@supports (corner-shape: squircle) {
  .venet-sidebar__link { corner-shape: squircle; }
}
.venet-sidebar__link[aria-current="page"] {
  background: var(--ios-tint-soft);
  color: var(--ios-label);
  font-weight: 600;
}
.venet-sidebar__label--group {
  font: var(--ios-t-caption1);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ios-label3);
}
.venet-sidebar__divider { background: var(--ios-separator); }

/* ── Topbar (mobile) ──
   --v-topbar-bg inherits from --v-sidebar-bg, now transparent, so the
   material has to be stated outright. Hairline via shadow rather than
   border so it renders at true 0.5px. */
.venet-topbar {
  background: var(--ios-mat-chrome-bg);
  -webkit-backdrop-filter: var(--ios-mat-chrome-fx);
  backdrop-filter: var(--ios-mat-chrome-fx);
  border-bottom: 0;
  box-shadow: inset 0 -0.5px 0 var(--ios-separator);
  padding-top: var(--ios-safe-t);
  height: calc(var(--v-topbar-h) + var(--ios-safe-t));
}
.venet-topbar__logo {
  font-size: 0.9rem;
  letter-spacing: 0.14em;
}

/* ── Bottom tab bar ──
   PRE-EXISTING BUG, fixed here: venet.css sets `display: flex` at line
   1244 inside @media (max-width: 639px), then `display: none` at line
   2473 as a plain rule. Equal specificity, later source wins, so the
   mobile tab bar never rendered at any width. This sheet loads after
   both, so restating it inside the same breakpoint restores it. */
@media (max-width: 639px) {
  .venet-bottom-nav { display: flex; }
}

.venet-bottom-nav {
  height: calc(var(--ios-tabbar-h) + 9px);
  background: var(--ios-mat-chrome-bg);
  -webkit-backdrop-filter: var(--ios-mat-chrome-fx);
  backdrop-filter: var(--ios-mat-chrome-fx);
  border-top: 0;
  box-shadow: inset 0 0.5px 0 var(--ios-separator);
  padding-bottom: var(--ios-safe-b);
}
.venet-bottom-nav__item {
  gap: 3px;
  /* venet.css shouts these in uppercase at .05em. The markup is already
     sentence case ("Home", "Connect"), so this restores real labels. */
  font-size: 0.625rem;      /* 10px — iOS tab-label size */
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ios-label2);
  transition: color var(--ios-dur-fast) var(--ios-ease),
              transform var(--ios-dur-fast) var(--ios-spring);
}
.venet-bottom-nav__item:active { transform: scale(0.92); }
/* venet.css draws a pill (::before) and an underline (::after) behind the
   active tab. iOS marks the active tab with tint alone. */
.venet-bottom-nav__item::before,
.venet-bottom-nav__item::after { display: none; }
.venet-bottom-nav__item[aria-current="page"] {
  color: var(--ios-tint);
  font-weight: 600;
}
.venet-bottom-nav__item[aria-current="page"] svg { opacity: 1; }

/* Content must clear the taller bar plus the home indicator. Scoped to the
   same 639px breakpoint the tab bar uses — the 640–1023px tablet layout keeps
   the sidebar and has no tab bar to clear. */
@media (max-width: 639px) {
  .venet-main {
    padding-bottom: calc(var(--ios-tabbar-h) + var(--ios-safe-b) + 30px);
  }
}

/* ════════════════════════════════════════════════════════════════
   13. BUTTONS IN THE PORTAL

   .v-btn shouts: 0.76rem, .08em tracking, uppercase, mono. The markup
   underneath is already sentence case ("Find founders"), so dropping
   text-transform restores real casing rather than mangling labels.
   ════════════════════════════════════════════════════════════════ */
.v-btn {
  min-height: 38px;
  padding: 8px 16px;
  border-radius: var(--ios-r-sm);
  font: var(--ios-t-subhead);
  font-weight: 600;
  letter-spacing: var(--ios-tr-subhead);
  text-transform: none;
  transition: background var(--ios-dur-fast) var(--ios-ease),
              border-color var(--ios-dur-fast) var(--ios-ease),
              transform var(--ios-dur-fast) var(--ios-spring),
              opacity var(--ios-dur-fast) var(--ios-ease);
}
@supports (corner-shape: squircle) {
  .v-btn { corner-shape: squircle; }
}
.v-btn:active { transform: scale(0.96); opacity: 0.85; }
.v-btn--ghost {
  background: var(--ios-gray5);
  border-color: transparent;
  color: var(--ios-label);
}
.v-btn--ghost:hover { background: var(--ios-gray4); border-color: transparent; }
.v-btn--secondary { border-radius: var(--ios-r-sm); }
.v-btn--danger,
.v-btn--interest,
.v-btn--interest-sent { border-radius: var(--ios-r-sm); }

/* ════════════════════════════════════════════════════════════════
   14. SHEETS
   Modals become bottom sheets on phones and centred cards above that,
   which is exactly how iOS presents them.
   ════════════════════════════════════════════════════════════════ */
.vc-chat-modal__card,
.v-role-modal-box,
.evt-modal {
  border-radius: var(--ios-r-2xl);
  box-shadow: var(--ios-sh-3);
  background: var(--ios-bg-elevated);
}
@supports (corner-shape: squircle) {
  .vc-chat-modal__card, .v-role-modal-box, .evt-modal { corner-shape: squircle; }
}
.vc-chat-modal__backdrop,
.v-role-modal-overlay {
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

@media (max-width: 640px) {
  .vc-chat-modal__card,
  .v-role-modal-box,
  .evt-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 92vh;
    margin: 0;
    border-radius: var(--ios-r-2xl) var(--ios-r-2xl) 0 0;
    padding-bottom: calc(16px + var(--ios-safe-b));
    animation: ios-sheet-up var(--ios-dur) var(--ios-ease);
  }
  /* Grabber — the affordance that says "drag me down". */
  .vc-chat-modal__card::before,
  .v-role-modal-box::before,
  .evt-modal::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 5px;
    border-radius: var(--ios-r-full);
    background: var(--ios-gray3);
    pointer-events: none;
  }
}
@keyframes ios-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   15. TOAST — glass capsule
   ════════════════════════════════════════════════════════════════ */
.v-toast {
  border-radius: var(--ios-r-lg);
  background: var(--ios-mat-thick-bg);
  -webkit-backdrop-filter: var(--ios-mat-thick-fx);
  backdrop-filter: var(--ios-mat-thick-fx);
  box-shadow: var(--ios-sh-3), var(--ios-edge-hairline);
  border: 0;
}
@supports (corner-shape: squircle) { .v-toast { corner-shape: squircle; } }
.v-toast__title { font: var(--ios-t-headline); letter-spacing: var(--ios-tr-headline); }
.v-toast__message { font: var(--ios-t-subhead); letter-spacing: var(--ios-tr-subhead); color: var(--ios-label2); }

/* ════════════════════════════════════════════════════════════════
   16. FORMS

   The 17px font size is not cosmetic. Mobile Safari auto-zooms the
   viewport whenever a focused input's text is under 16px, which
   yanks the layout sideways mid-typing. venet.css had these at
   0.9rem (14.4px), so every form field in the app triggered it.
   ════════════════════════════════════════════════════════════════ */
.v-input,
.ios-field,
.venet-main input[type="text"],
.venet-main input[type="email"],
.venet-main input[type="url"],
.venet-main input[type="search"],
.venet-main input[type="number"],
.venet-main input[type="tel"],
.venet-main input[type="date"],
.venet-main input[type="time"],
.venet-main input[type="password"],
.venet-main textarea,
.venet-main select {
  font-family: var(--ios-font);
  font-size: 1.0625rem;          /* 17px — at or above Safari's zoom threshold */
  line-height: 1.294;
  letter-spacing: var(--ios-tr-body);
  border-radius: var(--ios-r-sm);
  border: 1px solid var(--ios-separator);
  background: var(--ios-bg-elevated);
  color: var(--ios-label);
  padding: 10px 14px;
  transition: border-color var(--ios-dur-fast) var(--ios-ease),
              box-shadow var(--ios-dur-fast) var(--ios-ease);
}
@supports (corner-shape: squircle) {
  .v-input, .ios-field, .venet-main textarea, .venet-main select { corner-shape: squircle; }
}
.v-input:focus,
.venet-main input:focus,
.venet-main textarea:focus,
.venet-main select:focus {
  outline: none;
  border-color: var(--ios-label3);
  box-shadow: 0 0 0 3.5px rgba(15, 15, 15, 0.06);
}
.v-input::placeholder,
.venet-main input::placeholder,
.venet-main textarea::placeholder { color: var(--ios-label3); }

/* venet.css:2627 gives .form-input a permanent `outline: 2px` at
   `outline-offset: 2px` with a transparent border — that is the ghost second
   ring around every field. It also flattens accessibility: an always-on
   outline means a focused field looks identical to an idle one, so keyboard
   users lose the focus indicator entirely. Replace it with a real border and
   give the outline back to :focus-visible, where it belongs. */
.form-input,
select.form-input,
textarea.form-input {
  outline: none;
  outline-offset: 0;
  border-radius: var(--ios-r-sm);
  font-size: 1.0625rem;          /* 17px, clear of Safari's zoom threshold */
}

/* Light field — portal and admin only. */
body.venet-mode .form-input,
body.venet-mode select.form-input,
body.venet-mode textarea.form-input,
.va-admin .form-input {
  border: 1px solid var(--ios-separator);
  background: var(--ios-bg-elevated);
  color: var(--ios-label);
}
body.venet-mode .form-input:focus,
body.venet-mode select.form-input:focus,
body.venet-mode textarea.form-input:focus {
  outline: none;
  border-color: var(--ios-label3);
  box-shadow: 0 0 0 3.5px rgba(15, 15, 15, 0.06);
}

/* Dark field — /support, /apply, /login and the rest of the landing theme.
   A white box here is not just off-brand, it collides with the white label
   text these pages use. Keeps style.css's translucent treatment, restated
   with iOS geometry. */
body:not(.venet-mode) .form-input,
body:not(.venet-mode) select.form-input,
body:not(.venet-mode) textarea.form-input {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
body:not(.venet-mode) .form-input::placeholder,
body:not(.venet-mode) textarea.form-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
body:not(.venet-mode) .form-input:focus,
body:not(.venet-mode) select.form-input:focus,
body:not(.venet-mode) textarea.form-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3.5px rgba(255, 255, 255, 0.07);
}
/* select's own option list is drawn by the OS — it needs a dark backdrop
   explicitly or the options render white-on-white. */
body:not(.venet-mode) select.form-input option {
  background: #161618;
  color: #ffffff;
}

/* .v-btn--primary fills with --v-accent (black). Correct in the light portal,
   invisible on the dark public pages — /support's submit button was black on
   near-black. On dark, the primary action inverts to white, matching the
   landing page's own .btn-primary. */
body:not(.venet-mode) .v-btn--primary {
  background: #ffffff;
  border-color: #ffffff;
  color: #0a0a0a;
}
body:not(.venet-mode) .v-btn--primary:hover {
  background: #e6e6e6;
  border-color: #e6e6e6;
}
body:not(.venet-mode) .v-btn--ghost {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
}
body:not(.venet-mode) .v-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.form-input:focus-visible,
select.form-input:focus-visible,
textarea.form-input:focus-visible {
  outline: 2px solid var(--ios-tint);
  outline-offset: 1px;
}

/* Labels and hints are shared between the light portal and the DARK public
   pages (/support, /apply, /login). Colour must follow the theme, or the
   labels vanish — size and weight can be stated once for both. */
.v-field-label,
.form-label {
  font: var(--ios-t-subhead);
  font-weight: 500;
  letter-spacing: var(--ios-tr-subhead);
}
.v-field-hint {
  font: var(--ios-t-footnote);
  letter-spacing: var(--ios-tr-footnote);
}
body.venet-mode .v-field-label,
body.venet-mode .form-label { color: var(--ios-label2); }
body.venet-mode .v-field-hint { color: var(--ios-label3); }

body:not(.venet-mode) .v-field-label,
body:not(.venet-mode) .form-label { color: rgba(255, 255, 255, 0.72); }
body:not(.venet-mode) .v-field-hint { color: rgba(255, 255, 255, 0.45); }

/* ════════════════════════════════════════════════════════════════
   17. SECTION LABELS

   iOS grouped-list headers are uppercase footnotes at roughly .05em.
   venet.css tracked these at .14em, which reads as a fashion logo
   rather than a UI label.
   ════════════════════════════════════════════════════════════════ */
.v-card__label {
  font-family: var(--ios-font);
  font-size: 0.75rem;            /* 12px */
  line-height: 1.333;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ios-label2);
  margin-bottom: 8px;
}
.v-card__title {
  font-family: var(--ios-font);
  font-size: 1.0625rem;          /* 17px headline */
  font-weight: 600;
  letter-spacing: var(--ios-tr-headline);
  color: var(--ios-label);
}

/* ════════════════════════════════════════════════════════════════
   18. IN-VIEW TABS → segmented control
   ════════════════════════════════════════════════════════════════ */
.venet-subnav {
  background: var(--ios-mat-thin-bg);
  -webkit-backdrop-filter: var(--ios-mat-thin-fx);
  backdrop-filter: var(--ios-mat-thin-fx);
  border-bottom: 0;
  box-shadow: inset 0 -0.5px 0 var(--ios-separator);
}
.venet-subnav__link,
.venet-subnav__item {
  font: var(--ios-t-subhead);
  font-weight: 500;
  letter-spacing: var(--ios-tr-subhead);
  text-transform: none;
  border-radius: var(--ios-r-xs);
}
.venet-subnav__link[aria-current="page"],
.venet-subnav__item[aria-selected="true"] {
  color: var(--ios-tint);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   19. LANDING — LIQUID GLASS

   Scoped to the marketing surfaces. The portal above stays on the
   classic light material; this is the dark, refractive half of the
   hybrid.

   What separates "liquid glass" from ordinary glassmorphism is three
   things layered together: a saturation boost so colour survives the
   blur, a specular rim that is bright at the top and gone by the
   middle, and an inner top highlight that reads as thickness. A flat
   1px border at uniform opacity gets none of that.
   ════════════════════════════════════════════════════════════════ */

/* ── Floating nav capsule ── */
.nav {
  background: var(--ios-mat-dark-bg);
  -webkit-backdrop-filter: var(--ios-mat-dark-fx);
  backdrop-filter: var(--ios-mat-dark-fx);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background var(--ios-dur) var(--ios-ease),
              box-shadow var(--ios-dur) var(--ios-ease),
              border-color var(--ios-dur) var(--ios-ease),
              padding var(--ios-dur) var(--ios-ease);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--ios-edge-dark);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Contracts as you scroll, the way iOS bars tighten. */
.nav--scrolled {
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--ios-mat-dark-thick-bg);
  -webkit-backdrop-filter: var(--ios-mat-dark-thick-fx);
  backdrop-filter: var(--ios-mat-dark-thick-fx);
}
.nav__link {
  font-size: 0.9375rem;
  letter-spacing: var(--ios-tr-subhead);
}

/* ── Gradient-clipped headings ──
   REGRESSION FROM THIS LAYER, fixed here. These four use
   `background-clip: text` with `text-fill-color: transparent`, so the
   gradient paints only inside the element's padding box — any glyph
   part outside it simply is not drawn. Space Mono's descenders are
   short enough to sit inside a 1.08 line box; SF's and Segoe's are
   not, so switching the heading font clipped the tail off every g, y
   and p on a last line. Widening the box restores them. */
.hero__headline,
.section__title,
.status-title,
.login-title {
  line-height: 1.14;
  padding-bottom: 0.1em;
}

/* ── Refractive panels ──
   Scoped to `body:not(.venet-mode)`. `.glass` is a generic name the
   portal reuses: the /upgrade pricing cards are `class="glass
   v-price-card"`, and .v-price-card deliberately neutralises the
   glass (backdrop-filter:none, ::before{display:none}) to sit on a
   light page. An unscoped .glass here is later in source at equal
   specificity, so it beat that and painted dark translucent panels
   onto the light portal. The same reasoning applies to the buttons
   below, which the portal also uses. */
body:not(.venet-mode) .glass {
  background: var(--ios-mat-dark-bg);
  -webkit-backdrop-filter: var(--ios-mat-dark-fx);
  backdrop-filter: var(--ios-mat-dark-fx);
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: var(--ios-r-xl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 24px 60px -28px rgba(0, 0, 0, 0.75);
}
body:not(.venet-mode) .glass::before { background: var(--ios-edge-dark); }

/* ── Landing buttons ── */
body:not(.venet-mode) .btn-primary,
body:not(.venet-mode) .btn-ghost,
body:not(.venet-mode) .btn-google {
  font-family: var(--ios-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--ios-tr-callout);
  border-radius: var(--ios-r-full);
  min-height: var(--ios-touch);
  padding-inline: 22px;
  transition: transform var(--ios-dur-fast) var(--ios-spring),
              background var(--ios-dur-fast) var(--ios-ease),
              border-color var(--ios-dur-fast) var(--ios-ease),
              box-shadow var(--ios-dur-fast) var(--ios-ease);
}
body:not(.venet-mode) .btn-primary { position: relative; overflow: hidden; }
/* Specular sweep on hover — light travelling across the surface. */
body:not(.venet-mode) .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 70%);
  transform: translateX(-120%);
  transition: transform var(--ios-dur-slow) var(--ios-ease);
  pointer-events: none;
}
body:not(.venet-mode) .btn-primary:hover::before { transform: translateX(120%); }
body:not(.venet-mode) .btn-primary:active,
body:not(.venet-mode) .btn-ghost:active,
body:not(.venet-mode) .btn-google:active { transform: scale(0.96); }

body:not(.venet-mode) .btn-ghost,
body:not(.venet-mode) .btn-google {
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ── Pricing cards ── */
.land-price-card {
  border-radius: var(--ios-r-xl);
  background: var(--ios-mat-dark-bg);
  -webkit-backdrop-filter: var(--ios-mat-dark-fx);
  backdrop-filter: var(--ios-mat-dark-fx);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 60px -30px rgba(0, 0, 0, 0.8);
}
.land-price-card__button {
  border-radius: var(--ios-r-full);
  font-family: var(--ios-font);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: var(--ios-tr-subhead);
  text-transform: none;
}

/* ── Scroll reveals on the iOS spring ── */
.fade-in {
  transition: opacity var(--ios-dur-slow) var(--ios-ease),
              transform var(--ios-dur-slow) var(--ios-spring);
}

/* ════════════════════════════════════════════════════════════════
   20. ADMIN

   admin.css declares the same --v-* names as the portal, so the
   bridge in section 2 rethemes it for free. One exception: the admin
   sidebar is dark by design, and the bridge blanks --v-sidebar-* to
   transparent for the portal's glass rail. This scope hands the dark
   material back.
   ════════════════════════════════════════════════════════════════ */
.va-admin {
  --v-sidebar-bg:      #111413;
  --v-sidebar-surface: #171a19;
  --v-sidebar-text:     rgba(255, 255, 255, 0.58);
  --v-sidebar-text-act: #ffffff;
  --v-sidebar-hover:    rgba(255, 255, 255, 0.06);
  --v-sidebar-active:   rgba(255, 255, 255, 0.10);
  --v-sidebar-divider:  rgba(255, 255, 255, 0.08);
  --v-sidebar-label:    rgba(255, 255, 255, 0.34);
}
.va-admin .va-sidebar {
  background: rgba(17, 20, 19, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(30px);
  backdrop-filter: saturate(160%) blur(30px);
}
.va-admin .va-card,
.va-admin .va-auth__card {
  border-radius: var(--ios-r-lg);
  box-shadow: var(--ios-sh-1), var(--ios-edge-hairline);
}
.va-admin .va-btn {
  border-radius: var(--ios-r-sm);
  font-weight: 600;
  letter-spacing: var(--ios-tr-subhead);
  text-transform: none;
  transition: transform var(--ios-dur-fast) var(--ios-spring),
              background var(--ios-dur-fast) var(--ios-ease);
}
.va-admin .va-btn:active { transform: scale(0.96); }
.va-admin .va-input {
  border-radius: var(--ios-r-sm);
  font-size: 1rem;               /* keeps admin logins clear of Safari zoom */
  border: 1px solid var(--ios-separator);
}
.va-admin .va-nav__item,
.va-admin .va-sidebar__link { border-radius: var(--ios-r-sm); }
.va-admin .va-badge { border-radius: var(--ios-r-full); font-weight: 600; }
@supports (corner-shape: squircle) {
  .va-admin .va-card,
  .va-admin .va-auth__card,
  .va-admin .va-btn,
  .va-admin .va-input { corner-shape: squircle; }
}

/* ════════════════════════════════════════════════════════════════
   21. LEGIBILITY FLOOR

   An audit of computed sizes across 19 views at 390px found ~80
   classes rendering below 13px, bottoming out at 8.8px. Those sizes
   came from the old Space Mono treatment, where wide tracking and
   uppercase made tiny text read as a deliberate label; in SF at the
   same size it just reads as small.

   Two tiers, no value below 11px:
     12px  uppercase eyebrows, micro-labels, badges, counts
     13px  secondary prose, chips, links, form labels

   Applied at every width, not just mobile: these are absolute pixel
   sizes, so they were equally small on desktop.
   ════════════════════════════════════════════════════════════════ */

/* ── 12px tier ── */
.venet-sidebar__label,
.venet-sidebar__badge,
.vc-tab__index,
.disc-filter-menu__eyebrow,
.disc-filter-menu__foot,
.disc-filter-trigger__count,
.disc-hero__eyebrow,
.disc-hero__signal-head,
.disc-hero__signal-foot,
.hero__signal-top,
.hero__signal-live,
.hero__signal-footer,
.hero__signal-avatar,
.hero__eyebrow,
.section__eyebrow,
.land-price-card__badge,
.land-price-card__name,
.v-price-card__name,
.dash-eyebrow,
.dash-stat__label,
.v-section-label,
.v-badge,
.v-help,
.vc-sidebar__eyebrow,
.vc-sidebar__count,
.vc-daily-card__eyebrow,
.vw-hero__label,
.vw-hero__wordmark,
.vh-promo__eyebrow,
.apply-tag-optional,
.apply-section-title,
.support-public-card__label,
.v-wiz__step-label {
  font-size: 0.75rem;            /* 12px */
  letter-spacing: 0.05em;
}

/* ── 13px tier ── */
.venet-sidebar__signout,
.disc-filter-trigger,
.disc-filter-clear,
.disc-chip,
.vc-filter,
.vc-type,
.vc-daily-chip,
.vc-daily-card__status,
.vc-conversation-filter,
.vc-sidebar__hint,
.v-chip-toggle,
.v-pill,
.v-list-item__sub,
.v-setup-pct,
.vw-field__label,
.vw-hero__note,
.vw-fineprint,
.vw-all-link,
.vh-promo__btn,
.dash-checkin__share,
.dash-today-band__link,
.apply-hint,
.apply-as,
.apply-mail-note,
.hero__reassurance,
.hero__eyebrow-mark,
.land-pricing__note,
.footer__link,
.footer__copy,
.form-label,
.v-field-label,
.venet-main small,
.v-card small {
  font-size: 0.8125rem;          /* 13px */
}

/* Tab labels: iOS spec is 10px, but at Venet's label lengths ("Business",
   "Discover") 11px is the difference between glanceable and squinting. */
.venet-bottom-nav__item { font-size: 0.6875rem; }

/* These two beat the base .v-btn rule on specificity (descendant selectors),
   so they kept the old 11–12px button text. */
.dash-header-actions .v-btn,
.disc-hero__actions .v-btn {
  font-size: 0.9375rem;          /* 15px, matching .v-btn */
}

/* Holdouts that outrank a single class: #view-settings scopes these with an
   ID (1,0,1,0), and .disc-filter-options adds a second class. Matched here
   rather than escalating every rule above with repeated-class hacks. */
#view-settings .v-section-label {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
#view-settings .vc-tab__index { font-size: 0.75rem; }
.disc-filter-options .disc-chip { font-size: 0.8125rem; }
.land-access__step span { font-size: 0.75rem; }
.hero__proof li { font-size: 0.8125rem; }
.disc-filter-group > span,
.disc-filter-group > div { font-size: 0.8125rem; }

/* ════════════════════════════════════════════════════════════════
   22. CHAT

   Two problems, both visible on /chats.

   1. Box-in-a-box search. `.vc-search` is a wrapper that draws the
      field — border, radius, background — around an input that
      venet.css deliberately strips bare. The blanket field styling in
      section 16 is more specific than `.vc-search input`, so it gave
      that bare input its own border and white fill, nesting a second
      box inside the first. These inputs must stay invisible; the
      wrapper is the field.

   2. 15px icons with 11.5px labels. iOS toolbar glyphs sit around
      20px. The SVGs carry hardcoded width/height attributes, which
      CSS overrides cleanly.
   ════════════════════════════════════════════════════════════════ */
/* Specificity note: the chat search field is a bare `input[type="search"]`
   with no class, so section 16's `.venet-main input[type="search"]` (0,0,2,1)
   outranks a plain `.vc-search input` (0,0,1,1). Matching that weight with
   `.venet-main .vc-search input` and relying on later source order is what
   actually strips the nested box. */
.venet-main .vc-search input,
.venet-main .vc-group-modal__search input,
.vc-search input,
.vc-group-modal__search input,
.ios-search input {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  font-size: 1.0625rem;          /* 17px — still clear of Safari zoom */
}
.venet-main .vc-search input:focus,
.venet-main .vc-group-modal__search input:focus,
.vc-search input:focus,
.vc-group-modal__search input:focus,
.ios-search input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}
/* The wrapper owns the focus ring now that the input has none. */
.vc-search { min-height: 44px; border-radius: var(--ios-r-sm); }
.vc-search:focus-within {
  border-color: var(--ios-label3);
  box-shadow: 0 0 0 3.5px rgba(15, 15, 15, 0.06);
}
@supports (corner-shape: squircle) {
  .vc-search { corner-shape: squircle; }
}

/* ── Icons ── */
.vc-search svg,
.vc-group-modal__search svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.vc-header-btn svg {
  /* flex-basis, not just width: these sit in an inline-flex button that
     squeezed the glyph to 6px wide when only width/height were set. */
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.vc-header-btn {
  border-radius: var(--ios-r-sm);
  gap: 7px;
}
/* Under 767px venet.css turns these into square icon-only buttons with
   `padding: 0`. Section 13's `.v-btn { padding: 8px 16px }` loads later and
   silently put the horizontal padding back, leaving a 40px button with 32px
   of padding and 8px for the icon. Restore the icon-only geometry. */
@media (max-width: 767px) {
  .vc-header-btn {
    padding: 0;
    gap: 0;
    justify-content: center;
  }
}
.vc-header-btn__label {
  font-size: 0.8125rem;          /* 13px, up from 11.5px */
  font-weight: 500;
  letter-spacing: var(--ios-tr-footnote);
}
@supports (corner-shape: squircle) {
  .vc-header-btn { corner-shape: squircle; }
}

/* Composer controls read as taps, not as decoration. */
.vc-composer__send svg,
.vc-composer__action svg,
.vc-composer svg {
  width: 20px;
  height: 20px;
}
.vc-composer__input { font-size: 1.0625rem; }

/* Last two undersized interactive glyphs found by a sweep of all portal
   views — 12px and 15px inside tappable controls. */
.disc-raising-option__control svg { width: 16px; height: 16px; }
.vc-type svg { width: 17px; height: 17px; }

/* ════════════════════════════════════════════════════════════════
   23. REDUCED MOTION
   Springs and scale presses are exactly what motion-sensitive users
   ask to be spared. Opacity transitions survive; movement does not.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ios-btn:active { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   24. LANDING — LAYOUT & RHYTHM

   Section 19 above gave the landing its glass material. This section
   fixes its geometry: type scale, fold budget, grid alignment and
   vertical rhythm.

   Why these selectors carry #view-home
   ------------------------------------
   css/style.css sets `#view-home .hero__headline` (1,0,1). Section 19
   tried to fix the same element at `.hero__headline` (0,0,1) and has
   never won — the clipped descenders its comment describes are still
   on screen. Matching the ID is what makes the fix land. This is the
   documented alternative to !important, which the spec forbids here.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero headline ──
   Was: clamp(3.45rem, 7vw, 6.7rem) / 0.98 / -0.075em.
   0.98 is leading tighter than the type size, so descenders collided
   AND were clipped by background-clip:text. -0.075em is a poster
   tracking value that jams SF at display sizes. */
#view-home .hero__headline {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
  padding-bottom: 0.1em;
}

/* ── Section titles ──
   These already inherit 1.14 from Section 19 (they face no ID rule),
   so only size and tracking need correcting. */
#view-home .section__title {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  padding-bottom: 0.1em;
}

/* ── Hero headline phone override ──
   css/style.css:1423 sets clamp(3rem, 15vw, 4.6rem) inside
   @media (max-width: 600px), which resolves to 58.5px on a 390px
   phone and wraps the current 49-character headline to roughly six
   lines. A media query adds no specificity, so this still needs the
   ID, and must come after the rule above to win on source order. */
@media (max-width: 600px) {
  #view-home .hero__headline {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
  }
}

/* ── Fold budget ──
   Measured at 1280x583: the CTA sat at y=604, 21px past the fold, with
   the button itself another 48px below that.

   These carry #view-home because css/style.css:1322-1544 is a separate
   landing theme scoped that way; the generic .hero rules at :440/:925
   never reach this page. Matching the ID is the documented alternative
   to !important, which the spec forbids in this layer.

   The height came from stacked padding — .hero 100px + .hero__layout
   112px puts content at y=212 before a single word is drawn — and from
   the headline wrapping to three lines inside a 680px cap. */
#view-home .hero {
  min-height: min(780px, 92svh);
}

.hero {
  padding-top: 84px;
}

@media (min-width: 901px) {
  #view-home .hero__layout {
    padding: 24px 0 56px;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.55fr);
  }
  #view-home .hero__headline {
    max-width: 760px;
  }
}

/* ── Nav on the content grid ──
   .nav was capped at 860px while the landing container is 1180px, so
   the wordmark sat 128px inboard of the headline beneath it. Matching
   the widths puts both on one vertical line. Both already pad 32px.

   Scoped to the home view. `.nav` is one shared element outside every view
   container, so an unscoped 1180px cap also widened it on /apply (1100px
   container) and /terms and /privacy (760px) — 420px wider than the content
   on the legal pages. The router marks inactive views aria-hidden="true"
   (js/router.js:83-88), so this matches only while home is showing; every
   other view falls back to the 860px cap in css/style.css:282. */
@media (min-width: 901px) {
  body:has(#view-home:not([aria-hidden="true"])) .nav {
    max-width: 1180px;
  }
}

/* ── One vertical rhythm ──
   The landing's real base is `#view-home .section { padding: 112px 0 }`
   (css/style.css:1390), not the generic `.section` 128px rule at :511 —
   same #view-home theme block that caught Task 2. This rule ties it at
   (1,0,1) and wins on source order.

   On top of that base it was overridden piecemeal by an !important on
   #landFeatures, a hard value on #landCta, and two inline style
   attributes in index.html. Those four are removed at source in this
   task so this token is the only thing setting section padding. */
#view-home {
  --land-y: clamp(64px, 7vw, 112px);
}
#view-home .section {
  padding-block: var(--land-y);
}

/* ════════════════════════════════════════════════════════════════
   25. CHAT — TAB BAR CLEARANCE ON MOBILE

   REGRESSION FROM THIS LAYER, fixed here. Section 12 restored the
   mobile tab bar, which venet.css had been hiding by accident since it
   was written: `display: flex` at :1244 sits inside a media query,
   then `display: none` at :2473 is a plain later rule at equal
   specificity. The bar had therefore never rendered at any width, and
   the chat thread's clearance was written for a world without one —
   venet.css:4413 reserves only `env(safe-area-inset-bottom)`, which is
   0px on Android and on every iPhone with no home indicator.

   Measured at 390x844 with the thread open: the composer sat at
   783-844 while the bar occupied 786-844. 58px of a 61px composer was
   behind it; 3px showed.

   The fix follows the pattern the markup already implies. The thread
   hides the page header (venet.css:2136) and ships a back button
   (#vcBack, mobile-only at :2115), so a conversation is a full-screen
   push — the same model as iOS Messages. Hiding the bar there makes
   venet.css's safe-area-only padding correct again rather than
   fighting it.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Each view carries its own .venet-bottom-nav as a following sibling
     of .venet-main inside .venet-app, so `~` reaches it. At (0,3,0)
     this beats Section 12's `.venet-bottom-nav { display: flex }`. */
  .venet-main--chats.venet-main--thread ~ .venet-bottom-nav {
    display: none;
  }

  /* The conversation LIST keeps its tab bar. venet.css:4407 reserves
     56px for it, but Section 12's bar is 58px plus the home indicator,
     so the last row was clipped. Left at (0,1,0) deliberately: the
     thread's own (0,2,0) rule still wins, and it should — with the bar
     hidden above, safe-area alone is the right clearance there. */
  .venet-main--chats {
    padding-bottom: calc(var(--ios-tabbar-h) + 9px + var(--ios-safe-b));
  }
}