/* Scientinel · Observatory theme
   Palette taken from the logo: orange #E84E18, red #E9443A, amber #F0903C, yellow #FCCC10, ink.
   Blue is reserved for "consensus" data (as in the Sea Levels icon); orange/red for the high-end case.
   Light is the base; dark applies when the visitor's device asks for it, or when forced in Design settings. */

@font-face{font-family:"Space Grotesk";src:url(../fonts/space-grotesk-latin-wght.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-wght.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  --brand:#E84E18;--red:#E9443A;--amber:#F0903C;--yellow:#FCCC10;
  --r:20px;--wrap:1200px;--nav-h:76px;
  --bg:#f5f7fa;--bg2:#ffffff;--panel:#eef2f6;--line:#dbe2ea;--txt:#0b1016;--txt2:#384350;--mute:#5d6878;
  --amb-txt:#b4600a;--ice:#1f8fd1;
  --hair:#0b10160f;--ghost:#0b101608;--hover:#0b101633;--nav:#f5f7facc;--pill:#ffffffcc;
  --stripes:.75;--ov1:35%;--ov2:30%;--ov3:55%;--ov4:78%;
  --ok-bg:#12a15012;--ok-line:#12a15055;--ok-txt:#0b6b35;--live:#0f8a45;--err:#b42318;
  --map-a:#c9e4f5;--map-b:#ffffff;--glow:#e84e1818;--sel:#e84e1814;--shadow:0 20px 50px -30px #0b101640;
  --mark:url(../images/mark.svg?v=dd85f615);--mark-o:.11;--mark-bg-o:.16;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#07090c;--bg2:#0d1117;--panel:#11161e;--line:#1f2732;--txt:#e8ecf1;--txt2:#c3cbd6;--mute:#8b96a5;
  --amb-txt:#F0903C;--ice:#5ec8ff;
  --hair:#ffffff10;--ghost:#ffffff08;--hover:#ffffff33;--nav:#07090cb3;--pill:#0d1117cc;
  --stripes:.9;--ov1:40%;--ov2:33%;--ov3:58%;--ov4:80%;
  --ok-bg:#7dffb014;--ok-line:#7dffb055;--ok-txt:#b6ffd0;--live:#7dffb0;--err:#ff8a7a;
  --map-a:#0f3b55;--map-b:#0a121b;--glow:#e84e1830;--sel:#e84e1820;--shadow:none;
  --mark:url(../images/mark-dark.svg?v=dd85f615);--mark-o:.17;--mark-bg-o:.065}}
:root[data-theme="dark"]{
  --bg:#07090c;--bg2:#0d1117;--panel:#11161e;--line:#1f2732;--txt:#e8ecf1;--txt2:#c3cbd6;--mute:#8b96a5;
  --amb-txt:#F0903C;--ice:#5ec8ff;
  --hair:#ffffff10;--ghost:#ffffff08;--hover:#ffffff33;--nav:#07090cb3;--pill:#0d1117cc;
  --stripes:.9;--ov1:40%;--ov2:33%;--ov3:58%;--ov4:80%;
  --ok-bg:#7dffb014;--ok-line:#7dffb055;--ok-txt:#b6ffd0;--live:#7dffb0;--err:#ff8a7a;
  --map-a:#0f3b55;--map-b:#0a121b;--glow:#e84e1830;--sel:#e84e1820;--shadow:none;
  --mark:url(../images/mark-dark.svg?v=dd85f615);--mark-o:.17;--mark-bg-o:.065}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
/* Ghost's search and Portal overlays have no color-scheme of their own; without this the browser paints
   their iframe solid white in dark mode. */
#sodo-search-root iframe,#ghost-portal-root iframe{color-scheme:light}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font:16px/1.6 var(--gh-font-body,"Space Grotesk"),system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px}.skip:focus{left:12px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.wrap{max-width:var(--wrap);margin:auto;padding:0 24px}
.narrow{max-width:760px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:15px;line-height:1.2;transition:.25s;cursor:pointer;border:0;text-align:center}
.btn-p{background:linear-gradient(135deg,var(--brand),var(--amber));color:#1a0800}
.btn-p:hover{box-shadow:0 0 0 6px var(--glow);transform:translateY(-1px)}
.btn-g{border:1px solid var(--line);color:var(--txt);background:var(--ghost)}
.btn-g:hover{border-color:var(--mute)}
.icon-btn{background:none;border:0;color:var(--mute);padding:8px;border-radius:10px;cursor:pointer;display:inline-grid;place-items:center}
.icon-btn:hover{color:var(--txt);background:var(--ghost)}

/* header */
.nav-top{position:fixed;inset:0 0 auto;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--nav);border-bottom:1px solid var(--hair)}
.nav-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--nav-h)}
.brand{--logo-h:50px;display:flex;align-items:center;gap:calc(var(--logo-h) * .187)}   /* lockup proportions of logo.svg */
.logo-mark{display:block;width:var(--logo-h);height:var(--logo-h)}
.logo-mark img,.logo-mark picture{display:block;width:100%;height:100%}
.logo-word img{display:block;height:calc(var(--logo-h) * .611);width:auto}
.links{display:flex;gap:26px;font-size:14px;color:var(--mute)}
.links a:hover,.links a.current{color:var(--txt)}
.nav-end{display:flex;align-items:center;gap:6px}
.nav-cta{padding:10px 18px;font-size:14px;margin-left:6px}
.burger{display:none}
body:not(.home-template) main{padding-top:var(--nav-h)}

