/* ==========================================================================
   Willys — marketing site stylesheet
   Design language derived from the app's design system: ocean accent,
   paper-calm neutrals, color-as-highlight, squircle radii, both modes
   designed (not derived). Display type: Fraunces. UI/body: system (SF).
   ========================================================================== */

:root{
  --bg:#F5F6F9;
  --surface:#FFFFFF;
  --surface2:#FBFBFD;
  --ink:#191A1E;
  --muted:#5F6470;
  --faint:#9BA0AC;
  --hairline:rgba(25,26,30,.08);
  --hairline-strong:rgba(25,26,30,.14);

  --ocean:#2E6FE0;
  --ocean-deep:#2456B8;
  --ocean-ink:#1B3E7E;
  --ocean-wash:rgba(46,111,224,.09);
  --ocean-wash2:rgba(46,111,224,.16);
  --amber:#F2B01E;

  --red:#E0533D; --orange:#E08A2B; --blue:#3B82C4; --green:#34A853;
  --red-wash:rgba(224,83,61,.12); --orange-wash:rgba(224,138,43,.12);
  --blue-wash:rgba(59,130,196,.12); --green-wash:rgba(52,168,83,.12);

  --band-bg:#101623;
  --band-ink:#EDF1F8;
  --band-muted:#93A0B8;

  --marker:#FFD84F;
  --rule:rgba(25,26,30,.05);
  --margin-line:rgba(224,83,61,.15);
  --bear-ink:#3E6BA8;

  --deck1:#2E6FE0; --deck2:#34C36B; --deck3:#F2B01E; --deck4:#FF5A4D;
  --deck5:#8A93A6; --deck6:#8A5CF0; --deck7:#1FB6A8; --deck8:#E14FB0;

  --sh-card:0 2px 8px rgba(20,30,55,.06);
  --sh-float:0 24px 60px rgba(20,30,55,.14), 0 4px 14px rgba(20,30,55,.07);
  --sh-btn:0 6px 18px rgba(46,111,224,.28);

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-script:"Caveat", "Bradley Hand", cursive;
  --font-ui:ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-body:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --wrap:1120px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0C0C0E;
    --surface:#1B1B1E;
    --surface2:#222226;
    --ink:#F2F2F4;
    --muted:#A6A9B3;
    --faint:#6E7178;
    --hairline:rgba(242,242,244,.10);
    --hairline-strong:rgba(242,242,244,.18);

    --ocean:#6C99EA;
    --ocean-deep:#89ADEF;
    --ocean-ink:#BDD2F5;
    --ocean-wash:rgba(108,153,234,.14);
    --ocean-wash2:rgba(108,153,234,.22);

    --red:#F2685A; --orange:#F0A03F; --blue:#5B9BD9; --green:#43C463;
    --red-wash:rgba(242,104,90,.16); --orange-wash:rgba(240,160,63,.16);
    --blue-wash:rgba(91,155,217,.16); --green-wash:rgba(67,196,99,.16);

    --band-bg:#141A28;
    --band-ink:#EDF1F8;
    --band-muted:#93A0B8;

    --marker:rgba(240,185,60,.34);
    --rule:rgba(242,242,244,.055);
    --margin-line:rgba(242,104,90,.17);
    --bear-ink:#8FB4EE;

    --deck1:#5E8AC7; --deck2:#6FA889; --deck3:#CC9B45; --deck4:#D27C68;
    --deck5:#7C8AA3; --deck6:#9A88C8; --deck7:#4FA39B; --deck8:#BE76A4;

    --sh-card:0 0 0 1px var(--hairline);
    --sh-float:0 0 0 1px var(--hairline-strong), 0 24px 60px rgba(0,0,0,.5);
    --sh-btn:0 6px 18px rgba(46,111,224,.35);
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column;
}
main{ flex:1; }
img{ max-width:100%; display:block; }
a{ color:var(--ocean); }
::selection{ background:var(--ocean-wash2); }

h1,h2,h3{ font-family:var(--font-display); font-weight:640; letter-spacing:-0.015em; line-height:1.12; text-wrap:balance; }
.eyebrow{
  font-family:var(--font-ui); font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ocean); margin-bottom:14px;
}
.eyebrow::before{
  content:""; display:inline-block; width:18px; height:5px; border-radius:3px;
  background:var(--amber); margin-right:10px; vertical-align:2px;
}

