/* AutoTeamBuilder — landing page CSS
 * Source: Claude Design 'AutoTeamBuilder Landing standalone.html' bundler.
 * Decoded literal CSS from the design (3 <style> blocks concatenated).
 * Font URLs rewritten to /assets/fonts/<semantic-name>.woff2.
 * Do not hand-edit; re-run the bundler decoder if the design changes.
 */

/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === block boundary === */

/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/geist-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-normal-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-normal-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-normal-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === block boundary === */

:root{
    /* Luxury ivory paper */
    --bg:#fbfaf6;
    --surface:#ffffff;
    --surface-2:#f5f1e6;
    --surface-3:#ece5d3;
    --ink:#0b2419;
    --ink-soft:#3a4a40;
    --ink-mute:#5f6d62;
    --mute:#8a948a;
    --hairline:rgba(11,36,25,0.08);
    --hairline-2:rgba(11,36,25,0.16);

    /* Emerald — wealth & depth */
    --teal:#004b3b;          /* primary emerald-deep */
    --teal-deep:#0b3d2e;     /* forest */
    --teal-darker:#062818;
    --teal-soft:#b8d8c8;
    --teal-wash:#e5efe8;

    /* Gold — luxury accent (replaces clay) */
    --clay:#c9a961;
    --clay-deep:#8b6f2e;
    --clay-soft:#e8d9a8;
    --clay-wash:#f7efd9;

    /* Vibrant emerald — live/pulse */
    --sage:#50c878;
    --sage-deep:#2f8a52;

    --r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:24px;
    --container:1240px;

    --shadow-1:0 1px 2px rgba(11,36,25,.04), 0 4px 12px -4px rgba(11,36,25,.08);
    --shadow-2:0 8px 24px -8px rgba(11,36,25,.14), 0 2px 4px rgba(11,36,25,.04);
    --shadow-3:0 30px 60px -20px rgba(11,36,25,.22), 0 8px 16px -8px rgba(11,36,25,.10);
    --shadow-gold:0 12px 30px -10px rgba(139,111,46,.35);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:#fff;color:var(--ink);font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{min-height:100vh;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--teal);color:#fff}

  .container{max-width:var(--container);margin:0 auto;padding:0 32px}

  /* ============== NAV ============== */
  nav.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--hairline)}
  nav.top .row{display:flex;align-items:center;justify-content:space-between;height:72px;padding-left:16px;padding-right:20px}
  nav.top .brand{display:flex;align-items:center;gap:8px;font-family:'Newsreader',serif;font-size:22px;font-weight:400;letter-spacing:-0.015em;color:var(--ink)}
  .brand .auto{color:var(--ink);font-weight:400;letter-spacing:-0.005em}

  .brand .wm{display:inline-flex;align-items:center}
  .brand .team{color:var(--teal-deep);font-style:italic;font-weight:400;margin-left:-0.04em}
  nav.top .links{display:flex;align-items:center;gap:24px;font-size:14px;color:var(--ink-soft)}
  nav.top .links a{font-weight:500;position:relative;padding:8px 0}
  nav.top .links a:hover{color:var(--ink)}
  nav.top .links a.active{color:var(--ink)}
  nav.top .links a:hover::after,nav.top .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--teal-deep);border-radius:1px}
  nav.top .cta-row{display:flex;align-items:center;gap:18px}
  /* Keep the join CTA on one line — in tighter widths / longer translated
     labels it was wrapping to 2-3 lines. nowrap + the freed nav space above
     keeps it single-line; links hide at <=1040 so it never overflows. */
  nav.top .cta-row .btn{white-space:nowrap}
  nav.top .signin{font-size:14px;color:var(--ink-soft);font-weight:500}
  nav.top .signin:hover{color:var(--ink)}
  nav.top .who{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:99px;background:var(--surface-2);border:1px solid var(--hairline)}
  nav.top .who .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff;display:grid;place-items:center;font-family:'Newsreader',serif;font-style:italic;font-size:14px;font-weight:500}
  nav.top .who span{font-size:13px;color:var(--ink);font-weight:500}
  nav.top .signout{font-size:13px;color:var(--ink-mute);font-weight:500}
  nav.top .signout:hover{color:var(--ink)}

  /* ============== LOGO — emerald coin with gold $ glyph ============== */
  .mark{
    width:38px;height:38px;display:grid;place-items:center;
    border-radius:50%;
    background:#ffffff;
    box-shadow:0 1px 3px rgba(11,36,25,.06);
    position:relative;
  }
  .mark svg{display:block;filter:drop-shadow(0 1px 1px rgba(11,36,25,.25))}

  /* ============== BUTTONS ============== */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-0.005em;cursor:pointer;border:1px solid transparent;transition:transform .15s ease, box-shadow .2s ease, background .2s ease;text-decoration:none}
  .btn svg{stroke-width:2.2}
  .btn-primary{background:linear-gradient(180deg,var(--teal) 0%,var(--teal-deep) 100%);color:#fff;border-color:rgba(0,75,59,.5);box-shadow:0 10px 22px -10px rgba(0,75,59,.55),inset 0 1px 0 rgba(255,255,255,.18)}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(0,75,59,.6),inset 0 1px 0 rgba(255,255,255,.18)}
  .btn-gold{background:linear-gradient(180deg,#d4b76d 0%,var(--clay-deep) 100%);color:#1a1407;border-color:rgba(139,111,46,.5);box-shadow:0 10px 22px -10px rgba(139,111,46,.5),inset 0 1px 0 rgba(255,255,255,.3)}
  .btn-gold:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(139,111,46,.55),inset 0 1px 0 rgba(255,255,255,.3)}
  .btn-ghost{background:#fff;color:var(--ink);border-color:var(--hairline-2);box-shadow:0 1px 2px rgba(11,36,25,.03)}
  .btn-ghost:hover{background:var(--surface-2);border-color:rgba(11,36,25,.20)}
  .btn-lg{padding:14px 22px;font-size:15px;border-radius:12px}

  /* ============== HERO ============== */
  .hero{min-height:calc(100vh - 72px);display:flex;align-items:center;position:relative;overflow:hidden;padding:48px 0;background:radial-gradient(ellipse 60% 40% at 88% 20%,rgba(247,239,217,0.45),transparent 60%),radial-gradient(ellipse 60% 50% at 12% 80%,var(--teal-wash),transparent 65%),var(--bg)}
  .hero .container{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;width:100%}
  .hero .left{position:relative;z-index:2}
  .hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Geist Mono',monospace;font-size:11px;color:var(--teal);letter-spacing:0.12em;text-transform:uppercase;padding:7px 12px;border-radius:99px;background:var(--teal-wash);border:1px solid rgba(0,75,59,.18);margin-bottom:24px;font-weight:500}
  .hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 0 rgba(80,200,120,.5);animation:livepulse 2.2s ease-in-out infinite}
  @keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(80,200,120,.5)}50%{box-shadow:0 0 0 8px rgba(80,200,120,0)}}
  .hero h1{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(46px,5.2vw,68px);line-height:1.02;letter-spacing:-0.025em;margin:0 0 20px;color:var(--ink)}
  .hero h1 em{font-style:italic;color:var(--teal);font-weight:400}
  .hero h1 .gold{font-style:italic;color:var(--clay-deep);font-weight:400}
  .hero .lede{font-size:17px;line-height:1.55;color:var(--ink-soft);max-width:50ch;margin:0 0 28px}
  .hero .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
  .hero .micro{font-size:12.5px;color:var(--ink-mute);display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-family:'Geist Mono',monospace;letter-spacing:0.04em}
  .hero .micro span{display:flex;align-items:center;gap:6px}
  .hero .micro span::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--teal-wash);border:1px solid rgba(0,75,59,.4);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6' stroke='%23004b3b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-size:10px 10px;background-position:center;background-repeat:no-repeat}

  /* ===== HERO CHAIN ===== */
  .hero .right{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:center}
  .chain{width:100%;max-width:600px;aspect-ratio:600/720;position:relative;border-radius:var(--r-lg);background:linear-gradient(180deg,#ffffff 0%,var(--surface-2) 100%);box-shadow:var(--shadow-3),0 0 0 1px var(--hairline);overflow:hidden}
  .chain::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 30% at 50% 8%,var(--clay-wash),transparent 60%),radial-gradient(ellipse 80% 30% at 50% 92%,var(--teal-wash),transparent 60%)}
  .chain-chrome{position:absolute;top:0;left:0;right:0;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--ink-mute);letter-spacing:0.14em;text-transform:uppercase;border-bottom:1px solid var(--hairline);z-index:5;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0))}
  .chain-chrome .pulse{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft)}
  .chain-chrome .pulse::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);animation:livepulse 2.2s ease-in-out infinite}

  .chain-stage{position:absolute;inset:46px 24px 58px;display:flex;flex-direction:column;justify-content:space-between;z-index:2}
  .chain-tier{display:flex;justify-content:center;align-items:center;gap:38px;position:relative;padding:14px 0}
  .chain-tier .label{position:absolute;left:50%;top:0;transform:translateX(-50%);font-family:'Geist Mono',monospace;font-size:8.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;font-weight:500}
  .chain-tier .label b{color:var(--teal);font-weight:600}
  .chain-tier.down2 .label{top:auto;bottom:0}
  .chain-tier.down2 .label b{color:var(--clay-deep)}

  /* nodes */
  .node{
    --w:84px;--h:38px;
    min-width:var(--w);height:var(--h);padding:0 12px;border-radius:10px;
    background:#fff;border:1px solid var(--hairline-2);
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    font-family:'Geist',sans-serif;font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-0.005em;
    box-shadow:var(--shadow-1);position:relative;overflow:hidden;
    transition:transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .8s cubic-bezier(.2,.7,.2,1),border-color .6s;
  }
  .node .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto}
  .node.filled{border-color:rgba(0,75,59,.30);box-shadow:0 12px 22px -8px rgba(0,75,59,.20),inset 0 1px 0 #fff}
  .node.filled .dot{background:var(--clay-deep)}
  .node.empty{background:transparent;border:1.5px dashed rgba(11,36,25,.14);color:#b6bdb6;box-shadow:none}
  .node.empty .dot{background:#d2d8d2}

  /* YOU — gold-rimmed centerpiece */
  .node.you{--w:140px;--h:62px;border-radius:14px;background:radial-gradient(circle at 50% 0%,var(--clay-wash),#fff 70%);border:1.5px solid var(--clay);box-shadow:0 24px 48px -14px rgba(139,111,46,.4),0 0 0 1px rgba(201,169,97,.25),0 0 50px -10px rgba(201,169,97,.4);font-family:'Newsreader',serif;font-style:italic;font-size:24px;font-weight:500;color:var(--ink);padding:0 22px}
  .node.you .dot{display:none}

  .chain-tier.up .node{--w:74px;--h:32px;font-size:11.5px;border-radius:9px}
  .chain-tier.down1 .node{--w:80px;--h:34px;font-size:12px;border-radius:9px}

  .chain-tier.down2{align-items:flex-start;gap:18px}
  .sub-cluster{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}
  .sub-cluster .sub-cap{font-family:'Geist Mono',monospace;font-size:8px;color:var(--ink-mute);letter-spacing:0.14em;text-transform:uppercase;font-weight:500;margin-bottom:2px}
  .sub-cluster .sub-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
  .chain-tier.down2 .node{--w:54px;--h:24px;font-size:9.5px;padding:0 7px;border-radius:7px;gap:4px}
  .chain-tier.down2 .node .dot{width:4px;height:4px}

  /* unlimited depth indicator */
  .chain-tier.depth-strip{padding:6px 0 0;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
  .chain-tier.depth-strip .label{position:static;transform:none}
  .depth-dots{display:flex;align-items:center;gap:5px;mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,1) 92%,rgba(0,0,0,0) 100%)}
  .depth-dots .dd{width:6px;height:6px;border-radius:50%;background:rgba(11,36,25,0.22)}
  .depth-dots .dd.live{background:var(--clay)}
  .depth-dots .dinf{font-family:'Newsreader',serif;font-style:italic;font-size:14px;color:var(--clay-deep);margin-left:6px;line-height:1}

  /* chain SVG links */
  .chain-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
  .link-base{fill:none;stroke:rgba(0,75,59,0.14);stroke-width:1}
  .link-active{fill:none;stroke:url(#chainGrad);stroke-width:1.4;filter:url(#chainBlur)}

  .chain-foot{position:absolute;left:0;right:0;bottom:0;padding:10px 18px;display:flex;justify-content:space-between;align-items:center;font-family:'Geist Mono',monospace;font-size:9px;color:var(--ink-mute);letter-spacing:0.14em;text-transform:uppercase;border-top:1px solid var(--hairline);background:rgba(255,255,255,.75);z-index:5;font-weight:500}
  .chain-foot b{font-family:'Newsreader',serif;font-style:italic;font-size:14px;color:var(--clay-deep);font-weight:500;letter-spacing:-0.01em;text-transform:none}

  /* ============== SECTION BASE ============== */
  section.band{padding:120px 0;position:relative}
  section.band.tint{background:#f6f3ea}
  section.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:11px;color:var(--teal);letter-spacing:0.14em;text-transform:uppercase;font-weight:500;margin-bottom:14px}
  section.eyebrow::before{content:"";width:18px;height:1px;background:var(--teal)}
  .section-head{max-width:760px;margin-bottom:64px}
  .section-head h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(36px,3.6vw,52px);line-height:1.08;letter-spacing:-0.02em;margin:0 0 14px;color:var(--ink)}
  .section-head h2 em{font-style:italic;color:var(--teal);font-weight:400}
  .section-head h2 .gold{font-style:italic;color:var(--clay-deep);font-weight:400}
  .section-head p{font-size:17px;line-height:1.55;color:var(--ink-soft);margin:0;max-width:60ch}

  /* HOW IT WORKS */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .step{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:32px 28px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
  .step:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:rgba(0,75,59,.2)}
  .step .num{font-family:'Geist Mono',monospace;font-size:11px;color:var(--teal);letter-spacing:0.16em;text-transform:uppercase;display:flex;align-items:center;gap:10px;font-weight:500}
  .step .num b{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--teal-wash);color:var(--teal);font-family:'Newsreader',serif;font-size:17px;font-weight:500;font-style:italic}
  .step h3{font-family:'Newsreader',serif;font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-0.015em;margin:0;color:var(--ink)}
  .step p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:0}
  .step .visual{margin-top:14px;border-radius:var(--r-md);background:linear-gradient(180deg,var(--surface-2),#fff);border:1px solid var(--hairline);position:relative;overflow:hidden;padding:18px 16px;min-height:108px;display:flex;flex-direction:column;justify-content:center;gap:8px}

  /* step 1 — browser url bar */
  .vis-url{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#fff;border:1px solid var(--hairline-2);border-radius:8px;font-family:'Geist Mono',monospace;font-size:10.5px;color:var(--ink);box-shadow:var(--shadow-1)}
  .vis-url .lock{width:14px;height:14px;display:grid;place-items:center;color:var(--sage-deep)}
  .vis-url .proto{color:var(--mute)}
  .vis-url .sd{color:var(--ink);font-weight:500}
  .vis-url .tld{color:var(--teal);font-weight:500;white-space:nowrap}
  .vis-url{overflow:hidden;min-width:0}
  .vis-url .proto,.vis-url .sd,.vis-url .tld{white-space:nowrap}
  .vis-url .sd{min-width:0;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:120px}
  .vis-url .cursor{display:inline-block;width:1.5px;height:11px;background:var(--clay-deep);margin-left:2px;animation:blink 1s steps(2) infinite}
  @keyframes blink{50%{opacity:0}}
  .vis-cap{font-family:'Geist Mono',monospace;font-size:9px;color:var(--ink-mute);letter-spacing:0.14em;text-transform:uppercase;font-weight:500;display:flex;align-items:center;gap:6px}
  .vis-cap .gd{width:5px;height:5px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 3px rgba(80,200,120,.18)}

  /* step 2 — activated tiles */
  .vis-tiles{display:flex;gap:8px}
  .vis-tile{flex:1;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Newsreader',serif;font-size:18px;color:#fff;font-weight:500;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px -4px rgba(11,36,25,.2)}
  .vis-tile .chk{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.15)}
  .vis-tile .chk svg{display:block}

  /* step 3 — share link card */
  .vis-share{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;border:1px solid var(--hairline-2);border-radius:8px;font-family:'Geist Mono',monospace;font-size:11.5px;box-shadow:var(--shadow-1)}
  .vis-share .ico{width:24px;height:24px;border-radius:6px;background:var(--teal-wash);color:var(--teal);display:grid;place-items:center;flex:0 0 auto}
  .vis-share .url{flex:1;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vis-share .url span{color:var(--mute)}
  .vis-share .copy{font-size:9.5px;color:var(--teal);letter-spacing:0.12em;text-transform:uppercase;font-weight:600;flex:0 0 auto}
  .vis-rotate{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:var(--clay-wash);border:1px solid rgba(201,169,97,.4);font-family:'Geist Mono',monospace;font-size:9px;color:var(--clay-deep);letter-spacing:0.14em;text-transform:uppercase;font-weight:600;align-self:flex-start}
  .vis-rotate svg{animation:spin 6s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* SPILLOVER ENGINE */
  .engine-row{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
  .engine-copy h3{font-family:'Newsreader',serif;font-weight:500;font-size:34px;line-height:1.1;letter-spacing:-0.02em;margin:0 0 14px;color:var(--ink)}
  .engine-copy h3 em{font-style:italic;color:var(--clay-deep);font-weight:400}
  .engine-copy p{font-size:15.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 24px;max-width:54ch}
  .engine-list{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:14px}
  .engine-list li{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
  .engine-list li b{color:var(--ink);font-weight:600}
  .engine-list .dot{flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:var(--teal-wash);color:var(--teal);display:grid;place-items:center;font-family:'Geist Mono',monospace;font-size:10px;font-weight:600;margin-top:1px}
  .engine-list .dot.gold{background:var(--clay-wash);color:var(--clay-deep)}
  .engine-list .dot.sage{background:rgba(80,200,120,.16);color:var(--sage-deep)}

  /* ===== ANIMATED ENGINE VISUAL ===== */
  .engine-visual{aspect-ratio:1/1;max-width:540px;width:100%;margin-left:auto;border-radius:var(--r-xl);background:linear-gradient(180deg,#fff,var(--surface-2));box-shadow:var(--shadow-2);border:1px solid var(--hairline);position:relative;overflow:hidden}
  .engine-visual::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 35% at 50% 0%,var(--clay-wash),transparent 60%),radial-gradient(ellipse 70% 35% at 50% 100%,var(--teal-wash),transparent 60%)}
  .engine-chrome{position:absolute;top:0;left:0;right:0;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-family:'Geist Mono',monospace;font-size:9px;color:var(--ink-mute);letter-spacing:0.16em;text-transform:uppercase;border-bottom:1px solid var(--hairline);z-index:5;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));font-weight:500}
  .engine-chrome .pulse{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft)}
  .engine-chrome .pulse::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);animation:livepulse 2.2s ease-in-out infinite}
  .engine-foot{position:absolute;left:0;right:0;bottom:0;padding:10px 16px;display:flex;justify-content:space-between;font-family:'Geist Mono',monospace;font-size:9px;color:var(--ink-mute);letter-spacing:0.14em;text-transform:uppercase;border-top:1px solid var(--hairline);background:rgba(255,255,255,.75);z-index:5;font-weight:500}
  .engine-foot b{font-family:'Newsreader',serif;font-style:italic;font-size:13px;color:var(--clay-deep);font-weight:500;text-transform:none;letter-spacing:-0.01em}

  .engine-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
  .engine-stage{position:absolute;inset:44px 24px 38px;display:flex;flex-direction:column;justify-content:space-around;z-index:2}
  .engine-stage .e-tier{display:flex;justify-content:center;align-items:center;gap:26px;position:relative}
  .engine-stage .e-tier .e-label{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font-family:'Geist Mono',monospace;font-size:8px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:500;white-space:nowrap;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:4px}
  .engine-stage .e-tier .e-label b{color:var(--teal);font-weight:600}
  .e-node{padding:0 11px;height:34px;min-width:72px;border-radius:9px;background:#fff;border:1px solid var(--hairline-2);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'Geist',sans-serif;font-size:11.5px;font-weight:500;color:var(--ink);box-shadow:var(--shadow-1);position:relative;transition:transform .7s cubic-bezier(.2,.7,.2,1),border-color .5s,box-shadow .5s}
  .e-node .d{width:5px;height:5px;border-radius:50%;background:var(--teal);flex:0 0 auto}
  .e-node.empty{background:transparent;border:1.5px dashed rgba(11,36,25,.14);color:#b6bdb6;box-shadow:none}
  .e-node.empty .d{background:#d2d8d2}
  .e-node.filled{border-color:rgba(0,75,59,.30);box-shadow:0 10px 18px -8px rgba(0,75,59,.18)}
  .e-node.filled .d{background:var(--clay-deep)}
  .e-node.you{padding:0 18px;height:54px;min-width:112px;border-radius:13px;font-family:'Newsreader',serif;font-style:italic;font-size:22px;font-weight:500;background:radial-gradient(circle at 50% 0%,var(--clay-wash),#fff 70%);border:1.5px solid var(--clay);box-shadow:0 18px 36px -12px rgba(139,111,46,.4),0 0 0 1px rgba(201,169,97,.2)}
  .e-node.you .d{display:none}

  .e-clusters{display:flex;gap:14px;justify-content:center;padding-bottom:8px;position:relative}
  .e-clusters .e-cluster{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1}
  .e-clusters .e-cluster .e-cap{font-family:'Geist Mono',monospace;font-size:7.5px;color:var(--ink-mute);letter-spacing:0.14em;text-transform:uppercase;font-weight:500;white-space:nowrap}
  .e-clusters .e-row{display:flex;gap:5px}
  .e-clusters .e-row .e-node{padding:0 7px;height:23px;min-width:46px;font-size:9.5px;border-radius:6px;gap:3px}
  .e-clusters .e-row .e-node .d{width:3.5px;height:3.5px}


  /* OPPORTUNITIES */
  .opps-foot{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:36px}
  .view-all{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:12px;background:#fff;border:1px solid var(--hairline-2);font-family:'Geist',sans-serif;font-size:15px;font-weight:500;color:var(--ink);box-shadow:0 1px 2px rgba(11,36,25,.04);transition:all .18s}
  .view-all:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(11,36,25,.18);border-color:var(--teal)}
  .view-all svg{color:var(--teal)}
  .opps-foot-note{font-family:'Geist Mono',monospace;font-size:11px;color:var(--ink-mute);letter-spacing:0.12em;text-transform:uppercase;font-weight:500}
  .opps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .opp{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:14px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;position:relative;overflow:hidden}
  .opp:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:rgba(0,75,59,.18)}
  .opp .head{display:flex;align-items:center;gap:14px}
  .opp .logo-tile{width:48px;height:48px;border-radius:11px;display:grid;place-items:center;font-family:'Newsreader',serif;font-size:22px;color:#fff;font-weight:500;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px -8px rgba(11,36,25,.3)}
  .opp .name{font-family:'Geist',sans-serif;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
  .opp .sub{font-family:'Geist Mono',monospace;font-size:10px;color:var(--ink-mute);letter-spacing:0.14em;text-transform:uppercase;margin-top:2px;font-weight:500}
  .opp p{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;min-height:7.5em}
  .opp .meta{display:flex;gap:10px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--hairline);margin-top:auto}
  .opp .pill{font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--ink-soft);letter-spacing:0.12em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--hairline);font-weight:500}
  .opp .pill.live{color:var(--sage-deep);background:rgba(80,200,120,.12);border-color:rgba(80,200,120,.25)}
  .opp .pill.live::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--sage);margin-right:5px;vertical-align:middle}
  .opp .view{margin-top:6px;font-size:13px;color:var(--teal);font-weight:600;display:inline-flex;align-items:center;gap:5px}
  .opp .view svg{stroke-width:2;transition:transform .2s ease}
  .opp:hover .view svg{transform:translateX(2px)}

  /* PILLARS */
  .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .pillars--three{grid-template-columns:repeat(3,1fr)}
  .pillar{padding:28px 24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--hairline);display:flex;flex-direction:column;gap:12px;transition:border-color .2s ease,transform .2s ease}
  .pillar:hover{border-color:rgba(0,75,59,.18);transform:translateY(-1px)}
  .pillar .ico{width:40px;height:40px;border-radius:10px;background:var(--teal-wash);color:var(--teal);display:grid;place-items:center}
  .pillar.gold .ico{background:var(--clay-wash);color:var(--clay-deep)}
  .pillar.sage .ico{background:rgba(80,200,120,.14);color:var(--sage-deep)}
  .pillar h4{font-family:'Newsreader',serif;font-weight:500;font-size:22px;line-height:1.15;letter-spacing:-0.01em;margin:0;color:var(--ink)}
  .pillar p{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin:0}

  /* CTA BAND — plain white, single hairline above footer comes from footer's own border-top */
  .cta-band{background:#fff}
  .cta-band .row{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
  .cta-band h3{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(34px,3.2vw,46px);line-height:1.05;letter-spacing:-0.02em;margin:0;color:var(--ink)}
  .cta-band h3 em{font-style:italic;color:var(--teal);font-weight:400}
  .cta-band p{margin:8px 0 0;color:var(--ink-soft);font-size:15px}
  .cta-band .actions{display:flex;gap:12px}

  /* FAQ */
  .faq-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px}
  .faq-items{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hairline)}
  .faq-item{border-bottom:1px solid var(--hairline);padding:20px 0;cursor:pointer}
  .faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;font-family:'Geist',sans-serif;font-size:16px;font-weight:500;color:var(--ink)}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary .plus{flex:none;margin-left:12px;width:24px;height:24px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-soft);font-size:14px;transition:transform .2s ease,background .2s ease}
  .faq-item[open] summary .plus{transform:rotate(45deg)}
  .faq-item p{margin:10px 0 0;color:var(--ink-soft);font-size:14.5px;line-height:1.6;max-width:64ch}

  /* FOOTER */
  footer{padding:48px 0 28px;border-top:1px solid var(--hairline);background:#fff}
  footer .row{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px}
  footer .col h5{font-size:12px;color:var(--ink-mute);letter-spacing:0.14em;text-transform:uppercase;margin:0 0 14px;font-weight:600;font-family:'Geist Mono',monospace}
  footer .col a{display:block;font-size:14px;color:var(--ink-soft);padding:5px 0}
  footer .col a:hover{color:var(--ink)}
  footer .blurb{font-size:13.5px;color:var(--ink-soft);line-height:1.6;max-width:36ch;margin:10px 0 0}
  footer .legal{margin-top:36px;padding-top:18px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;font-family:'Geist Mono',monospace;font-size:10px;color:var(--ink-mute);letter-spacing:0.14em;text-transform:uppercase;flex-wrap:wrap;gap:8px;font-weight:500}

  /* RESPONSIVE */
  /* Hide the nav links a touch earlier than the rest of the breakpoints so the
     brand + CTA row always have room (prevents the join button wrapping). */
  @media (max-width:1040px){ nav.top .links{display:none} }
  @media (max-width:980px){
    .hero{min-height:0;padding:48px 0 60px}
    .hero .container{grid-template-columns:1fr;gap:36px}
    .hero .right{order:2}
    .chain{max-width:520px;margin:0 auto}
    .steps{grid-template-columns:1fr}
    .engine-row{grid-template-columns:1fr;gap:36px}
    .opps{grid-template-columns:1fr 1fr}
    .pillars{grid-template-columns:1fr 1fr}
    .faq-grid{grid-template-columns:1fr;gap:32px}
    footer .row{grid-template-columns:1fr 1fr;gap:32px}
    section.band{padding:72px 0}
  }
  @media (max-width:600px){
    .opps,.pillars{grid-template-columns:1fr}
    footer .row{grid-template-columns:1fr}
    /* Keep "Sign in" visible on mobile so returning users always have a login
       affordance (the "Get my free hub" button is the signup CTA). Compacted
       so brand + Sign in + button stay on one line on typical phone widths. */
    nav.top .signin{display:inline;font-size:13px}
    .chain-tier{gap:14px}
    .chain-tier.down2{gap:8px}
    /* Mobile nav: keep the join CTA on ONE clean line. The header language
       switcher is hidden by default and only re-shown — via the JS-set
       .lang-room class in includes/marketing_nav.php — when the wordmark +
       compact switcher + CTA all fit on one line without wrapping (re-checked
       on resize, language-agnostic). Bump the wordmark a touch, shorten the
       CTA to "Get my hub" (hide "free"), nowrap so it never crams to 2 lines. */
    nav.top .brand{margin-right:12px;font-size:23px}
    nav.top .lang-switch{display:none}
    nav.top.lang-room .lang-switch{display:inline-flex}
    nav.top .cta-row{gap:10px}
    nav.top .cta-row .btn{white-space:nowrap;line-height:1.1;font-size:13.5px;padding-left:14px;padding-right:14px}
    nav.top .cta-row .btn .cta-free{display:none}

    /* ---- Placement / matrix diagram: fit within the card on phones ----
       The diagram card is a fixed 1:1 square with an absolutely-positioned
       stage, so the three "under #1/#2/#3" clusters sit in ONE horizontal row
       that is wider than a phone. The card's overflow:hidden then clips both
       edges (the UNDER #1/#3 labels + their boxes run off). On phones, drop
       the fixed square, let the card grow, and stack the clusters so every
       box and label stays fully readable inside the card. */
    .engine-visual{aspect-ratio:auto;max-width:430px;margin:0 auto;overflow:visible}
    .engine-stage{position:static;inset:auto;padding:46px 14px 42px;gap:22px}
    .engine-stage .e-tier{gap:10px}
    /* the three "Filled" direct spots share the width instead of fixed 72px */
    .e-tier .e-node{flex:1 1 0;min-width:0;padding:0 8px}
    .e-node.you{flex:0 0 auto;min-width:120px;padding:0 18px}
    /* stack the clusters vertically, each full-width and centered */
    .e-clusters{flex-direction:column;gap:16px;padding-bottom:0}
    .e-clusters .e-cluster{flex:0 0 auto;width:100%}
    .e-clusters .e-row{justify-content:center;gap:8px;width:100%}
    .e-clusters .e-row .e-node{flex:1 1 0;min-width:0;max-width:108px;height:28px;font-size:11px}

    /* ---- Hero "chain" diagram: fit within the card on phones ----
       Same failure mode as the placement diagram — a fixed aspect-ratio card with
       an absolutely-positioned stage + nowrap tier labels, so the long
       "people above you… / their teams… / unlimited depth…" labels and the upline
       + cluster rows overflow and clip on both edges. Let the card grow, flow the
       stage, wrap each label onto its own line, keep the upline on one row, and
       stack the three clusters. */
    .chain{aspect-ratio:auto;height:auto;max-width:430px;overflow:visible}
    .chain-svg{display:none} /* JS-drawn connectors assume the fixed square geometry */
    .chain-stage{position:static;inset:auto;justify-content:flex-start;padding:52px 14px 46px;gap:16px}
    .chain-tier{flex-wrap:wrap;justify-content:center;gap:8px 10px;padding:0}
    .chain-tier .label{position:static;transform:none;flex-basis:100%;white-space:normal;text-align:center;line-height:1.5;margin:0 0 2px}
    .chain-tier.up .node,.chain-tier.down1 .node{--w:76px}
    .chain-tier.down2{align-items:stretch;gap:14px}
    .chain-tier.down2 .sub-cluster{flex:0 0 100%}
    .chain-tier.down2 .sub-row{flex-wrap:nowrap;gap:8px;width:100%}
    .chain-tier.down2 .sub-row .node{--w:0;min-width:0;flex:1 1 0;max-width:104px}
  }

/* ============== LANGUAGE SWITCHER ==============
 * Two variants emitted by atb_lang_switcher() in i18n_helpers.php:
 *
 *   <details class="lang-switch"> — popup dropdown for the NAV. Uses
 *     native <details>/<summary> so toggling open/closed works WITHOUT
 *     JavaScript. CSS just dresses it up.
 *
 *   <nav class="lang-row">       — inline horizontal pill row for the
 *     FOOTER. Every language is a clickable chip, always visible. No
 *     dropdown.
 *
 * Both share the editorial pill aesthetic + active-language teal-wash.
 * ========================================================== */

/* --- NAV variant: <details>-driven dropdown ----------------------- */
.lang-switch{position:relative;display:inline-flex;align-items:center}
.lang-switch summary.lang-current{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Geist',sans-serif;font-size:13px;font-weight:500;
  color:var(--ink-soft);
  background:transparent;border:1px solid var(--hairline);
  border-radius:99px;padding:6px 12px;
  cursor:pointer;user-select:none;
  list-style:none;
  transition:color .15s,border-color .15s,background .15s;
}
.lang-switch summary.lang-current::-webkit-details-marker{display:none}
.lang-switch summary.lang-current::marker{display:none}
.lang-switch summary.lang-current:hover{color:var(--ink);border-color:rgba(11,36,25,0.18);background:var(--surface-2)}
.lang-switch summary.lang-current svg{flex-shrink:0;color:var(--ink-mute)}
.lang-switch[open] summary.lang-current{color:var(--ink);border-color:rgba(11,36,25,0.22);background:var(--surface-2)}
.lang-switch[open] .lang-chev{transform:rotate(180deg)}
.lang-switch .lang-chev{transition:transform .15s ease}
.lang-switch .lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:160px;
  list-style:none;margin:0;padding:6px;
  background:#fff;border:1px solid var(--hairline);border-radius:12px;
  box-shadow:0 6px 24px rgba(11,36,25,0.08),0 2px 6px rgba(11,36,25,0.04);
  z-index:60;font-family:'Geist',sans-serif;
}
.lang-switch .lang-menu li{margin:0;list-style:none}
.lang-switch .lang-menu a{display:block;padding:8px 12px;font-size:13.5px;color:var(--ink-soft);text-decoration:none;border-radius:8px;transition:background .12s,color .12s}
.lang-switch .lang-menu a:hover{background:var(--surface-2);color:var(--ink)}
.lang-switch .lang-menu a[aria-current="true"]{color:var(--teal-deep);font-weight:500;background:var(--teal-wash)}
@media (max-width:600px){
  .lang-switch summary.lang-current > span{display:none}
}

/* Footer placement: same dropdown, slightly smaller. Menu opens UPWARD
 * (since switcher sits at the bottom of the page). */
.site-foot .lang-switch summary.lang-current{padding:4px 10px;font-size:12px}
.site-foot .lang-switch .lang-menu{
  top:auto;bottom:calc(100% + 6px);right:0;
  /* 15 languages × ~32px each = ~480px. On short viewports the menu
   * would clip past the top of the viewport when opening upward.
   * Cap at 60% of viewport height and let the user scroll inside. */
  max-height:min(420px, 60vh);overflow-y:auto;overscroll-behavior:contain;
}
/* Mobile: switcher button hides its language autonym (see line ~671
 * which collapses `summary > span` under 600px), so the menu loses its
 * anchor cluster with the copyright. Force the menu to align flush with
 * the bottom-right and use the full menu width so language names are
 * legible. */
@media (max-width:600px){
  /* The footer switcher cluster sits at the LEFT of the footer row on
   * mobile (because .bar-tail wraps onto a new line + justify-content
   * defaults to flex-start within bar-tail). With right:0 anchoring,
   * the 180px-wide menu extends OFF the left edge of the viewport and
   * gets clipped. Flip to left:0 so the menu opens rightward, where
   * there's room. */
  .site-foot .lang-switch .lang-menu{
    left:0;right:auto;min-width:180px;
    /* Slightly larger tap targets on mobile */
    padding:8px;
  }
  .site-foot .lang-switch .lang-menu a{
    padding:10px 14px;font-size:14.5px;
  }
}

/* --- FOOTER inline variant (unused right now; kept for re-use) ----- */
.lang-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;margin-top:14px;
  font-family:'Geist',sans-serif;
}
.lang-row .lang-row-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:500;
  color:var(--ink-mute);
  letter-spacing:0.05em;text-transform:uppercase;
  margin-right:4px;
}
.lang-row .lang-row-label svg{color:var(--ink-mute)}
.lang-row .lang-chip{
  display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:500;
  color:var(--ink-soft);
  background:transparent;border:1px solid var(--hairline);
  border-radius:99px;padding:4px 12px;
  text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
.lang-row .lang-chip:hover{
  color:var(--ink);border-color:rgba(11,36,25,0.22);background:var(--surface-2);
}
.lang-row .lang-chip[aria-current="true"]{
  color:var(--teal-deep);font-weight:500;
  background:var(--teal-wash);border-color:rgba(0,75,59,0.18);
}

/* ============== FLASH BANNERS (editorial) ==============
 * Emitted by atb_flash_render(). One markup pattern with class
 * modifiers — .flash--success / .flash--error / .flash--info pick
 * the icon tint + background + border. Same Geist body + token-based
 * palette as the rest of the editorial design.
 * ========================================================== */
.flash-wrap{max-width:var(--container);margin:14px auto 0;padding:0 32px}
.flash{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid;font-family:'Geist',sans-serif;font-size:13.5px;line-height:1.5;color:var(--ink);background:#fff}
.flash--success{background:rgba(80,200,120,0.08);border-color:rgba(80,200,120,0.28)}
.flash--success .flash-icon{color:var(--sage-deep,#2f8a52)}
.flash--error{background:rgba(220,55,55,0.06);border-color:rgba(220,55,55,0.22)}
.flash--error .flash-icon{color:#b32424}
.flash--info{background:var(--surface-2);border-color:var(--hairline)}
.flash--info .flash-icon{color:var(--teal-deep)}
.flash .flash-icon{flex:0 0 auto;margin-top:1px;stroke-width:2}
.flash .flash-msg{flex:1;min-width:0;font-weight:500}
.flash .flash-close{flex:0 0 auto;background:none;border:0;padding:4px;margin:-4px;cursor:pointer;color:var(--ink-mute);opacity:0.65;border-radius:6px;transition:opacity .15s,background .15s,color .15s;display:inline-flex;align-items:center;justify-content:center}
.flash .flash-close:hover{opacity:1;color:var(--ink);background:rgba(11,36,25,0.05)}

/* ============== RATING WIDGET (editorial) ==============
 * .rate-row + .rate-label paint the editorial chrome around
 * atb_render_opp_rating_block's output. The block itself emits
 * inline-flex spans containing .atb-stars > button[data-v=1..5] with
 * Tailwind utility classes that the editorial pages don't load —
 * these rules paint the gold/sage aesthetic + active vs empty
 * states + hover affordance regardless of those utility classes. */
.rate-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 28px;
  margin:10px 0 4px;padding:9px 14px 11px;
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:10px;
  font-family:'Geist',sans-serif;font-size:11.5px;color:var(--ink-soft);
}
.rate-row .rate-label{
  font-family:'Geist Mono',monospace;font-size:9.5px;font-weight:500;
  color:var(--ink-mute);letter-spacing:0.10em;text-transform:uppercase;
  /* Force the label onto its own full-width row, pushing the
   * Cost/Payouts/Quality star clusters to line 2 below it.
   * Zero bottom margin + row gap on .rate-row keeps the two lines
   * tight (no extra breathing space between label and stars). */
  flex:1 1 100%;margin:0;line-height:1.1;
}
.rate-row .atb-stars{display:inline-flex;gap:0;align-items:center;flex:0 0 auto}
.rate-row .atb-stars + .atb-stars{margin-left:2px}
.atb-stars button.atb-star{
  background:none;border:0;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-mute);cursor:pointer;line-height:0;
  transition:color .12s,transform .12s;
}
.atb-stars button.atb-star svg{display:block;width:10px;height:10px}
/* Filled stars (user's selection so far) — gold/clay tone. */
.atb-stars button.atb-star.text-amber-400,
.atb-stars[data-mine="1"] button.atb-star[data-v="1"],
.atb-stars[data-mine="2"] button.atb-star[data-v="1"],
.atb-stars[data-mine="2"] button.atb-star[data-v="2"],
.atb-stars[data-mine="3"] button.atb-star[data-v="1"],
.atb-stars[data-mine="3"] button.atb-star[data-v="2"],
.atb-stars[data-mine="3"] button.atb-star[data-v="3"],
.atb-stars[data-mine="4"] button.atb-star[data-v="1"],
.atb-stars[data-mine="4"] button.atb-star[data-v="2"],
.atb-stars[data-mine="4"] button.atb-star[data-v="3"],
.atb-stars[data-mine="4"] button.atb-star[data-v="4"],
.atb-stars[data-mine="5"] button.atb-star{color:var(--clay-deep,#8b6f2e)}
/* Hover state (only when eligible to rate). */
.atb-stars[data-rateable="1"] button.atb-star:hover,
.atb-stars[data-rateable="1"] button.atb-star.hover-on{
  color:var(--clay,#c9a961);
}
/* Ineligible / not-rateable cursor cue. */
.atb-stars[data-rateable="0"] button.atb-star{
  cursor:not-allowed;
  color:rgba(11,36,25,0.18);
}
/* atb_render_opp_rating_block wraps the Cost/Payouts/Quality groups
 * in a nested <div> with Tailwind classes (flex/gap-x-3) that don't
 * load on editorial pages. Re-paint that wrapper + each inner group
 * with our own flex rules so words and stars have proper spacing.
 * Tuned to fit all 3 groups on one row at typical manage-card width. */
.rate-row > div{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  flex:1 1 100%;
}
.rate-row > div > span{
  display:inline-flex;align-items:center;gap:4px;
  flex:0 0 auto;white-space:nowrap;
}
.rate-row > div > span > span:first-child{
  font-family:'Geist',sans-serif;font-size:11px;font-weight:500;
  color:var(--ink-soft);
}
@media (max-width:520px){
  .rate-row{gap:6px 10px;padding:8px 10px}
  .rate-row > div{gap:5px 9px}
  .rate-row > div > span{gap:4px}
  .atb-stars button.atb-star svg{width:9px;height:9px}
  .rate-row > div > span > span:first-child{font-size:10.5px}
}

/* "Hold up — can't rate this yet" MODAL (emitted by
 * atb_render_rate_modal_and_js). Markup uses Tailwind utility classes
 * (hidden, size-6, inline-grid, etc.) that don't exist in the editorial
 * stylesheet. Without those, the modal stays visible and its inner
 * SVGs expand to viewport width. These rules paint a proper editorial
 * dialog using only class selectors that ARE in the markup. */
#atb-rate-modal{
  position:fixed;inset:0;z-index:100;
  /* Default hidden — the .hidden Tailwind class would do this on the
   * other site but doesn't here, so we duplicate the rule. JS toggles
   * the .hidden class on/off, and we honor it. */
  display:none;
}
#atb-rate-modal.hidden{display:none}
#atb-rate-modal:not(.hidden){display:block}
/* Backdrop */
#atb-rate-modal > div:first-child{
  position:absolute;inset:0;
  background:rgba(11,36,25,0.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
/* Modal panel container */
#atb-rate-modal > div:nth-child(2){
  position:relative;max-width:480px;margin:64px auto;padding:0 16px;
}
#atb-rate-modal > div:nth-child(2) > div{
  background:#fff;border:1px solid var(--hairline);border-radius:18px;
  box-shadow:0 24px 48px -16px rgba(11,36,25,0.30),0 4px 12px rgba(11,36,25,0.08);
  padding:32px 28px;text-align:center;
  font-family:'Geist',sans-serif;
}
/* Icon "pill" — the gradient amber/orange Tailwind classes get
 * replaced with editorial clay-wash. The SVG inside is hard-sized so
 * it can't blow up. */
#atb-rate-modal .inline-grid{
  display:inline-grid;place-items:center;
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,var(--clay-wash,#f3e7d4),var(--clay-soft,#e0c89a));
  color:var(--clay-deep,#8b6f2e);
  margin:0 auto 18px;
}
#atb-rate-modal .inline-grid svg{width:24px;height:24px;display:block}
/* Title */
#atb-rate-modal h2{
  font-family:'Newsreader',serif;font-weight:500;font-size:24px;
  line-height:1.15;letter-spacing:-0.015em;color:var(--ink);
  margin:0 0 12px;
}
/* Body copy */
#atb-rate-modal p{
  font-size:14.5px;line-height:1.55;color:var(--ink-soft);
  margin:0 0 22px;
}
/* "Got it" button */
#atb-rate-modal button[data-atb-rate-dismiss]{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--clay,#c9a961) 0%,var(--clay-deep,#8b6f2e) 100%);
  color:#fff;border:1px solid rgba(139,111,46,0.5);
  padding:11px 22px;border-radius:99px;
  font-family:'Geist',sans-serif;font-size:14px;font-weight:500;
  cursor:pointer;letter-spacing:0.01em;
  box-shadow:0 8px 18px -8px rgba(139,111,46,0.50),inset 0 1px 0 rgba(255,255,255,0.18);
  transition:transform .12s,box-shadow .12s;
}
#atb-rate-modal button[data-atb-rate-dismiss]:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px -8px rgba(139,111,46,0.55),inset 0 1px 0 rgba(255,255,255,0.22);
}

/* "Before you go — want your own hub too?" JOIN POPUP — emitted by
 * atb_join_popup_render() on opp landing pages. Same root cause as
 * the rating modal: Tailwind utility classes (hidden, size-12, etc.)
 * don't exist in editorial CSS, so the popup renders visibly + its
 * inner SVGs expand to viewport size.
 *
 * Default hidden + constrain SVGs. If/when it's shown, the body
 * paints with editorial chrome instead of the original blue-purple
 * gradient. */
#atb-join-popup{
  position:fixed;inset:0;z-index:100;
  display:none; /* duplicates Tailwind .hidden which doesn't load */
}
#atb-join-popup.hidden{display:none}
#atb-join-popup:not(.hidden){display:block}
/* Constrain every SVG inside the popup so even if Tailwind utilities
 * fail to size their containers, the SVGs themselves can't blow up
 * past their explicit width/height attributes. */
#atb-join-popup svg{max-width:32px;max-height:32px;display:inline-block;flex:0 0 auto}
/* Backdrop */
#atb-join-popup > div:first-child{
  position:absolute;inset:0;background:rgba(11,36,25,0.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
/* Outer container that holds the panel */
#atb-join-popup > div:nth-child(2){
  position:relative;max-width:520px;margin:48px auto;padding:0 16px;
}
/* The panel itself */
#atb-join-popup .relative.overflow-hidden{
  position:relative;
  background:#fff;border:1px solid var(--hairline);border-radius:18px;
  box-shadow:0 24px 48px -16px rgba(11,36,25,0.30),0 4px 12px rgba(11,36,25,0.08);
  font-family:'Geist',sans-serif;overflow:hidden;
}
/* The gradient strip at the top — re-paint with editorial palette */
#atb-join-popup .h-1\.5,
#atb-join-popup [class*="h-1.5"]{
  height:4px;width:100%;display:block;
  background:linear-gradient(90deg,var(--teal),var(--teal-deep),var(--clay,#c9a961));
}
/* Inner content padding (replaces Tailwind px-6 sm:px-8 pt-7 pb-6) */
#atb-join-popup .px-6,
#atb-join-popup [class*="px-6"]{padding:28px 28px 22px}
/* Close button (top-right X) */
#atb-join-popup button[aria-label="Close"]{
  position:absolute;top:10px;right:10px;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  border:0;background:transparent;color:var(--ink-mute);
  cursor:pointer;padding:0;
}
#atb-join-popup button[aria-label="Close"]:hover{background:var(--surface-2);color:var(--ink)}
#atb-join-popup button[aria-label="Close"] svg{width:16px;height:16px}
/* Icon (lightning bolt in green tile) */
#atb-join-popup .inline-grid{
  display:inline-grid;place-items:center;
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,var(--teal),var(--teal-deep));
  color:#fff;margin:0 0 14px;
}
#atb-join-popup .inline-grid svg{width:22px;height:22px;color:#fff}
#atb-join-popup h2{
  font-family:'Newsreader',serif;font-weight:500;font-size:24px;
  line-height:1.2;color:var(--ink);margin:0 0 10px;
  letter-spacing:-0.015em;
}
#atb-join-popup h2 .bg-gradient-to-r,
#atb-join-popup h2 span{
  background:none;-webkit-background-clip:initial;
  -webkit-text-fill-color:initial;color:var(--teal-deep);font-style:italic;
}
#atb-join-popup p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 0 16px}
#atb-join-popup ul{list-style:none;padding:0;margin:0 0 18px}
#atb-join-popup ul li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13.5px;color:var(--ink-soft);margin-bottom:8px;
}
#atb-join-popup ul li svg{width:14px;height:14px;color:var(--teal-deep);margin-top:2px}
/* Form */
#atb-join-popup form{margin-top:18px}
#atb-join-popup label{
  display:block;font-size:11px;font-weight:500;
  color:var(--ink-mute);letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:6px;font-family:'Geist Mono',monospace;
}
#atb-join-popup input[type="email"]{
  width:100%;box-sizing:border-box;
  border:1px solid var(--hairline-2,rgba(11,36,25,0.18));
  border-radius:10px;padding:11px 13px;font-size:14px;color:var(--ink);
  font-family:inherit;outline:none;
}
#atb-join-popup input[type="email"]:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash)}
/* The Sign-up button — no type attribute so target by being inside form */
#atb-join-popup form button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,var(--teal),var(--teal-deep));
  color:#fff;border:1px solid rgba(0,75,59,0.5);
  padding:12px 18px;border-radius:99px;
  font-family:'Geist',sans-serif;font-size:14px;font-weight:500;
  cursor:pointer;width:100%;margin-top:12px;
  box-shadow:0 8px 18px -8px rgba(0,75,59,0.45),inset 0 1px 0 rgba(255,255,255,0.18);
  transition:transform .12s,box-shadow .12s;
}
#atb-join-popup form button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px -8px rgba(0,75,59,0.55),inset 0 1px 0 rgba(255,255,255,0.22);
}
#atb-join-popup form button svg{width:14px;height:14px;color:#fff}
#atb-join-popup form p{
  font-size:11.5px;color:var(--ink-mute);text-align:center;
  margin:10px 0 0;line-height:1.5;
}
/* Divider + skip link row */
#atb-join-popup .border-t{
  border-top:1px solid var(--hairline);
  margin-top:18px;padding-top:14px;text-align:center;
}
#atb-popup-skip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--ink-mute);
  text-decoration:none;
}
#atb-popup-skip:hover{color:var(--ink)}
#atb-popup-skip svg{width:12px;height:12px}
@media (max-width:640px){
  .flash-wrap{padding:0 16px}
  .flash{font-size:13px}
}

