/* Landing page (/). Same tokens as the app (styles.css): Figtree, warm
   off-white ground, near-black "ink" as the one accent, green/red only
   on charts. Mobile first; the layout widens at 760px and 1100px. */
:root{
  --f-ui:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg:#F2F2EE;
  --bg-card:#FFFFFF;
  --bg-elevated:#F4F4F0;
  --band:#E9E9E3;
  --ink:#0E0F12;
  --text-dim:#5D616A;
  --text-faint:#868B94;
  --line:rgba(14,15,18,0.08);
  --long:#00996A;
  --long-dim:rgba(0,153,106,0.10);
  --short:#E0434A;
  --warn:#B8650A;
  --dark-card:#16171A;
  --dark-dim:#9A9EA6;
  --dark-line:rgba(255,255,255,0.10);
  --photo:#DAD6CC;
  --photo-dark:#26272B;
  --radius:28px;
  --shadow-card:0 1px 2px rgba(16,17,20,0.04), 0 24px 48px -18px rgba(16,17,20,0.28);
  --gutter:20px;
  --section:72px;
}
@media (min-width:760px){ :root{ --gutter:40px; --section:104px; } }
@media (min-width:1100px){ :root{ --gutter:48px; --section:128px; } }

*{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(--ink);
  font-family:var(--f-ui);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block;}
