/* ClimateAhead by Good Risk Group: consumer marketing site
   Colour, type and components follow docs/BRAND_GUIDELINES.md.
   Teal (#0eaaa2) is primary; amber (#f4a63a) is the heat accent.
   Darks are cool teal-greens, never slate-blue. No serif, no web fonts. */

:root{
  --paper:#ffffff; --panel:#ffffff; --panel-2:#f1faf8;
  --ink:#143038; --ink-soft:#48646c; --muted:#7c959b;
  --line:#e0edeb; --line-soft:#eef6f4;
  --brand:#0eaaa2; --brand-ink:#0a827c; --heat:#f4a63a; --heat-ink:#c47611;
  --shadow:0 1px 2px rgba(20,48,56,.05),0 14px 34px -20px rgba(20,48,56,.22);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;
}
:root{ --b-low:#12996f; --b-low-bg:#e4f6ef; --b-med:#d98a1f; --b-med-bg:#fbefda; --b-high:#dd5138; --b-high-bg:#fbe6e0; }
/* Form-error colour: a true red, deliberately separate from the coral High
   risk band (--b-high) so band coral is never reused for UI errors. */
:root{ --error:#c62828; --error-bg:#fbe4e4; }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0b1918; --panel:#112423; --panel-2:#0e201e;
    --ink:#e9f6f3; --ink-soft:#b1cbc6; --muted:#7fa09a;
    --line:#20403c; --line-soft:#17302d;
    --brand:#2fc9c0; --brand-ink:#4dd8cf; --heat:#f7b968; --heat-ink:#f9c680;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 20px 44px -24px rgba(0,0,0,.7);
    --b-low:#38c99a; --b-low-bg:#0f2c25; --b-med:#f0ad4e; --b-med-bg:#2e2415; --b-high:#f0745a; --b-high-bg:#331a15;
    --error:#ff8b8b; --error-bg:#3a1a1a;
  }
}
:root[data-theme="dark"]{
  --paper:#0b1918; --panel:#112423; --panel-2:#0e201e;
  --ink:#e9f6f3; --ink-soft:#b1cbc6; --muted:#7fa09a;
  --line:#20403c; --line-soft:#17302d;
  --brand:#2fc9c0; --brand-ink:#4dd8cf; --heat:#f7b968; --heat-ink:#f9c680;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 20px 44px -24px rgba(0,0,0,.7);
  --b-low:#38c99a; --b-low-bg:#0f2c25; --b-med:#f0ad4e; --b-med-bg:#2e2415; --b-high:#f0745a; --b-high-bg:#331a15;
  --error:#ff8b8b; --error-bg:#3a1a1a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; margin:0;}
img{max-width:100%}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
h1,h2,h3{font-weight:680; text-wrap:balance; letter-spacing:-.025em; line-height:1.05; margin:0;}
p{max-width:64ch;}
a{color:inherit;}
.eyebrow{display:inline-flex; align-items:center; gap:.6em; font-weight:600; font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; color:var(--brand-ink);}
.eyebrow::before{content:""; width:24px; height:2px; background:var(--brand); border-radius:1px;}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums;}

.skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:var(--brand); color:#fff; padding:.7em 1.1em; border-radius:0 0 10px 0; font-weight:640;}
.skip-link:focus{left:0;}

header.bar{position:sticky; top:0; z-index:30; backdrop-filter:blur(9px); background:color-mix(in srgb,var(--paper) 84%,transparent); border-bottom:1px solid var(--line-soft);}
.bar .wrap{display:flex; align-items:center; justify-content:space-between; height:62px;}
.brand{display:flex; align-items:center; gap:.55em;}
.brand b{font-size:1.08rem; font-weight:750; letter-spacing:-.03em;}
.brand .by{font-size:.72rem; color:var(--muted); font-weight:500;}
.brand .mark{width:16px; height:16px; flex:0 0 auto; border-radius:5px; background:conic-gradient(from 200deg,var(--brand),var(--heat),var(--brand)); position:relative;}
.brand .mark::after{content:""; position:absolute; inset:4px; border-radius:2px; background:var(--paper);}
.nav{display:flex; gap:24px; align-items:center; font-size:.9rem;}
.nav a{color:var(--ink-soft); text-decoration:none;} .nav a:hover{color:var(--ink);}
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:640; font-size:.94rem; padding:.72em 1.2em; border-radius:100px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .12s ease, box-shadow .15s ease;}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow);}
.btn-primary:hover{transform:translateY(-1px);}
.nav .btn{padding:.52em .95em; font-size:.86rem;}