/* Highlighter swipe — the amber marker of a serious student */
.hl{ position:relative; z-index:0; white-space:nowrap; }
.hl::before{
  content:""; position:absolute; z-index:-1;
  inset:0.08em -0.16em 0 -0.1em;
  background:var(--marker);
  border-radius:0.4em 0.6em 0.45em 0.7em / 0.6em 0.4em 0.7em 0.45em;
  transform:rotate(-1.4deg) skewX(-6deg);
}

/* Handwritten marginalia */
.annotation{
  font-family:var(--font-script); font-size:20.5px; font-weight:600; line-height:1.2;
  color:var(--muted); letter-spacing:.01em;
}
.annotation svg{ flex:none; overflow:visible; }

/* Ruled paper for sub-pages (fixed, very faint) */
.page-paper{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 40px, var(--rule) 40px 41px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 120px);
  mask-image:linear-gradient(to bottom, transparent 0, #000 120px);
}

/* Willys the bear — scholarly mascot, ocean ink + amber glasses */
.bear-mark{ color:var(--bear-ink); display:block; }
.bear-mark .paperfill{ fill:var(--surface); }
.bear-mark .amber{ stroke:var(--amber); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:clamp(20px,5vw,48px); }

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.site-nav .wrap{ display:flex; align-items:center; gap:26px; padding-block:13px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand picture{ display:block; }
.brand img{ width:36px; height:auto; }
.brand strong{ font-family:var(--font-display); font-size:21px; font-weight:660; letter-spacing:-0.01em; white-space:nowrap; }
.brand .brand-sub{ color:var(--muted); font-weight:620; }
@media (max-width:390px){ .brand .brand-sub{ display:none; } }
.nav-spacer{ flex:1; }
.nav-links{ display:flex; align-items:center; gap:24px; font-size:15px; }
.nav-links a{ color:var(--ink); opacity:.78; text-decoration:none; transition:opacity .15s; }
.nav-links a:hover{ opacity:1; }
.nav-cta{
  background:var(--ocean); color:#fff !important; opacity:1 !important;
  padding:9px 18px; border-radius:999px; font-weight:600;
  transition:transform .1s, box-shadow .2s;
}
.nav-cta:hover{ box-shadow:var(--sh-btn); transform:translateY(-1px); }
@media (max-width:640px){ .nav-links a:not(.nav-cta){ display:none; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-size:16.5px; font-weight:600;
  border-radius:999px; padding:15px 28px; text-decoration:none; cursor:pointer;
  border:none; transition:transform .12s, box-shadow .2s, background .15s;
}
.btn-primary{ background:var(--ocean); color:#fff; box-shadow:var(--sh-btn); }
.btn-primary:hover{ background:var(--ocean-deep); transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--hairline-strong); }
.btn-ghost:hover{ border-color:var(--ocean); color:var(--ocean); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--hairline); margin-top:0; }
.site-footer .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px;
  padding-block:30px; font-size:14px; color:var(--faint);
}
.site-footer a{ color:var(--faint); text-decoration:none; }
.site-footer a:hover{ color:var(--ink); }
.footer-spacer{ flex:1; }

/* ==========================================================================
   Landing page
   ========================================================================== */

.hero{ position:relative; overflow:hidden; }
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 44% at 78% 18%, var(--ocean-wash) 0%, transparent 70%),
    radial-gradient(38% 34% at 8% 82%, var(--ocean-wash) 0%, transparent 72%);
}
/* Ruled index-card paper + red margin line */
.hero-paper{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 40px, var(--rule) 40px 41px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 80px, #000 68%, transparent 96%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 80px, #000 68%, transparent 96%);
}
.hero-paper::before{
  content:""; position:absolute; top:0; bottom:0; left:clamp(56px,7vw,110px);
  width:1.5px; background:var(--margin-line);
}
@media (max-width:900px){ .hero-paper::before{ display:none; } }
.hero .wrap{
  position:relative; display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(32px,5vw,72px); align-items:center;
  padding-block:clamp(56px,9vh,104px) clamp(56px,8vh,88px);
}
.hero h1{ font-size:clamp(40px,5.6vw,64px); margin-bottom:20px; }
.hero-sub{ font-size:clamp(17px,1.5vw,19.5px); color:var(--muted); max-width:34em; margin-bottom:30px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; margin-bottom:22px; }
.link-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:16.5px; font-weight:600; color:var(--ink); text-decoration:none;
  padding:6px 4px; margin-block:9px;
  background:linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
}
.link-cta svg{ transition:transform .2s; }
.link-cta:hover svg{ transform:translateX(4px); }
.hero-note{ font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:9px 20px; flex-wrap:wrap; }
.tab-note{ display:inline-flex; align-items:center; gap:8px; font-weight:550; }
.tab-note::before{ content:""; width:15px; height:5px; border-radius:3px; background:var(--amber); }
.tab-note.t-ocean::before{ background:var(--ocean); }
.tab-note.t-green::before{ background:var(--green); }
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-demo{ margin-inline:auto; }
}

