/* Win Levers marketing site. Layout: a navy (brand-deep) hero and closing band frame light editorial sections;
   the funnel's three layers organise the story (strategy at the base, the operating framework, levers on top). */
:root {
  /* palette: Navy & Gold (the product's own) — swapped by [data-palette] below */
  --deep: #14213D;          /* bands, header, ink in light mode */
  --deep-2: #1F2E52;
  --gold: #E2BE6A;          /* on dark bands */
  --gold-ink: #8A6A1F;      /* gold that reads on light backgrounds */
  --silver: #C6CAD0;
  --spark: #2F6496;         /* AI accents */
  --wm-a: linear-gradient(180deg, #F8E3A3 0%, #E2BE6A 45%, #B98F38 60%, #E8C977 100%);
  --wm-b: linear-gradient(180deg, #FFFFFF 0%, #D9DDE3 45%, #A9B0BA 60%, #E6E9ED 100%);
  --wm-a-light: linear-gradient(180deg, #B98F38 0%, #8A6A1F 55%, #A07E2E 100%);
  --wm-b-light: linear-gradient(180deg, #8A929E 0%, #5E6673 55%, #7A828E 100%);
  --lg-base: #7A5A17; --lg-tile: #E2BE6A; --lg-rim: #F6DE97; --lg-band: #D4AE55; --lg-band-hi: #EBCB7C; --lg-tip: #C9A24A; --lg-tip-hi: #E2BE6A;

  /* neutrals, tinted toward the deep brand colour (light theme) */
  --bg: #F4F5F8;
  --bg-alt: #E3E7EE;
  --surface: #FFFFFF;
  --ink: var(--deep);
  --ink-2: #4D576D;
  --muted: #7E8595;
  --line: #DCDFE6;
  --accent: var(--gold-ink);
  --accent-soft: color-mix(in srgb, var(--gold-ink) 10%, var(--surface));
  --band-ink: #F3F4F6;
  --band-ink-2: #B9BFCA;

  /* type */
  --font-display: "Montserrat", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --step-0: 1rem; --step-1: 1.15rem; --step-2: 1.45rem; --step-3: 2rem; --step-4: clamp(2.3rem, 5.2vw, 3.6rem);
  --wrap: 1120px;
  --radius: 14px;
}
[data-palette="forest"] {
  --deep: #12291F; --deep-2: #1C3B2E; --gold: #D9B26A; --gold-ink: #7E5E22; --silver: #C9D1CB; --spark: #2E6E5B;
  --wm-a: linear-gradient(180deg, #F3DFAE 0%, #D9B26A 45%, #A9823A 60%, #E0BE7A 100%);
  --wm-b: linear-gradient(180deg, #FFFFFF 0%, #DCE3DE 45%, #A9B6AE 60%, #E7ECE8 100%);
  --wm-a-light: linear-gradient(180deg, #A9823A 0%, #7E5E22 55%, #95712C 100%);
  --wm-b-light: linear-gradient(180deg, #7E8C84 0%, #56645C 55%, #75837B 100%);
}
[data-palette="graphite"] {
  --deep: #1B1D22; --deep-2: #2A2D35; --gold: #F0A35E; --gold-ink: #B5571F; --silver: #CBCDD3; --spark: #3D6FB6;
  --wm-a: linear-gradient(180deg, #FFD3A8 0%, #F0A35E 45%, #C9763A 60%, #F4B57A 100%);
  --wm-b: linear-gradient(180deg, #FFFFFF 0%, #DEDFE3 45%, #ADB0B8 60%, #E8E9EC 100%);
  --wm-a-light: linear-gradient(180deg, #D1773A 0%, #B5571F 55%, #C4682B 100%);
  --wm-b-light: linear-gradient(180deg, #8C8F98 0%, #5F626B 55%, #7C7F88 100%);
  --lg-base: #8A4A1C; --lg-tile: #F0A35E; --lg-rim: #FFD3A8; --lg-band: #E08C48; --lg-band-hi: #F6B77F; --lg-tip: #D57C3B; --lg-tip-hi: #F0A35E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: color-mix(in srgb, var(--deep) 88%, #000); --bg-alt: color-mix(in srgb, var(--deep) 80%, #2a2f3a); --surface: color-mix(in srgb, var(--deep) 72%, #2a2f3a);
    --ink: #ECEEF2; --ink-2: #C0C4CC; --muted: #9196A1; --line: color-mix(in srgb, var(--deep) 55%, #4a5060);
    --accent: var(--gold); --accent-soft: color-mix(in srgb, var(--gold) 14%, var(--surface));
    --wm-a-light: var(--wm-a); --wm-b-light: var(--wm-b);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: color-mix(in srgb, var(--deep) 88%, #000); --bg-alt: color-mix(in srgb, var(--deep) 80%, #2a2f3a); --surface: color-mix(in srgb, var(--deep) 72%, #2a2f3a);
  --ink: #ECEEF2; --ink-2: #C0C4CC; --muted: #9196A1; --line: color-mix(in srgb, var(--deep) 55%, #4a5060);
  --accent: var(--gold); --accent-soft: color-mix(in srgb, var(--gold) 14%, var(--surface));
  --wm-a-light: var(--wm-a); --wm-b-light: var(--wm-b);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-0)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--deep); }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; letter-spacing: -.02em; line-height: 1.12; }
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); font-weight: 800; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; max-width: 62ch; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font: 500 .72rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.band .eyebrow { color: var(--gold); }

/* brand */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { width: 34px; height: 34px; flex: none; }
.wordmark { font: 800 1.3rem/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.wordmark span { background-clip: text; -webkit-background-clip: text; color: transparent; }
.wm-a { background-image: var(--wm-a-light); }
.wm-b { background-image: var(--wm-b-light); }
.band .wm-a, .site-head .wm-a { background-image: var(--wm-a); }
.band .wm-b, .site-head .wm-b { background-image: var(--wm-b); }

/* header */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--deep) 92%, transparent); backdrop-filter: blur(10px); color: var(--band-ink); border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; padding-block: 10px; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--band-ink-2); font-size: .93rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--band-ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 .95rem/1 var(--font-body); padding: 13px 20px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--deep); }
.btn-ghost { border-color: color-mix(in srgb, var(--band-ink) 35%, transparent); color: var(--band-ink); background: transparent; }
.nav .btn { padding: 10px 16px; color: var(--deep); }

/* palette switcher (preview only) */
.palettes { display: flex; align-items: center; gap: 6px; font: 500 .68rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--band-ink-2); }
.palettes button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; background: linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%); }
.palettes button[aria-pressed="true"] { border-color: var(--band-ink); }

/* hero */
.band { background: var(--deep); color: var(--band-ink); position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; padding-block: 72px 88px; }
.hero h1 em { font-style: normal; background: var(--wm-a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { font-size: var(--step-1); color: var(--band-ink-2); margin-top: 20px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero .kicker { display: block; margin-bottom: 18px; }
.hero-art { position: relative; display: grid; place-items: center; }
.hero-art svg { width: min(100%, 380px); height: auto; filter: drop-shadow(0 30px 60px rgb(0 0 0 / .35)); }
.hero::after { content: ""; position: absolute; inset: auto -10% -40% 40%; height: 70%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 22%, transparent), transparent); pointer-events: none; }

/* sections */
section.sec { padding-block: 88px; }
.sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.sec-head p { color: var(--ink-2); font-size: var(--step-1); }

.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.pain { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pain + .pain { padding-left: 24px; border-left: 1px solid var(--line); }
.pain b { font: 700 var(--step-1)/1.3 var(--font-display); }
.pain p { color: var(--ink-2); font-size: .97rem; }
.pain .num { font: 500 .8rem/1 var(--font-mono); color: var(--muted); }

/* the three layers */
.layers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.tier { width: 100%; border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.tier .t { font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.tier-levers { background: var(--deep); color: var(--band-ink); }
.tier-levers .t { color: var(--gold); }
.levers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.levers span { background: color-mix(in srgb, var(--gold) 16%, var(--deep)); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 6px; padding: 8px 6px; font-size: .74rem; line-height: 1.25; text-align: center; color: var(--band-ink); }
.tier-ops { width: 82%; background: var(--surface); border: 1px solid var(--line); }
.tier-ops .t, .tier-gtm .t { color: var(--accent); }
.tier-gtm { width: 66%; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.tier p { font-size: .9rem; color: inherit; opacity: .9; }
.layer-copy { display: flex; flex-direction: column; gap: 22px; }
.layer-copy dl { margin: 0; display: grid; gap: 18px; }
.layer-copy dt { font: 700 var(--step-1)/1.3 var(--font-display); }
.layer-copy dd { margin: 4px 0 0; color: var(--ink-2); }

/* AI first */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.ai-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ai-card .tag { align-self: flex-start; font: 500 .68rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--spark); background: color-mix(in srgb, var(--spark) 12%, var(--surface)); padding: 6px 8px; border-radius: 5px; }
.ai-card p { color: var(--ink-2); font-size: .97rem; }
.ask { margin-top: 28px; background: var(--deep); color: var(--band-ink); border-radius: var(--radius); padding: 22px 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ask kbd { font: 500 .8rem/1 var(--font-mono); border: 1px solid color-mix(in srgb, var(--band-ink) 30%, transparent); border-radius: 5px; padding: 5px 7px; color: var(--gold); }
.ask .q { font: 500 1.05rem/1.4 var(--font-mono); color: var(--band-ink); min-width: 0; overflow-wrap: anywhere; }
.ask .q::after { content: "▍"; color: var(--gold); margin-left: 2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* audience */
.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; }
.who div { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--accent); padding-top: 18px; min-width: 0; }
.who p { color: var(--ink-2); font-size: .97rem; }

/* closing */
.quote .wrap { padding-block: 88px; display: grid; gap: 28px; }
.quote blockquote { margin: 0; font: 700 clamp(1.5rem, 3.4vw, 2.4rem)/1.25 var(--font-display); letter-spacing: -.02em; max-width: 26ch; text-wrap: balance; }
.quote blockquote span { color: var(--gold); }
.quote cite { font-style: normal; color: var(--band-ink-2); font-size: .95rem; }

.site-foot { padding-block: 32px; color: var(--muted); font-size: .88rem; border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* pricing */
.soon .wrap { padding-block: 96px 112px; display: grid; gap: 22px; justify-items: start; }
.soon h1 { max-width: 16ch; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.plan { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.plan .price { font: 800 var(--step-2)/1 var(--font-display); color: var(--muted); }
.plan p { color: var(--ink-2); font-size: .95rem; }

/* gentle reveal while scrolling; every section is fully visible at rest */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes rise { from { transform: translateY(28px); } to { transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ask .q::after { animation: none; } .btn { transition: none; } }

@media (max-width: 860px) {
  .hero .wrap, .layers { grid-template-columns: 1fr; }
  .hero-art { order: -1; } .hero-art svg { width: min(70%, 260px); }
  .pain + .pain { padding-left: 0; border-left: 0; }
  .levers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-ops, .tier-gtm { width: 100%; }
  section.sec { padding-block: 64px; }
}

/* hero headline on three lines; the last in gold */
.hero h1 .l { display: block; }

/* layer diagram: dot-separated items, an AI agents line per layer, and the data foundation underneath */
/* every item carries a leading dot; the wrapper clips the dot that starts each line, so wrapped lines never begin with one */
.dots-wrap { overflow: hidden; }
.dots { list-style: none; margin: 0 0 0 -1.2em; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .9rem; }
.dots li { position: relative; padding-left: 1.2em; }
.dots li::before { content: "·"; position: absolute; left: .42em; color: var(--accent); font-weight: 700; }
.agent { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 500 .74rem/1.3 var(--font-body); color: var(--spark); background: color-mix(in srgb, var(--spark) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--spark) 28%, transparent); border-radius: 999px; padding: 5px 10px; }
.agent::before { content: "AI"; font: 600 .62rem/1 var(--font-mono); letter-spacing: .08em; color: var(--surface); background: var(--spark); border-radius: 4px; padding: 3px 4px; }
.tier-levers .agent { color: var(--band-ink); background: color-mix(in srgb, var(--spark) 35%, var(--deep)); border-color: color-mix(in srgb, var(--spark) 60%, transparent); }
.tier-levers .agent::before { color: var(--deep); background: var(--gold); }
.tier-data { width: 100%; margin-top: 6px; background: var(--bg-alt); border: 1px solid var(--line); }
.tier-data .t { color: var(--spark); }

/* closing band */
.quote .close { font: 700 clamp(1.5rem, 3.4vw, 2.4rem)/1.25 var(--font-display); letter-spacing: -.02em; max-width: 28ch; }
.quote .close span { display: block; color: var(--gold); }

/* early access form */
.early { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 56px; }
.early .sec-head { margin-bottom: 0; }
.signup, .thanks { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.signup .wide { grid-column: 1 / -1; }
.signup .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.field input { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; width: 100%; }
.field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: #C0392B; }
.signup .msg { font-size: .9rem; color: var(--ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.thanks { display: flex; flex-direction: column; gap: 6px; }
.thanks[hidden] { display: none; }
@media (max-width: 860px) { .early { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .signup { grid-template-columns: 1fr; } }
.signup[hidden] { display: none; }
.hero h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
@media (min-width: 861px) { .hero .wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); } .hero h1 .l { white-space: nowrap; } }

/* alternate section backgrounds on the home page so each section reads as its own band */
section.sec.alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.early { margin-bottom: 0; }
.nav .btn[aria-current="page"] { color: var(--deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent); }
.plans-cta { margin-top: 28px; color: var(--ink-2); } .plans-cta a { color: var(--accent); font-weight: 600; }

/* labels on the hero funnel: the three layers, in the deep brand colour on gold */
.funnel-labelled .fl { font: 800 1.15px/1 var(--font-display); letter-spacing: .06px; fill: var(--deep); text-anchor: middle; }
.funnel-labelled .fl-lg { font-size: 1.4px; letter-spacing: .12px; }
.funnel-labelled .fl-sm { font-size: .95px; }