/* Cardz Studio marketing site — shared design system */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F6F7F4;
  --text:#1E1B16; --text-muted:#6B6355;
  --accent:#1F6F5C; --accent-ink:#FFFFFF; --accent-soft:#E4F0EB;
  --border:#E7E1D5; --border-strong:#8F856F;
  --danger:#B23A2E; --good:#1F6F5C; --warn:#9A6A16;
  --shadow:0 1px 2px rgb(30 27 22/.05), 0 8px 24px rgb(30 27 22/.06);
  --shadow-lg:0 2px 6px rgb(30 27 22/.08), 0 20px 48px rgb(30 27 22/.12);
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --font-head: Literata, Georgia, serif;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-head); font-weight:700; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.5vw,3.4rem)}
h2{font-size:clamp(1.5rem,2.8vw,2.15rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
a{color:var(--accent)}
.muted{color:var(--text-muted)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5)}
img{max-width:100%; display:block}

/* ---- Nav ---- */
.site-nav{position:sticky; top:0; z-index:40; background:rgb(255 255 255/.92); backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--border)}
.site-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; font-size:1.15rem; font-family:var(--font-head)}
.brand .mark{width:34px; height:34px; border-radius:10px; background:url(/assets/logo-mark.png) center/cover no-repeat; display:flex; align-items:center; justify-content:center; flex:none}
.brand .mark svg{width:16px; height:16px}
.nav-links{display:flex; align-items:center; gap:var(--sp-6); list-style:none; margin:0; padding:0}
.nav-links a{color:var(--text); text-decoration:none; font-weight:600; font-size:.95rem}
.nav-links a:hover{color:var(--accent)}
.nav-cta{background:var(--accent); color:var(--accent-ink); padding:10px 18px; border-radius:var(--r-pill); font-weight:700; font-size:.92rem; text-decoration:none; white-space:nowrap}
.nav-cta:hover{opacity:.92}
.nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:var(--r-sm); width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer}
@media (max-width:820px){
  .nav-links{display:none; position:absolute; top:68px; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border); flex-direction:column; align-items:flex-start; padding:var(--sp-4) var(--sp-5); gap:var(--sp-4); box-shadow:var(--shadow-lg)}
  .nav-links.open{display:flex}
  .nav-toggle{display:flex}
  .nav-cta{display:none}
  .nav-links .nav-cta-mobile{display:inline-block; background:var(--accent); color:var(--accent-ink); padding:10px 18px; border-radius:var(--r-pill); text-decoration:none}
}

/* ---- Hero / sections ---- */
.hero{padding:var(--sp-8) 0 var(--sp-7)}
.hero .kicker{display:inline-block; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:.8rem; letter-spacing:.02em; padding:6px 14px; border-radius:var(--r-pill); margin-bottom:var(--sp-4)}
.hero h1{max-width:15ch}
.hero .lede{font-size:1.2rem; color:var(--text-muted); max-width:56ch; margin-bottom:var(--sp-5)}
.cta-row{display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:var(--r-pill); font-weight:700; font-size:1rem; text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{opacity:.92}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2)}

.trust-bar{background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:var(--sp-4) 0}
.trust-bar .wrap{display:flex; flex-wrap:wrap; gap:var(--sp-5) var(--sp-6); align-items:center; justify-content:center; font-size:.92rem; font-weight:600; color:var(--text)}
.trust-bar .item{display:flex; align-items:center; gap:8px}

section{padding:var(--sp-8) 0}
.section-head{max-width:56ch; margin:0 auto var(--sp-6); text-align:center}
.section-head.left{margin-left:0; text-align:left}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-6)}
@media (max-width:860px){ .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} }

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--shadow)}
.card .icon{width:44px; height:44px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-3); font-size:1.3rem}
.card h3{margin-bottom:.35em}
.card p{color:var(--text-muted); margin-bottom:0}

.steps{counter-reset:step}
.steps .card{position:relative}
.steps .card::before{counter-increment:step; content:counter(step); position:absolute; top:-14px; left:-14px; width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:800; font-family:var(--font-head); display:flex; align-items:center; justify-content:center; font-size:.95rem; box-shadow:var(--shadow)}