/* Load-in reveal */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.hero [data-rise]{ animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero [data-rise="2"]{ animation-delay:.08s; }
.hero [data-rise="3"]{ animation-delay:.16s; }
.hero [data-rise="4"]{ animation-delay:.24s; }
.hero [data-rise="5"]{ animation-delay:.32s; }

/* ---------- Interactive card demo ---------- */
.hero-demo{ width:min(430px,100%); margin-left:auto; user-select:none; -webkit-user-select:none; }
.demo-chrome{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  font-family:var(--font-ui); font-size:13.5px; font-weight:600; color:var(--muted);
}
.demo-chrome .deck-dot{ width:9px; height:9px; border-radius:50%; background:var(--ocean); }
.demo-chrome .due{ margin-left:auto; font-variant-numeric:tabular-nums; }
.demo-chrome .due b{ color:var(--ocean); }

.demo-stage{ perspective:1200px; position:relative; }
/* the rest of the deck peeking out behind */
.demo-stage::before, .demo-stage::after{
  content:""; position:absolute; z-index:-1; border-radius:var(--r-xl);
  background:var(--surface2); border:1px solid var(--hairline); box-shadow:var(--sh-card);
}
.demo-stage::before{ inset:10px -10px -12px 14px; transform:rotate(2.6deg); }
.demo-stage::after{ inset:12px 12px -8px -8px; transform:rotate(-2deg); }
.demo-card{
  position:relative; width:100%; min-height:298px; cursor:pointer;
  border-radius:var(--r-xl);
  transform:rotate(-1.2deg);
  transform-style:preserve-3d; transition:transform .55s cubic-bezier(.3,.8,.3,1);
}
.demo-card.flipped{ transform:rotate(-1.2deg) rotateY(180deg); }
.demo-card.leaving{ transition:transform .3s ease, opacity .3s ease; transform:translateX(46px) rotate(4deg) !important; opacity:0; }
.demo-face{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:30px 30px 26px; border-radius:var(--r-xl);
  background:var(--surface); box-shadow:var(--sh-float);
  border:1px solid var(--hairline);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.demo-face.back{ transform:rotateY(180deg); }
.demo-face .face-label{
  font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.demo-face .face-label .tab{ width:18px; height:4px; border-radius:2px; background:var(--amber); }
.demo-q{ font-family:var(--font-ui); font-size:21.5px; font-weight:650; line-height:1.4; letter-spacing:-0.01em; }
.demo-q .cloze{
  background:var(--ocean-wash2); color:var(--ocean);
  border-radius:6px; padding:1px 10px; letter-spacing:.18em; font-weight:700;
}
.demo-a{ font-size:17.5px; line-height:1.55; color:var(--ink); }
.demo-a .cloze-answer{ color:var(--ocean); font-weight:700; }
.demo-hint{ margin-top:auto; font-size:13.5px; color:var(--faint); display:flex; align-items:center; gap:7px; }
.demo-hint svg{ flex:none; }

.demo-ratings{
  display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:16px;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .3s ease .12s, transform .3s ease .12s;
}
.demo-ratings.show{ opacity:1; pointer-events:auto; transform:none; }
.rate-btn{
  font-family:var(--font-ui); font-weight:700; font-size:14.5px; cursor:pointer;
  border:none; border-radius:var(--r-md); padding:11px 4px 9px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .1s, filter .15s;
}
.rate-btn small{ font-size:11px; font-weight:600; opacity:.75; font-variant-numeric:tabular-nums; }
.rate-btn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.rate-btn:active{ transform:scale(.96); }
.rate-again{ background:var(--red-wash); color:var(--red); }
.rate-hard{ background:var(--orange-wash); color:var(--orange); }
.rate-good{ background:var(--blue-wash); color:var(--blue); }
.rate-easy{ background:var(--green-wash); color:var(--green); }

.demo-done{
  position:absolute; inset:0; border-radius:var(--r-xl);
  background:var(--surface); box-shadow:var(--sh-float); border:1px solid var(--hairline);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; padding:30px; opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.demo-done.show{ opacity:1; pointer-events:auto; }

.demo-note{
  display:flex; align-items:flex-start; justify-content:center; gap:8px;
  margin-top:18px; transform:rotate(-1.6deg);
}
.demo-note svg{ margin-top:-6px; }
.demo-done .big{ font-family:var(--font-ui); font-size:22px; font-weight:700; }
.demo-done p{ color:var(--muted); font-size:15px; max-width:26em; }
.demo-done .streak{
  font-family:var(--font-ui); font-size:13.5px; font-weight:700; color:var(--orange);
  background:var(--orange-wash); border-radius:999px; padding:6px 14px;
}

/* ---------- Sections ---------- */
.section{ padding-block:clamp(64px,10vh,110px); }
.section-head{ max-width:640px; margin-bottom:clamp(36px,5vh,56px); }
.section-head h2{ font-size:clamp(30px,3.6vw,42px); margin-bottom:14px; }
.section-head p{ color:var(--muted); font-size:18px; }

[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- Forgetting curve ---------- */
.curve-panel{
  position:relative;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl);
  box-shadow:var(--sh-card); padding:clamp(24px,4vw,44px); overflow:hidden;
}
.curve-note{
  position:absolute; top:clamp(18px,3.5vw,34px); right:clamp(20px,5vw,60px);
  display:flex; align-items:flex-start; gap:6px;
  color:var(--ocean); transform:rotate(-2.2deg); max-width:220px; text-align:right;
}
.curve-note svg{ margin-top:22px; }
@media (max-width:760px){ .curve-note{ display:none; } }
.curve-svg{ width:100%; height:auto; display:block; }
.curve-svg .axis{ stroke:var(--hairline-strong); stroke-width:1.5; }
.curve-svg .lbl{ font-family:var(--font-ui); font-size:12.5px; font-weight:600; fill:var(--faint); }
.curve-svg .lbl-strong{ font-family:var(--font-ui); font-size:13px; font-weight:700; fill:var(--ocean); }
.curve-svg .lbl-fade{ font-family:var(--font-ui); font-size:13px; font-weight:700; fill:var(--red); }
.curve-svg .decay{ stroke:var(--red); stroke-width:2.5; fill:none; stroke-dasharray:6 7; opacity:.62; }
.curve-svg .retain{ stroke:var(--ocean); stroke-width:3.25; fill:none; stroke-linecap:round; }
.curve-svg .tick{ stroke:var(--ocean); stroke-width:2; opacity:.5; }
.curve-svg .tickdot{ fill:var(--ocean); }
.curve-svg .retain.draw{ stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 2.1s cubic-bezier(.4,.2,.2,1) .2s; }
.curve-svg .retain.draw.in{ stroke-dashoffset:0; }
.curve-caption{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:14px; color:var(--muted); }
.curve-caption span{ display:inline-flex; align-items:center; gap:9px; }
.curve-caption i{ width:22px; height:3px; border-radius:2px; display:inline-block; }
.curve-caption .k-ocean{ background:var(--ocean); }
.curve-caption .k-red{ background:var(--red); opacity:.62; }

/* ---------- Features ---------- */
.features-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:16px;
}
.feature{
  position:relative;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--sh-card); padding:26px 24px 24px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
/* each feature is a tabbed index card from the deck */
.feature::before{
  content:""; position:absolute; top:0; left:26px; width:38px; height:7px;
  border-radius:0 0 5px 5px; background:var(--tabc, var(--deck1));
}
.features-grid .feature:nth-child(1){ --tabc:var(--deck1); }
.features-grid .feature:nth-child(2){ --tabc:var(--deck6); }
.features-grid .feature:nth-child(3){ --tabc:var(--deck3); }
.features-grid .feature:nth-child(4){ --tabc:var(--deck7); }
.features-grid .feature:nth-child(5){ --tabc:var(--deck4); }
.features-grid .feature:nth-child(6){ --tabc:var(--deck5); }
.features-grid .feature:nth-child(7){ --tabc:var(--deck2); }
.features-grid .feature:nth-child(8){ --tabc:var(--deck8); }
.feature:hover{ transform:translateY(-4px); box-shadow:var(--sh-float); }
.feature .icon{
  width:42px; height:42px; border-radius:12px; background:var(--ocean-wash);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  color:var(--ocean);
}
.feature h3{ font-family:var(--font-ui); font-size:17.5px; font-weight:700; letter-spacing:-0.01em; margin-bottom:7px; }
.feature p{ font-size:15px; color:var(--muted); line-height:1.55; }
.feature p code{
  font-size:13px; background:var(--surface2); border:1px solid var(--hairline);
  padding:1px 6px; border-radius:6px;
}

/* ---------- Exam chips ---------- */
.chips-band{ padding-block:8px clamp(64px,9vh,96px); }
.chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:820px; margin-inline:auto; }
.chip{
  font-family:var(--font-ui); font-size:14.5px; font-weight:650;
  background:var(--surface); border:1px solid var(--hairline); border-radius:999px;
  padding:9px 18px; color:var(--muted); box-shadow:var(--sh-card);
}
.chip.hot{
  color:var(--ink); border-color:transparent; background:var(--marker);
  box-shadow:none; font-weight:700; transform:rotate(-1.4deg);
}
.chip.hot:nth-child(even){ transform:rotate(1.2deg); }
.chips-lede{ text-align:center; font-size:15px; color:var(--faint); margin-top:22px; }

/* ---------- Privacy band ---------- */
.privacy-band{ padding-block:clamp(64px,10vh,110px); }
.privacy-inner{
  background:var(--band-bg); color:var(--band-ink);
  border-radius:var(--r-xl); padding:clamp(36px,6vw,72px);
  position:relative; overflow:hidden;
}
.privacy-inner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 90% at 85% 10%, rgba(94,138,199,.22) 0%, transparent 65%);
}
.privacy-inner .eyebrow{ color:#8FB4EE; }
.privacy-inner h2{ font-size:clamp(28px,3.4vw,40px); max-width:16em; margin-bottom:14px; position:relative; z-index:1; }
.privacy-inner > p{ color:var(--band-muted); max-width:38em; font-size:17.5px; position:relative; z-index:1; }
.privacy-points{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:26px 34px; margin-top:40px;
}
.privacy-points h3{ font-family:var(--font-ui); font-size:16px; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:9px; }
.privacy-points h3 svg{ color:#8FB4EE; flex:none; }
.privacy-points p{ font-size:14.5px; color:var(--band-muted); line-height:1.55; }

/* ---------- Pricing ---------- */
.pricing-card{
  max-width:520px; margin-inline:auto; text-align:center;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl);
  box-shadow:var(--sh-float); padding:clamp(34px,5vw,52px) clamp(26px,5vw,48px);
  position:relative; overflow:hidden;
}
.pricing-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--ocean), #6E97CF);
}
.price-trial{
  font-family:var(--font-ui); display:inline-block; font-size:13.5px; font-weight:700;
  color:var(--green); background:var(--green-wash); border-radius:999px; padding:7px 16px;
  margin-bottom:20px;
}
.price-line{ font-family:var(--font-ui); font-size:56px; font-weight:800; letter-spacing:-0.03em; line-height:1; }
.price-line small{ font-size:19px; font-weight:600; color:var(--muted); letter-spacing:0; }
.price-per{ color:var(--muted); font-size:15.5px; margin-top:10px; }
.price-includes{
  text-align:left; margin:28px auto 30px; max-width:330px;
  display:grid; gap:11px; font-size:15.5px;
}
.price-includes li{ list-style:none; display:flex; gap:11px; align-items:flex-start; }
.price-includes svg{ color:var(--green); flex:none; margin-top:4px; }
.price-fine{ font-size:13px; color:var(--faint); margin-top:16px; line-height:1.55; }
.price-fine a{ color:var(--faint); }