/* hero */
/* The hero fills the screen, with its text starting just under the nav (the CO2 clock floats in its top-right corner). */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-start;padding:calc(var(--nav-h) + clamp(16px,3.5svh,36px)) 0 clamp(28px,6svh,90px);overflow:hidden}
#stripes{position:absolute;inset:0;display:flex;opacity:var(--stripes)}
/* The logo mark as a slow-turning, dimmed emblem behind the hero: the site's signature. */
.hero-mark{position:absolute;right:-16vw;top:46%;width:min(58vw,800px);aspect-ratio:1;transform:translateY(-50%);
  background:var(--mark) center/contain no-repeat;opacity:var(--mark-o);pointer-events:none;animation:mark-turn 240s linear infinite}
.hero:after{z-index:0}.hero-mark{z-index:0}.hero .wrap{z-index:2}
/* Brand rule: the mark only ever turns counter-clockwise, like a Northern Hemisphere tropical cyclone. */
@keyframes mark-turn{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(-360deg)}}
@keyframes mark-spin{to{transform:rotate(-360deg)}}
#stripes i{flex:1;height:100%}
/* Veil over the stripes: light behind the text, deeper lower down, and only the last stretch blends into the
   page so the next section joins without an edge. */
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) var(--ov1),transparent) 0%,color-mix(in srgb,var(--bg) var(--ov2),transparent) 25%,color-mix(in srgb,var(--bg) var(--ov3),transparent) 62%,color-mix(in srgb,var(--bg) var(--ov4),transparent) 88%,var(--bg) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;margin:0 auto}   /* .wrap's margin:auto would centre it vertically here */
.pill{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--pill);border-radius:999px;padding:6px 14px 6px 8px;font-size:13px;color:var(--mute)}
.pill b{background:var(--brand);color:#fff;border-radius:999px;padding:2px 8px;font-size:11px;letter-spacing:.06em}
.signal{max-width:100%;align-items:stretch;gap:0;padding:0;overflow:hidden}
/* Left segment: the SIGNAL label with a live dot, divided from the message by a hairline. */
.signal b{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 14px 0 16px;border-right:1px solid var(--line);
  background:none;border-radius:0;color:var(--brand);font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em}
.signal b:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 transparent;animation:sig-pulse 2s ease-out infinite}
/* A radar ping: a brand-coloured ring radiates from the dot and fades, while the dot glows and swells a little. */
@keyframes sig-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 75%,transparent),0 0 8px 1px color-mix(in srgb,var(--brand) 70%,transparent);transform:scale(1.15)}
  70%{box-shadow:0 0 0 10px transparent,0 0 2px 0 transparent;transform:scale(1)}
  100%{box-shadow:0 0 0 10px transparent,0 0 2px 0 transparent;transform:scale(1)}}
.signal .sig-box{padding:8px 18px 8px 14px;align-self:center}
/* Every message sits invisibly in the same grid cell, so the box always has the size of the longest one
   and typing never moves the page. The typed text is drawn on top in that cell. */
.sig-box{display:inline-grid;min-width:0;flex:1}
.sig-box>span{grid-area:1/1}
.sig-sizer{visibility:hidden}
.sig-sizer::after{content:"";display:inline-block;width:calc(.5em + 2px)}   /* room for the cursor after the longest message */
.sig-box,.sig-live{line-height:1.6}
.sig-live{color:var(--txt2);align-self:center}   /* the sizer holds the longest message; shorter ones sit in its middle */
/* Cursor = Space Grotesk cap height (0.7em), resting on the baseline, so it lines up with capitals and digits. */
.caret{display:inline-block;width:.5em;height:.7em;margin-left:2px;vertical-align:baseline;margin-right:calc(-.5em - 2px);background:var(--brand);border-radius:1px;animation:caret 1.05s steps(1) infinite}
.signal.typing .caret{animation:none}
@keyframes caret{50%{opacity:0}}
.js .signal:not(.ready) .sig-box{visibility:hidden}
@media (prefers-reduced-motion:reduce){.caret,.signal b:before,.hero-mark{animation:none}}
h1,h2,h3,h4{font-family:var(--gh-font-heading,"Space Grotesk"),system-ui,sans-serif}
h1{font-size:clamp(40px,7vw,92px);line-height:.98;letter-spacing:-.045em;font-weight:600}
/* The whole hero fits one screen on laptops: the headline and the gaps also scale with the screen's height. */
.hero h1{margin:clamp(14px,2.6svh,26px) 0 clamp(12px,2.2svh,22px);max-width:1000px;font-size:min(clamp(40px,7vw,92px),9.3svh)}
.hero .lede{max-width:720px}
.hero .cta-row{margin-top:clamp(18px,3.4svh,34px)}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--brand),var(--amb-txt));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--txt2);max-width:640px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* sections */
section{padding:110px 0;position:relative}
section.alt{background:var(--bg2)}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow:before{content:"";width:14px;height:14px;background:var(--mark) center/contain no-repeat;flex-shrink:0}
.eyebrow a:hover{color:var(--txt)}
h2{font-size:clamp(32px,4.4vw,56px);line-height:1.04;letter-spacing:-.035em;font-weight:600;max-width:820px}
.sub{color:var(--mute);max-width:620px;margin-top:16px;font-size:18px}
.more{margin-top:34px;display:flex;gap:10px;flex-wrap:wrap}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}