a{color:var(--ink);}
a:focus-visible,button:focus-visible{outline:3px solid #2E6FD8;outline-offset:3px;border-radius:6px;}
h1,h2,h3,p{margin:0;}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter);}
.section{padding:var(--section) 0;}
.dim{color:var(--text-dim);}
.body{font-size:16px;line-height:1.6;color:var(--text-dim);}
@media (min-width:760px){ .body{font-size:18px;} }
.stack{display:flex;flex-direction:column;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.h2{font-size:36px;line-height:1.04;letter-spacing:-0.035em;font-weight:800;}
@media (min-width:760px){ .h2{font-size:52px;} }
@media (min-width:1100px){ .h2{font-size:64px;line-height:1.0;} }

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;border-radius:999px;
  font:inherit;font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{opacity:.88;}
.btn:active{transform:scale(.98);}
.btn--ink{background:var(--ink);color:#FFFFFF;}
.btn--soft{background:rgba(14,15,18,0.06);color:var(--ink);}
.btn--white{background:#FFFFFF;color:var(--ink);}
.btn--glass{background:rgba(255,255,255,0.16);color:#FFFFFF;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.btn--lg{min-height:56px;}
.btn--sm{min-height:44px;padding:0 18px;font-size:15px;}
.btn--block{display:flex;width:100%;}

/* Header */
.site-head{position:sticky;top:0;z-index:30;background:rgba(242,242,238,0.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.site-head nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
@media (min-width:760px){ .site-head nav{height:76px;} }
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:20px;font-weight:800;letter-spacing:-0.02em;}
.brand img{width:32px;height:32px;}
.nav-links{display:none;gap:32px;font-size:15px;font-weight:600;}
.nav-links a{text-decoration:none;}
@media (min-width:1100px){ .nav-links{display:flex;} }

/* Hero: full-bleed photo, copy in white over a legibility scrim. */
.hero{position:relative;min-height:780px;display:flex;align-items:flex-end;overflow:hidden;background:var(--photo-dark);color:#FFFFFF;}
@media (min-width:760px){ .hero{min-height:820px;} }
@media (min-width:1100px){ .hero{min-height:min(900px,calc(100vh - 76px));} }
.hero > .photo, .bleed > .photo{position:absolute;inset:0;border-radius:0;background:var(--photo-dark);}
.scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(8,9,11,0.82) 0%, rgba(8,9,11,0.55) 50%, rgba(8,9,11,0.1) 85%);pointer-events:none;}
@media (min-width:760px){ .scrim{background:linear-gradient(to top, rgba(8,9,11,0.72) 0%, rgba(8,9,11,0.35) 45%, rgba(8,9,11,0.05) 75%);} }
@media (min-width:760px){ .bleed--right .scrim{background:linear-gradient(to left, rgba(8,9,11,0.7) 0%, rgba(8,9,11,0.35) 40%, rgba(8,9,11,0) 65%);} }
.hero-inner{position:relative;width:100%;display:grid;gap:40px;align-items:end;padding-top:56px;padding-bottom:56px;}
@media (min-width:1100px){ .hero-inner{padding-bottom:80px;} }
.hero-copy{max-width:760px;}
.hero-copy{display:flex;flex-direction:column;gap:20px;}
@media (min-width:760px){ .hero-copy{gap:26px;} }
.chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;background:#FFFFFF;color:var(--ink);padding:8px 14px;border-radius:999px;}
.chip i{width:8px;height:8px;border-radius:4px;background:var(--long);}
.hero h1{display:flex;flex-direction:column;gap:20px;font-weight:inherit;}
@media (min-width:760px){ .hero h1{gap:26px;} }
.hero .display{display:block;font-size:56px;line-height:.98;letter-spacing:-0.05em;font-weight:800;}
@media (min-width:760px){ .hero .display{font-size:96px;} }
@media (min-width:1100px){ .hero .display{font-size:120px;line-height:.92;} }
.hero .lede{display:block;font-size:17px;line-height:1.55;font-weight:400;letter-spacing:0;color:rgba(255,255,255,0.86);max-width:520px;}
.hero h1 .lede{font-weight:600;color:#FFFFFF;}
.hero h1 + .lede{margin-top:-8px;}
@media (min-width:760px){ .hero .lede{font-size:21px;} }
.btn-row{display:flex;gap:10px;flex-wrap:wrap;}
.ticks{list-style:none;margin:0;padding:0;display:flex;gap:10px 20px;flex-wrap:wrap;font-size:14px;font-weight:600;}
.ticks li{display:flex;align-items:center;gap:6px;}
.small{font-size:14px;color:var(--text-dim);}
.hero .small{color:rgba(255,255,255,0.75);}

/* Photo slots: a plain toned block until the photo is added. */
.photo{position:relative;border-radius:var(--radius);background:var(--photo);overflow:hidden;margin:0;}
.photo img{width:100%;height:100%;object-fit:cover;object-position:var(--mpos,50% 50%);}
@media (min-width:760px){ .photo img{object-position:var(--pos,50% 50%);} }
.photo--dark{background:var(--photo-dark);}

/* Scanner card (a static picture of the app's card) */
.scan-card{width:300px;padding:18px;background:var(--bg-card);color:var(--ink);border-radius:26px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:12px;}
@media (min-width:760px){ .scan-card{width:320px;} }
.scan-head{display:flex;align-items:center;justify-content:space-between;}
.scan-head b{font-size:18px;font-weight:800;}
.scan-head span{font-size:13px;color:var(--text-dim);margin-left:8px;}
.pill{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;}
.pill--long{background:var(--long-dim);color:var(--long);}
.chart{border-radius:16px;background:var(--bg-elevated);padding:10px 6px;}
.chart svg{display:block;width:100%;height:auto;}
.score{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;}
.dots{display:flex;gap:4px;}
.dots i{width:16px;height:6px;border-radius:3px;background:#E3E3DE;}
.dots i.on{background:var(--ink);}
.fake-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.fake-btns span{height:44px;border-radius:999px;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
.fake-btns span.ink{background:var(--ink);color:#FFFFFF;}

/* Problem (dark band) */
.dark{background:var(--ink);color:#FFFFFF;}
.dark .dim, .dark p{color:var(--dark-dim);}
.problem .stack{gap:40px;}
@media (min-width:1100px){ .problem .stack{gap:64px;} }
.problem-top{display:grid;gap:28px;align-items:end;}
@media (min-width:1100px){ .problem-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;} }
.big-number{display:flex;flex-direction:column;gap:8px;}
.problem{background:#FFFFFF;}
.big-number b{font-size:96px;line-height:.85;font-weight:800;letter-spacing:-0.06em;color:var(--ink);}
@media (min-width:760px){ .big-number b{font-size:160px;} }
@media (min-width:1100px){ .big-number b{font-size:200px;} }
.big-number span{font-size:15px;}
@media (min-width:760px){ .big-number span{font-size:18px;} }
.big-number span{color:var(--text-dim);}
.cols3{display:grid;gap:28px;}
@media (min-width:760px){ .cols3{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;} }
.point{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line);}
.point h3{font-size:22px;font-weight:700;letter-spacing:-0.01em;}
.point p{font-size:16px;line-height:1.6;color:var(--text-dim);}
.dark .point{border-top-color:var(--dark-line);}
.dark .point h3{color:#FFFFFF;}
.dark .point p{color:var(--dark-dim);}
.point--strong{border-top:2px solid var(--ink);}
.answer{display:grid;gap:20px;align-items:center;padding:24px;border-radius:var(--radius);background:var(--dark-card);}
@media (min-width:1100px){ .answer{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;padding:40px;} }
.answer strong{font-size:22px;line-height:1.25;letter-spacing:-0.02em;font-weight:700;color:#FFFFFF;}
@media (min-width:760px){ .answer strong{font-size:30px;} }
.answer p{font-size:17px;line-height:1.6;color:var(--dark-dim);}

/* Section heading row */
.head-row{display:grid;gap:16px;align-items:end;margin-bottom:36px;}
@media (min-width:1100px){ .head-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-bottom:64px;} }

/* How it works */
.steps{display:grid;gap:48px;}
@media (min-width:1100px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;} }
.step{display:flex;flex-direction:column;gap:22px;}
.screen{height:380px;padding:18px;border-radius:26px;background:var(--bg-card);display:flex;flex-direction:column;gap:12px;}
.screen .scan-card{width:100%;padding:0;box-shadow:none;}
.screen-title{display:flex;justify-content:space-between;align-items:center;}
.screen-title b{font-size:17px;font-weight:800;}
.screen-title span.faint{font-size:12px;font-weight:700;color:var(--text-dim);}
.rule{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding:7px 0;border-bottom:1px solid var(--line);}
.toggle{width:36px;height:22px;border-radius:11px;background:#DCDCD6;position:relative;flex-shrink:0;}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:8px;background:#FFFFFF;}
.toggle.on{background:var(--ink);}
.toggle.on::after{left:auto;right:3px;}
.screen .push{margin-top:auto;}
.screen .ink-bar{height:44px;border-radius:999px;background:var(--ink);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.three span{height:44px;border-radius:999px;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
.step-text{display:flex;gap:14px;}
.num{flex-shrink:0;width:36px;height:36px;border-radius:18px;background:var(--ink);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;}
.step-text h3{font-size:22px;font-weight:700;margin-bottom:8px;}
.step-text p{font-size:16px;line-height:1.6;color:var(--text-dim);}

/* Full-bleed photo sections: the photo spans the page, copy sits on it. */
.bleed{position:relative;overflow:hidden;background:var(--photo-dark);color:#FFFFFF;display:flex;align-items:flex-end;min-height:620px;}
@media (min-width:1100px){ .bleed{min-height:760px;} }
.bleed .wrap{position:relative;width:100%;padding-top:56px;padding-bottom:56px;}
@media (min-width:1100px){ .bleed .wrap{padding-bottom:80px;} }
.bleed-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start;max-width:620px;}
.bleed-copy .h2{color:#FFFFFF;}
.bleed-copy p{font-size:17px;line-height:1.55;color:rgba(255,255,255,0.86);}
@media (min-width:760px){ .bleed-copy p{font-size:20px;} }
@media (min-width:760px){ .bleed--right .bleed-copy{margin-left:auto;max-width:460px;} }
@media (min-width:1100px){ .bleed--top{align-items:flex-start;} .bleed--top .wrap{padding-top:96px;} }
/* On phones, a stacked section shows the whole photo above its copy
   instead of cropping it behind the text. */
@media (max-width:759px){
  .bleed--stack{display:block;min-height:0;background:var(--ink);}
  .bleed--stack > .photo{position:relative;inset:auto;aspect-ratio:3/2;height:auto;}
  .bleed--stack .scrim{display:none;}
  .bleed--stack .wrap{padding-top:32px;padding-bottom:48px;}
}
.bleed--cta{min-height:560px;}
@media (min-width:1100px){ .bleed--cta{min-height:680px;} }

/* Features */
.band{background:var(--bg-elevated);}
.bento{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;}
@media (min-width:1100px){
  .bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-bottom:48px;}
  .bento > .panel{grid-column:span 5;}
  .bento > .bento-side{grid-column:span 7;display:flex;flex-direction:column;gap:20px;}
}
.bento-side{display:flex;flex-direction:column;gap:16px;}
.panel{padding:22px;border-radius:var(--radius);background:var(--bg-card);display:flex;flex-direction:column;gap:16px;}
@media (min-width:760px){ .panel{padding:32px;} }
.panel h3{font-size:26px;font-weight:700;letter-spacing:-0.02em;}
.panel p{font-size:16px;line-height:1.6;color:var(--text-dim);}
.score-big{display:flex;align-items:baseline;gap:10px;margin-top:8px;}
.score-big b{font-size:56px;font-weight:800;letter-spacing:-0.05em;line-height:1;}
@media (min-width:760px){ .score-big b{font-size:72px;} }
.check-row{display:flex;align-items:center;justify-content:space-between;font-size:15px;padding:10px 0;border-bottom:1px solid var(--line);}
.tf-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
@media (min-width:760px){ .tf-row{gap:8px;} }
.tf{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;border-radius:14px;background:var(--bg-elevated);}
.tf span{font-size:12px;font-weight:700;color:var(--text-dim);}
.more{display:grid;column-gap:56px;}
@media (min-width:760px){ .more{grid-template-columns:repeat(2,minmax(0,1fr));} }
.more > div{display:flex;flex-direction:column;gap:8px;padding:24px 0;border-top:1px solid var(--line);}
.more h3{font-size:19px;font-weight:700;}
.more p{font-size:15.5px;line-height:1.6;color:var(--text-dim);}

/* Markets */
.markets-grid{display:grid;gap:28px;}
@media (min-width:1100px){ .markets-grid{grid-template-columns:5fr 7fr;gap:40px;} }
.markets-grid .intro{display:flex;flex-direction:column;gap:16px;}
.groups{display:grid;gap:28px;}
@media (min-width:760px){ .groups{grid-template-columns:repeat(2,minmax(0,1fr));} }
.group h3{font-size:15px;font-weight:700;color:var(--text-dim);margin-bottom:12px;}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.chips li{font-size:14px;font-weight:600;padding:9px 14px;border-radius:999px;background:#FFFFFF;}

/* Plans */
.plans-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 12px;scroll-padding-left:var(--gutter);}
.plan{flex-shrink:0;width:300px;scroll-snap-align:start;padding:26px;border-radius:var(--radius);background:var(--bg-card);display:flex;flex-direction:column;gap:12px;}
.plan--pro{background:var(--ink);color:#FFFFFF;}
@media (min-width:1100px){
  .plans-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;overflow:visible;margin:0;padding:0;}
  .plan{width:auto;}
}
.plan-tag{align-self:flex-start;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:#FFFFFF;color:var(--ink);}
.plan-tag--spacer{visibility:hidden;}
.plan-name{font-size:20px;font-weight:800;}
.plan-price{font-size:40px;font-weight:800;letter-spacing:-0.04em;}
.plan-price small{font-size:14px;font-weight:600;color:var(--text-dim);letter-spacing:0;}
.plan--pro .plan-price small{color:var(--dark-dim);}
.plan dl{margin:0;}
.plan dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;}
.plan--pro dl div{border-top-color:var(--dark-line);}
.plan dt{color:var(--text-dim);}
.plan--pro dt{color:var(--dark-dim);}
.plan dd{margin:0;text-align:right;font-weight:600;}
.plan dd.no{color:var(--text-faint);}
.plan--pro dd.no{color:var(--dark-dim);}
.plan .push{margin-top:auto;padding-top:8px;}
.plan-note{margin-top:20px;padding:20px 24px;border-radius:22px;background:#FFFFFF;font-size:15px;line-height:1.6;}
@media (min-width:760px){ .plan-note{font-size:16px;} }

/* FAQ */
.faq-grid{display:grid;gap:20px;}
@media (min-width:1100px){ .faq-grid{grid-template-columns:4fr 8fr;gap:40px;} }
.faq-list{display:grid;column-gap:40px;}
@media (min-width:760px){ .faq-list{grid-template-columns:repeat(2,minmax(0,1fr));} }
.faq-list > div{display:flex;flex-direction:column;gap:10px;padding:22px 0;border-top:1px solid var(--line);}
.faq-list h3{font-size:18px;font-weight:700;}
.faq-list p{font-size:15.5px;line-height:1.6;color:var(--text-dim);}

/* Footer */
.site-foot{padding:48px 0 64px;}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px;}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;font-weight:600;}
.foot-links a{padding:12px 0;}
.disclaimer{max-width:980px;font-size:13px;line-height:1.65;color:var(--text-dim);}
.disclaimer p{margin:0 0 10px;}
.disclaimer p:last-child{margin-bottom:0;}
.disclaimer strong{color:var(--ink);font-weight:700;}

/* ---------------------------------------------------------------
   How it works: animated screens. Static by default; the .play class
   (added only while in view, never with reduced motion) runs them.
--------------------------------------------------------------- */
.pill--short{background:rgba(224,67,74,0.10);color:#C8323A;}
.toggle.on::after{left:3px;right:auto;transform:translateX(14px);}
.swap{display:grid;}
.swap > span{grid-area:1/1;}
.swap .s2{opacity:0;}
.screen .q{font-size:16px;font-weight:700;}

/* 1. Swipe: a stack of three cards */
.deck{position:relative;height:100%;}
.screen .deck-card{position:absolute;top:0;left:0;right:0;width:auto;padding:14px;box-shadow:0 12px 30px -14px rgba(16,17,20,0.35);border:1px solid var(--line);transform-origin:50% 0;}
.deck-card.dc2{transform:translateY(-10px) scale(.94);}
.deck-card.dc3{transform:translateY(-20px) scale(.88);}
.stamp{position:absolute;top:56px;z-index:2;font-size:17px;font-weight:800;padding:4px 12px;border:3px solid currentColor;border-radius:10px;background:rgba(255,255,255,0.92);opacity:0;}
.stamp--watch{left:22px;color:var(--long);transform:rotate(-12deg);}
.stamp--skip{right:22px;color:#C8323A;transform:rotate(12deg);}
.play .dc1{animation:dc1 9s ease-in-out infinite both;}
.play .dc2{animation:dc2 9s ease-in-out infinite both;}
.play .dc3{animation:dc3 9s ease-in-out infinite both;}
.play .dc1 .stamp{animation:st1 9s linear infinite both;}
.play .dc2 .stamp{animation:st2 9s linear infinite both;}
.play .dc3 .stamp{animation:st3 9s linear infinite both;}
@keyframes dc1{0%,10%{transform:none;opacity:1}22%{transform:translateX(120%) rotate(16deg);opacity:0}86%{transform:translateY(12px) scale(.96);opacity:0}100%{transform:none;opacity:1}}
@keyframes dc2{0%,10%{transform:translateY(-10px) scale(.94);opacity:1}22%,40%{transform:none;opacity:1}52%{transform:translateX(-120%) rotate(-16deg);opacity:0}82%{transform:translateY(-10px) scale(.94);opacity:0}92%,100%{transform:translateY(-10px) scale(.94);opacity:1}}
@keyframes dc3{0%,10%{transform:translateY(-20px) scale(.88);opacity:1}22%,40%{transform:translateY(-10px) scale(.94);opacity:1}52%,66%{transform:none;opacity:1}78%{transform:translateX(120%) rotate(16deg);opacity:0}79%{transform:translateY(-20px) scale(.88);opacity:0}88%,100%{transform:translateY(-20px) scale(.88);opacity:1}}
@keyframes st1{0%,5%{opacity:0}9%,20%{opacity:1}22%,100%{opacity:0}}
@keyframes st2{0%,35%{opacity:0}39%,50%{opacity:1}52%,100%{opacity:0}}
@keyframes st3{0%,61%{opacity:0}65%,76%{opacity:1}78%,100%{opacity:0}}

/* 2. Scan your way: rules switch on, then the matches appear */
.play .toggle.on{animation:tgBg 8s ease infinite both;}
.play .toggle.on::after{animation:tgKnob 8s ease infinite both;}
.play .toggle.t1, .play .toggle.t1::after{animation-delay:.3s;}
.play .toggle.t2, .play .toggle.t2::after{animation-delay:.9s;}
.play .toggle.t3, .play .toggle.t3::after{animation-delay:1.5s;}
.play .toggle.t4, .play .toggle.t4::after{animation-delay:2.1s;}
@keyframes tgBg{0%,5%{background:#DCDCD6}9%,86%{background:var(--ink)}90%,100%{background:#DCDCD6}}
@keyframes tgKnob{0%,5%{transform:translateX(0)}9%,86%{transform:translateX(14px)}90%,100%{transform:translateX(0)}}
.play.scan-anim .ink-bar{animation:press 8s ease infinite both;}
.play.scan-anim .swap .s1{animation:s1a 8s ease infinite both;}
.play.scan-anim .swap .s2{animation:s2a 8s ease infinite both;}
@keyframes press{0%,40%{transform:none}43%{transform:scale(.96)}46%,100%{transform:none}}
@keyframes s1a{0%,43%{opacity:1}47%,90%{opacity:0}94%,100%{opacity:1}}
@keyframes s2a{0%,43%{opacity:0}47%,90%{opacity:1}94%,100%{opacity:0}}

/* 3. Train your eye: candles draw in, Up is picked, the rest is revealed */
.school-anim .rv{opacity:0;}
.play.school-anim .cd:not(.rv){animation:cdIn 9s ease infinite both;animation-delay:calc(var(--i) * 90ms);}
.play.school-anim .rv{animation:rvIn 9s ease infinite both;animation-delay:calc(var(--i) * 150ms);}
.play.school-anim .three span:first-child{animation:pick 9s ease infinite both;}
.play.school-anim .q .s1{animation:q1 9s ease infinite both;}
.play.school-anim .q .s2{animation:q2 9s ease infinite both;}
@keyframes cdIn{0%{opacity:0;transform:translateY(4px)}3%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes rvIn{0%,55%{opacity:0}60%,92%{opacity:1}100%{opacity:0}}
@keyframes pick{0%,42%{background:var(--bg-elevated);color:var(--ink)}46%,92%{background:var(--ink);color:#FFFFFF}100%{background:var(--bg-elevated);color:var(--ink)}}
@keyframes q1{0%,54%{opacity:1}58%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes q2{0%,54%{opacity:0}58%,92%{opacity:1}96%,100%{opacity:0}}
.screen--deck{overflow:hidden;padding-top:30px;}
.ink-bar.swap{display:grid;place-items:center;white-space:nowrap;}

/* Phones: a smaller beta chip and a tighter hero block, so the copy
   sits below the face in the hero photo. */
@media (max-width:759px){
  .hero{min-height:max(780px,100svh);}
  .hero-copy{gap:16px;}
  .chip{font-size:12px;padding:5px 10px;gap:6px;}
  .chip i{width:6px;height:6px;}
  .hero .btn--lg{min-height:50px;padding:0 20px;font-size:15px;}
  .hero .btn-row{flex-wrap:nowrap;}
  .hero .ticks{font-size:13px;gap:6px 14px;}
}

/* Wordmark trademark */
.tm{font-size:.45em;font-weight:600;vertical-align:super;line-height:0;margin-left:1px;}

/* Partnership and Contact forms (footer links open them as dialogs) */
dialog.enq{border:0;padding:0;border-radius:28px;width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--bg-card);color:var(--ink);box-shadow:0 30px 80px -20px rgba(8,9,11,0.45);}
dialog.enq::backdrop{background:rgba(8,9,11,0.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.enq-inner{position:relative;padding:28px 22px 24px;}
@media (min-width:760px){ .enq-inner{padding:40px 40px 32px;} }
.enq h2{font-size:30px;line-height:1.05;letter-spacing:-0.035em;font-weight:800;padding-right:44px;}
.enq-lede{margin:10px 0 22px;font-size:15.5px;line-height:1.55;color:var(--text-dim);}
.enq-x{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:22px;border:0;background:var(--bg-elevated);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.enq form{display:flex;flex-direction:column;gap:14px;}
.enq-row{display:grid;gap:14px;}
@media (min-width:560px){ .enq-row{grid-template-columns:repeat(2,minmax(0,1fr));} }
.enq-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;}
.enq-field em{font-style:normal;font-weight:500;color:var(--text-faint);}
.enq input:not([type=checkbox]), .enq select, .enq textarea{font:inherit;font-size:16px;font-weight:500;color:var(--ink);background:var(--bg);border:1px solid transparent;border-radius:14px;padding:12px 14px;min-height:48px;width:100%;box-sizing:border-box;}
.enq textarea{resize:vertical;min-height:110px;line-height:1.5;}
.enq input:focus, .enq select:focus, .enq textarea:focus{outline:none;border-color:var(--ink);background:#FFFFFF;}
.enq-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--text-dim);}
.enq-consent input{width:20px;height:20px;margin:1px 0 0;flex-shrink:0;accent-color:var(--ink);}
.enq-error{margin:0;padding:10px 14px;border-radius:12px;background:rgba(224,67,74,0.10);color:#B3262D;font-size:14px;font-weight:600;}
.enq-alt{margin:0;text-align:center;font-size:13.5px;color:var(--text-dim);}
.enq-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.enq-done{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.enq-thanks{margin:0;font-size:18px;line-height:1.5;font-weight:600;}
.enq [hidden]{display:none !important;}

/* Features: the chart patterns panel, full width under the bento. */
@media (min-width:760px){ .bento > .panel.panel--wide{grid-column:1 / -1;} }
.patterns-panel{display:grid;gap:24px;}
@media (min-width:1100px){ .patterns-panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:40px;} }
.pp-copy{display:flex;flex-direction:column;gap:16px;}
.pp-copy .chips{margin-top:4px;}
.patterns-panel .chips li{background:var(--bg-elevated);font-size:13px;padding:7px 12px;}
.pp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media (max-width:560px){ .patterns-panel .chips{display:none;} .pp-grid{gap:8px;} .pp figcaption b{font-size:12.5px;} .pp figcaption span{display:none;} .pp .chart{padding:4px 2px;} }
.pp{margin:0;display:flex;flex-direction:column;gap:8px;}
.pp .chart{padding:8px 6px;}
.pp svg{display:block;width:100%;height:auto;}
.pp figcaption{display:flex;flex-direction:column;gap:2px;}
.pp figcaption b{font-size:15px;font-weight:700;}
.pp figcaption span{font-size:13px;color:var(--text-dim);}