/* Telvra Heating interactive demo
   Palette and type follow the Telvra Heating video: ink, bone, copper.
   Display: Archivo. Text: DM Sans. Labels: Space Mono. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1c1b19;--navy2:#2a2825;--gold:#c1653c;--ink:#1c1b19;--mute:#77716a;--line:#ddd7cc;
  --bg:#efebe4;--paper:#f5f2ed;--hot:#a3442a;--hotbg:#f7e6dc;--warm:#9a7432;--warmbg:#f6eedd;
  --com:#4a6474;--combg:#e6ecee;--ok:#3d7a52;--bone:#efebe4;--soft:#a39d93;
  --radius:12px;
  --font:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --display:Archivo,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --dock:76px;
  --side:220px;
}
html,body{background:var(--navy);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1}
body{min-height:100vh;min-height:100dvh}
button,input,select{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn-gold,.btn-navy,.btn-ghost,.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
}
.btn-gold{background:var(--gold);color:#fbf4ee}
.btn-gold:hover{background:#9a4d2b}
.btn-navy{background:var(--navy);color:#efebe4}
.btn-navy:hover{background:#2a2825}
.btn-ghost{background:transparent;color:#efebe4;border:1px solid #3d3a35}
.btn-ghost:hover{border-color:#a39d93}
.btn-danger{background:#f6e0d8;color:#a3442a}
.btn-text{font-size:13px;font-weight:600;color:var(--mute);padding:8px 10px;border-radius:8px}
.btn-text:hover{color:var(--ink)}
.btn-text.light{color:#d6d0c6}
.btn-text.light:hover{color:#fff}
.btn-gold.sm,.btn-navy.sm,.btn-ghost.sm{height:36px;padding:0 14px;font-size:13px}

#demo-pill{
  position:fixed;top:14px;right:16px;z-index:80;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#77716a;background:rgba(255,255,255,.88);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;pointer-events:none;
}

/* Full screens (intro + close) */
.full-screen{
  min-height:100vh;min-height:100dvh;
  background:var(--navy);color:#efebe4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 24px 80px;
}
.full-logo{width:min(300px,70vw);height:auto}
.full-logo.lg{width:min(380px,78vw)}
.full-screen h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,7vw,84px);letter-spacing:-.015em;margin-top:36px;color:#efebe4}
.full-screen .end-h{font-size:clamp(36px,6vw,64px);margin-top:44px}
.full-sub{font-size:clamp(18px,2.6vw,32px);color:#bdb6ab;margin-top:14px;font-weight:400}
.goldrule{width:64px;height:4px;background:var(--gold);border-radius:2px;margin:30px auto 0}
.full-sm{font-family:var(--mono);font-size:12px;color:#77716a;margin-top:36px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;max-width:36em}
.full-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.cta-lead{margin-top:28px;font-size:17px;color:#d6d0c6;max-width:28em;line-height:1.5}
#cta-mail{margin-top:22px}
#btn-back{margin-top:28px}

/* App shell */
#app{
  background:var(--bg);color:var(--ink);
  min-height:100vh;min-height:100dvh;
  display:grid;
  grid-template-columns:var(--side) minmax(0,1fr) 340px;
  grid-template-rows:auto 1fr;
  padding-bottom:var(--dock);
}
[hidden]{display:none !important}

/* Sidebar */
#side{
  grid-row:1/-1;
  background:var(--navy);color:#d6d0c6;
  padding:22px 16px 120px;
  position:relative;
}
.brand{padding:4px 8px 10px}
.brand img{display:block;width:118px;height:auto}
.brandsub{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:0 8px 20px}
.site{margin:0 4px 16px;padding:10px 12px;border:1px solid #34312d;border-radius:10px;background:#24221f}
.site .sl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8a847a;font-weight:600}
.site .sv2{margin-top:4px;color:#efebe4;font-size:13.5px;font-weight:500}
.site em{display:block;font-style:normal;color:#a39d93;font-weight:400;font-size:12px;margin-top:1px}
.nav{
  display:flex;align-items:center;gap:12px;width:100%;
  height:40px;padding:0 12px;border-radius:12px;font-size:14px;font-weight:500;
  color:#d6d0c6;text-align:left;margin-bottom:2px;
}
.nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.nav.on{background:#2a2825;color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.nav:hover{color:#fff}
.navh{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#57534c;padding:18px 12px 6px}
.nav-note{margin:10px 8px 0;font-size:12px;color:#a39d93;line-height:1.4}
.sidefoot{position:absolute;left:16px;right:16px;bottom:24px;border-top:1px solid #2a2825;padding:16px 8px 0}
.sidefoot b{display:block;color:#ddd7cc;font-size:14px;font-weight:500}
.sidefoot span{font-size:12px;color:#77716a}

.mob-bar{display:none}

/* Main */
#main{padding:28px 28px 32px;min-width:0}
.view-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.view-head > div:first-child{flex:1;min-width:16em}
.head-pills{flex:none}
.h1{font-family:var(--display);font-size:clamp(24px,2.4vw,30px);font-weight:600;letter-spacing:-.02em}
.sub{font-size:14px;color:var(--mute);margin-top:4px;max-width:46em;line-height:1.45}
.head-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.works{display:flex;align-items:flex-start;gap:10px 14px;flex-wrap:wrap;margin:-4px 0 16px}
.works-lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:6px;flex:none}
.works-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.work-chip{
  display:inline-flex;align-items:center;height:28px;padding:0 10px;
  border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:12px;font-weight:500;color:#3d3a35;white-space:nowrap;
}
.work-chip:hover{border-color:#c5bfb4;color:var(--ink)}
.work-chip.on{background:var(--navy);color:#efebe4;border-color:var(--navy)}
.work-chip.quiet{color:var(--mute);border-style:dashed}
.work-chip.quiet.on{color:#efebe4;border-style:solid}
.syncpill{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;
  border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:13px;font-weight:500;color:#3d3a35;
}
.syncpill svg{width:15px;height:15px;stroke:#3d3a35;fill:none;stroke-width:2}
.clockpill{background:var(--navy);color:#fff;border-color:var(--navy)}
.clockpill svg{stroke:#c1653c}
.clockpill .dow{color:#a39d93;font-weight:400}
.dot{width:8px;height:8px;border-radius:50%;background:#4a9465;box-shadow:0 0 0 3px rgba(74,148,101,.15);flex:none}
.dot.busy{background:var(--gold);box-shadow:0 0 0 3px rgba(193,101,60,.18)}
.spin{transition:transform .3s linear}
.spin.on{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .spin.on{animation:none}
  *{scroll-behavior:auto !important}
}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
.stat,.big{padding:16px 18px}
.stat .v,.big .v{font-size:28px;font-weight:700;margin-top:8px;letter-spacing:-.01em}
.stat .s,.big .s{font-size:12px;color:var(--mute);margin-top:4px;line-height:1.4}
.big{padding:20px 22px}
.big .v{font-size:clamp(28px,3vw,42px);margin-top:14px;white-space:nowrap}
.goldish{border-color:#e4c3ae;background:#fbf4ee}
.goldish .lbl{color:#9a4d2b}

.timeline-card,.chart-card,.brk-card,.table-card,.list-card,.act-card{padding:16px 18px 12px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.card-head.tight{align-items:flex-start;margin-bottom:10px}
.card h2{font-size:16px;font-weight:600}
.hint{font-size:12px;color:var(--mute);margin-top:2px;line-height:1.4}
.legend{display:flex;flex-wrap:wrap;gap:12px 16px;list-style:none;font-size:12px;color:#57534c;align-items:center}
.legend i{display:inline-block;width:22px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.lg-pre{background:repeating-linear-gradient(135deg,#ecc6b4 0 4px,#f7e6dc 4px 8px)}
.lg-hot{background:var(--hot)}
.lg-warm{background:#c49a52}
.lg-com{background:var(--com)}
.lg-temp{height:2px;background:#1c1b19;width:18px}
.lg-25{background:#d6d0c6;height:12px;width:12px}
.lg-26{background:var(--navy);height:12px;width:12px}
.tl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#tl,#chart{width:100%;height:auto;display:block;min-width:640px}
.sync-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#3d3a35}

.lower,.energy-lower{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.9fr);gap:14px;margin-top:14px}
.row-head,.row{
  display:grid;grid-template-columns:108px minmax(0,1fr) 150px 88px;
  gap:8px;align-items:center;font-size:14px;
}
.row-head{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:0 4px 8px}
.row{
  width:100%;text-align:left;padding:10px 8px;border-top:1px solid #efebe4;
  border-radius:8px;color:inherit;
}
.row .name{white-space:nowrap}
.row:hover{background:#f7f4ef}
.row .t{font-weight:600;white-space:nowrap}
.row .n{display:flex;align-items:center;gap:8px;font-weight:500;flex-wrap:wrap}
.row .hb{font-size:12.5px;color:#3d3a35;display:flex;align-items:center;gap:6px}
.row .hb i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.row .st{text-align:right;font-size:12px;font-weight:600}
.badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap}
.b-hot{background:var(--hotbg);color:var(--hot)}
.b-warm{background:var(--warmbg);color:#9a4d2b}
.b-com{background:var(--combg);color:var(--com)}
.b-new{background:#f6e3d6;color:#8f4524}
.b-can{background:#f6e0d8;color:#a3442a}
.row.cancelled .n span.name,.row.cancelled .t{text-decoration:line-through;color:#a39d93}
.row.flash{background:rgba(246,227,214,.9)}
.list-actions{display:flex;gap:8px;flex-wrap:wrap;padding:12px 4px 4px;align-items:center}
.act{display:flex;gap:12px;padding:10px 4px;border-top:1px solid #efebe4;font-size:13px;align-items:flex-start}
.act .tm{width:44px;font-weight:600;font-size:14px;flex:none}
.act .tx{flex:1;color:#2a2825;line-height:1.35}
.act .tx small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.tag{font-size:10.5px;font-weight:600;border:1px solid var(--line);border-radius:6px;padding:1px 6px;height:18px;color:#57534c;white-space:nowrap;flex:none;margin-top:2px}
.tag.tu{border-color:#c6d2d8;color:#3f5a68;background:#eef2f3}
.empty{padding:16px 4px;font-size:13px;color:#a39d93}

/* Savings */
.brk{margin-top:22px}
.brk .l{display:flex;justify-content:space-between;gap:16px;font-size:15px;font-weight:500}
.brk .l b{font-weight:700;flex:none}
.brk .bar{height:12px;border-radius:6px;background:#efebe4;margin-top:10px;overflow:hidden}
.brk .bar i{display:block;height:100%;border-radius:6px;background:var(--navy)}
.brk .bar i.gold{background:var(--gold)}
.today-impact{margin-top:14px;padding:18px 22px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.impact-line{margin-top:8px;font-size:15px;line-height:1.45;max-width:36em}
.impact-nums{display:flex;gap:28px}
.impact-nums .iv{font-size:22px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.foot-stats{margin-top:14px;padding:16px 22px;display:flex;align-items:center;gap:32px;flex-wrap:wrap;color:#3d3a35}
.fv{font-size:22px;font-weight:700;margin-top:6px;color:var(--ink)}
.foot-note{margin-left:auto;font-size:12.5px;color:var(--mute);max-width:330px;line-height:1.45}

/* Energy */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;margin-top:8px}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600;text-align:right;padding:0 16px 10px}
td{text-align:right;padding:0 16px;height:34px;border-top:1px solid #efebe4}
th:first-child,td:first-child{text-align:left}
tr.tot td{font-weight:700;border-top:1px solid #d6d0c6}
.sv{color:var(--ok);font-weight:600}
.energy-sum{padding:22px}
.energy-sum .yr{font-size:15px;color:#3d3a35;margin-top:18px}
.energy-sum .yv{font-size:26px;font-weight:700;margin-top:4px}
.energy-sum .yv span{font-size:17px;color:var(--mute);font-weight:500}
.energy-sum hr{border:0;height:1px;background:#e8cdb9;margin:22px 0}
.esave{font-size:clamp(32px,4vw,44px);font-weight:700;letter-spacing:-.02em;margin-top:4px;color:var(--ok)}
.energy-sum p{font-size:14px;color:#3d3a35;margin-top:6px}

/* Phone */
#phonewrap{
  padding:28px 20px 32px 0;
  display:flex;align-items:flex-start;justify-content:center;
}
#phone{
  position:relative;width:300px;height:630px;
  border-radius:40px;overflow:hidden;background:var(--paper);
  box-shadow:0 24px 48px rgba(28,27,25,.16),0 0 0 10px #141312,0 0 0 11px #2e2c29;
  margin-top:12px;
}
.island{position:absolute;left:50%;top:8px;width:96px;height:26px;margin-left:-48px;background:#000;border-radius:16px;z-index:20}
.sbar{position:absolute;top:0;left:0;right:0;height:42px;display:flex;justify-content:space-between;align-items:center;padding:8px 26px 0 28px;font-size:13px;font-weight:600;z-index:10}
.sbar-right{width:56px;height:12px;background:linear-gradient(#1c1b19,#1c1b19) 0 4px/18px 8px no-repeat,linear-gradient(#1c1b19,#1c1b19) 22px 2px/10px 10px no-repeat,linear-gradient(#1c1b19,#1c1b19) 36px 0/16px 12px no-repeat;opacity:.85}
.pscr{position:absolute;left:0;top:42px;width:100%;bottom:16px;padding:6px 14px 8px;overflow:auto}
.phead{display:flex;align-items:center;gap:8px;margin:2px 0 12px}
.phead img{width:24px;height:24px}
.phead b{font-family:var(--display);font-size:16px;font-weight:600}
.phead span{margin-left:auto;font-size:11px;color:var(--mute);font-weight:500}
.pcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}
.pcard.navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.pbig{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:10px}
.pbig.light{color:#fff}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:#efebe4;color:#57534c}
.prow-top{display:flex;justify-content:space-between;align-items:center}
.pmuted{font-size:12px;color:var(--mute);margin-top:6px}
.pmuted.light{color:#d6d0c6}
.lbl.light{color:#a39d93}
.pnext{font-size:16px;font-weight:700;margin-top:6px}
.plist-card{padding:8px 14px}
.prow{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid #efebe4;font-size:13px}
.prow:first-child{border-top:0}
.homebar{position:absolute;bottom:6px;left:50%;width:108px;margin-left:-54px;height:4px;border-radius:3px;background:#1c1b19;z-index:20}
#notif,#mob-toast{
  position:absolute;left:8px;right:8px;top:42px;border-radius:18px;
  background:rgba(247,244,239,.97);box-shadow:0 10px 30px rgba(28,27,25,.18);
  padding:10px 12px;display:flex;gap:10px;z-index:25;border:1px solid #e3ddd3;
}
#notif img,#mob-toast img{width:32px;height:32px;border-radius:8px;background:var(--navy);padding:4px;flex:none}
#notif .a,#mob-toast .a{font-size:11px;color:#77716a;display:flex;justify-content:space-between}
#notif b,#mob-toast b{display:block;font-size:13px;margin-top:2px}
#notif span,#mob-toast span{display:block;font-size:12px;color:#3d3a35;margin-top:1px}

#mob-toast{
  position:fixed;top:56px;left:12px;right:12px;z-index:70;display:flex;
}

/* Dock / tour */
#dock{
  position:fixed;left:var(--side);right:0;bottom:0;z-index:60;
  background:linear-gradient(180deg,transparent,rgba(20,19,18,.06) 16px,var(--bg) 36px);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
}
body.app-on #demo-pill{display:none}
.side-demo,.mob-demo{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#a39d93;border:1px solid #3d3a35;background:#24221f;margin:0 8px 14px;
}
#cap{display:flex;align-items:center;gap:12px;max-width:1400px;margin:0 auto 10px;flex-wrap:wrap}
#capin{
  background:var(--navy);color:#fff;border-radius:14px;padding:0 18px;min-height:54px;
  display:flex;align-items:center;gap:14px;font-size:clamp(15px,1.6vw,20px);font-weight:500;
  letter-spacing:-.005em;flex:1;line-height:1.3;
}
#capin .num{
  width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex:none;
}
.cap-actions{display:flex;gap:8px;align-items:center}
#controls{
  display:flex;align-items:center;gap:12px;max-width:1400px;margin:0 auto;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 12px;
}
.time-label{display:flex;align-items:center;gap:10px;flex:1;min-width:180px;font-size:12px;color:var(--mute);font-weight:600}
.time-label input{flex:1;accent-color:var(--gold);height:28px}
.time-read{font-variant-numeric:tabular-nums;font-weight:700;min-width:52px}
.dock-cta{margin-left:auto;color:var(--gold)}
#dock .btn-ghost{
  color:var(--ink);border-color:var(--line);background:#fff;
}
.full-sm .email{text-transform:none;letter-spacing:0;font-family:var(--font);font-size:13px}
#toast{top:72px}

#toast{
  position:fixed;left:50%;top:22px;transform:translateX(-50%);
  width:min(444px,calc(100vw - 32px));background:var(--navy);color:#fff;
  border-radius:14px;padding:14px 18px;z-index:75;
  box-shadow:0 18px 40px rgba(28,27,25,.25);font-size:14px;line-height:1.4;
}
#toast b{display:block}
#toast span{display:block;font-size:13px;color:#d6d0c6;margin-top:3px}

dialog{
  border:0;border-radius:16px;padding:22px;width:min(440px,calc(100vw - 32px));
  box-shadow:0 24px 60px rgba(28,27,25,.28);
}
dialog::backdrop{background:rgba(28,27,25,.45)}
dialog h2{font-family:var(--display);font-size:20px;font-weight:600}
dialog fieldset{border:0;margin:16px 0;display:flex;flex-direction:column;gap:10px}
dialog legend{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
dialog label{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.4}
.ed-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}

@media (min-width:901px){
  #mob-toast{display:none !important}
}
@media (max-width:1400px){
  .lower{grid-template-columns:1fr}
  .energy-lower{grid-template-columns:minmax(0,1fr) 260px}
  .big .v{font-size:30px;white-space:normal}
  .stats.bigs{gap:10px}
}
/* Mid widths: drop the phone, keep sidebar */
@media (max-width:1180px){
  #app{grid-template-columns:var(--side) minmax(0,1fr)}
  #phonewrap{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  #dock{left:0}
  #toast{display:none !important}
  #app{grid-template-columns:1fr}
  .energy-lower{display:flex;flex-direction:column}
  .energy-sum{order:-1}
  #side{
    display:none;position:fixed;inset:0 20% 0 0;z-index:50;overflow:auto;
  }
  #app.menu-open #side{display:block}
  .mob-bar{
    display:flex;align-items:center;gap:12px;
    background:var(--navy);color:#efebe4;padding:10px 14px;
    padding-top:calc(10px + env(safe-area-inset-top));
  }
  .mob-logo{width:92px;height:auto}
  .mob-clock{margin-left:auto;font-size:13px;font-weight:600;white-space:nowrap}
  .mob-clock span:last-child{color:#a39d93;font-weight:400}
  .mob-demo{margin:0;background:transparent;color:#a39d93;border-color:#3d3a35}
  .mob-menu{height:36px;padding:0 12px;border:1px solid #3d3a35;border-radius:999px;color:#efebe4;font-size:13px;font-weight:600;flex:none}
  #main{padding:16px 14px 24px}
  .lower,.energy-lower{grid-template-columns:1fr}
  .row-head,.row{grid-template-columns:86px minmax(0,1fr) 72px; }
  .row .hb{display:none}
  .row-head .hb{display:none}
  .foot-note{margin-left:0;max-width:none}
  .brk .l{flex-direction:column;gap:4px;font-size:14px}
  #controls{padding:8px}
  .dock-cta{margin-left:0}
  :root{--dock:148px}
  #app{padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom))}
}
@media (max-width:430px){
  .full-screen{padding:32px 18px 72px}
  .full-actions{flex-direction:column;align-items:stretch}
  .full-actions .btn-gold,.full-actions .btn-ghost{width:100%}
  .stats,.bigs{grid-template-columns:1fr 1fr;gap:8px}
  .stat,.big{padding:12px 12px}
  .stat .v{font-size:22px}
  .big .v{font-size:26px;margin-top:8px}
  .h1{font-size:24px}
  .timeline-card,.chart-card,.brk-card,.table-card,.list-card,.act-card{padding:14px 12px 10px}
  #cap{flex-direction:column;align-items:stretch}
  #capin{font-size:15px;min-height:48px;padding:10px 14px}
  .cap-actions{justify-content:flex-end}
  #controls{gap:8px}
  .time-label span{display:none}
  .works{margin:0 0 14px;gap:8px}
  .works-lbl{width:100%;padding-top:0}
  .work-chip{height:26px;padding:0 9px;font-size:11.5px}
  .today-impact,.foot-stats,.impact-nums{gap:16px}
  .impact-nums{width:100%;justify-content:space-between}
  .list-actions{flex-direction:column;align-items:stretch}
  .list-actions .btn-navy{width:100%}
}

body.intro-on,body.end-on{background:var(--navy)}
body.app-on{background:var(--bg)}