/* Layout: a poster headline beside the working check, then sections built from the subject's own instruments:
   a point list, a morning drawn to scale, a credit figure. Spruce and snow, with sodium-lamp amber for what matters. */
@font-face{font-family:"Big Shoulders";src:url(/assets/fonts/big-shoulders-latin-wght-normal.woff2) format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/barlow-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  color-scheme:light;
  --spruce-950:#071C1A;
  --spruce-900:#0C2D29;
  --spruce-800:#123F39;
  --spruce-700:#1B554D;
  --snow:#F3F6F3;
  --white:#FFFFFF;
  --frost:#D9E4DF;
  --frost-2:#AFC2BA;
  --ink:#0B211E;
  --ink-2:#3C514A;
  --ink-3:#556A63;
  --on-dark:#EEF4F0;
  --on-dark-2:#B9CBC3;
  --sodium:#FFB81C;
  --sodium-2:#FFD775;
  --ct0:#7B8E87;
  --ct1:#3E9CC4;
  --ct2:#FFB81C;
  --ct3:#CF3B1F;
  --ct4:#2F9E6E;
  --ok:#14704A;
  --ok-bg:#DDF1E6;
  --check:#7F5300;
  --check-bg:#FFEFC7;
  --risk:#AF2F17;
  --risk-bg:#FBE1DA;
  --f-display:"Big Shoulders","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:max(20px,env(safe-area-inset-left,0px));
  --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--snow);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--spruce-700);outline-offset:2px}
.hero :focus-visible,.band :focus-visible,.final :focus-visible,.foot :focus-visible{outline-color:var(--sodium)}
.check :focus-visible{outline-color:var(--spruce-700)}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

.wrap{max-width:1200px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.skip{position:absolute;left:-999px;top:0;background:var(--sodium);color:var(--ink);padding:.6rem 1rem;z-index:40}
.skip:focus{left:8px;top:8px}
.num{font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}

h1,h2,h3{font-family:var(--f-display);font-weight:800;text-wrap:balance}
h2{font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1.04;letter-spacing:.002em}
h3{font-size:1.625rem;line-height:1.12;font-weight:700;letter-spacing:.005em}
.lede{font-size:1.1875rem;line-height:1.5;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.eyebrow{font-family:var(--f-data);font-size:.8125rem;letter-spacing:.04em;font-weight:500}
.section{padding-block:clamp(56px,8vw,104px)}
.section__head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
code,.code{font-family:var(--f-data);font-size:.92em;font-weight:500;background:var(--frost);padding:.08em .36em;border-radius:2px;white-space:nowrap}
.source{font-size:.875rem;color:var(--ink-3)}
.source a{color:inherit}
.source--block{margin-top:clamp(28px,4vw,44px);max-width:90ch}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:.7rem 1.4rem;border:0;border-radius:var(--radius);background:var(--sodium);color:var(--ink);font-weight:700;font-size:1.0625rem;line-height:1.2;text-decoration:none;text-align:center;transition:background-color .15s,transform .15s}
.btn:hover{background:var(--sodium-2)}
.btn:active{transform:translateY(1px)}
.btn--small{min-height:42px;padding:.45rem 1rem;font-size:.9375rem}
.btn--dark{background:var(--spruce-900);color:var(--on-dark)}
.btn--dark:hover{background:var(--spruce-700)}
.btn--wide{width:100%}
.btn[disabled]{opacity:.65;cursor:progress}
.link-btn{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;font-weight:600;color:inherit}

/* Season strip and header */
.strip{background:var(--sodium);color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.3}
.strip p{padding-block:8px;text-align:left}
.hero{background:var(--spruce-900);color:var(--on-dark);position:relative;box-shadow:0 1px 0 var(--spruce-900)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:.01em;text-decoration:none;line-height:1}
.brand img{width:30px;height:30px}
.brand span{white-space:nowrap}
.top__right{display:flex;align-items:center;gap:18px}
.lang{font-size:.9375rem;font-weight:500;text-underline-offset:3px}

/* Hero */
.hero__grid{position:relative;z-index:1;display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);align-items:start;padding-block:clamp(20px,3vw,36px) clamp(44px,6vw,76px)}
.hero__copy{display:grid;gap:22px;min-width:0}
.hero .eyebrow{color:var(--sodium)}
h1{font-size:clamp(2.9rem,5vw,4.125rem);line-height:1.02;letter-spacing:.002em}
h1 em{font-style:normal;color:var(--sodium);display:block;margin-top:.12em}
.hero__sub{font-size:clamp(1.125rem,1.6vw,1.3125rem);line-height:1.45;color:var(--on-dark);max-width:38em;text-wrap:pretty}
.proofs{display:grid;gap:10px;font-size:1.0313rem;color:var(--on-dark)}
.proofs li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:baseline}
.proofs li::before{content:"";width:10px;height:10px;background:var(--sodium);transform:translateY(-1px) rotate(45deg);justify-self:center}
.hero__note{font-size:.875rem;color:var(--on-dark-2)}