/* ============== SITE FOOTER (compact, legal) ==============
 * Shared by atb_footer() — duplicated from dashboard.css so pages
 * that call atb_footer() but don't load dashboard.css still get the
 * compact editorial footer. Class selectors override the legacy
 * `footer { ... }` rules above on <footer class="site-foot">.
 */
.site-foot{padding:18px 0 16px;border-top:1px solid var(--hairline);background:#fff;font-family:'Geist',sans-serif}
.site-foot .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* Group the lang switcher + copyright as a single right-aligned cluster
 * so they sit adjacent on wide screens (previously space-between scattered
 * them with too much gap between them). Tight 10px gap keeps them paired. */
.site-foot .bar-tail{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.site-foot .bm{font-family:'Newsreader',serif;font-size:13px;font-weight:400;letter-spacing:-0.01em;color:var(--ink);text-decoration:none}
.site-foot .bm .team{color:var(--teal-deep);font-style:italic;font-weight:400;margin-left:-0.04em}
.site-foot nav{display:flex;gap:14px;flex-wrap:wrap}
.site-foot nav a{font-size:11px;color:var(--ink-mute);font-weight:500;letter-spacing:0.02em}
.site-foot nav a:hover{color:var(--ink)}
.site-foot .copy{font-family:'Geist Mono',monospace;font-size:10px;color:var(--ink-mute);letter-spacing:0.12em;text-transform:uppercase;font-weight:500}
.site-foot .disc{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(11,36,25,0.08);font-size:11px;line-height:1.55;color:var(--ink-soft);max-width:none;text-align:center}