@font-face{font-family:Host;src:url('../fonts/HostGrotesk.ttf') format('truetype');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-Variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --mid:#080f19; --surf:#0d1723; --surf2:#111e2c; --ink:#0f2742;
  --line:#25303b; --line-quiet:#1c2834;
  --text:#eaf0f5; --strong:#f7f9fb; --muted:#92a3b3; --body:#a9b7c4; --soft:#c5d0da;
  --cer:#3fa9e5; --sig:#4da3ff; --gold:#e3b341; --gain:#55ce91; --loss:#ed7e86;
  --deep:#1d7cc8; --amber:#d7a468; --white:#ffffff; --pure:#f7f9fb;
  --max:1280px; --gutter:80px; --nav-h:68px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--mid);color:var(--text)}
html{hanging-punctuation:first last}
body{
  font-family:Inter,sans-serif;
  font-weight:400;
  font-optical-sizing:auto;
  font-feature-settings:"cv11" 1,"tnum" 1;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  line-height:1.5;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:default}

.tn{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv11" 1}

/* Host Grotesk has no Cyrillic; Russian display type is Inter 700 at display opsz.
   Host is reserved for the Latin wordmark (SVG lockup) and Latin monograms. */
.display{
  font-family:Inter,sans-serif;
  font-weight:700;
  font-variation-settings:"opsz" 48,"wght" 700;
  letter-spacing:-.035em;
  line-height:1.04;
  color:var(--strong);
  font-feature-settings:"cv11" 1,"ss01" 1;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 18px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.1px;white-space:nowrap;line-height:1;
}
.btn-primary{background:var(--white);color:var(--ink)}
.btn-secondary{background:transparent;color:var(--strong);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.btn-ghost{background:transparent;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ask{background:rgba(63,169,229,.14);color:var(--strong);box-shadow:inset 0 0 0 1px rgba(63,169,229,.36)}
.btn-ask .mk{display:block}
.link-more{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--cer);font-size:15px;font-weight:600;letter-spacing:-.1px;
}
.link-more .arrow{width:16px;height:16px}

/* ---------- nav ---------- */
.site-nav{height:var(--nav-h);display:flex;align-items:center;position:relative;z-index:4}
.site-nav .inner{
  width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:32px;
}
.site-nav .logo{display:flex;align-items:center;flex:none}
.site-nav .links{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:14px;font-weight:500;color:var(--body)}
.site-nav .links a:hover{color:var(--strong)}
.site-nav .btn{margin-left:12px;height:40px;padding:0 16px;font-size:14px}

/* ink-navy hero inverts nothing: still white lockup. A slightly tighter nav. */
.fold.ink{background:var(--ink)}
.fold.mid{background:var(--mid)}

/* ---------- hero folds (fixed 1440 artboards) ---------- */
.artboard{width:1440px;position:relative;overflow:hidden}
.fold{width:1440px;height:900px;position:relative;overflow:hidden;flex:none}
.fold .site-nav .inner{max-width:none;padding:0 80px}

.hero-copy{color:var(--body);font-size:17px;line-height:1.55}
.hero-copy p+p{margin-top:14px}
.hero-legal{margin-top:22px;font-size:12px;font-weight:500;color:#8fa6bf}
.hero-actions{display:flex;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.demo-chip{
  display:inline-flex;align-items:center;gap:7px;
  height:26px;padding:0 10px;border-radius:13px;
  background:rgba(63,169,229,.10);box-shadow:inset 0 0 0 1px rgba(63,169,229,.36);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#c5d6e6;
}
.demo-chip i{width:6px;height:6px;border-radius:50%;background:var(--cer)}

.phone{
  position:relative;flex:none;
  filter:drop-shadow(0 28px 60px rgba(0,0,0,.48));
}
.phone img{width:100%;height:auto;display:block}

/* A — Revolut, number first, phone centered and cropped */
.hero-a{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-a .kicker{margin-top:10px}
.hero-a .display{font-size:56px;margin-top:18px;max-width:920px}
.hero-a .mega{
  margin-top:18px;font-size:120px;font-weight:650;letter-spacing:-.04em;line-height:.9;
  color:var(--strong);font-variation-settings:"opsz" 48,"wght" 650;
}
.hero-a .mega-sub{margin-top:8px;font-size:16px;font-weight:500;color:#c5d6e6}
.hero-a .hero-actions{justify-content:center;margin-top:22px}
.hero-a .phone-stage{
  margin-top:28px;width:100%;height:430px;position:relative;overflow:hidden;
  display:flex;justify-content:center;
}
.hero-a .phone{width:340px;position:absolute;top:0}

/* B — editorial split */
.hero-b .body{
  display:grid;grid-template-columns:1fr 580px;gap:32px;align-items:stretch;
  padding:28px 80px 0;height:calc(900px - var(--nav-h));
  position:relative;z-index:2;
}
.hero-b .display{font-size:62px;max-width:620px}
.hero-b .hero-copy{margin-top:22px;max-width:540px;font-size:16.5px}
.hero-b .visual{
  position:relative;height:auto;min-height:0;align-self:stretch;
}
.hero-b .curve{
  position:absolute;left:0;right:0;bottom:0;pointer-events:none;z-index:1;
  overflow:hidden;
}
.hero-b .curve-d{display:block;height:500px;}
.hero-b .curve svg{width:100%;height:100%;display:block}
.hero-b .curve-m{display:none}
.hero-b .phone-col{
  position:absolute;top:44px;right:0;z-index:1;
  display:flex;justify-content:flex-end;
}
.hero-b .phone{width:320px;position:relative;z-index:1}

/* C — full-width smile as the graphic device */
.hero-c .body{position:absolute;left:80px;right:80px;top:var(--nav-h);bottom:0}
.hero-c .copy{position:relative;z-index:2;max-width:620px;padding-top:24px}
.hero-c .display{font-size:60px;max-width:560px;margin-top:16px}
.hero-c .hero-copy{margin-top:18px;max-width:500px;font-size:16.5px}
.hero-c .hero-actions{position:relative;z-index:2}
.hero-c .curve{position:absolute;left:-80px;right:-80px;bottom:0;height:400px;z-index:0;pointer-events:none}
.hero-c .curve svg{width:100%;height:100%}
.hero-c .phone{width:300px;position:absolute;right:0;bottom:52px;z-index:1}

/* ---------- variants sheet ---------- */
.sheet{background:#05080d;width:1440px}
.var-label{
  height:52px;display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:0 80px;background:#05080d;border-top:1px solid #161e28;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8fa6bf;
  white-space:nowrap;
}
.var-label .why{text-transform:none;letter-spacing:0;font-weight:500;color:#6f8192;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;text-align:right}
.rec{
  display:inline-flex;align-items:center;gap:8px;color:var(--cer);
}
.rec b{font-weight:700;letter-spacing:.1em}
.sheet .fold:first-of-type{/* no extra */}

/* ---------- homepage ---------- */
.page{width:1440px;background:var(--mid);overflow:hidden}
.page .site-nav .inner{max-width:none;padding:0 80px}

.section{padding:96px 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative}
.section.flip{/* image on the left: we swap visually with direction */}
.section.flip{grid-template-columns:1fr 1fr}
.section.flip .copy{order:2}
.section.flip .stage{order:1}
.section + .section{border-top:1px solid var(--line-quiet)}
.section.lofi{padding:80px 80px;opacity:1}
.section.lofi .stage{opacity:.92}

.kicker{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cer);
}
.kicker .num{font-variant-numeric:tabular-nums;letter-spacing:.08em}

.section .display{font-size:40px;margin-top:14px;max-width:520px;line-height:1.08}
.ph{
  margin-top:18px;max-width:500px;position:relative;
}
.ph-tag{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:4px;
  background:rgba(227,179,65,.10);box-shadow:inset 0 0 0 1px rgba(227,179,65,.28);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);
}
.ph p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--body)}
.section .link-more{margin-top:22px}

.stage{display:flex;justify-content:center;align-items:center;position:relative;min-height:420px}
.stage .phone{width:300px}

/* lo-fi interface frames */
.wire-phone{
  width:280px;height:560px;border-radius:48px;
  background:linear-gradient(145deg,#3a3d42,#1d1f23 40%,#2c2f34 70%,#17191c);
  padding:3px;position:relative;flex:none;
  box-shadow:0 24px 48px rgba(0,0,0,.4);
}
.wire-phone::before{content:"";position:absolute;inset:3px;border-radius:45px;background:#000}
.wire-screen{
  position:absolute;inset:10px;border-radius:38px;overflow:hidden;background:var(--mid);
  display:flex;flex-direction:column;align-items:center;padding:22px 22px 28px;
}
.wire-island{width:88px;height:26px;border-radius:13px;background:#000;flex:none;margin-top:2px}
.wire-body{width:100%;margin-top:28px;display:flex;flex-direction:column;gap:10px;flex:1}
.wire-line{height:8px;border-radius:4px;background:#16232f}
.wire-card{height:86px;border-radius:14px;background:var(--surf);box-shadow:inset 0 0 0 1px var(--line)}
.wire-card.lg{height:140px}
.wire-label{margin-top:auto;width:100%;text-align:left}
.wire-label .st{
  display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:4px;
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;
  white-space:nowrap;
}
.st-ready{background:rgba(85,206,145,.14);color:var(--gain)}
.st-reskin{background:rgba(77,163,255,.12);color:var(--sig)}
.st-new{background:rgba(227,179,65,.12);color:var(--amber)}
.wire-label b{display:block;font-size:15px;font-weight:600;color:var(--strong);letter-spacing:-.2px;line-height:1.25}
.wire-label p{margin-top:6px;font-size:12px;line-height:1.4;color:var(--muted)}

.wire-browser{
  width:100%;max-width:520px;border-radius:16px;overflow:hidden;
  background:var(--surf);box-shadow:inset 0 0 0 1px var(--line), 0 24px 48px rgba(0,0,0,.35);
}
.wire-chrome{
  height:38px;background:#111a24;display:flex;align-items:center;padding:0 14px;gap:7px;
}
.wire-chrome i{width:10px;height:10px;border-radius:50%;background:#3a4450;flex:none}
.wire-chrome .url{
  margin:0 auto;background:#0a1018;border-radius:7px;padding:3px 16px;
  font-size:11px;font-weight:500;color:#8fa6bf;
}
.wire-pane{padding:28px 24px 32px;min-height:220px}
.wire-pane .st{margin-bottom:10px}

/* footer */
.site-foot{
  border-top:1px solid var(--line-quiet);
  padding:48px 80px 40px;
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;
  color:var(--muted);font-size:13px;line-height:1.55;
}
.site-foot .endorsement{display:flex;flex-direction:column;gap:10px;max-width:320px}
.site-foot .muted-links{display:flex;flex-direction:column;gap:8px}
.site-foot a{color:var(--body)}
.site-foot .legal-line{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--line-quiet);
  display:flex;justify-content:space-between;gap:24px;font-size:12px;color:#6f8192;flex-wrap:wrap}

/* ---------- components sheet ---------- */
.comp{width:1440px;background:var(--mid);padding:64px 80px 72px;overflow:hidden}
.comp h1.display{font-size:48px}
.comp .lead{margin-top:12px;font-size:16px;color:var(--body);max-width:640px}
.comp-grid{margin-top:48px;display:flex;flex-direction:column;gap:36px}
.comp-block{background:var(--surf);box-shadow:inset 0 0 0 1px var(--line-quiet);border-radius:20px;padding:28px 32px}
.comp-block .lab{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6f8192;margin-bottom:18px;
}
.row{display:flex;align-items:center;flex-wrap:wrap;gap:16px 20px}
.swatch-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.caption{font-size:11px;font-weight:500;color:#6f8192}

.chip{
  display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:14px;
  font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip-ok{background:rgba(85,206,145,.14);color:var(--gain)}
.chip-load{background:rgba(147,163,179,.12);color:var(--muted)}
.chip-empty{background:rgba(147,163,179,.08);color:#8fa6bf;box-shadow:inset 0 0 0 1px var(--line)}
.chip-err{background:rgba(237,126,134,.14);color:var(--loss)}
.chip-off{background:rgba(215,164,104,.12);color:var(--amber)}
.chip-nodata{background:rgba(77,163,255,.10);color:var(--sig)}

.nav-demo{background:var(--mid);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.nav-demo .site-nav .inner{padding:0 28px}
.sec-demo{padding:0}
.sec-demo .display{font-size:32px;margin-top:10px}

/* ---------- mobile artboard (390) ---------- */
.page-m{width:390px;background:var(--mid);overflow:hidden}
.page-m .site-nav{height:60px}
.page-m .site-nav .inner{padding:0 20px;gap:12px;max-width:none}
.page-m .site-nav .links{display:none}
.page-m .site-nav .btn{margin-left:auto;height:34px;padding:0 12px;font-size:12.5px}
.page-m .fold, .page-m .hero-b, .page-m .hero-b .body{
  width:390px;height:auto;
}
.page-m .hero-b{padding-bottom:0;height:844px;overflow:hidden}
.page-m .hero-b .body{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  padding:4px 20px 0;height:calc(844px - 60px);
}
.page-m .hero-b .display{font-size:30px;max-width:none}
.page-m .hero-b .hero-copy{display:none}
.page-m .hero-b .hero-copy-m{display:block;font-size:14.5px;max-width:none;margin-top:10px}
.page-m .hero-b .hero-actions{margin-top:12px}
.page-m .hero-b .hero-legal{display:none}
.page-m .hero-b .visual{position:relative;flex:1;min-height:0;height:auto;padding:0}
.page-m .hero-b .body{position:relative;z-index:2}
.page-m .hero-b .curve-d, .page-m .hero-b .curve.curve-d{display:none}
.page-m .hero-b .curve-m{
  display:block;position:absolute;left:0;right:0;bottom:0;top:auto;
  width:auto;max-width:none;height:360px;
  -webkit-mask-image:none;mask-image:none;
}
.page-m .hero-b .curve-m svg{width:100%;height:100%}
.page-m .hero-b .phone-col{position:absolute;top:4px;right:0;z-index:1}
.page-m .hero-b .phone{width:200px}
.page-m .section, .page-m .section.flip{
  display:flex;flex-direction:column;padding:56px 20px;gap:28px;
  grid-template-columns:none;
}
.page-m .section.flip .copy, .page-m .section.flip .stage{order:0}
.page-m .section .display{font-size:28px;max-width:none}
.page-m .ph{max-width:none}
.page-m .ph p{font-size:15px}
.page-m .stage{min-height:0}
.page-m .stage .phone{width:230px}
.page-m .wire-phone{width:230px;height:460px;border-radius:40px}
.page-m .wire-phone::before{border-radius:37px}
.page-m .wire-screen{inset:8px;border-radius:32px;padding:16px 16px 20px}
.page-m .site-foot{
  padding:32px 20px 28px;grid-template-columns:1fr;gap:24px;
}
.page-m .site-foot .legal-line{flex-direction:column;gap:8px}

/* hide anything that could poke out */
.clip{overflow:hidden}

.stage.duo{display:flex;justify-content:center;align-items:flex-end;gap:28px}
.stage.duo .phone{width:240px}
.sec-band{display:block}
.page-m .stage.duo{flex-direction:column;align-items:center;gap:20px}
.page-m .stage.duo .phone{width:230px}


.sec-band{border-top:1px solid var(--line-quiet)}
.sec-band + .section{border-top:1px solid var(--line-quiet)}

/* ---------- hero illustration caption ---------- */
.illus-cap{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:#6f8192;
}
.illus-cap i{
  display:inline-block;width:16px;height:0;border-top:2px solid;vertical-align:middle;margin-right:6px;
}
.illus-cap .lg-demo{border-top:1.6px dashed #8fa6bf;opacity:.9}
.illus-cap .lg-now{
  width:7px;height:7px;border:0;border-radius:50%;background:#e3b341;
  margin-right:6px;vertical-align:middle;
}

/* ---------- Convexa Daily link block ---------- */
.daily-link{
  display:flex;align-items:center;gap:14px;
  margin-top:28px;max-width:500px;
  padding:12px 14px 12px 12px;
  background:var(--surf);
  box-shadow:inset 0 0 0 1px var(--line-quiet);
  border-radius:16px;
  color:inherit;
}
.daily-link .daily-mini{flex:none;width:132px;height:56px}
.daily-link .meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.daily-link .brand{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;letter-spacing:-.1px;color:#c5d0da;
}
.daily-link .brand .cmk{width:12px;height:12px;flex:none}
.daily-link .cta{
  font-size:15px;font-weight:600;letter-spacing:-.15px;color:var(--cer);line-height:1.3;
}
.page-m .daily-link{max-width:none;margin-top:22px}
.page-m .daily-link .daily-mini{width:108px;height:46px}

.page-m .hero-b .illus-cap{
  left:0;bottom:8px;max-width:200px;font-size:10px;gap:8px;
  justify-content:flex-start;flex-wrap:wrap;white-space:normal;
}

/* ---------- sections 9–12 stages ---------- */
.sec-band + .sec-band{border-top:1px solid var(--line-quiet)}
.stage.live, .stage.share, .stage.trio{
  display:flex;justify-content:center;align-items:center;gap:36px;
  min-height:420px;
}
.stage.live .islands{
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.stage.live .plate{
  width:320px;filter:drop-shadow(0 16px 32px rgba(0,0,0,.4));
}
.stage.live .plate img, .stage.share .share-card img{width:100%;height:auto;display:block}
.stage.share .share-card{
  width:280px;flex:none;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));
}
.stage.trio .phone{width:230px}
.stage.trio .phone.small{width:190px}
.stage .cap{
  margin-top:10px;text-align:center;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6f8192;
}

.page-m .stage.live, .page-m .stage.share, .page-m .stage.trio{
  flex-direction:column;gap:24px;align-items:center;
}
.page-m .stage.live .plate{width:260px}
.page-m .stage.share .share-card{width:230px}
.page-m .stage.trio .phone, .page-m .stage.trio .phone.small{width:230px}

.section.wide{
  grid-template-columns:1fr;
  gap:48px;
  align-items:start;
}
.section.wide .copy{max-width:640px}
.section.wide .stage{justify-content:flex-start;min-height:0}
.section.wide + .section.wide{border-top:1px solid var(--line-quiet)}
.hero-c .curve svg{height:calc(100% - 26px)}
.hero-c .illus-cap{
  position:absolute;left:80px;bottom:8px;z-index:2;margin:0;
}
.hero-b .illus-cap{
  position:absolute;left:0;bottom:12px;z-index:2;
  margin:0;padding:0;max-width:360px;
  flex-wrap:nowrap;white-space:nowrap;
}
.hero-b .hero-copy-m{display:none}
.page-m .section.wide{padding:56px 20px;gap:28px}
.hero-shot.page-m{width:390px;background:var(--mid);overflow:hidden}
.hero-shot.page-m .hero-b{height:844px}

/* ---------- guide pages (instructions centre + Home guide) ---------- */
.guide-page{background:var(--mid);overflow:hidden}
.guide-wrap{padding:36px 80px 80px}
.crumbs{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;color:var(--muted);
}
.crumbs a{color:var(--cer)}
.crumbs .sep{color:#3a4a59}
.guide-page .kicker{margin-top:28px}
.guide-page .display{margin-top:12px;font-size:52px;max-width:720px}
.guide-page .ph{margin-top:18px;max-width:640px}
.guide-stage{margin:48px 0 16px;display:flex;justify-content:center;position:relative}
.guide-phone-wrap{position:relative;width:380px}
.guide-phone-wrap .phone{width:380px;filter:drop-shadow(0 28px 60px rgba(0,0,0,.48))}
.callouts{position:absolute;inset:0;pointer-events:none;z-index:2}
.call{
  position:absolute;display:flex;align-items:center;gap:0;
  transform:translateY(-50%);
}
.call i{
  width:28px;height:28px;border-radius:50%;
  background:#3fa9e5;color:#080f19;
  font-size:13px;font-weight:700;letter-spacing:-.02em;
  display:grid;place-items:center;flex:none;
  box-shadow:0 0 0 6px rgba(63,169,229,.16);
}
.call.L{right:calc(100% + 8px);flex-direction:row}
.call.R{left:calc(100% + 8px)}
.call.L::after, .call.R::before{
  content:"";width:22px;height:1px;background:rgba(63,169,229,.7);display:block;
}
.list-title{
  font-size:22px;font-weight:650;letter-spacing:-.03em;color:var(--strong);
  margin:64px 0 8px;
}
.el-list{max-width:1280px}
.el{
  margin-top:40px;padding-top:32px;border-top:1px solid var(--line-quiet);
}
.el-hd{display:flex;align-items:flex-start;gap:16px}
.el-hd .num{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:#3fa9e5;color:#080f19;
  font-size:14px;font-weight:700;display:grid;place-items:center;
  margin-top:2px;
}
.el-hd h2{font-size:22px;font-weight:650;letter-spacing:-.03em;color:var(--strong);line-height:1.25}
.ui-name{margin-top:4px;font-size:14px;font-weight:500;color:#c5d0da;letter-spacing:-.1px}
.el .ph{margin-top:14px}
.metric-subs{margin:12px 0 0 48px;color:var(--body);font-size:15px;line-height:1.55}
.metric-subs li{margin-top:4px}
.metric-subs b{color:var(--strong);font-weight:600}
.delta-note{margin-top:12px;font-size:15px;color:var(--body);line-height:1.55}
.delta-note .k{display:inline-block;margin-right:8px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#8fa6bf}
.el-meta{margin-top:8px;font-size:13px;color:var(--muted)}
.el-meta span{
  display:inline-block;min-width:7.5em;margin-right:8px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8fa6bf;
}
.state-crops{
  margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 18px;
}
.state-crops.one{grid-template-columns:minmax(200px,max-content);max-width:560px}
.crop{margin:0;background:var(--surf);box-shadow:inset 0 0 0 1px var(--line-quiet);
  border-radius:16px;padding:12px 12px 10px;min-width:0}
.crop img{width:auto;max-width:100%;height:auto;display:block;margin:0 auto;border-radius:8px}
.state-crops:not(.one) .crop img{width:100%}
.crop figcaption{
  margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#8fa6bf;
}

.guide-states{margin-top:80px;padding-top:40px;border-top:1px solid var(--line-quiet)}
.guide-states h2{font-size:28px;font-weight:700;letter-spacing:-.035em;color:var(--strong)}
.guide-states .lead-ph{margin-top:10px}
.guide-states .states-row{
  margin-top:28px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:start;
}
.guide-states .st-cell{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.guide-states .st-cell .phone{width:100%;max-width:200px;filter:drop-shadow(0 16px 28px rgba(0,0,0,.4))}
.guide-states .st-name{
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#c5d0da;text-align:center;
}
.guide-states .st-cap{font-size:12px;color:#6f8192;text-align:center;line-height:1.35}

.guide-adj{
  margin-top:72px;padding-top:28px;border-top:1px solid var(--line-quiet);
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.g-adj{
  display:flex;flex-direction:column;gap:6px;
  padding:16px 0;color:var(--strong);
}
.g-adj .k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cer)}
.g-adj b{font-size:20px;font-weight:650;letter-spacing:-.03em}
.g-adj.next{text-align:right}
.g-adj.empty{opacity:.35}

/* centre */
.guide-search{
  margin:32px 0 0;max-width:520px;height:48px;
  display:flex;align-items:center;gap:10px;
  padding:0 16px;border-radius:14px;
  background:var(--surf);box-shadow:inset 0 0 0 1px var(--line);
  color:#8fa6bf;
}
.guide-search input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--text);
  font:inherit;font-size:15px;font-weight:500;outline:none;
}
.guide-search input::placeholder{color:#6f8192}
.g-grid{
  margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 22px;
}
.g-card{
  display:flex;flex-direction:column;
  background:var(--surf);box-shadow:inset 0 0 0 1px var(--line-quiet);
  border-radius:20px;overflow:hidden;color:inherit;min-width:0;
}
.g-card .thumb{
  height:200px;background:#080f19;display:flex;align-items:flex-start;justify-content:center;
  padding-top:20px;overflow:hidden;
}
.g-card .thumb img{width:148px;height:auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}
.g-meta{padding:16px 16px 18px}
.g-card h2{font-size:17px;font-weight:650;letter-spacing:-.03em;color:var(--strong);line-height:1.3}
.g-card .en{margin-top:3px;font-size:12.5px;font-weight:500;color:#8fa6bf}
.g-card .count{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#c5d0da}
.g-card .ready,.g-card .soon{
  display:inline-flex;margin-top:8px;height:20px;padding:0 8px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;align-items:center;
}
.g-card .ready{background:rgba(85,206,145,.12);color:#55ce91}
.g-card .soon{background:rgba(147,163,179,.10);color:#8fa6bf}
.g-card.ready{box-shadow:inset 0 0 0 1px rgba(63,169,229,.28)}

.page-m .guide-wrap{padding:16px 16px 56px}
.page-m .guide-page .display{font-size:32px;max-width:none}
.page-m .guide-stage{padding:0 28px;overflow:visible}
.page-m .guide-phone-wrap,.page-m .guide-phone-wrap .phone{width:266px}
.page-m .call i{width:22px;height:22px;font-size:11px;box-shadow:0 0 0 4px rgba(63,169,229,.16)}
.page-m .call.L{right:calc(100% + 4px);left:auto;flex-direction:row}
.page-m .call.R{left:calc(100% + 4px);right:auto}
.page-m .call.L::after, .page-m .call.R::before{
  display:block;width:4px;height:1px;
}
.page-m .state-crops{grid-template-columns:1fr;gap:12px}
.page-m .state-crops.one{grid-template-columns:1fr}
.page-m .guide-states .states-row{grid-template-columns:repeat(2,1fr);gap:20px 16px}
.page-m .guide-states .st-cell .phone{max-width:none}
.page-m .guide-adj{grid-template-columns:1fr;gap:8px}
.page-m .g-adj.next{text-align:left}
.page-m .g-grid{grid-template-columns:1fr;gap:16px}
.page-m .g-card .thumb{height:220px}
.page-m .g-card .thumb img{width:160px}
.page-m .el-hd h2{font-size:18px}
.page-m .metric-subs{margin-left:16px}

.guide-extras{margin-top:72px;padding-top:40px;border-top:1px solid var(--line-quiet)}
.guide-extras h2{font-size:28px;font-weight:700;letter-spacing:-.035em;color:var(--strong)}
.guide-extras .lead-ph{margin-top:10px}
.extra-row{
  margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,240px));
  gap:36px;justify-content:center;align-items:start;
}
.extra-cell{display:flex;flex-direction:column;align-items:center;gap:10px}
.extra-cell .phone{width:100%;max-width:240px;filter:drop-shadow(0 16px 28px rgba(0,0,0,.4))}
.extra-cell .st-name{
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#c5d0da;text-align:center;
}
.extra-cell .st-cap{font-size:12px;color:#6f8192;text-align:center;line-height:1.35;max-width:240px}
.page-m .extra-row{grid-template-columns:1fr;gap:24px;justify-items:center}
.page-m .extra-cell .phone{max-width:240px}