/* ═══ Atlas Studio site · home · the sections below the hero ═══════════════════════════════
   The hero is the kit's (kit.css + embers.css) and is not touched here. Below it the page is calm:
   dark ground, real UI, real text. The one ember accent is the outline that marks a feature on its
   screenshot, and the letters of the three connections. Colours come from _kit/tokens.css; the only
   literals are the small rebuilds of the products' own UI in section 5, each sourced below.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · one desktop ──────────────────────────────────────────────────────────────────────── */
.dk{padding:clamp(88px,14vh,160px) 0 clamp(64px,10vh,120px)}
.dk__in{display:grid;grid-template-columns:minmax(280px,4fr) minmax(0,8.4fr);grid-template-areas:"head fig" "pick fig" "go fig";
  grid-template-rows:auto auto 1fr;column-gap:clamp(36px,5vw,88px);align-items:start}
.dk__head{grid-area:head}
.dk__head .sec__d+.sec__d{margin-top:10px}
.dk__pick{grid-area:pick;display:grid;gap:2px;margin:clamp(24px,4vh,36px) -16px 0}
.dk__b{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-areas:"ic n" ". w";column-gap:14px;row-gap:3px;align-items:center;
  width:100%;margin:0;padding:13px 40px 13px 16px;border:0;border-radius:14px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:background-color var(--d-mid) var(--e)}
.dk__ic{grid-area:ic;width:22px;height:22px;border-radius:6px}
.dk__ic--all,.dk__ic--m{color:var(--cream)}
.dk__ic--all{border-radius:0}
.dk__bn{grid-area:n;font:640 17px/1.1 var(--f-sans);font-stretch:92%;letter-spacing:-.005em;color:var(--cream)}
.dk__bw{grid-area:w;font-size:14px;line-height:1.4;color:var(--ink-3)}
/* the chosen one gets the nav's dot: the same orange, scaled in */
.dk__b::after{content:"";position:absolute;right:18px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--fire);
  transform:scale(0);transition:transform var(--d-slow) var(--e)}
.dk__b[aria-pressed="true"]{background:var(--ground-2)}
.dk__b[aria-pressed="true"]::after{transform:scale(1)}
@media (hover:hover){.dk__b:hover{background:var(--ground-2)}}
.dk__go{grid-area:go;margin-top:clamp(20px,3vh,28px)}

.dk__fig{grid-area:fig;margin:0}
.dk__scr{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;isolation:isolate;cursor:pointer;background:var(--ground-2);
  box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .08),0 1px 2px rgb(var(--shade-rgb) / .4),0 40px 80px -40px rgb(var(--shade-rgb) / .8);
  -webkit-tap-highlight-color:transparent}
.dk__scr::after{content:"";position:absolute;inset:0;z-index:9;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .08);pointer-events:none}
/* The windows sit on Mantle's screen in its DIP (1536 x 864, see .mx below). Each is laid out at its FOCUSED
   box, 1216 x 760 at 160,26 (crisp there, and clear of the pill, whose top is at 802), and scaled down for
   the overview: Quartz to 860 wide at 500,40, Helm to 880 wide at 220,214. Going down to the bar, a window
   shrinks into its own pin on the pill (Quartz's centre 747,823; Helm's 789,823), under the bar, which
   is always on top. */
.dk__win{position:absolute;left:calc(160 * var(--d));top:calc(26 * var(--d));width:calc(1216 * var(--d));aspect-ratio:16/10;z-index:2;
  transform-origin:0 0;border-radius:calc(8 * var(--d));overflow:hidden;background:var(--ground-2);
  box-shadow:0 0 0 1px rgb(var(--white-rgb) / .1),0 2px 6px rgb(var(--shade-rgb) / .3),0 30px 60px -18px rgb(var(--shade-rgb) / .7);
  transition:transform 600ms var(--e),opacity 380ms var(--e),translate var(--d-mid) var(--e)}
.dk__win img{display:block;width:100%;height:100%}
.dk__win--q{z-index:2;transform:translate(27.961%,1.842%) scale(.70724)}
.dk__win--h{z-index:3;transform:translate(4.934%,24.737%) scale(.72368)}
@media (hover:hover){.dk__scr[data-state="all"] .dk__win:hover{z-index:4;translate:0 -2px}}
/* focused: that window comes forward at its full box; the other goes down to its pin on the bar */
.dk__scr[data-state="helm"] .dk__win--h,.dk__scr[data-state="quartz"] .dk__win--q{z-index:5;transform:none}
.dk__scr[data-state="helm"] .dk__win--q,.dk__scr[data-state="mantle"] .dk__win--q{transform:translate(46.773%,103.368%) scale(.03);opacity:0;pointer-events:none}
.dk__scr[data-state="quartz"] .dk__win--h,.dk__scr[data-state="mantle"] .dk__win--h{transform:translate(50.227%,103.368%) scale(.03);opacity:0;pointer-events:none}
/* the quick settings panel is open only when Mantle is the one being shown */
.dk__scr .mq{opacity:0;transition:opacity 380ms var(--e)}
.dk__scr[data-state="mantle"] .mq{opacity:1}

