/* Homepage. Every value comes from css/tokens.css (generated from brand/tokens.json). No libraries. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font);font-size:var(--t-body-size);line-height:var(--t-body-line);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
img{display:block;max-width:100%;height:auto}
a{color:var(--c-accent-ink)}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s-4);top:var(--s-4);background:var(--c-surface);padding:var(--s-2) var(--s-3);z-index:9}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.logo{display:flex;align-items:center;min-height:var(--touch);color:inherit;text-decoration:none}
.logo img{height:36px;width:auto}
.nav-links{display:flex;gap:var(--s-2);align-items:center}
.link{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 var(--s-3);color:var(--c-text);text-decoration:none;font-weight:500;font-size:var(--t-small-size);border-radius:var(--r-sm);transition:color var(--m-fast) var(--ease-standard),background-color var(--m-fast) var(--ease-standard)}
.link:hover{background:var(--c-divider)}
/* type */
.over{font-size:var(--t-overline-size);line-height:var(--t-overline-line);letter-spacing:var(--t-overline-track);font-weight:var(--t-overline-weight);text-transform:uppercase;color:var(--c-text-2);margin:0 0 var(--s-4)}
.display{font-size:var(--t-display-size);line-height:var(--t-display-line);letter-spacing:var(--t-display-track);font-weight:var(--t-display-weight);margin:0;max-width:14ch;text-wrap:balance}
h2{font-size:var(--t-h1-size);line-height:var(--t-h1-line);letter-spacing:var(--t-h1-track);font-weight:var(--t-h1-weight);margin:0;max-width:18ch;text-wrap:balance}
h3{font-size:var(--t-h3-size);line-height:var(--t-h3-line);letter-spacing:var(--t-h3-track);font-weight:var(--t-h3-weight);margin:0 0 var(--s-2)}
.lede{font-size:var(--t-body-lg-size);line-height:var(--t-body-lg-line);color:var(--c-text-2);max-width:34ch;margin:var(--s-5) 0 0}
p{margin:0}
.muted{color:var(--c-text-2)}.small{font-size:var(--t-small-size);line-height:var(--t-small-line)}.cap{font-size:var(--t-caption-size);line-height:var(--t-caption-line);letter-spacing:var(--t-caption-track);color:var(--c-text-3)}
/* button */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-6)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-5);border-radius:var(--r-pill);background:var(--c-accent);color:var(--c-on-accent);font-weight:600;text-decoration:none;font-size:var(--t-body-size);transition:transform var(--m-fast) var(--ease-standard),box-shadow var(--m-fast) var(--ease-standard)}
.btn:hover{box-shadow:var(--shadow-1);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .arrow{transition:transform var(--m-fast) var(--ease-standard)}.btn:hover .arrow{transform:translateX(3px)}
/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-7);align-items:center;padding:var(--s-8) 0 var(--s-9)}
.stage{position:relative;display:flex;justify-content:center;min-height:560px}
.phone{position:relative;width:272px;padding:10px;background:#111;border-radius:40px;box-shadow:var(--shadow-2);z-index:2}
.phone::before{content:"";position:absolute;top:18px;left:50%;width:72px;height:6px;margin-left:-36px;border-radius:6px;background:#2a2a2d;z-index:3}
.phone img{border-radius:30px;width:100%;aspect-ratio:520/1125;object-fit:cover;object-position:top;background:var(--c-surface)}
.card{position:absolute;width:168px;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-2);isolation:isolate;transition:transform var(--m-base) var(--ease-standard)}
.card img{width:100%;aspect-ratio:360/503;object-fit:cover}
.card.a{left:2%;top:64px;transform:rotate(-7deg);z-index:1}
.card.b{right:0;bottom:48px;transform:rotate(6deg);z-index:3}
.card.a:hover{transform:rotate(-7deg) translateY(-6px)}.card.b:hover{transform:rotate(6deg) translateY(-6px)}
/* holo shimmer: the one flourish (motion.shimmer) */
.holo::after{content:"";position:absolute;inset:0;background:var(--shimmer);background-size:300% 100%;background-position:120% 0;mix-blend-mode:screen;opacity:0;pointer-events:none}
.holo:hover::after,.holo:focus-within::after{opacity:1;animation:shine var(--shimmer-dur) var(--shimmer-ease) 1 forwards}
@keyframes shine{from{background-position:120% 0}to{background-position:-20% 0}}
/* sections */
section{padding:var(--s-9) 0;border-top:1px solid var(--c-divider)}
.head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:end;margin-bottom:var(--s-7)}
/* scan demo */
.scan{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
.frame{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-3)}
.frame img{border-radius:var(--r-md);width:100%}
.label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:var(--s-3) var(--s-2) var(--s-1)}
.step{font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--t-small-size)}
.matches{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.matches img{border-radius:var(--r-md);border:1px solid var(--c-border);background:var(--c-surface)}
.wipe img{clip-path:inset(0 0 0 0)}
.js .wipe:not(.in) img{clip-path:inset(0 100% 0 0)}
.js .wipe img{transition:clip-path var(--m-wipe) var(--ease-emphasized)}
/* features */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
.feat article{border-top:2px solid var(--c-text);padding-top:var(--s-4)}
.feat .num{font-variant-numeric:tabular-nums;font-size:var(--t-small-size);color:var(--c-text-3);margin-bottom:var(--s-5);display:block}
.feat p{color:var(--c-text-2)}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s-8);align-items:center;margin-top:var(--s-9)}
.split .phone{margin:0 auto}
/* reveal (motion.reveal) */
.js .rv{opacity:0;transform:translateY(var(--reveal-d));transition:opacity var(--m-reveal) var(--ease-out),transform var(--m-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
.js .rv.in{opacity:1;transform:none}
/* footer */
footer{border-top:1px solid var(--c-divider);padding:var(--s-7) 0 var(--s-8)}
.foot{display:grid;grid-template-columns:1fr 2fr;gap:var(--s-6)}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);margin:calc(var(--s-3) * -1) 0 var(--s-4) calc(var(--s-3) * -1)}
.foot .cap{max-width:70ch}
.ph{font-size:var(--t-caption-size);color:var(--c-text-3);font-weight:400;margin-left:4px}
/* responsive */
@media (max-width:900px){.hero,.scan,.split,.head,.foot{grid-template-columns:1fr}.hero{padding-top:var(--s-6);gap:var(--s-7)}.feat{grid-template-columns:1fr 1fr}.split .phone{order:2}.head{gap:var(--s-4)}}
@media (max-width:640px){.matches{grid-template-columns:1fr}.wrap{padding:0 var(--s-5)}section{padding:var(--s-8) 0}.feat{grid-template-columns:1fr;gap:var(--s-6)}.stage{min-height:480px}.phone{width:232px}.card{width:128px}.card.a{left:0}.nav .link.hide-sm{display:none}}
/* reduced motion: opacity-only reveal, no wipe, no shimmer, no movement */
@media (prefers-reduced-motion:reduce){
  .js .rv{transform:none;transition:opacity 150ms linear;transition-delay:0ms}
  .js .wipe:not(.in) img,.js .wipe img{clip-path:none;transition:none}
  .holo:hover::after,.holo:focus-within::after{animation:none;opacity:0}
  .btn,.btn:hover,.btn .arrow,.btn:hover .arrow,.card,.card.a:hover,.card.b:hover{transition:none}
  .btn:hover,.btn:hover .arrow{transform:none}.card.a:hover{transform:rotate(-7deg)}.card.b:hover{transform:rotate(6deg)}
}

/* mascot (concept art, small; never in the hero) */
.mascot{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-5) 0 0;max-width:34rem}
.mascot img{width:88px;height:auto;border-radius:var(--r-md, 12px);flex:none}
.mascot figcaption{font-size:var(--t-small-size, .875rem);color:var(--c-text-2)}
.mascot figcaption b{color:var(--c-text);font-weight:600}
.mascot .cap{display:block}

/* 2026-11-13: Sign in reads as a button in the header; placeholders are plain text (no dead links) */
.nav .signin{border:1px solid var(--c-border);border-radius:var(--r-pill);padding:0 var(--s-4);margin-left:var(--s-1)}
.ph-item{cursor:default;color:var(--c-text-2)}.ph-item:hover{background:none}
.btn[aria-disabled="true"]{cursor:default}
@media (max-width:640px){.nav{min-height:64px}.logo img{height:32px}}
.btn.ghost{background:transparent;color:var(--c-text);box-shadow:inset 0 0 0 1px var(--c-border)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--c-text-3);transform:none}
[data-theme="storm"] .btn.ghost:hover{animation:none}