/* The check */
.check{background:var(--white);color:var(--ink);border-radius:var(--radius);box-shadow:10px 10px 0 var(--spruce-950);padding:clamp(20px,2.4vw,30px);display:grid;gap:18px;min-width:0;scroll-margin-top:16px}
.check__head{display:grid;gap:4px}
.check.is-past .check__head{display:none}
.check.is-past .check__body{min-height:0}
.check__head h2{font-size:clamp(1.875rem,3vw,2.375rem);line-height:1.06}
.check__head p{color:var(--ink-2);font-size:1rem}
.check__body{display:grid;gap:14px;min-height:340px;align-content:start}
.check__body:focus{outline:none}
.check__count{font-family:var(--f-data);font-size:.8125rem;color:var(--ink-3);display:flex;justify-content:space-between;gap:12px;align-items:center}
.bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.bars span{height:5px;background:var(--frost);border-radius:1px}
.bars span.on{background:var(--spruce-700)}
.q{font-weight:700;font-size:1.25rem;line-height:1.25;text-wrap:balance}
.q:focus{outline:none}
.opts{display:grid;gap:8px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:54px;text-align:left;padding:.6rem .9rem;background:var(--white);border:2px solid var(--frost-2);border-radius:var(--radius);font-weight:600;line-height:1.25;transition:border-color .12s,background-color .12s}
.opt::after{content:"";flex:none;width:9px;height:9px;border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);transform:rotate(45deg)}
.opt:hover{border-color:var(--spruce-700);background:var(--snow)}
.opt[aria-pressed=true]{border-color:var(--spruce-700);background:var(--frost)}
.check__foot{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;font-size:.9375rem;color:var(--ink-2)}

.result{display:grid;gap:10px}
.result__title{font-size:1.75rem;line-height:1.08}
.check .result__title:focus,.check .thanks__title:focus{outline:none}
.rows{display:grid;gap:8px}
.row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.9688rem;line-height:1.38}
.chip{display:inline-block;font-family:var(--f-data);font-size:.6875rem;font-weight:500;letter-spacing:.02em;padding:.16rem .4rem;border-radius:2px;white-space:nowrap;margin-top:.14rem;min-width:5.6em;text-align:center}
.chip--ok{background:var(--ok-bg);color:var(--ok)}
.chip--check{background:var(--check-bg);color:var(--check)}
.chip--risk{background:var(--risk-bg);color:var(--risk)}
.result__credit{background:var(--snow);padding:.7rem .85rem;font-size:.9688rem;line-height:1.4;border-radius:var(--radius)}
.result__credit strong{font-weight:700}