/* hero CO2: the latest Mauna Loa daily mean (from climate.services), rounded to whole ppm, as a flip clock that
   counts up from 280 ppm (pre-industrial; see site.js). It floats in the top-right corner of the hero text, so
   the motto, pill and headline wrap beside it; on phones too, just smaller. */
.hero{--co2-fs:clamp(72px,8.4vw,96px)}
.hero .co2{float:right;margin:0 0 24px 40px;position:relative;z-index:3}
.hero .motto{margin-top:0}
.co2{display:inline-flex;flex-direction:column;gap:10px;color:var(--txt)}
.co2+.motto{padding-top:8px}
.co2[hidden]{display:none}
/* The clock: the digit cards, with "ppm" in the bottom-right corner of the last card. */
.co2-clock{position:relative;display:flex;font-size:var(--co2-fs);font-family:var(--gh-font-heading,"Space Grotesk"),system-ui,sans-serif;font-weight:600;line-height:1}
.co2-val{display:flex;gap:.08em}
.co2-unit{position:absolute;right:9px;bottom:8px;z-index:3;font:500 max(9px,.082em)/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:#fff}
/* The caption sits centred under the clock on one line and never widens it (width:0 + min-width:100%). */
.co2-note{display:block;white-space:nowrap;text-align:center;width:0;min-width:100%;font-size:max(9px,calc(var(--co2-fs) * .105));letter-spacing:.06em}
.co2-note sub{font-size:.8em;vertical-align:baseline;position:relative;top:.2em}
.co2-note i{font-style:normal;margin:0 3px}
.co2-note .today{color:var(--brand)}
/* One flip-clock digit: static top (new) and bottom (old) halves; on a change the old top folds down, then
   the new bottom folds down over the old one. --fd-ms is set per change, so the flips slow with the count. */
.fd{--fd-bg:#151a21;--fd-ms:300ms;position:relative;width:.7em;height:1.16em;perspective:3.5em;color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:0;box-shadow:0 .06em .18em rgba(0,0,0,.28);border-radius:.09em}
.fd>span{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--fd-bg);backface-visibility:hidden}
.fd>span>i{display:block;height:1.16em;line-height:1.16em;text-align:center;font-style:normal}
.fd-top,.fd-ftop{top:0;border-radius:.09em .09em 0 0;transform-origin:50% 100%}
.fd-bot,.fd-fbot{bottom:0;border-radius:0 0 .09em .09em;transform-origin:50% 0}
.fd-bot>i,.fd-fbot>i{margin-top:-.58em}
.fd-ftop,.fd-fbot{visibility:hidden;z-index:1}
/* The split between the two cards: a dark groove with a faint lit edge below. */
.fd:after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;transform:translateY(-50%);background:#000;opacity:.75;
  box-shadow:0 1px 0 rgba(255,255,255,.05);z-index:2}
.fd.go .fd-ftop,.fd.go .fd-fbot{visibility:visible}
.fd.go .fd-ftop{animation:fd-down calc(var(--fd-ms) / 2) ease-in both}
.fd.go .fd-fbot{animation:fd-up calc(var(--fd-ms) / 2) ease-out calc(var(--fd-ms) / 2) both}
@keyframes fd-down{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
@keyframes fd-up{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
/* A light sweep on the flaps: the falling top half catches the light as it tips towards you, the rising
   bottom half lands lit and settles back to matte. Same timing as the flip, so slow flips glint slowly. */
.fd-ftop:after,.fd-fbot:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}
.fd-ftop:after{background:linear-gradient(to bottom,rgba(255,255,255,0) 10%,rgba(255,255,255,.34))}
.fd-fbot:after{background:linear-gradient(to bottom,rgba(255,255,255,.28),rgba(255,255,255,0) 80%)}
.fd.go .fd-ftop:after{animation:fd-glint-in calc(var(--fd-ms) / 2) ease-in both}
.fd.go .fd-fbot:after{animation:fd-glint-out calc(var(--fd-ms) / 2) ease-out calc(var(--fd-ms) / 2) both}
@keyframes fd-glint-in{from{opacity:0}to{opacity:1}}
@keyframes fd-glint-out{from{opacity:1}to{opacity:0}}

/* hero motto + climate security */
.motto{color:var(--txt2);font-size:13px;letter-spacing:.18em;margin-bottom:18px}
.motto span{white-space:nowrap}   /* on phones it breaks after the comma, never inside "Defence & Analytics" */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:50px}
.sec{background:var(--bg2);padding:28px 26px;transition:background .25s}
section.alt .sec{background:var(--bg)}
.sec:hover{background:var(--panel)}
.sec .n{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--brand)}
.sec h3{font-size:22px;letter-spacing:-.02em;line-height:1.2;margin:18px 0 8px}
.sec p{color:var(--mute);font-size:15px}
.sec-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
.sec-foot p{color:var(--txt2);max-width:560px}
.sec-foot .cta-row{margin-top:0}

