/* Preview "pro": sticky product scene, live widgets, one type and radius system, smoother motion.
   Loaded after apple.css; nothing here changes the hero artwork or the closing scene. */
:root{--r-xl:28px;--r-lg:20px;--r-md:14px;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--display:Unbounded,var(--font)}

/* ---- 3. Type and radius system ---- */
.section-index{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--moon-2)}
.theme-light .section-index,.theme-white .section-index{color:var(--ink-2)}
.section-index span{color:var(--accent-dark)}
.theme-light .section-index span,.theme-white .section-index span{color:var(--accent)}
.section-index::after{content:"";width:28px;height:1px;background:currentColor;opacity:.4}
.facts dd{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:clamp(38px,min(5vw,6vh),60px)}
.facts dt{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tile-label,.more-card .tile-label{font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.tile,.compare,.try-frame,.film-frame,.dl-card,.dl-news{border-radius:var(--r-xl)}
.more-card,.view-image,.needs-grid div,.related-card,.printer-link-card,.download-option{border-radius:var(--r-lg)}
.dl-file,.lw-card{border-radius:var(--r-md)}
.product-shot{border-radius:var(--r-xl)}
.product-shot img{border-radius:calc(var(--r-xl) - 5px)}

/* ---- 1. A MacBook Pro in real proportions: the "Widoki" scene and the demo ---- */
:root{--mac-wall:radial-gradient(60% 75% at 82% 6%,rgba(255,146,90,.5),transparent 62%),radial-gradient(55% 70% at 18% 96%,rgba(62,94,220,.5),transparent 66%),radial-gradient(45% 55% at 56% 58%,rgba(140,70,178,.32),transparent 70%),linear-gradient(150deg,#151926,#0b0c14 55%,#130d17)}
/* The device is sized in cqw of its own width; inside a screen, --pt is one macOS point. */
.mac{container-type:inline-size}
.mac-lid{width:90cqw;margin:0 auto;padding:1.05cqw 1.05cqw 1.9cqw;border-radius:2.3cqw 2.3cqw 1.2cqw 1.2cqw;background:#050506;box-shadow:0 0 0 .2cqw #2e2e33,0 0 0 .3cqw #111113,0 40px 90px -30px rgba(0,0,0,.9)}
.mac-base{position:relative;height:1.7cqw;border-radius:0 0 1.8cqw 1.8cqw / 0 0 1.4cqw 1.4cqw;background:linear-gradient(180deg,#56565c 0,#2c2c30 20%,#1b1b1e 70%,#0e0e10);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.mac-base::before{content:"";position:absolute;top:0;left:50%;width:15cqw;height:.65cqw;transform:translateX(-50%);border-radius:0 0 1cqw 1cqw;background:linear-gradient(180deg,#0b0b0d,#232327)}
.mac-notch{position:absolute;top:0;left:50%;z-index:5;width:calc(186 * var(--pt));height:calc(32 * var(--pt));transform:translateX(-50%);border-radius:0 0 calc(10 * var(--pt)) calc(10 * var(--pt));background:#050506}
.mac-menubar{position:absolute;inset:0 0 auto;z-index:4;display:flex;justify-content:space-between;align-items:center;height:calc(37 * var(--pt));padding:0 calc(14 * var(--pt)) 0 calc(20 * var(--pt));background:rgba(12,12,20,.3);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);color:#fff;font:400 calc(13 * var(--pt))/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;letter-spacing:0;white-space:nowrap}
.mm-left,.mm-right,.mm-status{display:flex;align-items:center;gap:calc(20 * var(--pt))}
.mm-right,.mm-status{gap:calc(16 * var(--pt))}
.mm-left b{font-weight:700}
.mm-battery,.mm-wifi{height:calc(12.5 * var(--pt));width:auto}
.mm-search{height:calc(13 * var(--pt));width:auto}
.mm-control{height:calc(13.5 * var(--pt));width:auto}
.mm-gantry{display:inline-flex;align-items:center;gap:calc(5 * var(--pt));height:calc(24 * var(--pt));padding:0 calc(7 * var(--pt));margin-right:calc(-2 * var(--pt));border-radius:calc(6 * var(--pt));font-variant-numeric:tabular-nums;transition:background .3s}
.mm-gantry img{height:calc(10 * var(--pt));width:auto}

.mode-scene{display:none}
@media(min-width:1001px){
 .views .view-grid{display:none}
 .mode-scene{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:48px;max-width:1240px;margin:0 auto}
 .mode-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.4;transition:opacity .45s var(--ease)}
 .mode-step:first-child{min-height:56vh;justify-content:flex-start;padding-top:12vh}
 .mode-step.is-active{opacity:1}
 .mode-index{font:500 13px var(--mono);letter-spacing:.12em;color:var(--accent-dark)}
 .mode-step h3{margin:12px 0 12px;font:800 clamp(30px,2.8vw,42px)/1.05 var(--display);letter-spacing:-.02em;text-transform:uppercase}
 .mode-step p{margin:0;max-width:380px;font-size:18px;line-height:1.5;color:var(--moon-2)}
 .mode-stage{position:sticky;top:96px;height:calc(100vh - 140px);max-height:720px;display:flex;align-items:center}
 .mode-stage .mac{width:min(100%,calc((100vh - 150px) * 1.55));margin:0 auto}
 /* A 1512 × 982 pt desktop (MacBook Pro 14"). */
 .mode-screen{--pt:calc(100cqw / 1512);container-type:inline-size;position:relative;width:100%;aspect-ratio:1512/982;overflow:hidden;border-radius:.9cqw .9cqw 0 0;background:var(--mac-wall)}
 .mode-screen[data-active=menu] .mm-gantry{background:rgba(255,255,255,.26)}
 .mode-shot{position:absolute;z-index:2;opacity:0;transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none}
 .mode-shot-menu{top:calc(42 * var(--pt));right:calc(8 * var(--pt));width:calc(643 * var(--pt));border-radius:calc(12 * var(--pt));box-shadow:0 0 0 1px rgba(255,255,255,.14),0 calc(20 * var(--pt)) calc(50 * var(--pt)) rgba(0,0,0,.55);transform-origin:70% 0;transform:translateY(calc(-8 * var(--pt))) scale(.97)}
 .mode-shot-window{top:calc(120 * var(--pt));left:calc(370 * var(--pt));width:calc(730 * var(--pt));border-radius:calc(14 * var(--pt));box-shadow:0 0 0 1px rgba(255,255,255,.16),0 calc(24 * var(--pt)) calc(70 * var(--pt)) rgba(0,0,0,.6);transform:translateY(calc(16 * var(--pt))) scale(.98)}
 .mode-shot-sidebar{top:calc(46 * var(--pt));right:calc(8 * var(--pt));height:calc(840 * var(--pt));width:auto;filter:drop-shadow(0 12px 28px rgba(0,0,0,.5));transform:translateX(calc(40 * var(--pt)))}
 .mode-screen[data-active=menu] .mode-shot-menu,.mode-screen[data-active=window] .mode-shot-window,.mode-screen[data-active=sidebar] .mode-shot-sidebar{opacity:1;transform:none}
 .views .side-points{margin-top:24px}
}

/* ---- 2. Live mini widgets in the feature cards ---- */
.tile-live{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:28px 36px 34px}
.lw-card{width:100%;max-width:420px;padding:18px 18px 16px;background:#1c1c1e;color:#f2f2f4;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 24px 50px rgba(0,0,0,.22)}
.lw-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;font-size:13px}
.lw-head b{font-weight:700}
.lw-head span{font-size:11px;color:#8e8e93}
.lw-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lw-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:#a1a1a6}
.lw-slot i{display:block;width:100%;height:64px;border-radius:9px;border:1px solid #3a3a3c;background:linear-gradient(to top,var(--c) var(--lvl),#2c2c2e var(--lvl));transition:background .3s linear}
.lw-slot.is-active i{box-shadow:0 0 0 2px #f2f2f4}
.lw-slot b{font-size:13px;color:#f2f2f4;font-variant-numeric:tabular-nums}
.lw-slot.is-low::after{content:"";position:absolute;top:-4px;right:-3px;width:10px;height:10px;border-radius:50%;background:#ff453a;box-shadow:0 0 0 3px #1c1c1e}
.lw-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid #2c2c2e;font-size:12px;color:#ff9f8a;transition:opacity .3s}
.lw-foot.is-quiet{opacity:0}
.lw-tasks{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.lw-tasks li{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:10px 12px;border-radius:10px;background:#2c2c2e;font-size:13px}
.lw-tasks b{font-size:12px;font-weight:600;color:#a1a1a6;font-variant-numeric:tabular-nums}
.lw-tasks i{grid-column:1/-1;height:4px;border-radius:2px;background:linear-gradient(90deg,#f0a467 var(--p),#3a3a3c var(--p));transition:background .4s}
.lw-tasks li.is-due b{color:#ff9f0a}
.lw-tasks li.is-done b{color:#30d158}
.lw-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.lw-kpis b{display:block;font:800 22px/1 var(--display);letter-spacing:-.02em}
.lw-kpis span{font-size:11px;color:#8e8e93}
.lw-bars{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;height:110px}
.lw-bars div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.lw-bars i{display:block;width:100%;height:var(--h);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#f0a467,#b0571b);transform-origin:bottom;transition:transform 1s var(--ease)}
.lw-bars span{font-size:10px;color:#8e8e93}
.js [data-live=stats]:not(.is-live) .lw-bars i{transform:scaleY(.05)}
.tile-shot-link{padding:0;border:0;background:none;font-size:14px;color:var(--accent)}
.tile-shot-link::after{content:" ›"}
.tile-shot-link:hover{text-decoration:underline}

/* ---- 4. Motion: page morph, native scroll reveals, button feedback ---- */
@view-transition{navigation:auto}
.globalnav-inner{view-transition-name:gantry-nav}
.layer-bar{view-transition-name:gantry-layers}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
/* Only where the range is understood too: without it the fade spans the whole pass across the
   screen and blocks sit half-transparent mid-screen. Fully in once the top is 260px up, however tall. */
@supports (animation-timeline: view()) and (animation-range: entry 0px entry 260px){
 .js .reveal{opacity:1;transform:none;transition:none;animation:pro-rise linear both;animation-timeline:view();animation-range:entry 0px entry 260px}
 @keyframes pro-rise{from{opacity:0;transform:translateY(48px) scale(.985)}to{opacity:1;transform:none}}
}
.pill,.dl-button,.globalnav-download{position:relative;overflow:hidden;transition:background .2s,transform .18s var(--ease),box-shadow .2s}
.pill::after,.dl-button::after,.globalnav-download::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease);pointer-events:none}
.pill:hover::after,.dl-button:hover::after,.globalnav-download:hover::after{transform:translateX(120%)}
.pill:active,.dl-button:active,.globalnav-download:active{transform:scale(.97)}
.pill:hover{box-shadow:0 10px 30px rgba(176,87,27,.35)}

/* ---- 5. Try it: one button opens the demo on a MacBook screen (demo.js scales the desktop) ---- */
.try-launch{display:grid;justify-items:center;gap:20px;max-width:1080px;margin:0 auto;padding:clamp(56px,9vh,88px) 24px clamp(48px,8vh,72px);border-radius:var(--r-xl);text-align:center;background:var(--mac-wall);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 120px rgba(240,164,103,.1)}
.try-open{display:inline-flex;align-items:center;gap:14px;padding:12px 28px 12px 12px;border:0;border-radius:999px;background:#f5f5f7;color:#1d1d1f;font-size:19px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;box-shadow:0 24px 60px rgba(0,0,0,.45);transition:transform .2s var(--ease),box-shadow .2s}
.try-open:hover{transform:scale(1.03);box-shadow:0 28px 70px rgba(0,0,0,.55)}
.try-open:active{transform:scale(.98)}
.try-open-icon{display:grid;place-items:center;width:42px;height:42px;padding-left:3px;border-radius:50%;background:#1d1d1f;color:#f5f5f7;font-size:14px}
.try-note{margin:0;max-width:460px;font-size:16px;line-height:1.5;color:rgba(245,245,247,.78)}
.try-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px;font:500 12px var(--mono);color:rgba(245,245,247,.55)}
.try-steps span{padding:8px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(0,0,0,.28)}
.try-steps b{padding-left:6px;font:500 14px var(--font);color:#f5f5f7}

.demo-modal{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#f5f5f7;overflow:hidden}
.demo-modal[open]{display:flex;align-items:center;justify-content:center;animation:demo-in .35s var(--ease)}
.demo-modal::backdrop{background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@keyframes demo-in{from{opacity:0;transform:scale(.97)}}
.demo-modal .demo-stage{display:flex;flex-direction:column;gap:14px;width:min(96vw,calc((100vh - 130px) / .62));border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.demo-modal .demo-toolbar{padding:0;border:0;background:none}
.demo-modal .demo-caption{padding:0;border:0;background:none;color:rgba(245,245,247,.5)}
.demo-modal .demo-caption>span:first-child{color:rgba(245,245,247,.8)}
.demo-modal-close{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#f5f5f7;font-size:13px;cursor:pointer}
.demo-modal-close:hover{background:rgba(255,255,255,.24)}
/* The screen shows a 1280 × 832 pt desktop (MacBook Air 13"), scaled by --s. */
.demo-screen{position:relative;width:100%;aspect-ratio:1280/832;overflow:hidden;border-radius:.9cqw .9cqw 0 0;background:#0b0c14}
.demo-desktop{--pt:1px;position:absolute;top:0;left:0;width:1280px;height:832px;overflow:hidden;transform-origin:0 0;transform:scale(var(--s,1));background:var(--mac-wall);text-align:left}
#demo-launcher{align-self:auto;border:0;background:transparent;color:#fff;font:inherit;box-shadow:none;cursor:pointer}
#demo-launcher[aria-expanded=true]{background:rgba(255,255,255,.26);box-shadow:none}
#demo-launcher img{width:auto;height:10px;opacity:1}
.panel-closed #demo-launcher{animation:launcher-ping 1.6s ease-out infinite}
@keyframes launcher-ping{from{box-shadow:0 0 0 0 rgba(255,255,255,.6)}to{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.demo-modal .demo-workspace{position:absolute;inset:0;min-height:0;padding:0}
.demo-desktop .demo-popover{position:absolute;top:42px;right:8px;z-index:3;width:643px;max-width:none;margin:0;padding:10px;border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.55)}
.demo-desktop .native-app-body{max-height:600px}
.demo-sidebar{position:absolute;top:45px;right:8px;z-index:2;height:775px;width:auto;filter:drop-shadow(0 16px 36px rgba(0,0,0,.5))}
.demo-modal .demo-invitation{display:none}
.demo-modal .panel-closed .demo-invitation{display:block;position:absolute;top:50%;left:50%;width:440px;max-width:calc(100% - 32px);margin:0;padding:30px 34px 28px;transform:translate(-50%,-50%);border-radius:22px;background:rgba(28,28,32,.55);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 80px rgba(0,0,0,.45);text-align:center}
.demo-modal .demo-invitation h3{margin:8px 0 12px;font-size:30px;line-height:1.12;letter-spacing:-.03em;color:#f5f5f7}
.demo-modal .demo-invitation>p:not(.small-label){margin:0;font-size:15px;line-height:1.55;color:rgba(245,245,247,.75)}
.demo-modal .demo-cross,.demo-modal .demo-invitation .demo-instructions,.demo-modal .has-sidebar .demo-invitation{display:none}
/* Phones and small windows: the same desktop at full size, without the device. */
@media(max-width:899px),(max-height:559px){
 .demo-modal .demo-stage{width:100%;height:100%;gap:0}
 .demo-modal .demo-toolbar{padding:10px 12px;background:#161617;border-bottom:1px solid rgba(255,255,255,.08)}
 .demo-mac{flex:1;min-height:0;display:flex;flex-direction:column}
 .demo-mac .mac-lid{flex:1;display:flex;width:100%;min-height:0;padding:0;border-radius:0;box-shadow:none}
 .demo-mac .mac-base,.demo-desktop .mac-notch,.demo-desktop .mm-status,.demo-desktop .mm-left span,.demo-modal .demo-caption{display:none}
 .demo-screen{flex:1;aspect-ratio:auto;border-radius:0}
 .demo-desktop{inset:0;width:auto;height:auto;transform:none}
 .demo-desktop .mac-menubar{height:32px;padding:0 12px}
 .demo-desktop .demo-popover{top:38px;left:8px;right:8px;width:auto;padding:8px}
 .demo-desktop .native-app-body{max-height:calc(100dvh - 228px)}
 .demo-sidebar{top:40px;height:calc(100% - 48px)}
 .demo-modal .demo-invitation h3{font-size:24px}
}

/* ---- 6. Gantry Vision: a camera frame with the watch overlay ---- */
.vision-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:center;max-width:1180px;margin:0 auto}
.vision-cam{margin:0}
.vision-frame{position:relative;aspect-ratio:850/480;overflow:hidden;border-radius:var(--r-xl);background:#090909;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 100px rgba(0,0,0,.6)}
.vision-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vision-scan{position:absolute;inset:0 0 auto;height:28%;background:linear-gradient(180deg,transparent,rgba(240,164,103,.18) 85%,rgba(240,164,103,.55));border-bottom:1px solid rgba(240,164,103,.8);animation:vision-scan 4.5s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}
@keyframes vision-scan{from{transform:translateY(-100%)}to{transform:translateY(360%)}}
.vision-corners{position:absolute;inset:7%;pointer-events:none;background:linear-gradient(#f0a467,#f0a467) 0 0/26px 2px,linear-gradient(#f0a467,#f0a467) 0 0/2px 26px,linear-gradient(#f0a467,#f0a467) 100% 0/26px 2px,linear-gradient(#f0a467,#f0a467) 100% 0/2px 26px,linear-gradient(#f0a467,#f0a467) 0 100%/26px 2px,linear-gradient(#f0a467,#f0a467) 0 100%/2px 26px,linear-gradient(#f0a467,#f0a467) 100% 100%/26px 2px,linear-gradient(#f0a467,#f0a467) 100% 100%/2px 26px;background-repeat:no-repeat}
.vision-badge{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:8px;margin:0;padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#f5f5f7}
.vision-badge i{width:8px;height:8px;border-radius:50%;background:#30d158;box-shadow:0 0 0 3px rgba(48,209,88,.25)}
.vision-scores{position:absolute;right:16px;bottom:16px;display:grid;gap:7px;width:min(260px,52%);padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:500 12px/1 var(--mono);color:#f5f5f7}
.vision-scores p{display:grid;grid-template-columns:76px 1fr 34px;align-items:center;gap:10px;margin:0}
.vision-scores b{height:5px;border-radius:3px;background:linear-gradient(90deg,#f0a467 var(--v),rgba(255,255,255,.14) var(--v))}
.vision-scores p:first-child b{background:linear-gradient(90deg,#30d158 var(--v),rgba(255,255,255,.14) var(--v))}
.vision-scores em{font-style:normal;text-align:right;color:rgba(245,245,247,.75)}
.vision-cam figcaption{margin-top:14px;font-size:14px;color:var(--moon-2);text-align:center}
.vision-points{display:grid;gap:26px;margin:0;padding:0;list-style:none;font-size:17px;line-height:1.5;color:var(--moon-2)}
.vision-points strong{display:block;margin-bottom:4px;font-size:19px;font-weight:600;color:var(--moon)}
.vision-note{max-width:760px;margin:56px auto 0;font-size:15px;line-height:1.55;text-align:center;color:var(--moon-2)}
.vision-note .more{white-space:nowrap}
@media(max-width:1000px){.vision-grid{grid-template-columns:1fr;gap:40px;max-width:680px}}
@media(max-width:734px){.vision-scores{right:8px;bottom:8px;width:56%;gap:4px;padding:7px 9px;border-radius:10px;font-size:10px}.vision-scores p{grid-template-columns:58px 1fr 26px;gap:6px}.vision-badge{padding:5px 9px;font-size:10px}.vision-badge{top:10px;left:10px}.vision-points{font-size:16px}.vision-points strong{font-size:17px}}

/* ---- 7. Costs: example calculator and a sample TXT report ---- */
.costs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;max-width:1080px;margin:0 auto}
.calc{display:grid;gap:18px;margin:0;padding:32px;border-radius:var(--r-xl);background:var(--white);box-shadow:0 20px 60px rgba(0,0,0,.08)}
.calc h3{margin:0 0 4px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.calc-field{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:baseline;font-size:16px;color:var(--ink)}
.calc-value{font:600 17px/1 var(--display);font-variant-numeric:tabular-nums}
.calc-value small{font:500 12px var(--mono);color:var(--ink-2)}
.calc-field input{grid-column:1/-1;width:100%;margin:0;accent-color:var(--accent);height:22px;cursor:pointer}
.calc-result{display:grid;gap:10px;margin-top:6px;padding:18px 20px;border-radius:var(--r-md);background:#f5f5f7}
.calc-result p{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;font-size:16px;color:var(--ink-2)}
.calc-result em{font-style:normal}
.calc-result b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.calc-total{padding-top:10px;border-top:1px solid rgba(0,0,0,.1)}
.calc-total span{color:var(--ink);font-weight:600}
.calc-total b{font:800 28px/1 var(--display);letter-spacing:-.02em;color:var(--accent)}
.calc-note{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.calc-group{display:grid;gap:18px;margin:0;padding:0;border:0;min-width:0}
.calc-group legend,.calc-more summary{margin-bottom:6px;padding:0;font-size:15px;font-weight:600;color:var(--ink)}
.calc-more{border-top:1px solid rgba(0,0,0,.08);padding-top:14px}
.calc-more summary{cursor:pointer}
.calc-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:12px}
.calc-num{display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.calc-num>span:last-child{display:flex;align-items:center;gap:6px}
.calc-num input,.calc-num select{width:100%;min-width:0;padding:8px 10px;border:1px solid rgba(0,0,0,.14);border-radius:10px;background:#fff;color:var(--ink);font:500 15px var(--font);font-variant-numeric:tabular-nums}
.calc-num input:disabled{opacity:.4}
.calc-num small{font:500 12px var(--mono);color:var(--ink-2)}
.calc-wide{grid-column:1/-1}
.calc-check{display:flex;align-items:center;gap:8px;align-self:end;padding-bottom:9px;font-size:13px;color:var(--ink-2)}
.calc-check input{accent-color:var(--accent);width:16px;height:16px}
.calc-result p[hidden]{display:none}
.calc-sub{padding-top:8px;border-top:1px solid rgba(0,0,0,.08)}
.calc-sub span,.calc-sub b{font-weight:600;color:var(--ink)}
.report pre{font-size:13px;line-height:1.6}
.costs-side{display:grid;gap:32px}
.report{margin:0;padding:22px 24px;border-radius:var(--r-lg);background:#1c1c1e;color:#f2f2f4;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.report figcaption{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#a1a1a6}
.report figcaption span{text-transform:none;letter-spacing:0;color:#8e8e93}
.report pre{margin:0;font:400 14px/1.75 var(--mono);white-space:pre-wrap}
.report pre span{color:#8e8e93}
.report pre b{font-weight:500;color:#f0a467}
.costs-points{display:grid;gap:20px;margin:0;padding:0;list-style:none;font-size:16px;line-height:1.5;color:var(--ink-2)}
.costs-points strong{display:block;margin-bottom:3px;font-size:18px;font-weight:600;color:var(--ink)}
.costs .vision-note{color:var(--ink-2)}
@media(min-width:1001px){.costs-side{position:sticky;top:96px}}
@media(max-width:1000px){.costs-grid{grid-template-columns:1fr;max-width:620px}}
@media(max-width:734px){.calc-nums{grid-template-columns:1fr}.calc{padding:24px 20px}.report{padding:18px}.report pre{font-size:12.5px}}

@media(max-width:734px){.try-open{gap:12px;padding-right:22px;font-size:17px}.try-open-icon{width:38px;height:38px}.tile-live{padding:22px 20px 26px}.lw-slot i{height:54px}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .js .reveal{animation:none}
 .mode-step,.mode-shot,.lw-slot i,.lw-tasks i,.lw-bars i,.lw-foot{transition:none}
 .demo-modal[open],.panel-closed #demo-launcher,.vision-scan{animation:none}
 .vision-scan{display:none}
 .try-open{transition:none}
 .pill::after,.dl-button::after,.globalnav-download::after{display:none}
 .pill:active,.dl-button:active,.globalnav-download:active{transform:none}
}