.ladder{display:flex; gap:var(--sp-3); flex-wrap:wrap}
.rung{flex:1; min-width:120px; border-radius:var(--r-md); padding:var(--sp-4); color:#fff; font-weight:700}
.rung small{display:block; font-weight:500; opacity:.9; margin-top:4px; font-size:.8rem}
.rung.l1{background:#4C8FBF}.rung.l2{background:#2F9E96}.rung.l3{background:#8A6D3B}.rung.l4{background:#A15A3D}.rung.l5{background:#8C3A38}

.cmp-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden}
.cmp-table th,.cmp-table td{padding:var(--sp-4); text-align:left; border-bottom:1px solid var(--border); font-size:.95rem}
.cmp-table th{background:var(--surface-2); font-family:var(--font-head)}
.cmp-table td.yes{color:var(--good); font-weight:700}
.cmp-table tr:last-child td{border-bottom:none}

.plan-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5)}
@media (max-width:760px){ .plan-grid{grid-template-columns:1fr} }
.plan{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--shadow)}
.plan.featured{border-color:var(--accent); box-shadow:var(--shadow-lg); position:relative}
.plan .badge{position:absolute; top:-14px; left:var(--sp-6); background:var(--accent); color:#fff; font-size:.75rem; font-weight:700; padding:4px 12px; border-radius:var(--r-pill)}
.plan .price{font-family:var(--font-head); font-size:2rem; font-weight:700; margin:var(--sp-3) 0}
.plan .price small{font-size:.9rem; font-weight:500; color:var(--text-muted)}
.plan ul{list-style:none; margin:var(--sp-4) 0; padding:0; display:flex; flex-direction:column; gap:10px}
.plan li{display:flex; gap:10px; align-items:flex-start; color:var(--text)}
.plan li::before{content:"✓"; color:var(--good); font-weight:800; flex:none}

.faq-item{border-bottom:1px solid var(--border); padding:var(--sp-4) 0}
.faq-item h3{margin-bottom:8px; font-family:var(--font-ui); font-size:1.05rem}
.faq-item p{color:var(--text-muted); margin-bottom:0}

.cta-band{background:var(--accent); color:#fff; text-align:center; border-radius:var(--r-lg); padding:var(--sp-7) var(--sp-5); margin:0 var(--sp-5)}
.cta-band h2{color:#fff}
.cta-band p{color:rgb(255 255 255/.85)}
.cta-band .btn-primary{background:#fff; color:var(--accent)}

footer.site-footer{border-top:1px solid var(--border); padding:var(--sp-7) 0 var(--sp-6); background:var(--surface-2)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-6)}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr} }
.footer-grid h4{font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:var(--sp-3)}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.footer-grid a{color:var(--text); text-decoration:none; font-size:.92rem}
.footer-grid a:hover{color:var(--accent)}
.footer-bottom{max-width:var(--maxw); margin:var(--sp-6) auto 0; padding:var(--sp-4) var(--sp-5) 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); font-size:.85rem; color:var(--text-muted)}

/* ---- Article / guide pages ---- */
.article{max-width:70ch; margin:0 auto; padding:var(--sp-7) var(--sp-5)}
.article .kicker{color:var(--accent); font-weight:700; text-transform:uppercase; font-size:.8rem; letter-spacing:.04em}
.article h1{margin-top:.3em}
.article .meta{color:var(--text-muted); font-size:.9rem; margin-bottom:var(--sp-6)}
.article h2{margin-top:1.4em}
.article p,.article li{font-size:1.08rem; color:var(--text)}
.article ul,.article ol{padding-left:1.3em}
.article blockquote{border-left:3px solid var(--accent); margin:1.5em 0; padding:.2em 1.2em; color:var(--text-muted); font-style:italic}

/* ---- Legal pages ---- */
.legal{max-width:74ch; margin:0 auto; padding:var(--sp-7) var(--sp-5)}
.legal h2{margin-top:1.6em}
.legal p,.legal li{color:var(--text); font-size:1rem}