/* explorer */
.explorer{margin-top:50px;display:grid;grid-template-columns:340px 1fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--bg2);box-shadow:var(--shadow)}
.ctrl{padding:28px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:22px}
.ctrl .lbl{display:block;margin-bottom:8px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{background:var(--panel);border:1px solid var(--line);color:var(--mute);border-radius:8px;padding:8px 11px;font-weight:500;font-size:13px;cursor:pointer;transition:.2s}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--sel);border-color:var(--brand);color:var(--txt)}
.out{padding:28px 32px;display:flex;flex-direction:column;gap:22px;min-width:0}
.out-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.out-head h3{font-size:22px;font-weight:600;letter-spacing:-.02em;max-width:460px;line-height:1.25}
.gap-figure{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.gap-figure b{font-size:40px;line-height:1;font-weight:600;letter-spacing:-.03em;background:linear-gradient(90deg,var(--brand),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
.gap-figure .mono{font-size:10.5px;margin-top:6px}
/* Sea-level rows: label | track with range bar and median marker | value */
.sl-rows{display:flex;flex-direction:column;gap:14px}
.sl-row{display:grid;grid-template-columns:170px 1fr 136px;gap:16px;align-items:center}
.sl-lbl b{display:block;font-size:14px;font-weight:600}
.sl-lbl small{display:block;font-size:12px;color:var(--mute);line-height:1.3}
.sl-row .track{position:relative;height:24px;background:var(--panel);border-radius:6px}
.sl-row .rng{position:absolute;top:5px;bottom:5px;border-radius:4px;transition:left .6s cubic-bezier(.2,.8,.2,1),width .6s cubic-bezier(.2,.8,.2,1)}
.sl-row .mid{position:absolute;top:1px;bottom:1px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--txt);transition:left .6s cubic-bezier(.2,.8,.2,1)}
.sl-row.c .rng{background:var(--ice);opacity:.85}
.sl-row.h1 .rng{background:linear-gradient(90deg,var(--amber),var(--brand))}
.sl-row.h2 .mid{width:12px;height:12px;top:6px;margin-left:-6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 25%,transparent)}
.sl-row.t .rng{background:repeating-linear-gradient(90deg,var(--mute) 0 6px,transparent 6px 10px);opacity:.6;top:10px;bottom:10px}
.sl-row.t .mid{background:var(--mute)}
.sl-val{text-align:right;font-family:"JetBrains Mono",monospace}
.sl-val b{display:block;font-size:15px;font-weight:500;color:var(--txt)}
.sl-val small{font-size:11px;color:var(--mute)}
.sl-scale{position:relative;height:16px;margin:-4px 152px 0 186px;font-size:10px}
.sl-scale span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.sl-scale span:first-child{transform:none}
.insight{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;color:var(--txt2);font-size:15px}
.insight strong{color:var(--txt)}
.sources{font-size:12px;color:var(--mute);max-width:560px;line-height:1.5}
.sources a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.out-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

/* cards */
.vec{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:30px;position:relative;overflow:hidden;transition:.3s}
section.alt .card{background:var(--bg)}
.card:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);transform:translateY(-3px)}
.card .n{font-family:"JetBrains Mono",monospace;color:var(--brand);font-size:13px}
.card h3{font-size:26px;margin:40px 0 10px;letter-spacing:-.02em;line-height:1.15}
.card p{color:var(--mute);font-size:15px}
.card ul{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.card li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;display:flex;gap:10px}
.card li:before{content:"→";color:var(--brand)}

/* risks */
.risks{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:50px}
.risks li{background:var(--bg);padding:26px 22px;display:flex;flex-direction:column;gap:6px;min-height:130px;transition:.25s}
.risks li:hover{background:var(--bg2)}
.risks b{font-size:19px;font-weight:600;letter-spacing:-.01em}
.risks span{font-size:14px;color:var(--mute)}