/* Helm is frameless: Windows draws its own caption buttons over the top-right 140 DIP (helm main.js:323-324,
   styles/tokens.css:232; symbols #e4e5e7, main.js:281). A capture of the page leaves them out, so they are drawn
   back over the screenshot, which is 1600 DIP wide: three 46 x 40 DIP buttons, 10 DIP glyphs. */
.hcap{position:absolute;top:0;right:0;width:8.625%;height:4%;display:flex;container-type:inline-size;pointer-events:none}
.hcap i{position:relative;flex:1}
.hcap i::before,.hcap i::after{content:"";position:absolute;left:50%;top:50%;background:#e4e5e7;transform:translate(-50%,-50%)}
.hcap i:nth-child(1)::before{width:7.25cqw;height:.725cqw}
.hcap i:nth-child(2)::before{width:7.25cqw;height:7.25cqw;box-sizing:border-box;background:none;border:.725cqw solid #e4e5e7;border-radius:.725cqw}
.hcap i:nth-child(3)::before,.hcap i:nth-child(3)::after{width:10cqw;height:.725cqw;transform:translate(-50%,-50%) rotate(45deg)}
.hcap i:nth-child(3)::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ── Mantle's screen, from its own code (mantle origin/master 488751d) ────────────
   The reference screen, 1920 x 1080 at 125 % = 1536 x 864 DIP, laid out in DIP and scaled as ONE piece: 1 DIP is
   var(--d), a 1536th of the frame's width. So the pill keeps its real proportions at every size (72.9 % of
   the width, 13.5 % of air each side, lifted 14 DIP) and is never stretched to a narrow frame. Light theme:
   Windows' default, which Mantle follows (lib/theme.js:32); the tokens are glass-light.css's. */
.mx{container-type:inline-size;--d:calc(100cqw / 1536);
  --mx-ink:#0B0E1A;--mx-ink2:#333A4E;--mx-ink3:#5B6478;--mx-acc:#4436E8;--mx-warn:#8A4B00;
  --mx-edge:rgba(11,14,26,.10);--mx-tile:rgba(11,14,26,.08);--mx-hair:max(.5px,var(--d));
  --mx-glass:rgba(255,255,255,.45);--mx-blur:blur(calc(12 * var(--d))) saturate(150%);
  --mx-lip:inset 0 var(--d) 0 rgba(255,255,255,.62);
  font-family:var(--f-win);line-height:1.2;color:var(--mx-ink2);text-align:left}
:where(.mx) :where(p,dl,dd){margin:0}
.mx svg{display:block}
.mx__wall{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block}
/* the desktop layer: glass panes in a column, top-left (ui/desktop/desktop.css:108-140, :158-176, :240-322) */
.mx__panes{position:absolute;z-index:1;left:calc(44 * var(--d));top:calc(38 * var(--d));width:calc(420 * var(--d));display:flex;flex-direction:column;gap:calc(16 * var(--d))}
.mx__pane{border-radius:calc(16 * var(--d));padding:calc(14 * var(--d)) calc(16 * var(--d)) calc(15 * var(--d));background:var(--mx-glass);
  -webkit-backdrop-filter:var(--mx-blur);backdrop-filter:var(--mx-blur);
  box-shadow:inset 0 0 0 var(--mx-hair) var(--mx-edge),var(--mx-lip),0 var(--d) var(--d) rgba(14,18,38,.05),
    0 calc(10 * var(--d)) calc(28 * var(--d)) calc(-12 * var(--d)) rgba(14,18,38,.22),0 calc(26 * var(--d)) calc(56 * var(--d)) calc(-28 * var(--d)) rgba(14,18,38,.30)}
.mx__clk{display:flex;align-items:baseline;font:300 calc(76 * var(--d))/1 "Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--mx-ink)}
.mx__mer{margin-left:.16em;font-size:.3em;font-weight:500;letter-spacing:.06em;color:var(--mx-ink2)}
.mx__date{margin-top:calc(6 * var(--d));font-size:calc(14 * var(--d));color:var(--mx-ink2)}
.mx__th{margin-bottom:calc(10 * var(--d));font-size:calc(11 * var(--d));font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--mx-ink3)}
.mx__row{display:flex;align-items:baseline;justify-content:space-between;gap:calc(12 * var(--d));padding:calc(4 * var(--d)) 0}
.mx__row+.mx__row{border-top:var(--mx-hair) solid var(--mx-edge)}
.mx__row dt{font-size:calc(12 * var(--d));color:var(--mx-ink2)}
.mx__row dd{font-size:calc(13 * var(--d));font-variant-numeric:tabular-nums;color:var(--mx-ink)}
/* the pill (ui/bar/bar.css:125-182, :236; main.js:914-916): 1120 x 48 DIP, centred, 14 DIP of lift, ends of
   radius 24 = full semicircles; light glass, a 1 DIP hairline, the white lip and the upward drop */
.mx__bar{position:absolute;z-index:7;left:calc(208 * var(--d));bottom:calc(14 * var(--d));width:calc(1120 * var(--d));height:calc(48 * var(--d));
  box-sizing:border-box;display:flex;align-items:center;gap:calc(8 * var(--d));padding:0 calc(8 * var(--d));border-radius:calc(24 * var(--d));
  background:var(--mx-glass);-webkit-backdrop-filter:var(--mx-blur);backdrop-filter:var(--mx-blur);
  box-shadow:inset 0 0 0 var(--mx-hair) var(--mx-edge),var(--mx-lip),0 calc(-1 * var(--d)) var(--d) rgba(14,18,38,.05),
    0 calc(-10 * var(--d)) calc(28 * var(--d)) calc(-12 * var(--d)) rgba(14,18,38,.22),0 calc(-26 * var(--d)) calc(56 * var(--d)) calc(-28 * var(--d)) rgba(14,18,38,.30);
  font-size:calc(12.5 * var(--d));line-height:1;color:var(--mx-ink2)}
.mx__m{flex:none;display:grid;place-items:center;width:calc(38 * var(--d));height:calc(36 * var(--d))}
.mx__m svg{width:calc(22 * var(--d));height:calc(22 * var(--d))}
/* pins, centred on the pill (bar.css:372-450): 36 DIP cells, 24 DIP icons, 6 apart; a 6 x 3 line under a
   running app, 16 x 3 in the accent under the active window; Helm's count disc (helmbadge.css) */
.mx__dock{position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%);display:flex;align-items:center;gap:calc(6 * var(--d))}
.mx__c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--d));width:calc(36 * var(--d));height:calc(36 * var(--d))}
.mx__c img{display:block;width:calc(24 * var(--d));height:calc(24 * var(--d));border-radius:calc(6 * var(--d))}
.mx__c i{display:block;width:calc(6 * var(--d));height:calc(3 * var(--d));border-radius:calc(2 * var(--d));background:var(--mx-ink2);visibility:hidden;
  transition:width 150ms steps(2),background-color 150ms steps(2)}