/* ---------- FAQ ---------- */
.faq{ max-width:720px; margin-inline:auto; }
.faq details{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--sh-card); margin-bottom:12px; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px;
  font-family:var(--font-ui); font-weight:650; font-size:16.5px; padding:19px 24px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; margin-left:auto; font-size:22px; font-weight:400; color:var(--faint);
  transition:transform .25s;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 24px 20px; color:var(--muted); font-size:15.5px; }
.faq details p + p{ margin-top:-8px; }

/* ---------- Final CTA ---------- */
.final-cta{ text-align:center; padding-block:clamp(70px,11vh,120px); position:relative; overflow:hidden; }
.final-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 60% at 50% 100%, var(--ocean-wash) 0%, transparent 70%);
}
.final-cta .wrap{ position:relative; }
.final-cta h2{ font-size:clamp(32px,4.4vw,50px); margin-bottom:16px; }
.final-cta p{ color:var(--muted); font-size:18px; margin-bottom:32px; }
.final-cta .hero-note{ justify-content:center; margin-top:18px; }

/* ==========================================================================
   Sub-pages (legal, contact, thanks)
   ========================================================================== */

.page-main{ padding-block:clamp(44px,7vh,72px) clamp(64px,9vh,96px); }

.legal-head{ max-width:720px; margin-inline:auto; margin-bottom:34px; }
.breadcrumb{ font-size:13.5px; color:var(--faint); margin-bottom:14px; }
.breadcrumb a{ color:var(--faint); text-decoration:none; }
.breadcrumb a:hover{ color:var(--ink); text-decoration:underline; }
.legal-head h1{ font-size:clamp(34px,4.4vw,46px); margin-bottom:12px; }
.legal-head .meta{ font-size:14.5px; color:var(--faint); }