/* tools */
.tools{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;margin-top:50px}
.tool-big{background:radial-gradient(circle at 70% 30%,var(--map-a),var(--map-b) 70%);min-height:460px;display:flex;flex-direction:column;justify-content:flex-end}
section.alt .tool-big{background:radial-gradient(circle at 70% 30%,var(--map-a),var(--map-b) 70%)}
.tool-big svg{position:absolute;inset:0;width:100%;height:100%;opacity:.85;-webkit-mask-image:linear-gradient(#000 45%,transparent 75%);mask-image:linear-gradient(#000 45%,transparent 75%)}
.tool-big>*:not(svg){position:relative}
.tool-big h3,.app-card h3{margin:0 0 10px}
/* Card pills (H++ scenario, App Store, Live · Web app): one brand style, light and dark via the tokens. */
.tag{display:inline-block;align-self:flex-start;font:500 11px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;margin-bottom:12px;color:var(--brand);
  border:1px solid color-mix(in srgb,var(--brand) 38%,transparent);background:color-mix(in srgb,var(--brand) 9%,transparent)}
/* Sea Levels card: copy on the left (title block at the top, buttons at the bottom),
   the phone filling the card's full height on the right. */
.app-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:stretch;padding:30px 30px 30px 34px}
.app-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.app-copy .app-desc{margin-bottom:18px}
.card .app-facts{list-style:none;margin:0 0 22px;border-top:1px solid var(--line);width:100%}
.card .app-facts li{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.card .app-facts li:before{content:none}
.app-facts b{display:block;font-size:15px;color:var(--txt);font-weight:600}
.app-facts span{color:var(--mute);font-size:13.5px}
.app-links{display:flex;flex-direction:column;gap:8px;margin-top:auto;width:100%}
.app-links .btn{padding:12px 16px;font-size:14px;width:100%}
.phone{position:relative;border-radius:34px;padding:8px;background:#0b0d10;box-shadow:0 30px 60px -25px #e84e1866,inset 0 0 0 1px #ffffff22}
/* Phone at true iPhone proportions (about 2.17:1). Default: fixed width. */
.app-card .phone{width:240px;aspect-ratio:1/2.17;align-self:end;padding:0}
.app-card .phone video{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);aspect-ratio:auto}
/* Side by side with the map card: the card takes the row's height (a size container, so it adds nothing to the
   row itself) and the phone fills that height exactly, its width following from the proportions. */
@media (max-width:1180px){.tools{grid-template-columns:1fr}}
@media (min-width:1181px){
  .app-card{container-type:size}
  .app-card .phone{width:calc(100cqh / 2.17);height:100cqh;aspect-ratio:auto;align-self:start}   /* cqh = the card's content box */
}
.phone video{width:100%;aspect-ratio:9/16;border-radius:27px;background:#000;object-fit:cover}

/* Sea-level map card: real Sea Levels App screenshots (App Store), iPad landscape with the iPhone in front */
.map-card{padding:0;display:flex;flex-direction:column;justify-content:flex-start}
.map-shots{position:relative;padding:22px 22px 0;background:radial-gradient(circle at 60% 40%,var(--map-a),var(--map-b) 75%)}
.map-ipad{width:100%;border-radius:14px;border:6px solid #0b0d10;box-shadow:0 24px 50px -24px #0006}
.map-iphone{position:absolute;right:10px;bottom:-26px;width:27%;max-width:130px;border-radius:18px;border:5px solid #0b0d10;box-shadow:0 20px 40px -16px #0008;transition:transform .4s}
.map-card:hover .map-iphone{transform:translateY(-6px) rotate(2deg)}
.map-copy{padding:40px 30px 30px}
.map-copy h3{margin:0 0 10px}
.map-copy .fine{margin-top:12px}

/* Climate Services: full-width card, browser window with the installed-app phone in front */
.cs-card{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;padding:40px}
.cs-copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cs-copy h3{margin:0 0 6px}
.card .cs-feeds{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 8px;border:0}
.cs-feeds li{border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:13px;background:var(--panel);display:inline-flex;gap:6px;align-items:baseline}
.cs-feeds li:before{content:none}
.cs-feeds small{font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.cs-feeds li:first-child{border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.cs-copy .fine{margin-bottom:14px}
.cs-visual{position:relative;display:block;padding:0 0 40px 0}
.cs-browser{border-radius:14px;overflow:hidden;background:#0a0a0a;border:1px solid #ffffff1f;box-shadow:0 30px 70px -30px #3ddc6a55;transition:transform .4s}
.cs-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#16181c;border-bottom:1px solid #ffffff14}
.cs-bar i{width:9px;height:9px;border-radius:50%;background:#3a3d44}
.cs-bar span{margin-left:10px;flex:1;max-width:260px;background:#0d0f12;border-radius:6px;padding:3px 10px;font:500 11px "JetBrains Mono",monospace;color:#8b96a5}
.cs-browser img{width:100%}
.cs-phone{position:absolute;right:-14px;bottom:0;width:30%;max-width:170px;padding:6px;border-radius:26px;transition:transform .4s}
.cs-phone img{border-radius:21px;width:100%}
.cs-visual:hover .cs-browser{transform:translateY(-3px)}
.cs-visual:hover .cs-phone{transform:translateY(-8px) rotate(-1.5deg)}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:50px}
.q{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:30px;font-size:20px;line-height:1.4;letter-spacing:-.01em;position:relative}
.q:before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:3px;border-radius:3px;background:linear-gradient(var(--yellow),var(--brand))}

/* post cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.pcard{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg);transition:.3s;display:flex;flex-direction:column}
.listing .pcard{background:var(--bg2)}
.pcard:hover{border-color:var(--hover);transform:translateY(-2px)}
.pcard img,.post-ph{width:100%;aspect-ratio:16/10;object-fit:cover}
.post-ph{background:radial-gradient(circle at 30% 30%,var(--map-a),var(--map-b))}
.pcard>div{padding:20px}
.pcard h3{font-size:19px;line-height:1.3;margin:8px 0;letter-spacing:-.01em}
.pcard p{font-size:14.5px;color:var(--mute)}
.pcard:hover h3{color:var(--brand)}

/* follow (newsletter + fediverse) */
.follow{padding:90px 0;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.fcard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.fcard h3{font-size:26px;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.fcard p{color:var(--mute)}
.inline-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.inline-form input{flex:1;min-width:200px}
.handle{display:flex;align-items:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.handle code{font:500 16px "JetBrains Mono",monospace;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;flex:1;min-width:0;overflow-wrap:anywhere}

/* contact */
.contact{background:radial-gradient(ellipse at 20% 0%,var(--glow),transparent 60%),var(--bg2);border-top:1px solid var(--line);overflow:hidden}
.contact:before{content:"";position:absolute;left:-180px;bottom:-200px;width:560px;height:560px;background:var(--mark) center/contain no-repeat;opacity:var(--mark-bg-o);pointer-events:none}
.contact .wrap{position:relative}
.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px}
.promise{list-style:none;margin-top:30px}
.promise li{padding:14px 0;border-top:1px solid var(--line);display:flex;gap:14px;color:var(--txt2)}
.promise b{color:var(--brand);font-family:"JetBrains Mono",monospace;font-size:13px;min-width:28px;padding-top:2px}
.cform{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.cform.empty{display:block;color:var(--txt2)}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Form labels in brand colour, on every form (contact, explorer choices, and any form using .f or a plain <form> label). */
.f label,.ctrl .lbl,form label:not(.sr){color:var(--brand)}
.f.full{grid-column:1/-1}
input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:12px 14px;font-size:15px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-5000px}
.fine{font-size:13px;color:var(--mute)}

/* busy buttons */
.btn .spinner{display:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.btn.is-busy{cursor:wait;opacity:.85}.btn.is-busy .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* notice dialog: confirmation / error for the forms */
.notice{margin:auto;width:min(460px,calc(100vw - 32px));border:1px solid var(--line);border-radius:24px;padding:40px 32px 28px;
  background:var(--bg2);color:var(--txt);text-align:center;overflow:hidden;box-shadow:0 40px 90px -30px #0b101666}
.notice::backdrop{background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.notice[open]{animation:notice-in .35s cubic-bezier(.2,.8,.2,1)}
.notice[open]::backdrop{animation:fade-in .35s}
@keyframes notice-in{from{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes fade-in{from{opacity:0}}
.notice-bar{position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--yellow),var(--amber),var(--brand),var(--red))}
.notice[data-state="err"] .notice-bar{background:linear-gradient(90deg,var(--red),var(--brand))}
.notice-x{position:absolute;top:14px;right:14px}
.notice-badge{position:relative;width:76px;height:76px;margin:0 auto 18px}
.notice-badge img{width:76px;height:76px;animation:mark-spin 40s linear infinite}
.notice-state{position:absolute;right:-4px;bottom:-4px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font:700 16px/1 "Space Grotesk",sans-serif;box-shadow:0 0 0 4px var(--bg2)}
.notice[data-state="ok"] .notice-state{background:linear-gradient(135deg,var(--brand),var(--amber))}
.notice[data-state="ok"] .notice-state:before{content:"✓"}
.notice[data-state="err"] .notice-state{background:var(--red)}
.notice[data-state="err"] .notice-state:before{content:"!"}
.notice-kicker{color:var(--brand);margin-bottom:8px}
.notice[data-state="err"] .notice-kicker{color:var(--err)}
.notice h3{font-size:28px;line-height:1.1;letter-spacing:-.03em;font-weight:600;margin-bottom:10px}
.notice-text{color:var(--txt2);font-size:16px;max-width:360px;margin:0 auto}
.notice-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
@media (prefers-reduced-motion:reduce){.notice[open],.notice[open]::backdrop,.notice-badge img,.btn .spinner{animation:none}}

/* footer: brand, site links, our tools, connect; legal bar below */
.site-footer{position:relative;overflow:hidden;border-top:1px solid var(--line);background:var(--bg2);color:var(--mute);font-size:14px}
.site-footer:after{content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;background:var(--mark) center/contain no-repeat;opacity:calc(var(--mark-bg-o) * 1.1);pointer-events:none}
.site-footer .wrap{position:relative;z-index:1}
.foot-stripes{display:flex;height:6px}
.foot-stripes i{flex:1}
.foot-grid{display:grid;grid-template-columns:1.35fr .8fr 1.5fr 1fr;gap:48px;padding-top:56px;padding-bottom:44px}
.site-footer .brand{--logo-h:44px}
.foot-motto{margin:18px 0 12px;color:var(--txt2);font-size:10.5px;letter-spacing:.08em;white-space:nowrap}
.foot-blurb{max-width:320px;line-height:1.55}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-col h2{font-size:11px;letter-spacing:.14em;color:var(--txt);margin-bottom:6px;font-weight:500}
.foot-col>a:not(.btn):not(.tool-link){color:var(--txt2);transition:color .2s}
.foot-col>a:not(.btn):not(.tool-link):hover,.foot-col a.current{color:var(--brand)}
.tool-link{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;width:100%;padding:12px;margin:0 -12px;border-radius:14px;border:1px solid transparent;transition:.25s}
.tool-link:hover{background:var(--panel);border-color:var(--line)}
.tool-link img{width:44px;height:44px;border-radius:11px;box-shadow:0 6px 16px -8px #0007}
.tool-link b{display:block;color:var(--txt);font-size:15px;font-weight:600}
.tool-link small{display:block;font-size:13px;line-height:1.4;margin:2px 0 4px}
.tool-link code{font:500 11.5px "JetBrains Mono",monospace;color:var(--brand)}
.foot-connect .btn{padding:11px 18px;font-size:14px;margin-bottom:4px}
.foot-handle{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:0;cursor:copy;text-align:left}
.foot-handle .mono{font-size:10.5px}
.foot-handle code{font:500 13px "JetBrains Mono",monospace;color:var(--txt2);overflow-wrap:anywhere}
.foot-handle:hover code{color:var(--brand)}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;padding-bottom:26px;border-top:1px solid var(--line);font-size:13px}
.foot-top{color:var(--txt2)}.foot-top:hover{color:var(--brand)}

/* articles & listings */
.listing{padding-top:56px;padding-bottom:90px}
.listing .posts{margin-top:0}

/* Page header band: aligned to the site grid (same left edge as the logo), with the logo mark cropped
   into the right edge as a watermark. Used by pages, posts, the journal, tags, authors and errors. */
.page-hero{position:relative;overflow:hidden;padding:72px 0 52px;background:var(--bg2);border-bottom:1px solid var(--line)}
.page-hero:after{content:"";position:absolute;right:-140px;top:50%;width:520px;height:520px;transform:translateY(-50%);
  background:var(--mark) center/contain no-repeat;opacity:.10;pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(38px,5.6vw,72px);line-height:1.02;letter-spacing:-.04em;max-width:900px;margin-top:14px}
.page-hero .lede{margin-top:20px;max-width:680px}
.page-hero-tall{min-height:60vh;display:flex;align-items:center}
.page-hero-tall .cta-row{margin-top:30px}
.crumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--brand)}.crumb a:hover{color:var(--txt)}
.crumb i{font-style:normal;color:var(--line)}
.byline{display:flex;align-items:center;gap:14px;margin-top:28px}
.byline-faces{display:flex}
.byline-faces img,.byline-init{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);margin-left:-10px;background:var(--bg2)}
.byline-init{background:var(--bg2) url("../images/mark.svg?v=dd85f615") center/70% no-repeat}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .byline-init{background-image:url("../images/mark-dark.svg?v=dd85f615")}}
:root[data-theme="dark"] .byline-init{background-image:url("../images/mark-dark.svg?v=dd85f615")}
.byline-faces>:first-child{margin-left:0}
.byline-text{display:flex;flex-direction:column;gap:3px}
.byline-by{font-size:16px;color:var(--txt);font-weight:500}
.byline-by a{color:inherit;border-bottom:1px solid var(--line);transition:.2s}.byline-by a:hover{color:var(--brand);border-color:var(--brand)}
.author-head{display:flex;gap:24px;align-items:center}
.author-head img{border-radius:50%;width:88px;height:88px;object-fit:cover}

/* Page body: a sticky side column on the site grid, reading column beside it. */
.page-body{display:grid;grid-template-columns:220px minmax(0,740px);gap:64px;padding-top:56px;padding-bottom:40px}
.page-main{min-width:0;grid-column:2}   /* stays in the reading column even when the side column is hidden */
.page-main .prose{padding-bottom:30px}
.prose h2,.prose h3{scroll-margin-top:calc(var(--nav-h) + 24px)}
.toc,.post-meta{position:sticky;top:calc(var(--nav-h) + 28px);align-self:start;font-size:14px}
.toc .mono{margin-bottom:12px}
.toc nav{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.toc a{padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--mute);line-height:1.35;transition:.2s}
.toc a:hover{color:var(--txt)}
.toc a.on{color:var(--txt);border-left-color:var(--brand)}
.post-meta p{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--line);color:var(--txt2)}
.post-meta p a{color:var(--txt2)}.post-meta p a:hover{color:var(--brand)}
.post-meta .tag-row{padding-top:14px;border-top:1px solid var(--line);margin-bottom:0}
.feature{margin:0 0 40px}
.feature img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--r)}
.feature figcaption,.prose figcaption{font-size:13px;color:var(--mute);margin-top:10px;text-align:center}
.prose{font-size:18.5px;line-height:1.72;color:var(--txt2);padding-bottom:40px}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:32px;line-height:1.12;margin-top:2em;color:var(--txt)}
.prose h3{font-size:24px;line-height:1.2;margin-top:1.8em;color:var(--txt)}
.prose h4{font-size:19px;margin-top:1.6em;color:var(--txt)}
.prose strong{color:var(--txt)}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--txt)}
.prose ul,.prose ol{padding-left:1.3em}.prose li+li{margin-top:.45em}
.prose blockquote:not([class]){border-left:3px solid var(--brand);padding-left:20px;font-size:22px;line-height:1.4;color:var(--txt)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose img{border-radius:12px}
.prose sup{font-size:.7em}
.prose code{font:15px "JetBrains Mono",monospace;background:var(--panel);padding:2px 6px;border-radius:5px}
.prose pre{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;overflow-x:auto}
.prose pre code{background:none;padding:0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}
.prose.faq h2,.prose.faq h3{border-top:1px solid var(--line);padding-top:1.1em}
.kg-width-wide{position:relative;width:min(1000px,calc(100vw - 48px))}
.kg-width-full{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
.kg-width-full img{border-radius:0}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.tag-row a{font:500 12px "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);padding:6px 10px;border-radius:8px;color:var(--mute)}
.tag-row a:hover{border-color:var(--brand);color:var(--brand)}
.cta-box{margin:10px 0 50px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.cta-box p{color:var(--mute);font-size:15px}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:50px}

.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}*{transition-duration:0s!important}}

/* Large screens (iMac, external displays): a wider column and larger hero type, still capped by the screen's
   height so the hero fits one screen. */
@media (min-width:1600px){
  :root{--wrap:clamp(1200px,72vw,1600px)}
  .hero{--co2-fs:min(clamp(96px,5.6vw,132px),12svh)}
  .hero h1{font-size:min(clamp(92px,5.9vw,132px),9.3svh);max-width:none}
  .hero .lede{font-size:clamp(20px,1.1vw,24px);max-width:820px}
  .motto{font-size:clamp(13px,.75vw,16px)}
  .hero .pill{font-size:clamp(13px,.72vw,15px)}
  .hero .btn{font-size:clamp(15px,.8vw,18px);padding:.95em 1.6em}
}
@media (max-width:1000px){
  .links{display:none}.burger{display:inline-grid}
  .links.open{display:flex;flex-direction:column;gap:4px;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--bg);padding:14px 24px 22px;border-bottom:1px solid var(--line);font-size:17px}
  .links.open a{padding:8px 0}
  .tools{grid-template-columns:1fr}
  .page-body{grid-template-columns:1fr;gap:28px}
  .page-main{grid-column:auto}
  .toc{display:none}
  .post-meta{position:static;display:flex;flex-wrap:wrap;gap:0 28px}.post-meta p{border-top:0;padding:0}.post-meta .tag-row{width:100%;border-top:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
  .sec-grid{grid-template-columns:1fr 1fr}
  .cs-card{grid-template-columns:1fr;padding:30px}
  .cs-visual{max-width:620px}
  .risks{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav-cta{display:none}
  .explorer,.cgrid{grid-template-columns:1fr}.ctrl{border-right:0;border-bottom:1px solid var(--line)}
  .vec,.quotes,.posts{grid-template-columns:1fr}
    .out{padding:24px 20px}
  .sl-row{grid-template-columns:1fr auto;gap:6px 12px}.sl-row .track{grid-column:1/-1;grid-row:2}.sl-val{grid-row:1;grid-column:2}
  .sl-scale{margin:-2px 0 0}
  .gap-figure{align-items:flex-start;text-align:left}.gap-figure b{font-size:30px}
  .cform{grid-template-columns:1fr;padding:22px}
  section{padding:80px 0}
}
@media (max-width:560px){
  .hero{--co2-fs:clamp(44px,13.5vw,60px)}
  .hero .co2{gap:6px;margin:2px 0 14px 14px}
  .hero{padding-top:calc(var(--nav-h) + 20px)}
  .co2-unit{right:.1em;bottom:.08em;font-size:7px}.co2-note{font-size:9px;letter-spacing:.03em}.co2-atm{display:none}
  .app-card{grid-template-columns:1fr;padding:24px}.app-card .phone{width:min(240px,70%);margin:6px auto 0;order:-1;align-self:center}
  .app-copy .app-desc{max-width:none}
  .cs-card{padding:22px}.cs-phone{right:-6px;width:34%;margin:0}
  .risks{grid-template-columns:1fr}.risks li{min-height:0}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  nav.foot-col{flex-direction:row;flex-wrap:wrap;gap:8px 20px}nav.foot-col h2{width:100%;margin-bottom:0}.foot-bar{flex-direction:column;align-items:flex-start;gap:6px}
  .sec-grid{grid-template-columns:1fr}
  :root{--nav-h:64px}
  .brand{--logo-h:38px}
  .page-hero{padding:44px 0 36px}.page-hero:after{width:300px;height:300px;right:-110px}
  .hero-mark{width:120vw;right:-55vw;opacity:.12}
}
@media (max-width:360px){.hero .motto{font-size:11px;letter-spacing:.12em}.fcard{padding:24px}}