/* Preview "cinema": the workshop scene behind the whole page, a live evening comparison,
   a layer mosaic, a shorter page and lighter headlines. Loaded after pro.css. */

/* ---- 1. The workshop scene stays behind the page; dark sections let it through ---- */
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#000}
.backdrop img{width:100%;height:100%;object-fit:cover;object-position:50% 78%;filter:brightness(.62) saturate(.95);transform-origin:50% 80%}
.backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.2),rgba(0,0,0,.72) 78%)}
@supports (animation-timeline: scroll()){
 .backdrop img{animation:backdrop-drift linear both;animation-timeline:scroll(root)}
 @keyframes backdrop-drift{from{transform:scale(1.12)}to{transform:scale(1)}}
}
.theme-dark.views,.theme-dark.try,.theme-dark.evening,.theme-dark.vision,.telegram,.dl{background:rgba(0,0,0,.4)}
.telegram{background:linear-gradient(rgba(0,0,0,.4),rgba(18,12,8,.6) 60%,rgba(0,0,0,.4))}
/* Lights on at the end: the closing scene brightens and the lamp starts to glow. */
.closing-art{filter:brightness(.5);transition:filter 1.6s var(--ease)}
.closing-glow{position:absolute;left:50%;bottom:0;width:max(100%,1180px);aspect-ratio:1536/1024;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity 2s var(--ease) .3s;
 background:radial-gradient(14% 18% at 59% 63%,rgba(255,214,150,.55),transparent 70%),radial-gradient(26% 22% at 54% 80%,rgba(255,190,120,.22),transparent 72%);mix-blend-mode:screen}
.closing.is-lit .closing-art{filter:brightness(1)}
.closing.is-lit .closing-glow{opacity:1}
.closing-line{margin:22px 0 0;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,247,.55)}
.no-js .closing-art,.closing.is-lit .closing-art{filter:none}