/* ---- Cookie consent ---- */
#cookie-banner{position:fixed; left:var(--sp-5); right:var(--sp-5); bottom:var(--sp-5); max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:var(--sp-5); z-index:100; display:none}
#cookie-banner.show{display:block}
#cookie-banner p{font-size:.92rem; color:var(--text-muted); margin-bottom:var(--sp-4)}
#cookie-banner .row{display:flex; gap:var(--sp-3); flex-wrap:wrap}
#cookie-banner .btn{padding:10px 18px; font-size:.9rem}

.skip-link{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; border-radius:var(--r-sm); z-index:200}
.skip-link:focus{left:var(--sp-4); top:var(--sp-4)}

/* ---- Research band + annotated screenshot showcase (11 Sep 2026) --------
   Two additions Sir asked for in one pass: a short, honestly-sourced section
   grounding the app in real learning-science research, and a "see it in
   action" gallery of real app screenshots with a callout label + a small
   curved arrow pointing at the one feature worth noticing on each. Arrows
   are plain SVG paths using a single shared <marker> (defined once, inline,
   right after <body>) so the arrowhead always points the right way without
   hand-drawn polygon maths per arrow. */
.research-band{ background:var(--surface-2); }
.research-grid{ margin-top:var(--sp-2); }
.stat-card{ text-align:center; }
.stat-card p{ color:var(--text-muted); margin-bottom:0; font-size:1rem }
.stat-num{ font-family:var(--font-head); font-weight:700; font-size:clamp(2.6rem,6vw,3.4rem); color:var(--accent); line-height:1; margin-bottom:10px }
.research-cite{ max-width:74ch; margin:var(--sp-5) auto 0; text-align:center; font-size:.92rem }
.research-cite a{ color:inherit; text-decoration:underline }

/* ---- Premium product showcase — pure-white, Apple-style (11 Sep 2026) ----
   Whole-screen phone shots floating on #fff, generous space, no pills/arrows. */
.showcase{ background:var(--surface); padding-block:clamp(72px,11vw,132px); }
.showcase .section-head{ margin-bottom:clamp(36px,6vw,72px); }
.sc-row{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(32px,6vw,88px);
  max-width:var(--maxw); margin-inline:auto;
  padding-block:clamp(32px,5.5vw,64px);
}
.sc-row + .sc-row{ border-top:1px solid var(--accent-soft); }
.sc-row--reverse .sc-media{ order:-1; }
.sc-copy{ max-width:30rem; }
.sc-copy h3{
  font-family:var(--font-head);
  font-size:clamp(1.55rem,3.2vw,2.5rem); font-weight:600; line-height:1.1;
  letter-spacing:-0.01em; color:var(--text); margin:0 0 var(--sp-4);
}
.sc-copy p{
  font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.55; color:var(--text-muted); margin:0;
}
.sc-media{ display:flex; justify-content:center; }
.sc-shot{
  width:100%; max-width:352px;
  border-radius:26px; overflow:hidden; background:#fff;
  border:1px solid var(--border);
  box-shadow:
    0 1px 2px rgb(30 27 22/.04),
    0 8px 16px rgb(30 27 22/.06),
    0 26px 44px rgb(30 27 22/.08),
    0 52px 84px rgb(30 27 22/.05);
}
.sc-shot img{ display:block; width:100%; height:auto; }
@media (max-width:820px){
  .showcase{ padding-block:clamp(56px,13vw,88px); }
  .sc-row{ grid-template-columns:1fr; gap:26px; text-align:center; padding-block:clamp(36px,9vw,56px); }
  .sc-row--reverse .sc-media{ order:0; }
  .sc-copy{ max-width:34rem; margin-inline:auto; }
  .sc-shot{ max-width:300px; margin-inline:auto;
    box-shadow:0 8px 20px rgb(30 27 22/.08), 0 28px 48px rgb(30 27 22/.06); }
}