.form{display:grid;gap:12px;border-top:2px solid var(--frost);padding-top:16px}
.form__title{font-size:1.5rem;line-height:1.12;font-weight:700}
.form__intro{font-size:.9688rem;line-height:1.42;color:var(--ink-2)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:grid;gap:4px;min-width:0}
.field--full{grid-column:1/-1}
.field label,.field legend{font-weight:600;font-size:.9375rem;padding:0}
.field input,.field select{width:100%;min-height:48px;padding:.5rem .7rem;background:var(--white);border:2px solid var(--frost-2);border-radius:var(--radius);font-size:1rem}
.field input:focus,.field select:focus{border-color:var(--spruce-700);outline:none;box-shadow:0 0 0 3px var(--frost)}
.field [aria-invalid=true]{border-color:var(--risk)}
.field__err{color:var(--risk);font-size:.875rem;font-weight:500;line-height:1.3}
fieldset.field{border:0;margin:0;padding:0}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{display:block;font-weight:500;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.seg span{display:block;padding:.42rem .75rem;border:2px solid var(--frost-2);border-radius:var(--radius);font-size:.9375rem}
.seg input:checked+span{background:var(--spruce-900);border-color:var(--spruce-900);color:var(--on-dark)}
.seg input:focus-visible+span{outline:3px solid var(--spruce-700);outline-offset:2px}
.consent{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:.9063rem;line-height:1.38;color:var(--ink-2);align-items:start}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--spruce-700)}
.form__legal{font-size:.8438rem;line-height:1.4;color:var(--ink-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{background:var(--risk-bg);color:#6F1E0E;padding:.7rem .85rem;border-radius:var(--radius);font-size:.9375rem;line-height:1.4}
.thanks{display:grid;gap:12px}
.thanks__title{font-size:2.125rem;line-height:1.06}
.thanks ol{display:grid;gap:8px;counter-reset:t}
.thanks li{display:grid;grid-template-columns:26px 1fr;gap:8px;counter-increment:t;font-size:.9875rem;line-height:1.4}
.thanks li::before{content:counter(t);font-family:var(--f-data);font-weight:500;font-size:.8125rem;background:var(--frost);width:22px;height:22px;display:grid;place-items:center;border-radius:2px}

/* The morning, to scale */
.morning{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,4vw,48px);align-items:start}
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.step{display:grid;gap:2px;justify-items:start;text-align:left;padding:.55rem .6rem;background:var(--white);border:2px solid var(--frost);border-radius:var(--radius);line-height:1.15;min-width:0;transition:border-color .12s}
.step:hover{border-color:var(--frost-2)}
.step b{font-family:var(--f-data);font-size:.8438rem;font-weight:500;white-space:nowrap}
.step i{font-style:normal;font-size:.8438rem;color:var(--ink-3);overflow-wrap:anywhere}
.step[aria-pressed=true]{background:var(--spruce-900);border-color:var(--spruce-900);color:var(--on-dark)}
.step[aria-pressed=true] i{color:var(--on-dark-2)}
.scale{margin-top:22px;display:grid;grid-template-columns:clamp(58px,9vw,84px) minmax(0,1fr);gap:0}
.scale__eve{position:relative;height:44px;background:repeating-linear-gradient(135deg,var(--frost) 0 5px,var(--white) 5px 10px);border:1px solid var(--frost-2);border-right:0;display:grid;place-items:center;font-size:.75rem;font-weight:600;color:var(--ink-2)}
.scale__bar{position:relative;height:44px;background:var(--white);border:1px solid var(--frost-2)}
.seg-ct{position:absolute;top:0;bottom:0}
.seg-ct--1{left:10%;width:6.667%;background:var(--ct1)}
.seg-ct--2{left:16.667%;width:3.333%;background:var(--ct2)}
.seg-ct--3{left:20%;width:60%;background:var(--ct3)}
.seg-ct--4{left:80%;width:1.667%;background:var(--ct4)}
.scale__label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-weight:600;font-size:.875rem;white-space:nowrap}
.marker{position:absolute;top:-7px;bottom:-7px;left:20%;width:3px;margin-left:-1px;background:var(--ink);transition:left .35s ease;z-index:2}
.scale__eve .marker{left:50%}
.ticks{grid-column:2;position:relative;height:22px;margin-top:4px;font-family:var(--f-data);font-size:.75rem;color:var(--ink-3)}
.ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.ticks .t0{left:0;transform:none}
.ticks .t1{left:20%}
.ticks .t2{left:40%}
.ticks .t3{left:60%}
.ticks .t4{left:80%}
.ticks .t5{left:100%;transform:translateX(-100%)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.875rem;color:var(--ink-2);margin-top:10px}
.legend li{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;display:inline-block}
.key-1{background:var(--ct1)}.key-2{background:var(--ct2)}.key-3{background:var(--ct3)}.key-4{background:var(--ct4)}
.morning__say{margin-top:20px;display:grid;gap:6px;max-width:58ch}
.morning__say h3{font-size:1.75rem}
.points{background:var(--spruce-950);color:var(--on-dark);border-radius:var(--radius);padding:16px 18px 14px;font-family:var(--f-data);font-size:.8438rem;min-width:0}
.points__head{display:flex;justify-content:space-between;gap:10px;color:var(--on-dark-2);padding-bottom:10px;border-bottom:1px solid var(--spruce-700);font-size:.75rem}
.points table{width:100%;border-collapse:collapse}
.points td{padding:.46rem 0;border-bottom:1px solid var(--spruce-800);vertical-align:baseline}
.points tr:last-child td{border-bottom:0}
.points .p-name{font-weight:500;width:4.2em;color:var(--sodium)}
.points .p-desc{color:var(--on-dark-2);font-family:var(--f-body);font-size:.875rem;line-height:1.2;padding-right:.5em}
.points .p-val{text-align:right;font-weight:500;font-size:1rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.points .changed{color:var(--sodium)}
.points__ct{display:inline-block;padding:0 .4em;border-radius:2px;color:#fff}
.points__ct--0{background:var(--ct0)}.points__ct--1{background:var(--ct1);color:#06222E}.points__ct--2{background:var(--ct2);color:var(--ink)}.points__ct--3{background:var(--ct3)}.points__ct--4{background:var(--ct4);color:#03231A}
.points__foot{color:var(--on-dark-2);font-family:var(--f-body);font-size:.8438rem;line-height:1.35;padding-top:10px;border-top:1px solid var(--spruce-700);margin-top:2px}

/* What changes this winter */
.changes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(28px,5vw,72px)}
.change{display:grid;gap:8px;align-content:start;min-width:0}
.change p{color:var(--ink-2);max-width:52ch;text-wrap:pretty}
.change .change__fig{font-family:var(--f-display);font-weight:800;font-size:clamp(1.875rem,3vw,2.5rem);line-height:1.04;color:var(--ink);overflow-wrap:anywhere;max-width:none}
.change__fig .code{font-size:.6em;background:none;padding:0;font-weight:500;white-space:normal}
.change__fig .arrow{color:var(--ct3);margin-inline:.14em;font-size:.8em}

/* Calculator */
.band{background:var(--spruce-900);color:var(--on-dark)}
.band .lede{color:var(--on-dark)}
.band code,.band .code{background:var(--spruce-700);color:var(--on-dark)}
.band .source{color:var(--on-dark-2)}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.calc__in{display:grid;gap:24px;min-width:0}
.ctl{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.ctl label,.ctl legend{font-weight:600;padding:0}
.ctl__row{display:flex;align-items:center;gap:14px}
input[type=range]{flex:1;min-width:0;height:34px;background:transparent;accent-color:var(--sodium);cursor:pointer}
.kw{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-data);font-weight:500}
.kw input{width:5.2em;min-height:44px;background:var(--spruce-950);color:var(--on-dark);border:1px solid var(--spruce-700);border-radius:var(--radius);padding:.3rem .5rem;text-align:right;font-variant-numeric:tabular-nums}
.hours{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.hours label{display:block;cursor:pointer}
.hours input{position:absolute;opacity:0;width:1px;height:1px}
.hours span{display:grid;place-items:center;min-height:44px;background:var(--spruce-800);border-radius:var(--radius);font-family:var(--f-data);font-size:.9375rem;font-weight:500}
.hours input:checked+span{background:var(--sodium);color:var(--ink)}
.hours input:focus-visible+span{outline:3px solid var(--on-dark);outline-offset:2px}
.stepper{display:inline-flex;align-items:center;gap:0;width:max-content}
.stepper button{width:48px;height:48px;background:var(--spruce-800);border:0;color:var(--on-dark);font-size:1.5rem;line-height:1;border-radius:var(--radius)}
.stepper button:hover{background:var(--spruce-700)}
.stepper button[disabled]{opacity:.4;cursor:default}
.stepper output{min-width:5.4em;text-align:center;font-family:var(--f-data);font-weight:500;font-variant-numeric:tabular-nums}
.calc__out{display:grid;gap:14px;min-width:0}
.calc__label{font-weight:600;color:var(--on-dark-2)}
.calc__figure{font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,9vw,7rem);line-height:.95;color:var(--sodium);font-variant-numeric:tabular-nums;letter-spacing:.005em}
.meter{height:14px;background:var(--spruce-800);border-radius:1px;overflow:hidden}
.meter span{display:block;height:100%;background:var(--sodium);transition:width .2s}
.calc__loss{font-size:1.125rem;line-height:1.4;min-height:3em;text-wrap:pretty}
.calc__loss b{color:var(--sodium-2);font-weight:700}
.calc__cta{justify-self:start}

/* How it works */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1.1fr) 92px minmax(0,1fr);align-items:stretch;gap:0;margin-bottom:clamp(28px,4vw,44px)}
.node{background:var(--white);border:2px solid var(--frost);border-radius:var(--radius);padding:16px 18px;display:grid;gap:4px;align-content:start;min-width:0}
.node b{font-family:var(--f-display);font-weight:700;font-size:1.4375rem;line-height:1.1}
.node small{font-size:.9063rem;line-height:1.35;color:var(--ink-2)}
.node--us{background:var(--spruce-900);border-color:var(--spruce-900);color:var(--on-dark)}
.node--us small{color:var(--on-dark)}
.wire{position:relative;display:grid;place-items:center;font-family:var(--f-data);font-size:.6875rem;line-height:1.25;color:var(--ink-3);text-align:center;padding-inline:4px}
.wire::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink-3)}
.wire::after{content:"";position:absolute;right:0;top:50%;width:9px;height:9px;border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);transform:translateY(calc(-50% + 1px)) rotate(45deg)}
.wire span{position:relative;background:var(--snow);padding:2px 3px;z-index:1}
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.seq{display:grid;gap:18px;counter-reset:s}
.seq li{display:grid;grid-template-columns:40px 1fr;gap:12px;counter-increment:s}
.seq li::before{content:counter(s);font-family:var(--f-display);font-weight:800;font-size:2.125rem;line-height:1;color:var(--spruce-700)}
.seq b{display:block;font-weight:700}
.seq p{color:var(--ink-2)}
.specs{width:100%;border-collapse:collapse;font-size:.9688rem;line-height:1.38}
.specs th,.specs td{text-align:left;padding:.62rem 0;border-bottom:1px solid var(--frost-2);vertical-align:top}
.specs th{font-weight:600;width:32%;padding-right:1em}
.specs td{color:var(--ink-2)}

