/* Self-hosted Geist + Geist Mono (variable woff2; OFL, see fonts/LICENSE.txt).
   Matches the app's typeface without a third-party Google Fonts request. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
    /* App-matched light palette (frontend/src/index.css :root) */
    --bg:        #FAFAF7;   /* ink-950 */
    --surface:   #F4F4F0;   /* ink-900 */
    --surface-2: #FFFFFF;
    --border:    #E2E2DE;   /* ink-800 */
    --border-2:  #D0D0CC;   /* ink-700 */
    --text:      #1E1E1E;   /* ink-100 */
    --display:   #0B0B0D;   /* ink-50  */
    --muted:     #5C5C5C;   /* ink-400 */
    --muted-2:   #464646;   /* ink-300 */
    --logo-word: #323232;   /* ink-200 */
    --accent:    #5B59CC;   /* app accent (light) */
    --accent-glow: #7C7AFF; /* app accent-glow */
    --accent-muted:#4644A0; /* app accent-muted */

    --sans: "Geist", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --mono: "Geist Mono", ui-monospace, "Cascadia Code", "SF Mono", "Consolas", monospace;

    --maxw: 1120px;
    --gut: clamp(20px, 5vw, 56px);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01","ss02";
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  p { margin: 0; }
  h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.022em; text-wrap: balance; color: var(--display); }
  ::selection { background: var(--accent); color: #fff; }
  :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

  .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

  /* ---- logo (exact app treatment: indigo dot + EMINITY mono uppercase wide) ---- */
  .logo { display: inline-flex; align-items: center; gap: 9px; }
  .logo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
  .logo-word { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--logo-word); font-weight: 500; }

  /* ---- nav ---- */
  .nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(140%) blur(9px); border-bottom: 1px solid var(--border); }
  .nav-inner { display: flex; align-items: center; gap: 24px; min-height: 66px; }
  .nav-links { display: none; gap: clamp(18px, 2.4vw, 30px); margin-left: auto; align-items: center; }
  .nav-links a { font-size: 15px; color: var(--muted); font-weight: 500; transition: color .15s ease; }
  .nav-links a:hover { color: var(--display); }
  .nav-cta-wrap { margin-left: auto; }
  .nav-links + .nav-cta-wrap { margin-left: 0; }
  @media (min-width: 760px) { .nav-links { display: flex; } .nav-cta-wrap { margin-left: 0; } }

  .btn { font-family: var(--sans); font-weight: 600; font-size: 15.5px; border: none; cursor: pointer; border-radius: 10px; padding: 12px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .12s ease, background .15s ease, box-shadow .15s ease; }
  .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(11,11,13,.04); }
  .btn-primary:hover { background: var(--accent-muted); transform: translateY(-1px); box-shadow: 0 10px 26px -14px var(--accent); }
  .btn-ghost { background: transparent; color: var(--display); border: 1.5px solid var(--border-2); }
  .btn-ghost:hover { background: var(--surface); border-color: var(--muted); transform: translateY(-1px); }
  .btn-lg { padding: 15px 26px; font-size: 17px; }

  /* ---- hero ---- */
  .hero { padding-block: clamp(52px, 8vw, 104px) clamp(48px, 7vw, 96px); }
  .hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 64px); align-items: center; }
  @media (min-width: 940px) { .hero-grid { grid-template-columns: 1.08fr 0.92fr; } }
  .eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
  .eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); border-radius: 2px; }
  h1.hero-h1 { font-size: clamp(40px, 6.2vw, 68px); line-height: 1.03; max-width: 15ch; }

  /* highlighter marker: app-indigo, swept on a CSS animation; text always visible */
  .mark {
    background-image: linear-gradient(104deg, rgba(124,122,255,0) 0.6%, rgba(124,122,255,.34) 1.6%, rgba(124,122,255,.34) 98.2%, rgba(124,122,255,0) 99.2%);
    background-repeat: no-repeat;
    background-size: 100% 88%;
    background-position: 0 78%;
    border-radius: 2px;
    padding: 0 0.04em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .anim .mark { background-size: 0 88%; animation: markWipe 720ms cubic-bezier(.2,.7,.2,1) 320ms forwards; }
  @keyframes markWipe { to { background-size: 100% 88%; } }
  @media (prefers-reduced-motion: reduce) { .anim .mark { background-size: 100% 88%; animation: none; } }

  .hero-sub { margin-top: 28px; font-size: clamp(17px, 1.7vw, 20px); color: var(--muted-2); max-width: 50ch; }
  .hero-sub b { color: var(--display); font-weight: 600; }
  .hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .cta-note { margin-top: 16px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted); }

  /* hero signature: scribble -> tidy map */
  .hero-art { background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: clamp(20px, 2.6vw, 28px); box-shadow: 0 24px 60px -42px rgba(11,11,13,.45); }
  .art-label { display: grid; grid-template-columns: 56% 44%; align-items: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
  .art-label .from { text-align: left; }
  .art-label .to { color: var(--accent); text-align: center; }
  .hero-art svg { width: 100%; height: auto; display: block; }

  .scribble { fill: none; stroke: var(--border-2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .arrow { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .map-line { stroke: var(--border-2); stroke-width: 2; }
  .node-card { fill: var(--surface); stroke: var(--border-2); stroke-width: 2; }
  .node-card.lead { stroke: var(--accent); }
  .node-dot { fill: var(--accent); }
  .node-bar { fill: #D8D5CE; }
  .node-bar.soft { fill: #E7E4DC; }
  /* entrance animation (progressive: visible by default) */
  .anim .scribble { stroke-dasharray: 620; stroke-dashoffset: 620; animation: draw 1100ms ease forwards; }
  .anim .g-arrow { opacity: 0; animation: fade 400ms ease 900ms forwards; }
  .anim .g-map > * { opacity: 0; animation: rise 520ms cubic-bezier(.2,.7,.2,1) forwards; }
  .anim .g-map > *:nth-child(1){ animation-delay: 1050ms; }
  .anim .g-map > *:nth-child(2){ animation-delay: 1180ms; }
  .anim .g-map > *:nth-child(3){ animation-delay: 1310ms; }
  .anim .g-map > *:nth-child(4){ animation-delay: 1440ms; }
  .anim .g-map > *:nth-child(5){ animation-delay: 1180ms; }
  .anim .g-map > *:nth-child(6){ animation-delay: 1310ms; }
  .anim .g-map > *:nth-child(7){ animation-delay: 1440ms; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fade { to { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .anim .scribble, .anim .g-arrow, .anim .g-map > * { animation: none; opacity: 1; stroke-dashoffset: 0; transform: none; }
  }

  /* ---- section rhythm ---- */
  .section { padding-block: clamp(56px, 7vw, 100px); }
  .section + .section { border-top: 1px solid var(--border); }
  .section-head { max-width: none; margin-bottom: clamp(36px, 4.5vw, 56px); }
  .section-head h1, .section-head h2 { max-width: 18em; }
  .section-head h2 { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.08; }
  .section-head .eyebrow { margin-bottom: 16px; }

  /* problem */
  .cols-3 { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 40px); }
  @media (min-width: 760px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
  .pcard h3 { font-size: 20px; margin-bottom: 10px; display: flex; align-items: center; gap: 11px; }
  .pcard .ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); display: grid; place-items: center; }
  .pcard p { color: var(--muted); font-size: 16px; }

  /* how it works: numbered steps */
  .steps { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
  @media (min-width: 820px) { .steps { grid-template-columns: 1fr 1fr; } }
  .step { background: var(--surface-2); padding: clamp(24px, 2.8vw, 34px); display: flex; gap: 20px; align-items: flex-start; }
  .step-num { flex: 0 0 auto; font-family: var(--mono); font-weight: 500; font-size: 15px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface-2)); border: 1.5px solid color-mix(in srgb, var(--accent) 38%, transparent); font-variant-numeric: tabular-nums; }
  .step h3 { font-size: 18.5px; line-height: 1.3; margin-bottom: 7px; }
  .step p { color: var(--muted); font-size: 16px; }

  /* why different */
  .cols-2 { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 22px); }
  @media (min-width: 720px) { .cols-2 { grid-template-columns: 1fr 1fr; } }
  .wcard { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: clamp(24px, 2.6vw, 32px); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .wcard:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -30px rgba(11,11,13,.45); border-color: var(--border-2); }
  .wcard h3 { font-size: 19px; margin-bottom: 9px; display: flex; align-items: baseline; gap: 10px; }
  .wcard .tk { flex: 0 0 auto; color: var(--accent); font-weight: 700; }
  .wcard p { color: var(--muted); font-size: 16px; }

  /* faq */
  .faq { border-top: 1px solid var(--border); }
  details.qa { border-bottom: 1px solid var(--border); }
  details.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: clamp(20px,2.4vw,26px) 2px; font-weight: 600; font-size: clamp(18px,2vw,21px); color: var(--display); }
  details.qa summary::-webkit-details-marker { display: none; }
  details.qa .pls { position: relative; flex: 0 0 auto; width: 22px; height: 22px; }
  details.qa .pls::before, details.qa .pls::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; }
  details.qa .pls::before { left: 3px; right: 3px; top: 10px; height: 2px; }
  details.qa .pls::after { top: 3px; bottom: 3px; left: 10px; width: 2px; transition: opacity .2s ease; }
  details.qa[open] .pls::after { opacity: 0; }
  details.qa .ans { color: var(--muted); font-size: 16.5px; padding: 0 2px clamp(22px,2.6vw,28px); max-width: 66ch; }

  /* waitlist (dark indigo-ink block) */
  .waitlist { background: #14141B; color: #ECEAF6; border-radius: 26px; padding: clamp(34px, 5vw, 66px); position: relative; overflow: hidden; }
  .waitlist::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; background: radial-gradient(circle at center, color-mix(in srgb, var(--accent-glow) 55%, transparent), transparent 70%); opacity: .55; pointer-events: none; }
  .waitlist .eyebrow { color: var(--accent-glow); }
  .waitlist h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); }
  .waitlist .sub { margin-top: 14px; color: #C6C3DA; max-width: 46ch; font-size: 17px; }
  .wl-form { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; max-width: 540px; position: relative; z-index: 1; }
  .wl-form input[type=email] { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 16px; padding: 15px 18px; border-radius: 11px; border: 1.5px solid rgba(236,234,246,.22); background: rgba(236,234,246,.06); color: #fff; }
  .wl-form input::placeholder { color: rgba(236,234,246,.5); }
  .wl-form input:focus-visible { outline-color: var(--accent-glow); border-color: var(--accent-glow); }
  .wl-form .btn { flex: 0 0 auto; background: var(--accent); color: #fff; padding: 15px 26px; }
  .wl-form .btn:hover { background: var(--accent-glow); }
  .wl-fine { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; color: rgba(236,234,246,.55); position: relative; z-index: 1; }
  .wl-msg { margin-top: 18px; font-size: 16px; font-weight: 600; color: var(--accent-glow); min-height: 1.2em; position: relative; z-index: 1; }

  /* footer */
  footer.ft { border-top: 1px solid var(--border); padding-block: clamp(40px, 5vw, 64px); }
  .ft-inner { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; }
  .ft-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
  .ft-links a { font-size: 14.5px; color: var(--muted); }
  .ft-links a:hover { color: var(--display); }
  .ft-copy { font-family: var(--mono); font-size: 12px; color: var(--muted); }

  /* reveal (progressive: visible by default, only hides once .anim is on <html>) */
  .reveal { transition: opacity .6s ease, transform .6s ease; }

  @media (max-width: 540px) { .wrap { padding-inline: 18px; } .wl-form { flex-direction: column; } }
/* ---- multi-page views ---- */
  .nav-links a { position: relative; }
  .nav-links a.active { color: var(--display); }
  .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--accent); border-radius: 2px; }

  /* ---- use-case index ---- */
  .uc-lede-top { margin: -10px 0 clamp(30px,3.5vw,44px); font-size: clamp(17px,1.6vw,19px); color: var(--muted-2); max-width: 54ch; }
  .uc-cards { display: grid; grid-template-columns: 1fr; gap: clamp(16px,2vw,22px); }
  @media (min-width: 760px) { .uc-cards { grid-template-columns: repeat(3, 1fr); } }
  .uc-card { display: flex; flex-direction: column; gap: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: clamp(22px,2.4vw,28px); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .uc-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -30px rgba(11,11,13,.5); border-color: var(--border-2); }
  .uc-card .cat { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .uc-card h3 { font-size: 21px; line-height: 1.16; }
  .uc-card p { color: var(--muted); font-size: 15.5px; }
  .uc-card .go { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--accent); font-size: 15px; }

  /* ---- use-case detail ---- */
  .back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
  .back-link:hover { color: var(--accent); }
  .uc-twist { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 999px; padding: 7px 15px; }
  .uc-lede { margin-top: 22px; font-size: clamp(17px,1.7vw,20px); color: var(--muted-2); max-width: 58ch; }
  .gap-h { font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: clamp(34px,4vw,52px) 0 4px; }
  .gap-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); max-width: 780px; }
  .gap-list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: clamp(15px,1.9vw,19px) 2px; border-bottom: 1px solid var(--border); color: var(--muted-2); font-size: 16.5px; line-height: 1.5; }
  .gap-list li .q { font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 4px; }
  .helps { margin-top: clamp(30px,3.5vw,44px); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: clamp(24px,2.6vw,34px); max-width: 780px; }
  .helps h3 { font-size: 20px; margin-bottom: 11px; }
  .helps p { color: var(--muted-2); font-size: 16.5px; }
  .uc-cta { margin-top: clamp(28px,3vw,38px); }

  /* ---- story ---- */
  .story-wrap { max-width: 680px; }
  .story-wrap h1, .story-wrap h2 { font-size: clamp(30px,4.4vw,48px); line-height: 1.08; margin-top: 12px; }
  .byline { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }
  .story-body { margin-top: clamp(30px,3.5vw,44px); display: flex; flex-direction: column; gap: 22px; }
  .story-body p { font-size: 18px; line-height: 1.66; color: var(--muted-2); }
  .story-body p strong { color: var(--display); font-weight: 600; }
  .story-cta { margin-top: 32px; }
  .story-cta p { color: var(--muted-2); margin-bottom: 18px; max-width: 54ch; }

  /* waitlist honeypot (bots fill it; humans never see it) */
  .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }