/* PomoZentra homepage-only sections. Shared chrome lives in site.css. */

/* hero */
.hero{padding-top:74px;padding-bottom:96px}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.eyebrow .dash{width:26px;height:1px;background:var(--line);flex:none}
.eyebrow .lbl{white-space:nowrap}
/* four-line H1: capped lower than the old three-line headline so the longest
   line ("Pomodoro timer") still fits the hero column instead of being clipped
   by `h1 span{overflow:hidden}`. */
h1{font-size:clamp(38px,4.6vw,58px);line-height:1;letter-spacing:-.045em;font-weight:600}
h1 span{display:block;overflow:hidden}
h1 span b{display:block;font-weight:600;transform:translateY(105%);animation:rise .95s cubic-bezier(.16,1,.3,1) forwards}
h1 span:nth-child(2) b{animation-delay:.09s}h1 span:nth-child(3) b{animation-delay:.18s}h1 span:nth-child(4) b{animation-delay:.27s}
@keyframes rise{to{transform:translateY(0)}}
.hero .sub{max-width:440px;margin-top:26px;font-size:16.5px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.hero .act{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero .act .btn{height:50px;padding:0 28px;font-size:15px;border-radius:999px}
.hero .risk{font-size:13px;color:var(--mut);margin-top:16px}
.demo{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600}
.demo .o{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;transition:.25s}
.demo:hover .o{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg)}
.demo u{text-underline-offset:4px;text-decoration-thickness:1px}
/* hero composition */
.comp{position:relative;height:572px}
.comp>*{position:absolute}
.halo{width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,var(--halo),transparent 62%);right:-90px;top:-40px;z-index:0}
.shot{width:336px;height:474px;right:-8px;bottom:0;z-index:2;animation:float 11s ease-in-out infinite;will-change:transform}
.shot image-slot::part(frame){background:transparent}
/* The hero portrait ships with a baked-in grey studio background and hard
   rectangular edges. Two linear masks intersected feather all four sides so it
   dissolves into the dark section instead of sitting in a visible box. The
   bottom stop is early (72%) because that edge is the brightest part of the
   source. object-position keeps the head in frame when cover crops the 2:3
   source into the 336x474 slot. */