.mx__c--q i,.mx__c--h i{visibility:visible}
.mx[data-state="all"] .mx__c--h i,.mx[data-state="helm"] .mx__c--h i,.mx[data-state="quartz"] .mx__c--q i{width:calc(16 * var(--d));background:var(--mx-acc)}
.mx__bd{position:absolute;top:var(--d);right:var(--d);display:grid;place-items:center;min-width:calc(15 * var(--d));height:calc(15 * var(--d));border-radius:calc(8 * var(--d));
  background:var(--mx-warn);color:#fff;box-shadow:0 0 0 calc(1.5 * var(--d)) rgba(255,255,255,.72);font:650 calc(10 * var(--d))/1 var(--f-win);font-variant-numeric:tabular-nums}
/* the right cluster (bar.css:551-646): tray, hairline, Downloads, Volume, Network, Battery, the clock, the bell, More */
.mx__r{margin-left:auto;display:flex;align-items:center;gap:calc(4 * var(--d));height:100%}
.mx__ti{display:grid;place-items:center;width:calc(26 * var(--d));height:calc(26 * var(--d));color:var(--mx-acc)}
.mx__ti svg{width:calc(16 * var(--d));height:calc(16 * var(--d))}
.mx__sep{width:var(--mx-hair);height:calc(20 * var(--d));background:var(--mx-edge)}
.mx__g{display:grid;place-items:center;width:calc(36 * var(--d));height:calc(36 * var(--d))}
.mx__g svg,.mx__bat svg{width:calc(16 * var(--d));height:calc(16 * var(--d))}
.mx__bat{display:flex;align-items:center;gap:calc(5 * var(--d));height:calc(36 * var(--d));padding:0 calc(7 * var(--d));font-variant-numeric:tabular-nums}
.mx__clock{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:calc(2 * var(--d));min-width:calc(62 * var(--d));height:calc(36 * var(--d));
  padding:0 calc(9 * var(--d));font-variant-numeric:tabular-nums}
.mx__clock b{min-width:calc(80 * var(--d));font-size:calc(13 * var(--d));font-weight:400;text-align:right;color:var(--mx-ink)}
/* quick settings, opened from Network: 7 DIP above the pill, centred on its button (bar.css:656-661,
   :970-1060; bar.js:2419-2425, :2690; qs-tiles.js; gamemode.js; corners.js) */
.mq{position:absolute;z-index:8;left:calc(879 * var(--d));bottom:calc(69 * var(--d));width:calc(360 * var(--d));box-sizing:border-box;
  padding:calc(12 * var(--d)) calc(13 * var(--d));border-radius:calc(16 * var(--d));background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:var(--mx-blur);backdrop-filter:var(--mx-blur);
  box-shadow:inset 0 0 0 var(--mx-hair) var(--mx-edge),0 var(--d) var(--d) rgba(14,18,38,.05),0 calc(10 * var(--d)) calc(28 * var(--d)) calc(-12 * var(--d)) rgba(14,18,38,.22),
    0 calc(26 * var(--d)) calc(56 * var(--d)) calc(-28 * var(--d)) rgba(14,18,38,.30);
  font-size:calc(12.5 * var(--d));color:var(--mx-ink2)}
.mq svg{width:calc(16 * var(--d));height:calc(16 * var(--d))}
.mq__g{display:grid;grid-template-columns:1fr 1fr;gap:calc(6 * var(--d));margin-bottom:calc(10 * var(--d))}
.mq__t{position:relative;display:grid;grid-template-columns:calc(22 * var(--d)) minmax(0,1fr);column-gap:calc(8 * var(--d));align-items:center;
  padding:calc(8 * var(--d)) calc(9 * var(--d));border-radius:calc(6 * var(--d));background:var(--mx-tile);color:var(--mx-ink)}
.mq__t svg{grid-row:1 / 3;justify-self:center}
.mq__t b{font-weight:400;line-height:1.1}
.mq__t span{line-height:1.2;color:var(--mx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq__t.on{background:var(--mx-acc);color:#fff}
.mq__t.on span{color:rgba(255,255,255,.82)}
.mq__t--x{padding-right:calc(30 * var(--d))}
.mq__t--x i{position:absolute;top:0;right:0;bottom:0;width:calc(22 * var(--d));border-left:var(--mx-hair) solid rgba(255,255,255,.3)}
.mq__t--x i::after{content:"";position:absolute;top:50%;left:42%;width:calc(5 * var(--d));height:calc(5 * var(--d));border:solid #fff;border-width:var(--mx-hair) var(--mx-hair) 0 0;transform:translate(-50%,-50%) rotate(45deg)}
.mq__h{display:flex;justify-content:space-between;align-items:baseline;gap:calc(8 * var(--d));margin-bottom:calc(4 * var(--d))}
.mq__l,.mq__seg,.mq__n,.mq__hc{margin-bottom:calc(9 * var(--d))}
.mq__h span{color:var(--mx-ink3);white-space:nowrap}
.mq__l{display:flex;align-items:center;gap:calc(8 * var(--d));min-height:calc(20 * var(--d))}
.mq__s{position:relative;flex:1;height:calc(4 * var(--d));border-radius:calc(2 * var(--d));background:rgba(11,14,26,.16)}
.mq__s::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:var(--mx-acc)}
.mq__s::after{content:"";position:absolute;top:50%;left:var(--v);width:calc(14 * var(--d));height:calc(14 * var(--d));border-radius:50%;background:var(--mx-acc);transform:translate(-50%,-50%)}
.mq__s--b{--v:66%}
.mq__s--v{--v:42%}
.mq__k{flex:none;display:grid;place-items:center;width:calc(28 * var(--d));height:calc(28 * var(--d));border-radius:calc(6 * var(--d));background:var(--mx-tile);color:var(--mx-ink)}
.mq__seg{display:grid;grid-template-columns:repeat(3,1fr);padding:calc(2 * var(--d));border-radius:calc(6 * var(--d));background:var(--mx-tile)}
.mq__seg span{padding:calc(4 * var(--d)) 0;border-radius:calc(5 * var(--d));text-align:center;font-size:calc(12 * var(--d));color:var(--mx-ink)}
.mq__seg .on{background:var(--mx-acc);color:#fff}
.mq__n{margin-top:calc(-1 * var(--d));font-size:calc(12 * var(--d));color:var(--mx-ink2)}
.mq__btn{display:flex;align-items:center;gap:calc(8 * var(--d));height:calc(28 * var(--d));padding:0 calc(10 * var(--d));border-radius:calc(6 * var(--d));background:var(--mx-tile);
  font-size:calc(12 * var(--d));color:var(--mx-ink);white-space:nowrap}
.mq__btn--w{flex:1}
.mq__sw{position:relative;width:calc(30 * var(--d));height:calc(16 * var(--d));border-radius:calc(8 * var(--d));box-shadow:inset 0 0 0 var(--mx-hair) var(--mx-ink2)}
.mq__sw::after{content:"";position:absolute;top:50%;left:calc(4 * var(--d));width:calc(9 * var(--d));height:calc(9 * var(--d));border-radius:50%;background:var(--mx-ink2);transform:translateY(-50%)}
.mq__hc{display:grid;grid-template-columns:1fr 1fr;gap:calc(4 * var(--d))}
.mq__hc p{display:flex;flex-direction:column;gap:calc(2 * var(--d));padding:calc(4 * var(--d)) calc(10 * var(--d));border-radius:calc(6 * var(--d));background:var(--mx-tile);font-size:calc(12 * var(--d));color:var(--mx-ink)}
.mq__hc .r{align-items:flex-end}
.mq__hc small{font-size:calc(10 * var(--d));color:var(--mx-ink3)}
.mq__f{display:flex;justify-content:space-between;align-items:center;margin-top:calc(6 * var(--d));padding-top:calc(8 * var(--d));border-top:var(--mx-hair) solid var(--mx-edge);font-size:calc(12 * var(--d));color:var(--mx-ink2)}
.mq__f span{display:flex;align-items:center;gap:calc(10 * var(--d))}
.dk__cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;margin-top:16px}
.dk__now{max-width:44em;font-size:15px;line-height:1.5;color:var(--ink-2)}
.dk__src{font-size:12px;color:var(--ink-3)}

/* ── 2-4 · the products ───────────────────────────────────────────────────────────────────── */
.pr{padding:clamp(72px,12vh,140px) 0}
.pr--helm{--pc:var(--p-helm)}
.pr--quartz{--pc:var(--p-quartz)}
.pr--mantle{--pc:var(--p-mantle)}
.pr__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"k k" "h d";column-gap:clamp(32px,5vw,96px);align-items:end}
.pr__k{grid-area:k;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 clamp(18px,3vh,26px)}
.pr__k img,.pr__m{width:28px;height:28px;flex:none;border-radius:7px}
.pr__m{color:var(--cream)}
.pr__k b{font:640 17px/1 var(--f-sans);font-stretch:92%;color:var(--cream)}
.pr__k span{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.02em;color:var(--ink-3)}
.pr__k span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc)}   /* the product's own colour: a dot only */
.pr__h{grid-area:h;max-width:13.5em;font-size:clamp(34px,3.7vw,58px);line-height:1}
.pr__d{grid-area:d;max-width:34em;margin:0}

.pr__body{display:grid;grid-template-columns:minmax(260px,4fr) minmax(0,8fr);column-gap:clamp(28px,4vw,72px);align-items:center;margin-top:clamp(36px,6vh,64px)}
.pr__hint{margin:0 0 8px}
.pr__hint--t{display:none}
@media (hover:none){.pr__hint--p{display:none}.pr__hint--t{display:inline}}
.pr__ft{display:grid;gap:2px;margin:0 -18px;padding:0;list-style:none}
.ft{display:grid;grid-template-columns:minmax(0,1fr) 16px;column-gap:16px;align-items:start;width:100%;margin:0;padding:15px 18px;border:0;border-radius:14px;
  background:transparent;color:var(--ink-2);font:400 15.5px/1.55 var(--f-sans);text-align:left;cursor:pointer;transition:background-color var(--d-mid) var(--e);
  -webkit-tap-highlight-color:transparent}
.ft b{font-weight:620;color:var(--ink)}
.ft__see{width:16px;height:16px;margin-top:3px;color:var(--ink-3);transition:color var(--d-fast) var(--e),transform var(--d-slow) var(--e)}
.ft[aria-pressed="true"]{background:var(--ground-2)}
.ft[aria-pressed="true"] .ft__see{color:var(--fire-ink);transform:scale(1.12)}
@media (hover:hover){.ft:not(.ft--still):hover{background:var(--ground-2)}.ft:not(.ft--still):hover .ft__see{color:var(--fire-ink)}}
.ft--still{grid-template-columns:minmax(0,1fr);cursor:default}
.ft__apps{display:flex;gap:8px;margin-top:12px}
.ft__apps img{width:26px;height:26px;display:block}
.ft kbd{display:inline-block;padding:1px 6px;border-radius:5px;background:rgb(var(--ink-rgb) / .07);box-shadow:inset 0 -1px 0 rgb(var(--ink-rgb) / .12);
  font:500 12px/1.5 var(--f-mono);color:var(--ink);white-space:nowrap}

.shot{margin:0}
.shot__f{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--ground-2);contain:paint;
  box-shadow:0 1px 2px rgb(var(--shade-rgb) / .4),0 40px 80px -40px rgb(var(--shade-rgb) / .8)}