.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line-soft);}
#iso{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.hero .wrap{position:relative; z-index:2; padding:92px 24px 84px;}
.hero h1{font-size:clamp(2.7rem,6.6vw,4.7rem); max-width:15ch; margin:.8rem 0 0; font-weight:730;}
.hero h1 .warm{color:var(--heat-ink);} .hero h1 .cool{color:var(--brand-ink);}
.lead{font-size:clamp(1.08rem,1.9vw,1.32rem); color:var(--ink-soft); margin:1.3rem 0 0; max-width:52ch;}
.checker{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:10px; max-width:580px;}
.checker .field{flex:1 1 300px; display:flex; align-items:center; gap:.5em; background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:.2em .3em .2em 1.1em; box-shadow:var(--shadow);}
.checker .field svg{flex:0 0 auto; color:var(--brand);}
.checker input{flex:1; border:0; background:transparent; color:var(--ink); font:inherit; font-size:1rem; padding:.78em 0;}
.checker input::placeholder{color:var(--muted);} .checker input:focus{outline:none;}
.hero .foot{margin-top:1.1rem; font-size:.86rem; color:var(--ink-soft); display:flex; gap:1.5em; flex-wrap:wrap;}
.hero .foot span{display:inline-flex; align-items:center; gap:.5em;}
.tick{width:7px;height:7px;border-radius:50%;background:var(--brand);} .tick.h{background:var(--heat);}

section{padding:82px 0; border-bottom:1px solid var(--line-soft);}
.sec-head{max-width:60ch;}
.sec-head h2{font-size:clamp(1.85rem,3.6vw,2.55rem); margin:.55rem 0 0; font-weight:720;}
.sec-head p{color:var(--ink-soft); margin-top:.85rem;}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:42px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--line);}
.step{padding:30px 26px; background:var(--panel);}
.step .n{font-weight:750; font-size:1.5rem; color:var(--brand); letter-spacing:-.02em;}
.step h3{font-size:1.18rem; margin:.5rem 0 .45rem; letter-spacing:-.02em;}
.step p{font-size:.95rem; color:var(--ink-soft); margin:0;}