/* ---- AI section + hero note (11 Sep 2026) --------------------------------
   The app's strongest feature — turning a photographed page into age-matched
   flashcards — was not mentioned anywhere on its own landing page. These two
   small additions carry the new hero sub-line and give the AI block a tint so
   it reads as its own chapter rather than one more feature grid. */
.hero-note{ margin:16px 0 0; font-size:.92rem; color:var(--muted,#6b6459); }
.ai-section{ background:linear-gradient(180deg, rgba(31,111,92,.06), rgba(31,111,92,.02)); }
.ai-section .card h3{ display:flex; align-items:baseline; gap:.5rem; }

/* ============================================================
   CARDZ STUDIO — landing dynamism pass (11 Sep 2026)
   Loading screen · scroll reveals · mobile swipe carousel · kid/teen colour.
   Universal base (scroll-snap + IntersectionObserver → every browser incl.
   Firefox). All motion gated behind prefers-reduced-motion. Content is
   visible by default: reveals only hide once JS adds html.js-reveal, and the
   loader self-dismisses in pure CSS even if JS never runs.
   ============================================================ */

/* --- kid/teen accent palette (a deliberate trio beside the green primary) --- */
:root{
  --c-coral:#F2683F;  --c-coral-soft:#FDE7DF;
  --c-sky:#2E93D9;    --c-sky-soft:#E0F1FB;
  --c-amber:#EEA200;  --c-amber-soft:#FBEDCE;
  --c-violet:#7A5BF0; --c-violet-soft:#ECE7FE; --c-violet-ink:#5330C0;
}

/* --- smooth cross-page navigation where supported (progressive enhancement) --- */
@view-transition{ navigation:auto; }

/* --- 1 · Loading screen --------------------------------------------------- */
#page-loader{position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  transition:opacity .45s ease, visibility .45s ease;
  animation:pl-autohide 0s linear 3.2s forwards; /* pure-CSS safety net: never sticks if JS fails */ }
#page-loader.hide{opacity:0; visibility:hidden; pointer-events:none}
@keyframes pl-autohide{ to{opacity:0; visibility:hidden; pointer-events:none} }
.pl-mark{width:66px; height:66px; border-radius:18px; background:url(/assets/logo-mark.png) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg)}
.pl-mark svg{width:36px; height:36px}
.pl-word{font-family:var(--font-head); font-weight:700; color:var(--text); font-size:1.1rem}
.pl-bar{width:132px; height:4px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.pl-bar i{display:block; width:38%; height:100%; border-radius:999px; background:var(--accent)}
@media (prefers-reduced-motion: no-preference){
  .pl-mark{animation:pl-pop 1.1s ease-in-out infinite}
  .pl-bar i{animation:pl-slide 1.05s ease-in-out infinite}
}
@keyframes pl-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes pl-slide{0%{transform:translateX(-130%)}100%{transform:translateX(360%)}}
@media (prefers-reduced-motion: reduce){ .pl-bar i{width:100%} }

/* --- 2 · Scroll-reveal transitions --------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  html.js-reveal [data-reveal]{opacity:0; transform:translateY(28px)}
  html.js-reveal [data-reveal].in{opacity:1; transform:none;
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
}

/* --- 3 · "See it in action": grid on desktop, swipe carousel on phones ---- */
.showcase-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-6); margin-top:var(--sp-2)}
.cz-dots{display:none}
.swipe-hint{display:none}
@media (max-width:860px){
  .showcase-grid{display:flex; grid-template-columns:none; gap:var(--sp-4);
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--sp-5);
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 0 10px;
    /* bleed to the screen edges so the next card peeks in */ margin-inline:calc(-1 * var(--sp-5)); padding-inline:var(--sp-5)}
  .showcase-grid::-webkit-scrollbar{display:none}
  .showcase-grid > .shot-cell{flex:0 0 84%; scroll-snap-align:center}
  .cz-dots{display:flex; gap:4px; justify-content:center; margin-top:var(--sp-3)}
  .cz-dots button{width:24px; height:24px; border:none; background:transparent; padding:0; cursor:pointer; display:grid; place-items:center}
  .cz-dots button::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--border-strong); opacity:.35; transition:opacity .2s, background .2s, transform .2s}
  .cz-dots button.active::before{opacity:1; background:var(--accent); transform:scale(1.35)}
  .swipe-hint{display:block; text-align:center; font-size:.8rem; color:var(--text-muted); margin-top:8px}
}