/* Comparison */
.compare{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.3}
.compare th,.compare td{padding:.8rem .9rem;text-align:left;border-bottom:1px solid var(--frost-2);vertical-align:top}
.compare thead th{font-family:var(--f-display);font-weight:700;font-size:1.25rem;line-height:1.1;vertical-align:bottom;border-bottom:2px solid var(--ink)}
.compare tbody th{font-weight:600;padding-left:0;width:34%}
.compare .us{background:var(--spruce-900);color:var(--on-dark);font-weight:600;border-bottom-color:var(--spruce-700)}
.compare td{color:var(--ink-2)}
.compare .no{color:var(--risk);font-weight:600}

/* Integrators */
.signal{background:var(--sodium);color:var(--ink)}
.signal__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:start}
.signal .lede{color:var(--ink)}
.signal__copy{display:grid;gap:16px;justify-items:start;min-width:0}
.tick{display:grid;gap:12px}
.tick li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:baseline}
.tick li::before{content:"";width:10px;height:10px;background:var(--ink);transform:rotate(45deg);justify-self:center}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,5vw,72px)}
.faq details{border-bottom:1px solid var(--frost-2)}
.faq details:first-child{border-top:1px solid var(--frost-2)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:.95rem 0;font-weight:600;font-size:1.0938rem;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-data);font-size:1.25rem;line-height:1;color:var(--ink-3);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:1rem;color:var(--ink-2);max-width:66ch}
.faq details p+p{margin-top:-.4rem}