/* ---- 2. The same evening, without and with Gantry ---- */
.evening-stage{position:relative;max-width:1180px;margin:0 auto;padding:clamp(28px,4vw,56px);border-radius:var(--r-xl);overflow:hidden;background:rgba(10,10,12,.6);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.mosaic{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.evening-panes{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.pane{display:flex;flex-direction:column;margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.pane-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;font:500 12px/1 var(--mono);letter-spacing:.04em}
.pane-bar i{width:9px;height:9px;border-radius:2px;background:currentColor;opacity:.35}
.pane-bar span{flex:1;text-align:center;margin-right:33px}
.pane-log{flex:1;min-height:clamp(300px,36vh,360px);margin:0;padding:18px 18px 8px;list-style:none;font:400 14px/1.55 var(--mono)}
.pane-log li{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid currentColor;border-color:rgba(127,127,127,.18)}
.pane-log time{opacity:.55}
.js .pane-log li{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.js .pane-log li.is-shown{opacity:1;transform:none}
.pane-log li.is-typing span::after{content:"▍";margin-left:1px;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.pane figcaption{display:flex;flex-direction:column;gap:2px;padding:14px 18px 16px;font-size:14px}
.pane figcaption b{font-weight:600}
.pane figcaption span{opacity:.65;font-size:13px}
.pane-without{background:#141415;color:#c7c7cc}
.pane-without .pane-bar{background:#1d1d1f;color:#8e8e93}
.pane-without li:nth-child(n+4) span{color:#ff8a7a}
.pane-with{background:#ece6d9;color:#1d1d1f}
.pane-with .pane-bar{background:#ddd5c4;color:#5c5546}
.pane-with time{color:#9a5a26;opacity:1}
.evening-foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:22px 0 0;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,247,.5)}
.evening-replay{padding:9px 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(0,0,0,.4);color:var(--moon);font:inherit;letter-spacing:.08em;cursor:pointer}
.evening-replay:hover{background:rgba(255,255,255,.1)}
@media(max-width:860px){.evening-panes{grid-template-columns:1fr}.pane-log{min-height:0}}
@media(max-width:734px){.pane-log{font-size:13px;padding:14px 14px 6px}.pane-log li{grid-template-columns:42px 1fr}}

/* ---- 3. Layer mosaic behind the download section too ---- */
.dl{position:relative;overflow:hidden}
.dl>.mosaic{opacity:.55}
.dl>:not(.mosaic){position:relative}

/* ---- 4. Shorter page, lighter headlines ---- */
.headline h2{font-weight:500;letter-spacing:-.03em}
.headline p{font-weight:300}
.section{padding-top:clamp(96px,15vh,160px);padding-bottom:clamp(96px,15vh,160px)}
.try-film{max-width:1040px;margin:clamp(56px,8vh,88px) auto 0;text-align:center}
.try-film-label{margin:0 0 22px;font-size:17px;color:var(--moon-2)}
.more-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}
@media(max-width:734px){.more-grid-4{grid-template-columns:1fr}}
.privacy-details{max-width:880px;margin:44px auto 0;text-align:center}
.privacy-details summary{display:inline-block;padding:10px 18px;border:1px solid rgba(0,0,0,.14);border-radius:999px;font-size:15px;cursor:pointer;list-style:none}
.privacy-details summary::-webkit-details-marker{display:none}
.privacy-details[open] summary{margin-bottom:28px}
.privacy-details .privacy-more{text-align:left;margin-top:0}

@media(prefers-reduced-motion:reduce){
 .backdrop img{animation:none;transform:none}
 .closing-art,.closing-glow,.js .pane-log li{transition:none}
 .pane-log li.is-typing span::after{animation:none}
}

/* ---- 5. Compatibility: the section frame; the board itself is section 17 ---- */
.fit{background:rgba(0,0,0,.4)}
.fit .headline{max-width:1180px;text-align:left}
.fit .headline p{margin-left:0}
.fit .headline h2{font-weight:300;letter-spacing:-.02em}
.fit .prepare{max-width:1180px}

/* ==== 6. One quiet system for the whole page (inspired by Hinoki, built from Gantry's own parts):
   everything dark over the workshop, square corners, light type, left-aligned headlines,
   outlined buttons with an arrow, thin rules instead of cards. ==== */
:root{--r-xl:4px;--r-lg:4px;--r-md:3px;--accent:#f0a467;--line:rgba(255,255,255,.12)}
.theme-light,.theme-white{--ink:#f5f5f7;--ink-2:rgba(245,245,247,.6);--paper:rgba(255,255,255,.04);--white:rgba(255,255,255,.035);background:rgba(0,0,0,.42);color:var(--ink)}
.theme-dark.product,.theme-light.product{background:rgba(0,0,0,.42)}

/* Type: light and left-aligned; the mono section label stays ours. */
.headline{max-width:1180px;margin:0 auto clamp(40px,6vh,64px);text-align:left}
.headline h2{font-weight:300;font-size:clamp(36px,4.4vw,60px);line-height:1.06;letter-spacing:-.025em}
.headline p{max-width:640px;margin:16px 0 0;font-size:clamp(17px,1.5vw,19px);font-weight:300;color:rgba(245,245,247,.58)}
.tile h3,.more-card h3,.privacy-grid h3,.mode-step h3{font-weight:400}
.tile-label,.more-card .tile-label{color:var(--accent)}

/* Buttons: an outlined box with an arrow instead of filled pills. */
.pill,.globalnav-download,.dl-button,.try-open{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 16px;border:1px solid rgba(245,245,247,.38);border-radius:2px;background:rgba(0,0,0,.35);color:var(--moon);font-size:15px;font-weight:400;letter-spacing:0;box-shadow:none;transition:background .2s,border-color .2s}
.pill::after,.globalnav-download::after,.dl-button::after,.try-open::after{content:"→";position:static;inset:auto;width:auto;margin-left:10px;background:none;transform:none;transition:transform .2s var(--ease)}
.pill:hover,.globalnav-download:hover,.dl-button:hover,.try-open:hover{background:rgba(255,255,255,.08);border-color:var(--accent);transform:none;box-shadow:none}
.pill:hover::after,.globalnav-download:hover::after,.dl-button:hover::after,.try-open:hover::after{transform:translateX(3px)}
.try-open{min-height:58px;padding:0 20px 0 10px;font-size:17px}
.try-open-icon{width:36px;height:36px;border-radius:2px;background:rgba(255,255,255,.12);color:var(--moon)}
.more{color:var(--moon);border-bottom:1px solid rgba(245,245,247,.35)}
.more::after{content:" →"}

/* Navigation: no floating pill — a thin transparent bar that darkens once you scroll. */
.globalnav{padding:0}
.globalnav-inner{max-width:none;height:64px;padding:0 var(--gutter);border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transition:background .3s,border-color .3s}
.globalnav.is-scrolled .globalnav-inner{background:rgba(0,0,0,.6);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.globalnav-logo .globalnav-icon{width:30px;height:30px;border-radius:7px}
.globalnav nav a{padding:8px 10px;border-radius:2px;font-size:14px;font-weight:400;color:rgba(245,245,247,.7)}
.globalnav-download{min-height:38px;height:38px;margin-left:6px;padding:0 12px;font-size:14px}
.globalnav-download .os-icon{width:15px;height:15px}
.layer-bar{max-width:none;margin:0;padding:0 var(--gutter)}
.layer-bar i{border-radius:0}

/* Layer stack: one square per section on the right edge, filled as you pass it. */
.layer-stack{position:fixed;right:18px;top:50%;z-index:40;display:grid;gap:7px;transform:translateY(-50%)}
.layer-stack a{display:block;width:9px;height:9px;border:1px solid rgba(245,245,247,.45);transition:background .25s,border-color .25s,transform .25s}
.layer-stack a.is-past{background:rgba(245,245,247,.7);border-color:transparent}
.layer-stack a.is-now{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
.layer-stack a:hover{border-color:var(--accent)}
@media(max-width:1100px){.layer-stack{display:none}}

/* Hero: the same workshop picture, the copy quiet and left-aligned above it. */
.hero{text-align:left}
.hero-copy{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.product-name{margin:0 0 18px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,247,.6)}
.hero h1{max-width:760px;margin:0;font-size:clamp(40px,min(5vw,7vh),68px);font-weight:300;line-height:1.04;letter-spacing:-.03em}
.hero .lead{max-width:540px;margin:20px 0 0;font-size:clamp(17px,1.5vw,19px);font-weight:300;color:rgba(245,245,247,.62)}
.cta-row{justify-content:flex-start;margin-top:30px}

/* Panels: flat, thin border, no shadow. */
.tile,.more-card,.calc,.report,.dl-card,.dl-news,.view-image,.vision-frame,.evening-stage,.fit-details-card,.product-shot,.try-launch,.film-frame{border-radius:4px;box-shadow:none}
.tile,.more-card,.calc{background:rgba(255,255,255,.035);border:1px solid var(--line)}
.product-shot{padding:0;border:1px solid var(--line);background:#111}
.product-shot img,.product-shot .zoom img{border-radius:0}
.try-launch{background:var(--mac-wall);border:1px solid var(--line)}
.fit-details-card{background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--moon)}

/* Costs calculator on dark. */
.calc-num input,.calc-num select{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.18);border-radius:2px;color:var(--moon)}
.calc-result{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:2px}
.calc-sub,.calc-total,.calc-more{border-color:var(--line)}
.calc-total b{font-family:var(--font);font-weight:300;font-size:32px;color:var(--accent)}
.calc-value{font-family:var(--font);font-weight:300}
.report{border:1px solid var(--line);background:rgba(10,10,12,.85)}

/* Privacy, FAQ and the legend on dark. */
.privacy-grid{text-align:left}
.privacy-grid svg{margin:0 0 18px;stroke:var(--accent)}
.privacy-details{text-align:left;max-width:1180px}
.privacy-details summary,.fit-details summary{border:1px solid rgba(245,245,247,.3);border-radius:2px}
.faq-list{max-width:1180px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:24px 0;font-size:clamp(20px,1.8vw,24px);font-weight:300}
.legend{justify-content:flex-start}

/* Closing and footer: the scene, one box, then a single quiet line. */
.closing h2{font-weight:300;letter-spacing:-.03em}
.footer{background:rgba(0,0,0,.85);color:rgba(245,245,247,.55);border-top:1px solid var(--line);color-scheme:dark}
.footer-note,.footer-bottom{border-color:var(--line)}
.footer-cols h3{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,247,.8)}
.footer-cols a:hover{color:var(--moon)}

/* One light typeface everywhere; the heavy display face is left to the wordmark. */
.dl-title{font:300 clamp(44px,5.4vw,84px)/1 var(--font);letter-spacing:-.03em;text-transform:none}
.dl-card h3{font:300 clamp(28px,2.4vw,36px)/1 var(--font);letter-spacing:-.02em;text-transform:none}
.dl-news-head h3{font:400 clamp(20px,1.8vw,24px)/1.1 var(--font);letter-spacing:-.01em;text-transform:none}
.facts dd{font-family:var(--font);font-weight:300;letter-spacing:-.03em}
.mode-step h3{font:300 clamp(32px,3vw,46px)/1.05 var(--font);letter-spacing:-.025em;text-transform:none}
.lw-kpis b{font-family:var(--font);font-weight:300;font-size:26px}
.dl>.mosaic{opacity:.3}

/* Content lines up with the left edge of the headlines. */
.tiles,.more-grid-4,.privacy-grid,.costs-grid,.try-launch,.try-film,.vision-grid,.dl-head,.dl-grid,.dl-news,.dl-foot{max-width:1180px}
.privacy-grid{gap:clamp(28px,4vw,56px)}
.try-launch{justify-items:start;text-align:left;padding:clamp(40px,7vh,72px) clamp(24px,4vw,56px)}
.try-steps{justify-content:flex-start}
.try-film{text-align:left}
.chapters{justify-content:flex-start}
.chapters button{border-radius:2px}
.vision-note,.costs .vision-note{max-width:1180px;text-align:left}
.fit .headline,.costs .headline{max-width:1180px}
/* Small chips are square too. */
.try-steps span,.dl-badge,.lw-tasks li,.mm-gantry,.calc-num input,.calc-num select{border-radius:2px}
@media(max-width:734px){
 .hero h1{font-size:clamp(36px,10vw,46px)}
 .headline h2{font-size:clamp(32px,8.6vw,40px)}
 .globalnav-inner{height:58px}
}

/* ==== 7. App windows drawn in HTML (gantry-ui.css) placed on the page ==== */
.product-shot:has(.gw){max-width:min(1100px,calc((100vh - 200px) * 1.55));padding:0;border:0;background:none}
.product-shot .gw-window{box-shadow:0 40px 100px rgba(0,0,0,.55)}
/* When the frame is narrower than the window wants (a short laptop screen), the whole window scales
   down instead of squeezing three columns of cards; phones keep their one-column layout (section 10). */
.product-shot:has(.gw-window){container-type:inline-size}
.product-shot .gw-window{--s:min(1px,calc(100cqw / 1000))}
/* Inside the MacBook: one point of the window is one point of the screen. */
.mode-shot .gw{--s:var(--pt)}
.mode-shot-menu .gw-popover{border-radius:inherit}
.mode-shot-window .gw-window{border-radius:inherit}
@media(min-width:1001px){
 .mode-shot-sidebar{width:calc(330 * var(--pt));height:auto}
 .mode-shot-sidebar .gw{--s:calc(var(--pt) * 1.3)}
}
/* Phone cards: the window scales to the card. */
.view-ui{container-type:inline-size;align-items:flex-start;overflow:hidden;padding:20px 16px}
.view-ui .gw{width:100%;--s:calc(100cqw / 640)}
.view-ui .gw-window{--s:calc(100cqw / 700)}
.view-ui-side .gw{width:min(100%,280px);margin:0 auto;--s:calc(min(100cqw, 280px) / 250)}
.tile-ui{align-items:flex-start}
.tile-ui .gw{width:min(100%,440px);margin:0 auto}
.tile-ui .gw-skip{width:min(100%,460px)}
.demo-sidebar{width:340px;height:auto}
.demo-sidebar .gw{--s:1.35px}
.tile-ui .gw-skip{--s:.78px;width:min(100%,400px)}
.tile-ui .gw-skip .gw-plate{max-height:250px}
.tile-ui .gw-details{--s:.92px}

/* ==== 8. The demo uses the same Modern cards ==== */
.gw-bar,.gw-ams,.gw-slot,.gw-slot-name{display:block}
.gw-card{width:100%;text-align:left;color:var(--gw-text);font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
button.gw-card:hover{border-color:#5a5a5e;background:#212124}
.gw-chamber{color:#8ba9c7}
.demo-popover.gw{background:var(--gw-bg);border-color:rgba(255,255,255,.14);border-radius:12px;font-size:13px}
.demo-popover .gw-head{margin-bottom:12px;padding:0 12px;border-radius:10px;background:#19191b}
.demo-popover .gw-head img{width:auto;height:11px}
.demo-popover .gw-head-tools{gap:6px}
.demo-popover .gw-head-tools button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:none;color:var(--gw-dim);font-size:13px;min-width:0}
.demo-popover .gw-head-tools button:hover,.demo-popover .gw-head-tools button[aria-pressed=true]{background:#2a2a2d;color:var(--gw-text)}
.demo-popover .gw-head-tools button .gi{color:inherit}
.gw-deco{display:inline-flex;gap:14px;margin-right:6px}
.native-fleet{gap:12px}
.native-fleet .gw-card.wide{grid-column:span 2}
.native-fleet.compact .gw-temps,.native-fleet.compact .gw-ams{display:none}
.native-fleet.compact .gw-card.wide{grid-column:auto}
.demo-popover .native-footer{color:var(--gw-mute)}
.demo-desktop .native-detail-card{border-color:#3a3a3c;border-radius:12px;background:var(--gw-card)}
/* Light view, like Modern in the light theme. */
.demo-stage.is-light .gw{--gw-bg:#ededf0;--gw-card:#fcfcfc;--gw-edge:#d6d6d9;--gw-strip:#f1f1f3;--gw-chip:#e6e6e9;--gw-text:#1d1d1f;--gw-dim:#6e6e73;--gw-mute:#8e8e93}
.demo-stage.is-light .gw-head{background:#f6f6f8}
.demo-stage.is-light .gw-bar,.demo-stage.is-light .gw-slot-bar{background-color:#d8d8db}
.demo-stage.is-light .gw-slot-bar{background:linear-gradient(90deg,var(--c) var(--l),#d8d8db var(--l))}
.demo-stage.is-light .gw-bar i{background:#3a3a3c}
.demo-stage.is-light .gw-btn{background:#ececef}
.demo-stage.is-light .gw-btn-skip{background:#f7e4d4}
.demo-stage.is-light .gw-job strong,.demo-stage.is-light .gw-meta,.demo-stage.is-light .gw-ams-head{color:#1d1d1f}
.demo-stage.is-light .gw-state i{background:#3a3a3c}
.demo-stage.is-light button.gw-card:hover{background:#fff;border-color:#bdbdc2}
.demo-stage.is-light .native-header img{filter:invert(1)}

/* ==== 9. Fixes for the dark system ==== */
/* Panels that used the light theme's white inside dark sections. */
.fit,.dl,.theme-dark{--white:rgba(255,255,255,.035);--paper:rgba(255,255,255,.04)}
.fit{--ink:#f5f5f7;--ink-2:rgba(245,245,247,.6)}
.prepare{max-width:1180px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.035);color:var(--moon)}
.prepare summary{font-weight:400}
.prepare dd{color:rgba(245,245,247,.6)}

/* ==== 10. Phones ==== */
@media(max-width:734px){
 .section{padding-top:76px;padding-bottom:76px}
 .headline{margin-bottom:32px}
 /* The fleet window reflows to one column on a phone: no rail, three printers, a short header. */
 .product-shot .gw-window{--s:1px;grid-template-columns:minmax(0,1fr)}
 .product-shot .gw-grid,.view-ui .gw-grid{grid-template-columns:minmax(0,1fr)}
 .product-shot .gw-rail,.product-shot .gw-head-tools{display:none}
 .product-shot .gw-main{padding:34px 8px 8px}
 .product-shot .gw-card:nth-child(n+4){display:none}
 /* Mode cards: one readable printer instead of two tiny ones. */
 .view-ui .gw-popover{--s:calc(100cqw / 330)}
 .view-ui .gw-window{--s:calc(100cqw / 400)}
 .view-ui .gw-card:nth-child(n+2){display:none}
 .view-ui .gw-foot{display:none}
 .view-ui .gw-head-tools{display:none}
 /* Telegram: swipe through full-size phones. */
 .phones{justify-content:flex-start;gap:14px;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
 .phones::-webkit-scrollbar{display:none}
 .phones img{flex:0 0 72%;width:72%;scroll-snap-align:center}
 .phones img:nth-child(2){transform:none}
 /* Calculator: costs first, the selling extras stay folded until asked for. */
 .calc-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
 .calc-check{grid-column:1/-1;padding-bottom:0}
 .calc-wide{grid-column:1/-1}
 /* Evening: shorter logs. */
 .evening-stage{padding:16px}
 .pane-log li{padding:6px 0}
}

/* Calculator fold (phones): the price and a button until asked for more. */
.calc-summary,.calc-toggle{display:none}
@media(max-width:734px){
 .costs-grid.is-folded .calc-group,.costs-grid.is-folded .calc-more,.costs-grid.is-folded .calc-note,
 .costs-grid.is-folded .calc-result p:not(.calc-total),.costs-grid.is-folded .report{display:none}
 .costs-grid.is-folded .calc-total{padding-top:0;border-top:0}
 .costs-grid.is-folded .calc-summary{display:block;margin:-6px 0 0;font-size:14px;color:rgba(245,245,247,.6)}
 .calc-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:0 16px;border:1px solid rgba(245,245,247,.38);border-radius:2px;background:rgba(0,0,0,.35);color:var(--moon);font:400 15px var(--font);cursor:pointer}
 .calc-toggle::after{content:"↓";transition:transform .2s var(--ease)}
 .calc-toggle[aria-expanded=true]::after{transform:rotate(180deg)}
 .costs-grid.is-folded .costs-side{gap:24px}
}

/* ==== 11. The little figure: drawn in SVG over the spot where it stood in the picture ==== */
.art-stage img{width:100%}
.buddy{position:absolute;z-index:2;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.buddy::before{content:"";position:absolute;inset:-30% -70% -10%}
.buddy svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.buddy svg *{transform-box:view-box}
.b-all{transform-origin:20px 78px}
.b-torso{transform-origin:20px 66px;animation:b-breathe 3.8s ease-in-out infinite}
.b-head{transform-origin:20px 34px;rotate:var(--tilt,0deg);transition:rotate .45s var(--ease);animation:b-bob 3.8s ease-in-out infinite}
.b-eyes{opacity:0;transform-origin:20px 19.4px;translate:var(--ex,0px) var(--ey,0px);transition:opacity .3s,translate .25s var(--ease),scale .08s}
.b-arm-l{transform-origin:8.3px 39px}
.b-arm-r{transform-origin:31.7px 39px}
.b-shadow{transform-origin:20px 78px}
.buddy.is-awake .b-eyes{opacity:1}
.buddy.is-blink .b-eyes{scale:1 .1}
.buddy.is-hop .b-all{animation:b-hop .72s var(--ease)}
.buddy.is-hop .b-shadow{animation:b-shadow .72s var(--ease)}
.buddy.is-wave .b-arm-r{animation:b-wave 1.5s ease-in-out}
.buddy.is-wave-left .b-arm-l{animation:b-wave-l 1.5s ease-in-out}
@keyframes b-breathe{50%{scale:1 1.025}}
@keyframes b-bob{50%{translate:0 .55px}}
@keyframes b-hop{18%{scale:1.08 .9}46%{translate:0 -13px;scale:.95 1.06}74%{translate:0 0;scale:1.07 .92}100%{translate:0 0;scale:1 1}}
@keyframes b-shadow{46%{scale:.68;opacity:.35}}
@keyframes b-wave{14%{rotate:-150deg}30%{rotate:-118deg}46%{rotate:-152deg}62%{rotate:-118deg}78%{rotate:-150deg}100%{rotate:0deg}}
@keyframes b-wave-l{14%{rotate:150deg}30%{rotate:118deg}46%{rotate:152deg}62%{rotate:118deg}78%{rotate:150deg}100%{rotate:0deg}}
.buddy-say{position:absolute;left:50%;bottom:calc(100% + 12px);z-index:3;width:max-content;max-width:240px;margin:0;padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:2px;background:rgba(14,14,16,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f5f5f7;font:400 13px/1.35 var(--font);letter-spacing:0;text-align:left;opacity:0;pointer-events:none;transform:translate(-50%,6px);transition:opacity .25s,transform .25s var(--ease)}
.buddy-say::after{content:"";position:absolute;left:50%;top:100%;width:8px;height:8px;margin:-4px 0 0 -4px;border:solid rgba(255,255,255,.2);border-width:0 1px 1px 0;background:rgba(14,14,16,.9);rotate:45deg}
.buddy.is-saying .buddy-say{opacity:1;transform:translate(-50%,0)}
@media(max-width:734px){
 .buddy-say{left:auto;right:-14px;max-width:190px;transform:translateY(6px)}
 .buddy-say::after{left:auto;right:18px}
 .buddy.is-saying .buddy-say{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .b-torso,.b-head,.buddy.is-hop .b-all,.buddy.is-hop .b-shadow,.buddy.is-wave .b-arm-r,.buddy.is-wave-left .b-arm-l{animation:none}
 .b-head,.b-eyes,.buddy-say{transition:none}
}

/* ==== 12. Status as a strip of four bars (design/squares.py): light = available, hatched = depends on
   the model or setup, empty frames = not available. The same strip in the board, legends, tables and subpages. ==== */
.sq{display:inline-grid;grid-auto-flow:column;grid-auto-columns:var(--bw,6px);gap:var(--bg,2px);height:var(--bh,14px);flex-shrink:0}
.sq-s{--bw:5px;--bh:12px}
.sq b{display:block;border-radius:1.5px}
.sq-yes b{background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0) 55%),#9d9da3}
.sq-part b{background:repeating-linear-gradient(135deg,rgba(240,164,103,.9) 0 2px,rgba(240,164,103,.14) 2px 5px);box-shadow:inset 0 0 0 1px rgba(240,164,103,.45)}
.sq-no b{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
/* The strip replaces the old round dot. */
.yes:has(>.sq)::before,.part:has(>.sq)::before,.no:has(>.sq)::before{content:none}
.yes,.part,.no{gap:10px}
.compare .no,.legend .no{color:rgba(245,245,247,.5)}
@media(max-width:734px){
 .compare-row{border:1px solid var(--line);border-radius:2px;background:rgba(255,255,255,.03)}
 .compare-row [role=cell]{display:flex;align-items:flex-start;gap:8px}
 .compare-row [role=cell] .sq{margin-top:5px}
}

/* ==== 13. Printer pages and guides in the same dark system (design/build_seo_pages.py, body.sub) ==== */
.sub .section,.sub .sub-hero{background:rgba(0,0,0,.42);color:var(--moon)}
.sub .sub-hero{background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.42))}
.sub-hero,.sub-cta{--edge:max(var(--gutter),calc((100% - 1180px) / 2))}
.sub-hero{padding:calc(64px + clamp(72px,14vh,140px)) var(--edge) clamp(72px,11vh,112px);text-align:left}
.sub-hero h1{max-width:900px;margin:0;font-size:clamp(40px,min(5vw,7vh),68px);font-weight:300;line-height:1.04;letter-spacing:-.03em}
.sub-hero .lead{max-width:600px;margin:20px 0 0;font-size:clamp(17px,1.5vw,19px);font-weight:300;color:rgba(245,245,247,.62)}
.crumbs ol{justify-content:flex-start;margin:0 0 30px;font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,247,.5)}
.crumbs li+li::before{content:"/";color:rgba(245,245,247,.3)}
/* What works: a ruled table, a square strip and a word per feature. */
.sub .support-list{max-width:1180px;border-top:1px solid var(--line);border-radius:0;background:none}
.sub .support-list li{grid-template-columns:minmax(0,1fr) 210px minmax(0,1.6fr);gap:28px;align-items:center;padding:24px 0}
.sub .support-list li+li{border-top:1px solid var(--line)}
.sub .support-list li:last-child{border-bottom:1px solid var(--line)}
.support-name{font:300 clamp(20px,1.8vw,26px)/1.2 var(--font);letter-spacing:-.015em}
.support-list .yes,.support-list .part,.support-list .no{gap:14px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--moon)}
.support-list .no{color:rgba(245,245,247,.45)}
.support-list .sq{--bw:8px;--bh:20px;--bg:3px}
.sub .support-text{font-size:15px;color:rgba(245,245,247,.58)}
/* What you need: cells of one grid instead of rounded cards. */
.sub .needs-grid{max-width:1180px;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sub .needs-grid div{padding:28px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:rgba(255,255,255,.02)}
.sub .needs-grid dt{color:var(--accent)}
.sub .needs-grid dd{font-weight:300;color:rgba(245,245,247,.8)}
/* Steps and notes: full-width rules, text kept to a readable measure. */
.sub .step-list,.sub .howto,.sub .note-list,.sub .verify-note,.sub .guide-card,.sub .faq-list,.sub .related-grid{max-width:1180px}
.sub .step-list,.sub .howto,.sub .note-list{border-top:1px solid var(--line)}
.sub .step-list li,.sub .howto li,.sub .note-list li{border-bottom:1px solid var(--line);padding-right:max(0px,calc(100% - 900px))}
.sub .step-list li{padding-top:24px;padding-bottom:24px;padding-left:76px;font-size:18px;font-weight:300}
.sub .howto li{padding-top:24px;padding-bottom:24px;padding-left:76px}
.sub .step-list li::before,.sub .howto li::before{top:20px;border-radius:2px;background:none;border-color:var(--line)}
.sub .howto h3{font-weight:400}
.sub .howto p{font-weight:300;color:rgba(245,245,247,.62)}
.sub .note-list li{padding-top:18px;padding-bottom:18px;font-weight:300}
.sub .note-list li::before{top:28px;width:7px;height:7px;border-radius:0}
.verify-badge{border:1px solid rgba(240,164,103,.5);border-radius:2px;background:none;color:var(--accent);font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.sub .verify-note{border-left:2px solid var(--accent);border-radius:0;background:rgba(240,164,103,.06);color:rgba(245,245,247,.75)}
.sub .guide-card{border:1px solid var(--line);border-radius:2px;background:rgba(0,0,0,.35);transition:border-color .2s}
.sub .guide-card:hover{border-color:var(--accent);transform:none}
.sub .guide-card strong{font-weight:300;font-size:22px}
.sub .guide-card strong::after{content:" →"}
.sub .faq details p{color:rgba(245,245,247,.62)}
/* The closing box and the links to other pages. */
.sub .sub-cta{background:rgba(0,0,0,.62)}
.sub-cta-icon{width:72px;height:72px;margin-bottom:24px;border-radius:16px}
.sub-cta h2{font-weight:300;letter-spacing:-.03em}
.sub-cta p{font-weight:300}
.sub-cta .cta-row{justify-content:center}
.sub .related-grid{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sub .related-card{padding:22px 24px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:rgba(255,255,255,.02);transition:background .2s}
.sub .related-card:hover{background:rgba(255,255,255,.06);box-shadow:none;transform:none}
.sub .related-card span{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sub .related-card strong{font-weight:300;font-size:20px}
.sub .related-card strong::after{content:" →";color:rgba(245,245,247,.4)}
@media(max-width:734px){
 .sub-hero{padding-top:calc(58px + 64px)}
 .sub .support-list li{grid-template-columns:1fr auto;gap:12px 16px;padding:20px 0}
 .support-list .sq{--bw:7px;--bh:18px}
 .sub .step-list li,.sub .howto li{padding-left:58px;padding-right:0}
 .sub .note-list li{padding-right:0}
 .sub .needs-grid div{padding:22px 20px}
}
/* The app window drawn in HTML, sized to the page: the popover and the details panel stay their own width. */
.sub-shot .product-shot:has(.gw){display:flex;justify-content:center;max-width:1180px}
.sub-shot .gw-popover{--s:max(.5px,min(1.1px,calc((100vh - 200px) / 640),calc((100vw - 2 * var(--gutter)) / 643)));width:calc(643 * var(--s));box-shadow:0 40px 100px rgba(0,0,0,.55)}
.sub-shot .gw-details{--s:max(.6px,min(1.1px,calc((100vh - 180px) / 700),calc((100vw - 2 * var(--gutter)) / 480)));width:calc(480 * var(--s));border:1px solid rgba(255,255,255,.14);border-radius:calc(12 * var(--s));box-shadow:0 40px 100px rgba(0,0,0,.55)}

/* ==== 14. "Try it" in the dark system: the button and steps on the left, a peek at what opens on the right ==== */
.try-launch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);justify-items:stretch;align-items:stretch;gap:0;padding:0;overflow:hidden;background:rgba(0,0,0,.42);border:1px solid var(--line);text-align:left}
.try-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:clamp(32px,5vw,56px)}
.try-launch .try-note{max-width:420px;font-weight:300;color:rgba(245,245,247,.62)}
.try-launch .try-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:0;width:100%;margin-top:6px;border-top:1px solid var(--line)}
.try-launch .try-steps span{display:flex;align-items:baseline;gap:14px;padding:14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;color:var(--accent)}
.try-launch .try-steps b{padding-left:0;font:300 17px/1.3 var(--font);color:var(--moon)}
/* The peek: a desktop over the workshop, the menu bar and the Gantry popover under its icon. */
.try-peek{position:relative;min-height:340px;overflow:hidden;container-type:inline-size;border-left:1px solid var(--line);background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.55)),url(assets/workshop-stage.webp) 50% 82%/cover;cursor:pointer}
.try-peek::after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none}
.try-peek-bar{position:absolute;inset:0 0 auto;z-index:1;display:flex;justify-content:space-between;align-items:center;height:28px;padding:0 14px;background:rgba(10,10,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f5f5f7}
.try-peek-bar span{display:flex;align-items:center;gap:12px;font-weight:400}
.try-peek-bar img{width:18px;height:18px;padding:2px;border-radius:4px;background:rgba(255,255,255,.22)}
.try-peek .gw-popover{--s:calc(100cqw / 760);position:absolute;top:36px;right:12px;width:calc(643 * var(--s));box-shadow:0 30px 80px rgba(0,0,0,.6);transition:translate .4s var(--ease)}
.try-peek:hover .gw-popover{translate:0 -4px}
@media(max-width:860px){
 .try-launch{grid-template-columns:minmax(0,1fr)}
 .try-copy{padding:28px 20px}
 .try-launch .try-open{width:100%;justify-content:flex-start}
 .try-launch .try-open::after{margin-left:auto}
 .try-peek{min-height:0;aspect-ratio:4/3;border-left:0;border-top:1px solid var(--line)}
 .try-peek .gw-popover{--s:calc(100cqw / 700);right:50%;translate:50% 0}
 .try-peek:hover .gw-popover{translate:50% 0}
}
@media(prefers-reduced-motion:reduce){.try-peek .gw-popover{transition:none}}

/* ==== 15. Guides ("working with Gantry", design/workflow_content.py) ==== */
.related-card em{font-style:normal;font-size:14px;line-height:1.4;font-weight:300;color:rgba(245,245,247,.55)}
.sub .hub-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.sub-shot .gw-side{--s:max(.7px,min(1.3px,calc((100vw - 2 * var(--gutter)) / 320),calc((100vh - 220px) / 540)));width:calc(300 * var(--s));box-shadow:0 40px 100px rgba(0,0,0,.55)}

/* ==== 16. Colours and multi-material, the web panel on a phone (design/home_sections.py) ==== */
.colors,.webpanel{background:rgba(0,0,0,.4)}
.map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);max-width:1180px;margin:0 auto}
.map-card{display:flex;flex-direction:column;justify-content:space-between;gap:24px;margin:0;padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.03)}
.map-card h3{margin:6px 0 8px;font-size:clamp(22px,2vw,28px);font-weight:300;letter-spacing:-.02em}
.map-card figcaption>p:last-child{margin:0;font-size:15px;font-weight:300;color:rgba(245,245,247,.6)}
.map-art svg{display:block;width:100%;height:auto}
.map-svg text{font:500 12px/1 var(--mono);fill:rgba(245,245,247,.62)}
.map-svg .t{fill:var(--accent);letter-spacing:.06em}
.map-sq{stroke:rgba(255,255,255,.28);stroke-width:1}
.map-box{fill:rgba(255,255,255,.03);stroke:var(--line)}
.map-link{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:.5 8;animation:map-flow 1.6s linear infinite}
@keyframes map-flow{to{stroke-dashoffset:-17}}
.map-note{max-width:1180px;margin:22px auto 0;font-size:15px;font-weight:300;color:rgba(245,245,247,.55)}
.mm-strip{max-width:1180px;margin:clamp(56px,8vh,88px) auto 0}
.mm-title{margin:0 0 18px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,247,.6)}
.mm-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.mm-list li{display:flex;flex-direction:column;gap:4px;padding:24px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.mm-list b{margin-top:18px;font-size:18px;font-weight:400;letter-spacing:-.01em}
.mm-list li>span:last-child{font-size:13px;color:rgba(245,245,247,.55)}
/* Each system drawn as a box of spools: bars in the spool colours, the AMS HT as a single box beside. */
.mm-icon{display:flex;align-items:flex-end;gap:6px;height:58px}
.mm-box,.mm-ht{display:flex;align-items:flex-end;gap:4px;padding:8px 8px 6px;border:1px solid rgba(255,255,255,.22);border-radius:3px;background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.01))}
.mm-icon i{display:block;width:12px;height:30px;border-radius:2px;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 40%,rgba(0,0,0,.2)),var(--c)}
.mm-ht{padding:6px}.mm-ht i{width:14px;height:20px}
.mm-cfs .mm-box{border-radius:10px 10px 3px 3px}
.mm-ace .mm-box{gap:6px;padding-bottom:12px}.mm-ace i{width:13px;height:22px}
.mm-canvas .mm-box{flex-wrap:wrap;width:62px;gap:4px}.mm-canvas i{width:16px;height:14px;border-radius:50%}
.mm-mmu .mm-box{gap:3px}.mm-mmu i{width:6px;height:34px}
/* The web panel: copy beside a phone that shows the panel's printer cards and bottom menu. */
.web-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(40px,6vw,96px);max-width:1180px;margin:0 auto}
.web-copy .headline{margin-bottom:32px}
.web-points{margin:0 0 28px;padding:0;list-style:none;border-top:1px solid var(--line)}
.web-points li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.web-points b{font-weight:400;color:var(--moon)}
.web-points span{font-weight:300;color:rgba(245,245,247,.62)}
.phone{width:min(300px,78vw);aspect-ratio:300/620;padding:10px;border:1px solid rgba(255,255,255,.18);border-radius:44px;background:#0c0c0e;box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 0 0 2px #1b1b1e}
.phone-screen{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:35px;background:#141416}
.phone-status{display:flex;justify-content:space-between;align-items:center;height:36px;padding:4px 24px 0;font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f5f5f7}
.phone-island{width:84px;height:24px;border-radius:13px;background:#000}
.phone-url{margin:4px 12px 8px;padding:7px 10px;border-radius:9px;background:#232326;font:400 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:rgba(245,245,247,.6);text-align:center}
.phone-app{--s:.6px;flex:1;min-height:0;overflow:hidden;padding:0 8px;background:none}
.phone-app .gw-head-tools{display:none}
.phone-app .gw-head{margin-bottom:8px}
.phone-tabs{display:grid;grid-template-columns:repeat(5,1fr);padding:9px 6px 20px;border-top:1px solid rgba(255,255,255,.08);background:rgba(20,20,22,.96)}
.phone-tabs span{display:grid;justify-items:center;gap:4px;font:500 9px/1 var(--font);color:rgba(245,245,247,.5)}
.phone-tabs .gi{width:18px;height:18px}
.phone-tabs .is-on{color:var(--accent)}
@media(max-width:900px){
 .map-grid,.web-grid{grid-template-columns:minmax(0,1fr)}
 .mm-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mm-list li:last-child{grid-column:1/-1}
 .phone{margin:0 auto}
}
@media(max-width:734px){.web-points li{grid-template-columns:minmax(0,1fr);gap:4px}}
@media(prefers-reduced-motion:reduce){.map-link{animation:none}}

/* ==== 17. Compatibility board (design/fit_board.py): rows with a bar strip under the feature names,
   the selected row's details beside them, and a switch to the detailed table. ==== */
.fit-board{max-width:1180px;margin:0 auto;border:1px solid var(--line);border-radius:6px;background:rgba(12,12,14,.82)}
.fb-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 26px 6px}
.fb-title{margin:0;font-size:20px;font-weight:500;letter-spacing:-.01em}
.fb-sub{margin:4px 0 0;font-size:14px;color:rgba(245,245,247,.55)}
.fb-switch{display:flex;padding:3px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04)}
.fb-switch button{padding:7px 14px;border:0;border-radius:4px;background:none;color:rgba(245,245,247,.6);font:500 13px/1 var(--font);cursor:pointer}
.fb-switch button[aria-pressed=true]{background:rgba(255,255,255,.12);color:var(--moon)}
.fb-board-view{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.fb-main{padding:14px 18px 20px 18px}
.fb-head,.fb-row{display:grid;grid-template-columns:170px auto minmax(0,1fr);align-items:center;gap:20px}
.fit-board{--bw:14px;--bh:24px;--bg:3px}
.fb-head{padding:0 8px 8px;font:500 9.5px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:rgba(245,245,247,.45)}
.fb-cols,.fb-strip{display:grid;grid-template-columns:repeat(5,calc(4 * var(--bw) + 3 * var(--bg)));gap:12px}
.fb-cols span{white-space:nowrap;overflow:visible}
.fb-head>span:last-child{padding-left:4px}
.fb-row{width:100%;padding:9px 8px;border:0;border-top:1px solid rgba(255,255,255,.07);border-radius:4px;background:none;color:var(--moon);font:inherit;text-align:left;cursor:pointer;transition:background .2s}
.fb-row:hover{background:rgba(255,255,255,.04)}
.fb-row[aria-pressed=true]{background:rgba(255,255,255,.08)}
.fb-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fb-name{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:400;white-space:nowrap}
.fb-mono{display:inline-grid;place-items:center;flex-shrink:0;min-width:24px;height:24px;padding:0 4px;border:1px solid rgba(255,255,255,.18);border-radius:4px;font:600 10px/1 var(--mono);color:rgba(245,245,247,.75)}
.fb-row:first-of-type .fb-mono,.fb-detail:first-child .fb-mono{border-color:var(--accent);background:var(--accent);color:#111}
.fb-strip .sq b{transition:opacity .45s;transition-delay:calc(var(--row,0) * 60ms + var(--g,0) * 90ms)}
.js .fit-board:not(.is-in) .fb-strip .sq b{opacity:0}
.fb-out{display:grid;gap:3px;line-height:1.25}
.fb-out b{font-size:14px;font-weight:600}
.fb-out span{font-size:13px;color:rgba(245,245,247,.5)}
.fb-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 8px 0;font-size:12px;color:rgba(245,245,247,.55)}
.fb-legend span{display:inline-flex;align-items:center;gap:8px}
.fb-legend .sq{--bw:5px;--bh:12px;--bg:2px}
.fb-side{padding:22px 24px 24px;border-left:1px solid var(--line)}
.fb-detail{display:none}
.fb-detail.is-on{display:block}
.fb-detail header{display:flex;align-items:center;gap:12px}
.fb-detail header div{flex:1}
.fb-detail h3{margin:0;font-size:18px;font-weight:500}
.fb-detail header p{margin:2px 0 0;font-size:13px;color:rgba(245,245,247,.5)}
.fb-detail header>b{font:300 32px/1 var(--font);font-variant-numeric:tabular-nums}
.fb-detail header small{font-size:.5em;color:rgba(245,245,247,.45)}
.fb-lead{margin:16px 0 14px;font-size:14px;line-height:1.5;color:rgba(245,245,247,.7)}
.fb-feats{margin:0 0 18px;padding:0;list-style:none;border-top:1px solid var(--line)}
.fb-feats li{display:grid;grid-template-columns:92px auto minmax(0,1fr);align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.fb-feats li>span{color:rgba(245,245,247,.6)}
.fb-feats em{font-style:normal;color:var(--moon)}
.fb-feats .sq{--bw:6px;--bh:16px;--bg:2px}
.fb-table-view{padding:8px 18px 22px}
.js .fit-board:not(.is-table) .fb-table-view,.js .fit-board.is-table .fb-board-view{display:none}
.fb-table-view .compare{max-width:none;background:none}
@media(max-width:1000px){
 .fb-board-view{grid-template-columns:minmax(0,1fr)}
 .fb-side{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:640px){
 .fit-board{--bw:9.5px;--bh:20px;--bg:2px}
 .fb-top{flex-direction:column;padding:18px 16px 4px}
 .fb-main{padding:10px 8px 16px}
 .fb-head{display:none}
 .fb-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:12px 8px}
 .fb-strip{grid-column:1/-1;grid-row:2;gap:8px}
 .fb-out{text-align:right}
 .fb-side{padding:18px 16px 20px}
 .fb-feats li{grid-template-columns:84px auto minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.fb-strip .sq b{transition:none}}