/* --- 4 · Kid/teen colour — energy on a clean white base ------------------- */
/* how-it-works step numbers cycle a friendly trio instead of all-green */
.steps .card::before{color:var(--text)}
.steps .card:nth-child(1)::before{background:var(--c-coral)}
.steps .card:nth-child(2)::before{background:var(--c-sky)}
.steps .card:nth-child(3)::before{background:var(--c-amber)}
/* icon tiles pick up colour by position */
.grid-3 .card:nth-child(3n+1) .icon{background:var(--c-coral-soft); color:var(--c-coral)}
.grid-3 .card:nth-child(3n+2) .icon{background:var(--c-sky-soft); color:var(--c-sky)}
.grid-3 .card:nth-child(3n+3) .icon{background:var(--c-amber-soft); color:var(--c-amber)}
/* gentle lift on hover so cards feel alive (pointer devices only) */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .card{transition:transform .18s ease, box-shadow .18s ease}
  .card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
  .btn{transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
}
/* a soft, playful colour wash behind the hero (kept faint on white) */
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-20% -10% auto auto; width:520px; height:520px; z-index:-1;
  background:radial-gradient(circle at 70% 30%, var(--c-amber-soft), transparent 60%),
             radial-gradient(circle at 30% 70%, var(--c-sky-soft), transparent 60%);
  filter:blur(10px); opacity:.7; pointer-events:none}
/* colourful "chapter" kickers on inner section heads */
.section-head .kicker{display:inline-block; background:var(--c-violet-soft); color:var(--c-violet-ink);
  font-weight:700; font-size:.78rem; letter-spacing:.02em; padding:6px 14px; border-radius:var(--r-pill); margin-bottom:var(--sp-3)}
/* nav gains a soft shadow once the page is scrolled (added by JS) */
.site-nav{transition:box-shadow .2s ease}
.site-nav.scrolled{box-shadow:0 6px 20px rgb(30 27 22/.07)}