/* Final call and footer */
.final{background:var(--spruce-950);color:var(--on-dark)}
.final__in{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:24px clamp(24px,5vw,72px);align-items:center;padding-block:clamp(48px,7vw,84px)}
.final .lede{color:var(--on-dark-2);margin-top:12px}
.final__cta{display:grid;gap:12px;justify-items:center}
.final .link-btn{color:var(--on-dark);font-size:.9688rem}
.foot{background:var(--spruce-950);color:var(--on-dark-2);font-size:.875rem;line-height:1.5;border-top:1px solid var(--spruce-800)}
.foot__in{display:grid;gap:14px;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px))}
.foot .brand{color:var(--on-dark);font-size:1.25rem}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{text-underline-offset:3px}

/* Phone call-to-action */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--spruce-950);padding:10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gutter);display:none;transition:transform .2s}
.sticky.is-hidden{transform:translateY(110%)}

/* Consent banner, only when an advertising tag is configured */
.consent-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;max-width:560px;margin-inline:auto;background:var(--white);color:var(--ink);padding:16px;border-radius:var(--radius);box-shadow:0 12px 34px rgb(7 28 26 / .4);display:grid;gap:12px;font-size:.9375rem;line-height:1.4}
.consent-bar div{display:flex;flex-wrap:wrap;gap:8px}
.consent-bar button{flex:1;min-height:44px;font-weight:600;border-radius:var(--radius);border:2px solid var(--spruce-900);background:var(--white)}
.consent-bar button[data-consent=granted]{background:var(--spruce-900);color:var(--on-dark)}

