/* 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}
  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:30px;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.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:14px}
  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}
  .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{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);background:var(--teal-wash);color:var(--teal)}
  .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 */
  @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}
    nav.top .links{display:none}
  }
  @media (max-width:600px){
    .opps,.pillars{grid-template-columns:1fr}
    footer .row{grid-template-columns:1fr}
    nav.top .signin{display:none}
    .chain-tier{gap:14px}
    .chain-tier.down2{gap:8px}
  }

/* ============== 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}