/* Layout: a bright consumer site built around Gen. Cool paper ground, navy ink, Gen's suit blue and bolt yellow as the two brand voices.
   Signature device: meter-style mono readouts (kWh, half-hourly, EPC bands) and the 70 + 30 score split. */
:root{
  --paper:#F3F6FC; --surface:#FFFFFF; --surface-2:#E8EEFA; --ink:#0A1838; --muted:#46557A; --line:#D5DDEE;
  --blue:#1D4ED8; --blue-soft:#DCE6FF; --on-blue:#FFFFFF;
  --volt:#FFCB12; --volt-soft:#FFF3C2; --on-volt:#1B1600;
  --green:#0C9A49; --green-soft:#D7F5E3;
  --band:#0A1838; --band-2:#13265A; --band-fg:#EEF2FD; --band-muted:#CAD3EA;
  --shadow:0 18px 40px -22px rgba(10,24,56,.35);
  --f-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body:"Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap:1180px; --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#060E22; --surface:#0D1834; --surface-2:#132247; --ink:#E8EDFA; --muted:#B6C1DA; --line:#21315B;
  --blue:#7096FF; --blue-soft:#17295A; --on-blue:#061230;
  --volt:#FFD437; --volt-soft:#3A3209; --on-volt:#1B1600;
  --green:#3DD383; --green-soft:#0F3524;
  --band:#0B1736; --band-2:#152A5E; --band-fg:#EEF2FD; --band-muted:#CAD3EA;
  --shadow:0 18px 40px -22px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#060E22; --surface:#0D1834; --surface-2:#132247; --ink:#E8EDFA; --muted:#B6C1DA; --line:#21315B;
  --blue:#7096FF; --blue-soft:#17295A; --on-blue:#061230;
  --volt:#FFD437; --volt-soft:#3A3209; --on-volt:#1B1600;
  --green:#3DD383; --green-soft:#0F3524;
  --band:#0B1736; --band-2:#152A5E; --band-fg:#EEF2FD; --band-muted:#CAD3EA;
  --shadow:0 18px 40px -22px rgba(0,0,0,.7); color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:600}
.lede{font-size:1.18rem;color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--volt);outline-offset:3px;border-radius:6px}

/* Buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 1rem/1 var(--f-body);padding:.95em 1.4em;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:var(--on-blue)}
.btn-volt{background:var(--volt);color:var(--on-volt)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue)}
.band .btn-ghost{border-color:rgba(238,242,253,.3);color:var(--band-fg)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.pill{display:inline-flex;align-items:center;gap:.5em;font:600 .78rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:.55em .9em;border-radius:999px;background:var(--volt-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--volt) 55%,transparent)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 0 4px color-mix(in srgb,var(--volt) 30%,transparent)}

/* Header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.45rem/1 var(--f-display);letter-spacing:-.02em;color:var(--ink);flex-shrink:0}
.brand .mark{width:34px;height:34px;border-radius:10px;background:var(--blue);display:grid;place-items:center}
.brand .mark svg{width:18px;height:18px}
.brand b{color:var(--blue);font-weight:800}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-links a{text-decoration:none;font-weight:600;font-size:.88rem;padding:.55em .5em;border-radius:999px;color:var(--muted);white-space:nowrap;position:relative}
.nav-links a:hover{color:var(--ink);background:var(--surface-2)}
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
.nav-links a .new{font:600 .6rem/1 var(--f-mono);background:var(--volt);color:var(--on-volt);padding:.3em .45em;border-radius:5px;margin-left:5px;vertical-align:2px;letter-spacing:.05em}
.nav-cta{display:flex;gap:8px;align-items:center}
.nav-cta .btn{padding:.7em 1.1em;font-size:.92rem}
.menu-btn{display:none;margin-left:auto;background:var(--surface-2);border:0;border-radius:10px;width:44px;height:44px;cursor:pointer;color:var(--ink)}
.menu-btn span{display:block;width:20px;height:2px;background:currentColor;margin:4px auto;border-radius:2px}
@media (max-width:1340px){
  .nav-links,.nav-cta .login{display:none}
  .menu-btn{display:block}
  .nav-cta{margin-left:0}
  header.site.open .nav-links{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);padding:10px max(20px,env(safe-area-inset-right,0px)) 18px max(20px,env(safe-area-inset-left,0px));gap:4px;max-height:calc(100vh - 71px - env(safe-area-inset-top,0px));max-height:calc(100dvh - 71px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain}
  header.site.open .nav-links a{padding:.85em 1em;font-size:1.05rem}
  header.site.open .nav-links .login-m{display:block}
}
.nav-links .login-m{display:none}
@media (max-width:460px){.nav-cta .btn{padding:.65em .9em;font-size:.85rem}.brand{font-size:1.25rem}}

/* Sections */
section.block{padding-block:clamp(52px,7vw,88px)}
section.tight{padding-block:clamp(44px,6vw,72px)}
.sec-head{display:grid;gap:12px;max-width:760px;margin-bottom:34px}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.5rem)}
.band{background:var(--band);color:var(--band-fg)}
.band .lede,.band .muted{color:var(--band-muted)}
.band .eyebrow{color:var(--volt)}
.alt{background:var(--surface)}
.page[hidden]{display:none!important}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,80px) 0;background:
  radial-gradient(900px 520px at 85% 30%, color-mix(in srgb,var(--blue) 16%,transparent), transparent 70%), var(--paper)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.7rem,6.6vw,5.3rem);font-weight:800;letter-spacing:-.035em;margin-top:22px}
.hero h1 .hl{position:relative;white-space:nowrap;z-index:0}
.hero h1 .hl::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;height:.36em;background:var(--volt);z-index:-1;border-radius:4px;transform:skew(-8deg)}
.hero h1 .gen{color:var(--blue)}
.hero .lede{margin-top:22px}
.hero .btn-row{margin-top:30px}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font:500 .8rem/1.3 var(--f-mono);color:var(--muted);letter-spacing:.03em}
.trust span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--green);margin-right:8px;vertical-align:1px}
.stage{position:relative;display:flex;flex-direction:column;min-width:0}
.convo{display:grid;gap:12px;position:relative;z-index:3}
.genwrap{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:340px;margin-top:-6px}
.stage .rings{position:absolute;left:50%;top:52%;width:min(440px,100%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, var(--blue) 0 36%, transparent 36.4%),
             repeating-radial-gradient(circle, transparent 0 7.6%, color-mix(in srgb,var(--blue) 22%,transparent) 7.6% 8%);max-width:100%}
.stage img.gen{position:relative;width:min(340px,72%);height:auto;z-index:2;filter:drop-shadow(0 26px 30px rgba(10,24,56,.28));animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.bubble{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);max-width:300px;font-size:.94rem;line-height:1.45}
.bubble .who{font:600 .7rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bubble.q{justify-self:start;border-bottom-left-radius:4px}
.bubble.a{justify-self:end;border-bottom-right-radius:4px;background:var(--blue);color:var(--on-blue);border-color:transparent;max-width:330px}
.bubble.a .who{color:color-mix(in srgb,var(--on-blue) 75%,transparent)}
.curve{display:block;width:100%;height:90px;margin-top:-30px;position:relative;z-index:1}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.stage{max-width:520px;width:100%;margin:0 auto}}
@media (max-width:520px){.bubble{max-width:250px;font-size:.88rem;padding:11px 13px}.bubble.a{max-width:270px}.genwrap{min-height:280px}}

/* Question ticker */
.ticker{overflow:hidden;padding-block:20px;background:var(--surface);border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker .row{display:flex;gap:10px;width:max-content;animation:tick 70s linear infinite}
.ticker .row+.row{margin-top:10px;animation-duration:85s;animation-direction:reverse}
.ticker:hover .row{animation-play-state:paused}
.ticker span{white-space:nowrap;padding:.6em 1.05em;border-radius:999px;background:var(--surface-2);font-weight:500;font-size:.95rem}
.ticker span:nth-child(3n){background:var(--volt-soft)}
.ticker span:nth-child(4n){background:var(--blue-soft)}
@keyframes tick{to{transform:translateX(-50%)}}

/* Before and after Gen */
.volt-band{background:var(--volt);color:var(--on-volt)}
.volt-band .eyebrow{color:var(--on-volt);opacity:.75}
.volt-band .lede{color:var(--on-volt);opacity:.82}
.ba{display:grid;grid-template-columns:1fr 150px 1fr;gap:20px;align-items:center}
.bill{background:var(--surface);color:var(--ink);border-radius:18px;padding:24px;box-shadow:0 24px 40px -26px rgba(27,22,0,.6);transform:rotate(-1.2deg);min-width:0}
.bill .bh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:6px}
.bill .bh b{font-family:var(--f-display);font-size:1.15rem}
.bill .bh span{font:500 .68rem var(--f-mono);color:var(--muted)}
.bill dl{margin:0;display:grid;font:400 .78rem/1.35 var(--f-mono);font-variant-numeric:tabular-nums}
.bill dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line)}
.bill dt{color:var(--muted)}
.bill dd{margin:0;text-align:right;white-space:nowrap}
.bill .tot{font-weight:600;font-size:.9rem;border-bottom:0;padding-top:10px}
.bill .tot dt{color:var(--ink)}
.ba-mid{display:grid;justify-items:center;gap:6px;text-align:center}
.ba-mid img{width:130px;height:auto;filter:drop-shadow(0 14px 16px rgba(27,22,0,.3))}
.ba-mid span{font:600 .72rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.genans{background:var(--band);color:var(--band-fg);border-radius:18px;padding:26px;box-shadow:0 24px 40px -26px rgba(27,22,0,.7);display:grid;gap:16px;min-width:0}
.genans .gh{display:flex;gap:12px;align-items:center}
.genans .gh img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--band-2)}
.genans .gh b{font-family:var(--f-display);font-size:1.1rem}
.genans .gh span{display:block;font:500 .7rem var(--f-mono);color:var(--band-muted)}
.genans p.say{font-size:1.12rem;line-height:1.55}
.genans p.say strong{color:var(--volt);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font:600 .76rem/1 var(--f-mono);padding:.6em .8em;border-radius:8px;background:var(--band-2);color:var(--band-fg)}
.genans .next{font-size:.94rem;color:var(--band-muted);border-top:1px solid rgba(238,242,253,.14);padding-top:14px}
.volt-band .sample-note{color:var(--on-volt);opacity:.7}
@media (max-width:900px){.ba{grid-template-columns:1fr}.ba-mid{grid-auto-flow:column;align-items:center}.ba-mid img{width:80px}.bill{transform:none}}

/* Ask box */
.askbox{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.askbox input{flex:1;min-width:0;font:500 1rem var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.75em 1.1em}
.askbox input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.askbox button{padding:.75em 1.3em}

/* Inner page hero with Gen */
.phero-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.phero-gen{width:clamp(130px,14vw,190px);height:auto;filter:drop-shadow(0 22px 26px rgba(10,24,56,.25))}
@media (max-width:760px){.phero-grid{grid-template-columns:1fr}.phero-gen{width:92px;order:-1}}

/* Whole-home assessments */
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:10px;align-content:start;min-width:0;transition:border-color .15s, transform .15s}
.acard:hover{border-color:var(--blue);transform:translateY(-3px)}
.acard .ak{font:600 .68rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.acard h3{font-size:1.22rem}
.acard p{font-size:.92rem;color:var(--muted)}
.acard .looks{font:500 .74rem/1.45 var(--f-mono);color:var(--ink);background:var(--surface-2);padding:9px 11px;border-radius:8px}
.acard.more{background:var(--blue);border-color:transparent;color:var(--on-blue)}
.acard.more .ak,.acard.more p{color:var(--on-blue);opacity:.85}
.acard.more img{height:auto;justify-self:end;align-self:end}
@media (max-width:1100px){.agrid{grid-template-columns:repeat(3,1fr)}}
.acard.more{grid-column:span 2;grid-template-columns:1fr auto;align-items:end}
.acard.more > *:not(img){grid-column:1}
.acard.more img{grid-column:2;grid-row:1 / span 3;width:90px}
@media (max-width:780px){.agrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.agrid{grid-template-columns:1fr}.acard.more{grid-column:span 1}}

/* Plan: now, next, later */
.plan{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface)}
.plan > div{padding:26px 24px;display:grid;gap:12px;align-content:start;position:relative}
.plan > div + div{border-left:1px solid var(--line)}
.plan .when{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.plan .when b{font:800 1.6rem/1 var(--f-display)}
.plan .when span{font:500 .72rem var(--f-mono);color:var(--muted)}
.plan .meter{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.plan .meter i{display:block;height:100%;background:var(--green)}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.plan li{font-size:.94rem;padding-left:18px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--blue)}
.plan-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:end;margin-top:56px}
.plan-head h3{font-size:clamp(1.4rem,2.6vw,1.8rem)}
.plan-head + .plan{margin-top:20px}
@media (max-width:820px){.plan{grid-template-columns:1fr}.plan > div + div{border-left:0;border-top:1px solid var(--line)}}