.shot img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 10%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 72%,transparent 99%),linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 72%,transparent 99%),linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
@keyframes float{50%{transform:translateY(-10px)}}
.chip{display:flex;align-items:center;gap:10px;background:rgba(27,30,36,.86);border:1px solid var(--inv-line);backdrop-filter:blur(8px);border-radius:999px;padding:9px 16px 9px 13px;z-index:4;box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
.chip .pulse{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none;box-shadow:0 0 0 0 rgba(231,100,43,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(231,100,43,0)}100%{box-shadow:0 0 0 0 rgba(231,100,43,0)}}
.chip .t{font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap}
.chip b{font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.chip-timer{right:150px;top:16px}
.chip-log{left:10px;top:96px;animation:float 9s 1.5s ease-in-out infinite}
.chip-log .tick{width:16px;height:16px;border-radius:50%;background:var(--c-rev);color:#fff;display:grid;place-items:center;font-size:9px;flex:none}
.acard{left:0;bottom:14px;width:330px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px;z-index:5;box-shadow:0 42px 70px -34px rgba(0,0,0,.85)}
.acard .ah{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.acard .ah .day{font-size:11px;font-weight:600;color:var(--mut);font-family:"JetBrains Mono",monospace}
.acard .big{display:flex;align-items:baseline;gap:5px;font-family:Archivo,sans-serif;font-weight:600;letter-spacing:-.05em;line-height:1}
.acard .big b{font-size:52px}.acard .big i{font-size:22px;font-style:normal;color:var(--mut)}
.acard .meter{height:6px;border-radius:99px;background:var(--line2);margin:14px 0 16px;overflow:hidden}
.acard .meter i{display:block;height:100%;border-radius:99px;background:var(--acc);width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1) .5s}
.run .acard .meter i{width:78%}
.arow{display:grid;grid-template-columns:9px 1fr auto auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line2);font-size:13px}
.arow .sw{width:9px;height:9px;border-radius:3px}
.arow .nm{color:var(--ink2)}
.arow .pips{display:flex;gap:3px;margin-left:auto;align-items:center}
.arow .pips i{width:10px;height:14px;border-radius:2px;background:var(--line2)}
.arow .pips i.on{background:currentColor}
.arow .ct{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mut);min-width:30px;text-align:right}
.acard .af{margin-top:14px;padding-top:12px;border-top:1px solid var(--line2);font-size:12.5px;line-height:1.5;color:var(--mut)}
@media(prefers-reduced-motion:reduce){.shot,.chip-log,.chip .pulse,h1 span b{animation:none!important}h1 span b{transform:none}}
/* floating (picture-in-picture) timer section */
.float{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.pipdemo{display:grid;gap:12px;position:sticky;top:104px}
/* Mirrors the real Picture-in-Picture panel rendered by DesktopFocusTimer in
   src/components/chrome.jsx: browser title bar, brand + status head, task and
   step, count, then "Open focus" beside the primary action. */
.pipwin{border-radius:12px;overflow:hidden;background:#2b2d31;box-shadow:0 32px 60px -30px rgba(0,0,0,.6)}
.pipbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px}
.piptitle{font-size:12px;font-weight:600;color:#e6e7ea}
.pipwc{display:flex;align-items:center;gap:12px;flex:none}
.pipwc i{display:block;width:11px;height:10px;opacity:.75}
.pipico-pop{border:1.5px solid #cfd1d5;border-radius:2px}
.pipico-x{background:linear-gradient(45deg,transparent 44%,#cfd1d5 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#cfd1d5 44% 56%,transparent 56%)}
.pipin{padding:11px 13px 13px;background:radial-gradient(circle at 90% 0,rgba(231,100,43,.14),transparent 46%),#15171c;color:#f4f2ec}
.piphead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pipbrand,.pipstatus{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.pipbrand i{color:var(--acc);font-style:normal}
.pipstatus{color:#92949a}
.pipbody{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0 12px}
.pipbody .num{font-size:30px;font-weight:700;letter-spacing:-.05em;line-height:1;flex:none;color:#f4f2ec}
.pipmeta{display:grid;gap:4px;min-width:0}
.piptask{font-size:14px;font-weight:600;line-height:1.2}
.pipmeta .pipsub{font-size:10.5px;color:#92949a}
.pipctl{display:flex;justify-content:space-between;gap:8px}
.pipctl span{padding:7px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);font-size:10.5px;font-weight:700;color:#f4f2ec}
.pipctl .primary{border-color:var(--acc);background:rgba(231,100,43,.9)}
.pipwin.sm{box-shadow:none;border-radius:9px}
.pipwin.sm .pipbar{padding:7px 10px}
.pipwin.sm .piptitle{font-size:10px}
.pipwin.sm .pipin{padding:9px 11px 11px}
.pipwin.sm .pipbody{padding:11px 0 0}
.pipwin.sm .pipbody .num{font-size:24px}
.pipwin.sm .piptask{font-size:12px}
/* five-step loop: one connected route, rather than five unrelated cards */
.steps.five{grid-template-columns:repeat(5,1fr);gap:0;position:relative;isolation:isolate}
.steps.five::before{content:"";position:absolute;left:26px;right:calc(20% - 26px);top:25px;height:2px;background:linear-gradient(90deg,var(--acc),rgba(231,100,43,.2));z-index:-1}
.steps.five .stp{padding:0 26px 22px 0;border:0;border-radius:0;background:none;box-shadow:none}
.steps.five .stp:hover{transform:none;border-color:transparent;box-shadow:none}
.steps.five .stp .n{width:52px;height:52px;border-radius:50%;margin-bottom:24px;border:8px solid var(--bg);background:var(--ink);color:var(--bg);box-shadow:0 0 0 1px var(--line),0 10px 24px -16px rgba(21,23,28,.8)}
.steps.five .stp:first-child .n,.steps.five .stp:last-child .n{background:var(--acc);color:#fff;box-shadow:0 0 0 1px rgba(231,100,43,.38),0 12px 28px -14px rgba(231,100,43,.8)}
.steps.five .stp h3{font-size:18px}
.steps.five .stp p{font-size:13.5px}
.route-pair{display:grid;grid-template-columns:180px repeat(2,1fr);align-items:stretch;margin-top:44px;padding:8px;border-radius:18px;background:#15171C;color:#F7F7F6;box-shadow:0 26px 56px -34px rgba(21,23,28,.7)}
.route-pair-label{display:flex;align-items:center;padding:18px 20px;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,247,246,.52)}
.route-pair a{display:grid;grid-template-columns:1fr max-content;gap:5px 18px;padding:16px 20px;border-left:1px solid rgba(247,247,246,.12);border-radius:12px;color:#F7F7F6;transition:background .25s,color .25s}
.route-pair a span{grid-column:1;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#E7642B}
.route-pair a b{grid-column:1;font-family:Archivo,sans-serif;font-size:16px;letter-spacing:-.02em}
.route-pair a i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:20px;color:rgba(247,247,246,.48);transition:transform .25s,color .25s}
.route-pair a:hover{background:#242832;color:#fff}.route-pair a:hover i{color:var(--acc);transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.route-pair a,.route-pair a i{transition:none}.route-pair a:hover i{transform:none}}
/* before / after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bacard{border:1px solid var(--line);border-radius:14px;padding:28px 28px 30px;background:color-mix(in srgb,var(--panel) 55%,transparent)}
.bacard.now{background:var(--panel);border-color:var(--acc)}
.bacard .lbl{display:block;margin-bottom:22px}
.bacard.now .lbl{color:var(--acc)}
.baline{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line2);font-size:15px;color:var(--ink2)}
.baline:last-child{border-bottom:0}
.baline b{font-family:Archivo,sans-serif;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bafoot{margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--ink2)}
/* plan vs actual table */
.pva{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.pva .row{display:grid;grid-template-columns:14px 1fr 76px 76px 96px;gap:18px;align-items:center;padding:16px 26px;border-bottom:1px solid var(--line2)}
.pva .row:last-child{border-bottom:0}
.pva .row.hd{background:color-mix(in srgb,var(--ink) 4%,transparent);padding-top:12px;padding-bottom:12px}
.pva .row.hd span{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.pva .sw{width:14px;height:14px;border-radius:4px}
.pva .nm{font-family:Archivo,sans-serif;font-weight:600;font-size:15.5px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.pva .fa{font-family:Inter,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.09em;color:var(--acc);border:1px solid var(--acc);border-radius:999px;padding:2px 7px}
.pva .v{font-family:"JetBrains Mono",monospace;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink2)}
.pva .v.m{color:var(--ink);font-weight:600}
.pva .v.neg{color:#C2603E}
.pva .row.tot{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.pva .row.tot .nm{font-size:14px}
/* tour */
.tour{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.tcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column}
.tcard .tx{padding:22px 24px;flex:1 0 auto}
.tcard h3{font-size:17px;margin-bottom:8px}
.tcard p{font-size:14px;line-height:1.55;color:var(--ink2)}
.tcard figure{overflow:hidden;border-top:1px solid var(--line2);background:#F2F3F5;height:196px;flex:none}
.tcard img{width:100%;height:100%;display:block;object-fit:cover;object-position:top left}
/* gallery */
.gal{position:relative;height:clamp(520px,52vw,680px);display:grid;place-items:center;isolation:isolate}
.gal::before{content:"";position:absolute;left:50%;top:46%;width:min(920px,110%);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,rgba(231,100,43,.2),rgba(231,100,43,.05) 42%,transparent 64%);z-index:0}
.gal .mid{position:relative;z-index:3;text-align:center;max-width:560px}
.gal h2{font-size:clamp(28px,3.6vw,46px);line-height:1.06}
.gal p{margin:16px auto 0;max-width:430px;font-size:15.5px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.gal .btn{margin-top:26px;height:48px;padding:0 28px;border-radius:999px;background:var(--acc);color:#fff}
.gal .btn:hover{background:var(--inv-bg);color:var(--inv-fg)}
.gal .names{margin-top:22px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.tile{position:absolute;width:clamp(108px,14.5vw,196px);aspect-ratio:3/2;border-radius:9px;overflow:hidden;background:#F2F3F5;border:4px solid #FBFBFA;box-shadow:0 26px 40px -22px rgba(0,0,0,.85);z-index:2;padding:0;cursor:zoom-in;animation:drift 12s ease-in-out infinite;will-change:transform;transition:scale .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.tile:hover{scale:1.07;box-shadow:0 32px 50px -22px rgba(0,0,0,.9);z-index:4}
.tile img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
@keyframes drift{50%{translate:0 -10px}}
.t1{left:1%;top:58%;rotate:-13deg;animation-delay:-.4s}
/* t2 and t7 are the only tiles that sit in the centre block's vertical band, so
   they have to stay inside the side gutters or they cover the h2. .mid is
   max-width 560px in a ~1080px .gal, which leaves ~24% of gutter each side, and
   a rotated tile's bounding box is ~19.5% wide. t2 at 8% put its right edge at
   26.8% and clipped the headline. */
.t2{left:3%;top:28%;rotate:7deg;animation-delay:-2s}
.t3{left:19%;top:7%;rotate:-9deg;animation-delay:-4.2s}
.t4{left:36%;top:-1%;rotate:5deg;animation-delay:-6s}
.t5{left:54%;top:1%;rotate:-6deg;animation-delay:-1.2s}
.t6{left:68%;top:11%;rotate:11deg;animation-delay:-3.4s}
.t7{left:78%;top:34%;rotate:-10deg;animation-delay:-5.6s}
/* 82% put the rotated bounding box past the right edge of .gal. Three tiles
   could not stack down this column between t6 and the bottom without one
   spilling out of the section, so the column is two tiles now. */
.t8{left:79%;top:62%;rotate:8deg;animation-delay:-7.1s}
/* lightbox */
.gview{position:absolute;inset:0;z-index:20;display:none;background:rgba(15,17,21,.96);backdrop-filter:blur(6px);padding:clamp(20px,4vw,48px)}
.gview.open{display:grid;grid-template-rows:auto 1fr auto;gap:16px;animation:fade .28s ease}
@keyframes fade{from{opacity:0}}
.gview .gtop{display:flex;align-items:center;justify-content:space-between;gap:16px}
.gview .gtr{display:flex;align-items:center;gap:14px}
.gview .gcap{font-family:Archivo,sans-serif;font-weight:600;font-size:15px;letter-spacing:-.02em;color:var(--ink)}
.gview .gct{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mut)}
.gview figure{display:flex;align-items:center;justify-content:center;height:100%;min-height:0;overflow:hidden}
.gview img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.gbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:16px;line-height:1;transition:.2s;flex:none}
.gbtn:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.gview .gnav{display:flex;align-items:center;justify-content:center;gap:14px}
.gview .dots{display:flex;gap:6px;align-items:center;margin:0 8px}
.gview .dots i{width:6px;height:6px;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s}
.gview .dots i.on{background:var(--acc);width:18px;border-radius:99px}
@media(prefers-reduced-motion:reduce){.tile{animation:none}}
@media(max-width:760px){.gal{height:auto;padding:8px 0 0}.gal .mid{max-width:none}.tile{display:none}.galrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:32px;width:100%}.galrow .tile{display:block;position:static;rotate:none;width:auto;animation:none;border-width:3px}.gview{position:fixed;padding:16px}}
.galrow{display:none}
/* standout features */
.stand{text-align:center;max-width:720px;margin:0 auto}
.stand .kick{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:18px}
.stand h2{font-family:Archivo,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(34px,5.4vw,68px);line-height:.96;letter-spacing:-.035em}
.stand p{margin:20px auto 0;max-width:520px;font-size:16px;line-height:1.55;color:var(--ink)}
.stand p i{font-style:normal;color:var(--mut)}
.stand .btn{margin-top:28px;height:50px;padding:0 30px;border-radius:999px;background:var(--inv-bg);color:var(--inv-fg)}
.stand .btn:hover{background:var(--acc);color:#fff}
/* padding-bottom has to clear the card's drop shadow. `overflow-x:auto` forces
   the computed `overflow-y` to `auto` as well, so .rail clips vertically even
   though nothing scrolls that way. At 12px the hover shadow (0 40px 60px -38px,
   so it reaches 32px past the card) was sliced flat and read as a grey smear
   under the row that grew and shrank as you moved the mouse across the cards. */
/* `mandatory` fights the wheel handler in home.js: every small scrollLeft step
   gets yanked back to the nearest snap point, so the rail feels stuck. Proximity
   still settles the cards nicely but lets free scrolling through. */
.rail{margin-top:clamp(44px,6vw,76px);display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;padding:0 max(24px,calc(50vw - 540px)) 44px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent)}
.rail::-webkit-scrollbar{display:none}
.fc{flex:none;width:clamp(232px,25vw,282px);scroll-snap-align:center;border-radius:18px;border:1px solid rgba(222,222,220,.95);background:linear-gradient(168deg,rgba(255,255,255,.98),rgba(249,249,248,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 50px -38px rgba(28,30,36,.6);padding:22px 20px 24px;display:flex;flex-direction:column;gap:16px;min-height:352px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.fc:nth-child(even){margin-top:clamp(20px,4vw,52px)}
.fc:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 40px 60px -38px rgba(28,30,36,.7)}
.fc h3{font-size:16.5px;letter-spacing:-.02em}
.fc .fcp{font-size:13.5px;line-height:1.5;color:var(--ink2);margin-top:6px}
.fc .viz{margin-top:auto;flex:1;border-radius:12px;background:linear-gradient(170deg,#fff,#F6F6F5);border:1px solid var(--line2);padding:18px;display:flex;flex-direction:column;justify-content:center;gap:11px}
.viz .big{font-family:Archivo,sans-serif;font-weight:600;font-size:44px;letter-spacing:-.05em;line-height:1;display:flex;align-items:baseline;gap:4px;flex:none}
.viz .big i{font-style:normal;font-size:17px;color:var(--mut)}
.viz .bar{height:6px;border-radius:99px;background:var(--line2);overflow:hidden;flex:none}
.viz .bar em{display:block;height:100%;border-radius:99px;background:var(--acc)}
.vrow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);flex:none}
.vrow .sw{width:8px;height:8px;border-radius:2px;flex:none}
.vrow .pips{display:flex;gap:3px;margin-left:auto}
.vrow .pips i{width:8px;height:12px;border-radius:2px;background:var(--line2)}
.vrow .pips i.on{background:currentColor}
.vrow .n{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mut);min-width:26px;text-align:right}
.wgrid{display:grid;grid-template-columns:22px repeat(6,1fr);gap:5px;align-items:center;font-size:9px;color:var(--mut)}
.wgrid b{font-weight:600;font-family:"JetBrains Mono",monospace}
.wgrid i{height:15px;border-radius:3px;background:var(--line2)}
.pick{display:flex;gap:6px}
.pick span{flex:1;text-align:center;padding:9px 0;border-radius:9px;border:1px solid var(--line2);font-size:11.5px;font-weight:600;color:var(--mut);background:#fff}
.pick span.on{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 10px 20px -12px rgba(231,100,43,.85)}
.ring{width:118px;height:118px;border-radius:50%;margin:4px auto;display:grid;place-items:center;background:conic-gradient(var(--acc) 0 68%,var(--line2) 68% 100%);flex:none}
.ring b{width:94px;height:94px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.delta{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600}
.delta.up{color:#3F7A4F}.delta.dn{color:#B4573E}

/* ---------- #built ("where it fits") ----------
   Replaces the old #outputs and #why, which were the same .why skeleton (text
   column + .who list) run back to back with only the background telling them
   apart. Deliberately NOT another two-column split and NOT another .who stack:
   a left-aligned head, a subordinate note strip, then full-width index rows.
   The rows are links, which also gives the four /for/ pages their first
   internal links from the homepage body rather than only the footer. */
.bxq{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;padding-top:24px;border-top:1px solid var(--line2);font-size:14.5px;line-height:1.62;color:var(--ink2)}
.bxq b{font-family:Archivo,sans-serif;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.bxr{margin-top:clamp(40px,5vw,66px)}
.bxrl{display:block;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);padding-bottom:15px;border-bottom:1px solid var(--line)}
.bxrow{display:grid;grid-template-columns:46px minmax(110px,160px) 1fr max-content;align-items:baseline;gap:0 22px;padding:21px 0;border-bottom:1px solid var(--line2);transition:padding-left .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.bxrow i{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:600;color:var(--mut)}
.bxrow b{font-family:Archivo,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.bxrow>span{font-size:14.5px;line-height:1.55;color:var(--ink2)}
.bxrow em{font-style:normal;font-size:13px;font-weight:600;color:var(--mut);white-space:nowrap;transition:color .3s}
.bxrow em::after{content:"→";margin-left:8px;display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.bxrow:hover{padding-left:14px;border-color:var(--line)}
.bxrow:hover em{color:var(--acc)}
.bxrow:hover em::after{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){.bxrow,.bxrow em::after{transition:none}.bxrow:hover{padding-left:0}.bxrow:hover em::after{transform:none}}

/* ---------- responsive (homepage sections) ---------- */
@media(max-width:1160px){.comp{height:530px}.shot{width:296px;height:418px}.acard{width:298px;padding:18px 18px 16px}.acard .big b{font-size:46px}.chip-timer{right:96px}.chip-log{top:70px}.halo{width:540px;right:-70px}}
@media(max-width:1060px){
.steps.five{grid-template-columns:1fr;padding-left:68px}
.steps.five::before{left:25px;right:auto;top:26px;bottom:64px;width:2px;height:auto;background:linear-gradient(180deg,var(--acc),rgba(231,100,43,.2))}
.steps.five .stp{position:relative;padding:0 0 28px}
.steps.five .stp .n{position:absolute;left:-68px;top:0;margin:0}
.route-pair{grid-template-columns:1fr 1fr}.route-pair-label{grid-column:1/3}.route-pair a:first-of-type{border-left:0}
}
@media(max-width:900px){
.hero{padding-top:56px;padding-bottom:56px}
.ba,.tour,.hero-grid,.float{grid-template-columns:1fr}
.float{gap:32px}.pipdemo{position:static}
.hero-grid{gap:20px}.comp{height:530px;margin-top:16px}
.shot{width:270px;height:380px;right:-14px}
.halo{width:460px;height:460px;right:-80px;top:0}
.chip-timer{right:auto;left:0;top:0}.chip-log{left:auto;right:-6px;top:74px}
.acard{width:min(320px,92%);bottom:0}
.pva .row{grid-template-columns:14px 1fr 60px 60px;gap:12px;padding:14px 18px;row-gap:2px}
.pva .row .v:nth-last-child(1){grid-column:2/5;text-align:left;font-size:12.5px}
.pva .row.hd{display:none}
.tcard figure{height:auto}
/* #built: the four-track row collapses to index + stacked text, and the hover
   indent is dropped because there is no hover on touch. */
.bxq{grid-template-columns:1fr;gap:16px}
.bxrow{grid-template-columns:32px 1fr;gap:3px 12px;padding:18px 0}
.bxrow b,.bxrow>span,.bxrow em{grid-column:2}
.bxrow em{margin-top:7px}
.bxrow:hover{padding-left:0}
.route-pair{grid-template-columns:1fr;padding:8px}.route-pair-label{grid-column:1}.route-pair a{border-left:0;border-top:1px solid rgba(247,247,246,.12)}
}
@media(max-width:470px){.eyebrow .lbl{font-size:9.5px;letter-spacing:.07em}.shot{width:232px;height:326px}}