@font-face {
      font-family: 'Cocogoose';
      src: url('../fonts/Cocogoose-Pro-Light.woff2') format('woff2'),
           url('https://raw.githubusercontent.com/ayditechnologies/orth/main/Cocogoose-Pro-Light.otf') format('opentype'),
           url('https://raw.githubusercontent.com/ayditechnologies/orth/main/Cocogoose-Pro-Light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --section-gap: 300px;   /* one rhythm: each section pads half on each side */
      /* ── Sage palette (V2 green-accent system) ── */
      --sage-950: #1c2319;
      --sage-900: #2f3c2b;
      --sage-800: #43553e;
      --sage-700: #536a4c;
      --sage-600: #647f5d;
      --sage-500: #85aa7b;   /* primary */
      --sage-400: #9ebb96;
      --sage-300: #b6ccb0;
      --sage-200: #cce0c8;
      --sage-100: #e6f0e4;
      --sage-50:  #f5faf4;

      --paper:   #f5f4f3;
      --surface: #ffffff;
      --ink-1:   #000000;
      --ink-2:   rgba(0,0,0,0.70);
      --ink-3:   rgba(0,0,0,0.50);
      --ink-4:   rgba(0,0,0,0.32);
      --line:     rgba(0,0,0,0.08);
      --line-mid: rgba(0,0,0,0.14);
      --pill-bg:  rgba(0,0,0,0.04);
      --pill-hover: rgba(0,0,0,0.06);
      --nav-bg:   rgba(245,244,243,0.82);
      --btn-fill: var(--sage-700);
      --btn-text: #ffffff;
      --btn-fill-hover: var(--sage-800);
      /* Accent — the green that gets surfaced in type + buttons + eyebrows */
      --accent:      var(--sage-600);
      --accent-deep: var(--sage-700);
      --accent-soft: var(--sage-100);
      --font-display: 'Source Serif 4', serif;
      --font-nav:     'Cocogoose', sans-serif;
      --font-body:    'Nunito Sans', sans-serif;
      --icon-card-bg: var(--surface);

      /* ── Layout system ──────────────────────────────────────
         Three container tiers, one gutter. Every section picks
         a tier and references --gutter for horizontal padding.

         narrow  – single text stream (FAQ, mission, testimonial).
                   Display-type breathing room over strict readability;
                   long body copy inside should still cap ~720px.
         default – grid + paired image/text content (most sections).
         wide    – showcase canvas (hero, CTA bands, carousels).
      ──────────────────────────────────────────────────────── */
      --container-narrow:  1080px;
      --container-default: 1400px;
      --container-wide:    1820px;
      --gutter:             80px;
    }

    html { scroll-behavior: smooth; }
    body {
      background: var(--paper);
      color: var(--ink-1);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }



    /* ── NAV ── */
    nav {
      position: fixed; top:0; left:0; right:0; z-index:1000;
      display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center; padding: 0 48px; height: 62px;
      background: transparent;
      transition: background 0.3s, backdrop-filter 0.3s, transform 0.32s ease;
    }
    nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
    nav.hidden { transform: translateY(-100%); }
    .nav-logo { display:flex; align-items:center; text-decoration:none; }
    .nav-logo .logo-dark { display: none; }
    body.theme-dark .nav-logo .logo-light { display: none; }
    body.theme-dark .nav-logo .logo-dark { display: block; }
    .proof-pending { display: none !important; }
    /* Collapse a case section whose only row is proof-pending, so no empty gap; it returns when a case injects */
    .f-case:not(:has(.f-case-row:not(.proof-pending))) { display: none; }
    /* With that case collapsed, the banner's top margin would show a band of paper between
       two dark sections. Drops to 0 only while the case is empty; returns when one injects. */
    .f-case:not(:has(.f-case-row:not(.proof-pending))) + .f-teams-banner { margin-top: 0; }

    /* ── LANDING-ONLY section overrides (these classes are shared by 17-31 other pages) ── */
    body[data-page="field"] .f-int,
    body[data-page="field"] .f-plans-prompt,
    body[data-page="field"] .f-cta { display: none; }
    /* the "Built around the decisions" carousel, i.e. the one right after the sticky scroll */
    .nav-links { display:flex; gap:36px; list-style:none; justify-self:center; align-items:center; }
    .nav-links a { text-decoration:none; color:var(--ink-1); font-size:15px; font-weight:600; cursor:pointer; transition:opacity 0.2s; }
    .nav-links a:hover { opacity:0.6; }
    .nav-trigger { display:inline-flex; align-items:center; }
    .nav-trigger::after {
      content:''; width:5px; height:5px; margin-left:7px;
      border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
      transform:translateY(-1px) rotate(45deg); opacity:0.55;
    }
    .nav-right { justify-self:end; }
    .btn-nav {
      background: var(--btn-fill); color: var(--btn-text);
      border: 1px solid var(--btn-fill);
      padding: 8px 22px; border-radius:100px;
      font-size:13px; font-family:var(--font-body); font-weight:600;
      cursor:pointer; text-decoration:none; transition:opacity 0.2s;
      white-space: nowrap; flex-shrink: 0;   /* never wrap onto two lines, never squeeze */
    }
    .btn-nav:hover { opacity:0.82; }

    /* Nav fits down to 1024: tighten links + padding so the row never crowds. */
    @media (min-width: 1024px) and (max-width: 1199px) {
      nav { padding: 0 28px; }
      .nav-links { gap: 22px; }
    }
    /* Below 1024 the full desktop row cannot fit cleanly, so collapse to the
       hamburger (matches the original desktop-from-1024 intent). Keeps the
       Fieldroom / Get started buttons from ever colliding with the links. */
    @media (max-width: 1023px) {
      nav { padding: 0 28px; grid-template-columns: 1fr auto; }
      .nav-links { display: none; }
      .nav-right { gap: 8px; }
      .nav-right .btn-nav,
      .nav-burger { display: flex; }
    }

    /* ── HAMBURGER + MOBILE MENU ──
       Two-line burger that morphs into an X when open.
       Hidden on desktop, shown via the mobile media query. */
    .nav-burger {
      display: none;
      width: 44px; height: 44px;
      background: transparent; border: 0;
      flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; cursor: pointer; padding: 0;
      transition: opacity 0.2s;
    }
    .nav-burger:hover { opacity: 0.7; }
    .nav-burger span {
      display: block; width: 18px; height: 2px;
      background: var(--ink-1); border-radius: 2px;
      transform-origin: center;
      transition: transform 0.28s ease, opacity 0.2s;
    }
    body.menu-open .nav-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
    body.menu-open .nav-burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

    .mobile-menu {
      position: fixed; inset: 0;
      background: var(--paper);
      z-index: 999;  /* below nav (1000) so burger stays on top */
      display: flex; flex-direction: column;
      padding: 80px var(--gutter) 32px;
      overflow-y: auto;
      opacity: 0; pointer-events: none;
      transition: opacity 0.28s ease;
    }
    body.menu-open .mobile-menu { opacity: 1; pointer-events: auto; }
    body.menu-open { overflow: hidden; }

    .mobile-menu-links {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column;
      flex: 1;
    }

    /* ── Top-level row: link or accordion trigger ── */
    .mobile-menu-links > li > a,
    .mobile-menu-links > li > .sub-trigger {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%;
      padding: 14px 0;
      font-family: var(--font-display);
      font-size: clamp(24px, 6vw, 32px);
      font-weight: 400; letter-spacing: -0.01em; line-height: 1.1;
      color: var(--ink-1);
      text-decoration: none;
      background: transparent; border: 0;
      cursor: pointer; text-align: left;
    }
    body.style-system .mobile-menu-links > li > a,
    body.style-system .mobile-menu-links > li > .sub-trigger {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .mobile-menu-links .sub-trigger i {
      font-size: 22px; color: var(--ink-3);
      transition: transform 0.28s ease;
    }
    .mobile-menu-links .has-sub.open .sub-trigger i { transform: rotate(180deg); }

    /* ── Accordion body ── */
    .mobile-menu-links .sub-list {
      max-height: 0; overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .mobile-menu-links .has-sub.open .sub-list { max-height: 4000px; }
    /* Open accordion turns into an edge-to-edge panel.
       Negative horizontal margin breaks out of the menu's --gutter padding,
       inner padding pulls content back to the same horizontal alignment. */
    .mobile-menu-links .has-sub {
      background: transparent;
      margin: 0 calc(-1 * var(--gutter));
      padding: 0 var(--gutter);
      transition: background 0.28s ease;
    }
    .mobile-menu-links .has-sub.open { background: var(--surface); }

    /* Fade in the inner content as it expands */
    .mobile-menu-links .sub-list-inner {
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.32s ease 0.06s, transform 0.32s ease 0.06s;
    }
    .mobile-menu-links .has-sub.open .sub-list-inner {
      opacity: 1;
      transform: translateY(0);
    }
    .sub-list-inner {
      padding: 2px 0 12px;
      display: flex; flex-direction: column; gap: 20px;
    }

    /* Plain sub-list (Plans — no categories/images) */
    .sub-list-plain { gap: 0; padding: 2px 0 12px; }
    .sub-list-plain a {
      display: block;
      padding: 8px 0;
      font-family: var(--font-body);
      font-size: 16px; font-weight: 500;
      color: var(--ink-2);
      text-decoration: none;
    }

    /* ── Category column: single-column item list ── */
    .menu-cat { display: flex; flex-direction: column; }
    .menu-cat-img {
      width: 100%; aspect-ratio: 5/2;
      border-radius: 12px;
      background-size: cover; background-position: center;
      margin-bottom: 10px;
    }
    .menu-cat-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3);
      margin-bottom: 4px;
    }
    .menu-cat .menu-item {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 0;
      font-size: 15px; font-weight: 500; line-height: 1.25;
      color: var(--ink-1);
      text-decoration: none;
    }
    .menu-cat .menu-item .feat-mega-dot {
      width: 6px; height: 6px; border-radius: 50%;
      flex-shrink: 0;
    }

    /* ── Featured card (Customer Stories) ── */
    .menu-feature-card {
      position: relative;
      aspect-ratio: 5/3;
      border-radius: 14px;
      overflow: hidden;
      background-size: cover; background-position: center;
      text-decoration: none;
      display: block;
    }
    .menu-feature-card-content {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 18px 20px;
      z-index: 1;
    }
    .menu-feature-card-title {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-display);
      font-size: 19px; font-weight: 400; letter-spacing: -0.01em;
      color: #fff;
    }
    body.style-system .menu-feature-card-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300;
    }
    .menu-feature-card-desc {
      margin-top: 4px;
      font-size: 14px; color: rgba(255,255,255,0.92);
      line-height: 1.4;
    }

    /* ── Foot links inside an accordion (Integrations, All features, etc.) ── */
    .menu-cat-foot {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 8px;
    }
    .menu-cat-foot a {
      font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-2);
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 6px;
    }

    .mobile-menu-foot {
      margin-top: 32px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .mobile-menu-foot .btn-fill { justify-content: center; padding: 16px 30px; font-size: 16px; }

    /* ── DROPDOWN ── */
    .nav-dd-wrap { position:relative; }
    /* invisible bridge so cursor can travel from trigger to menu without losing hover */
    .nav-dd-wrap::before {
      content:'';
      position:absolute;
      top:100%; left:50%;
      transform: translateX(-50%);
      width:200px; height:24px;
      pointer-events:auto;
    }
    .nav-dd {
      position:fixed; top:80px; left:50%;
      transform: translateX(-50%) translateY(-6px);
      background: var(--surface);
      border-radius:16px; padding:6px;
      min-width:240px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.10);
      opacity:0; pointer-events:none;
      transition: opacity 0.18s ease, transform 0.18s ease;
      z-index: 1001;
    }
    .nav-dd::before {
      content: '';
      position: absolute;
      top: -18px; left: 0; right: 0; height: 18px;
    }
    .nav-dd-wrap:hover .nav-dd,
    .nav-dd-wrap.open .nav-dd {
      opacity:1; pointer-events:auto;
      transform: translateX(-50%) translateY(0);
    }
    .nav-dd a {
      display:block; padding:10px 16px;
      font-size:15px; font-weight:500;
      color:var(--ink-1); text-decoration:none;
      border-radius:10px; cursor:pointer;
      transition: background 0.12s;
    }
    .nav-dd a:hover { background: var(--pill-hover); }
    .nav-dd a.active { font-weight:700; }

    /* ── SHARED ── */
    .wrap { max-width: var(--container-default); margin: 0 auto; padding: 0 var(--gutter); }
    .eyebrow {
      display:inline-block; font-family:var(--font-body);
      font-size:14px; font-weight:700; letter-spacing:0.14em;
      text-transform:uppercase; color:var(--accent); margin-bottom:28px;
    }
    h1.display {
      font-family: var(--font-display);
      font-size: clamp(46px, 6.4vw, 92px);
      font-weight: 400; letter-spacing:-0.015em; line-height:1.02;
      color: var(--ink-1); margin-bottom:24px;
    }
    h2.sec-head {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 54px);
      font-weight:400; letter-spacing:-0.015em; line-height:1.08;
      color: var(--ink-1); margin-bottom:20px;
    }
    h3.mid-head {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.4vw, 34px);
      font-weight:400; letter-spacing:-0.01em; line-height:1.2;
      color: var(--ink-1); margin-bottom:14px;
    }
    .body-lg { font-size:19px; color:var(--ink-2); line-height:1.55; }
    /* Paragraph scale: caption 16 / body 17.5 / lead 18.5 */
    .body-md { font-size:17.5px; color:var(--ink-2); line-height:1.6; }
    .body-sm { font-size:16px; color:var(--ink-2); line-height:1.6; }
    .divider { height:1px; background:var(--line); }

    /* Anchors driven by onclick (e.g. showAnchor demo CTAs) have no href, so they
       don't get the link pointer by default — force it. */
    a[onclick] { cursor: pointer; }
    .btn-fill {
      background: var(--btn-fill); color: var(--btn-text);
      border: 1px solid var(--btn-fill);
      padding:13px 30px; border-radius:100px;
      font-size:15px; font-family:var(--font-body); font-weight:600;
      cursor:pointer; text-decoration:none; transition:opacity 0.2s;
      display:inline-flex; align-items:center;
    }
    .btn-fill:hover { opacity:0.84; }
    .btn-outline {
      background: transparent; color:var(--ink-1);
      border: 1px solid var(--line-mid);
      padding:13px 28px; border-radius:100px;
      font-size:15px; font-family:var(--font-body); font-weight:500;
      cursor:pointer; text-decoration:none; transition:background 0.2s;
      display:inline-flex; align-items:center;
    }
    .btn-outline:hover { background:var(--pill-hover); }
    .btn-text {
      display:inline-flex; align-items:center; gap:7px;
      min-height:44px; padding:10px 4px;
      font-size:15px; font-weight:600; color:var(--accent);
      text-decoration:none; cursor:pointer; transition:color 0.2s, gap 0.2s;
    }
    .btn-text:hover { color:var(--accent-deep); gap:11px; }

    /* ── TAB SWITCH ── */
    .tab-switch {
      position:relative; display:inline-flex; align-items:center;
      background:var(--pill-bg); border-radius:100px; padding:4px;
    }
    .tab-pill {
      position:absolute; top:4px; height:calc(100% - 8px);
      background:var(--surface); border-radius:100px;
      transition: left 0.22s ease, width 0.22s ease;
      pointer-events:none;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .tab-opt {
      position:relative; z-index:1; background:transparent; border:none;
      padding:9px 24px; font-size:15px; font-weight:500;
      font-family:var(--font-body); color:var(--ink-3);
      cursor:pointer; white-space:nowrap; user-select:none;
      transition:color 0.2s;
    }
    .tab-opt.active { color:var(--ink-1); font-weight:600; }


    /* ── UI PLACEHOLDER ── */
    .ui-ph { background:var(--surface); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:24px; flex-shrink:0; }

    /* ── FOOTER (always opposite mode) ── */

    /* Light site → dark footer */
    footer {
      --accent-1: #ff7b54;
      --paper: #0c0f13;
      --surface: #141719;
      --ink-1: #ffffff;
      --ink-2: rgba(255,255,255,0.70);
      --ink-3: rgba(255,255,255,0.50);
      --ink-4: rgba(255,255,255,0.32);
      --line-soft: rgba(255,255,255,0.08);
      --line-mid:  rgba(255,255,255,0.14);
      background: var(--paper);
      color: var(--ink-1);
      margin-top: 100px;
    }
    /* Dark site → light footer */
    body.theme-dark footer {
      --accent-1: #d35a35;
      --paper: #f5f4f3;
      --surface: #ffffff;
      --ink-1: #000000;
      --ink-2: rgba(0,0,0,0.70);
      --ink-3: rgba(0,0,0,0.50);
      --ink-4: rgba(0,0,0,0.32);
      --line-soft: rgba(0,0,0,0.06);
      --line-mid:  rgba(0,0,0,0.14);
    }

    /* Parallel sticky banner – sits at the top of the footer, sticks under nav */
    .ft-parallel-wrap { position: relative; }
    .ft-parallel {
      position: sticky; top: 80px;
      width: 100%; height: 70vh; min-height: 540px;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .ft-parallel .parallax-bg {
      position: absolute;
      inset: -20% 0;
      background-size: cover; background-position: center;
      will-change: transform;
    }
    .ft-parallel::after {
      content: ''; position: absolute; inset: 0; z-index: 0;
      background: rgba(0,0,0,0.25); pointer-events: none;
    }

    .ft-parallel-content {
      position: relative; z-index: 1;
      text-align: center;
      max-width: 760px;
      padding: 0 40px;
    }
    .ft-parallel-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.92);
      margin-bottom: 20px;
    }
    .ft-parallel-title {
      font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 400; letter-spacing: -0.02em; line-height: 1.1;
      color: #fff;
      margin-bottom: 22px;
    }
    body.style-system .ft-parallel-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    body.style-system .ft-parallel-title em {
      font-family: 'Source Serif 4', serif; font-style: italic; font-size: 1.19em; font-weight: 400;
    }
    .ft-parallel-sub {
      font-size: 16px; color: rgba(255,255,255,0.92); line-height: 1.6;
      max-width: 580px; margin: 0 auto 32px;
    }
    .ft-parallel-cta {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; color: #0c0f13;
      padding: 14px 28px; border-radius: 100px;
      font-size: 14px; font-weight: 600;
      text-decoration: none; cursor: pointer;
      transition: opacity 0.2s;
    }
    .ft-parallel-cta:hover { opacity: 0.88; }

    /* Footer link grid */
    .ft-body { background: var(--paper); padding: 120px var(--gutter) 60px; position: relative; z-index: 2; }
    .ft-inner { max-width: var(--container-wide); margin: 0 auto; }
    .ft-top {
      display: grid; grid-template-columns: 420px 1fr;
      gap: clamp(80px, 12vw, 240px);
      margin-bottom: 200px; align-items: start;
    }

    /* Left side: subscribe block */
    .ft-subscribe { max-width: 420px; }
    .ft-sub-eyebrow {
      font-size: 15px; font-weight: 600; color: var(--accent-1);
      margin-bottom: 8px;
    }
    .ft-sub-title {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 400; letter-spacing: -0.01em;
      line-height: 1.35;
      color: var(--ink-1);
      margin-bottom: 16px;
    }
    body.style-system .ft-sub-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .ft-sub-copy {
      font-size: 14px; color: var(--ink-2); line-height: 1.6;
      margin-bottom: 28px;
    }
    .ft-sub-copy a { color: var(--ink-1); text-decoration: underline; }
    .ft-sub-form {
      display: flex; align-items: center;
      border-bottom: 1px solid var(--ink-1);
      padding: 8px 0;
    }
    .ft-sub-form input {
      flex: 1; background: transparent; border: 0; outline: 0;
      color: var(--ink-1); font-size: 15px; font-family: var(--font-body);
      padding: 4px 0;
    }
    .ft-sub-form input::placeholder { color: var(--ink-2); }
    .ft-sub-form button {
      background: transparent; border: 0; cursor: pointer;
      color: var(--ink-1); font-size: 18px;
      width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
      transition: opacity 0.2s;
    }
    .ft-sub-form button:hover { opacity: 0.7; }

    /* Right side: 4 link columns */
    .ft-cols {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }
    .ft-col-head {
      font-size: 16px; font-weight: 600; color: var(--ink-1);
      margin-bottom: 24px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .ft-col-head a { color: var(--ink-1); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
    .ft-col-head i { font-size: 15px; }
    .ft-links { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 0; }
    .ft-links a { text-decoration: none; color: var(--ink-2); font-size: 15px; font-weight: 500; cursor: pointer; transition: color 0.2s; }
    .ft-links a:hover { color: var(--ink-1); }

    /* Bottom row: copyright + socials + legal, all right-aligned */
    .ft-bottom {
      display: flex; align-items: center; justify-content: flex-end;
      gap: 32px;
      font-size: 14px; color: var(--ink-2);
    }
    .ft-bottom-copy { color: var(--ink-2); }
    .ft-bottom-socials {
      display: flex; gap: 18px;
    }
    .ft-bottom-socials a {
      color: var(--ink-1); font-size: 18px; opacity: 0.85;
      transition: opacity 0.2s;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .ft-bottom-socials a:hover { opacity: 1; }
    .ft-bottom-links { display: flex; gap: 28px; align-items: center; }
    .ft-bottom-links a { color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
    .ft-bottom-links a:hover { color: var(--ink-1); }


    /* ════════════════════════════════════════════════════
       TECHY MODE – Cocogoose for display, Source Serif italic for emphasis
       ════════════════════════════════════════════════════ */

    /* ORTH wordmark — never italic, always Cocogoose regardless of context */
    .word-orth {
      font-family: 'Cocogoose', sans-serif;
      font-weight: 300;
      font-style: normal;
      letter-spacing: -0.02em;
    }

    /* Global catch-all: every <em> in style-system mode renders as Source Serif italic.
       More-specific rules below override font-size where needed; this just ensures
       no <em> ever faux-italicises Cocogoose. */
    body.style-system em {
      font-family: 'Source Serif 4', serif;
      font-style: italic;
      font-weight: 400;
    }

    body.style-system h1.display,
    body.style-system h2.sec-head,
    body.style-system h3.mid-head {
      font-family: 'Cocogoose', sans-serif;
      font-weight: 300;
      letter-spacing: -0.02em;
    }
    body.style-system h1.display em,
    body.style-system h2.sec-head em,
    body.style-system h3.mid-head em {
      font-family: 'Source Serif 4', serif;
      font-style: italic;
      font-size: 1.19em;
      font-weight: 400;
      letter-spacing: -0.01em;
    }
    /* Catch-all: any <em> inside any heading gets the 1.19em Source Serif
       italic contrast treatment under style-system mode. Per-class rules
       above remain as documentation; new headings inherit automatically. */
    body.style-system h1 em,
    body.style-system h2 em,
    body.style-system h3 em,
    body.style-system h4 em,
    body.style-system h5 em,
    body.style-system h6 em {
      font-family: 'Source Serif 4', serif;
      font-style: italic;
      font-size: 1.19em;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--accent);   /* V2: the signature contrast word goes green */
    }
    body.style-system .card-title {
      font-family: 'Cocogoose', sans-serif;
      font-weight: 300;
      font-size: 29px;
      letter-spacing: -0.02em;
      padding-top: 2px;
    }
    body.style-system .card-title .pro-suffix {
      font-family: 'Cocogoose', sans-serif;
      font-weight: 300;
      letter-spacing: -0.02em;
    }
    body.style-system .messaging-tier,
    body.style-system .messaging-slogan,
    body.style-system .ind-nudge-name,
    body.style-system .nudge-price {
      font-family: 'Cocogoose', sans-serif;
      font-weight: 300;
      letter-spacing: -0.02em;
    }
    body.style-system .messaging-slogan em,
    body.style-system .ind-nudge-name em {
      font-family: 'Source Serif 4', serif;
      font-style: italic;
      font-size: 1.19em;
      font-weight: 400;
    }


    /* ════════════════════════════════════
       OVERVIEW PAGE
    ════════════════════════════════════ */
    .ov-hero {
      padding: 140px var(--gutter) 0;
      text-align: center; max-width: var(--container-default); margin: 0 auto;
    }
    .ov-hero h1 { margin-bottom:20px; }
    .ov-hero .body-lg { max-width:640px; margin:0 auto 64px; }

    /* Cards */
    .cards-section { padding: calc(var(--section-gap) / 2) var(--gutter); max-width: var(--container-wide); margin: 0 auto; }
    .card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
    /* Teams: only two cards — hold them to the narrower (3-up) card width, centered */
    .card-grid.teams { grid-template-columns:repeat(2, calc((100% - 36px) / 3)); justify-content:center; }
    /* Push the card row down so the Best Value peek keeps its gap from the switches */
    #plansCards .card-grid { margin-top:38px; }
    .tab-pane { display:none; }
    .tab-pane.active { display:block; }

    .card {
      position:relative;
      background:var(--surface); border-radius:22px;
      padding:48px 32px 32px;
      display:flex; flex-direction:column;
    }
    .card-title-row { display:flex; align-items:center; gap:14px; margin-bottom:28px; min-height:52px; }
    .tier-icon { display:block; width:44px; height:auto; }
    .tier-icon-sm { width:38px; }
    .tier-icon-lg { width:50px; }
    .tier-icon-spacer { width:44px; height:44px; }
    .card-title {
      font-family:var(--font-display); font-size:32px; font-weight:400;
      letter-spacing:-0.01em; color:var(--ink-1); line-height:1.1;
    }
    .card-who { font-size:16px; color:var(--ink-3); line-height:1.55; margin-bottom:28px; min-height:72px; }
    .card-price-row { display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
    .card-price { font-family:var(--font-display); font-size:46px; font-weight:400; color:var(--ink-1); letter-spacing:-0.015em; line-height:1; }
    .card-per { font-size:14px; color:var(--ink-3); }
    .card-billing { font-size:14px; color:var(--ink-4); margin-bottom:22px; min-height:16px; }
    .card-cta {
      display:block; width:100%;
      background:var(--btn-fill); color:var(--btn-text);
      border:1px solid var(--btn-fill);
      padding:11px 20px; border-radius:100px;
      font-size:14px; font-family:var(--font-body); font-weight:600;
      text-align:center; text-decoration:none; cursor:pointer;
      margin-bottom:28px; transition:opacity 0.2s;
    }
    .card-cta:hover { opacity:0.84; }
    .card-cta.ghost { background:transparent; color:var(--ink-1); border-color:var(--line-mid); }
    .card-cta.ghost:hover { background:var(--pill-hover); opacity:1; }
    .card-feature-head { font-size:15px; font-weight:600; color:var(--ink-3); margin-bottom:14px; }
    /* Billing toggle: swap the price + the billing sub-line */
    .billing-monthly .price-a, .billing-monthly .bill-a { display:none; }
    .billing-annual  .price-m, .billing-annual  .bill-m { display:none; }

    /* Save pill — sits beside the price, dark ink, annual only */
    .save-badge {
      display:none; align-self:center; margin-left:12px;
      padding:5px 12px; border-radius:100px;
      font-family:var(--font-body); font-size:13px; font-weight:700;
      letter-spacing:0.01em; white-space:nowrap;
      background:var(--ink-1); color:#fff;
    }
    .billing-annual .save-badge { display:inline-block; }

    /* Best Value — a dark-sage panel sitting BEHIND the Pro card, poking up
       above its top edge like a second card layered behind. The card has
       position:relative with z-index:auto, so this z-index:-1 child renders
       behind the whole card; only the part above the card top shows. */
    .best-value {
      position:absolute; top:-34px; left:5%; right:5%; height:58px; z-index:-1;
      display:flex; align-items:flex-start; justify-content:center; padding-top:11px;
      border-radius:22px 22px 0 0;
      background:var(--pill-bg); color:var(--ink-1);
      font-family:var(--font-body); font-size:11px; font-weight:700; line-height:1;
      letter-spacing:0.14em; text-transform:uppercase;
    }
    .card-features { display:flex; flex-direction:column; gap:11px; }
    .card-feature { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-2); line-height:1.5; }
    .card-feature i { font-size:15px; color:var(--ink-1); flex-shrink:0; margin-top:2px; }

    /* Messaging */
    .messaging-section { padding: calc(var(--section-gap) / 2) var(--gutter); max-width: var(--container-wide); margin: 0 auto; }
    .messaging-list { display:flex; flex-direction:column; }
    .messaging-row {
      display:grid; grid-template-columns:1fr 2fr 2fr;
      gap:60px; align-items:baseline;
      padding:32px 0; border-top:1px solid var(--line);
    }
    .messaging-row:first-child { border-top:none; padding-top:0; }
    .messaging-tier { font-family:var(--font-display); font-size:28px; font-weight:400; letter-spacing:-0.01em; color:var(--ink-3); line-height:1.15; }
    .messaging-slogan { font-family:var(--font-display); font-size:28px; font-weight:400; letter-spacing:-0.01em; color:var(--ink-1); line-height:1.3; }
    .messaging-desc { font-size:16.5px; color:var(--ink-3); line-height:1.55; }

    /* Compare */
    .compare-section { padding: 150px 0 200px; max-width: var(--container-wide); margin: 0 auto; }
    .sec-header-center { text-align: center; max-width: 760px; margin: 0 auto 56px; padding: 0 var(--gutter); }
    .compare-table { padding: 0 var(--gutter); }
    .compare-groupstrip {
      display:grid; grid-template-columns:1.3fr 4fr 1fr; padding-bottom:12px;
    }
    .gs-cell { padding:0 10px; font-size:13px; font-weight:600; letter-spacing:0.10em; text-transform:uppercase; color:var(--ink-3); }
    .gs-cell:first-child { padding-left:0; }
    .compare-row { display:grid; grid-template-columns:1.3fr repeat(5,1fr); }
    .compare-row.head { padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:10px; }
    .compare-row.head .c-cell { flex-direction:column; align-items:flex-start; gap:4px; }
    .c-cell { padding:14px 10px; font-size:14px; color:var(--ink-2); display:flex; align-items:center; line-height:1.4; }
    .c-cell:first-child { padding-left:0; }
    .c-cell.label { color:var(--ink-1); font-weight:500; }
    .c-cell .head-name { font-size:15px; font-weight:700; color:var(--ink-1); line-height:1.2; }
    .c-cell .head-sub { font-size:13.5px; color:var(--ink-3); }
    .c-cell i { color:var(--ink-1); font-size:16px; }
    .c-cell .dash { color:var(--ink-4); }
    .c-cell .val { font-size:13px; color:var(--ink-2); }
    .compare-cat { font-size:13px; font-weight:600; letter-spacing:0.10em; text-transform:uppercase; color:var(--ink-3); padding:28px 0 10px; }

    /* FAQ */
    .faq-section { padding: 150px var(--gutter) 200px; max-width: var(--container-narrow); margin: 0 auto; }
    .faq-head { text-align:center; margin-bottom:64px; }
    .faq-item { border-bottom:1px solid var(--line); }
    .faq-q { display:flex; align-items:center; justify-content:space-between; padding:22px 2px; cursor:pointer; font-size:16px; font-weight:600; color:var(--ink-1); gap:24px; user-select:none; }
    .faq-plus { flex-shrink:0; width:28px; height:28px; border:1px solid var(--line-mid); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; transition:transform 0.3s; }
    .faq-item.open .faq-plus { transform:rotate(45deg); }
    .faq-a { max-height:0; overflow:hidden; font-size:15px; color:var(--ink-2); line-height:1.65; transition:max-height 0.4s ease, padding 0.4s ease; }
    .faq-item.open .faq-a { max-height:300px; padding-bottom:22px; }

    /* ════════════════════════════════════
       TIER PAGES – SHARED
    ════════════════════════════════════ */
    .tier-pg { padding-top:62px; }

    /* Hero split */
    .tier-hero {
      padding: 120px var(--gutter) 100px; max-width: var(--container-default); margin: 0 auto;
      display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center;
    }
    .tier-hero-left { display:flex; flex-direction:column; }
    .tier-eyebrow { font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:24px; }
    .tier-hero-left h1 { margin-bottom:18px; }
    .tier-hook { font-size:19px; color:var(--ink-2); line-height:1.55; margin-bottom:40px; }
    .tier-price-block { margin-bottom:40px; }
    .tier-price-big { font-family:var(--font-display); font-size:clamp(48px,6vw,80px); font-weight:400; letter-spacing:-0.02em; line-height:1; color:var(--ink-1); }
    .tier-price-per { font-size:17px; color:var(--ink-3); }
    .tier-price-note { font-size:14px; color:var(--ink-4); margin-top:8px; }
    .tier-cta-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

    /* Centered hero variant */
    .tier-hero-center {
      padding: 140px var(--gutter) calc(var(--section-gap) / 2); max-width: var(--container-wide); margin: 0 auto;
      display:flex; flex-direction:column; align-items:center; text-align:center;
    }
    .tier-hero-center > div[style] { text-align:center; }
    .tier-hero-center h1 { margin-bottom:20px; }
    .tier-hero-center .tier-hook { max-width:560px; margin:0 auto 48px; }
    .tier-hero-center .tier-cta-row { justify-content:center; margin-bottom:72px; }



    /* ── STICKY SCROLL FEATURE ── */
    .sfeat-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 120px;
      max-width: var(--container-default);
      margin: 0 auto;
      padding: 0 var(--gutter);
    }
    .sfeat-text-block {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 80px 0;
    }
    .sfeat-num {
      font-size:13px; font-weight:700; letter-spacing:0.12em;
      text-transform:uppercase; color:var(--ink-3); margin-bottom:18px;
    }
    .sfeat-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 3vw, 42px);
      font-weight: 400;
      letter-spacing: -0.015em;
      line-height: 1.15;
      margin-bottom: 18px;
    }
    body.style-system .sfeat-title {
      font-family: 'Cocogoose', sans-serif;
      font-weight: 300;
      letter-spacing: -0.02em;
    }
    body.style-system .sfeat-title em {
      font-family: 'Source Serif 4', serif;
      font-style: italic;
      font-size: 1.19em;
      font-weight: 400;
    }
    .sfeat-desc { font-size: 18.5px; color: var(--ink-2); line-height: 1.6; }
    .sfeat-visual-col {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
    }
    .sfeat-visual-inner {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
    }
    .sfeat-panel {
      position: absolute;
      inset: 0;
      border-radius: 32px;
      background-color: var(--surface);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.55s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sfeat-panel.active { opacity: 1; }


    /* ── ICON CARD TOGGLE ── */
    .icon-card {
      width:100%; height:600px; border-radius:80px;
      display:flex; align-items:center; justify-content:center;
      margin-bottom:80px;
      background: var(--icon-card-bg);
      transition: background 0.3s ease;
      overflow: hidden;
    }
    /* Tier icon zooms in as its frame scrolls into view (JS toggles .zoom-init then .in-view). */
    .icon-card img { transition: transform 1.6s cubic-bezier(0.22,1,0.36,1), opacity 1.2s ease; }
    .icon-card.zoom-init img { transform: scale(0.4) rotate(30deg); opacity: 0; }
    .icon-card.zoom-init.in-view img { transform: scale(1) rotate(0deg); opacity: 1; }
    body.theme-dark {
      --paper:        #0c0f13;   /* original neutral dark */
      --surface:      #141719;   /* original neutral card */
      --ink-1:        #ffffff;
      --ink-2:        rgba(255,255,255,0.70);
      --ink-3:        rgba(255,255,255,0.50);
      --ink-4:        rgba(255,255,255,0.32);
      --line:         rgba(255,255,255,0.08);
      --line-mid:     rgba(255,255,255,0.14);
      --nav-bg:       rgba(12,15,19,0.82);
      --btn-fill:     var(--sage-500);   /* green CTA on dark (accent kept) */
      --btn-text:     var(--sage-950);
      --btn-fill-hover: var(--sage-400);
      --pill-bg:      rgba(255,255,255,0.06);
      --pill-hover:   rgba(255,255,255,0.06);
      --icon-card-bg: var(--surface);
      /* Accent reads lighter on dark so type + eyebrows pop green */
      --accent:      var(--sage-400);
      --accent-deep: var(--sage-300);
      --accent-soft: rgba(133,170,123,0.14);
    }
    body.theme-dark .icon-card img { filter: invert(1); }
    body.theme-dark .tier-icon { filter: invert(1); }
    body.theme-dark .card-title-row i { color: var(--ink-1); }
    body.theme-dark .who-card i { color: var(--ink-1); }
    body.theme-dark .feat-card i { color: var(--ink-1); }
    body.theme-dark .pillar i { color: var(--ink-1); }
    body.theme-dark .cap-icon { color: var(--ink-1); }

    .icon-card-wrap {
      position:relative; width:100%;
      display:flex; flex-direction:column; align-items:center;
    }

    /* Feature spotlights */
    .spot-section { padding: 0 var(--gutter) 150px; max-width: var(--container-default); margin: 0 auto; display:flex; flex-direction:column; gap:80px; }
    .spot-row { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
    .spot-row.rev { direction:rtl; }
    .spot-row.rev > * { direction:ltr; }
    .spot-text { display:flex; flex-direction:column; gap:16px; }
    .spot-label { font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); }
    .spot-text p { font-size:16px; color:var(--ink-2); line-height:1.65; }
    .spot-vis { display:flex; align-items:center; justify-content:center; }

    /* Who grid */
    .who-section { padding: calc(var(--section-gap) / 2) var(--gutter); max-width: var(--container-default); margin: 0 auto; display:grid; grid-template-columns:1fr 1.6fr; gap:100px; align-items:start; }
    .who-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .who-card { background:var(--surface); border-radius:18px; padding:28px 24px; }
    .who-card i { font-size:24px; color:var(--ink-1); margin-bottom:14px; display:block; }
    .who-card-title { font-size:15px; font-weight:700; color:var(--ink-1); margin-bottom:6px; }
    .who-card-desc { font-size:14px; color:var(--ink-3); line-height:1.5; }

    /* Feature all-in grid */
    .feat-grid-section { padding: 0 var(--gutter) 150px; max-width: var(--container-default); margin: 0 auto; }
    .feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:48px; }
    .feat-card { background:var(--surface); border-radius:18px; padding:28px 24px; display:flex; flex-direction:column; gap:10px; }
    .feat-card i { font-size:22px; color:var(--ink-1); }
    .feat-card-title { font-size:15px; font-weight:700; color:var(--ink-1); }
    .feat-card-desc { font-size:14px; color:var(--ink-3); line-height:1.5; }

    /* Step-up/Nudge */
    .nudge-section { padding: calc(var(--section-gap) / 2) var(--gutter); max-width: var(--container-default); margin: 0 auto; }
    .nudge-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; }
    .nudge-card { background:var(--surface); border-radius:22px; padding:48px 40px; display:flex; flex-direction:column; gap:14px; }
    .nudge-tier-tag { font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); }
    .nudge-card p { font-size:15.5px; color:var(--ink-2); line-height:1.6; flex:1; }
    .nudge-price { font-family:var(--font-display); font-size:28px; font-weight:400; letter-spacing:-0.01em; color:var(--ink-1); }
    .nudge-price span { font-size:14px; color:var(--ink-3); font-family:var(--font-body); }

    /* Statement section */
    .statement-section { padding: 80px var(--gutter); max-width: var(--container-default); margin: 0 auto; background:var(--surface); border-radius:28px; margin-left: var(--gutter); margin-right: var(--gutter);  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
    @media(min-width:1400px){ .statement-section{ max-width:calc(1400px - 0px); margin-left:auto; margin-right:auto; } }

    /* Pro rows */
    .pro-rows { max-width: var(--container-default); margin: 0 auto; padding: 0 var(--gutter) 150px; display:flex; flex-direction:column; }
    .pro-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:60px; padding:52px 0; border-top:1px solid var(--line); align-items:start; }
    .pro-row:first-child { border-top:none; padding-top:0; }
    .pro-num { font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:20px; }

    /* Expert centered wide */
    .expert-wide { max-width: var(--container-default); margin: 0 auto; padding: 0 var(--gutter) calc(var(--section-gap) / 2); }
    .expert-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px; }
    .pillar { background:var(--surface); border-radius:22px; padding:44px 36px; display:flex; flex-direction:column; }
    .pillar i { font-size:32px; color:var(--ink-1); margin-bottom:24px; display:block; }
    .pillar h3 { margin-bottom:12px; }
    .pillar p { font-size:15px; color:var(--ink-2); line-height:1.6; flex:1; }

    /* Teams cards */
    .teams-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }

    /* Teams capabilities */
    .cap-section { padding: calc(var(--section-gap) / 2) var(--gutter); max-width: var(--container-default); margin: 0 auto; display:grid; grid-template-columns:1fr 1.4fr; gap:100px; align-items:start; }
    .cap-list { display:flex; flex-direction:column; margin-top:40px; }
    .cap-item { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; padding:28px 0; border-bottom:1px solid var(--line); }
    .cap-item:first-child { border-top:1px solid var(--line); }
    .cap-item:first-child { border-top:1px solid var(--line); }
    .cap-icon { font-size:22px; color:var(--ink-1); margin-top:2px; }
    .cap-title { font-size:16px; font-weight:700; color:var(--ink-1); margin-bottom:5px; }
    .cap-desc { font-size:14.5px; color:var(--ink-3); line-height:1.5; }
    /* Numbered "how it works" steps — reuse the capability-row frame */
    .cap-step-num { font-family:var(--font-display); font-weight:400; font-size:22px; line-height:1; color:var(--ink-3); }
    .cap-step-title { font-weight:700; font-size:17px; color:var(--ink-1); margin-bottom:6px; }
    .cap-step-body { font-size:15.5px; color:var(--ink-3); line-height:1.6; }

    /* Ind nudge */
    .ind-nudge { padding: calc(var(--section-gap) / 2) var(--gutter); max-width: var(--container-default); margin: 0 auto; }
    .ind-nudge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:48px; }
    /* Self-healing: retiring a card must not leave a hole in the third column. */
    .ind-nudge-grid:has(.ind-nudge-card:nth-child(2):last-child) { grid-template-columns:repeat(2,1fr); }
    /* 4-card connected grid → balanced 2×2 (self-healing, same pattern as 2-card) */
    .ind-nudge-grid:has(.ind-nudge-card:nth-child(4):last-child) { grid-template-columns:repeat(2,1fr); }
    .ind-nudge-card { background:var(--surface); border-radius:18px; padding:36px 28px; display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:box-shadow 0.2s; }
    /* These cards build as real <a> (a div[href] never navigates); strip link chrome. */
    a.ind-nudge-card, a.f-trio-cell, a.nudge-card { text-decoration:none; color:inherit; }
    .ind-nudge-card:hover { box-shadow:0 4px 20px rgba(0,0,0,0.08); }
    .ind-nudge-tier { font-size:13px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:var(--ink-3); }
    .ind-nudge-name { font-family:var(--font-display); font-size:24px; font-weight:400; letter-spacing:-0.01em; color:var(--ink-1); }
    .ind-nudge-hook { font-size:16px; color:var(--ink-3); line-height:1.5; flex:1; }
    .ind-nudge-price { font-size:14px; font-weight:600; color:var(--ink-2); }

    /* Ind nudge — flat variant: icon + title + description columns, no card chrome (works-alongside sections) */
    /* Nudge cards sit inside their white banner (surface card) again, keeping the flat icon layout. */
    .ind-nudge.is-flat .ind-nudge-grid { gap:14px; margin-top:48px; }
    .ind-nudge.is-flat .ind-nudge-card { background:var(--surface); border-radius:18px; padding:32px 28px; gap:12px; box-shadow:none; align-items:flex-start; transition:box-shadow 0.2s; }
    .ind-nudge.is-flat .ind-nudge-card:hover { box-shadow:0 4px 20px rgba(0,0,0,0.08); }
    .ind-nudge.is-flat .ind-nudge-tier { display:none; }
    .ind-nudge.is-flat .ind-nudge-icon { font-size:28px; line-height:1; color:var(--ink-1); margin-bottom:18px; transition:color 0.2s; }
    .ind-nudge.is-flat .ind-nudge-name { font-family:var(--font-body); font-weight:700; font-size:18.5px; letter-spacing:-0.005em; color:var(--ink-1); margin-bottom:8px; transition:color 0.2s; }
    .ind-nudge.is-flat .ind-nudge-hook { font-size:16px; color:var(--ink-3); line-height:1.6; flex:none; max-width:340px; }

    /* V4 — grounding caveat + survey line, nested inside existing frames (no new sections) */
    .uc-grounding, .uc-note { font-size:15px; line-height:1.6; max-width:660px; }
    .uc-grounding { color:var(--ink-3); }
    .uc-note { color:var(--ink-2); }
    .f-int-text .uc-grounding, .f-int-text .uc-note { margin-top:16px; }
    .ind-nudge .uc-note { max-width:760px; margin:0 0 12px; }
    .ind-nudge .uc-grounding { max-width:760px; margin:0 0 40px; }
    .ind-nudge.is-flat .ind-nudge-card:hover .ind-nudge-name,
    .ind-nudge.is-flat .ind-nudge-card:hover .ind-nudge-icon { color:var(--sage-700); }

    /* ═══════════════════════════════════════════════════════════════════════
       CEO FOLD (v4-ceo) — use-case + solutions section kit.
       CEO-introduced patterns (pills, "what ORTH does", "how it runs", value
       stats, "ask ORTH", plan pair), rebuilt to OUR design system: tokens,
       section rhythm (calc(var(--section-gap)/2)), Source Serif heads carrying
       the sage <em> accent (via body.style-system h2.sec-head em), AA contrast
       (--ink-2 on reading copy), mobile collapse at 768, and a focus ring.
       The words are the CEO's, verbatim; the presentation is ours.
       ═══════════════════════════════════════════════════════════════════════ */

    /* "Runs on" pill band, directly under the use-case hero */
    .uc-pills-band { max-width: var(--container-default); margin: 4px auto 0; padding: 0 var(--gutter);
      display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
    .uc-pills-label { font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:0.12em;
      text-transform:uppercase; color:var(--ink-3); flex:none; }
    .uc-pills { display:flex; flex-wrap:wrap; gap:10px; }
    .uc-pills-band .uc-pills { justify-content:center; gap:14px; }
    /* Capability pills: dark-ink fill, borderless, fully rounded (the locked style).
       Size is the only variant — band = large, sm = compact. */
    .uc-pill { display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:100px;
      border:none; background:var(--ink-1); font-family:var(--font-body);
      font-size:14px; font-weight:500; color:var(--paper); white-space:nowrap; }
    .uc-pill i { font-size:15px; color:#B6CCB0; }
    .uc-pills-band .uc-pill { padding:15px 30px; font-size:18px; font-weight:600; gap:10px; }
    .uc-pills-band .uc-pill i { font-size:20px; }
    .uc-pill.sm { padding:8px 16px; font-size:13px; }
    .uc-pill.sm i { font-size:14px; }

    /* "What ORTH does" — capability grid (reuses our card look; head above grid) */
    .uc-how { max-width: var(--container-default); margin:0 auto; padding: calc(var(--section-gap) / 2) var(--gutter); }
    .uc-how-head { max-width:760px; margin-bottom:56px; }
    .uc-how-head p { font-size:19px; color:var(--ink-2); line-height:1.55; margin-top:20px; }
    .uc-how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .uc-how-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:36px 32px;
      display:flex; flex-direction:column; }
    .uc-how-card > i { font-size:26px; color:var(--accent-deep); margin-bottom:20px; }
    .uc-how-card h3 { font-family:var(--font-display); font-weight:400; font-size:22px; letter-spacing:-0.01em;
      line-height:1.2; color:var(--ink-1); margin:0 0 12px; }
    .uc-how-card p { font-size:16px; color:var(--ink-2); line-height:1.6; margin:0; }

    /* "How it runs" — numbered steps (sticky head beside the list, like cap-section) */
    .uc-steps { max-width: var(--container-default); margin:0 auto; padding: calc(var(--section-gap) / 2) var(--gutter);
      display:grid; grid-template-columns:1fr 1.4fr; gap:100px; align-items:start; }
    .uc-steps-text { position:static; }
    .uc-steps-text p { font-size:19px; color:var(--ink-2); line-height:1.55; margin-top:20px; max-width:440px; }
    .uc-step-list { display:flex; flex-direction:column; }
    .uc-step { display:grid; grid-template-columns:auto 1fr; gap:28px; padding:34px 0; border-top:1px solid var(--line); }
    .uc-step:first-child { border-top:none; padding-top:0; }
    .uc-step-num { font-family:var(--font-display); font-size:30px; font-weight:400; color:var(--ink-4); line-height:1; }
    .uc-step h3 { font-family:var(--font-display); font-weight:400; font-size:23px; letter-spacing:-0.01em;
      line-height:1.2; color:var(--ink-1); margin:0 0 10px; }
    .uc-step p { font-size:16px; color:var(--ink-2); line-height:1.6; margin:0 0 16px; }
    .uc-step .uc-pills { margin-top:4px; }

    /* "What it is worth" — value stats */
    .uc-value { max-width: var(--container-default); margin:0 auto; padding: calc(var(--section-gap) / 2) var(--gutter); }
    .uc-value-head { max-width:760px; margin-bottom:56px; }
    .uc-value-head p { font-size:19px; color:var(--ink-2); line-height:1.55; margin-top:20px; }
    .uc-value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .uc-value-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:40px 34px; }
    .uc-value-num { font-family:var(--font-display); font-weight:400; font-size:clamp(26px,2.4vw,34px);
      letter-spacing:-0.015em; line-height:1.12; color:var(--ink-1); margin-bottom:18px; }
    .uc-value-num em { font-style:italic; color:var(--accent-deep); }
    .uc-value-card p { font-size:16px; color:var(--ink-2); line-height:1.6; margin:0; }
    .uc-value-src { font-size:14px; color:var(--ink-2); margin-top:14px; }
    .uc-value-foot { font-size:14px; color:var(--ink-2); margin-top:40px; }

    /* "Ask ORTH" — example questions (sticky text beside the list) */
    .uc-asks { max-width: var(--container-default); margin:0 auto; padding: calc(var(--section-gap) / 2) var(--gutter);
      display:grid; grid-template-columns:1fr 1.4fr; gap:100px; align-items:start; }
    .uc-asks-text { position:static; }
    .uc-asks-text p { font-size:19px; color:var(--ink-2); line-height:1.55; margin:20px 0 28px; max-width:440px; }
    .uc-asks-list { display:flex; flex-direction:column; gap:12px; }
    .uc-ask { display:flex; align-items:flex-start; gap:14px; background:var(--surface); border:1px solid var(--line);
      border-radius:14px; padding:18px 22px; }
    .uc-ask i { font-size:19px; color:var(--accent-deep); flex:none; margin-top:2px; }
    .uc-ask span { font-size:16px; color:var(--ink-1); line-height:1.5; }

    /* Plan pair — Teams vs Enterprise cards (reuses our surface-card look) */
    .plan-pair { max-width: var(--container-default); margin:0 auto; padding: calc(var(--section-gap) / 2) var(--gutter); }
    .plan-pair-head { max-width:760px; margin-bottom:56px; }
    .plan-pair-head p { font-size:19px; color:var(--ink-2); line-height:1.55; margin-top:20px; }
    .plan-pair-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
    .plan-pair.single .plan-pair-grid { grid-template-columns:1fr; max-width:640px; }
    .plan-card { background:var(--surface); border:none; border-radius:22px; padding:48px 32px 32px;
      display:flex; flex-direction:column; }
    /* Head reuses the tier .card-title-row + .card-title treatment. No-icon cards
       (Enterprise) align via card-title-row's min-height, exactly like the Field tier. */
    .plan-card .card-title-row { margin-bottom:34px; }
    .plan-card h3 { font-family:'Cocogoose', sans-serif; font-weight:300; font-size:18px; letter-spacing:-0.01em;
      line-height:1.35; color:var(--ink-1); margin:0 0 8px; }
    .plan-card-who { font-size:16px; color:var(--ink-2); line-height:1.55; margin:0 0 36px; }
    /* Plans intro: 2nd paragraph is the smaller "body" layer under the title-size lead */
    #plansCards .f-mission p + p { font-family:var(--font-body); font-weight:400; font-size:16px;
      letter-spacing:normal; line-height:1.6; color:var(--ink-2); max-width:720px; margin:22px auto 0; }
    .plan-card ul { list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:14px; }
    .plan-card li { display:flex; align-items:flex-start; gap:12px; font-size:16px; color:var(--ink-2); line-height:1.5; }
    .plan-card li i { color:var(--accent-deep); font-size:18px; flex:none; margin-top:2px; }
    .plan-card-cta { margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }

    /* Single-scenario dark example band (reuses .uc-dark / .uc-wide-media already on the shelf) */
    .f-trio.uc-scenario { display:block; }
    .f-trio.uc-scenario .f-trio-head { max-width: var(--container-default); }
    .f-trio.uc-scenario .uc-wide-media { margin-top:40px; }

    /* Before/after comparison ("Today, and with ORTH") — CEO pattern, our tokens.
       Refined: head inherits .sec-head (no font override); --ink-2 on the "Today" copy
       for AA; dark-aware --accent-soft gradient; mobile stacks with row prefixes. */
    .ba { max-width: var(--container-default); margin:0 auto; padding: calc(var(--section-gap)/2) var(--gutter); }
    .ba-head { max-width:760px; margin:0 auto 48px; text-align:center; }
    .ba-head p { font-size:17.5px; line-height:1.6; color:var(--ink-2); margin:20px 0 0; }
    .ba-table { display:grid; grid-template-columns:200px 1fr 1.15fr; border-top:1px solid var(--line-mid); }
    .ba-th { padding:18px 0 14px; font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
      color:var(--ink-3); border-bottom:1px solid var(--line); }
    .ba-th.orth { color:var(--accent-deep); padding-left:36px; }
    .ba-label { padding:28px 24px 28px 0; font-size:15px; font-weight:700; color:var(--ink-1); border-bottom:1px solid var(--line); }
    .ba-today { padding:28px 36px 28px 0; font-size:16px; line-height:1.55; color:var(--ink-2); border-bottom:1px solid var(--line); }
    .ba-orth { padding:28px 0 28px 36px; font-size:16px; line-height:1.55; color:var(--ink-1); border-bottom:1px solid var(--line);
      border-left:1px solid var(--line); background: linear-gradient(90deg, var(--accent-soft), transparent 40%); }
    @media (max-width: 768px) {
      .ba-table { grid-template-columns:1fr; border-top:none; }
      .ba-th { display:none; }
      .ba-label { padding:24px 0 8px; border-bottom:none; font-size:17px; }
      .ba-today, .ba-orth { padding:0 0 6px; border-left:none; background:none; border-bottom:none; }
      .ba-today::before { content:"Today"; display:block; font-size:12px; font-weight:700; letter-spacing:.12em;
        text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
      .ba-orth::before { content:"With ORTH"; display:block; font-size:12px; font-weight:700; letter-spacing:.12em;
        text-transform:uppercase; color:var(--accent-deep); margin-bottom:6px; }
      .ba-orth { padding-bottom:24px; border-bottom:1px solid var(--line); }
    }

    /* Focus ring — site-wide a11y gap the new interactive surfaces expose (WCAG 2.4.7) */
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
    summary:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

    /* ── COOKIE CONSENT BANNER (fixed bottom-centre, ~30% wide, accept-only) ── */
    .cookie-banner {
      position: fixed; z-index: 300; bottom: 22px; left: 50%; transform: translateX(-50%);
      width: 32%; min-width: 340px; max-width: 560px;
      display: flex; align-items: center; gap: 18px;
      background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.18);
      padding: 20px 22px; font-family: var(--font-body);
    }
    .cookie-banner[hidden] { display: none; }
    .cookie-banner-text { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
    .cookie-banner-text a { color: var(--accent-deep); text-decoration: underline; }
    .cookie-banner-accept {
      flex: none; cursor: pointer; border: none; white-space: nowrap;
      background: var(--accent); color: #fff; font-family: var(--font-body); font-weight: 600;
      font-size: 14px; padding: 12px 30px; border-radius: 999px; transition: background 0.2s;
    }
    .cookie-banner-accept:hover { background: var(--accent-deep); }
    @media (max-width: 768px) {
      .cookie-banner { width: auto; left: 14px; right: 14px; transform: none; bottom: 14px;
        flex-direction: column; align-items: stretch; text-align: center; gap: 14px; }
      .cookie-banner-accept { width: 100%; }
    }

    /* ── WHY ORTH — split head + cinematic video canvas ── */
    .why-orth { max-width: var(--container-wide); margin: 0 auto; padding: calc(var(--section-gap) / 2) var(--gutter); }
    .why-orth-head { display: grid; grid-template-columns: minmax(360px, 500px) 1fr; gap: 80px; align-items: end; margin-bottom: 56px; }
    .why-orth-title .eyebrow { margin-bottom: 20px; }
    .why-orth-title .sec-head { text-align: left; margin: 0; }
    .why-orth-copy p { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px; }
    .why-orth-copy .why-orth-punch { font-size: 20px; color: var(--ink-1); font-weight: 600; margin-bottom: 0; }
    .why-orth-canvas { position: relative; border-radius: 24px; overflow: hidden; background: #0c0f13; }
    .why-orth-media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    @media (max-width: 900px) {
      .why-orth-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
    }
    @media (max-width: 768px) {
      .why-orth-head { margin-bottom: 32px; }
      .why-orth-canvas { border-radius: 18px; }
      .why-orth-media { aspect-ratio: 4 / 3; }
    }

    /* Mobile collapse for the new kit (site standard breakpoint) */
    @media (max-width: 768px) {
      .uc-how-grid, .uc-value-grid, .plan-pair-grid { grid-template-columns:1fr; gap:16px; }
      .uc-steps, .uc-asks { grid-template-columns:1fr; gap:40px; }
      .uc-steps-text, .uc-asks-text { position:static; top:auto; }
      .uc-steps-text p, .uc-asks-text p { max-width:none; }
      .uc-pills-band { gap:12px; }
      /* Wide scenario banners are 24:9 on desktop, which shrinks to a thin strip on
         a phone — give them a fuller 4:3 frame on mobile so the image/video reads full. */
      .uc-wide-img, video.uc-wide-img { aspect-ratio: 4 / 3; }
    }

    /* Feature list rows (expert full) */
    .feat-list { display:flex; flex-direction:column; gap:14px; }
    .feat-list-row { display:flex; align-items:flex-start; gap:12px; font-size:15.5px; color:var(--ink-2); line-height:1.5; }
    .feat-list-row i { font-size:16px; color:var(--ink-1); flex-shrink:0; margin-top:2px; }
    .feat-inherit { display:flex; align-items:center; gap:12px; font-size:15.5px; color:var(--ink-2); margin-bottom:8px; }
    .feat-inherit i { font-size:16px; color:var(--ink-1); flex-shrink:0; }

  


    /* Teams full-bleed banner */
    .f-teams-banner {
      width: 100%;
      height: 80vh;
      margin: 0;
      position: relative;
      overflow: hidden;
    }
    .f-teams-banner .parallax-bg {
      position: absolute;
      inset: -20% 0; /* extends 20% above and below for parallax travel */
      background-size: cover; background-position: center;
      will-change: transform;
    }
    .f-teams-content {
      position: relative; z-index: 1;
      max-width: 1400px; width: 100%; height: 100%;
      margin: 0 auto;
      padding: 80px;
      display: flex; flex-direction: column; justify-content: space-between;
    }
    .f-teams-mark {
      display: inline-flex; align-items: center; gap: 12px;
      align-self: flex-start;
    }
    .f-teams-mark img {
      width: 72px; height: 72px; display: block;
    }
    .f-teams-mark-text {
      font-family: var(--font-display);
      font-size: 26px; font-weight: 400; letter-spacing: -0.01em;
      color: #fff;
    }
    body.style-system .f-teams-mark-text {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .f-teams-foot { max-width: 720px; }
    .f-teams-title {
      font-family: var(--font-display);
      font-size: clamp(40px, 5vw, 64px);
      font-weight: 400; letter-spacing: -0.02em; line-height: 1.05;
      color: #fff;
      margin-bottom: 22px;
    }
    body.style-system .f-teams-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    body.style-system .f-teams-title em {
      font-family: 'Source Serif 4', serif; font-style: italic; font-size: 1.19em; font-weight: 400;
    }
    .f-teams-sub {
      font-size: 17px; color: rgba(255,255,255,0.92); line-height: 1.55;
      max-width: 540px;
      margin-bottom: 32px;
    }
    .f-teams-cta {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; color: #0c0f13;
      padding: 12px 26px; border-radius: 100px;
      font-size: 14px; font-weight: 600;
      text-decoration: none; cursor: pointer;
      transition: opacity 0.2s;
    }
    .f-teams-cta:hover { opacity: 0.88; }

    /* Bottom blur – fixed band that frosts content as it scrolls beneath */
    .bottom-blur {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: 120px;
      pointer-events: none;
      z-index: 50;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
      mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    }


    /* ═══ TOP STONE GLOW ═══
       Soft warm-stone gradient that sits behind the nav on dark mode only.
       Capped at 1080px height. Fades to transparent into the dark background.
       Lives inside #page-field so it only renders on the field landing. */
    .page-top-glow {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1080px;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: opacity 0.3s ease;
      background:
        radial-gradient(120% 70% at 50% 0%, rgba(245, 244, 243, 0.28) 0%, rgba(245, 244, 243, 0.12) 30%, rgba(245, 244, 243, 0.04) 60%, transparent 90%);
    }
    body.theme-dark .page-top-glow { opacity: 1; }
    /* Tier pages — kill the glow on individual plan pages, keep on overview */
    body[data-page="free"] .page-top-glow,
    body[data-page="plus"] .page-top-glow,
    body[data-page="pro"] .page-top-glow,
    body[data-page="expert"] .page-top-glow,
    body[data-page="teams"] .page-top-glow,
    body[data-page="enterprise"] .page-top-glow { display: none; }

    /* ═══ FEATURES DROPDOWN ═══ */
    .nav-blur-bg {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 998;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 65%);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 65%);
    }
    .nav-blur-bg.active { opacity: 1; pointer-events: auto; }

    .nav-feat-wrap { position: relative; }
    .nav-feat-wrap > a { cursor: pointer; }

    .nav-feat-mega {
      position: fixed;
      top: calc(62px + 18px);  /* nav height (62) + gap (18), matches Plans dropdown spacing */
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      width: min(1080px, calc(100vw - 80px));
      background: var(--surface);
      border-radius: 24px;
      padding: 32px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.18);
      opacity: 0; pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
      z-index: 1001;
    }
    /* Invisible bridge from nav down to panel – keeps hover alive while cursor crosses the gap */
    .nav-feat-mega::before {
      content: '';
      position: absolute;
      top: -18px; left: 0; right: 0; height: 18px;
    }
    .nav-feat-mega.open {
      opacity: 1; pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .feat-mega-head {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-display);
      font-size: 22px; font-weight: 400; letter-spacing: -0.01em;
      color: var(--ink-1); margin-bottom: 24px;
    }
    body.style-system .feat-mega-head {
      font-family: 'Cocogoose', sans-serif; font-weight: 300;
    }
    .feat-mega-head i { font-size: 18px; color: var(--ink-2); }

    .feat-mega-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .feat-mega-col-img {
      width: 100%; aspect-ratio: 16/7;
      border-radius: 14px;
      background-size: cover; background-position: center;
      margin-bottom: 14px;
    }
    .feat-mega-col-eyebrow {
      font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3);
      margin-bottom: 14px;
    }
    .feat-mega-item {
      display: block;
      padding: 10px 0;
      text-decoration: none;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .feat-mega-item:hover { opacity: 0.7; }
    .feat-mega-item-name {
      display: flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 600; color: var(--ink-1);
      margin-bottom: 4px;
    }
    .feat-mega-dot {
      width: 7px; height: 7px; border-radius: 50%;
      flex-shrink: 0;
    }
    .feat-mega-dot.plan   { background: #4F6BED; }
    .feat-mega-dot.decide { background: #C77DFF; }
    .feat-mega-dot.learn  { background: #FF7B54; }
    .feat-mega-item-desc {
      font-size: 14px; color: var(--ink-3);
      line-height: 1.4;
      padding-left: 15px;
    }
    .feat-mega-foot {
      display: flex; justify-content: flex-end; gap: 32px;
      margin-top: 24px; padding-top: 20px;
      border-top: 1px solid var(--line);
    }
    .feat-mega-foot a,
    .feat-mega-foot span {
      font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-2);
      text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
      transition: color 0.2s;
    }
    .feat-mega-foot a:hover { color: var(--ink-1); }


    /* Learn dropdown – 2 link columns + featured customer story card */
    .nav-learn-mega .feat-mega-grid {
      grid-template-columns: 1fr 1fr 1.2fr;
    }
    .nav-learn-mega .feat-mega-dot { display: none; }
    .nav-learn-mega .feat-mega-item-desc { display: none; }
    .nav-learn-mega .feat-mega-item-name { padding-left: 0; }
    .nav-learn-mega .feat-mega-item { padding: 8px 0; }
    .feat-mega-feature {
      position: relative;
      aspect-ratio: 1/1;
      border-radius: 14px;
      overflow: hidden;
      background-size: cover; background-position: center;
      cursor: pointer;
      text-decoration: none;
      transition: opacity 0.2s;
    }
    .feat-mega-feature:hover { opacity: 0.92; }
    .feat-mega-feature-content {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 22px 24px;
      z-index: 1;
    }
    .feat-mega-feature-title {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-display);
      font-size: 19px; font-weight: 400; letter-spacing: -0.01em;
      color: #fff;
      margin-bottom: 6px;
    }
    body.style-system .feat-mega-feature-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300;
    }
    .feat-mega-feature-desc {
      font-size: 14px; color: rgba(255,255,255,0.92);
      line-height: 1.4;
    }

    /* Plans + Use cases dropdowns – 2 name lists (no headings, no images) +
       a single light-stone canvas on the right. Shared so they stay identical. */
    .nav-plans-mega .feat-mega-grid,
    .nav-uc-mega    .feat-mega-grid { grid-template-columns: 1fr 1fr 1.2fr; }
    .nav-plans-mega .feat-mega-item,
    .nav-uc-mega    .feat-mega-item { padding: 9px 0; }
    .nav-plans-mega .feat-mega-item-name,
    .nav-uc-mega    .feat-mega-item-name { padding-left: 0; }
    .nav-plans-mega .feat-mega-item-desc,
    .nav-uc-mega    .feat-mega-item-desc { padding-left: 0; }
    .plans-feature, .mega-canvas {
      background: #ebe8e4;   /* website-background shade, a touch darker than the white panel */
      background-size: cover; background-position: center;
      display: flex; align-items: center; justify-content: center;
      cursor: default; pointer-events: none;
    }
    .plans-feature-icon, .mega-canvas-icon { width: 58%; height: auto; display: block; }
    /* A canvas carrying a photo is an image, not a centring box. */
    .mega-canvas.has-photo { display: block; }

    /* FACE-SAFE IMAGE RULE (V3.1) — any image containing a human face carries
       .face-safe so the cover-crop anchors to the top of the frame, where heads
       sit. This keeps faces fully in frame at every viewport. Plain center-crop
       decapitates portrait subjects in landscape cards. Applies across the board:
       add .face-safe to any image container whose photo shows a face. */
    .face-safe { background-position: center var(--face-y, 28%) !important; }

    /* ═══ CINEMATIC HERO — landing header variant (V3.1) ═══════════════ */
    .hero-cine { position:relative; width:100%; height:80vh; min-height:528px; overflow:hidden; background:#1c2319; }
    .hero-cine-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity 0.8s ease; }
    .hero-cine-bg-2 { opacity:0; }
    .hero-cine-scrim { position:absolute; inset:0;
      background:linear-gradient(90deg,
        rgba(0,0,0,1) 0%, rgba(0,0,0,1) 16%,
        rgba(0,0,0,0.985) 23%, rgba(0,0,0,0.945) 30%, rgba(0,0,0,0.882) 36%,
        rgba(0,0,0,0.800) 42%, rgba(0,0,0,0.703) 48%, rgba(0,0,0,0.597) 54%,
        rgba(0,0,0,0.487) 60%, rgba(0,0,0,0.379) 66%, rgba(0,0,0,0.278) 72%,
        rgba(0,0,0,0.190) 78%, rgba(0,0,0,0.117) 84%, rgba(0,0,0,0.061) 90%,
        rgba(0,0,0,0.022) 95%, rgba(0,0,0,0) 100%); }
    .hero-cine-scrim-t { position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(180deg, rgba(14,18,12,0.5) 0%, rgba(14,18,12,0) 14%); }
    .hero-cine-scrim-b { position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(0deg, rgba(14,18,12,0.72) 0%, rgba(14,18,12,0) 24%); }
    .hero-cine-inner { position:relative; z-index:3; height:100%; max-width:var(--container-wide);
      margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; }
    .hero-cine-text { max-width:744px; }
    .hero-cine-title { margin:0; font-family:var(--font-nav); font-weight:300; letter-spacing:-0.02em;
      font-size:clamp(34px,4vw,56px); line-height:1.05; color:#fff; }
    .hero-cine-title em { font-family:var(--font-display); font-style:italic; font-weight:400; color:#B6CCB0; letter-spacing:-0.01em; }
    .hero-cine-sub { margin:24px 0 0; font-family:var(--font-body); font-weight:400;
      font-size:clamp(17px,1.35vw,20px); line-height:1.55; color:rgba(255,255,255,0.82); max-width:500px; }
    .hero-cine-ctas { margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; }
    .hero-cine-ctas .hc-fill { display:inline-flex; align-items:center; height:52px; padding:0 26px; border-radius:999px;
      background:var(--btn-fill); color:#fff; font-family:var(--font-body); font-weight:600; font-size:16px; text-decoration:none; }
    .hero-cine-ctas .hc-fill:hover { background:var(--btn-fill-hover, #43553E); }
    .hero-cine-ctas .hc-ghost { display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 24px; border-radius:999px;
      border:1px solid rgba(255,255,255,0.42); color:#fff; font-family:var(--font-body); font-weight:600; font-size:16px; text-decoration:none; }
    .hero-cine-ctas .hc-ghost:hover { border-color:#fff; }
    .hero-cine-press { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:44px var(--gutter) 34px;
      display:flex; align-items:center; justify-content:center; gap:clamp(30px,4.2vw,58px); flex-wrap:wrap;
      background:rgba(0,0,0,0.22); -webkit-backdrop-filter:blur(16px) saturate(115%); backdrop-filter:blur(16px) saturate(115%); }
    .hero-cine-press img { height:50px; width:auto; opacity:0.72; transition:opacity 0.2s; }
    .hero-cine-press img:hover { opacity:1; }
    /* Hero stat bar — frosted strip at the hero foot (replaces the press strip + small stats) */
    .hero-cine-statbar { position:absolute; z-index:3; left:0; right:0; bottom:0; background:rgba(0,0,0,0.22); -webkit-backdrop-filter:blur(16px) saturate(115%); backdrop-filter:blur(16px) saturate(115%); }
    .hcs-inner { max-width:var(--container-wide); margin:0 auto; padding:26px var(--gutter); display:grid; grid-template-columns:repeat(4,1fr); gap:36px; align-items:end; }
    .hcs-col { display:flex; flex-direction:column; gap:8px; min-width:0; }
    .hero-cine-statbar .proof-num { color:#fff; font-size:clamp(26px,2.8vw,44px); }
    .hero-cine-statbar .proof-label { color:rgba(255,255,255,0.68); font-size:14px; }
    .hcs-star { font-size:0.7em; position:relative; top:-2px; }
    @media (max-width:768px){
      .hero-cine-press { gap:26px; }
      .hero-cine-press img { height:40px; }
      .hcs-inner { grid-template-columns:repeat(2,1fr); gap:16px 24px; padding:18px var(--gutter); }
      .hero-cine-statbar .proof-num { font-size:clamp(24px,7vw,34px); }
      .hero-cine-statbar .proof-label { font-size:12.5px; line-height:1.35; }
      /* Hero content stays centered but lifts just clear of the press strip. */
      .hero-cine-inner { padding-bottom: 180px; }
      /* Drop the header "Request a demo" on mobile — keep Get started + burger. */
      .nav-right .btn-nav.btn-nav-ghost { display: none !important; }
      /* Teams banner content aligns to the mobile gutter. */
      .f-teams-content { padding: 40px var(--gutter) 44px; }
    }
    /* Mobile menu open: nav sits over the light drawer — show the sage logo, not the white one. */
    body.menu-open .nav-logo .logo-light { display: block !important; }
    body.menu-open .nav-logo .logo-dark  { display: none  !important; }
    /* ...and the burger 'X' must be dark on the light drawer, not the white hero variant. */
    body.menu-open .nav-burger span { background: var(--ink-1) !important; }

    /* nav turns white over the landing's dark hero, reverts to normal on scroll
       (.scrolled) and when the classic hero is toggled on (body.hero-classic) */
    body[data-page="field"]:not(.hero-classic) nav:not(.scrolled) .nav-links > li > a,
    body[data-page="field"]:not(.hero-classic) nav:not(.scrolled) .nav-trigger { color:#fff; }
    body[data-page="field"]:not(.hero-classic) nav:not(.scrolled) .nav-logo .logo-light { display:none; }
    body[data-page="field"]:not(.hero-classic) nav:not(.scrolled) .nav-logo .logo-dark { display:block; }
    body[data-page="field"]:not(.hero-classic) nav:not(.scrolled) .nav-burger span { background:#fff; }
    body[data-page="field"]:not(.hero-classic) nav:not(.scrolled) .btn-nav.btn-nav-ghost {
      color:#fff; border-color:rgba(255,255,255,0.42); background:transparent; }





    /* ═══ FIELD PAGE ═══ */
    .field-pg { padding-top: 62px; }

    /* Hero */
    .f-hero {
      max-width: var(--container-wide); margin: 0 auto;
      padding: 140px var(--gutter) calc(var(--section-gap) / 2);
      text-align: center;
    }
    .f-hero-text { max-width: 1080px; margin: 0 auto 64px; }
    .f-hero h1 { margin-bottom: 22px; }
    .f-hero-sub { font-size: 19px; color: var(--ink-2); line-height: 1.55; margin: 0 auto 40px; max-width: 560px; }
    .f-hero-ctas { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
    .f-hero-cards { display: flex; gap: 16px; height: clamp(380px, 36vw, 540px); }
    .f-hero-card { position: relative; background: var(--surface); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 28px; overflow: hidden; display: flex; align-items: center; justify-content: center; }

    /* ── UI screen card overlay ──
       Sits at the bottom-left of any UI-screen container, stretches to 80%
       of the frame, labels what the screen is. The container needs
       position: relative + overflow: hidden (already true on .f-hero-card,
       .f-int-visual, etc.). The container's own border-radius clips the
       card's bottom-left corner naturally.

       Fixed internal padding holds steady across any frame size — the
       card grows to fit content, not the frame. */
    .ui-screen-card {
      position: absolute;
      top: 10%;                              /* fixed top breathing room */
      right: 10%;                            /* fixed right breathing room */
      bottom: 0;                             /* flush bottom */
      left: 0;                               /* flush left */
      background: #ffffff;
      /* top-left: 0  top-right: 20  bottom-right: 0  bottom-left: 20 */
      border-radius: 0 20px 0 20px;
      padding: 40px 48px;
      z-index: 2;
      display: flex; align-items: center; justify-content: center;
      /* Long titles wrap to a second line; eyebrow + arrow stay inline.
         Tight row-gap keeps wrapped lines visually together. */
      flex-wrap: wrap;
      column-gap: 12px;
      row-gap: 4px;
      align-content: center;
      text-align: center;
    }
    /* Full-bleed UI capture (trial): a filled screen fills its frame edge to edge,
       so the 10%/10% flower gutter is gone. The flower stays behind, fully covered.
       Placeholder "UI Moment" cards (data-capture-pending) keep the gutter.
       Reverse by deleting this one rule. */
    .ui-screen-card[data-capture] { top: 0; right: 0; background-color: transparent; }
    /* Carousel cells (.f-trio-cell-img) are uniformly 16:10 via the base rule, matching
       the 1600x1000 UI captures — no separate override needed. The two-column (f-int)
       UI visual keeps its own portrait capture ratio so that screen shows in full. */
    .f-int-visual:has(> .ui-screen-card[data-capture])    { aspect-ratio: 1000 / 1120; }
    .ui-screen-card-title {
      flex: 0 1 auto;
      max-width: 100%;
      overflow-wrap: anywhere;
      white-space: normal;
    }
    .ui-screen-card-eyebrow,
    .ui-screen-card-title {
      font-family: var(--font-display);
      font-size: clamp(19px, 1.9vw, 23px);
      font-weight: 400;
      letter-spacing: -0.01em;
      line-height: 1.2;
      color: #9a9a9a;
    }
    body.style-system .ui-screen-card-eyebrow,
    body.style-system .ui-screen-card-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .ui-screen-card-sep {
      color: #9a9a9a;
      font-size: clamp(21px, 2.1vw, 26px);
      line-height: 1;
      display: inline-flex; align-items: center;
    }
    @media (max-width: 767px) {
      .ui-screen-card { padding: 24px 28px; gap: 8px; }
      .ui-screen-card-eyebrow,
      .ui-screen-card-title { font-size: 14px; }
    }

    /* Test helper: hide the actual UI image inside an .f-hero-card while
       previewing the overlay treatment. Remove once approved. */
    .f-hero-card.ui-screen-test > img { display: none; }
    .f-hero-card > img { height: 100%; width: auto; display: block; margin: 0 auto; }
    /* Video hero card — behaves exactly like a cover background image. */
    .f-hero-card.is-video > video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }
    .f-hero-card.left { flex: 1 1 auto; align-self: stretch; }
    .f-hero-card.left > img { transform: scale(1.5); transform-origin: top right; }
    .f-hero-card.right { flex: 0 0 auto; aspect-ratio: 1/1; height: clamp(380px, 36vw, 540px); }
    .f-hero-card.right > img { width: 60%; height: auto; display: block; transform: none; }
    .f-hero-card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
    body.theme-dark .f-hero-card.right img { filter: invert(1); }

    /* Mission */
    .f-mission { max-width: var(--container-narrow); margin: 0 auto; padding: calc(var(--section-gap) / 2) var(--gutter); text-align: center; }
    /* Paragraph section directly under a hero banner sits tight to it (no top padding). */
    .f-hero + .f-mission { padding-top: 0; }
    .f-mission p {
      font-family: var(--font-display);
      font-size: clamp(16px, 1.68vw, 23px);
      font-weight: 400; letter-spacing: -0.015em;
      line-height: 1.35;
      color: var(--ink-1);
    }
    body.style-system .f-mission p {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .f-mission p + p { margin-top: 28px; }
    .f-mission .ico { color: var(--ink-3); vertical-align: middle; margin: 0 6px; opacity: 0.85; }

    /* Reference-style lead mission: left-aligned two-tone heading + banner beneath,
       text tighter than (and left-aligned to) the banner. */
    .f-mission.is-lead {
      max-width: var(--container-default); text-align: left;
      padding: 220px var(--gutter) 130px;
    }
    /* Mission statement takes the hero title treatment (.hero-cine-title) at its own size. */
    .f-mission.is-lead .f-mission-text {
      max-width: 880px; margin: 0 0 60px;
      font-family: var(--font-nav); font-weight: 300;
      font-size: clamp(28px, 3vw, 42px); line-height: 1.05; letter-spacing: -0.02em;
      color: var(--ink-1);
    }
    .f-mission.is-lead .f-mission-text .mtd { color: var(--ink-1); }
    .f-mission.is-lead .f-mission-text em {
      font-family: var(--font-display); font-style: italic; font-weight: 400;
      font-size: 1.19em;   /* site-wide serif:sans ratio */
      letter-spacing: -0.01em; color: var(--accent);
    }
    .f-mission-banner {
      position: relative;
      width: 100%; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden;
      background: #1c2319 url('/assets/images/Flowers/sandra-seitamaa-xySUIoHFmiw-unsplash.jpg') center/cover no-repeat;
    }
    /* Dark app screen floats in from the bottom-left, zoomed over the flower canvas */
    .f-mission-banner img {
      position: absolute; left: -28%; bottom: -37%; width: 120%; display: block;
      border-radius: 12px;
      box-shadow: 0 34px 70px -22px rgba(0,0,0,0.60), 0 10px 26px -12px rgba(0,0,0,0.45);
    }
    @media (max-width: 767px) {
      .f-mission.is-lead { padding: 60px var(--gutter) 70px; }
      .f-mission.is-lead .f-mission-text { font-size: clamp(24px, 7vw, 32px); margin-bottom: 36px; }
    }

    /* Press validation strip (landing) */
    .f-mission-press { max-width: var(--container-default); padding-bottom: 120px; }
    .f-mission-press > p { max-width: 760px; margin-left: auto; margin-right: auto; }
    .press-strip { margin-top: 68px; }
    .press-eyebrow {
      font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3); margin-bottom: 36px;
      font-family: var(--font-body);
    }
    .press-logos {
      display: flex; align-items: center; justify-content: center;
      gap: 76px; flex-wrap: wrap;
    }
    .press-logos a { display: inline-flex; }
    .press-logos img {
      height: 48px; width: auto; display: block;
      filter: brightness(0); opacity: 0.42;
      transition: opacity 0.2s;
    }
    .press-logos a:hover img { opacity: 0.7; }
    @media (max-width: 767px) {
      .press-logos { gap: 40px 48px; }
      .press-logos img { height: 34px; }
    }
    .ico-xl { font-size: 0.92em; }

    /* Section heading (shared across Field sections) */
    .f-sec-head {
      font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 56px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.08;
      color: var(--ink-1);
      max-width: 760px;
      margin: 0 auto 64px;
      text-align: center;
    }
    body.style-system .f-sec-head {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    body.style-system .f-sec-head em {
      font-family: 'Source Serif 4', serif; font-style: italic; font-size: 1.19em; font-weight: 400;
    }

    /* Core innovation (3-card grid) */
    .f-core { max-width: var(--container-wide); margin: 0 auto; padding: 100px var(--gutter); }
    .f-core-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .f-core-card {
      background: var(--surface); border-radius: 24px;
      padding: 44px 36px;
      display: flex; flex-direction: column; align-items: flex-start;
    }
    .f-core-card > i { font-size: 28px; color: var(--ink-1); margin-bottom: 28px; }
    .f-core-title {
      font-family: var(--font-display); font-size: 28px; font-weight: 400;
      letter-spacing: -0.01em; color: var(--ink-1); margin-bottom: 14px; line-height: 1.2;
    }
    body.style-system .f-core-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .f-core-desc { font-size: 17.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 28px; flex-grow: 1; }

    /* Rich variant of .f-core — three large cards, each with a 16:9 visual
       inset from the card edges and a body underneath. Eyebrow top of body,
       title + description bottom-anchored. Not clickable.
       Scoped so the original 3-icon-card .f-core stays untouched. */
    .f-core.is-rich .f-core-grid {
      gap: 18px;
      margin-top: 64px;
    }
    .f-core.is-rich .f-core-card {
      background: var(--surface);
      border-radius: 12px;
      padding: 18px;                 /* image inset by 18px on all sides */
      display: flex; flex-direction: column;
      align-items: stretch;
      cursor: default;
      aspect-ratio: 16/9;            /* whole card is 16:9 */
    }
    .f-core.is-rich .f-core-card-visual {
      width: 100%;
      flex: 1;                       /* takes half the card height */
      background: var(--paper);
      background-size: cover;
      background-position: center;
      border-radius: 6px;            /* curvy — half the card radius */
    }
    .f-core.is-rich .f-core-card-body {
      flex: 1;                       /* takes the other half */
      padding: 18px 18px 0;          /* total text inset from outer = 36 horizontal */
      display: flex; flex-direction: column;
      justify-content: space-between;
    }
    .f-core.is-rich .f-core-card-eyebrow {
      font-size: 12px; font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .f-core.is-rich .f-core-title { margin-bottom: 0; }
    @media (max-width: 767px) {
      .f-core.is-rich .f-core-grid { grid-template-columns: 1fr; }
      .f-core.is-rich .f-core-card { aspect-ratio: auto; padding: 14px; }
      .f-core.is-rich .f-core-card-visual { aspect-ratio: 16/8; flex: none; }
      .f-core.is-rich .f-core-card-body { padding: 18px 12px 0; min-height: 100px; flex: none; }
    }

    /* Sticky scroll feature – uses Plans V5 .sfeat-* base, just retheme panels */
    .sfeat-panel {
      background-color: var(--surface);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .feature-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px;
    }
    .feature-eyebrow i { font-size: 14px; }

    /* Explore features (6-cell grid) */
    .f-explore { max-width: var(--container-wide); margin: 0 auto; padding: 100px var(--gutter) 150px; }
    .f-explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .f-explore-cell {
      background: var(--surface); border-radius: 22px;
      padding: 40px 32px;
    }
    .f-explore-cell i { font-size: 22px; color: var(--ink-1); display: block; margin-bottom: 22px; opacity: 0.85; }
    .f-explore-title {
      font-family: var(--font-display); font-size: 22px; font-weight: 400;
      letter-spacing: -0.01em; color: var(--ink-1); margin-bottom: 12px; line-height: 1.25;
    }
    body.style-system .f-explore-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .f-explore-desc { font-size: 15px; color: var(--ink-2); line-height: 1.6; }

    /* Case studies (alternating spotlight rows) */
    .f-case { max-width: var(--container-default); margin: 0 auto; padding: calc(var(--section-gap) / 2) var(--gutter); }
    .f-case-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 120px;
      align-items: center; margin-bottom: 100px;
    }
    .f-case-row:last-child { margin-bottom: 0; }
    .f-case-row.flip .f-case-text { order: 2; }
    .f-case-row.flip .f-case-visual { order: 1; }
    .f-case-text { padding: 20px 0; }
    .f-case-text .btn-text { margin-top: 32px; }
    .f-case-quote {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.4vw, 34px);
      font-weight: 400; letter-spacing: -0.01em; line-height: 1.3;
      color: var(--ink-1);
      margin-bottom: 36px;
    }
    body.style-system .f-case-quote {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .f-case-stats { display: flex; gap: 56px; margin-bottom: 36px; }
    .f-case-stats > div { display: flex; flex-direction: column; gap: 4px; }
    .f-case-stat-num {
      font-family: var(--font-display);
      font-size: clamp(36px, 4vw, 56px);
      font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: var(--ink-1);
    }
    .f-case-stat-label { font-size: 14px; color: var(--ink-3); font-weight: 500; }
    .f-case-visual {
      position: relative;
      aspect-ratio: 1/1; border-radius: 28px;
      background: var(--surface);
      background-size: cover; background-position: center; background-repeat: no-repeat;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .f-case-logo {
      font-family: 'Cocogoose', sans-serif; font-weight: 300;
      font-size: clamp(48px, 6vw, 84px);
      letter-spacing: -0.02em; color: var(--ink-2);
    }

    /* Integrations */
    .f-int { max-width: var(--container-default); margin: 0 auto; padding: calc(var(--section-gap) / 2) var(--gutter); }
    .f-int-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 120px;
      align-items: center;
    }
    .f-int-text h2 { margin-bottom: 22px; }
    .f-int-text p { font-size: 17.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 36px; }
    .f-int-visual {
      position: relative;
      aspect-ratio: 1/1; border-radius: 28px;
      background: var(--surface);
      background-size: cover; background-position: center; background-repeat: no-repeat;
      overflow: hidden;
    }

    /* Tier-icon card variant — applied to f-int-visual and f-plans-prompt-visual
       when the section references a plan tier instead of a UI screenshot */
    .tier-card-visual {
      display: flex !important;
      align-items: center;
      justify-content: center;
      background-image: none !important;
    }
    .tier-card-visual .tier-icon {
      width: 52%;
      height: auto;
      display: block;
    }


    /* Plans prompt – replaces inline pricing duplicate */
    .f-plans-prompt { max-width: var(--container-default); margin: 0 auto; padding: calc(var(--section-gap) / 2) var(--gutter); }
    .f-plans-prompt-inner {
      display: grid; grid-template-columns: 1.05fr 1fr; gap: 120px;
      align-items: center;
    }
    .f-plans-prompt-visual {
      aspect-ratio: 4/5; border-radius: 28px;
      background: var(--surface);
      background-size: cover; background-position: center; background-repeat: no-repeat;
    }

    /* Next-gen carousel – bleeds right past the 80px page padding */
    .f-nextgen { padding: calc(var(--section-gap) / 2) 0; overflow: hidden; }
    .f-nextgen-head {
      display: flex; align-items: end; justify-content: space-between;
      margin-bottom: 48px;
      padding-left: max(var(--gutter), calc((100vw - var(--container-default)) / 2 + var(--gutter)));
      padding-right: max(var(--gutter), calc((100vw - var(--container-default)) / 2 + var(--gutter)));
      gap: 40px;
    }
    .f-nextgen-head h2 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 56px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.08;
      color: var(--ink-1);
      max-width: 600px;
    }
    body.style-system .f-nextgen-head h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .f-carousel-nav { display: flex; gap: 10px; flex-shrink: 0; }
    .f-carousel-btn {
      width: 48px; height: 48px; border-radius: 50%;
      border: 1px solid var(--line-mid); background: transparent;
      color: var(--ink-1); font-size: 22px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      padding: 0; line-height: 1;
      font-family: inherit;
      transition: background 0.2s;
    }
    .f-carousel-btn i { font-size: 18px; line-height: 1; }
    .f-carousel-btn:hover { background: var(--pill-hover); }
    .f-feat-track {
      display: flex; gap: 18px;
      overflow-x: auto;
      scroll-behavior: smooth;
      padding: 4px 0;
      padding-right: max(var(--gutter), calc((100vw - var(--container-default)) / 2 + var(--gutter)));
      -webkit-overflow-scrolling: touch;
    }
    .f-feat-track::-webkit-scrollbar { display: none; }
    .f-feat-track { scrollbar-width: none; }
    .f-feat-card {
      flex: 0 0 340px;
      aspect-ratio: 3/4;
      background: #0C0F13;
      border-radius: 24px;
      padding: 32px;
      display: flex; flex-direction: column; justify-content: flex-end;
      position: relative;
      overflow: hidden;
    }
    .f-feat-card:first-child { margin-left: max(var(--gutter), calc((100vw - var(--container-default)) / 2 + var(--gutter))); }
    .f-feat-name {
      font-family: var(--font-display); font-size: 24px; font-weight: 400;
      letter-spacing: -0.01em; color: var(--ink-1); line-height: 1.2; margin-bottom: 12px;
    }
    body.style-system .f-feat-name {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .f-feat-desc { font-size: 17px; color: var(--ink-2); line-height: 1.55; }
    .f-feat-card .f-feat-name { color: #fff; }
    .f-feat-card .f-feat-desc { color: rgba(255,255,255,0.72); }

    /* Testimonials */
    .f-test { max-width: var(--container-narrow); margin: 0 auto; padding: calc(var(--section-gap) / 2) var(--gutter); text-align: center; }
    .f-test-quote {
      font-family: var(--font-display);
      font-size: clamp(26px, 3vw, 42px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.25;
      color: var(--ink-1);
      margin-bottom: 56px;
    }
    body.style-system .f-test-quote {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .f-test-author { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 36px; }
    .f-test-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); }
    .f-test-meta { text-align: left; }
    .f-test-name { font-size: 16px; font-weight: 600; color: var(--ink-1); }
    .f-test-role { font-size: 14px; color: var(--ink-3); }
    .f-test-dots { display: flex; justify-content: center; gap: 10px; }
    .f-test-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--line-mid); cursor: pointer; transition: background 0.2s;
    }
    .f-test-dot.on { background: var(--ink-1); }

    /* Pricing swap section – uses Plans V5 .ov-hero + .cards-section base, with Field-page padding */
    .field-pricing .ov-hero { padding: 100px var(--gutter) 0; }
    .field-pricing .cards-section { padding: 56px var(--gutter) 150px; }

    /* FAQ uses Plans V5 .faq-section directly */
    .f-faq { max-width: var(--container-narrow); margin: 0 auto; padding: calc(var(--section-gap) / 2) var(--gutter); }
    .f-faq h2 { text-align: center; margin-bottom: 56px; }

    /* CTA band */
    .f-cta {
      max-width: var(--container-wide); margin: 0 auto;
      padding: 100px var(--gutter) 150px;
    }
    .f-cta-inner {
      background: var(--surface);
      border-radius: 36px;
      padding: clamp(80px, 10vw, 140px) 60px;
      text-align: center;
    }
    .f-cta-inner.photo {
      --ink-1: #ffffff;
      --ink-2: rgba(255,255,255,0.80);
      --ink-3: rgba(255,255,255,0.55);
      --btn-fill: #ffffff;
      --btn-text: #000000;
      --line-mid: rgba(255,255,255,0.45);
    }
    .f-cta-inner.photo .btn-outline {
      border-color: rgba(255,255,255,0.45);
      color: #ffffff;
    }
    .f-cta-inner.photo .btn-outline:hover {
      border-color: #ffffff;
      background: rgba(255,255,255,0.08);
    }
    .f-cta-inner h2 {
      font-family: var(--font-display);
      font-size: clamp(40px, 5vw, 72px);
      font-weight: 400; letter-spacing: -0.02em; line-height: 1.05;
      color: var(--ink-1);
      margin-bottom: 40px;
      max-width: 760px; margin-left: auto; margin-right: auto;
    }
    body.style-system .f-cta-inner h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    body.style-system .f-cta-inner h2 em {
      font-family: 'Source Serif 4', serif; font-style: italic; font-size: 1.19em; font-weight: 400;
    }
    .f-cta-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }


    /* ════════════════════════════════════
       MOBILE  (≤ 768px)
       Single breakpoint: collapse multi-column grids,
       shrink chrome, keep structure intact.
    ════════════════════════════════════ */
    @media (max-width: 767px) {
      /* ── Mobile gutter: shrink the token, every section auto-updates ── */
      :root { --gutter: 16px; }

      /* ── Safety net: nothing should ever push the page wider than the viewport ── */
      html, body { overflow-x: hidden; }

      /* ── Hero cards: stack vertically, kill fixed aspect ratio ── */
      .f-hero-cards { flex-direction: column; height: auto; gap: 16px; }
      .f-hero-card.left,
      .f-hero-card.right {
        flex: 0 0 auto; width: 100%; aspect-ratio: 4/3; height: auto;
      }
      .f-hero-card.left > img { transform: none; width: 100%; height: auto; }
      .f-hero-card.right > img { width: 50%; }

      /* ── Containers: horizontal padding now flows through --gutter token (set above).
         Only vertical padding needs trimming — sections use 100/150/200px on desktop
         which is too much on mobile. ── */
      .ft-body { padding-top: 80px; padding-bottom: 40px; }
      .who-section,
      .cap-section,
      .nudge-section,
      .ind-nudge { padding-top: 80px; padding-bottom: 80px; }
      .statement-section {
        padding-top: 48px; padding-bottom: 48px;
        margin-bottom: 48px;
      }
      .field-pricing .ov-hero { padding-top: 100px; }
      .field-pricing .cards-section { padding-top: 40px; padding-bottom: 100px; }
      .faq-section { padding-top: 80px; padding-bottom: 120px; }
      .tier-hero { padding-top: 100px; padding-bottom: 60px; }
      .f-hero { padding: 100px var(--gutter) 80px; }
      .tier-hero-center { padding-top: 100px; }

      /* ── Nav: hide desktop links + controls, show burger ── */
      nav { padding: 0 var(--gutter); grid-template-columns: 1fr auto; }
      .nav-links { display: none; }
      .nav-right { gap: 8px; }
      .nav-right .btn-nav,
      .nav-burger { display: flex; }

      /* ── Collapse every multi-column grid ── */
      .ft-top { grid-template-columns: 1fr; gap: 56px; margin-bottom: 80px; }
      .ft-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
      .ft-bottom {
        flex-direction: column; align-items: flex-start;
        justify-content: flex-start; gap: 18px;
      }
      .ft-bottom-links { flex-wrap: wrap; gap: 16px; }

      .card-grid,
      .card-grid.teams { grid-template-columns: 1fr !important; gap: 16px; }

      .spot-row,
      .who-section,
      .who-grid,
      .feat-grid,
      .nudge-grid,
      .statement-section,
      .pro-row,
      .expert-pillars,
      .teams-cards-grid,
      .cap-section,
      .ind-nudge-grid,
      .f-core-grid,
      .f-explore-grid,
      .f-case-row,
      .f-int-row,
      .f-plans-prompt-inner,
      .sfeat-wrapper,
      .tier-hero,
      .feat-mega-grid,
      .nav-learn-mega .feat-mega-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }
      /* Inline grid on Expert page */
      [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }

      /* ── Sticky scroll: hide visual column (sticky-scroll mechanic can't map to 1-col without HTML restructure) ── */
      .sfeat-text-block { min-height: auto; padding: 24px 0; }
      .sfeat-visual-col { display: none; }
      .sfeat-wrapper { display: none; }   /* hide the whole sticky-feature section on mobile */

      /* ── Case row: keep text above visual when flipped ── */
      .f-case-row.flip .f-case-text,
      .f-case-row.flip .f-case-visual { order: initial; }
      .f-case-row { margin-bottom: 64px; }
      .f-case-stats { gap: 32px; flex-wrap: wrap; }

      /* ── Compare table: horizontal scroll with right-edge fade affordance ── */
      .compare-section { position: relative; }
      .compare-section::after {
        content: '';
        position: absolute; top: 0; right: 0; bottom: 0;
        width: 48px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(245,244,243,0) 0%, rgba(245,244,243,0.95) 100%);
        z-index: 2;
      }
      .compare-table {
        padding: 0 20px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
      }
      .compare-table::after {
        content: 'Scroll →';
        display: block;
        font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
        color: var(--ink-3);
        text-align: right;
        padding: 14px 20px 0;
      }
      .compare-groupstrip,
      .compare-row { min-width: 720px; }

      /* ── Carousel: align card start with mobile padding ── */
      .f-feat-card:first-child { margin-left: 20px; }
      .f-feat-card { flex: 0 0 280px; }
      .f-nextgen-head {
        padding-left: 20px; padding-right: 20px;
        flex-direction: column; align-items: flex-start; gap: 24px;
      }

      /* ── CTA band: tighten ── */
      .f-cta-inner { padding: 64px 24px; border-radius: 24px; }

      /* ── Icon card: shrink card AND its image down from desktop sizes ── */
      .icon-card { height: 360px; border-radius: 40px; margin-bottom: 48px; padding: 24px; }
      .icon-card img {
        width: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        height: auto !important;
        object-fit: contain;
      }

      /* ── Reduce general vertical rhythm ── */
      .f-core,
      .f-explore,
      .f-case,
      .f-int,
      .f-plans-prompt,
      .f-test,
      .f-faq,
      .f-cta,
      .f-nextgen { padding-top: 64px; padding-bottom: 80px; }
    }

    /* ════════════════════════════════════
       PHASE 5 — supporting pages
       Learn, Download, Legal, 404, Search, Contact.
       Light NEW BUILDS, heavy shelf reuse.
    ════════════════════════════════════ */

    /* Filter chips — pill nav, reused on Learn topics + Search filters */
    .filter-chips {
      max-width: var(--container-default); margin: 0 auto;
      padding: 0 var(--gutter) 32px;
      display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    }
    .filter-chips-eyebrow {
      font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3);
      margin-right: 8px;
    }
    .filter-chip {
      display: inline-flex; align-items: center;
      min-height: 44px;
      padding: 10px 16px; border-radius: 100px;
      background: transparent; border: 1px solid var(--line-mid);
      font-size: 14px; font-weight: 500; color: var(--ink-2);
      cursor: pointer; text-decoration: none;
      transition: background 0.18s, color 0.18s, border-color 0.18s;
    }
    .filter-chip:hover, .filter-chip.active {
      background: var(--ink-1); color: var(--paper); border-color: var(--ink-1);
    }

    /* Learn / Contact small reading-mode hero */
    .reading-hero {
      max-width: 880px; margin: 0 auto;
      padding: 140px var(--gutter) calc(var(--section-gap) / 2);
    }
    .reading-hero .eyebrow { margin-bottom: 22px; }
    .reading-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(40px, 4.8vw, 64px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.06;
      color: var(--ink-1); margin: 0 0 22px;
    }
    body.style-system .reading-hero h1 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .reading-hero p {
      font-size: 19px; line-height: 1.55; color: var(--ink-2); margin: 0;
      max-width: 640px;
    }

    /* Glossary rows */
    .glossary { max-width: var(--container-default); margin: 0 auto; padding: 24px var(--gutter) 120px; }
    .glossary-row {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
      gap: 40px;
      padding: 28px 0;
      border-top: 1px solid var(--line);
    }
    .glossary-row:last-child { border-bottom: 1px solid var(--line); }
    .glossary-term {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2;
      color: var(--ink-1);
    }
    body.style-system .glossary-term {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .glossary-def { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

    /* Download — platform list. No store badges. The Open ORTH CTA in the
       hero routes to the onelink service for iOS / Android / web. */
    .dl-platform {
      max-width: var(--container-default); margin: 0 auto;
      padding: 60px var(--gutter);
    }
    .dl-platform-row {
      display: grid; grid-template-columns: 1fr 1fr 2fr;
      gap: 32px;
      padding: calc(var(--section-gap) / 2) 0;
      border-top: 1px solid var(--line);
      align-items: center;
    }
    .dl-platform-row:last-child { border-bottom: 1px solid var(--line); }
    .dl-platform-name {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 400; color: var(--ink-1);
    }
    body.style-system .dl-platform-name {
      font-family: 'Cocogoose', sans-serif; font-weight: 300;
    }
    .dl-platform-status {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
      color: var(--ink-2);
    }
    .dl-platform-status::before {
      content: ''; width: 8px; height: 8px; border-radius: 50%;
      background: #4F6BED;
    }
    .dl-platform-req { font-size: 15px; color: var(--ink-3); line-height: 1.5; }

    /* 404 error hero — centered, full-screen feel */
    .error-hero {
      max-width: 720px; margin: 0 auto;
      padding: 140px var(--gutter) calc(var(--section-gap) / 2);
      text-align: center;
    }
    .error-hero .eyebrow { margin-bottom: 22px; }
    .error-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(46px, 6vw, 88px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.05;
      color: var(--ink-1); margin: 0 0 22px;
    }
    body.style-system .error-hero h1 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .error-hero p {
      font-size: 18px; line-height: 1.55; color: var(--ink-2);
      max-width: 560px; margin: 0 auto;
    }

    /* Contact form */
    .contact-form {
      max-width: var(--container-narrow); margin: 0 auto;
      padding: calc(var(--section-gap) / 2) var(--gutter);
      display: flex; flex-direction: column; gap: 20px;
    }
    /* When a form sits inside .contact-base, the outer section
       already handles horizontal gutter — don't double-pad. */
    .contact-base .contact-form {
      padding-top: 40px; padding-left: 0; padding-right: 0; padding-bottom: 0;
    }
    /* Success panel shown in place of a submitted form */
    .form-success { max-width: var(--container-narrow); margin: 0 auto; padding: 40px 0 24px; animation: form-success-in 0.45s ease both; }
    .form-success .eyebrow { color: var(--accent); }
    .form-success .sec-head { text-align: left; margin: 10px 0 0; }
    .form-success-body { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 560px; margin: 22px 0 34px; }
    .form-success-actions { display: flex; gap: 14px; flex-wrap: wrap; }
    .form-success.is-compact { padding: 8px 0; }
    .form-success.is-compact .form-success-body { margin: 0; }
    @keyframes form-success-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    .contact-form-field { display: flex; flex-direction: column; gap: 8px; }
    .contact-form-field label {
      font-size: 13px; font-weight: 600; color: var(--ink-2);
    }
    .contact-form-field input,
    .contact-form-field textarea {
      background: transparent;
      border: 0; border-bottom: 1px solid var(--line-mid);
      padding: 10px 0;
      font-size: 16px; font-family: var(--font-body);
      color: var(--ink-1); outline: 0;
      transition: border-color 0.2s;
    }
    .contact-form-field input:focus,
    .contact-form-field textarea:focus { border-color: var(--ink-1); }
    .contact-form-field textarea { min-height: 120px; resize: vertical; }
    /* Select — bordered box variant (team size, region, etc.)
       appearance:none removes the native browser arrow; a custom
       chevron is injected via background-image at a fixed right inset
       so the arrow never touches the border.
       Chevron colour flips with theme: black on light, white on dark. */
    .contact-form-field select {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px 44px 14px 16px;
      font-size: 15px; font-family: var(--font-body);
      color: var(--ink-1);
      width: 100%; cursor: pointer;
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
    }
    body.theme-dark .contact-form-field select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    }
    .contact-form button[type=submit] {
      align-self: flex-start;
      background: var(--ink-1); color: var(--paper);
      border: 0; padding: 14px 30px; border-radius: 100px;
      font-size: 15px; font-weight: 600; cursor: pointer;
      font-family: var(--font-body);
      margin-top: 12px;
      transition: opacity 0.2s;
    }
    .contact-form button[type=submit]:hover { opacity: 0.85; }

    .contact-base {
      max-width: var(--container-narrow); margin: 0 auto;
      padding: 80px var(--gutter);
    }
    .contact-base h3 {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.4vw, 32px);
      font-weight: 400; letter-spacing: -0.01em;
      color: var(--ink-1); margin: 0 0 18px;
    }
    body.style-system .contact-base h3 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300;
    }
    .contact-base p { font-size: 16px; color: var(--ink-2); margin: 0 0 6px; }

    /* Legal body — single column reading mode */
    .legal-body {
      max-width: 880px; margin: 0 auto;
      padding: calc(var(--section-gap) / 2) var(--gutter);
      font-size: 16px; line-height: 1.7; color: var(--ink-1);
    }
    .legal-body h2 {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.4vw, 32px);
      font-weight: 400; letter-spacing: -0.01em;
      margin: 48px 0 16px;
    }
    body.style-system .legal-body h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300;
    }
    .legal-body p { margin: 0 0 16px; color: var(--ink-2); }
    .legal-body a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 3px; }
    .legal-body a:hover { color: var(--ink-2); }

    @media (max-width: 767px) {
      .reading-hero, .error-hero { padding-top: 100px; }
      .glossary-row { grid-template-columns: 1fr; gap: 12px; }
      .dl-platform-row { grid-template-columns: 1fr; gap: 12px; }
    }

    /* ════════════════════════════════════
       STORIES — Phase 2 (revised)
       Breathy, intentional, "just the story". No information tags,
       no dividers, no overlay gradients. Eyebrow only on the hero.
       Each story ends with a connection to the product.
       Footer Parallel band hidden on story routes.
    ════════════════════════════════════ */
    .story-pg { padding-top: 62px; }

    /* Hide the global pre-footer Parallel band on all story routes */
    body[data-page="stories"] .ft-parallel-wrap,
    body[data-page^="story-"] .ft-parallel-wrap { display: none; }

    /* Hero — text-first, centered, OpenAI-story style.
       No photo overlay. The feature image lives below the hero. */
    .story-hero {
      max-width: var(--container-default); margin: 0 auto;
      padding: 140px var(--gutter) 24px;
      text-align: center;
    }
    .story-hero-eyebrow {
      font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
      color: var(--ink-3);
      margin-bottom: 28px;
    }
    .story-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(48px, 6.4vw, 92px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.02;
      color: var(--ink-1);
      max-width: 16ch; margin: 0 auto 24px;
    }
    body.style-system .story-hero h1 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .story-hero-sub {
      font-size: 19px; color: var(--ink-2); line-height: 1.55;
      max-width: 560px; margin: 0 auto;
    }

    /* Feature image below the hero — large, rounded, no gradient */
    .story-feature {
      max-width: var(--container-default); margin: 0 auto;
      padding: 24px var(--gutter) 40px;
    }
    .story-feature-img {
      width: 100%; aspect-ratio: 16/9;
      background: var(--surface);
      background-size: cover; background-position: center;
      border-radius: 18px;
    }
    /* Photo credit caption beneath the establishing feature image —
       documentary masthead style, two lines, all caps, dimmed. */
    .story-credit {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-1);
      opacity: 0.6;
      text-align: left;
    }

    /* Body — single readable column. Generous vertical breath. */
    .story-body {
      max-width: 720px; margin: 0 auto;
      padding: 56px var(--gutter);
      font-size: 18px; line-height: 1.75; color: var(--ink-1);
    }
    .story-body p { margin: 0 0 24px; }
    .story-body p:last-child { margin-bottom: 0; }
    .story-body em {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 1.04em;
      font-weight: 400;
    }
    .story-body h3 {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.2vw, 32px);
      font-weight: 400; letter-spacing: -0.01em; line-height: 1.2;
      color: var(--ink-1);
      margin: 24px 0 18px;
    }
    body.style-system .story-body h3 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }

    /* Pull quote — centered display, serif italic, no lines */
    .story-pull {
      max-width: 920px; margin: 0 auto;
      padding: 48px var(--gutter) 56px;
      text-align: center;
    }
    .story-pull blockquote {
      margin: 0;
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(28px, 4vw, 56px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.2;
      color: var(--ink-1);
    }
    body.style-system .story-pull blockquote {
      font-family: 'Cocogoose', sans-serif; font-style: normal;
      font-weight: 300; letter-spacing: -0.02em;
    }
    .story-pull cite {
      display: block; margin-top: 24px;
      font-style: normal;
      font-size: 14px; font-weight: 500; color: var(--ink-3);
    }

    /* Asymmetric image pair — big landscape + small offset portrait,
       captions beneath each. Loose, not a tidy grid. */
    .story-pair {
      max-width: var(--container-default); margin: 0 auto;
      padding: 32px var(--gutter) 56px;
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
      gap: 24px;
      align-items: end;
    }
    .story-pair figure { margin: 0; }
    .story-pair-large .story-pair-img { aspect-ratio: 16/10; }
    .story-pair-small {
      max-width: 320px;
      justify-self: center;
      padding-bottom: 32px;
    }
    .story-pair-small .story-pair-img { aspect-ratio: 4/5; }
    .story-pair-img {
      width: 100%;
      background: var(--surface);
      background-size: cover; background-position: center;
      border-radius: 14px;
    }
    .story-pair figcaption {
      margin-top: 14px;
      font-size: 13px; color: var(--ink-3); line-height: 1.5;
    }

    /* Reverse pair — small first, then large */
    .story-pair.flip {
      grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    }
    .story-pair.flip .story-pair-small { order: 1; }
    .story-pair.flip .story-pair-large { order: 2; }

    /* Story-end product CTA — connection to ORTH every story closes with */
    .story-cta-end {
      padding: calc(var(--section-gap) / 2) var(--gutter);
      text-align: center;
      background: #141719;
      --paper:   #141719;
      --ink-1:   rgba(255,255,255,0.92);
      --ink-2:   rgba(255,255,255,0.55);
      --ink-3:   rgba(255,255,255,0.35);
      --surface: rgba(255,255,255,0.07);
      --line:    rgba(255,255,255,0.10);
      --line-mid: rgba(255,255,255,0.22);
    }
    .story-cta-end h2 {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 54px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.08;
      color: var(--ink-1);
      margin: 0 auto 18px; max-width: 18ch;
    }
    body.style-system .story-cta-end h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .story-cta-end p {
      font-size: 17px; color: var(--ink-2); line-height: 1.55;
      max-width: 540px; margin: 0 auto 48px;
    }
    .story-prompt-row {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
      max-width: var(--container-default); margin: 0 auto 48px;
      text-align: left;
    }
    .story-prompt {
      background: var(--surface);
      border-radius: 28px;
      padding: 48px;
      font-size: 30px; line-height: 1.4; color: var(--ink-1);
      font-style: italic;
      font-family: var(--font-display);
      min-height: 240px;
      display: flex; align-items: flex-start;
    }
    body.style-system .story-prompt {
      font-family: 'Cocogoose', sans-serif; font-style: normal;
      font-weight: 300;
    }
    .story-cta-end-buttons {
      display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
    }

    /* ── story-cta-end · photo variant (photo bg + light text banners) ── */
    .story-cta-end.is-photo {
      position: relative;
      overflow: hidden;
    }
    .story-cta-end.is-photo .parallax-bg {
      position: absolute; inset: -20% 0;
      background-size: cover; background-position: center;
      z-index: 0; will-change: transform;
    }
    .story-cta-end.is-photo::before {
      content: ''; position: absolute; inset: 0;
      background: rgba(0,0,0,0.24);
      z-index: 1;
    }
    .story-cta-end.is-photo > * { position: relative; z-index: 2; }
    .story-cta-end.is-photo h2,
    .story-cta-end.is-photo p { text-shadow: 0 2px 22px rgba(0,0,0,0.45); }
    .story-cta-end.is-photo p { color: rgba(255,255,255,0.84); }

    /* three side-by-side light banners, dark text */
    .story-cta-end.is-photo .story-prompt-row {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
      max-width: var(--container-default); margin: 0 auto 40px;
      text-align: left;
    }
    .story-cta-end.is-photo .story-prompt {
      display: flex; align-items: flex-start;
      background: #f5f4f3;
      border: none; border-radius: 18px;
      padding: 32px;
      min-height: 0;
      color: #1b1e20;
      font-family: var(--font-body); font-style: normal; font-weight: 400;
      font-size: 28px; line-height: 1.35; letter-spacing: -0.005em;
      box-shadow: 0 18px 46px rgba(0,0,0,0.28);
    }
    body.style-system .story-cta-end.is-photo .story-prompt {
      font-family: var(--font-body); font-style: normal; font-weight: 400;
    }

    /* ── Stories index ── */
    .stories-index-hero {
      max-width: var(--container-default); margin: 0 auto;
      padding: 140px var(--gutter) calc(var(--section-gap) / 2);
      text-align: center;
    }
    /* Stories index: the cards carousel sits tight under the hero (no top padding) */
    body[data-page="stories"] .f-trio { padding-top: 0; }
    .stories-index-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(46px, 6vw, 92px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.02;
      color: var(--ink-1);
      margin: 0 auto 22px; max-width: 18ch;
    }
    body.style-system .stories-index-hero h1 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .stories-index-sub {
      font-size: 19px; color: var(--ink-2); line-height: 1.55;
      max-width: 560px; margin: 0 auto;
    }

    /* Index grid — 3-up cards. No overlay gradients on images. */
    .stories-grid-section {
      max-width: var(--container-default); margin: 0 auto;
      padding: 0 var(--gutter) 96px;
    }
    .stories-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
    }
    .story-card {
      display: flex; flex-direction: column; gap: 14px;
      text-decoration: none; cursor: pointer;
      transition: opacity 0.2s;
    }
    .story-card:hover { opacity: 0.88; }
    .story-card-img {
      width: 100%; aspect-ratio: 4/5;
      background: var(--surface);
      background-size: cover; background-position: center;
      border-radius: 18px;
    }
    .story-card-eyebrow {
      font-size: 13px; font-weight: 500; color: var(--ink-3);
    }
    .story-card-name {
      font-family: var(--font-display);
      font-size: clamp(22px, 2vw, 28px);
      font-weight: 400; letter-spacing: -0.01em; line-height: 1.15;
      color: var(--ink-1);
      margin: 0;
    }
    body.style-system .story-card-name {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .story-card-open {
      font-size: 15px; line-height: 1.5; color: var(--ink-2);
    }

    /* Stories subscribe — distinct from footer subscribe. No top border. */
    .stories-subscribe {
      max-width: 720px; margin: 0 auto;
      padding: 96px var(--gutter);
      text-align: center;
    }
    .stories-subscribe h2 {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 54px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.08;
      color: var(--ink-1);
      margin: 0 0 18px;
    }
    body.style-system .stories-subscribe h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .stories-subscribe p {
      font-size: 17px; color: var(--ink-2); line-height: 1.55;
      margin: 0 0 36px; max-width: 480px; margin-left: auto; margin-right: auto;
    }
    .stories-subscribe-form {
      display: flex; align-items: center;
      border-bottom: 1px solid var(--ink-1);
      padding: 8px 0;
      max-width: 480px; margin: 0 auto 14px;
    }
    .stories-subscribe-form input {
      flex: 1; background: transparent; border: 0; outline: 0;
      color: var(--ink-1); font-size: 16px; font-family: var(--font-body);
      padding: 6px 0;
    }
    .stories-subscribe-form input::placeholder { color: var(--ink-3); }
    .stories-subscribe-form button {
      background: var(--ink-1); color: var(--paper);
      border: 0; padding: 10px 22px; border-radius: 100px;
      font-size: 14px; font-weight: 600; cursor: pointer;
      font-family: var(--font-body);
      transition: opacity 0.2s;
    }
    .stories-subscribe-form button:hover { opacity: 0.85; }
    .stories-subscribe-privacy {
      font-size: 13px; color: var(--ink-3);
    }

    /* Related stories — minimal, no eyebrow, no top border */
    .related-stories {
      max-width: var(--container-default); margin: 0 auto;
      padding: calc(var(--section-gap) / 2) var(--gutter);
    }
    .related-stories h2 {
      font-family: var(--font-display);
      font-size: clamp(28px, 3vw, 42px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.1;
      color: var(--ink-1);
      margin: 0 0 40px;
    }
    body.style-system .related-stories h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .related-stories-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
    }

    /* ════════════════════════════════════
       FEATURES — Phase 3 NEW BUILDS
       Library additions used on /features and selected sub-pages.
    ════════════════════════════════════ */

    /* Intelligence pillars — three full-height columns: Surface · Command · Adaptive.
       Visually weightier than a card grid; closer to the page spine itself. */
    .intel-pillars {
      max-width: var(--container-wide); margin: 0 auto;
      padding: calc(var(--section-gap) / 2) var(--gutter);
    }
    .intel-pillars-head {
      max-width: 880px; margin: 0 auto 56px; text-align: center;
    }
    .intel-pillars-eyebrow {
      font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px;
    }
    .intel-pillars-head h2 {
      font-family: var(--font-display);
      font-size: clamp(36px, 4.4vw, 64px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.06;
      color: var(--ink-1); margin: 0;
    }
    body.style-system .intel-pillars-head h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .intel-pillars-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    }
    .intel-pillar {
      background: var(--surface);
      border-radius: 28px;
      padding: 56px 36px 44px;
      display: flex; flex-direction: column; min-height: 480px;
    }
    .intel-pillar-num {
      font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3); margin-bottom: 32px;
    }
    .intel-pillar-name {
      font-family: var(--font-display);
      font-size: clamp(36px, 3.6vw, 52px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.05;
      color: var(--ink-1); margin: 0 0 18px;
    }
    body.style-system .intel-pillar-name {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .intel-pillar-tag {
      font-size: 16px; font-style: italic; color: var(--ink-3);
      margin-bottom: 32px; font-family: var(--font-display);
    }
    body.style-system .intel-pillar-tag {
      font-family: 'Cocogoose', sans-serif; font-style: normal; font-weight: 300;
    }
    .intel-pillar-body {
      font-size: 16px; line-height: 1.6; color: var(--ink-2);
      flex-grow: 1; margin-bottom: 28px;
    }
    .intel-pillar-avail {
      font-size: 13px; font-weight: 600; color: var(--ink-2);
      padding-top: 20px; border-top: 1px solid var(--line);
    }
    .intel-pillar-avail strong {
      display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
    }

    /* Feat spine — capability spine grouped by domain. Eight domains, list-form,
       breathy and visual but not tabular. Reads like the index of a book. */
    .feat-spine {
      max-width: var(--container-default); margin: 0 auto;
      padding: calc(var(--section-gap) / 2) var(--gutter);
    }
    .feat-spine-head {
      margin-bottom: 64px; max-width: 720px;
    }
    .feat-spine-eyebrow {
      font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px;
    }
    .feat-spine-head h2 {
      font-family: var(--font-display);
      font-size: clamp(36px, 4.4vw, 64px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.06;
      color: var(--ink-1); margin: 0;
    }
    body.style-system .feat-spine-head h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .feat-domain {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      gap: 64px;
      padding: 36px 0;
      border-top: 1px solid var(--line);
    }
    .feat-domain:last-child { border-bottom: 1px solid var(--line); }
    .feat-domain-num {
      font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
    }
    .feat-domain-name {
      font-family: var(--font-display);
      font-size: clamp(26px, 2.6vw, 36px);
      font-weight: 400; letter-spacing: -0.01em; line-height: 1.15;
      color: var(--ink-1); margin: 0;
    }
    body.style-system .feat-domain-name {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .feat-domain-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 12px;
    }
    .feat-domain-list li {
      font-size: 16.5px; line-height: 1.5; color: var(--ink-2);
      padding-left: 18px; position: relative;
    }
    .feat-domain-list li::before {
      content: ''; position: absolute; left: 0; top: 11px;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--ink-3);
    }

    /* Global counter — single block, two big numbers, breadth fact in display type. */
    .global-counter {
      max-width: var(--container-wide); margin: 0 auto;
      padding: calc(var(--section-gap) / 2) var(--gutter);
      text-align: center;
    }
    .global-counter-eyebrow {
      font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3); margin-bottom: 36px;
    }
    .global-counter-row {
      display: flex; justify-content: center; align-items: baseline;
      gap: clamp(40px, 8vw, 120px);
      margin-bottom: 48px; flex-wrap: wrap;
    }
    .global-counter-stat {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
    }
    .global-counter-num {
      font-family: var(--font-display);
      font-size: clamp(96px, 18vw, 240px);
      font-weight: 400; letter-spacing: -0.04em; line-height: 0.9;
      color: var(--ink-1);
    }
    body.style-system .global-counter-num {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.04em;
    }
    .global-counter-label {
      font-size: 16px; font-weight: 500; color: var(--ink-2);
      text-transform: lowercase; letter-spacing: 0.02em;
    }
    .global-counter-sub {
      font-size: 18px; line-height: 1.55; color: var(--ink-2);
      max-width: 640px; margin: 0 auto;
    }

    /* Crop coverage — tag cloud / chip grid for breadth. */
    .crop-coverage {
      max-width: var(--container-default); margin: 0 auto;
      padding: calc(var(--section-gap) / 2) var(--gutter);
    }
    .crop-coverage-head {
      margin-bottom: 40px; max-width: 720px;
    }
    .crop-coverage-eyebrow {
      font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px;
    }
    .crop-coverage-head h2 {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 54px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.08;
      color: var(--ink-1); margin: 0;
    }
    body.style-system .crop-coverage-head h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .crop-tags {
      display: flex; flex-wrap: wrap; gap: 10px;
      margin-bottom: 32px;
    }
    .crop-tag {
      padding: 8px 16px; border-radius: 100px;
      background: var(--pill-bg);
      font-size: 14px; font-weight: 500; color: var(--ink-1);
      cursor: default; user-select: none;
      transition: background 0.18s;
    }
    .crop-tag:hover { background: var(--pill-hover); }
    .crop-coverage-foot {
      display: flex; gap: 16px; flex-wrap: wrap;
    }

    /* Case study standalone (Disease lead-with, Yield) — single quote/stat block,
       no image-text split. Variant of f-case for solo use. */
    .case-study {
      max-width: var(--container-default); margin: 0 auto;
      padding: 80px var(--gutter) 100px;
    }
    .case-study-eyebrow {
      font-size: 13px; font-weight: 600; color: var(--ink-3);
      margin-bottom: 28px;
    }
    .case-study h2 {
      font-family: var(--font-display);
      font-size: clamp(36px, 4.4vw, 64px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.06;
      color: var(--ink-1); margin: 0 0 32px; max-width: 18ch;
    }
    body.style-system .case-study h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .case-study-body {
      max-width: 720px;
      font-size: 18px; line-height: 1.7; color: var(--ink-1);
      margin-bottom: 36px;
    }
    .case-study-quote {
      max-width: 720px;
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(22px, 2.4vw, 30px);
      line-height: 1.3; color: var(--ink-1);
      margin: 0 0 22px;
    }
    body.style-system .case-study-quote {
      font-family: 'Cocogoose', sans-serif; font-style: normal; font-weight: 300;
    }
    .case-study-attribution {
      font-size: 14px; font-weight: 500; color: var(--ink-3);
      margin-bottom: 32px;
    }
    .case-study-cta {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 14px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--ink-1);
      text-decoration: none;
    }
    .case-study-cta:hover { opacity: 0.7; }

    /* ── f-trio · edge-to-edge image carousel.
       Inherits the page theme. Header (eyebrow + h2 + sub) sits on
       the left of the gutter; arrows on the right.
       The row breaks out: one card centered + halves of neighbors
       peeking at each side (cell width 50vw, padded by 25vw).
       Title on the image card, description below. */
    .f-trio {
      padding: calc(var(--section-gap) / 2) 0;
      overflow-x: hidden;
      background: #e8e7e5;
    }
    /* Marketing carousels only: stories index, related-stories on story pages,
       and the download app-features row keep the paper background. */
    body[data-page="stories"] .f-trio,
    body[data-page^="story-"] .f-trio,
    body[data-page="download"] .f-trio { background: transparent; }
    /* Stories-teaser carousels (cells link out to a story) stay on paper too,
       including the one on the home page. */
    .f-trio:has(a.f-trio-cell[href^="/stories/"]) { background: transparent; }
    .f-trio.uc-dark:has(a.f-trio-cell[href^="/stories/"]) { background: #0c0f13; }
    .f-trio-head {
      max-width: var(--container-default);
      margin: 0 auto 56px;
      padding: 0 var(--gutter);
      display: flex; align-items: end; justify-content: space-between;
      gap: 40px;
    }
    .f-trio-head-text { max-width: 700px; }
    .f-trio-head h2 {
      font-family: var(--font-display);
      font-size: clamp(36px, 4vw, 56px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.06;
      color: var(--ink-1); margin: 0 0 18px;
    }
    body.style-system .f-trio-head h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .f-trio-sub {
      font-size: 17px; line-height: 1.6;
      color: var(--ink-2); margin: 0; max-width: 580px;
    }
    .f-trio-row {
      display: flex; gap: 18px;
      /* First/last card align to where the head title starts/ends:
         (1400 default container's inner content edge). */
      padding-left:  max(var(--gutter), calc((100vw - var(--container-default)) / 2 + var(--gutter)));
      padding-right: max(var(--gutter), calc((100vw - var(--container-default)) / 2 + var(--gutter)));
      scroll-padding-left:  max(var(--gutter), calc((100vw - var(--container-default)) / 2 + var(--gutter)));
      scroll-padding-right: max(var(--gutter), calc((100vw - var(--container-default)) / 2 + var(--gutter)));
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .f-trio-row::-webkit-scrollbar { display: none; }
    .f-trio-cell {
      flex: 0 0 50vw;
      scroll-snap-align: start;
      display: flex; flex-direction: column;
    }
    .f-trio-cell-img {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10;   /* matches the 1600x1000 UI captures; uniform across all carousel cells */
      background: var(--surface);
      background-size: cover; background-position: center;
      border-radius: 20px;
      overflow: hidden;
    }
    /* ── Dark reference-style carousel (uc-dark) ───────────────────────── */
    .f-trio.uc-dark { background: #0c0f13; padding: calc(var(--section-gap) / 2) 0; }
    .f-trio.uc-dark .eyebrow { color: rgba(255,255,255,0.6); }
    .f-trio.uc-dark h2 { color: #fff; font-size: clamp(28px, 2.9vw, 40px); }
    .f-trio.uc-dark h2 em { color: #B6CCB0; }
    .f-trio.uc-dark .partner-all-list span { color: rgba(255,255,255,0.55); }
    .uc-dark-actions { display: flex; align-items: center; gap: 18px; }
    .uc-see-more {
      display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
      border: 1px solid rgba(255,255,255,0.32); border-radius: 999px;
      padding: 11px 20px; color: #fff; font-family: var(--font-body);
      font-weight: 600; font-size: 14px; text-decoration: none; transition: background 0.2s;
    }
    .uc-see-more:hover { background: rgba(255,255,255,0.1); }
    /* Light (non-dark) carousel: adapt the see-more pill + sub text to a light background */
    .f-trio:not(.uc-dark) .uc-see-more { border-color: rgba(0,0,0,0.22); color: var(--ink-1); }
    .f-trio:not(.uc-dark) .uc-see-more:hover { background: rgba(0,0,0,0.05); }
    .f-trio:not(.uc-dark) .f-trio-head-sub { color: var(--ink-2); }
    /* Certification list on dark bands (security section) */
    .uc-cert-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
    .uc-cert-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; font-weight: 500; color: rgba(255,255,255,0.88); line-height: 1.5; }
    .uc-cert-list li i { color: #B6CCB0; font-size: 19px; flex: none; margin-top: 1px; }
    .f-trio.uc-dark .f-trio-head-sub { margin: 16px 0 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.62); max-width: 600px; }
    /* Story/card cells on a dark carousel — keep text legible */
    .f-trio.uc-dark .f-trio-cell-desc { color: rgba(255,255,255,0.72); }
    .f-trio.uc-dark .f-trio-cell-quote { color: #fff; }
    .f-trio.uc-dark .btn-text { color: #fff; }
    .f-trio.uc-dark .f-carousel-btn { border-color: rgba(255,255,255,0.32); color: #fff; }
    .f-trio.uc-dark .f-carousel-btn:hover { background: rgba(255,255,255,0.12); }
    /* uc-dark "in practice" scenario: one wide image at full width instead of the carousel */
    .uc-wide-media { max-width: var(--container-default); margin: 40px auto 0; padding: 0 var(--gutter); }
    video.uc-wide-img, video.f-trio-cell-img { display:block; object-fit:cover; }
    .uc-wide-img { width: 100%; aspect-ratio: 24/9; background-size: cover; background-position: center; border-radius: 20px; }
    /* Carousel position indicator — segmented bars that fill with scroll progress */
    .f-trio-dots { display: flex; gap: 16px; margin-top: 64px; padding: 0 max(var(--gutter), calc((100vw - var(--container-default)) / 2 + var(--gutter))); }
    .f-trio-dot { flex: 1 1 0; height: 2px; border-radius: 2px; background: rgba(0,0,0,0.12); overflow: hidden; }
    .f-trio-dot > i { display: block; height: 100%; background: var(--ink-1); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
    .f-trio.uc-dark .f-trio-dot { background: rgba(255,255,255,0.18); }
    .f-trio.uc-dark .f-trio-dot > i { background: #fff; }

    /* Numbers / proof spine — dark stat rows; shares the partner wall's width so the two read as one social-proof block */
    .proof-dark {
      background: #0c0f13;
      padding: 0 0 calc(var(--section-gap) / 2);
      --ink-1: #fff;
      --ink-3: rgba(255,255,255,0.6);
      --line: rgba(255,255,255,0.12);
      --line-mid: rgba(255,255,255,0.22);
    }
    .proof-inner { max-width: var(--container-default); margin: 0 auto; padding: 0 var(--gutter); }
    .proof-dark .eyebrow { color: rgba(255,255,255,0.6); }
    /* Light variant — same #e8e7e5 surface as the partner wall so the two read as one block */
    .proof-dark.is-light {
      background: #e8e7e5;
      padding: calc(var(--section-gap) / 4) 0 64px;
      --ink-1: #000000;
      --ink-3: rgba(0,0,0,0.50);
      --line: rgba(0,0,0,0.12);
      --line-mid: rgba(0,0,0,0.22);
    }
    .proof-dark.is-light .eyebrow { color: rgba(0,0,0,0.6); }
    .proof-dark.is-light .f-sec-head { color: var(--ink-1); }
    .proof-dark.is-light .proof-band .proof-label { color: rgba(0,0,0,0.55); }
    .proof-dark.is-light .f-sec-head em { color: var(--accent); }
    /* Partner wall flipped under the stats: cards flow from the stats above, title/CTA drop below with a gap */
    .f-trio.partner-block { padding-top: 0; }
    .f-trio.partner-block .f-trio-head { margin-top: 64px; margin-bottom: 0; }
    .proof-dark .f-sec-head { color: #fff; text-align: left; margin-left: 0; margin-right: 0; }
    .proof-dark .f-sec-head em { color: #B6CCB0; }
    .proof-rows { border-bottom: 1px solid var(--line); }
    .proof-row {
      display: grid; grid-template-columns: 1fr 42%; align-items: center; gap: 40px;
      padding: 34px 0; border-top: 1px solid var(--line);
    }
    .proof-label { font-size: 16px; font-weight: 500; color: var(--ink-1); }
    .proof-num {
      font-family: var(--font-display); font-weight: 400; line-height: 1;
      font-size: clamp(46px, 5.6vw, 92px); letter-spacing: -0.02em; color: var(--ink-1);
    }
    /* Single-row stats band: 5 columns (headline, empty spacer, 3 stats), no divider lines */
    .proof-band { display: grid; grid-template-columns: 6fr 2fr 6fr 3fr 3fr; gap: 36px; align-items: baseline; }
    .proof-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    .proof-col-head .f-sec-head { margin: 0; font-size: clamp(30px, 3vw, 46px); }
    .proof-band .proof-num { font-size: clamp(30px, 3.2vw, 52px); }
    .proof-band .proof-label { color: rgba(255,255,255,0.62); }
    @media (max-width: 768px) {
      .proof-dark { padding: 56px 0 110px; }
      .proof-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
      .proof-band { grid-template-columns: 1fr; gap: 24px; align-items: start; }
      .proof-col-spacer { display: none; }
    }
    .uc-card {
      position: relative; width: 100%; aspect-ratio: 4/3;
      border-radius: 20px; overflow: hidden;
      background-size: cover; background-position: center;
      display: flex; align-items: flex-end;
    }
    .uc-card::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(18,22,15,0) 26%, rgba(18,22,15,0.58) 60%, rgba(18,22,15,0.95) 100%);
    }
    .uc-card-body { position: relative; z-index: 1; padding: clamp(24px,2.4vw,38px); }
    .uc-card-eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: #B6CCB0; margin-bottom: 12px;
    }
    .uc-card-title {
      font-family: var(--font-display); font-weight: 400;
      font-size: clamp(24px, 2vw, 30px); color: #fff; line-height: 1.14; margin-bottom: 14px;
    }
    .uc-card-desc { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 460px; margin: 0 0 18px; }
    .uc-card-link {
      display: inline-flex; align-items: center; gap: 7px;
      color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 14px; text-decoration: none;
    }
    .uc-card-link:hover { color: #B6CCB0; }

    .f-trio-cell-img.partner-card { display: flex; align-items: flex-end; }
    .partner-card-body { padding: clamp(24px, 2.6vw, 40px); }
    .partner-card-tag {
      font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 12px;
    }
    .partner-card-name {
      font-family: var(--font-display); font-weight: 400;
      font-size: clamp(24px, 2.2vw, 34px); color: #fff; line-height: 1.12;
    }
    /* PR-D text entry: no logo asset yet — clean name tile, no gradient art */
    .partner-card.partner-text { background: rgba(255,255,255,0.04); align-items: center; justify-content: center; }
    /* Partner card carrying footage + the co-brand lockup overlay. Both assets are 16:9,
       matching the frame, so they fill it exactly with no crop. */
    .partner-card.partner-media { display: block; background: #0c0f13; }
    .partner-card.partner-media .partner-video,
    .partner-card.partner-media .partner-lockup {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; display: block;
    }
    .partner-card.partner-media .partner-video { z-index: 0; }
    /* Scrim sits between footage and lockup so the white marks hold on bright frames */
    .partner-card.partner-media::after {
      content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: rgba(8,12,16,0.42);
      transform: translateZ(0);   /* own compositing layer, above the video overlay */
    }
    /* translateZ promotes the lockup to its own GPU layer so it paints ABOVE the
       hardware-composited playing video (fixes the macOS video-overlay punch-through
       where the footage rendered over the logo regardless of z-index). */
    .partner-card.partner-media .partner-lockup { z-index: 2; pointer-events: none; transform: translateZ(0); }
    .partner-text .partner-card-body { text-align: center; }
    .partner-all { max-width: var(--container-default); margin: 60px auto 0; padding: 0 var(--gutter); }
    .partner-all .eyebrow { margin-bottom: 20px; }
    .partner-all-list { display: flex; flex-wrap: wrap; gap: 14px 32px; }
    .partner-all-list span { font-size: 15px; color: var(--ink-3); font-weight: 600; }
    .f-trio-cell-img::after { display: none; }
    .f-trio-cell-title {
      position: absolute; bottom: 22px; left: 24px; right: 24px;
      font-family: var(--font-display);
      font-size: clamp(20px, 1.8vw, 28px);
      font-weight: 400; letter-spacing: -0.01em; line-height: 1.2;
      color: #fff;
      z-index: 1;
    }
    body.style-system .f-trio-cell-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300;
    }
    .f-trio-cell-desc {
      margin: 18px 6px 0;
      font-size: 18px; line-height: 1.55;
      color: var(--ink-2);
      max-width: 50%;
    }
    /* Story-card lead quote (V4 expanded carousel cards) */
    .f-trio-cell-quote { display:block; font-family:var(--font-display); font-style:italic; font-size:18px; line-height:1.4; color:var(--ink-1); margin-bottom:10px; }

    /* Mobile (≤ 768px) — bigger cards, one fully visible with edge bleed */
    @media (max-width: 767px) {
      .f-trio { padding: 64px 0; }
      .f-trio.uc-dark { padding: 128px 0; }
      .f-trio-head {
        flex-direction: column; align-items: flex-start;
        margin-bottom: 32px;
      }
      .f-trio-head .f-carousel-nav { align-self: flex-end; }
      .f-trio-row { padding: 0 var(--gutter); }
      .f-trio-cell { flex: 0 0 82vw; }
    }

    /* Mobile (≤ 768px) — Features-specific overrides */
    @media (max-width: 767px) {
      .intel-pillars-grid { grid-template-columns: 1fr; gap: 16px; }
      .intel-pillar { min-height: auto; padding: 40px 28px 32px; }
      .feat-domain { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
      .global-counter-row { gap: 32px; flex-direction: column; }
      .global-counter { padding: 64px var(--gutter); }
      .crop-coverage { padding: 56px var(--gutter) 80px; }
      .case-study { padding: 56px var(--gutter) 64px; }
    }

    /* Mobile (≤ 768px) — story-specific overrides */
    @media (max-width: 767px) {
      .story-hero { padding: 100px var(--gutter) 16px; }
      .story-feature { padding: 16px var(--gutter) 24px; }
      .story-feature-img { aspect-ratio: 4/3; }
      .story-body { padding: 40px var(--gutter); font-size: 17px; }
      .story-pull { padding: 32px var(--gutter) 40px; }
      .story-pair {
        grid-template-columns: 1fr;
        padding: 24px var(--gutter) 40px;
      }
      .story-pair.flip .story-pair-small,
      .story-pair.flip .story-pair-large { order: initial; }
      .story-pair-small { max-width: 100%; padding-bottom: 0; }
      .story-pair-small .story-pair-img { aspect-ratio: 16/10; }
      .story-cta-end { padding: 64px var(--gutter) 80px; }
      .story-prompt-row { grid-template-columns: 1fr; }
      .story-cta-end.is-photo .story-prompt-row { grid-template-columns: 1fr; }
      .stories-grid,
      .related-stories-grid { grid-template-columns: 1fr; }
      .stories-index-hero { padding: 100px var(--gutter) 40px; }
      .stories-grid-section { padding-bottom: 64px; }
      .stories-subscribe { padding: 64px var(--gutter); }
    }

    /* ════════════════════════════════════
       FIELDROOM — Phase 6 (NEW PAGE)
       Developer/researcher platform page. Dark theme scoped to the
       whole page via :root-style overrides on #page-fieldroom — every
       reused shelf class (.f-hero, .f-int, .f-trio etc.) inherits the
       dark colors automatically. New components handle the novel
       sections (feature spot, gradient card carousel, API checklist).
    ════════════════════════════════════ */
    /* Scope dark theme to the BODY when on fieldroom so the nav
       (which sits outside #page-fieldroom) also inherits the dark
       palette — no light nav bar floating on the dark page. */
    body.theme-dark[data-page="fieldroom"] {
      --paper:        #1c2319;
      --surface:      #141719;
      --ink-1:        #ffffff;
      --ink-2:        rgba(255,255,255,0.70);
      --ink-3:        rgba(255,255,255,0.50);
      --ink-4:        rgba(255,255,255,0.32);
      --line:         rgba(255,255,255,0.08);
      --line-mid:     rgba(255,255,255,0.14);
      --line-soft:    rgba(255,255,255,0.06);
      --pill-bg:      rgba(255,255,255,0.06);
      --pill-hover:   rgba(255,255,255,0.10);
      --nav-bg:       rgba(12,15,19,0.82);
      --btn-fill:     #ffffff;
      --btn-text:     #0c0f13;
      background: var(--paper);
      color: var(--ink-1);
    }
    /* Swap nav logo to the dark-friendly variant when fieldroom is active (dark mode) */
    body.theme-dark[data-page="fieldroom"] .nav-logo .logo-light { display: none; }
    body.theme-dark[data-page="fieldroom"] .nav-logo .logo-dark  { display: block; }
    /* Kill the footer's 100px top margin — it was rendering as a light gap
       between the final CTA gradient and the dark footer */
    body[data-page="fieldroom"] footer { margin-top: 0; }


    #page-fieldroom {
      padding-top: 62px;
    }

    /* Hero — full-bleed, black, edge-to-edge. PNG slot at
       Assets/fieldroom-header.png reserved for the user-supplied
       background image (drop into background-image when ready). */
    .fr-hero {
      position: relative;
      width: 100%;
      padding: 140px var(--gutter) 120px;
      text-align: center;
      background: var(--paper);
      /* background-image: url('Assets/fieldroom-header.png'); */
      background-size: cover;
      background-position: center;
    }
    .fr-hero-content {
      position: relative; z-index: 1;
      max-width: var(--container-default);
      margin: 0 auto;
    }
    .fr-hero-eyebrow {
      font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--ink-2);
      margin-bottom: 32px;
    }
    .fr-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(48px, 6vw, 88px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.04;
      color: var(--ink-1);
      max-width: 16ch; margin: 0 auto 28px;
    }
    body.style-system .fr-hero h1 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .fr-hero-sub {
      font-size: 19px; line-height: 1.55;
      color: var(--ink-2);
      max-width: 580px; margin: 0 auto 44px;
    }
    .fr-hero-ctas {
      display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center;
    }
    .fr-hero-ctas .btn-fill {
      padding: 14px 28px;
    }
    .fr-hero-meta {
      margin-top: 36px;
      font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
      color: var(--ink-3);
    }
    .fr-link {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 500;
      color: var(--ink-1);
      text-decoration: none;
      border-bottom: 1px solid var(--line-mid);
      padding-bottom: 4px;
      transition: opacity 0.2s;
    }
    .fr-link:hover { opacity: 0.75; }

    /* Feature spot — large rounded image/video with title overlay at top-left.
       Below it: a 2-col caption row with copy on the left + actions on the right
       (and a centered "Experience the power" sub-block when used). */
    .fr-feature-spot {
      max-width: var(--container-wide); margin: 0 auto;
      padding: 0 var(--gutter) 64px;
    }
    .fr-spot-media {
      position: relative;
      width: 100%;
      aspect-ratio: 16/8;
      border-radius: 18px;
      overflow: hidden;
      background: var(--surface);
    }
    .fr-spot-video {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .fr-spot-title {
      position: absolute; top: 56px; left: 64px; right: 64px;
      font-family: var(--font-display);
      font-size: clamp(40px, 5vw, 80px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.02;
      color: #fff;
      max-width: 12ch;
      z-index: 1;
    }
    body.style-system .fr-spot-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    /* Caption stacks the copy then the button below, left-aligned */
    .fr-spot-caption {
      max-width: var(--container-default); margin: 0 auto;
      padding: 48px 0 0;
      display: flex; flex-direction: column;
      align-items: flex-start;
      gap: 28px;
    }
    .fr-spot-caption-copy {
      font-size: 15.5px; line-height: 1.6;
      color: var(--ink-2);
      max-width: 480px;
      margin: 0;
    }

    /* Experience subhead — centered title + sub + single button under the spot */
    .fr-spot-experience {
      max-width: var(--container-default); margin: 0 auto;
      padding: 80px var(--gutter) 80px;
      text-align: center;
    }
    .fr-spot-experience h2 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 56px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.08;
      color: var(--ink-1);
      margin: 0 0 18px;
    }
    body.style-system .fr-spot-experience h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .fr-spot-experience p {
      font-size: 16px; line-height: 1.55;
      color: var(--ink-2);
      max-width: 540px; margin: 0 auto 32px;
    }

    /* Guides — full-bleed gradient strip with text on left + UI mockup on right */
    .fr-guides {
      max-width: var(--container-wide); margin: 0 auto;
      padding: 0 var(--gutter) 100px;
    }
    .fr-guides-inner {
      position: relative;
      width: 100%;
      border-radius: 22px;
      background: #0C0F13;
      overflow: hidden;
      min-height: 420px;
      display: grid; grid-template-columns: 1fr 1.2fr;
      align-items: end;
    }
    .fr-guides-text {
      padding: 80px 64px;
      color: #fff;
    }
    .fr-guides-text h2 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 56px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.06;
      color: #fff;
      margin: 0 0 22px;
      max-width: 14ch;
    }
    body.style-system .fr-guides-text h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .fr-guides-text p {
      font-size: 16px; line-height: 1.55;
      color: rgba(255,255,255,0.85);
      max-width: 420px; margin: 0 0 32px;
    }
    .fr-guides-mockup {
      align-self: end;
      padding: 40px 0 0 0;
      position: relative;
    }
    .fr-guides-mockup-frame {
      width: 100%;
      aspect-ratio: 16/10;
      background: #fff;
      border-top-left-radius: 18px;
      box-shadow: -20px -20px 60px rgba(0,0,0,0.18);
      margin-right: -64px;
      overflow: hidden;
    }
    .fp-ui {
      width: 100%; height: 100%;
      display: flex; flex-direction: column;
      background: #fff;
      font-family: var(--font-body);
    }
    .fp-ui-header {
      display: flex; align-items: center; gap: 17px;
      padding: 28px 34px 22px;
      border-bottom: 1px solid #f0f0f2;
      flex-shrink: 0;
    }
    .fp-ui-header > i { font-size: 28px; color: #3a3f4a; }
    .fp-ui-header-title {
      display: block;
      font-size: 19px; font-weight: 600; color: #0c0f13;
      letter-spacing: -0.01em; line-height: 1.2;
    }
    .fp-ui-header-farm {
      display: block;
      font-size: 16px; color: #9ca3af; margin-top: 3px; line-height: 1.2;
    }
    .fp-ui-rows { flex: 1; overflow: hidden; }
    .fp-ui-row {
      display: flex; align-items: center; gap: 17px;
      padding: 15px 34px;
      border-bottom: 1px solid #f5f5f7;
    }
    .fp-ui-row > i { font-size: 22px; color: #9ca3af; flex-shrink: 0; }
    .fp-ui-row > span { flex: 1; font-size: 18px; color: #1a1f2e; }
    .fp-ui-row > em {
      font-style: normal; font-size: 17px; color: #c0c5cf;
      font-variant-numeric: tabular-nums;
    }
    .fp-ui-row.fp-active { background: #f6f5ff; }
    .fp-ui-row.fp-active > i { color: #5b4fcf; }
    .fp-ui-row.fp-active > span { font-weight: 500; color: #0c0f13; }
    .fp-ui-row.fp-active > em { color: #5b4fcf; font-weight: 500; }

    /* Get inspired carousel — 5 gradient cards in a row, with arrow nav */
    .fr-inspired {
      max-width: var(--container-wide); margin: 0 auto;
      padding: 0 var(--gutter) 100px;
    }
    .fr-inspired-head {
      display: grid; grid-template-columns: 1fr 1.2fr;
      gap: 80px; align-items: end;
      margin-bottom: 56px;
    }
    .fr-inspired-head h2 {
      font-family: var(--font-display);
      font-size: clamp(36px, 4.4vw, 64px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.06;
      color: var(--ink-1);
      margin: 0;
    }
    body.style-system .fr-inspired-head h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .fr-inspired-head p {
      font-size: 16px; line-height: 1.55;
      color: var(--ink-2);
      max-width: 480px; margin: 0 0 14px;
    }
    .fr-inspired-head .fr-link {
      align-self: end;
    }
    .fr-inspired-row {
      display: flex; gap: 14px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .fr-inspired-row::-webkit-scrollbar { display: none; }
    .fr-card-grad {
      flex: 0 0 calc((100% - 42px) / 4);
      aspect-ratio: 1/1;
      border-radius: 18px;
      padding: 32px;
      display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px;
      scroll-snap-align: start;
      cursor: default;
    }
    .fr-card-grad-title {
      font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
      color: #fff;
      max-width: 14ch;
    }
    .fr-card-grad-body {
      font-size: 15px; color: rgba(255,255,255,0.70); line-height: 1.55;
    }
    body.style-system .fr-card-grad-title { font-family: 'Cocogoose', sans-serif; font-weight: 300; }
    /* Card panels: one solid ink, no ramp. */
    .fr-card-grad.g1 { background: #0C0F13; }
    .fr-card-grad.g2 { background: #0C0F13; }
    .fr-card-grad.g3 { background: #0C0F13; }
    .fr-card-grad.g4 { background: #0C0F13; }
    .fr-card-grad.g5 { background: #0C0F13; }

    .fr-inspired-pagination {
      display: flex; align-items: center; justify-content: center; gap: 4px;
      margin-top: 40px;
    }
    .fr-inspired-pagination span {
      display: block; height: 4px; width: 80px;
      background: var(--line-mid); border-radius: 4px;
    }
    .fr-inspired-pagination span.on {
      background: linear-gradient(90deg, #e2705f, #6c6ad6);
    }

    /* Build with API — bordered block, 2 cols, checklist of links */
    .fr-build {
      max-width: var(--container-wide); margin: 0 auto;
      padding: 0 var(--gutter) 100px;
    }
    .fr-build-inner {
      border: 1px solid var(--line-mid);
      border-radius: 22px;
      padding: 56px 64px;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: start;
    }
    .fr-build-text h2 {
      font-family: var(--font-display);
      font-size: clamp(28px, 3vw, 42px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.1;
      color: var(--ink-1); margin: 0 0 14px;
    }
    body.style-system .fr-build-text h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .fr-build-text p {
      font-size: 15.5px; line-height: 1.6;
      color: var(--ink-2); margin: 0;
    }
    .fr-build-list {
      display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px;
    }
    .fr-build-list a {
      display: flex; align-items: center; gap: 12px;
      font-size: 15px; font-weight: 500;
      color: var(--ink-1);
      text-decoration: underline; text-underline-offset: 4px;
      text-decoration-color: var(--line-mid);
      transition: text-decoration-color 0.2s;
    }
    .fr-build-list a:hover { text-decoration-color: var(--ink-2); }
    .fr-build-list a::before {
      content: '';
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--ink-1);
      flex-shrink: 0;
    }
    /* Webinar arc — 3 numbered segments inside .fr-build */
    .fr-build-arc {
      display: flex; flex-direction: column;
      gap: 0;
    }
    .fr-arc-row {
      display: grid; grid-template-columns: 48px 1fr;
      gap: 24px; align-items: baseline;
      padding: 22px 0;
      border-top: 1px solid var(--line-mid);
    }
    .fr-arc-row:first-child { border-top: 0; padding-top: 6px; }
    .fr-arc-num {
      font-family: var(--font-display);
      font-size: 22px; letter-spacing: -0.01em;
      color: var(--ink-3);
    }
    body.style-system .fr-arc-num {
      font-family: 'Cocogoose', sans-serif; font-weight: 300;
    }
    .fr-arc-title {
      font-family: var(--font-display);
      font-size: clamp(20px, 1.8vw, 24px);
      font-weight: 400; letter-spacing: -0.01em; line-height: 1.2;
      color: var(--ink-1);
      margin-bottom: 6px;
    }
    body.style-system .fr-arc-title {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .fr-arc-meta {
      font-size: 14.5px; line-height: 1.55;
      color: var(--ink-2);
    }

    /* Community — left column has stacked text card + photo card,
       right column is one large gradient image spanning both rows */
    .fr-community {
      max-width: var(--container-wide); margin: 0 auto;
      padding: 0 var(--gutter) 100px;
    }
    .fr-community-inner {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 18px;
    }
    .fr-community-left {
      display: grid; grid-template-rows: 1fr 1.2fr;
      gap: 18px;
    }
    .fr-community-text {
      background: var(--surface);
      padding: 48px 48px;
      border-radius: 22px;
      display: flex; flex-direction: column;
      justify-content: space-between;
      min-height: 280px;
    }
    .fr-community-text h2 {
      font-family: var(--font-display);
      font-size: clamp(28px, 3vw, 42px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.1;
      color: var(--ink-1); margin: 0 0 14px;
    }
    body.style-system .fr-community-text h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .fr-community-text p {
      font-size: 15.5px; line-height: 1.6;
      color: var(--ink-2); margin: 0 0 28px;
    }
    .fr-community-photo {
      border-radius: 22px;
      background: var(--surface);
      background-size: cover; background-position: center;
      min-height: 280px;
    }
    .fr-community-img {
      border-radius: 22px;
      background: var(--surface);
      background-size: cover; background-position: center;
      min-height: 580px;
    }

    /* Developer's blog — reuses the .f-core.is-rich card pattern from
       the Field landing (16:9 cards, image inset 18px with 6px radius,
       eyebrow top + title bottom). Section wrapper + foot button. */
    .fr-blog {
      max-width: none;
      padding: 0 0 80px;
    }
    /* f-trio inside fr-blog: strip its own top padding — fr-blog owns
       the vertical rhythm. No horizontal constraint so the row bleeds
       edge-to-edge exactly like every standalone f-trio. */
    .fr-blog .f-trio {
      padding-top: 0;
    }
    .fr-blog-foot {
      display: flex; justify-content: center;
      max-width: var(--container-default); margin: 64px auto 0;
      padding: 0 var(--gutter);
    }

    /* Final CTA — full-bleed solid band, centered title + single button */
    .fr-final-cta {
      width: 100%;
      background: #0C0F13;
      padding: 140px var(--gutter) 160px;
      text-align: center;
      color: #fff;
    }
    .fr-final-cta h2 {
      font-family: var(--font-display);
      font-size: clamp(48px, 6vw, 88px);
      font-weight: 400; letter-spacing: -0.015em; line-height: 1.04;
      color: #fff;
      margin: 0 0 44px;
    }
    body.style-system .fr-final-cta h2 {
      font-family: 'Cocogoose', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    }
    .fr-final-cta .btn-fill {
      background: #fff; color: #0c0f13; border-color: #fff;
      padding: 14px 28px;
    }

    /* Mobile (≤ 768px) — Fieldroom */
    @media (max-width: 767px) {
      .fr-hero { padding: 100px var(--gutter) 64px; }
      .fr-spot-media { aspect-ratio: 4/3; }
      .fr-spot-title { top: 28px; left: 28px; right: 28px; }
      .fr-spot-caption { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
      .fr-spot-experience { padding: 48px var(--gutter); }
      .fr-guides-inner { grid-template-columns: 1fr; min-height: auto; }
      .fr-guides-text { padding: 48px 32px 0; }
      .fr-guides-mockup-frame { margin-right: 0; aspect-ratio: 16/9; border-radius: 12px; }
      .fr-guides-mockup { padding: 24px 32px 32px; }
      .fr-inspired-head { grid-template-columns: 1fr; gap: 24px; }
      .fr-card-grad { flex: 0 0 70vw; }
      .fr-card-grad:first-child { margin-left: 0; }
      .fr-inspired-pagination span { width: 50px; }
      .fr-build-inner { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; }
      .fr-build-list { grid-template-columns: 1fr; }
      .fr-community-inner { grid-template-columns: 1fr; }
      .fr-community-left { grid-template-rows: auto auto; }
      .fr-community-text { padding: 36px 28px; min-height: auto; }
      .fr-community-photo { min-height: 220px; }
      .fr-community-img { min-height: 240px; }
      .fr-final-cta { padding: 80px var(--gutter) 96px; }
    }

    /* Ghost nav button — pill, outline, sits next to .btn-nav */
    .btn-nav.btn-nav-ghost {
      background: transparent;
      color: var(--ink-1);
      border: 1px solid var(--line-mid);
    }
    .btn-nav.btn-nav-ghost:hover { background: var(--pill-hover); opacity: 1; }