.pr--mantle .shot__f{aspect-ratio:16/9}   /* Mantle's screen is 16:9 (1536 x 864 DIP) */
.shot__f::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .09);pointer-events:none}
.shot__z{--s:1;position:absolute;inset:0;transform-origin:0 0;transition:transform 640ms var(--e)}
.shot__z>img{display:block;width:100%;height:100%}
/* the ember accent: the outline of the part being looked at, drawn in the screenshot's own space */
.shot__r{position:absolute;border:calc(1.5px / var(--s)) solid var(--fire-ink);border-radius:calc(5px / var(--s));
  box-shadow:0 0 0 calc(3px / var(--s)) rgb(var(--ground-rgb) / .5);opacity:0;pointer-events:none;transition:opacity var(--d-slow) var(--e)}
.shot__r.is-on{opacity:1}
.shot__c{margin-top:14px;font-size:12px;color:var(--ink-3)}

.pr__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"note go" "req go";column-gap:40px;align-items:end;margin-top:clamp(32px,5vh,52px)}
.pr__note{grid-area:note;max-width:46em;margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.pr__req{grid-area:req;margin:10px 0 0;font-size:12px;color:var(--ink-3)}
.pr__go{grid-area:go;display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px}

/* ── 5 · how the three fit together ──────────────────────────────────────────────────────── */
.tg{padding:clamp(72px,12vh,140px) 0}
.tg__in{display:grid;grid-template-columns:minmax(260px,4fr) minmax(0,8fr);column-gap:clamp(36px,5vw,88px);align-items:start}
.tg__no{margin:22px 0 0;max-width:30em;font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.tg__l{display:grid;gap:6px;margin:-22px -22px 0;padding:0;list-style:none}
.cx{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(250px,310px);gap:14px 24px;align-items:start;padding:22px;border-radius:var(--r-row);
  background:var(--ground);transition:background-color var(--d-mid) var(--e)}
@media (hover:hover){.cx:hover{background:var(--ground-2)}}
.cx__id{display:grid;place-items:center;width:28px;height:28px;margin:0;border-radius:8px;background:rgb(var(--fire-rgb) / .1);
  font-size:13px;font-weight:500;line-height:1;color:var(--fire-ink)}
.cx__h{margin:0 0 6px;font:640 22px/1.1 var(--f-sans);font-stretch:88%;letter-spacing:-.01em;color:var(--cream)}
.cx__t p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.cx__ui{display:grid;gap:10px;align-content:center;min-height:112px;padding:14px 16px;border-radius:12px;background:var(--ground-2);
  box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .07)}
.cx__ui p{margin:0}

/* The products' own UI, rebuilt small. Values from the repos (read-only):
   Helm ui/styles/tokens.css (dark): surface #1b1c1e, hairline rgba(255,255,255,.09), text #a9aaa7 / #ececea,
   warn #d6b874, danger #e0877c, accent #9fb4cc. Mantle ui/shared/glass-light.css: fill-strong
   rgba(255,255,255,.72), ink #0B0E1A, accent #4436E8; ui/bar/helmbadge.css for the count disc.
   Quartz tokens.css is Helm's palette (Quartz welcome.html for the words). */
.vB,.vC{--h-surf:var(--q-bg);--h-line:rgb(var(--white-rgb) / .09);--h-fg:var(--q-fg);--h-fg-on:var(--q-fg-on);--h-warn:var(--helm-dot-n);--h-err:#e0877c;
  --h-acc:var(--p-helm);--lg-fill:rgb(var(--white-rgb) / .72);--lg-edge:rgb(11 14 26 / .1);--lg-acc:#4436E8}

.vA__f{font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.vA__f span{color:var(--ink-3)}
.vA__k{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.vA__k span{padding:3px 7px;border-radius:6px;background:rgb(var(--ink-rgb) / .07)}
.vA__k .vA__w{padding:3px 0;background:none;color:var(--ink-3)}
.vA__t{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.vA__i{position:relative;display:flex;align-items:flex-end;gap:5px;height:46px;padding:6px 7px;border-radius:7px;overflow:hidden;font:600 11.5px/1 var(--f-win);color:var(--ink);
  background:linear-gradient(180deg,rgb(var(--shade-rgb) / 0) 30%,rgb(var(--shade-rgb) / .55)),url(img/wall-snow-peak.webp) 54% 58%/300% auto no-repeat;
  box-shadow:inset 0 0 0 1px rgb(var(--white-rgb) / .1)}
.vA__i img,.vA__i svg{width:16px;height:16px;flex:none;border-radius:4px;color:var(--ink)}

.vB__helm{display:flex;flex-wrap:wrap;gap:6px;justify-self:start;padding:8px;border-radius:10px;background:#161718;box-shadow:inset 0 0 0 1px var(--h-line)}
.vB__chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--h-line);
  font:400 12px/1 var(--f-win);color:var(--h-fg)}
.vB__d{width:6px;height:6px;border-radius:50%}
.vB__d--w{background:var(--h-warn)}
.vB__d--e{background:var(--h-err)}
.vB__f{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:11.5px;color:var(--ink-3)}
.vB__ar{color:var(--ink-3)}
/* the bar: a crop through the middle of the real pill at 1 DIP = 1 px (the pill runs on past both sides), on the
   same wallpaper; Helm's count disc is the warn colour because one of the three is an error (helmbadge.css) */
.vB__sc{position:relative;height:84px;border-radius:8px;overflow:hidden;background:url(img/wall-snow-peak.webp) 50% 100%/1536px auto no-repeat}
.vB__sc.mx{--d:1px;container-type:normal}
.vB__sc .mx__bar{left:-40px;right:-40px;width:auto;border-radius:0}
.vB__sc .mx__c i{visibility:visible}
.vB__sc .mx__c:first-child i,.vB__sc .mx__c:last-child i{visibility:hidden}

.vC{container-type:inline-size}
.vC__pg{--q:calc(100cqw / 440);padding:calc(22 * var(--q)) calc(24 * var(--q));border-radius:8px;background:#141516;
  box-shadow:inset 0 0 0 1px var(--h-line);font-family:var(--f-win);font-size:calc(13 * var(--q));line-height:1.4;color:#a9aaa7}
.cx__ui .vC__pg p{margin:0}
.cx__ui .vC__e{margin-bottom:calc(8 * var(--q));font-size:calc(12 * var(--q));font-weight:600;letter-spacing:.01em;color:#9fb4cc}
.cx__ui .vC__h{font-size:calc(30 * var(--q));font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#ececea}
.cx__ui .vC__l{margin:calc(8 * var(--q)) 0 calc(24 * var(--q));font-size:calc(14 * var(--q))}
.vC__card{display:flex;gap:calc(18 * var(--q));padding:calc(22 * var(--q)) calc(24 * var(--q));border-radius:calc(14 * var(--q));background:#1d1e20;box-shadow:inset 0 0 0 1px var(--h-line)}
.vC__i{flex:none;display:grid;place-items:center;width:calc(44 * var(--q));height:calc(44 * var(--q));border-radius:calc(10 * var(--q));background:rgb(159 180 204 / .14);color:#9fb4cc}
.vC__i svg{width:calc(20 * var(--q));height:calc(20 * var(--q))}
.cx__ui .vC__t{font-size:calc(14 * var(--q));font-weight:600;color:#ececea}
.cx__ui .vC__x{margin-top:calc(4 * var(--q));font-size:calc(13 * var(--q))}
.vC__btn{display:inline-flex;align-items:center;height:calc(36 * var(--q));margin-top:calc(16 * var(--q));padding:0 calc(18 * var(--q));border-radius:calc(6 * var(--q));
  background:#9fb4cc;font-size:calc(13 * var(--q));font-weight:600;color:#11161c}

/* ── 6 · early software ──────────────────────────────────────────────────────────────────── */
.er{padding:clamp(72px,12vh,140px) 0 clamp(40px,7vh,80px)}
.er__in{display:grid;grid-template-columns:minmax(260px,5fr) minmax(0,7fr);column-gap:clamp(36px,5vw,88px);align-items:start}
.er__head .sec__d+.sec__d{margin-top:10px}
.er__iss{margin:22px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.er__is{display:flex;flex-wrap:wrap;gap:0 22px;margin:4px 0 0;padding:0;list-style:none}
.er__t{min-width:0}
.er__tb{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;color:var(--ink)}
.er__tb th,.er__tb td{padding:13px 16px;text-align:left;vertical-align:baseline;font-weight:400}
.er__tb thead th{padding-bottom:16px;vertical-align:bottom}
.er__p{display:inline-flex;align-items:center;gap:9px;font:620 16px/1 var(--f-sans);font-stretch:92%;color:var(--cream)}
.er__p img,.er__m{width:20px;height:20px;flex:none;border-radius:5px}
.er__m{color:var(--cream)}
.er__tb tbody th{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.er__tb tbody tr>*{transition:background-color var(--d-mid) var(--e)}
.er__tb tbody tr>:first-child{border-radius:12px 0 0 12px}
.er__tb tbody tr>:last-child{border-radius:0 12px 12px 0}
@media (hover:hover){.er__tb tbody tr:hover>*{background:var(--ground-2)}}
.er__n td{font-size:15px;font-variant-numeric:tabular-nums;color:var(--cream)}
.er__fn{max-width:56em;margin:18px 16px 0;font-size:12.5px;line-height:1.55;color:var(--ink-3)}

/* ── 7 · built in the open (home-combined's .open, in the new order) ─────────────────────── */
.open{padding:clamp(72px,12vh,136px) 0 clamp(40px,7vh,88px)}
.open__wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:36px clamp(40px,6vw,96px);align-items:start}
.open__d{max-width:26em}
.open__gh{margin-top:12px}

/* ── 8 · download (home-combined's .get, now the last section) ───────────────────────────── */
.get{padding:clamp(48px,8vh,96px) 0 clamp(72px,12vh,136px)}

/* ── narrow ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .pr__head{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "h" "d"}
  .pr__d{margin-top:18px}
  .cx{grid-template-columns:28px minmax(0,1fr)}
  .cx__ui{grid-column:2/-1;max-width:420px}
}
@media (max-width:980px){
  .dk__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "fig" "pick" "go";grid-template-rows:none}
  .dk__fig{margin-top:clamp(28px,5vh,40px)}
  .dk__pick{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:18px 0 0}
  .dk__b{grid-template-columns:minmax(0,1fr);grid-template-areas:"ic" "n";justify-items:center;row-gap:7px;padding:12px 4px 11px;text-align:center;
    background:rgb(var(--ink-rgb) / .04)}
  .dk__bn{font-size:14px}
  .dk__bw{display:none}
  .dk__b::after{top:9px;right:9px;margin:0;width:5px;height:5px}
  .dk__cap{margin-top:14px}
  .dk__go{margin-top:12px}
  .pr__body,.tg__in,.er__in,.open__wrap{grid-template-columns:minmax(0,1fr)}
  .pr__body{row-gap:22px}
  .pr__fts{order:2}
  .pr__foot{grid-template-columns:minmax(0,1fr);grid-template-areas:"note" "req" "go"}
  .pr__go{margin-top:14px}
  .tg__l{margin:36px -22px 0}
  .er__t{margin-top:32px}
}
@media (max-width:520px){
  .dk{padding-top:72px}
  .pr__h{font-size:32px}
  .pr__ft{margin:0 -14px}
  .ft{padding:14px;font-size:15px}
  .tg__l{margin:32px -14px 0}
  .cx{grid-template-columns:minmax(0,1fr);padding:18px 14px}
  .cx__id{grid-row:1}
  .cx__ui{grid-column:1/-1;max-width:none}
  .er__tb{font-size:12px}
  .er__tb th,.er__tb td{padding:10px 6px}
  .er__tb tbody th{font-size:10.5px;letter-spacing:.1em;white-space:normal}
  .er__p{flex-direction:column;align-items:flex-start;gap:6px;font-size:14px}
  .er__n td{font-size:13px}
  .er__fn{margin:16px 6px 0}
}
@media (max-width:360px){
  .dk__bn{font-size:13px}
  .vA__i{font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  .dk__b,.dk__b::after,.dk__win,.dk__scr .mq,.ft,.ft__see,.shot__z,.shot__r,.cx,.er__tb tbody tr>*{transition:none}
}
@media (forced-colors:active){
  .dk__b[aria-pressed="true"],.ft[aria-pressed="true"]{outline:2px solid Highlight}
  .shot__r{border-color:Highlight}
}
.pr__hint-g{display:inline-block;width:13px;height:13px;margin:0 2px;vertical-align:-2px;color:var(--ink-2)}
.vB__f b{font-weight:400;color:var(--ink-2)}
.vB__c{margin-left:auto;white-space:nowrap;padding:2px 7px;border-radius:6px;background:rgb(var(--ink-rgb) / .07);color:var(--ink-2)}