/* Two tariffs */
.tw{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.tcard{border-radius:22px;padding:clamp(22px,3vw,32px);display:grid;gap:16px;align-content:start;min-width:0;border:1px solid var(--line);background:var(--surface)}
.tcard.ai{background:var(--band);color:var(--band-fg);border-color:transparent}
.tcard .lab{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.tcard .lab span{font:600 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:.55em .75em;border-radius:6px;background:var(--surface-2);color:var(--ink)}
.tcard.ai .lab span{background:var(--volt);color:var(--on-volt)}
.tcard h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.tcard p{color:var(--muted)}
.tcard.ai p{color:var(--band-muted)}
.tcard .basis{display:grid;gap:8px;font-size:.94rem}
.tcard .basis div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.tcard.ai .basis div{border-top-color:rgba(238,242,253,.14)}
.tcard .basis dt,.tcard .basis .k{font:500 .74rem/1.5 var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tcard.ai .basis .k{color:var(--band-muted)}
.flat{height:70px;border-radius:10px;background:var(--surface-2);position:relative;overflow:hidden}
.flat::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:3px;background:var(--muted);border-radius:2px;opacity:.6}
.flat span{position:absolute;right:14px;top:10px;font:500 .68rem var(--f-mono);color:var(--muted)}
.tou{display:block;width:100%;height:70px}
.promise-line{font:600 .9rem var(--f-body);color:var(--green);background:var(--green-soft);padding:12px 14px;border-radius:10px}
@media (max-width:820px){.tw{grid-template-columns:1fr}}

/* Phone, house imagery */
.phone{width:230px;justify-self:end;align-self:end;margin-bottom:calc(-1 * clamp(28px,5vw,56px));background:var(--band);padding:9px 9px 0;border-radius:36px 36px 0 0;box-shadow:0 -10px 40px -10px rgba(0,0,0,.45);height:330px;overflow:hidden}
.phone img{display:block;width:100%;height:auto;border-radius:28px 28px 0 0}
.house{position:relative;margin:0 0 28px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1500/760;max-width:100%}
.house img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.house figcaption{position:absolute;left:18px;bottom:18px;right:18px;display:flex;flex-wrap:wrap;gap:8px}
.house figcaption span{font:600 .74rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:.65em .85em;border-radius:8px;background:rgba(10,24,56,.78);color:#EEF2FD;backdrop-filter:blur(6px)}
.house figcaption span:first-child{background:var(--volt);color:var(--on-volt)}
.report-img{display:block;width:100%;height:180px;object-fit:cover}
@media (max-width:520px){.house{aspect-ratio:4/3}.house figcaption span:nth-child(n+3){display:none}}

/* ===== Community, Eco Rank, challenges, badges, forum ===== */
:root{--t-champ:#E9AE2F;--t-warr:#B3ADEB;--t-ach:#D08A58;--t-sup:#33B873;--t-start:#4A78F0;--t-exp:#6B7591}
.rankw{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:var(--band-2);border-radius:26px;overflow:hidden;color:var(--band-fg)}
.rank-left{position:relative;padding:22px;display:grid;gap:16px;align-content:start;min-width:0}
.levels{display:flex;flex-wrap:wrap;gap:6px;background:rgba(6,14,34,.45);padding:5px;border-radius:999px;justify-self:start}
.levels button{all:unset;cursor:pointer;font:600 .8rem/1 var(--f-body);padding:.7em 1em;border-radius:999px;color:var(--band-muted);white-space:nowrap}
.levels button[aria-selected="true"]{background:var(--volt);color:var(--on-volt)}
.levels button:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
.field{display:block;width:100%;aspect-ratio:1.35/1;max-width:100%}
.field-cap{position:absolute;left:22px;bottom:18px;font:500 .7rem var(--f-mono);color:var(--band-muted);letter-spacing:.06em;text-transform:uppercase}
.rank-right{padding:clamp(22px,3vw,36px);display:grid;gap:18px;align-content:center;background:rgba(6,14,34,.35);min-width:0}
.rank-right .k{font:600 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--band-muted)}
.tierbig{display:flex;gap:16px;align-items:center}
.trophy{width:64px;height:64px;flex-shrink:0;border-radius:18px;display:grid;place-items:center;background:var(--tc,var(--t-sup))}
.trophy svg{width:34px;height:34px}
.tierbig b{display:block;font:800 clamp(1.6rem,3vw,2.2rem)/1.05 var(--f-display);letter-spacing:-.02em}
.tierbig span{font-size:.95rem;color:var(--band-muted)}
.pct{font:800 clamp(2.6rem,6vw,4rem)/1 var(--f-display);letter-spacing:-.04em}
.pct small{display:block;font:500 1rem/1.3 var(--f-body);letter-spacing:0;color:var(--band-muted);margin-top:8px}
.pbar{position:relative;display:flex;height:14px;border-radius:999px;overflow:visible;gap:2px}
.pbar i{display:block;height:100%}
.pbar i:first-child{border-radius:999px 0 0 999px}.pbar i:last-of-type{border-radius:0 999px 999px 0}
.pbar .me{position:absolute;top:-7px;width:4px;height:28px;border-radius:3px;background:var(--band-fg);box-shadow:0 0 0 3px var(--band-2);transform:translateX(-2px);transition:left .5s cubic-bezier(.2,.8,.2,1)}
.plegend{display:flex;justify-content:space-between;font:500 .66rem var(--f-mono);color:var(--band-muted);letter-spacing:.04em;text-transform:uppercase}
.rank-msg{font-size:1rem;color:var(--band-fg);background:rgba(238,242,253,.07);padding:12px 14px;border-radius:12px}
@media (max-width:900px){.rankw{grid-template-columns:1fr}}
.gtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.gtile{display:grid;gap:8px;padding:22px;border-radius:18px;border:1px solid rgba(238,242,253,.14);text-decoration:none;color:var(--band-fg);transition:border-color .15s, transform .15s}
.gtile:hover{border-color:var(--volt);transform:translateY(-2px)}
.gtile .k{font:600 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--volt)}
.gtile h3{font-size:1.3rem}
.gtile p{color:var(--band-muted);font-size:.94rem}
.gtile .go{font-weight:600;font-size:.9rem;color:var(--band-fg);margin-top:4px}
@media (max-width:820px){.gtiles{grid-template-columns:1fr}}

.ladder{display:grid;gap:8px}
.rung{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:12px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.rung .trophy{width:48px;height:48px;border-radius:12px}
.rung .trophy svg{width:26px;height:26px}
.rung b{font-family:var(--f-display);font-size:1.12rem;display:block}
.rung span.d{font-size:.9rem;color:var(--muted)}
.rung .p{font:600 .8rem var(--f-mono);color:var(--muted);white-space:nowrap}
.lvl-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.lvl-row span{font:600 .78rem/1 var(--f-mono);padding:.7em .9em;border-radius:999px;background:var(--surface-2)}
.lvl-row span:last-child{background:var(--volt);color:var(--on-volt)}
.rank-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:56px}
@media (max-width:900px){.rank-split{grid-template-columns:1fr;gap:32px}}
.invite{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-top:28px;padding:18px 22px;border-radius:16px;background:var(--blue);color:var(--on-blue)}
.invite img{width:56px;height:auto}
.invite b{font-family:var(--f-display);font-size:1.15rem}
.invite p{opacity:.85;font-size:.94rem}
@media (max-width:640px){.invite{grid-template-columns:1fr}.invite img{display:none}}

.chal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:12px;align-content:start;min-width:0}
.ccard .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ccard .type{font:600 .68rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:.5em .65em;border-radius:6px;background:var(--blue-soft);color:var(--blue)}
.ccard .type.group{background:var(--volt-soft);color:var(--ink)}
.ccard .pts{font:600 .8rem var(--f-mono);color:var(--green)}
.ccard h3{font-size:1.25rem}
.ccard p{font-size:.93rem;color:var(--muted)}
.prog{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.prog i{display:block;height:100%;background:var(--blue);border-radius:4px}
.ccard .meta{display:flex;justify-content:space-between;font:500 .74rem var(--f-mono);color:var(--muted)}
@media (max-width:1000px){.chal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.chal{grid-template-columns:1fr}}

.pp{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.ppcard{background:var(--band);color:var(--band-fg);border-radius:22px;padding:28px;display:grid;gap:14px}
.ppcard .n{font:800 3.4rem/1 var(--f-display);letter-spacing:-.04em;color:var(--volt)}
.ppcard .n small{font:500 1rem var(--f-mono);color:var(--band-muted);letter-spacing:0}
.ppcard .bar{height:12px;border-radius:6px;background:var(--band-2);overflow:hidden}
.ppcard .bar i{display:block;height:100%;width:26.3%;background:var(--volt)}
.ppcard ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:.95rem;color:var(--band-muted)}
.ppcard li b{color:var(--band-fg);font-weight:600}
.ppcard .sum{font-size:.9rem;color:var(--band-muted);line-height:1.5}
.ppcard .sum b{color:var(--band-fg);font-weight:600}
.ppcard .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--band-muted)}
.ppcard .legend span{display:inline-flex;align-items:center;gap:6px}
.ppcard .legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.bfilters{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 22px}
.bfilters button{font:600 .86rem var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.bfilters button small{font:500 .74rem var(--f-mono);color:var(--muted)}
.bfilters button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.bfilters button[aria-pressed="true"] small{color:var(--on-blue);opacity:.85}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.bt{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 14px 16px;display:grid;justify-items:center;align-content:start;gap:8px;text-align:center}
.medal{border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%, color-mix(in srgb,var(--mc) 65%, #fff), var(--mc) 62%);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18), 0 8px 16px -8px var(--mc);border:3px solid color-mix(in srgb,var(--mc) 60%, #fff)}
.bt .medal{width:62px;height:62px}
.bt .medal svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bt h3{font:700 .95rem/1.2 var(--f-display);margin:4px 0 0;color:var(--ink)}
.bt .pts{font:700 .8rem var(--f-mono);background:var(--volt);color:var(--on-volt);border-radius:8px;padding:4px 9px}
.bt p{margin:0;font-size:.8rem;line-height:1.4;color:var(--muted)}
.bt .got{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.bt .got svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3}
.bt.off .medal{filter:saturate(.55);opacity:.8}
#badges{scroll-margin-top:90px}
/* Section links (/page#section) stop below the sticky header, like #badges */
main [id]{scroll-margin-top:90px}
.bnote{font-size:.85rem;color:var(--muted);margin-top:16px}
@media (max-width:900px){.pp{grid-template-columns:1fr}}
@media (max-width:640px){.bfilters{flex-wrap:nowrap;overflow-x:auto;margin:28px -16px 18px;padding:0 16px 4px;scrollbar-width:none}.bfilters::-webkit-scrollbar{display:none}.bfilters button{flex:none}}
@media (max-width:520px){.bgrid{grid-template-columns:repeat(2,1fr);gap:10px}.bt{padding:16px 10px 14px}.bt .medal{width:54px;height:54px}}

.forum{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.forum-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.forum-h .cats{display:flex;flex-wrap:wrap;gap:6px}
.forum-h .cats span{font:600 .76rem/1 var(--f-body);padding:.6em .9em;border-radius:999px;background:var(--surface-2)}
.forum-h .cats span:first-child{background:var(--ink);color:var(--paper)}
.thread{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.thread:last-child{border-bottom:0}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 .9rem var(--f-display);color:var(--on-blue);background:var(--blue)}
.thread b{font-family:var(--f-display);font-size:1.05rem;display:block;line-height:1.25}
.thread .m{font:500 .74rem var(--f-mono);color:var(--muted)}
.thread .tag{font:600 .66rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:.4em .55em;border-radius:5px;background:var(--surface-2);margin-right:8px;color:var(--ink)}
.thread .rc{text-align:right;font:600 1.1rem var(--f-mono)}
.thread .rc small{display:block;font:500 .66rem var(--f-mono);color:var(--muted);text-transform:uppercase}
.thread.gen .av{background:var(--volt);color:var(--on-volt)}
.forum-split{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:start}
@media (max-width:900px){.forum-split{grid-template-columns:1fr}}

.scorefam{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px}
.sf{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:8px;align-content:start;min-width:0}
.sf .k{font:600 .68rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sf .v{font:800 1.9rem/1 var(--f-display)}
.sf .v small{font:500 .85rem var(--f-mono);color:var(--muted)}
.sf p{font-size:.86rem;color:var(--muted)}
.sf .chip{justify-self:start;font:600 .68rem/1 var(--f-mono);padding:.45em .6em;border-radius:6px}
.chip.good{background:var(--green-soft);color:var(--green)}.chip.avg{background:var(--volt-soft);color:var(--ink)}
@media (max-width:1000px){.scorefam{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.scorefam{grid-template-columns:1fr 1fr}}

/* ===== v4: calmer type, hero, video, stores, answers, moving, devices, download, contact ===== */
.eyebrow{font:600 .92rem/1.2 var(--f-body);letter-spacing:.01em;text-transform:none;color:var(--blue)}
.band .eyebrow{color:var(--volt)}
.sample-note{font:italic 400 .84rem/1.45 var(--f-body);color:var(--muted)}
.know .k,.acard .ak,.gtile .k,.ccard .type,.rank-right .k,.sf .k{text-transform:none;letter-spacing:.01em;font-family:var(--f-body);font-weight:600;font-size:.82rem}

.hero2{background:var(--band);color:var(--band-fg);position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px) 0}
.hero2::before{content:"";position:absolute;right:-12%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle, rgba(46,94,255,.45), transparent 62%);pointer-events:none}
.hero2-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:end}
.hero2 h1{font-size:clamp(2.4rem,5.2vw,4.3rem);font-weight:800;letter-spacing:-.035em;line-height:.98}
.hero2 h1 em{font-style:normal;color:var(--volt)}
.hero2 .lede{color:var(--band-muted);margin-top:22px;font-size:1.2rem;max-width:34em}
.hero2 .free{display:inline-block;font:700 .95rem var(--f-body);color:var(--on-volt);background:var(--volt);padding:.45em .85em;border-radius:8px;margin-bottom:22px}
.hero2 .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.hero2 .alt-links{margin-top:18px;color:var(--band-muted);font-size:.98rem}
.hero2 .alt-links a{color:var(--band-fg);font-weight:600}
.hero2-text{padding-bottom:clamp(48px,7vw,96px)}
.hero2-gen{position:relative;display:flex;justify-content:center;align-items:flex-end;align-self:end}
.hero2-gen::before{content:"";position:absolute;bottom:0;left:50%;width:min(480px,100%);aspect-ratio:1;transform:translate(-50%,18%);border-radius:50%;background:var(--volt)}

@media (max-width:860px){.hero2-grid{grid-template-columns:1fr}.hero2-text{padding-bottom:0}}

.store-b{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:#000;color:#fff;border:1px solid #A6A6A6;border-radius:10px;padding:7px 18px;min-width:160px;height:52px;justify-content:center;box-sizing:border-box;transition:transform .15s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.store-b:hover{transform:translateY(-2px)}
.store-b .sg{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--volt);flex-shrink:0}
.store-b .sg svg{width:15px;height:15px}
.store-b small{display:block;font:500 .7rem/1.1 var(--f-body);opacity:.92}
.store-b b{display:block;font:600 1.3rem/1.05 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:-.01em}
.store-row{display:flex;flex-wrap:wrap;gap:12px}

.vid{padding-block:clamp(56px,8vw,100px);background:var(--band);color:var(--band-fg)}
.vid-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.vid h2{font-size:clamp(1.75rem,3.4vw,2.5rem)}
.vid p{color:var(--band-muted);margin-top:16px;font-size:1.08rem}
.vframe{border-radius:24px;overflow:hidden;background:#000;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);border:1px solid rgba(238,242,253,.12);aspect-ratio:16/9;max-width:100%}
.vframe video{display:block;width:100%;height:100%;object-fit:cover}
.vid .chips2{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.vid .chips2 span{font-weight:600;font-size:.88rem;padding:.55em .9em;border-radius:999px;background:var(--band-2)}
@media (max-width:900px){.vid-grid{grid-template-columns:1fr}}

/* Ask Gen answer cards */
.chat-body{min-height:460px}
.ans{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:14px;max-width:100%}
.ans .who{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted)}
.ans .who img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--blue-soft)}
.ans .who b{color:var(--ink)}
.ans h4{font:800 clamp(1.3rem,2.4vw,1.65rem)/1.15 var(--f-display);letter-spacing:-.02em}
.ans p{font-size:.98rem;color:var(--muted)}
.stats{display:flex;flex-wrap:wrap;gap:12px 28px}
.stat2{border-left:3px solid var(--blue);padding-left:12px}
.stat2.y{border-color:var(--volt)}.stat2.g{border-color:var(--green)}.stat2.r{border-color:#E5534B}
.stat2 span{display:block;font-size:.78rem;color:var(--muted)}
.stat2 b{display:block;font:800 1.5rem/1.1 var(--f-display);letter-spacing:-.02em}
.stat2 small{font-size:.78rem;color:var(--muted)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cmp h5{font:700 .95rem var(--f-body);margin:0 0 8px}
.brow{display:grid;gap:4px;margin-bottom:10px}
.brow .l{display:flex;justify-content:space-between;font-size:.84rem;color:var(--muted)}
.brow .l b{color:var(--ink);font-variant-numeric:tabular-nums}
.brow .t{height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.brow .t i{display:block;height:100%;border-radius:6px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.vbars{display:flex;gap:18px;align-items:flex-end;height:150px;padding:6px 4px 0;border-bottom:1px solid var(--line)}
.vbars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.vbars i{display:block;width:100%;max-width:70px;border-radius:10px 10px 3px 3px;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.vbars b{font:700 .9rem var(--f-display)}
.vlabels{display:flex;gap:18px;font-size:.8rem;color:var(--muted)}.vlabels span{flex:1;text-align:center}
.flowc{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flowc span{font:600 .84rem var(--f-mono);padding:.55em .7em;border-radius:8px;background:var(--surface-2)}
.flowc em{font-style:normal;color:var(--muted)}
.flowc span.end{background:var(--blue);color:var(--on-blue)}
.acts{display:grid;gap:8px}
.acts div{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:.93rem}
.acts div b{font:800 .95rem var(--f-display);color:var(--blue)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two div{padding:12px 14px;border-radius:12px;background:var(--surface-2);font-size:.9rem}
.two div b{display:block;font:700 1rem var(--f-display);margin-bottom:4px}
.two div.yes{background:var(--green-soft)}
.prof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:12px;overflow:hidden}
.prof div{background:var(--surface-2);padding:10px 12px}
.prof span{display:block;font-size:.74rem;color:var(--muted)}
.prof b{font:700 .98rem var(--f-display)}
.sos{background:#FDECEA;border:1px solid #F3B5AE;border-radius:14px;padding:16px;display:grid;gap:6px;color:#5A1712}
.sos b{font:800 1.8rem/1 var(--f-display);letter-spacing:-.01em}
.follow{display:flex;flex-wrap:wrap;gap:8px}
.follow button{all:unset;cursor:pointer;font-size:.86rem;font-weight:600;padding:.5em .85em;border-radius:999px;border:1px solid var(--line);color:var(--blue)}
.follow button:hover{border-color:var(--blue)}
.ans .actbtn{justify-self:start;font:600 .9rem var(--f-body);padding:.7em 1.1em;border-radius:999px;background:var(--blue);color:var(--on-blue)}
.composer{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px;border-top:1px solid var(--line);background:var(--surface)}
.composer img{width:64px;height:auto}
.composer > div{min-width:0}
.composer form .btn{flex-shrink:0}
.composer .lbl{font:700 1rem var(--f-display);margin-bottom:6px}
.composer form{display:flex;gap:8px}
.composer input{flex:1;min-width:0;font:500 1rem var(--f-body);color:var(--ink);background:var(--paper);border:2px solid var(--blue-soft);border-radius:12px;padding:.8em 1em}
.composer input:focus{outline:none;border-color:var(--blue)}
.composer .disc{font-size:.76rem;color:var(--muted);margin-top:6px}
@media (max-width:560px){.cmp,.two{grid-template-columns:1fr}.prof{grid-template-columns:1fr 1fr}.composer img{width:44px}}

/* Moving home */
.move{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.movecard{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px;display:grid;gap:18px;box-shadow:var(--shadow)}
.movecard .hh{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.movecard .hb{border-radius:16px;padding:16px;background:var(--surface-2);display:grid;gap:4px;align-content:start}
.movecard .hb.new{background:var(--volt-soft)}
.movecard .hb span{font-size:.8rem;color:var(--muted)}
.movecard .hb b{font:800 1.7rem/1.1 var(--f-display);letter-spacing:-.02em}
.movecard .hb small{font-size:.82rem;color:var(--muted)}
.movecard .arr{align-self:center;font:700 1.4rem var(--f-display);color:var(--muted)}
.movecard .delta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--band);color:var(--band-fg)}
.movecard .delta b{font:800 1.6rem var(--f-display);color:var(--volt)}
.movelist{display:grid;gap:10px;margin-top:22px}
.movelist div{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.movelist div i{width:10px;height:10px;border-radius:3px;background:var(--volt);margin-top:.5em}
@media (max-width:900px){.move{grid-template-columns:1fr}}

/* Devices */
.devices{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.laptop{position:relative}
.laptop .scr{background:var(--band);border-radius:18px 18px 0 0;padding:12px;border:1px solid var(--line)}
.laptop .base{height:16px;background:linear-gradient(var(--line),var(--surface-2));border-radius:0 0 14px 14px;margin:0 -4%}
.dash{background:#F3F6FC;border-radius:10px;display:grid;grid-template-columns:150px 1fr;min-height:320px;overflow:hidden;color:#0A1838}
.dash .side{background:#fff;border-right:1px solid #D5DDEE;padding:12px 8px;display:grid;gap:4px;align-content:start;font-size:.72rem;font-weight:600;color:#46557A}
.dash .side span{padding:7px 8px;border-radius:7px}
.dash .side span.on{background:#E8EEFA;color:#0A1838}
.dash .main{padding:12px;display:grid;gap:10px;align-content:start}
.dash .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dash .tiles div{background:#fff;border:1px solid #D5DDEE;border-radius:9px;padding:8px;font-size:.66rem;color:#46557A}
.dash .tiles b{display:block;font:800 1.15rem var(--f-display);color:#0A1838}
.dash .gb{background:#0A1838;color:#fff;border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;font-size:.72rem}
.dash .gb img{width:44px;height:auto}
.dash .gb b{font:800 .95rem var(--f-display)}
.dash .sw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dash .sw div{background:#fff;border:2px solid #0C9A49;border-radius:10px;padding:8px;font-size:.66rem;color:#46557A}
.dash .sw div+div{border-color:#1D4ED8}
.dash .sw b{display:block;font:800 .82rem var(--f-display);color:#0A1838}
.dash .sw em{font-style:normal;display:inline-block;margin-top:4px;padding:2px 6px;border-radius:999px;background:#0C9A49;color:#fff;font-weight:700}
.dash .sw div+div em{background:#1D4ED8}
.devphone{width:min(230px,70%);margin:0 auto;background:var(--band);padding:9px;border-radius:34px;box-shadow:var(--shadow)}
.devphone img{display:block;width:100%;border-radius:26px}
@media (max-width:900px){.devices{grid-template-columns:1fr}.dash{grid-template-columns:110px 1fr}}
@media (max-width:520px){.dash .side{display:none}.dash{grid-template-columns:1fr}}

/* Download page */
.dl-hero{background:var(--blue);color:var(--on-blue);padding-block:clamp(56px,8vw,96px);position:relative;overflow:hidden}
.dl-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.dl-hero h1{font-size:clamp(2.4rem,5.2vw,4.2rem);font-weight:800;letter-spacing:-.035em;line-height:.98}
.dl-hero p{opacity:.9;font-size:1.15rem;margin-top:18px;max-width:34em}
.dl-hero .store-row{margin-top:28px}
.dl-hero img.g{width:min(340px,80%);height:auto;justify-self:center;filter:drop-shadow(0 30px 30px rgba(0,0,0,.3))}
.qrs{display:flex;gap:18px;flex-wrap:wrap}
.qrbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:10px;justify-items:center;width:200px}
.qrbox .qr{width:150px;height:150px;background:#fff;border-radius:8px;padding:6px}
.qrbox b{font:700 1rem var(--f-display)}
.qrbox span{font-size:.84rem;color:var(--muted)}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.way{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;display:grid;gap:12px;align-content:start}
.way h3{font-size:1.4rem}
.way p{color:var(--muted)}
@media (max-width:860px){.dl-grid,.ways{grid-template-columns:1fr}}

/* Contact v2 */
.c2{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.c2-side{background:var(--band);color:var(--band-fg);padding:clamp(26px,4vw,44px);display:grid;gap:26px;align-content:start;position:relative;overflow:hidden}
.c2-side h2{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.c2-side p{color:var(--band-muted)}
.c2-item span{display:block;font-size:.85rem;color:var(--band-muted);margin-bottom:4px}
.c2-item b{font:700 1.15rem/1.4 var(--f-display);user-select:all;word-break:break-word}
.c2-side .copy{background:var(--band-2);color:var(--band-fg);border-color:transparent;margin-top:8px}
.c2-side img{position:absolute;right:-20px;bottom:-30px;width:150px;opacity:.95}
.c2-form{padding:clamp(26px,4vw,44px)}
form.cf2{display:grid;gap:18px}
.cf2 .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cf2 label{display:grid;gap:7px;font-weight:600;font-size:.92rem}
.cf2 input,.cf2 select,.cf2 textarea{font:400 1rem var(--f-body);color:var(--ink);background:var(--paper);border:1px solid transparent;border-radius:12px;padding:.9em 1em;width:100%}
.cf2 input:focus,.cf2 select:focus,.cf2 textarea:focus{outline:none;border-color:var(--blue);background:var(--surface)}
.cf2 select,.cf2 select:focus{-webkit-appearance:none;appearance:none;line-height:1.25;padding-right:2.8em;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 1.25em - 6px) 52%,calc(100% - 1.25em) 52%;background-size:6px 6px;background-repeat:no-repeat}
.cf2 textarea{min-height:150px;resize:vertical}
.cf2 .note{font-size:.88rem;color:var(--muted)}
.cf2 .ok{padding:14px 16px;border-radius:12px;background:var(--green-soft);font-size:.95rem}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.quick a{display:grid;gap:6px;padding:20px;border-radius:18px;border:1px solid var(--line);background:var(--surface);text-decoration:none}
.quick a:hover{border-color:var(--blue)}
.quick b{font:700 1.1rem var(--f-display)}
.quick span{font-size:.92rem;color:var(--muted)}
@media (max-width:860px){.c2,.quick{grid-template-columns:1fr}.c2-side img{display:none}}
@media (max-width:520px){.cf2 .row2{grid-template-columns:1fr}}

/* Kitchen table section */
.table{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.table figure{margin:0;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1400/788;max-width:100%}
.table figure img{display:block;width:100%;height:100%;object-fit:cover}
.table h2{font-size:clamp(1.75rem,3.4vw,2.5rem);margin-top:14px}
.table .does{display:grid;gap:14px;margin-top:26px}
.table .does > div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px 18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.table .does b{font-family:var(--f-display);font-size:1.12rem;display:block;margin-bottom:2px}
.table .does p{font-size:.95rem;color:var(--muted)}
.table .does .k{font:600 .7rem/1 var(--f-mono);letter-spacing:.06em;background:var(--volt);color:var(--on-volt);padding:.5em .6em;border-radius:6px;margin-top:3px}
@media (max-width:900px){.table{grid-template-columns:1fr;gap:30px}}

/* Knows grid */
.knows{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.know{background:var(--surface);padding:26px 24px;display:grid;gap:12px;align-content:start;min-width:0}
.know .k{font:600 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.know .v{font:800 2.1rem/1 var(--f-display);letter-spacing:-.02em}
.know .v small{font:500 .9rem var(--f-mono);color:var(--muted);letter-spacing:0;margin-left:4px}
.know p{font-size:.95rem;color:var(--muted)}
.epc{display:flex;gap:3px;align-items:flex-end;height:30px}
.epc i{flex:1;border-radius:3px;font:700 .68rem/1 var(--f-mono);font-style:normal;display:grid;place-items:center;color:#fff}
.epc i:nth-child(1){background:#008054;height:40%}.epc i:nth-child(2){background:#19b459;height:52%}.epc i:nth-child(3){background:#8dce46;height:100%;color:#11300a;outline:2px solid var(--ink);outline-offset:1px}
.epc i:nth-child(4){background:#ffd500;height:64%;color:#3a3000}.epc i:nth-child(5){background:#fcaa65;height:72%;color:#3a1d00}.epc i:nth-child(6){background:#ef8023;height:82%}.epc i:nth-child(7){background:#e9153b;height:92%}
.spark{display:block;width:100%;height:34px}
@media (max-width:860px){.knows{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.knows{grid-template-columns:1fr}}

/* Ask Gen demo */
.ask{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start}
.ask-qs{display:grid;gap:8px}
.ask-qs button{all:unset;cursor:pointer;display:block;padding:13px 16px;border-radius:12px;border:1px solid rgba(238,242,253,.16);font-weight:500;font-size:.98rem;color:var(--band-fg);transition:background .15s, border-color .15s}
.ask-qs button:hover{border-color:rgba(238,242,253,.4)}
.ask-qs button[aria-pressed="true"]{background:var(--volt);color:var(--on-volt);border-color:var(--volt)}
.ask-qs button:focus-visible{outline:3px solid var(--volt);outline-offset:2px}
.chat{background:var(--surface);color:var(--ink);border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden;min-width:0}
.chat-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.chat-top img{width:42px;height:42px;border-radius:50%;background:var(--blue-soft);object-fit:cover;object-position:50% 12%}
.chat-top b{font-family:var(--f-display);font-size:1.1rem}
.chat-top .status{font:500 .74rem var(--f-mono);color:var(--muted)}
.chat-body{padding:22px 18px;display:grid;gap:14px;min-height:400px;align-content:start}
.msg{max-width:88%;padding:12px 16px;border-radius:18px;font-size:.98rem;line-height:1.55}
.msg.user{justify-self:end;background:var(--blue);color:var(--on-blue);border-bottom-right-radius:5px}
.msg.gen{background:var(--surface-2);border-bottom-left-radius:5px}
.msg.gen p+p{margin-top:.6em}
.msg .act{display:inline-block;margin-top:10px;font:600 .82rem/1 var(--f-body);padding:.65em 1em;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--blue)}
.typing{display:inline-flex;gap:4px}.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.chat-foot{padding:12px 18px;border-top:1px solid var(--line);font:500 .74rem/1.4 var(--f-mono);color:var(--muted)}
@media (max-width:900px){.ask{grid-template-columns:1fr}.ask-qs{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ask-qs{grid-template-columns:1fr}.chat-body{min-height:0}}

/* Feature cards */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;display:grid;gap:12px;align-content:start;min-width:0}
.feat .tag{font:600 .72rem/1 var(--f-mono);color:var(--blue);letter-spacing:.08em;text-transform:uppercase}
.feat h3{font-size:1.4rem}
.feat p{color:var(--muted);font-size:.97rem}
@media (max-width:980px){.feats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feats{grid-template-columns:1fr}}

/* Score */
.score{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.donut-wrap{position:relative;max-width:420px;width:100%;margin:0 auto}
.donut-wrap svg{display:block;width:100%;height:auto}
.donut-mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center;align-content:center}
.donut-mid .big{font:800 clamp(3rem,8vw,4.6rem)/1 var(--f-display);letter-spacing:-.04em}
.donut-mid .of{font:500 .85rem var(--f-mono);color:var(--muted)}
.split{display:grid;gap:14px}
.split-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.split-row .sw{width:14px;height:44px;border-radius:5px}
.split-row h3{font-size:1.25rem}
.split-row p{font-size:.93rem;color:var(--muted)}
.split-row .pts{font:600 1.05rem var(--f-mono);text-align:right;white-space:nowrap}
.split-row .pts small{display:block;font-size:.7rem;color:var(--muted);font-weight:400}
.sw-blue{background:var(--blue)}.sw-volt{background:var(--volt)}
.bar100{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--surface-2);margin-top:6px}
.bar100 span{display:block;height:100%}
.bar-legend{display:flex;justify-content:space-between;font:500 .75rem var(--f-mono);color:var(--muted);margin-top:8px}
@media (max-width:900px){.score{grid-template-columns:1fr;gap:36px}}

/* Toggles (eco boost demo) */
.boost{display:grid;gap:10px;margin-top:22px}
.boost label{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font-weight:500}
.boost label .p{margin-left:auto;font:600 .85rem var(--f-mono);color:var(--muted)}
.boost input{appearance:none;width:42px;height:24px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);position:relative;flex-shrink:0;cursor:pointer;transition:background .15s}
.boost input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s, background .15s}
.boost input:checked{background:var(--volt);border-color:var(--volt)}
.boost input:checked::after{transform:translateX(18px);background:var(--on-volt)}

/* Gamification */
.game{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.board{background:var(--band-2);border-radius:20px;padding:22px;color:var(--band-fg)}
.board-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.board-h b{font-family:var(--f-display);font-size:1.2rem}
.board-h span{font:500 .72rem var(--f-mono);color:var(--band-muted);letter-spacing:.06em;text-transform:uppercase}
.rank{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:11px 12px;border-radius:12px;font-size:.96rem}
.rank+.rank{margin-top:4px}
.rank .pos{font:600 .9rem var(--f-mono);color:var(--band-muted)}
.rank .pt{font:600 .9rem var(--f-mono)}
.rank.me{background:var(--volt);color:var(--on-volt)}
.rank.me .pos{color:var(--on-volt)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.badge{font:600 .78rem/1 var(--f-mono);padding:.6em .85em;border-radius:8px;border:1px solid rgba(238,242,253,.2);color:var(--band-fg)}
.game-list{display:grid;gap:22px}
.game-list > div{display:grid;grid-template-columns:52px 1fr;gap:16px}
.game-list .n{font:800 1.6rem/1 var(--f-display);color:var(--volt)}
.game-list h3{font-size:1.3rem;margin-bottom:4px}
@media (max-width:900px){.game{grid-template-columns:1fr}}

/* Testimonials */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:18px;align-content:space-between}
.quote blockquote{margin:0;font-size:1.04rem;line-height:1.6}
.quote blockquote::before{content:"\201C";display:block;font:800 3.4rem/0.6 var(--f-display);color:var(--volt);margin-bottom:10px}
.quote .by{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.quote .by b{font-family:var(--f-display);font-size:1.1rem}
.quote .by span{font:600 .75rem var(--f-mono);color:var(--green);background:var(--green-soft);padding:.45em .7em;border-radius:6px}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;font:700 1.12rem/1.35 var(--f-display);padding:20px 0;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 1.5rem/1 var(--f-mono);color:var(--blue);flex-shrink:0}
.faq details[open] summary::after{content:"\2212"}
.faq details > div{padding:0 0 22px;color:var(--muted);display:grid;gap:10px;max-width:70ch}
.faq .new{font:600 .62rem/1 var(--f-mono);background:var(--volt);color:var(--on-volt);padding:.35em .5em;border-radius:5px;vertical-align:3px;margin-left:8px;letter-spacing:.05em}

/* CTA band */
.cta{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:var(--blue);color:var(--on-blue);border-radius:28px;padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}
.cta h2{font-size:clamp(1.75rem,3.4vw,2.5rem)}
.cta p{margin-top:12px;opacity:.88;max-width:52ch}
.cta img{width:200px;height:auto;margin:-40px 0 -70px;filter:drop-shadow(0 20px 26px rgba(0,0,0,.3))}
.store{display:inline-flex;flex-direction:column;justify-content:center;gap:2px;text-decoration:none;padding:.7em 1.25em;border-radius:12px;background:var(--on-blue);color:var(--blue);min-width:170px}
.store small{font:500 .68rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.store b{font:700 1.1rem/1.1 var(--f-display)}
.cta .btn-row{margin-top:24px}
@media (max-width:720px){.cta{grid-template-columns:1fr}.cta img{display:none}.cta .phone{display:none}}

/* Page heroes (inner pages) */
.phero{padding-block:clamp(36px,4.5vw,60px) clamp(24px,3vw,40px);background:radial-gradient(800px 400px at 90% 0%, color-mix(in srgb,var(--blue) 14%,transparent), transparent 70%)}
.phero h1{font-size:clamp(2.1rem,4.2vw,3.3rem);font-weight:800;letter-spacing:-.03em;margin-top:14px;max-width:22ch}
.phero .lede{margin-top:20px}

/* Gen page */
.gen-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.gen-hero .portrait{position:relative;display:grid;place-items:center}
.gen-hero .portrait::before{content:"";position:absolute;width:86%;aspect-ratio:1;border-radius:50%;background:var(--volt);top:6%}
.gen-hero .portrait img{position:relative;width:min(440px,100%);height:auto}
@media (max-width:860px){.gen-hero{grid-template-columns:1fr}.gen-hero .portrait{max-width:380px;margin:0 auto}}
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.topic{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;min-width:0}
.topic h3{font-size:1.25rem;margin-bottom:12px}
.topic ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.topic li{font-size:.95rem;padding:9px 12px;border-radius:10px;background:var(--surface-2)}
@media (max-width:900px){.topics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.topics{grid-template-columns:1fr}}
.assess{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.report{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;align-content:start;min-width:0}
.report-h{padding:22px 24px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line)}
.report-h h3{font-size:1.45rem}
.report-h .sample{font:600 .66rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:.45em .6em;border-radius:6px;white-space:nowrap}
.report-b{padding:22px 24px;display:grid;gap:18px}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-radius:12px;overflow:hidden}
.kv div{background:var(--surface-2);padding:14px 16px}
.kv .k{font:500 .7rem/1.2 var(--f-mono);color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.kv .v{font:800 1.5rem/1.15 var(--f-display);margin-top:6px}
.report-b p{font-size:.93rem;color:var(--muted)}
.panels{display:grid;grid-template-columns:repeat(11,1fr);gap:3px;padding:10px;background:var(--surface-2);border-radius:10px}
.panels i{aspect-ratio:1/1.5;background:var(--blue);border-radius:2px;opacity:.9}
.spf{display:grid;gap:8px}
.spf div{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;font:500 .85rem var(--f-mono)}
.spf span.b{display:block;height:12px;border-radius:6px;background:var(--green)}
@media (max-width:860px){.assess{grid-template-columns:1fr}}
.trustgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(238,242,253,.12);border-radius:var(--r);overflow:hidden}
.trustgrid div{background:var(--band);padding:28px 24px;display:grid;gap:10px;align-content:start}
.trustgrid h3{font-size:1.25rem;color:var(--band-fg)}
.trustgrid p{color:var(--band-muted);font-size:.96rem}
@media (max-width:860px){.trustgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trustgrid{grid-template-columns:1fr}}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch}
.flow .col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:10px;align-content:start;min-width:0}
.flow .col h3{font-size:1.15rem}
.flow .col ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:.93rem;color:var(--muted)}
.flow .col li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:9px;vertical-align:2px}
.flow .col.genc{background:var(--blue);color:var(--on-blue);border-color:transparent;place-items:center;text-align:center}
.flow .col.genc img{width:110px;height:auto}
.flow .col.genc p{opacity:.85;font-size:.93rem}
.flow .arrow{align-self:center;font:600 1.4rem var(--f-mono);color:var(--muted)}
@media (max-width:900px){.flow{grid-template-columns:1fr}.flow .arrow{transform:rotate(90deg);justify-self:center}}

/* Features page */
.flist{display:grid;gap:18px}
.frow{display:grid;grid-template-columns:90px 1fr 1fr;gap:28px;padding:34px 0;border-top:1px solid var(--line);align-items:start}
.frow > *{min-width:0}
.frow .ix{font:600 .8rem var(--f-mono);color:var(--muted);letter-spacing:.08em;padding-top:8px}
.frow h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.frow p{color:var(--muted)}
.frow ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.frow li{padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;font-size:.96rem}
.frow .note{font:500 .8rem var(--f-mono);color:var(--muted);margin-top:12px}
@media (max-width:860px){.frow{grid-template-columns:1fr;gap:14px}.frow .ix{padding-top:0}}
.chartcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;min-width:0}
.chartcard .ch{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.chartcard .ch b{font-family:var(--f-display);font-size:1.2rem}
.chartcard .ch span{font:500 .75rem var(--f-mono);color:var(--muted)}
.chartbox{overflow-x:auto}
.chartbox svg{display:block;width:100%;min-width:300px;height:auto}
.tariffs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tariff{border-radius:var(--r);padding:26px;border:1px solid var(--line);background:var(--surface);display:grid;gap:10px;align-content:start}
.tariff.promise{background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.tariff h3{font-size:1.35rem}
.tariff .big{font:800 2.6rem/1 var(--f-display);letter-spacing:-.03em;color:var(--green)}
@media (max-width:760px){.tariffs{grid-template-columns:1fr}}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:grid;gap:10px;align-content:start}
.step .sn{font:800 2rem/1 var(--f-display);color:var(--blue);letter-spacing:-.03em}
.step h3{font-size:1.3rem}
.step p{color:var(--muted);font-size:.96rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.three h3{font-size:1.35rem;margin-bottom:10px}
.three p{color:var(--muted)}
.three .tagline{font-weight:600;color:var(--ink);margin-top:10px}
.band .three p{color:var(--band-muted)}.band .three .tagline{color:var(--volt)}
@media (max-width:860px){.three{grid-template-columns:1fr}}

/* About */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.about-split p+p{margin-top:1em}
.about-split .bigq{font:800 clamp(1.8rem,3.6vw,2.7rem)/1.12 var(--f-display);letter-spacing:-.02em}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.value{padding:28px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.value .vn{font:600 .75rem var(--f-mono);color:var(--blue);letter-spacing:.08em}
.value h3{font-size:1.45rem}
.cei{border-left:4px solid var(--volt);padding:6px 0 6px 24px;font-size:1.15rem;max-width:62ch}
.cei b{font-family:var(--f-display)}
@media (max-width:860px){.about-split,.values{grid-template-columns:1fr;gap:28px}}

/* Blogs */
.featured{display:grid;grid-template-columns:1.2fr .8fr;background:var(--band);color:var(--band-fg);border-radius:24px;overflow:hidden;text-decoration:none}
.featured .tx{padding:clamp(26px,4vw,48px);display:grid;gap:14px;align-content:center}
.featured h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.featured p{color:var(--band-muted)}
.featured .im{background:radial-gradient(circle at 50% 60%, var(--blue) 0 45%, var(--band-2) 45.5%);display:grid;place-items:end center;min-height:280px}
.featured .im img{width:min(300px,80%);height:auto;margin-bottom:-6px}
.featured .go{font-weight:600;color:var(--volt)}
@media (max-width:760px){.featured{grid-template-columns:1fr}}
.bloghead{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap;margin:56px 0 24px}
.bloghead h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:0 16px;min-width:min(340px,100%)}
.search input{border:0;background:transparent;font:500 1rem var(--f-body);color:var(--ink);padding:.8em 0;width:100%;outline:none}
.search:focus-within{border-color:var(--blue)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 20px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:10px;text-decoration:none;min-width:0;transition:border-color .15s, transform .15s, box-shadow .15s}
.post:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 10px 28px -14px rgba(10,30,70,.35)}
.post .pimg{display:block;aspect-ratio:16/10;border-radius:calc(var(--r) - 6px);overflow:hidden;background:var(--surface-2);margin-bottom:6px}
.post .pimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.post:hover .pimg img{transform:scale(1.04)}
.post .d,.post h3,.post p,.post .tags{margin-left:10px;margin-right:10px}
.post .d{font:500 .74rem var(--f-mono);color:var(--muted);letter-spacing:.04em}
.post h3{font-size:1.18rem;line-height:1.2}
.post p{font-size:.92rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post .tags{display:flex;flex-wrap:wrap;gap:6px;grid-row:-2}
.post .tags span{font:500 .68rem/1 var(--f-mono);padding:.45em .6em;border-radius:6px;background:var(--surface-2);color:var(--muted)}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.posts{grid-template-columns:1fr}}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:34px}
.pager button{font:600 .9rem var(--f-mono);min-width:42px;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.pager button[aria-current="page"]{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}
.pager button:disabled{opacity:.4;cursor:default}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.cinfo{display:grid;gap:16px}
.cbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.cbox .k{font:600 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cbox .v{font:700 1.15rem/1.4 var(--f-display);user-select:all;word-break:break-word}
.copy{margin-top:12px;font:600 .82rem var(--f-body);padding:.6em 1em;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer}
.genask{display:grid;grid-template-columns:80px 1fr;gap:16px;align-items:center;background:var(--volt-soft);border:1px solid color-mix(in srgb,var(--volt) 50%,transparent);border-radius:var(--r);padding:18px}
.genask img{width:80px;height:auto}
form.cf{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,4vw,36px);display:grid;gap:16px}
.cf .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
.cf label span.req{color:var(--blue)}
.cf input,.cf select,.cf textarea{font:400 1rem var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.8em .9em;width:100%}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.cf textarea{min-height:140px;resize:vertical}
.cf .note{font-size:.88rem;color:var(--muted)}
.cf .ok{padding:14px 16px;border-radius:10px;background:var(--green-soft);font-size:.95rem}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
@media (max-width:520px){.cf .row2{grid-template-columns:1fr}}

/* Footer */
footer.site{background:var(--band);color:var(--band-fg);padding-block:64px 32px;margin-top:0}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.fgrid h4{font:600 .75rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--band-muted);margin-bottom:14px}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fgrid a{text-decoration:none;color:var(--band-fg);opacity:.9}
.fgrid a:hover{opacity:1;text-decoration:underline}
.fgrid p{color:var(--band-muted);font-size:.93rem}
footer .brand{color:var(--band-fg)}
footer .brand b{color:var(--volt)}
footer .tag{font:700 1.2rem/1.35 var(--f-display);margin:18px 0 12px;max-width:30ch}
.fbase{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(238,242,253,.14);margin-top:44px;padding-top:22px;font-size:.85rem;color:var(--band-muted)}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

.sample-note{font:500 .76rem/1.45 var(--f-mono);color:var(--muted);margin-top:14px}
.band .sample-note{color:var(--band-muted)}
.center{text-align:center}
.mt{margin-top:40px}

/* ===== final overrides: calmer labels ===== */
.frow{grid-template-columns:1fr 1fr}
.frow .ix{display:none}
@media (max-width:860px){.frow{grid-template-columns:1fr}}
body .eyebrow{font:600 .92rem/1.2 var(--f-body);letter-spacing:.01em;text-transform:none}
body .vid .eyebrow,body .hero2 .eyebrow{color:var(--volt)}
body .sample-note{font:italic 400 .84rem/1.45 var(--f-body);letter-spacing:0;text-transform:none}
body .know .k,body .acard .ak,body .gtile .k,body .ccard .type,body .rank-right .k,body .sf .k,body .feat .tag,body .house figcaption span,body .tcard .lab span,body .tcard .basis .k,body .plan .when span,body .report-h .sample,body .kv .k,body .fgrid h4,body .board-h span,body .field-cap,body .plegend,body .thread .tag,body .chartcard .ch span{font-family:var(--f-body);text-transform:none;letter-spacing:.01em;font-weight:600}
body .acard .looks,body .ccard .meta,body .chips span,body .know .v small{font-family:var(--f-body);letter-spacing:0}
body .frow .ix{font-family:var(--f-display);font-size:1.1rem;color:var(--blue)}
body .qrs{flex-wrap:nowrap;gap:12px}
body .qrbox{width:auto;flex:1;padding:12px}
body .qrbox .qr{width:100%;height:auto;max-width:130px;aspect-ratio:1}
.c2-side .gh{display:flex;gap:14px;align-items:center}
.c2-side .gh img{position:static;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--band-2);opacity:1}

/* ===== logo ===== */
.brand-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.brand-logo img{display:block;height:44px;width:auto}
.brand-logo .on-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand-logo .on-light{display:none}:root:not([data-theme="light"]) .brand-logo .on-dark{display:block}}
:root[data-theme="dark"] .brand-logo .on-light{display:none}
:root[data-theme="dark"] .brand-logo .on-dark{display:block}
@media (max-width:460px){.brand-logo img{height:34px}}
.foot-logo img{display:block;width:190px;height:auto}

/* ===== paper bill ===== */
:root{--sheet:#FFFFFF;--sheet-ink:#1E2433;--sheet-muted:#687085;--sheet-line:#E3E6EE;--sheet-tint:#F4F6FA;--hl:#FFE36B;--q:#E5534B}
.ba2{display:grid;grid-template-columns:1.05fr 120px .95fr;gap:20px;align-items:center}
.paper{position:relative;background:var(--sheet);color:var(--sheet-ink);border-radius:6px;padding:28px 28px 22px;transform:rotate(-1.4deg);box-shadow:0 2px 0 rgba(0,0,0,.04),0 30px 50px -28px rgba(27,22,0,.55),0 12px 20px -16px rgba(27,22,0,.35);font-size:.82rem;line-height:1.45;min-width:0}
.paper::after{content:"";position:absolute;right:0;top:0;width:34px;height:34px;background:linear-gradient(225deg,var(--volt) 50%,var(--sheet-tint) 50%);border-bottom-left-radius:6px;box-shadow:-2px 2px 4px rgba(0,0,0,.08)}
.paper .ph{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--sheet-line)}
.paper .sup{display:flex;align-items:center;gap:8px;font:800 1rem var(--f-display);letter-spacing:-.01em}
.paper .sup i{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#6B7591,#2E3445);display:block}
.paper .ref{text-align:right;color:var(--sheet-muted);font-size:.74rem}
.paper h3{font:800 1.5rem var(--f-display);margin:16px 0 12px;color:var(--sheet-ink)}
.paper .due{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--sheet-tint);border-radius:8px;padding:12px 14px}
.paper .due span{display:block;font-size:.74rem;color:var(--sheet-muted)}
.paper .due b{font:800 1.9rem/1 var(--f-display);letter-spacing:-.02em}
.paper .due .dd{text-align:right;font-size:.74rem;color:var(--sheet-muted)}
.paper h6{font:700 .78rem var(--f-body);margin:16px 0 6px;color:var(--sheet-ink)}
.paper table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.paper th{font-weight:600;color:var(--sheet-muted);font-size:.7rem;text-align:left;padding:4px 0;border-bottom:1px solid var(--sheet-line)}
.paper td{padding:5px 0;border-bottom:1px solid var(--sheet-line)}
.paper th:last-child,.paper td:last-child{text-align:right}
.paper tr.tot td{font-weight:700;border-bottom:0;padding-top:8px}
.paper .conv{margin-top:8px;padding:8px 10px;border-radius:6px;background:var(--sheet-tint);font-size:.74rem;color:var(--sheet-muted)}
.paper mark{background:linear-gradient(transparent 45%,var(--hl) 45%);color:inherit;padding:0 1px;position:relative}
.paper .qm{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--q);color:#fff;font:800 .68rem var(--f-body);margin-left:3px;vertical-align:1px}
.paper .fine{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;margin-top:14px}
.paper .lines i{display:block;height:5px;border-radius:3px;background:var(--sheet-line);margin-top:5px}
.paper .barcode{width:120px;height:30px;background:repeating-linear-gradient(90deg,var(--sheet-ink) 0 2px,transparent 2px 4px,var(--sheet-ink) 4px 5px,transparent 5px 8px,var(--sheet-ink) 8px 11px,transparent 11px 12px)}
.paper .pg{font-size:.68rem;color:var(--sheet-muted);text-align:right;margin-top:4px}
.ba2-mid{display:grid;justify-items:center;gap:8px;text-align:center}
.ba2-mid img{width:110px;height:auto;filter:drop-shadow(0 14px 16px rgba(27,22,0,.3))}
.ba2-mid span{font:700 .9rem var(--f-body);color:var(--on-volt)}
.genbill{background:var(--band);color:var(--band-fg);border-radius:22px;padding:24px;display:grid;gap:16px;box-shadow:0 30px 50px -28px rgba(27,22,0,.7);min-width:0}
.genbill .who{display:flex;gap:10px;align-items:center;font-size:.9rem;color:var(--band-muted)}
.genbill .who img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--band-2)}
.genbill .who b{color:var(--band-fg)}
.genbill h4{font:800 clamp(1.5rem,2.6vw,1.9rem)/1.1 var(--f-display);letter-spacing:-.02em}
.genbill h4 em{font-style:normal;color:var(--volt)}
.genbill > p{color:var(--band-muted);font-size:.98rem}
.gbars{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end;height:150px;padding:0 6px;border-bottom:1px solid rgba(238,242,253,.18)}
.gbars div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.gbars i{display:block;width:70%;max-width:90px;border-radius:10px 10px 3px 3px}
.gbars b{font:800 1rem var(--f-display)}
.gbars small{font-size:.75rem;color:var(--band-muted)}
.glabels{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center;font-size:.8rem;color:var(--band-muted);margin-top:-8px}
.xlate{display:grid;gap:8px}
.xlate h5{font:700 .9rem var(--f-body);margin:0;color:var(--band-fg)}
.xlate div{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--band-2);font-size:.9rem;color:var(--band-muted)}
.xlate div b{font:700 .82rem var(--f-body);color:var(--on-volt);background:var(--volt);padding:.3em .55em;border-radius:6px;white-space:nowrap}
@media (max-width:900px){.ba2{grid-template-columns:1fr}.ba2-mid{grid-auto-flow:column;align-items:center}.ba2-mid img{width:70px}.ba2-mid{justify-content:center}.paper{transform:none}}
@media (max-width:460px){.paper{padding:20px 16px 16px}.paper .ph{flex-direction:column}.paper .ref{text-align:left}}

/* ===== real consumption ===== */
.use{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.usew{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow);display:grid;gap:14px;min-width:0}
.seg{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:999px;flex-wrap:wrap}
.seg button{all:unset;cursor:pointer;flex:1;text-align:center;font:600 .86rem/1 var(--f-body);padding:.7em .9em;border-radius:999px;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--blue);color:var(--on-blue)}
.seg button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.seg.fuel button[data-v="both"][aria-pressed="true"]{background:linear-gradient(90deg,var(--volt),var(--blue));color:var(--on-blue)}
.urow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.usum{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:14px;overflow:hidden}
.usum div{background:var(--surface-2);padding:12px 14px}
.usum span{display:block;font-size:.78rem;color:var(--muted)}
.usum b{font:800 1.3rem/1.15 var(--f-display);font-variant-numeric:tabular-nums}
.usum small{display:block;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.uhead{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.92rem}
.uhead span{color:var(--muted);font-weight:500}
.uchart svg{display:block;width:100%;height:auto}
.ulegend{display:flex;gap:16px;font-size:.82rem;color:var(--muted)}
.ulegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.yoy{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.yoy div{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--green-soft);font-size:.86rem}
.yoy b{font:800 1.15rem var(--f-display);color:var(--green)}
.use-points{display:grid;gap:12px;margin-top:22px}
.use-points div{display:grid;grid-template-columns:auto 1fr;gap:12px}
.use-points i{width:10px;height:10px;border-radius:3px;background:var(--blue);margin-top:.5em}
@media (max-width:960px){.use{grid-template-columns:1fr}}
@media (max-width:520px){.urow,.yoy{grid-template-columns:1fr}.usum b{font-size:1.05rem}}

/* ===== contact spam check ===== */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.cf2 .check{display:grid;grid-template-columns:1fr 140px;gap:12px;align-items:end}
.direct{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.direct b{color:var(--ink);user-select:all}

.paper table.acct td{border-bottom:1px dashed var(--sheet-line)}
.paper .due span.qm{display:inline-grid}
.paper .due{margin-top:10px}
.paper h6{padding-top:10px;border-top:2px solid var(--sheet-ink);margin-top:18px}
:root{--blue-g:#4F6FAF;--volt-g:#C9A21A}
.sbars{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:16px;align-items:end;height:190px}
.sbars > div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.sbars b{font:800 1.05rem var(--f-display)}
.sbars small{font-size:.78rem;color:var(--band-muted)}
.stk{display:flex;flex-direction:column-reverse;width:72%;max-width:90px;border-radius:10px 10px 3px 3px;overflow:hidden}
.stk i{display:block;min-height:4px}
.skey{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-self:center;font-size:.88rem;color:var(--band-muted)}
.skey li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.skey i{width:12px;height:12px;border-radius:3px;display:inline-block}
.skey b{color:var(--band-fg)}
@media (max-width:520px){.sbars{grid-template-columns:1fr 1fr;height:auto}.sbars > div{height:170px}.skey{grid-column:1/-1;grid-auto-flow:column}}

/* ===== net zero ===== */
.nzband{background:var(--green-band);color:#EFFFF5}
:root{--green-band:#0B3B2A;--green-band-2:#114B37;--leaf:#2EE08A}
.nzband .eyebrow{color:var(--leaf)!important}
.nzband .lede{color:#B9E4CD}
.nzgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.nzstats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nzstat{background:var(--green-band-2);border-radius:18px;padding:20px;display:grid;gap:6px;align-content:start}
.nzstat b{font:800 clamp(1.9rem,3.6vw,2.6rem)/1 var(--f-display);letter-spacing:-.03em;color:var(--leaf)}
.nzstat span{font-size:.93rem;color:#CDEBDB}
.nzstat small{font-size:.75rem;color:#8FC2A8}
.nzband .btn-volt{margin-top:24px}
.timeline{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:10px}
.timeline::before{content:"";position:absolute;left:4%;right:4%;top:22px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--line),var(--green))}
.tl{position:relative;display:grid;gap:8px;align-content:start;text-align:center;justify-items:center}
.tl .dot{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:800 .8rem var(--f-display);background:var(--surface);border:3px solid var(--green);color:var(--ink);position:relative;z-index:1}
.tl.now .dot{background:var(--volt);border-color:var(--volt);color:var(--on-volt)}
.tl.goal .dot{background:var(--green);color:#fff}
.tl b{font:800 1.15rem var(--f-display)}
.tl p{font-size:.86rem;color:var(--muted)}
@media (max-width:900px){.timeline{grid-template-columns:1fr 1fr;row-gap:28px}.timeline::before{display:none}}
.emis{display:grid;gap:14px}
.emis .row{display:grid;grid-template-columns:170px 1fr auto;gap:14px;align-items:center;font-size:.95rem}
.emis .t{height:22px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.emis .t i{display:block;height:100%;border-radius:6px}
.emis .v{font:700 .95rem var(--f-display);font-variant-numeric:tabular-nums;min-width:90px;text-align:right}
@media (max-width:560px){.emis .row{grid-template-columns:1fr auto}.emis .t{grid-column:1/-1;order:3}}
.align{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.align th,.align td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem}
.align th{font:700 .85rem var(--f-body);color:var(--muted);background:var(--surface-2)}
.align tr:last-child td{border-bottom:0}
.align td:first-child{font-weight:600;width:38%}
.align td b{color:var(--green)}
.tablewrap{overflow-x:auto}
.carbon{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:var(--band);color:var(--band-fg);border-radius:22px;padding:24px}
.carbon .ring{width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--leaf) 0 62%, var(--band-2) 62% 100%);display:grid;place-items:center}
.carbon .ring div{width:92px;height:92px;border-radius:50%;background:var(--band);display:grid;place-items:center;text-align:center}
.carbon .ring b{font:800 1.6rem/1 var(--f-display)}
.carbon .ring small{font-size:.7rem;color:var(--band-muted)}
.carbon p{color:var(--band-muted)}
.inv{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.inv div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:6px;align-content:start}
.inv b{font:800 1.9rem/1 var(--f-display);letter-spacing:-.02em;color:var(--blue)}
.inv span{font-size:.92rem}
.inv small{font-size:.76rem;color:var(--muted)}
@media (max-width:900px){.nzgrid{grid-template-columns:1fr}.inv{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.nzstats,.inv{grid-template-columns:1fr}.carbon{grid-template-columns:1fr;justify-items:start}}
.srcs{font-size:.84rem;color:var(--muted);display:grid;gap:4px;margin-top:20px}
.srcs a{color:var(--blue)}

header.site .wrap{max-width:1340px}
/* ===== report to installation ===== */
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:j;margin-bottom:34px}
.jstep{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:6px;align-content:start;position:relative}
.jstep .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 1rem var(--f-display);background:var(--blue);color:var(--on-blue)}
.jstep.done .n{background:var(--green);color:#fff}
.jstep b{font:700 1.08rem var(--f-display)}
.jstep span{font-size:.9rem;color:var(--muted)}
.rgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.sreport{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.sreport .top{position:relative}
.sreport .top img{display:block;width:100%;height:210px;object-fit:cover}
.sreport .top .tag{position:absolute;left:14px;top:14px;background:var(--band);color:var(--band-fg);font:600 .8rem var(--f-body);padding:.5em .8em;border-radius:999px}
.sreport .top .api{position:absolute;right:14px;bottom:14px;background:rgba(10,24,56,.82);color:#EEF2FD;font:500 .76rem var(--f-body);padding:.5em .8em;border-radius:8px}
.sreport .body{padding:20px;display:grid;gap:16px}
.sreport h3{font-size:1.4rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:12px;overflow:hidden}
.kpis div{background:var(--surface-2);padding:12px}
.kpis span{display:block;font-size:.74rem;color:var(--muted)}
.kpis b{font:800 1.2rem var(--f-display)}
.roofbars{display:grid;gap:8px}
.steps2{display:flex;flex-wrap:wrap;gap:8px}
.steps2 span{font-size:.82rem;font-weight:600;padding:.5em .8em;border-radius:999px;background:var(--green-soft);color:var(--ink)}
.side2{display:grid;gap:16px}
.grantcard{background:var(--green-band);color:#EFFFF5;border-radius:22px;padding:22px;display:grid;gap:10px}
.grantcard .big{font:800 2.6rem/1 var(--f-display);color:var(--leaf);letter-spacing:-.03em}
.grantcard p{color:#CDEBDB;font-size:.94rem}
.grantcard small{color:#8FC2A8;font-size:.78rem}
.installers{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;display:grid;gap:12px}
.inst{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--surface-2)}
.inst .av{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font:800 .9rem var(--f-display);background:var(--blue);color:var(--on-blue)}
.inst b{font:700 1rem var(--f-display);display:block}
.inst span{font-size:.8rem;color:var(--muted)}
.inst .vet{font:700 .72rem var(--f-body);color:var(--green);background:var(--green-soft);padding:.35em .55em;border-radius:6px;margin-left:6px}
.inst .bk{font:600 .84rem var(--f-body);padding:.6em .9em;border-radius:999px;background:var(--blue);color:var(--on-blue);white-space:nowrap}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slots span{font-size:.82rem;font-weight:600;padding:.5em .75em;border-radius:10px;border:1px solid var(--line)}
.slots span.on{background:var(--volt);border-color:var(--volt);color:var(--on-volt)}
.grants{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grant{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:8px;align-content:start}
.grant .amt{font:800 2rem/1 var(--f-display);color:var(--green);letter-spacing:-.02em}
.grant h3{font-size:1.2rem}
.grant p{font-size:.92rem;color:var(--muted)}
.grant a{font-size:.85rem;color:var(--blue);font-weight:600}
@media (max-width:1000px){.journey{grid-template-columns:1fr 1fr}.rgrid,.grants{grid-template-columns:1fr}}
@media (max-width:520px){.journey{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}}

.tour{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted)}
.tour .tdot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.tour.off .tdot{background:var(--muted);box-shadow:none}
.tour #tourtxt{flex:1;min-width:0;font-weight:600;color:var(--ink)}
.tour button{all:unset;cursor:pointer;font:600 .82rem var(--f-body);padding:.45em .85em;border-radius:999px;border:1px solid var(--line);color:var(--blue)}
.tour button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tbar{height:3px;border-radius:2px;background:var(--surface-2);overflow:hidden;margin-top:-6px}
.tbar i{display:block;height:100%;width:0;background:var(--blue)}
.uchart rect.ub{transform-box:fill-box;transform-origin:50% 100%;animation:ugrow .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes ugrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.seg button{transition:background .25s,color .25s}

.ovgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ov{display:grid;gap:8px;align-content:start;padding:24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:border-color .15s,transform .15s}
.ov:hover{border-color:var(--blue);transform:translateY(-3px)}
.ov .ok{font:600 .82rem var(--f-body);color:var(--blue)}
.ov b{font:700 1.25rem/1.2 var(--f-display)}
.ov > span:not(.ok){font-size:.94rem;color:var(--muted)}
.ov em{font-style:normal;font-weight:600;font-size:.88rem;color:var(--ink);margin-top:4px}
@media (max-width:900px){.ovgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ovgrid{grid-template-columns:1fr}}

.askhint{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem;color:var(--volt);margin:0 0 12px}
.tapdot{width:12px;height:12px;border-radius:50%;background:var(--volt);flex-shrink:0;animation:tap 1.6s ease-out infinite}
@keyframes tap{0%{box-shadow:0 0 0 0 rgba(255,203,18,.7)}100%{box-shadow:0 0 0 14px rgba(255,203,18,0)}}
.asktour{all:unset;cursor:pointer;font:600 .8rem var(--f-body);padding:.45em .85em;border-radius:999px;border:1px solid var(--line);color:var(--blue);white-space:nowrap}
.asktour:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.composer input.typing-in{border-color:var(--blue)}

/* CTA phone mockup */
.cta{grid-template-columns:1fr auto;padding-block:clamp(32px,5vw,56px)}
.mock{position:relative;width:300px;height:400px;display:flex;justify-content:flex-end;align-items:center}
.device{position:relative;width:196px;height:400px;border-radius:40px;background:#0B1020;padding:8px;box-shadow:0 0 0 2px rgba(255,255,255,.18) inset,0 30px 60px -20px rgba(0,0,0,.55),0 10px 20px -10px rgba(0,0,0,.35);transform:rotate(5deg)}

.device .screen{width:100%;height:100%;border-radius:32px;overflow:hidden;background:#fff}
.device .screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.mock-gen{position:absolute;left:-6px;bottom:-14px;width:150px;height:auto;z-index:3;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.cta .mock img{margin:0}
@media (max-width:900px){.mock{width:240px;height:340px}.device{width:166px;height:340px}.mock-gen{width:120px}}
@media (max-width:720px){.mock{display:none}}

.cta .mock{width:330px}
.cta .mock img.mock-gen{width:128px;margin:0;left:0;bottom:-6px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.cta .device .screen img{width:100%;height:100%;margin:0;filter:none}
@media (max-width:900px){.cta .mock{width:260px}.cta .mock img.mock-gen{width:100px}}

/* ===== Round 16: hero phone, setup, trust, nav menu ===== */
.phero + section.tight{padding-top:12px}
.step{padding:22px}
.hp-top small{white-space:nowrap}
.hero2-gen > img{position:relative;width:min(420px,88%);height:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.35));animation:bob 5s ease-in-out infinite}
.hero3{gap:0}
.hero3 > img.h3-gen{width:min(330px,56%);margin-right:-70px;z-index:1}
.hphone{position:relative;z-index:2;margin:0 0 34px;width:252px;flex-shrink:0;background:#0B1020;border-radius:38px;padding:8px;box-shadow:0 0 0 2px rgba(255,255,255,.16) inset,0 34px 60px -24px rgba(0,0,0,.7)}
.hp-screen{background:#F3F6FC;border-radius:31px;overflow:hidden;color:#0A1838;font-family:var(--f-body);display:flex;flex-direction:column;min-height:470px}
.hp-top{display:flex;align-items:center;gap:9px;padding:20px 14px 10px;background:#fff;border-bottom:1px solid #E1E7F3}
.hp-top img{width:34px;height:34px;border-radius:50%;background:#DCE6FF}
.hp-top b{display:block;font:700 .95rem/1.1 var(--f-display)}
.hp-top small{font-size:.7rem;color:#46557A}
.hp-s{margin-left:auto;font:600 .62rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:#FFF3C2;color:#5A4500;padding:3px 7px;border-radius:6px}
.hp-q{align-self:flex-end;margin:14px 12px 8px 40px;background:#1D4ED8;color:#fff;font-size:.8rem;line-height:1.35;padding:9px 12px;border-radius:14px 14px 4px 14px}
.hp-a{margin:4px 12px;background:#fff;border:1px solid #E1E7F3;border-radius:14px 14px 14px 4px;padding:11px 12px;display:grid;gap:7px}
.hp-a b{font:700 .86rem/1.25 var(--f-display)}
.hp-a p{margin:0;font-size:.74rem;line-height:1.4;color:#46557A}
.hp-bars{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:end;height:88px;padding-top:4px}
.hp-bars > div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%}
.hp-bars .hb{width:28px;display:flex;flex-direction:column;border-radius:5px;overflow:hidden}
.hp-bars small{font-size:.66rem;color:#46557A}
.hp-bars ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;align-self:center;font-size:.68rem;color:#46557A}
.hp-bars li{display:flex;align-items:center;gap:5px}
.hp-bars li i{width:8px;height:8px;border-radius:2px;display:inline-block}
.hp-next{font-size:.72rem;font-weight:600;color:#0C7A3B;background:#D7F5E3;border-radius:8px;padding:6px 8px;line-height:1.3}
.hp-in{margin:auto 12px 14px;background:#fff;border:1px solid #D5DDEE;border-radius:999px;padding:9px 14px;font-size:.76rem;color:#7A879F}
@media (max-width:860px){.hero3{justify-content:center}.hero3 > img.h3-gen{width:min(230px,44%);margin-right:-46px}.hphone{width:232px;margin-bottom:24px}.hp-screen{min-height:440px}}
@media (max-width:420px){.hero3 > img.h3-gen{width:46%;margin-right:-34px}.hphone{width:206px}.hp-s{display:none}}
.does3{display:grid;gap:16px;margin-top:22px}
.does3 > div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.does3 .n{width:30px;height:30px;border-radius:50%;background:var(--volt);color:var(--on-volt);display:grid;place-items:center;font-weight:600;font-size:.9rem}
.does3 b{font:700 1.1rem/1.2 var(--f-display);color:var(--band-fg)}
.does3 p{margin:4px 0 0 !important;font-size:.98rem !important;color:var(--band-muted)}
.setupqa{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.setupqa > div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.setupqa h3{font-size:1.02rem;margin-bottom:6px}
.setupqa p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}
.startcta{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:26px}
.startcta p{margin:0;color:var(--muted)}
.startcta a:not(.store-b){color:var(--blue);font-weight:600}
@media (max-width:1000px){.setupqa{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.setupqa{grid-template-columns:1fr}}
.truststrip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.truststrip > div{border-top:3px solid var(--blue);background:var(--surface);border-radius:0 0 14px 14px;padding:16px 18px;display:grid;gap:6px}
.truststrip b{font:700 1rem var(--f-display)}
.truststrip span{font-size:.9rem;color:var(--muted)}
@media (max-width:820px){.truststrip{grid-template-columns:1fr}}
.nav-more{position:relative}
.nav-more > button{all:unset;cursor:pointer;font-weight:600;font-size:.9rem;padding:.55em .6em;border-radius:999px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-more > button:hover,.nav-more.cur > button{color:var(--ink);background:var(--surface-2)}
.nav-more > button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nav-more .car{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nm-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px;min-width:180px;box-shadow:var(--shadow);flex-direction:column;z-index:60}
.nav-more.open .nm-menu{display:flex}
.nm-menu a{border-radius:10px !important}
@media (max-width:1100px){header.site.open .nav-more > button{display:none}header.site.open .nm-menu{display:flex;position:static;border:0;box-shadow:none;padding:0;min-width:0;background:none}header.site.open .nm-menu a{padding:.85em 1em;font-size:1.05rem}}
.sf.lead{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}

.bcats{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:34px}
.bc{all:unset;box-sizing:border-box;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 12px;display:grid;justify-items:center;align-content:start;gap:6px;text-align:center;transition:border-color .15s,transform .15s}
.bc:hover{border-color:var(--blue);transform:translateY(-2px)}
.bc:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bc .medal{width:46px;height:46px}
.bc .medal svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bc b{font:700 .92rem/1.2 var(--f-display);color:var(--ink);margin-top:2px}
.bc-n{font-size:.8rem;color:var(--muted)}
.bc-p{font-style:normal;font:700 .8rem var(--f-mono);background:var(--volt);color:var(--on-volt);border-radius:7px;padding:3px 8px}
.bc small{font-size:.74rem;color:var(--muted);line-height:1.3}
.bmore{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px}
.bmore span{font-size:.85rem;color:var(--muted)}
#ball{scroll-margin-top:90px}
#ball .bfilters{margin-top:26px}
@media (max-width:1100px){.bcats{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.bcats{grid-template-columns:repeat(2,1fr)}}

.proof{background:var(--surface);border-bottom:1px solid var(--line)}
.proof-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof-row > div{padding:22px 20px;display:grid;gap:3px;border-left:1px solid var(--line)}
.proof-row > div:first-child{border-left:0;padding-left:0}
.proof-row b{font:700 1.02rem var(--f-display);color:var(--ink)}
.proof-row span{font-size:.88rem;color:var(--muted)}
@media (max-width:860px){.proof-row{grid-template-columns:1fr 1fr}.proof-row > div{padding:16px 14px}.proof-row > div:nth-child(3){border-left:0;padding-left:0}.proof-row > div:nth-child(n+3){border-top:1px solid var(--line)}}

/* hero v18: Gen and phone side by side */
.hero2-grid{grid-template-columns:1.1fr .9fr}
.hero3::before{display:none}
.hero3{display:flex;align-items:flex-end;justify-content:center;gap:28px}
.h3-genwrap{position:relative;display:flex;justify-content:center;align-items:flex-end;flex:0 0 auto}
.h3-genwrap::before{content:"";position:absolute;bottom:0;left:50%;width:125%;aspect-ratio:1;transform:translate(-50%,24%);border-radius:50%;background:var(--volt)}
.hero3 .h3-genwrap img.h3-gen{position:relative;width:min(330px,34vw);margin:0;height:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.35));animation:bob 5s ease-in-out infinite;z-index:1}
.hero3 .hphone{width:214px;margin:0 0 70px;border-radius:34px;padding:7px;transform:rotate(3deg)}
.hero3 .hp-screen{min-height:410px;border-radius:28px}
.hero3 .hp-top{padding:16px 12px 9px}
.hero3 .hp-q{font-size:.74rem;margin:12px 10px 7px 34px}
.hero3 .hp-a{margin:4px 10px;padding:10px}
.hero3 .hp-a b{font-size:.8rem}
.hero3 .hp-a p{font-size:.7rem}
.hero3 .hp-bars{height:76px}
.hero3 .hp-next{font-size:.68rem}
.hero3 .hp-in{font-size:.72rem;margin:auto 10px 12px}
@media (max-width:1100px){.hero3 .h3-genwrap img.h3-gen{width:min(280px,30vw)}.hero3 .hphone{width:196px}}
@media (max-width:860px){.hero2-grid{grid-template-columns:1fr}.hero3 .h3-genwrap img.h3-gen{width:min(260px,52vw)}.hero3 .hphone{width:190px;margin-bottom:50px}}
@media (max-width:560px){.hero3 .hphone{display:none}.hero3 .h3-genwrap img.h3-gen{width:min(280px,70vw)}}
/* video v18: big and central */
.vid2{background:linear-gradient(180deg,var(--band-2),var(--band));padding-block:clamp(52px,7vw,90px)}
.vid-head{text-align:center;max-width:760px;margin:0 auto 30px;display:grid;gap:12px;justify-items:center}
.vid-head p{margin:0}
.vid2 .vframe{max-width:1060px;margin:0 auto;border-radius:26px;box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(238,242,253,.14)}
.does3.row3{grid-template-columns:repeat(3,1fr);gap:22px;margin:34px auto 0;max-width:1060px}
@media (max-width:820px){.does3.row3{grid-template-columns:1fr}}

/* footer v20: deep indigo, crisp white */
footer.site.foot3{color:#fff;background:linear-gradient(180deg,#071C40 0%,#06193B 100%)}
.foot3 .fgrid h4{color:#FFCB12}
.foot3 .fgrid a{color:#fff;opacity:1}
.foot3 .fgrid p{color:rgba(255,255,255,.88)}
.foot3 .tag{color:#fff}
.foot3 .fbase{color:rgba(255,255,255,.82);border-top-color:rgba(255,255,255,.2)}
.foot3 a:focus-visible{outline:2px solid #FFCB12;outline-offset:2px}

/* photo cards */
.ov:has(.ov-img){padding:0 0 22px;overflow:hidden}
.ov:has(.ov-img) > :not(.ov-img){margin-inline:22px}
.ov-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:10px;transition:transform .4s}
.ov:hover .ov-img{transform:scale(1.03)}

/* official store badges */
.store-b{background:none !important;border:0 !important;padding:0 !important;min-width:0 !important;height:auto !important;border-radius:9px;display:inline-block;line-height:0}
.store-b img{display:block;height:52px;width:auto;margin:0}
.store-b:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (max-width:420px){.store-b img{height:46px}}

/* ===== Partners page ===== */
.ptn-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.ptn-photo{margin:0;border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.ptn-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ptn-lead{display:grid;grid-template-columns:1fr .95fr;gap:48px;align-items:center}
.lead-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow)}
.lc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lc-tag{font:700 .78rem var(--f-body);background:var(--green-soft);color:#0C7A3B;padding:4px 10px;border-radius:999px}
.lead-card h3{font-size:1.25rem;margin-bottom:10px}
.lead-card dl{margin:0;display:grid}
.lead-card dl > div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.lead-card dt{font-size:.84rem;color:var(--muted);font-weight:600}
.lead-card dd{margin:0;font-size:.92rem}
.lc-foot{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.lc-foot span:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:8px;align-content:start;position:relative}
.stage .sn{width:38px;height:38px;border-radius:50%;background:var(--volt);color:var(--on-volt);display:grid;place-items:center;font-weight:600}
.stage h3{font-size:1.2rem}
.stage p{margin:0;color:var(--muted);font-size:.95rem}
.ptn-fair{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.fair-list{list-style:none;margin:0;padding:0;counter-reset:f;display:grid;gap:10px}
.fair-list li{counter-increment:f;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;background:var(--band-2);border-radius:14px;padding:12px 16px}
.fair-list li::before{content:counter(f);grid-row:span 2;width:30px;height:30px;border-radius:50%;background:var(--volt);color:var(--on-volt);display:grid;place-items:center;font:600 .9rem var(--f-mono)}
.fair-list b{font:700 1rem var(--f-display);color:var(--band-fg)}
.fair-list span{font-size:.88rem;color:var(--band-muted)}
.ptn-cat{cursor:default}
.ptn-cat:hover{transform:none;border-color:var(--line)}
.ptn-cat:hover .ov-img{transform:none}
.ptn-two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px;font-size:1rem}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--green-soft)}
.ticks li::after{content:"";position:absolute;left:6px;top:7px;width:6px;height:9px;border-right:2px solid #0C7A3B;border-bottom:2px solid #0C7A3B;transform:rotate(45deg)}
.pf-cats{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.pf-cats legend{font-weight:600;font-size:.92rem;margin-bottom:8px;padding:0}
.pf-cats label{display:flex !important;align-items:center;gap:8px;font-weight:500 !important}
.pf-cats input{width:auto !important;accent-color:var(--blue)}
.ptn-band{background:var(--blue);color:#fff;padding-block:36px}
.ptn-band-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ptn-band .eyebrow{color:var(--volt)}
.ptn-band h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:8px 0 6px;color:#fff}
.ptn-band p{margin:0;color:rgba(255,255,255,.88);max-width:62ch}
@media (max-width:980px){.ptn-hero-grid,.ptn-lead,.ptn-fair,.ptn-two{grid-template-columns:1fr}.stages{grid-template-columns:1fr}}
@media (max-width:560px){.pf-cats{grid-template-columns:1fr}.lead-card dl > div{grid-template-columns:96px 1fr}}

.trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.trades span{font-weight:600;font-size:.9rem;padding:.5em .9em;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}

/* ===== Motion ===== */
.hring{position:absolute;bottom:0;left:50%;width:min(480px,100%);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,203,18,.55);transform:translate(-50%,18%) scale(1);opacity:0;pointer-events:none;animation:hring 5s ease-out infinite}
.hring.r2{animation-delay:2.5s}
@keyframes hring{0%{transform:translate(-50%,18%) scale(1);opacity:.6}100%{transform:translate(-50%,18%) scale(1.32);opacity:0}}
header.site{transition:box-shadow .3s}
header.site.scrolled{box-shadow:0 10px 30px -18px rgba(10,24,56,.45)}
.paper .qm{animation:qpulse 2.4s ease-out infinite}
@keyframes qpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--q) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * 80ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.hring,.paper .qm{animation:none}.rv{opacity:1;transform:none;transition:none}}

/* ===== Meet Gen: animated stage ===== */
.genstage{isolation:isolate}
.genstage::before{z-index:-2}
.gs-float{position:relative;width:min(420px,100%);animation:gsfloat 4.2s ease-in-out infinite}
.gs-poses{position:relative;aspect-ratio:584/900}
.gen-hero .portrait .gs-poses img.pose{position:absolute;left:50%;bottom:0;height:100%;width:auto !important;max-width:none;transform:translateX(-50%) scale(.96);opacity:0;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.9,.3,1.3);filter:drop-shadow(0 24px 24px rgba(10,24,56,.28))}
.gen-hero .portrait .gs-poses img.pose.on{opacity:1;transform:translateX(-50%) scale(1)}
@keyframes gsfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.2deg)}}
.gs-shadow{position:absolute;bottom:-6px;left:50%;width:46%;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(10,24,56,.32),transparent);transform:translateX(-50%);animation:gsshadow 4.2s ease-in-out infinite;z-index:-1}
@keyframes gsshadow{0%,100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translateX(-50%) scale(.82);opacity:.6}}
.gs-ring{position:absolute;width:86%;aspect-ratio:1;border-radius:50%;top:6%;left:7%;border:2px solid var(--volt);opacity:0;z-index:-2;animation:gsring 4.5s ease-out infinite}
.gs-ring.r2{animation-delay:2.25s}
@keyframes gsring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.28);opacity:0}}
.gs-spark{position:absolute;bottom:18%;left:var(--x);width:9px;height:9px;border-radius:50%;background:var(--volt);box-shadow:0 0 12px 2px rgba(255,203,18,.7);opacity:0;z-index:-1;animation:gsspark 4.2s ease-out infinite;animation-delay:var(--t)}
@keyframes gsspark{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-260px) scale(1.1);opacity:0}}
.gs-bubble{position:absolute;top:-3%;left:-27%;width:260px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px 18px 18px 6px;box-shadow:0 18px 40px -18px rgba(10,24,56,.35),0 2px 6px rgba(10,24,56,.06);transform-origin:16% 100%;transition:transform .35s cubic-bezier(.2,.9,.3,1.25),opacity .25s;z-index:3}
.gs-bubble::after{content:"";position:absolute;bottom:-8px;left:24px;width:14px;height:14px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);border-radius:0 0 3px 0}
.gs-hd{display:flex;align-items:center;gap:7px;padding:10px 14px 8px;border-bottom:1px solid var(--line);font-size:.8rem}
.gs-hd b{font:700 .86rem var(--f-display)}
.gs-hd small{color:var(--muted);font-size:.74rem}
.gs-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.gs-body{padding:11px 14px 13px;font:500 .95rem/1.4 var(--f-body);min-height:48px}
.gs-typing{display:none;gap:4px;padding:6px 0}
.gs-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:gstype 1s infinite}
.gs-typing i:nth-child(2){animation-delay:.15s}.gs-typing i:nth-child(3){animation-delay:.3s}
@keyframes gstype{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.gs-bubble.typing .gs-typing{display:flex}
.gs-bubble.typing #gsText,.gs-bubble.typing .gs-stores{display:none}
.gs-stores{display:flex;gap:8px;margin-top:10px}
.gs-stores[hidden]{display:none}
.gs-stores img{display:block;height:34px;width:auto}
.gs-stores a{line-height:0;border-radius:6px;transition:transform .15s}
.gs-stores a:hover{transform:translateY(-2px)}
.gs-bubble.swap{transform:scale(.85);opacity:0}
@media (max-width:860px){.genstage{padding-top:150px}.gs-bubble{left:50%;top:0;width:250px;margin-left:-125px;transform-origin:30% 100%}.gs-body{font-size:.88rem}.gs-stores img{height:30px}.gs-float{width:min(320px,80vw)}}
@media (prefers-reduced-motion: reduce){.gs-float,.gs-shadow,.gs-ring,.gs-spark{animation:none}.gs-spark,.gs-ring{display:none}}

/* Meet Gen stage: Gen left, speech right (desktop and tablet) */
@media (min-width:861px){
  .gen-hero{grid-template-columns:1fr 1fr}
  .gen-hero .portrait.genstage{justify-items:start;align-items:end;padding-top:56px;--gw:min(400px,62%)}
  .gen-hero .portrait.genstage::before{left:-2%;width:calc(var(--gw) * 1.12);top:auto;bottom:14%}
  .genstage .gs-ring{left:-2%;width:calc(var(--gw) * 1.12);top:auto;bottom:14%}
  .genstage .gs-float{width:var(--gw);margin-left:2%}
  .genstage .gs-shadow{left:calc(2% + var(--gw) / 2)}
  .genstage .gs-spark{left:calc(var(--x) * .62)}
  .genstage .gs-bubble{left:calc(2% + var(--gw) * .88);top:2%;width:250px;border-radius:18px 18px 18px 6px;transform-origin:0% 100%}
  .genstage .gs-bubble::after{left:-8px;bottom:22px;border-right:0;border-top:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 0 3px}
}
@media (min-width:861px) and (max-width:1200px){
  .gen-hero .portrait.genstage{--gw:min(330px,58%)}
  .genstage .gs-bubble{top:0;width:215px;left:calc(2% + var(--gw) * .9)}
  .genstage .gs-body{font-size:.86rem}
  .genstage .gs-stores img{height:29px}
}
@media (min-width:861px) and (max-width:1020px){
  .gen-hero .portrait.genstage{--gw:min(280px,52%)}
  .genstage .gs-bubble{left:auto;right:0;width:200px;top:0}
}

/* ---------- Cookie consent banner (added for launch; not in the client's design file) ---------- */
.ck[hidden],.ck [hidden]{display:none!important}
.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;display:flex;justify-content:flex-end;pointer-events:none}
.ck-card{pointer-events:auto;width:100%;max-width:440px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px;max-height:calc(100vh - 32px);overflow:auto}
.ck-card h2{font:700 1.15rem/1.2 var(--f-display);margin:0 0 8px}
.ck-card p{font-size:.92rem;color:var(--muted);margin:0}
.ck-card p a{color:var(--blue);font-weight:600}
.ck-prefs{display:grid;gap:10px;margin-top:14px}
.ck-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);cursor:pointer}
.ck-row span{display:grid;gap:2px}
.ck-row small{font-size:.82rem;color:var(--muted)}
.ck-row input{width:20px;height:20px;flex:none;accent-color:var(--blue)}
.ck-row input:disabled{cursor:not-allowed}
.ck-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ck-btns .btn{padding:.75em 1.2em;font-size:.92rem}
@media (max-width:460px){.ck{left:10px;right:10px;bottom:10px}.ck-card{padding:16px}.ck-btns .btn{flex:1 1 40%}}