.legal-body{
  max-width:720px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl);
  box-shadow:var(--sh-card); padding:clamp(28px,4.5vw,52px);
}
.legal-body p{ margin-bottom:16px; color:var(--ink); font-size:16px; }
.legal-body h2{
  font-family:var(--font-ui); font-size:21px; font-weight:700; letter-spacing:-0.01em;
  margin:34px 0 12px; padding-top:26px; border-top:1px solid var(--hairline);
}
.legal-body h2:first-child{ margin-top:0; padding-top:0; border-top:none; }
.legal-body h3{ font-family:var(--font-ui); font-size:16.5px; font-weight:700; margin:22px 0 8px; }
.legal-body ul{ margin:0 0 16px 22px; }
.legal-body li{ margin-bottom:9px; font-size:16px; }

/* ---------- Contact / thanks ---------- */
.card-page{ display:flex; justify-content:center; padding:clamp(36px,6vh,64px) 20px clamp(56px,9vh,88px); }
.form-card{
  width:100%; max-width:560px;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl);
  box-shadow:var(--sh-float); padding:clamp(28px,5vw,42px) clamp(24px,5vw,38px);
}

/* Willys the bear — the exact logo, inked to match the scheme */
.mascot{ display:block; margin:0 auto 16px; transform:rotate(-2deg); }
.mascot img{ display:block; width:100%; height:auto; }
.mascot-form{ width:150px; }
.mascot-cta{ width:176px; margin-bottom:22px; }
.form-card .breadcrumb{ text-align:center; }
.form-card h1{ text-align:center; font-size:clamp(28px,4vw,34px); margin-bottom:12px; }
.form-card .intro{ text-align:center; color:var(--muted); font-size:15.5px; max-width:42ch; margin:0 auto 6px; }
.form-card .intro strong{ color:var(--ink); }
.form-card form{ margin-top:26px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-ui); font-size:14px; font-weight:650; margin-bottom:7px; }
.req{ color:var(--ocean); }
input,select,textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--surface2); border:1px solid var(--hairline-strong); border-radius:var(--r-md);
  padding:13px 14px; transition:border-color .15s, box-shadow .15s;
  appearance:none; -webkit-appearance:none;
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA0AC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer;
}
textarea{ resize:vertical; min-height:132px; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--ocean); box-shadow:0 0 0 3px var(--ocean-wash2);
}
::placeholder{ color:var(--faint); }
.form-card .btn{ width:100%; margin-top:4px; }
.reassure{ text-align:center; color:var(--faint); font-size:13px; margin-top:16px; }

.thanks-card{ text-align:center; }
.thanks-card p{ color:var(--muted); margin-bottom:10px; }
.thanks-card .btn{ width:auto; margin-top:20px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero [data-rise]{ animation:none; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .demo-card{ transition:opacity .2s; transform-style:flat; }
  .demo-card.flipped{ transform:rotate(-1.2deg); }
  .demo-card.flipped .demo-face.front{ visibility:hidden; }
  .demo-face{ backface-visibility:visible; -webkit-backface-visibility:visible; }
  .demo-face.back{ transform:none; visibility:hidden; }
  .demo-card.flipped .demo-face.back{ visibility:visible; }
  .demo-card.leaving{ transform:none !important; }
  .curve-svg .retain.draw{ stroke-dashoffset:0; transition:none; }
  .feature:hover{ transform:none; }
  .btn-primary:hover{ transform:none; }
}