.notfound{padding-block:48px 96px;justify-items:start}

/* Legal pages */
.legal{background:var(--white);padding-block:clamp(36px,6vw,64px)}
.legal__in{max-width:760px;margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r);display:grid;gap:14px}
.legal h1{font-size:clamp(2.5rem,5vw,3.5rem);color:var(--ink)}
.legal h2{font-size:1.75rem;margin-top:18px}
.legal ul{display:grid;gap:6px;list-style:disc;padding-left:1.25em}
.legal a{text-underline-offset:3px}

@media (max-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .check{box-shadow:6px 6px 0 var(--spruce-950)}
  .morning,.calc,.how,.signal__grid,.faq{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:minmax(0,1fr);gap:0}
  .wire{height:58px}
  .wire::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto}
  .wire::after{left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%) rotate(135deg)}
  .final__in{grid-template-columns:minmax(0,1fr)}
  .final__cta{justify-items:start}
  .sticky{display:block}
  .foot__in{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:700px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .changes{grid-template-columns:minmax(0,1fr)}
  .check__body{min-height:0}

  /* The first question comes right after the promise; the proofs follow the check. */
  .hero__grid{gap:16px;padding-top:4px}
  .hero__copy{display:contents}
  .hero .eyebrow{display:none}
  h1{order:1;font-size:clamp(2.375rem,11.2vw,3rem);line-height:1.03}
  .hero__sub{order:2;font-size:1.0625rem;line-height:1.42}
  .check{order:3;margin-top:6px}
  .proofs{order:4;margin-top:14px}
  .hero__note{order:5}
  .strip{font-size:.875rem}
  .top__in{padding-block:12px}

  /* The comparison, one row at a time, so the last column is never off-screen. */
  .compare{min-width:0;display:block;font-size:.9688rem}
  .compare thead{display:none}
  .compare tbody,.compare tr,.compare tbody th{display:block}
  .compare tr{padding:.85rem 0;border-bottom:1px solid var(--frost-2)}
  .compare tbody th{width:auto;padding:0 0 .45rem;border:0;font-size:1.0313rem}
  .compare td{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:.7em;padding:.26rem 0;border:0}
  .compare td::before{font-size:.8438rem;font-weight:500;color:var(--ink-3);line-height:1.35}
  .compare td.us{margin-top:.3rem;padding:.42rem .55rem;border-radius:var(--radius)}
  .compare td.us::before{color:var(--on-dark-2)}
  :lang(fr) .compare td:nth-of-type(1)::before{content:"Courriel et manuel"}
  :lang(fr) .compare td:nth-of-type(2)::before{content:"API maison"}
  :lang(fr) .compare td:nth-of-type(3)::before{content:"Bâtiment au Courant"}
  :lang(en) .compare td:nth-of-type(1)::before{content:"Email and manual"}
  :lang(en) .compare td:nth-of-type(2)::before{content:"Your own API"}
  :lang(en) .compare td:nth-of-type(3)::before{content:"Bâtiment au Courant"}
}
@media (max-width:560px){
  .top__right .btn{display:none}
}
@media (max-width:440px){
  .fields{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:360px){
  .brand{font-size:1.3125rem}
}