.res{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center;}
.res h2{font-size:clamp(1.85rem,3.6vw,2.55rem); margin:.55rem 0 0; font-weight:720;}
.contrast{margin-top:28px; display:flex; flex-direction:column; gap:12px;}
.c-item{display:flex; align-items:center; gap:18px; padding:16px 20px; border:1px solid var(--line); border-radius:14px; background:var(--panel);}
.c-item.brand{background:var(--panel-2); border-color:color-mix(in srgb,var(--brand) 32%,var(--line));}
.c-item .cv{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.6rem; font-weight:700; width:96px; flex:0 0 auto; letter-spacing:-.01em; color:var(--muted);}
.c-item.brand .cv{color:var(--brand-ink);}
.c-item .cl{font-size:.95rem; color:var(--ink-soft); line-height:1.4;}
.compare{border:1px solid var(--line); border-radius:16px; padding:26px; background:var(--panel-2);}
.compare .cap{font-weight:600; font-size:.82rem; color:var(--muted);}
.gridcmp{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px;}
.gridcmp figure{margin:0;}
.gridcmp .box{aspect-ratio:1/1; border-radius:10px; position:relative; overflow:hidden; border:1px solid var(--line);}
.coarse{background:
   linear-gradient(90deg,#0000 0 49.6%,var(--line) 49.6% 50.4%,#0000 50.4%),
   linear-gradient(0deg,#0000 0 49.6%,var(--line) 49.6% 50.4%,#0000 50.4%),
   color-mix(in srgb,var(--heat) 24%,var(--panel));}
.gridcmp figcaption{font-size:.82rem; color:var(--muted); margin-top:9px; text-align:center;}

.haz{display:flex; flex-wrap:wrap; gap:10px; margin-top:36px;}
.haz .chip{display:inline-flex; align-items:center; gap:.55em; border:1px solid var(--line); border-radius:100px; padding:.58em 1.05em; font-size:.95rem; background:var(--panel); font-weight:520;}
.haz .chip i{width:9px;height:9px;border-radius:50%; display:inline-block;}

/* sample report */
.sample{display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center;}
.sample-intro h2{font-size:clamp(1.85rem,3.6vw,2.55rem); margin:.55rem 0 0; font-weight:720;}
.sample-intro p{color:var(--ink-soft); margin-top:.85rem;}
.mortgage{margin-top:22px; padding:14px 18px; border-left:3px solid var(--brand); background:var(--panel-2); border-radius:0 10px 10px 0; font-size:.98rem; color:var(--ink-soft);}
.mortgage b{color:var(--ink); font-weight:660;}
.report-card{border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow); overflow:hidden;}
.rc-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid var(--line-soft);}
.rc-addr b{font-size:1.05rem; letter-spacing:-.02em;} .rc-addr span{display:block; font-size:.78rem; color:var(--muted); font-family:var(--mono);}
.rc-tag{flex:0 0 auto; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--brand-ink); background:var(--panel-2); border:1px solid var(--line); border-radius:100px; padding:.4em .85em;}
.rc-headline{margin:0; padding:18px 22px 4px; font-size:1.06rem; line-height:1.45;}
.rc-headline b{color:var(--brand-ink);}
.rc-cols{display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:12px 22px 4px; font-size:.74rem; font-weight:600; letter-spacing:0; color:var(--muted);}
.rc-cols .h{width:74px; text-align:center;} .rc-cols .ht{width:46px; text-align:center;}
.rc-rows{padding:0 22px;}
.rc-row{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line-soft);}
.rc-row .pn{flex:1; display:flex; align-items:center; gap:.6em; font-weight:560; font-size:.95rem;}
.rc-row .pn i{width:9px; height:9px; border-radius:50%; flex:0 0 auto;}
.rc-track{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.pill{display:inline-block; width:74px; text-align:center; font-size:.8rem; font-weight:640; padding:.34em .2em; border-radius:100px;}
.pill.low{color:var(--b-low); background:var(--b-low-bg);}
.pill.med{color:var(--b-med); background:var(--b-med-bg);}
.pill.high{color:var(--b-high); background:var(--b-high-bg);}
.trend{width:46px; text-align:center; font-weight:700; font-size:1.05rem; color:var(--muted); flex:0 0 auto;}
.trend.up{color:var(--b-med);} .trend.down{color:var(--b-low);}
.rc-foot{margin:0; padding:15px 22px 20px; margin-top:6px; font-size:.8rem; color:var(--muted); border-top:1px solid var(--line-soft);}

.trust{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start;}
.trust h2{font-size:clamp(1.85rem,3.6vw,2.55rem); margin:.55rem 0 0; font-weight:720;}
.trust .names{margin-top:20px; color:var(--ink-soft); font-size:1rem; line-height:1.9;}
.trust .names b{color:var(--ink); font-weight:640;}
.prin{list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:22px;}
.prin li{display:grid; grid-template-columns:3px 1fr; gap:15px;}
.prin .bar-i{border-radius:2px; background:var(--brand);}
.prin li:nth-child(2) .bar-i{background:var(--heat);}
.prin b{font-weight:660;} .prin span.t{color:var(--ink-soft); font-size:.96rem;}

.cta{background:linear-gradient(135deg,var(--brand),#0b8f88); color:#fff; border:none; text-align:center;}
:root[data-theme="dark"] .cta{background:linear-gradient(135deg,#0e938c,#0a716b);}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cta{background:linear-gradient(135deg,#0e938c,#0a716b);} }
.cta .eyebrow{color:#d6fffb; justify-content:center;} .cta .eyebrow::before{background:#bff7f0;}
.cta h2{color:#fff; font-size:clamp(2rem,4.2vw,3rem); max-width:18ch; margin:.6rem auto 0; font-weight:730; letter-spacing:-.03em;}
.cta p{color:#e6fdfa; margin:1.1rem auto 0; max-width:50ch;}
.cta .checker{margin:2.1rem auto 0; justify-content:center;}
.cta .field{background:#fff; border-color:transparent;} .cta .field svg{color:var(--brand);}
.cta input{color:#143038;} .cta input::placeholder{color:#7c959b;}
.cta .btn-primary{background:#fff; color:var(--brand-ink);}
.cta .note{margin-top:1.1rem; font-size:.82rem; color:#d6fbf7;}

footer{padding:46px 0 58px;}
.foot-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
footer .brand b{font-size:1rem;}
.fnote{font-size:.86rem; color:var(--muted); max-width:42ch; margin:.7rem 0 0;}
.flinks{display:flex; gap:28px; font-size:.9rem;}
.flinks a{color:var(--ink-soft); text-decoration:none;} .flinks a:hover{color:var(--ink);}
.biz-link{font-weight:600; color:var(--brand-ink);}
.legal{margin-top:28px; padding-top:20px; border-top:1px solid var(--line-soft); font-size:.78rem; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* register-interest form */
.signup{max-width:580px;}
.cta .signup{margin:0 auto;}
.hp{position:absolute!important; left:-9999px!important; top:auto; width:1px; height:1px; overflow:hidden;}
.privacy-note{margin:.9rem 0 0; font-size:.82rem; color:var(--muted);}
.reg-result{margin:.75rem 0 0; font-size:.92rem; font-weight:560; max-width:52ch;}
.cta .reg-result{margin-left:auto; margin-right:auto;}
.reg-result:empty{display:none;}
.reg-result.ok{color:var(--b-low);}
.reg-result.err{color:var(--error);}
.cta .reg-result.ok{color:#eafffb;}
.cta .reg-result.err{color:#ffdfd7;}
.register-form button[disabled]{opacity:.6; cursor:default;}
.register-form button[disabled]:hover{transform:none;}

/* Success confirmation: replaces the form on a genuine ok:true response. */
.reg-confirm{display:flex; align-items:center; gap:16px; margin-top:.4rem; outline:none;}
.reg-confirm[hidden]{display:none;}
.reg-confirm:focus-visible{outline:2px solid var(--brand); outline-offset:6px; border-radius:14px;}
.reg-confirm-tick{flex:0 0 auto; display:inline-flex;}
.reg-confirm-tick svg{display:block;}
.reg-confirm .rc-ring{fill:var(--brand);}
.reg-confirm .rc-check{stroke:#fff;}
.reg-confirm-text{min-width:0;}
.reg-confirm-title{font-size:1.24rem; font-weight:720; letter-spacing:-.02em; margin:0; color:var(--ink);}
.reg-confirm-line{margin:.28rem 0 0; font-size:.96rem; color:var(--ink-soft); max-width:44ch;}
/* On the teal CTA panel: invert the tick and use the panel's light text. */
.cta .reg-confirm{justify-content:center; text-align:left;}
.cta .reg-confirm .rc-ring{fill:#fff;}
.cta .reg-confirm .rc-check{stroke:var(--brand-ink);}
.cta .reg-confirm-title{color:#fff;}
.cta .reg-confirm-line{color:#e6fdfa;}
/* Draw + pop only when motion is welcome; the base state above is the final,
   fully drawn frame, so reduced-motion and no-JS-CSS both rest on it. */
@media (prefers-reduced-motion:no-preference){
  .reg-confirm.show .rc-ring{transform-box:fill-box; transform-origin:center; animation:reg-pop .3s ease-out both;}
  .reg-confirm.show .rc-check{stroke-dasharray:34; stroke-dashoffset:34; animation:reg-draw .34s .16s ease-out forwards;}
}
@keyframes reg-pop{from{transform:scale(.5); opacity:0;} to{transform:scale(1); opacity:1;}}
@keyframes reg-draw{to{stroke-dashoffset:0;}}
/* progressive enhancement: without JS, show the honest static note only */
.js .launching-note{display:none;}
.no-js .signup{display:none;}
/* native form-POST fallback banners (register.js absent): hidden until the
   Function's 302 lands on #registered or #signup-error. */
.native-status{display:none; max-width:1120px; margin:0 auto; padding:14px 24px; font-size:.95rem; font-weight:560; border-bottom:1px solid var(--line-soft);}
.native-status.ok:target{display:block; color:var(--b-low); background:var(--b-low-bg);}
.native-status.err:target{display:block; color:var(--error); background:var(--error-bg);}

@media (max-width:820px){
  .steps{grid-template-columns:1fr;} .res,.trust,.sample{grid-template-columns:1fr; gap:30px;}
  .nav a:not(.btn){display:none;}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }