/* PowPlanet design system. Tokens first, then components.
   Source: approved demo (job7-design-demo, demo.css). External file only: the CSP forbids inline scripts and we keep styles out of the HTML too.
   Global element rules are wrapped in :where(.ds) so they carry no specificity and never touch pages that do not opt in with <body class="ds">.
   Fonts: Bricolage Grotesque and Geist, self-hosted, SIL OFL 1.1 (licences in /assets/fonts/). */

@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* Tokens */
:root{
  --snow:#F7F9FB; --paper:#FFFFFF; --ink:#0B1B2E; --ink-2:#14293F; --slate:#5B6B7F; --line:#DDE4EC;
  --glacier:#2F6FED; --sunset:#F2622E; --sunset-ink:#0B1B2E; --ok:#1A7F52; --warn:#B7791F;
  --p1:#E6F1FB; --p2:#BCD9F5; --p3:#8DBBEB; --p4:#4F8FDB; --p5:#1F5BB8; --p6:#0F3A82;
  --on-ink:#C6D3E0; --on-ink-2:#9FB3C8; --live:#58D39A;
  --r-card:12px; --r-sheet:20px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --f-display:"Bricolage Grotesque","Geist",system-ui,sans-serif;
  --f-ui:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 1px 2px rgba(11,27,46,.06),0 8px 24px rgba(11,27,46,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Opt-in page base: <body class="ds"> */
.ds,.ds *,.ds *::before,.ds *::after{box-sizing:border-box}
.ds{margin:0;background:var(--snow);color:var(--ink);font:400 16px/1.5 var(--f-ui);font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
.ds.has-bottomnav{padding-bottom:84px}
:where(.ds) :is(h1,h2,h3){font-family:var(--f-display);margin:0;letter-spacing:-.02em;line-height:1.05}
:where(.ds) a{color:var(--glacier)}
:where(.ds) :is(img,svg){max-width:100%}
:where(.ds) :focus-visible{outline:3px solid var(--glacier);outline-offset:2px;border-radius:6px}
.wrap{max-width:1100px;margin:0 auto;padding:0 var(--s4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s4);top:-80px;z-index:100;background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:0 20px;min-height:44px;display:inline-flex;align-items:center;font:600 15px var(--f-ui);text-decoration:none}
.skip:focus{top:var(--s3)}

/* Chips */
.chips{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s3) 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:var(--r-pill);padding:0 14px;font:500 14px var(--f-ui);white-space:nowrap;cursor:pointer;text-decoration:none}
.chip[aria-pressed=true],.chip[aria-current=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--ink);font:600 15px var(--f-ui);cursor:pointer;text-decoration:none;transition:transform .15s var(--ease),background .15s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--sunset);border-color:var(--sunset);color:var(--sunset-ink)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost-light{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn.following{background:transparent;border-color:var(--ok);color:var(--ok)}
.btn.small{min-height:44px;font-size:14px;padding:0 var(--s3)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Segmented control */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;background:#fff}
.seg button{border:0;background:none;border-radius:var(--r-pill);padding:0 14px;font:600 14px var(--f-ui);color:var(--slate);cursor:pointer;min-height:44px}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.row{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;flex-wrap:wrap}
.row.start{justify-content:flex-start}

/* Cards and text helpers */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5)}
.card h2{font-size:22px;margin-bottom:var(--s3)}
.card + .card{margin-top:var(--s4)}
.note{font-size:13px;color:var(--slate)}
.summary{font:500 18px/1.4 var(--f-ui);margin:0 0 var(--s2);max-width:56ch}
.eyebrow{font:500 13px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-2)}
.light .eyebrow{color:var(--slate)}

/* Hero, snow figure, source chip */
.hero{position:relative;background:var(--ink);color:#fff;border-radius:var(--r-card);overflow:hidden;padding:var(--s6) var(--s5) var(--s5)}
.hero h1{font-size:clamp(34px,7vw,60px);margin:var(--s2) 0 var(--s2);font-weight:700}
.hero .actions{display:flex;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);color:var(--on-ink);font-size:14px}
.fig{margin:var(--s5) 0 var(--s3);display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.fig .n{font:700 clamp(72px,16vw,128px)/0.85 var(--f-display);letter-spacing:-.04em}
.fig .u{font:600 28px var(--f-display);padding-bottom:6px;color:var(--on-ink)}
.fig .w{width:100%;color:var(--on-ink);font-size:15px}
.source{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--on-ink);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);padding:5px 12px;text-decoration:none}
.source::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live)}
.source.stale::before{background:var(--sunset)}
.light .source{color:var(--slate);border-color:var(--line)}

/* Tabs */
.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--line)}
.tab{flex:1;max-width:180px;min-height:44px;background:none;border:0;border-bottom:3px solid transparent;padding:var(--s3) var(--s3) calc(var(--s3) - 3px);font:600 15px var(--f-ui);color:var(--slate);cursor:pointer}
.tab[aria-selected=true]{color:var(--ink);border-color:var(--sunset)}
.panel[hidden]{display:none}
.panel{animation:ds-slide .2s var(--ease)}
@keyframes ds-slide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Chart (SVG) */
.chart{width:100%;height:auto;display:block;margin-top:var(--s4)}
.chart text{font:500 11px var(--f-ui);fill:var(--slate)}
.chart .val{font:700 13px var(--f-ui);fill:var(--ink)}
.chart .bar-1{fill:var(--p2)} .chart .bar-2{fill:var(--p3)} .chart .bar-3{fill:var(--p4)} .chart .bar-4{fill:var(--p5)} .chart .bar-5{fill:var(--p6)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:12px;color:var(--slate);margin-top:var(--s2);align-items:center}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:5px}