/* reduced-motion: honour it for smooth-scroll + view transitions (a11y) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ============================================================
   HERO PRODUCT VISUAL + playful motion (11 Sep 2026, design pass)
   Category-expected: show the real app in a tilted device beside the copy,
   on a clean white ground with soft floating shapes. Reduced-motion safe.
   ============================================================ */
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-7); align-items:center}
.hero-copy{min-width:0}
.hero h1{letter-spacing:-.02em}
.hero-visual{position:relative; display:flex; align-items:center; justify-content:center; min-height:440px}
.hero-visual::before{content:""; position:absolute; width:360px; height:360px; max-width:90%; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 45%, var(--c-sky-soft), transparent 68%); filter:blur(14px)}
.device{position:relative; z-index:2; width:min(288px,72vw); aspect-ratio:943/1288; border-radius:40px;
  background:linear-gradient(160deg,#151b17,#0d110e); padding:11px;
  box-shadow:0 34px 74px rgb(30 27 22/.30), 0 12px 26px rgb(30 27 22/.16), inset 0 0 0 1px rgb(255 255 255/.06);
  transform:rotate(-4deg)}
.device-scr{width:100%; height:100%; border-radius:30px; overflow:hidden; background:#fff; box-shadow:inset 0 0 0 1px rgb(0 0 0/.05)}
.device-scr img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}

/* ---- hero flip-card: a REAL question/answer flip, not a screenshot claiming one ---- */
.device-scr--flip{background:transparent; box-shadow:none}
.flipcard{all:unset; cursor:pointer; display:block; width:100%; height:100%; border-radius:30px; perspective:1400px; -webkit-tap-highlight-color:transparent}
.flipcard-inner{display:block; position:relative; width:100%; height:100%; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; rotate:y 0deg; scale:1; transition:rotate .7s cubic-bezier(.4,.15,.2,1), scale .25s ease}
.flipcard[aria-pressed="true"] .flipcard-inner{rotate:y 180deg}
.flipcard:hover .flipcard-inner{scale:1.02}
.flipcard:active .flipcard-inner{scale:.97}
.flipcard:focus-visible{outline:3px solid var(--accent); outline-offset:4px; border-radius:30px}
.flipcard-face{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:36px 26px; text-align:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:30px; box-shadow:inset 0 0 0 1px rgb(0 0 0/.05)}
.flipcard-front{background:var(--surface)}
.flipcard-back{background:var(--accent-soft); rotate:y 180deg}
.fc-eyebrow{font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted)}
.flipcard-back .fc-eyebrow{color:var(--accent)}
.fc-text{font-family:var(--font-ui); font-weight:800; font-size:1.32rem; line-height:1.32; color:var(--text)}
.fc-hint{font-size:.78rem; font-weight:600; color:var(--text-muted); margin-top:auto}
@media (prefers-reduced-motion:reduce){
  .flipcard-inner{transition:none}
  .flipcard:hover .flipcard-inner, .flipcard:active .flipcard-inner{scale:1}
}
@media (max-width:900px){
  .fc-text{font-size:1.1rem}
  .flipcard-face{padding:26px 20px; gap:12px}
}
@media (prefers-reduced-motion:no-preference){ .device{animation:cz-float 7.5s ease-in-out infinite} }
@keyframes cz-float{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-9px)}}
.hero-shape{position:absolute; z-index:1; opacity:.6; filter:blur(1px)}
.hero-shape.hs1{width:86px; height:86px; border-radius:46% 54% 57% 43%/47% 44% 56% 53%; background:var(--c-coral-soft); top:8%; right:10%}
.hero-shape.hs2{width:118px; height:118px; border-radius:57% 43% 47% 53%/54% 52% 48% 46%; background:var(--c-amber-soft); bottom:6%; left:0%}
.hero-shape.hs3{width:54px; height:54px; border-radius:50%; background:var(--c-violet-soft); top:60%; right:4%}
/* background shapes are static — calmer, cleaner (motion reserved for scroll reveals, hover, device float + hotspots) */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:var(--sp-5)}
  .hero-visual{min-height:0; margin-top:var(--sp-4)}
  .device{width:min(240px,62vw)}
  .hero-shape.hs2{width:90px;height:90px}
}

/* ---- pulsing hotspots on product images (tap to reveal, no clutter) ---- */
.hotspot{position:absolute; transform:translate(-50%,-50%); width:28px; height:28px; padding:0; border:none; background:none; cursor:pointer; z-index:4}
.hs-dot{position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid #fff; box-shadow:0 2px 7px rgb(0 0 0/.28)}
.hs-dot::before{content:""; position:absolute; inset:-5px; border-radius:50%; background:var(--accent); opacity:.45; z-index:-1}
@media (prefers-reduced-motion:no-preference){ .hs-dot::before{animation:cz-ping 1.9s cubic-bezier(0,0,.2,1) infinite} }
@keyframes cz-ping{0%{transform:scale(1);opacity:.45}75%,100%{transform:scale(2.6);opacity:0}}
.hs-pop{position:absolute; bottom:150%; left:50%; transform:translateX(-50%) translateY(6px); white-space:nowrap;
  background:var(--text); color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.005em; padding:6px 11px; border-radius:9px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; box-shadow:var(--shadow-lg)}
.hs-pop::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--text)}
.hotspot:hover .hs-pop, .hotspot:focus-visible .hs-pop, .hotspot.open .hs-pop{opacity:1; transform:translateX(-50%) translateY(0)}
.hotspot:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:50%}

/* ============================================================
   VISUAL REDESIGN PASS (25 Sep 2026)
   Annotated callout section + wide "app window" shots for the new
   GIF and mind-map screenshots, which are desktop-viewport captures
   (not the portrait phone frame used by the original showcase shots).
   ============================================================ */