/* Table */
.tbl{width:100%;border-collapse:collapse;font-size:15px;margin-top:var(--s4)}
.tbl th,.tbl td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.tbl th{font:600 12px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.tbl td.num,.tbl th.num{text-align:right}
.tbl td.conf{color:var(--slate);font-size:13px}

/* Tiles and webcam tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(min-width:600px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3) var(--s4);background:var(--snow)}
.tile b{display:block;font:700 28px var(--f-display);letter-spacing:-.02em}
.tile span{font-size:13px;color:var(--slate)}
.cams{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:600px){.cams{grid-template-columns:1fr 1fr}}
.cam{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--ink);color:#fff;display:flex;align-items:flex-end;padding:var(--s3)}
.cam .play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);display:grid;place-items:center}
.cam .play::after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.cam.off .play{display:none}
.cam small{font-size:13px;color:var(--on-ink)}

/* Plan block and disclosure */
.plan{list-style:none;margin:0 0 var(--s3);padding:0}
.plan li{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.plan li:last-child{border-bottom:0}
.plan svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.plan b{display:block;font-size:15px}
.plan span{font-size:13px;color:var(--slate)}
.pill{margin-left:auto;font-size:12px;font-weight:600;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px;color:var(--slate);white-space:nowrap}
.disclosure{font-size:13px;color:var(--slate);background:var(--snow);border:1px solid var(--line);border-radius:10px;padding:var(--s3);margin:0}
@media(max-width:599px){.plan .pill{margin-left:calc(28px + var(--s3))}}

/* Follow card */
.follow-card{background:var(--ink);color:#fff;border-color:var(--ink)}
.follow-card h2{color:#fff}
.follow-card p{color:var(--on-ink);margin:0 0 var(--s4);font-size:15px}
.follow-card .btn{width:100%}

/* Sheet, form field, switch, toast */
.scrim{position:fixed;inset:0;background:rgba(11,27,46,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:#fff;border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding:var(--s3) var(--s5) var(--s6);transform:translateY(105%);visibility:hidden;transition:transform .25s var(--ease),visibility 0s linear .25s;z-index:41;box-shadow:var(--shadow);max-height:90vh;overflow:auto}
.sheet.open{transform:none;visibility:visible;transition-delay:0s}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto var(--s4)}
.sheet h2{font-size:24px;margin-bottom:var(--s2)}
.field{display:block;width:100%;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:0 var(--s4);font:400 16px var(--f-ui);margin:var(--s3) 0}
.sw{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);font-size:15px}
.sw button{flex:none;width:48px;height:44px;border-radius:14px;border:0;background:none;position:relative;cursor:pointer;padding:0}
.sw button::before{content:"";position:absolute;left:0;top:8px;width:48px;height:28px;border-radius:14px;background:var(--line);transition:background .15s}
.sw button::after{content:"";position:absolute;top:11px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s var(--ease)}
.sw button[aria-checked=true]::before{background:var(--ok)}
.sw button[aria-checked=true]::after{transform:translateX(20px)}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-pill);font-size:14px;opacity:0;pointer-events:none;transition:all .2s var(--ease);z-index:60;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.list{list-style:none;margin:var(--s3) 0 0;padding:0}
.list li{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.list li:last-child{border:0}

/* Bottom navigation (phones; a floating pill on desktop) */
.bottomnav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid var(--line);display:flex;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.bottomnav a,.bottomnav button{flex:1;min-height:64px;background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 11px var(--f-ui);color:var(--slate);text-decoration:none;cursor:pointer}
.bottomnav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bottomnav [aria-current=page]{color:var(--ink)}
.bottomnav em{font-style:normal;background:var(--sunset);color:var(--ink);border-radius:var(--r-pill);padding:0 6px;font-size:10px;margin-left:2px}
@media(min-width:960px){.bottomnav{max-width:520px;margin:0 auto 12px;border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--shadow)}}

/* Style guide helpers (swatches and specimens) */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s3)}
.sw-grid.ramp{grid-template-columns:repeat(5,1fr)}
.swatch{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff;font-size:13px}
.swatch i{display:block;height:64px}
.swatch div{padding:var(--s2) var(--s3)}
.swatch b{display:block;font-size:14px}
.bg-snow{background:var(--snow);border-bottom:1px solid var(--line)} .bg-ink{background:var(--ink)} .bg-slate{background:var(--slate)} .bg-glacier{background:var(--glacier)} .bg-sunset{background:var(--sunset)} .bg-ok{background:var(--ok)}
.bg-p2{background:var(--p2)} .bg-p3{background:var(--p3)} .bg-p4{background:var(--p4)} .bg-p5{background:var(--p5)} .bg-p6{background:var(--p6)}
.spec{display:grid;gap:var(--s3)}
.spec .row{border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
.two{display:grid;gap:var(--s5)}
@media(min-width:720px){.two{grid-template-columns:1fr 1fr}}
.t-display{font:700 clamp(32px,8vw,56px)/1 var(--f-display);letter-spacing:-.03em}
.t-sub{font:600 28px var(--f-display)}
.t-body{font:400 16px var(--f-ui)}
.t-num{font:500 22px/1.5 var(--f-ui)}
.t-prop{font-variant-numeric:proportional-nums}
.t-tab{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){:where(.ds) *{animation:none!important;transition:none!important}}