/* ---- Confidence callout: real screenshot + SVG arrow callouts ---- */
.confidence-shot{ position:relative; max-width:900px; margin:0 auto; }
.confidence-shot img{
  display:block; width:100%; height:auto; border-radius:var(--r-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
}
.confidence-shot .callout-arrows{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.confidence-shot .callout-arrows path{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; opacity:.85; }
.confidence-shot .callout{
  position:absolute; display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:8px 13px; font-size:.82rem; font-weight:700; color:var(--text);
  box-shadow:var(--shadow); max-width:220px; line-height:1.3;
}
.confidence-shot .dot{ width:8px; height:8px; border-radius:50%; flex:none }
.confidence-shot .dot-coral{ background:var(--c-coral) }
.confidence-shot .dot-sky{ background:var(--c-sky) }
.confidence-shot .dot-violet{ background:var(--c-violet) }
.confidence-shot .callout-1{ left:73.3%; top:2%; }
.confidence-shot .callout-2{ left:1.4%; top:74%; }
.confidence-shot .callout-3{ left:73.3%; top:76.5%; }
.callout-list-mobile{ display:none; }
@media (max-width:760px){
  .confidence-shot .callout-arrows, .confidence-shot .callout{ display:none; }
  .callout-list-mobile{
    display:flex; flex-direction:column; gap:12px; max-width:420px;
    margin:24px auto 0; padding:0; list-style:none;
  }
  .callout-list-mobile li{ display:flex; align-items:center; gap:10px; font-size:.95rem; font-weight:700; color:var(--text); }
}

/* ---- Wide app-window shots (GIF + mind map) — landscape desktop
   captures, so they get a wider rounded card instead of the phone frame ---- */
.sc-shot--wide{ max-width:480px; border-radius:18px; }
@media (max-width:820px){ .sc-shot--wide{ max-width:340px; } }

/* ============================================================
   VISUAL REDESIGN PASS 2 (25 Sep 2026) — grounded in measured research,
   see 2. JARVIS/LANDING-PAGE-DESIGN-RESEARCH-2026-09-25.md
   · Hero: real screen capture of the app (muted looping MP4/WebM, poster =
     LCP) in the phone frame, untilted so UI text stays pixel-sharp (Arc/Notion).
   · Showpiece: real answer screen + callout labels + hand-drawn arrows that
     draw on (Stripe's pathLength=1 technique, Notion's staggered rails).
   · Motion is opt-in: every new animation sits inside
     (prefers-reduced-motion: no-preference) (Linear/Stripe pattern).
   ============================================================ */

.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Visible keyboard focus everywhere (was only on the old flip-card) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.cta-band a:focus-visible{outline-color:#fff}

/* ---- Hero: real product video in the device frame ---- */
.device.device--video{width:min(340px,76vw); aspect-ratio:auto; transform:none; animation:none; margin:0}
.device.device--video{border-radius:36px; padding:10px}
.device--video .device-scr{height:auto; aspect-ratio:720/960; background:#FBF8F3; position:relative; border-radius:26px}
.device--video video{display:block; width:100%; height:100%; object-fit:cover; background:#FBF8F3}
.vid-toggle{position:absolute; right:-12px; bottom:-12px; z-index:3; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; padding:0; border:1px solid var(--border); cursor:pointer;
  background:#fff; color:var(--text); box-shadow:0 6px 16px rgb(30 27 22/.18)}
.vid-toggle:hover{color:var(--accent)}
.vid-toggle svg{width:16px; height:16px; fill:currentColor}
.vid-toggle .i-play{display:none}
.vid-toggle.is-paused .i-play{display:block}
.vid-toggle.is-paused .i-pause{display:none}
@media (max-width:900px){ .device.device--video{width:min(270px,68vw)} }

/* ---- Two-tone headline: bold claim + muted continuation (Linear/Stripe) ---- */
.tt{max-width:34ch; margin:0 auto clamp(36px,5vw,60px); text-align:center; font-size:clamp(1.45rem,3vw,2.3rem); line-height:1.22; letter-spacing:-.01em; text-wrap:balance}
.tt-a{color:var(--text)}
.tt-b{color:var(--text-muted); font-weight:600}

/* ---- Showpiece: annotated real screenshot ---- */
.showpiece{padding-top:clamp(48px,7vw,88px); padding-bottom:clamp(64px,9vw,112px)}
.sp-stage{--img-w:420px; --gap:44px; position:relative; max-width:1040px; margin:0 auto}
.sp-shot{display:block; width:var(--img-w); max-width:100%; margin:0 auto}
.sp-shot img{display:block; width:100%; height:auto; border-radius:26px; border:1px solid var(--border); background:#FBF8F3;
  box-shadow:0 1px 2px rgb(30 27 22/.04), 0 10px 22px rgb(30 27 22/.07), 0 30px 60px rgb(30 27 22/.10)}
.sp-arrows{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:2}
.sp-arrows .arc, .sp-arrows .head{fill:none; stroke:var(--accent); stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round}
.sp-callout{position:absolute; z-index:3; margin:0; display:flex; align-items:center; gap:9px;
  max-width:min(250px, calc(50% - var(--img-w) / 2 - var(--gap) - 12px));
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px 14px;
  font-size:.95rem; font-weight:700; line-height:1.3; color:var(--text); box-shadow:var(--shadow); transform:translateY(-50%); text-wrap:balance}
.sp-callout .dot{width:9px; height:9px; border-radius:50%; flex:none}
.sp-callout .dot-coral{background:var(--c-coral)}
.sp-callout .dot-sky{background:var(--c-sky)}
.sp-callout .dot-violet{background:var(--c-violet)}
.sp-c1, .sp-c3{right:calc(50% + var(--img-w) / 2 + var(--gap))}
.sp-c2{left:calc(50% + var(--img-w) / 2 + var(--gap))}
.sp-c1{top:46%}
.sp-c2{top:62%}
.sp-c3{top:80%}
@media (max-width:979px){
  .sp-stage{--img-w:340px; --gap:30px}
  .sp-callout{font-size:.88rem; padding:9px 12px}
}
/* Phones: art-directed crop of the same screen, labels above and below it */
@media (max-width:759px){
  .sp-stage{display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"c1 ." "img img" "c3 c2"; gap:34px 12px; --img-w:100%}
  .sp-shot{grid-area:img; width:100%}
  .sp-shot img{border-radius:18px}
  .sp-callout{position:relative; transform:none; max-width:none; justify-self:start; font-size:.86rem; padding:8px 11px; gap:7px}
  .sp-c1{grid-area:c1; top:auto; right:auto}
  .sp-c2{grid-area:c2; top:auto; left:auto; justify-self:end}
  .sp-c3{grid-area:c3; top:auto; right:auto}
}
/* Draw-on (only when motion is welcome; JS adds .will-draw then .drawn on scroll-in) */
@media (prefers-reduced-motion:no-preference){
  .sp-stage.will-draw .arc{stroke-dasharray:1; stroke-dashoffset:1}
  .sp-stage.will-draw .head{opacity:0}
  .sp-stage.will-draw .sp-callout{opacity:0}
  .sp-stage.will-draw.drawn .arc{stroke-dashoffset:0; transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
  .sp-stage.will-draw.drawn .head{opacity:1; transition:opacity .25s ease calc(var(--d,0s) + .55s)}
  .sp-stage.will-draw.drawn .sp-callout{opacity:1; transition:opacity .5s cubic-bezier(.16,1,.3,1) var(--cd,0s)}
}

/* ---- Shorter copy → tighter cards ---- */
.feature-grid .card h3{font-size:1.08rem}
.feature-grid .card p{font-size:.98rem}

/* ---- Mobile rhythm: field median gap between sections on phones is ~100px
   (Cardz measured 201px) — trim default section padding on small screens ---- */
@media (max-width:760px){ section{padding:48px 0} }