/* circlesco.tech · case-study system (one template for Studio, blüp, KidNights, Community, Turnkey Leads)
   Band order on every page: title + overview → hero stack → summary → challenge → approach → brand → components →
   screens wall → the product (units + one pinned walkthrough) → everywhere → built to run → where it stands → next.
   Page brand files set only: --p-bg / --p-fg (stage band: Circles blue, ink or gray only), --p-acc (tiny accents),
   --n-bg / --n-fg (next band), the logo mat and the type specimen faces. Backgrounds are only blue, ink, white, grays. */

.cs{--p-bg:var(--g1);--p-fg:var(--ink);--p-acc:var(--blue);--n-bg:var(--ink);--n-fg:#fff;--t-name:clamp(64px,12.5vw,200px)}
.cs .link-arrow{font-size:15px}

/* ============ 1 · TITLE + OVERVIEW ============ */
.cs-title{padding:calc(var(--nav-h) + clamp(84px,19vh,240px)) 0 clamp(56px,7vw,110px);background:var(--white)}
.cs-kicker{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(20px,3vh,40px)}
.cs-kicker-l{display:inline-flex;align-items:center;gap:12px}
.cs-name{font-weight:900;font-size:var(--t-name);line-height:.86;letter-spacing:-.045em;margin-left:-.04em;color:var(--ink)}
.cs-name .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.cs-name .w{display:inline-block;will-change:transform,filter}
.cs-name em{color:var(--p-acc)}
.cs-head-row{display:grid;grid-template-columns:1fr minmax(240px,32%);gap:clamp(28px,5vw,96px);align-items:end;margin-top:clamp(36px,5vw,72px)}
.cs-logo{display:flex;align-items:center;gap:18px;min-height:44px}
.cs-logo img{height:clamp(30px,2.8vw,44px);width:auto}
.cs-logo .mono{color:var(--g3)}
.cs-pitch{font-size:clamp(22px,2.1vw,34px);font-weight:700;letter-spacing:-.025em;line-height:1.12;max-width:20em;margin-top:22px}
.cs-visit{justify-self:end;margin-bottom:6px}
.cs-over{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);padding-top:22px;margin-top:clamp(36px,5vw,72px)}
.cs-over dt{font-family:var(--mono);font-size:12px;color:var(--g3);margin-bottom:8px;text-transform:uppercase;letter-spacing:.07em}
.cs-over dd{font-weight:600;font-size:15px;line-height:1.35;text-wrap:pretty}

/* ============ 2 · HERO STAGE ============ */
.cs-stage{position:relative;overflow:hidden;background:var(--p-bg);color:var(--p-fg);padding:clamp(72px,10vw,150px) 0 clamp(72px,8vw,120px)}
.cs-stage .stack{width:min(52vw,980px);margin-inline:auto;will-change:transform}
.cs-stage-cap{width:min(var(--max),100% - 2*var(--gut));margin:clamp(96px,12vw,190px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:18px;border-top:1px solid currentColor;opacity:.85}
.cs-stage-cap span:nth-child(2){text-align:center}
.cs-stage-cap span:last-child{text-align:right}
.cs-stage .mac::after{opacity:.5}

/* ============ 3 · SUMMARY ============ */
.cs-intro{padding:clamp(96px,12vw,190px) 0 clamp(80px,10vw,160px);background:var(--white)}
.cs-intro-grid{display:grid;grid-template-columns:minmax(140px,18%) 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.cs-intro-side{color:var(--g3);padding-top:.6em}
.cs-intro p[data-words]{font-size:clamp(26px,3.1vw,54px);font-weight:700;letter-spacing:-.032em;line-height:1.08;max-width:22em;color:var(--ink)}
.cs-intro p .w{display:inline-block;opacity:.16;will-change:opacity}
.cs-intro p .w.is-on{opacity:1}

/* ============ 4 · STORY (challenge, approach, built to run, where it stands) ============ */
.cs-story{padding:clamp(80px,10vw,150px) 0;background:var(--white);border-top:1px solid var(--line)}
.cs-story.on-gray{background:var(--g1);border-top:0}
.cs-story-grid{display:grid;grid-template-columns:minmax(220px,32%) 1fr;gap:clamp(32px,6vw,120px);align-items:start}
.cs-story-side{display:flex;flex-direction:column;gap:18px;align-items:flex-start;position:sticky;top:calc(var(--nav-h) + 32px)}
.cs-story h2,.cs-stand-grid h2{font-weight:800;font-size:clamp(30px,3.2vw,52px);letter-spacing:-.035em;line-height:1.02;max-width:11em}
.cs-story-body{display:flex;flex-direction:column;gap:22px;font-size:clamp(17px,1.35vw,21px);line-height:1.45;font-weight:500;max-width:34em}
.cs-story-body blockquote{border-left:3px solid var(--blue);padding:4px 0 4px 22px;margin:4px 0}
.cs-story-body blockquote p{font-weight:700;letter-spacing:-.02em}
.cs-story-body cite{display:block;margin-top:12px;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--g3)}
.fu-n{display:inline-flex;align-items:center;gap:10px;color:var(--g3);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.fu-n i{width:10px;height:10px;border-radius:50%;background:var(--p-acc);display:block}
.cs-decisions{border-top:1px solid var(--line)}
.cs-decisions li{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.cs-decisions li .n{font-family:var(--mono);font-size:12px;color:var(--g3);padding-top:6px}
.cs-decisions li b{display:block;font-weight:700;font-size:clamp(18px,1.5vw,23px);letter-spacing:-.015em;line-height:1.15;margin-bottom:8px}
.cs-decisions li p{color:var(--g3);font-size:16px;line-height:1.45;max-width:34em}
.cs-run-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,40px)}
.cs-run-list li{padding-top:18px;border-top:2px solid var(--ink)}
.cs-run-list li p{margin-top:10px;font-size:16px;line-height:1.45;color:var(--ink)}
.cs-run-list li b{display:block;font-weight:700;font-size:clamp(18px,1.4vw,22px);letter-spacing:-.015em;margin-top:10px;text-wrap:balance}

/* ============ 5 · BRAND ============ */
.cs-brand{padding:clamp(80px,10vw,150px) 0;background:var(--white);border-top:1px solid var(--line)}
.cs-brand-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,2.4vw,36px);align-items:stretch}
.cs-logo-mat{position:relative;min-height:320px;aspect-ratio:16/10;border-radius:22px;display:grid;place-items:center;background:var(--g1);color:var(--ink);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.cs-logo-mat img{width:46%;height:auto}
/* the mat fills its grid cell; it never grows past its column when the specimen beside it runs tall */
.cs-brand-grid>.cs-logo-mat{aspect-ratio:auto;min-width:0;width:100%}
.cs-logo-mat .mat-cap{position:absolute;left:22px;bottom:18px;opacity:.7}
.cs-spec-card{border-radius:22px;background:var(--g1);padding:clamp(24px,3vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:300px}
.cs-spec-card .mono{color:var(--g3)}
.cs-spec-big{font-weight:900;font-size:clamp(36px,5vw,88px);letter-spacing:-.045em;line-height:.95;max-width:10em}
.cs-mark-row{display:flex;align-items:center;gap:clamp(16px,2vw,32px);flex-wrap:wrap}
.cs-mark-row .mk{width:clamp(56px,6vw,96px);height:clamp(56px,6vw,96px);border-radius:18px;display:grid;place-items:center;overflow:hidden}
.cs-mark-row .mk img{width:100%;height:100%;object-fit:cover}
.cs-brand-why{margin-top:clamp(28px,3vw,48px);max-width:40em;font-size:var(--t-lead);line-height:1.4}

/* ============ 6 · COMPONENTS (real UI pieces on gray mats) ============ */
.cs-kit{padding:clamp(80px,10vw,150px) 0;background:var(--g1)}
.cs-kit-intro{display:grid;grid-template-columns:minmax(220px,32%) 1fr;gap:clamp(32px,6vw,120px);align-items:start;margin-bottom:clamp(40px,5vw,72px)}
.cs-kit-intro h2{font-weight:800;font-size:clamp(30px,3.2vw,52px);letter-spacing:-.035em;line-height:1.02;max-width:11em}
.cs-kit-intro p{font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:34em}
.kit-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:clamp(12px,1.4vw,20px)}
.kit{position:relative;grid-column:span 4;background:#fff;border-radius:18px;padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:18px;min-height:200px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(11,11,15,.05)}
.kit-l{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--g3);display:flex;justify-content:space-between;gap:12px;white-space:nowrap}
.kit-l span:last-child{text-transform:none;letter-spacing:0;overflow:hidden;text-overflow:ellipsis}
.kit-b{flex:1;display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:14px 18px;min-height:0}
.kit-b.col{flex-direction:column;align-items:flex-start;justify-content:center;flex-wrap:nowrap}
.kit-b.center{justify-content:center}
.kit-b.end{align-items:flex-end}
.kit img{max-width:100%;height:auto;border-radius:6px;display:block;filter:drop-shadow(0 1px 2px rgba(11,11,15,.06))}
.kit img.card{border-radius:14px;filter:drop-shadow(0 18px 30px rgba(11,11,15,.14))}
.kit img.raw{border-radius:0;filter:none}
.kit.s3{grid-column:span 3}.kit.s4{grid-column:span 4}.kit.s5{grid-column:span 5}.kit.s6{grid-column:span 6}.kit.s7{grid-column:span 7}.kit.s8{grid-column:span 8}.kit.s12{grid-column:span 12}
.kit.r2{grid-row:span 2}
.kit.dark{background:var(--ink);color:#fff}
.kit.dark .kit-l{color:rgba(255,255,255,.6)}
.kit.tint{background:var(--g2)}
.kit.blue{background:var(--blue);color:#fff}
.kit.blue .kit-l{color:rgba(255,255,255,.75)}
/* tokens + type inside the kit */
.tok{display:flex;flex-wrap:wrap;gap:12px;width:100%}
.tok span{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;width:clamp(96px,8vw,132px);aspect-ratio:1;border-radius:12px;padding:12px;font-family:var(--mono);font-size:11px;box-shadow:inset 0 0 0 1px rgba(11,11,15,.08)}
.tok span b{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:-.01em}
.tok .on-l{color:var(--ink)}
.tok .on-d{color:#fff}
.kit-type{display:flex;flex-direction:column;gap:12px;width:100%}
.kit-type .aa{font-size:clamp(72px,8vw,150px);line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.kit-type .face{font-size:clamp(17px,1.4vw,22px);line-height:1.3;letter-spacing:-.01em}
.kit-type .face+.face{padding-top:10px;border-top:1px solid var(--line)}
.kit-type .mono{color:var(--g3)}

/* ============ 7 · SCREENS WALL (full bleed, three drifting columns of real screens) ============ */
.cs-wall{position:relative;background:var(--ink);color:#fff;padding:clamp(80px,10vw,150px) 0 0;overflow:hidden}
.cs-wall .sec-head{margin-bottom:clamp(32px,4vw,56px)}
.wall{position:relative;height:clamp(640px,112vh,1240px);overflow:hidden}
.wall::after{content:"";position:absolute;inset:auto 0 0 0;height:160px;background:linear-gradient(transparent,var(--ink));pointer-events:none;z-index:2}
.wall-cols{position:absolute;inset:0 clamp(24px,4vw,120px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);align-items:start}
.wall-col{display:flex;flex-direction:column;gap:clamp(16px,2vw,32px);will-change:transform}
.wall-col:nth-child(2){padding-top:clamp(60px,8vw,140px)}
.wall-it{position:relative}
.wall-it .frame{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.wall-it .frame .screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b0b0d}
.wall-it .frame-bar{height:30px}
.wall-it .url{height:18px;font-size:10px}
.wall-it.ph{display:flex;justify-content:center;gap:clamp(16px,2vw,32px)}
.wall-it.ph .iph{width:min(46%,250px)}
.wall-it .cap{display:block;margin-top:10px;color:rgba(255,255,255,.55);font-family:var(--mono);font-size:11px}

/* ============ 8 · THE PRODUCT ============ */
.cs-product-head{padding:clamp(96px,12vw,180px) 0 0;background:var(--white)}
.cs-product-head .cs-story-grid{margin-bottom:clamp(48px,6vw,96px)}
.cs-feat{padding:clamp(40px,5vw,80px) 0 0;background:var(--white)}
.fu{display:grid;grid-template-columns:minmax(280px,34%) 1fr;gap:clamp(32px,6vw,120px);align-items:center;padding-bottom:clamp(96px,12vw,180px)}
.fu.flip{grid-template-columns:1fr minmax(280px,34%)}
.fu.flip .fu-copy{order:2}
.fu-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.fu-claim{font-weight:800;font-size:clamp(30px,3.2vw,52px);letter-spacing:-.035em;line-height:1.02;max-width:12em}
.fu-note{color:var(--g3);font-size:var(--t-lead);line-height:1.35;max-width:26em}
.fu-src{color:var(--g3)}
.fu-media{position:relative}
.fu-media .mac{max-width:980px;margin-inline:auto}
.fu-media .stack{width:92%;margin:0 auto 8%}
.fu-media .pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,48px);align-items:end;max-width:560px;margin-inline:auto}
.fu-media .pair .iph:last-child{transform:translateY(clamp(24px,4vw,64px))}
.fu-media .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;align-items:end;padding:6% 4% 0}
.fu-media .trio .iph:nth-child(2){transform:translateY(-9%)}
.fu-media .solo-ph{width:min(100%,300px);margin-inline:auto}
.fu-media.on-mat{padding:clamp(24px,4vw,64px);border-radius:24px;background:var(--g1)}
.fu-media .side{position:absolute;z-index:6;width:30%;left:-4%;bottom:-2%;filter:drop-shadow(0 28px 36px rgba(0,0,0,.26)) drop-shadow(0 2px 4px rgba(0,0,0,.12));will-change:transform}
.fu-media .side img{width:100%;height:auto;border-radius:14px;display:block}
.fu-media .kiosk{width:min(100%,560px);margin-inline:auto;background:var(--ink);border-radius:22px;padding:clamp(6px,.75vw,11px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 60px -30px rgba(0,0,0,.45)}
.fu-media .kiosk .screen{position:relative;aspect-ratio:1400/1868;border-radius:12px;overflow:hidden;background:#000}
.fu-media .frame .screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b0b0d}

/* ============ 8b · PINNED WALKTHROUGH (one per page, Skip ↓) ============ */
.cs-seq{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.seq-in{display:grid;grid-template-columns:minmax(280px,34%) 1fr;gap:clamp(32px,6vw,110px);align-items:center;padding:0 var(--gut);height:100vh;max-width:1700px;margin-inline:auto}
.seq-copy{display:flex;flex-direction:column;gap:22px}
.seq-copy .fu-n{color:rgba(255,255,255,.6)}
.seq-copy .fu-claim{color:#fff}
.seq-steps{margin-top:8px;border-top:1px solid var(--line-dark)}
.seq-steps li{position:relative;padding:18px 0 18px 36px;border-bottom:1px solid var(--line-dark);opacity:.42;transition:opacity .5s var(--ease);cursor:pointer}
.seq-steps li.is-on{opacity:1}
.seq-steps li .n{position:absolute;left:0;top:19px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.6)}
.seq-steps li b{display:block;font-weight:700;font-size:17px;letter-spacing:-.01em}
.seq-steps li span{display:block;color:rgba(255,255,255,.6);font-size:15px;margin-top:4px}
.seq-steps li .seq-mshot{display:none}
.seq-stage{position:relative}
.seq-stage .mac{max-width:980px;margin-inline:auto}
.seq-stage .kiosk{width:min(100%,calc(78vh * 1400 / 1868));margin-left:auto;background:var(--ink);border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.seq-stage .kiosk .screen{position:relative;aspect-ratio:1400/1868;border-radius:16px;overflow:hidden;background:#000}
.seq-stage .frame .screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b0b0d}
.seq-shot{opacity:0;transition:opacity .5s var(--ease)}
.seq-shot.is-on{opacity:1}
.seq-skip{position:absolute;right:var(--gut);bottom:28px;z-index:5;height:40px;padding:0 16px;border-radius:10px;border:1.5px solid currentColor;font-family:var(--mono);font-size:12px;opacity:.9;color:#fff;transition:background .4s var(--ease),color .4s var(--ease)}
.seq-skip:hover{background:#fff;color:var(--ink)}
.seq-prog{position:absolute;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--p-acc);z-index:5}

/* ============ 9 · EVERYWHERE (desktop + tablet + phone, bleeding off the edge) ============ */
.cs-every{position:relative;padding:clamp(96px,12vw,180px) 0 clamp(80px,10vw,150px);background:var(--white);overflow:hidden;border-top:1px solid var(--line)}
.cs-every .sec-head{margin-bottom:clamp(40px,6vw,88px)}
.ev-row{display:flex;align-items:flex-end;gap:clamp(28px,4vw,72px);width:max-content;padding:0 var(--gut);will-change:transform}
.ev-mac{width:min(52vw,900px)}
.ev-pad{width:min(26vw,440px);padding-bottom:1%}
.ev-ph{width:min(13.5vw,230px);padding-bottom:1.5%}
.ev-cap{display:block;margin-top:22px;color:var(--g3)}
/* tablet frame: body 834:1194, screen 3:4 */
.cs-pad{position:relative;aspect-ratio:834/1194;filter:drop-shadow(0 30px 40px rgba(0,0,0,.28))}
.cs-pad-body{position:absolute;inset:0;border-radius:6.5% / 4.5%;background:linear-gradient(160deg,#9a9aa0,#4f4f55 40%,#67676d 60%,#303034);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 0 0 2px rgba(0,0,0,.35)}
.cs-pad-inner{position:absolute;inset:1.1% 1.6%;border-radius:5.8% / 4%;background:#000}
.cs-pad-screen{position:absolute;inset:2.6% 3.6%;border-radius:3.6% / 2.5%;overflow:hidden;background:#000}
.cs-pad-screen .screen{position:absolute;inset:0;overflow:hidden;background:#fff}

/* ============ 10 · WHERE IT STANDS ============ */
.cs-facts{padding:clamp(80px,10vw,150px) 0;background:var(--white);border-top:1px solid var(--line)}
.cs-stand-grid{display:grid;grid-template-columns:minmax(220px,32%) 1fr;gap:clamp(32px,6vw,120px);align-items:start;margin-bottom:clamp(40px,6vw,88px)}
.cs-stand-grid p{font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:34em}
.fact-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.fact-list li{display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:2px solid var(--ink)}
.fact{font-weight:900;font-size:clamp(40px,4.8vw,84px);line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fact small{font-weight:700;font-size:.34em;letter-spacing:-.01em;margin-left:.2em;vertical-align:.12em}
.fact-list .mono{color:var(--g3)}
.fact-foot{margin-top:clamp(36px,5vw,72px);color:var(--g3)}

/* ============ 11 · NEXT CASE STUDY ============ */
.cs-next{display:block;position:relative;overflow:hidden;background:var(--n-bg);color:var(--n-fg);padding:clamp(90px,12vw,180px) 0 clamp(70px,9vw,130px)}
.cs-next-k{display:flex;justify-content:space-between;gap:24px;opacity:.72;margin-bottom:clamp(24px,4vh,48px)}
.cs-next-name{font-weight:900;font-size:var(--t-name);line-height:.86;letter-spacing:-.045em;margin-left:-.04em;will-change:transform}
.cs-next-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(28px,4vw,56px);flex-wrap:wrap}
.cs-next-row p{font-size:var(--t-lead);max-width:28em;opacity:.85}
.cs-next .link-arrow{font-size:17px}
.cs-next:hover .link-arrow{gap:16px}

/* ============ Responsive ============ */
@media (max-width:1100px){
  .cs-over{grid-template-columns:repeat(2,1fr)}
  .fact-list{grid-template-columns:repeat(2,1fr)}
  .kit,.kit.s3,.kit.s4,.kit.s5{grid-column:span 6}
  .kit.s7,.kit.s8{grid-column:span 12}
}
@media (max-width:900px){
  .cs{--t-name:clamp(56px,16.5vw,120px)}
  .cs-title{padding-top:calc(var(--nav-h) + 12vh)}
  .cs-kicker{flex-direction:column;align-items:flex-start;gap:8px}
  .cs .sec-head{flex-wrap:wrap;gap:8px 20px}
  .cs .sec-head .dim{white-space:normal}
  .cs-head-row{grid-template-columns:1fr;gap:24px}
  .cs-visit{justify-self:start}
  .cs-over{grid-template-columns:repeat(2,1fr);gap:20px}
  .cs-stage{padding:48px 0 56px}
  .cs-stage .stack{width:calc(100% - 2*var(--gut));max-width:none}
  .cs-stage-cap{grid-template-columns:1fr;gap:6px;margin-top:clamp(80px,22vw,140px)}
  .cs .stack .f1.tall{width:20%;bottom:-6%}
  .cs .stack.alt-r .f1.tall{left:-2%}
  .cs .stack.alt-l .f1.tall{right:-2%}
  .cs-stage-cap span{text-align:left!important}
  .cs-intro-grid{grid-template-columns:1fr;gap:16px}
  .cs-story-grid,.cs-stand-grid,.cs-kit-intro{grid-template-columns:1fr;gap:20px}
  .cs-story-side{position:static}
  .cs-run-list{grid-template-columns:1fr;gap:12px}
  .cs-decisions li{grid-template-columns:36px 1fr}
  .cs-brand-grid{grid-template-columns:1fr}
  .cs-logo-mat{min-height:0;aspect-ratio:4/3}
  .kit-grid{grid-template-columns:1fr 1fr;gap:12px}
  .kit{--kp:18px;padding:var(--kp);min-height:0}
  .kit,.kit.s3,.kit.s4,.kit.s5{grid-column:span 1}
  .kit.s6,.kit.s7,.kit.s8,.kit.s12{grid-column:span 2}
  .kit.half{grid-column:span 1}
  .kit.r2{grid-row:auto}
  /* wide, short UI strips (tab rows, segments, search bars) keep their real size and swipe sideways instead of shrinking to mush (case.js adds .scrolls) */
  .kit-b.scrolls{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 calc(-1*var(--kp));padding:4px var(--kp) 6px;scroll-snap-type:x proximity;scroll-padding-inline:var(--kp);-webkit-overflow-scrolling:touch}
  .kit-b.scrolls::-webkit-scrollbar{display:none}
  .kit-b.scrolls>*{max-width:none;flex:0 0 auto;scroll-snap-align:start}
  .kit-b.col.scrolls{flex-direction:column}
  .tok span{width:calc(50% - 6px)}
  .wall{height:auto;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--gut) 56px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut)}
  .wall-it{scroll-snap-align:start}
  .wall::-webkit-scrollbar{display:none}
  .wall::after{display:none}
  .wall-cols{position:static;display:flex;gap:16px;width:max-content;inset:auto}
  .wall-col{flex-direction:row;gap:16px;padding-top:0!important;transform:none!important}
  .wall-it{width:72vw;flex:0 0 auto}
  .wall-it.ph{width:auto}
  .wall-it.ph .iph{width:36vw}
  .fu,.fu.flip{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:88px}
  .fu-media,.fu-copy{min-width:0}
  .fu.flip .fu-copy{order:0}
  .fu-media .stack{width:100%;margin-bottom:12%}
  .fu-media.on-mat{padding:20px}
  .fu-media .trio{gap:4%;padding:4% 0 0}
  .fu-media .side{width:38%;left:-2%;bottom:-6%}
  .seq-in{grid-template-columns:1fr;height:auto;padding:72px var(--gut) 56px;gap:28px}
  .seq-stage,.seq-skip,.seq-prog{display:none}
  .seq-steps li{opacity:1;padding-left:0;cursor:default}
  .seq-steps li .n{position:static;display:block;margin-bottom:6px}
  .seq-steps li .seq-mshot{display:block;margin-top:16px}
  .seq-steps li .seq-mshot .frame{border-radius:10px}
  .seq-steps li .seq-mshot img{width:100%;height:auto;display:block}
  .cs-every{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut)}
  .cs-every::-webkit-scrollbar{display:none}
  .cs-every .wrap{min-width:0;position:sticky;left:var(--gut)}
  .ev-row{gap:20px;transform:none!important;padding-bottom:40px}
  .ev-row>div{scroll-snap-align:start}
  .ev-mac{width:78vw}
  .ev-pad{width:46vw}
  .ev-ph{width:30vw}
  .ev-cap{margin-top:14px}
  .cs-next-row{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .cs-title{padding-top:calc(var(--nav-h) + 13vh)}
  .cs-over{grid-template-columns:1fr 1fr;gap:18px 16px}
  .cs-over dd{font-size:14px}
  /* phones: the laptop and the iPhone carry the stack; crops would only cover the screen */
  .cs .stack .f1,.cs .stack .f2,.cs .stack .f3{display:none}
  .cs-stage-cap{margin-top:clamp(64px,19vw,100px)}
  .kit,.kit.s3,.kit.s4,.kit.s5,.kit.s6,.kit.s7,.kit.s8,.kit.s12{grid-column:span 2}
  .kit.half{grid-column:span 1}
  /* three phones in a row become a swipe row, one phone big with the next peeking */
  .fu-media .trio{display:flex;gap:16px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 calc(-1*var(--gut));padding:4% var(--gut) 44px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch}
  .fu-media .trio::-webkit-scrollbar{display:none}
  .fu-media .trio .iph{flex:0 0 54vw;transform:none!important;scroll-snap-align:start}
  .fu-media .pair{gap:16px}
  .fu-media .pair .iph:last-child{transform:translateY(20px)}
  .fu-media.on-mat{padding:16px 16px 36px;border-radius:18px}
  .fact-list{gap:28px 16px}
  .fact{font-size:clamp(36px,11vw,44px)}
  .cs-decisions li{grid-template-columns:30px 1fr;gap:12px}
  .cs-next-row p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .cs-name .w,.cs-stage .stack,.cs-next-name,.wall-col{transform:none!important;filter:none!important;opacity:1!important}
  .cs-intro p .w{opacity:1}
  .seq-in{height:auto;padding:72px var(--gut) 56px}
  .seq-stage,.seq-skip,.seq-prog{display:none}
  .seq-steps li{opacity:1}
  .seq-steps li .seq-mshot{display:block;margin-top:16px}
  .ev-row{transform:none!important}
}

/* ==========================================================
   UI · coded components. Faithful replicas of real product UI, no images except photos/avatars.
   Everything is em-based: set --ui-s (or font-size) on a .ui root to resize a piece without breaking it.
   Products skin them with --ui-font / --ui-acc / --ui-ink / --ui-mute / --ui-line / --ui-g / --ui-r in their brand css.
   ========================================================== */
.ui{--ui-s:1;font-size:calc(1rem*var(--ui-s));font-family:var(--ui-font,var(--sans));color:var(--ui-ink,#0B0B0F);line-height:1.25;letter-spacing:0;font-weight:500;text-wrap:initial;width:100%;max-width:var(--ui-max,none)}
.ui,.ui *{box-sizing:border-box}
.ui svg{width:1em;height:1em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.ui svg.f{fill:currentColor;stroke:none}
.ui a{cursor:pointer}
.ui-w{display:flex;flex-direction:column;gap:.75em;width:100%}
.ui-r{display:flex;flex-wrap:wrap;gap:.6em .75em;align-items:center}
.ui-eye{font-size:.7em;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.7}
.ui .mut{color:var(--ui-mute,#73737c)}
.ui .acc{color:var(--ui-acc)}
/* buttons */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:3em;padding:0 1.4em;border-radius:var(--ui-r,.625em);background:var(--ui-acc,#1264FF);color:#fff;font-weight:600;font-size:1em;line-height:1;white-space:nowrap;cursor:pointer;border:0;font-family:inherit;transition:background .3s var(--ease),color .3s var(--ease),transform .25s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease);user-select:none}
.ui-btn:hover{filter:brightness(.92)}
.ui-btn:active{transform:scale(.97)}
.ui-btn.ghost{background:#fff;color:var(--ui-ink);box-shadow:inset 0 0 0 1px var(--ui-line,rgba(11,11,15,.14))}
.ui-btn.ghost:hover{filter:none;background:var(--ui-g,#f4f4f6)}
.ui-btn.outline{background:transparent;color:var(--ui-acc);box-shadow:inset 0 0 0 1.5px var(--ui-acc)}
.ui-btn.outline:hover{filter:none;background:var(--ui-acc);color:#fff}
.ui-btn.dark{background:var(--ui-ink)}
.ui-btn.soft{background:var(--ui-g,#F2F3F7);color:var(--ui-ink)}
.ui-btn.soft:hover{filter:brightness(.96)}
.ui-btn.white{background:#fff;color:var(--ui-ink)}
.ui-btn.pill{border-radius:999px}
.ui-btn.sm{height:2.4em;padding:0 1em;font-size:.875em}
.ui-btn.xs{height:2em;padding:0 .8em;font-size:.8125em}
.ui-btn.lg{height:3.4em;padding:0 1.8em;font-size:1.125em}
.ui-btn.text{background:none;color:var(--ui-acc);padding:0;height:auto}
.ui-btn.text:hover{filter:none;text-decoration:underline}
.ui-btn.icon{width:2.4em;height:2.4em;padding:0}
.ui-btn.wide{width:100%}
.ui-btn.ln{text-decoration:underline;text-underline-offset:.2em}
/* pills, tags, badges */
.ui-pill{--c:var(--ui-acc);display:inline-flex;align-items:center;gap:.4em;height:1.8em;padding:0 .7em;border-radius:999px;font-size:.8125em;font-weight:600;line-height:1;white-space:nowrap;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);transition:background .45s var(--ease),color .45s var(--ease)}
.ui-pill.sq{border-radius:.4em}
.ui-pill.solid{background:var(--c);color:#fff}
.ui-pill.dot::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor}
.ui-pill.caps{text-transform:uppercase;letter-spacing:.06em;font-size:.7em;font-weight:700;height:2.1em}
.ui-pill.od{background:color-mix(in srgb,var(--c) 22%,transparent)}
.ui-pill.gray{--c:#6b6b73;background:#eeeef1;color:#55555c}
.ui-badge{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .4em;border-radius:999px;background:var(--ui-acc);color:#fff;font-size:.7em;font-weight:700;line-height:1}
.ui-badge.red{background:#E5484D}
/* inputs */
.ui-in{display:flex;align-items:center;gap:.6em;height:2.75em;padding:0 .9em;border-radius:var(--ui-r,.625em);background:#fff;box-shadow:inset 0 0 0 1px var(--ui-line,rgba(11,11,15,.14));color:var(--ui-mute,#7a7a84);font-size:.9375em;width:100%;min-width:0;white-space:nowrap;overflow:hidden;transition:box-shadow .3s}
.ui-in:hover{box-shadow:inset 0 0 0 1.5px var(--ui-acc)}
.ui-in .v{color:var(--ui-ink);font-weight:500}
.ui-in .end{margin-left:auto;color:var(--ui-ink)}
.ui-in.dk{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:rgba(255,255,255,.6)}
.ui-in.dk .v{color:#fff}
.ui-in.sel::after{content:"";margin-left:auto;width:.5em;height:.5em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-.15em,-.15em);flex:0 0 auto}
.ui-in.ta{height:auto;align-items:flex-start;padding:.8em .9em;min-height:5.5em;white-space:normal}
.ui-in.pill{border-radius:999px}
.ui-f{display:flex;flex-direction:column;gap:.45em;width:100%;min-width:0}
.ui-f label{font-size:.8125em;font-weight:600}
.ui-f label small{font-weight:400;color:var(--ui-mute)}
.ui-range{position:relative;height:.375em;border-radius:999px;background:var(--ui-g,#e6e6eb);width:100%;--v:50%;margin:.7em 0}
.ui-range i{position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:999px;background:var(--ui-acc);transition:width 1s var(--ease)}
.ui-range b{position:absolute;top:50%;left:var(--v);width:1.25em;height:1.25em;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transform:translate(-50%,-50%);transition:left 1s var(--ease)}
.ui-check{display:inline-flex;align-items:center;gap:.6em;font-size:.9375em;cursor:pointer;user-select:none}
.ui-check i{width:1.3em;height:1.3em;border-radius:.3em;box-shadow:inset 0 0 0 1.5px var(--ui-line,rgba(11,11,15,.25));display:grid;place-items:center;background:#fff;color:#fff;transition:background .3s,box-shadow .3s;flex:0 0 auto}
.ui-check i svg{width:.9em;height:.9em;opacity:0;transition:opacity .3s}
.ui-check.on i{background:var(--ui-acc);box-shadow:none}
.ui-check.on i svg{opacity:1}
.ui-check.circ i{border-radius:50%}
.ui-radio{display:flex;align-items:flex-start;gap:.7em;padding:.8em .9em;border-radius:.75em;box-shadow:inset 0 0 0 1px var(--ui-line);background:#fff;flex:1;cursor:pointer;transition:box-shadow .3s}
.ui-radio i{width:1.2em;height:1.2em;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ui-line);flex:0 0 auto;margin-top:.1em;transition:box-shadow .3s}
.ui-radio.on{box-shadow:inset 0 0 0 1.5px var(--ui-acc)}
.ui-radio.on i{box-shadow:inset 0 0 0 .38em var(--ui-acc)}
.ui-radio b{display:block;font-weight:600;font-size:.9375em}
.ui-radio small{display:block;color:var(--ui-mute);font-size:.8125em;margin-top:.15em}
/* segments, tabs, chips */
.ui-seg{display:inline-flex;padding:.3em;border-radius:.75em;background:var(--ui-g,#EEEFF3);gap:.15em;max-width:100%}
.ui-seg b{display:inline-flex;align-items:center;gap:.4em;padding:.55em 1em;border-radius:.55em;font-weight:600;font-size:.9375em;color:var(--ui-ink);cursor:pointer;transition:background .3s var(--ease),color .3s,box-shadow .3s;white-space:nowrap;user-select:none}
.ui-seg b.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ui-seg b small{font-weight:500;opacity:.6;font-size:.85em}
.ui-seg.pill,.ui-seg.pill b{border-radius:999px}
.ui-seg.ink b.on{background:var(--ui-ink);color:#fff;box-shadow:none}
.ui-seg.acc b.on{background:var(--ui-acc);color:#fff;box-shadow:none}
.ui-seg.line{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ui-acc)}
.ui-seg.dk{background:rgba(255,255,255,.06)}
.ui-seg.dk b{color:rgba(255,255,255,.7)}
.ui-seg.dk b.on{background:var(--ui-acc);color:#fff;box-shadow:none}
.ui-seg.bare{background:none;padding:0;gap:.4em}
.ui-seg .sw{width:.55em;height:.55em;border-radius:50%;background:var(--c,var(--ui-acc))}
.ui-tabs{display:flex;gap:1.6em;border-bottom:1px solid var(--ui-line);font-weight:600;font-size:.9375em;width:100%;white-space:nowrap}
.ui-tabs b{padding:.6em 0;position:relative;color:var(--ui-mute);cursor:pointer;transition:color .3s;display:inline-flex;align-items:center;gap:.4em}
.ui-tabs b.on{color:var(--ui-ink)}
.ui-tabs b.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ui-acc)}
.ui-tabs.acc b.on{color:var(--ui-acc)}
.ui-tabs.nob{border:0}
.ui-chips{display:flex;flex-wrap:wrap;gap:.5em;align-items:center}
.ui-chip{display:inline-flex;align-items:center;gap:.45em;height:2.25em;padding:0 .9em;border-radius:999px;font-size:.875em;font-weight:600;background:#fff;box-shadow:inset 0 0 0 1px var(--ui-line);white-space:nowrap;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s;color:var(--ui-ink);user-select:none}
.ui-chip.on{background:var(--ui-acc);color:#fff;box-shadow:none}
.ui-chip.ink.on{background:var(--ui-ink)}
.ui-chip.soft{background:var(--ui-g);box-shadow:none}
.ui-chip.sq{border-radius:.5em}
.ui-chip img{width:1.7em;height:1.7em;border-radius:50%;margin-left:-.55em;object-fit:cover}
.ui-chip .d{width:.5em;height:.5em;border-radius:50%;background:var(--c,currentColor)}
/* navigation */
.ui-nav{display:flex;flex-direction:column;gap:.2em;width:100%;font-weight:500;font-size:.9375em}
.ui-nav a{display:flex;align-items:center;gap:.75em;padding:.7em .9em;border-radius:.5em;color:inherit;transition:background .3s}
.ui-nav a svg{width:1.15em;height:1.15em;opacity:.85}
.ui-nav a .e{margin-left:auto;display:inline-flex;align-items:center;gap:.4em}
.ui-nav a .chev{opacity:.5;width:.9em;height:.9em}
.ui-nav a.on{background:var(--ui-acc);color:#fff;font-weight:600}
.ui-nav a:not(.on):hover{background:rgba(127,127,140,.12)}
.ui-nav.rounded a{border-radius:.75em}
.ui-topnav{display:flex;align-items:center;gap:1.5em;font-weight:500;font-size:.9375em;white-space:nowrap}
.ui-topnav a{display:inline-flex;align-items:center;gap:.3em;padding:.4em 0;position:relative;transition:opacity .3s}
.ui-topnav a:hover{opacity:.65}
.ui-topnav a.on{color:var(--ui-acc)}
.ui-topnav a svg{width:.9em;height:.9em;opacity:.6}
.ui-tabbar{display:flex;justify-content:space-around;align-items:flex-end;gap:.3em;width:100%;padding:.7em .4em .9em;background:#fff;border-top:1px solid var(--ui-line);border-radius:0 0 1em 1em}
.ui-tabbar a{display:flex;flex-direction:column;align-items:center;gap:.3em;font-size:.6875em;font-weight:500;color:var(--ui-mute);flex:1;transition:color .3s}
.ui-tabbar a svg{width:1.9em;height:1.9em}
.ui-tabbar a.on{color:var(--ui-acc);font-weight:600}
.ui-tabbar.dk{background:#141417;border-top-color:rgba(255,255,255,.1)}
.ui-tabbar.dk a{color:rgba(255,255,255,.6)}
.ui-tabbar.round{border-radius:1em;border-top:0;box-shadow:0 1px 0 rgba(11,11,15,.05),0 14px 30px -20px rgba(11,11,15,.3)}
.ui-tabbar a .pl{display:grid;place-items:center;width:2.6em;height:1.8em;border-radius:999px}
.ui-tabbar a.on .pl{background:color-mix(in srgb,var(--ui-acc) 14%,#fff)}
/* cards, stats, rows, avatars */
.ui-card{width:100%;background:#fff;border-radius:1em;padding:1.1em 1.25em;box-shadow:0 1px 0 rgba(11,11,15,.04),0 14px 30px -20px rgba(11,11,15,.25);border:1px solid var(--ui-line,rgba(11,11,15,.08));color:var(--ui-ink)}
.ui-card.flat{box-shadow:none}
.ui-card.ink{background:var(--ui-ink);color:#fff;border-color:transparent}
.ui-card.acc{background:var(--ui-acc);color:#fff;border-color:transparent}
.ui-card.g{background:var(--ui-g);border-color:transparent;box-shadow:none}
.ui-card.r2{border-radius:1.5em}
.ui-card h5{font-size:1.0625em;font-weight:700;margin:0;letter-spacing:-.01em;line-height:1.25}
.ui-card p{font-size:.875em;color:var(--ui-mute);margin:.3em 0 0;line-height:1.4}
.ui-card.ink p,.ui-card.acc p,.ui-card.ink .mut,.ui-card.acc .mut{color:rgba(255,255,255,.72)}
.ui-card .hd{display:flex;align-items:center;justify-content:space-between;gap:1em}
.ui-stat{display:flex;flex-direction:column;gap:.7em;width:100%}
.ui-stat .l{display:flex;justify-content:space-between;align-items:center;font-size:.875em;color:var(--ui-mute)}
.ui-stat .v{font-size:2em;font-weight:700;letter-spacing:-.03em;line-height:1}
.ui-stat .v.grn{color:#2BB673}
.ui-ico{width:2.3em;height:2.3em;border-radius:.6em;display:grid;place-items:center;background:var(--c,var(--ui-acc));color:#fff;flex:0 0 auto}
.ui-ico.soft{background:color-mix(in srgb,var(--c,var(--ui-acc)) 14%,#fff);color:var(--c,var(--ui-acc))}
.ui-ico.od{background:color-mix(in srgb,var(--c,var(--ui-acc)) 20%,transparent);color:var(--c,var(--ui-acc))}
.ui-ico.circ{border-radius:50%}
.ui-ico.lg{width:3em;height:3em;border-radius:.8em}
.ui-ico svg{width:1.1em;height:1.1em}
.ui-big{font-size:2.75em;font-weight:800;letter-spacing:-.04em;line-height:1}
.ui-big small{font-size:.36em;font-weight:600;letter-spacing:0;margin-left:.15em}
.ui-rows{width:100%;display:flex;flex-direction:column}
.ui-row{display:flex;align-items:center;gap:.8em;padding:.8em 0;border-bottom:1px solid var(--ui-line,rgba(11,11,15,.08))}
.ui-rows>.ui-row:last-child{border-bottom:0}
.ui-row .t{display:block;font-weight:600;font-size:.9375em;line-height:1.25}
.ui-row .s{display:block;font-size:.8125em;color:var(--ui-mute);margin-top:.15em;line-height:1.3}
.ui-row .m{flex:1;min-width:0}
.ui-row .e{margin-left:auto;display:flex;align-items:center;gap:.6em;flex:0 0 auto}
.ui-row.card{background:#fff;border:1px solid var(--ui-line);border-radius:.875em;padding:.8em 1em;box-shadow:0 1px 0 rgba(11,11,15,.04)}
.ui-rows.gap{gap:.6em}
.ui-rows.gap>.ui-row{border:0}
.ui-av{flex:0 0 auto;width:2.5em;height:2.5em;border-radius:50%;background:var(--ui-g,#ECECF0);display:grid;place-items:center;font-size:1em;font-weight:700;color:var(--ui-ink);overflow:hidden;background-size:cover;background-position:center;line-height:1}
.ui-av.sq{border-radius:.6em}
.ui-av.sm{width:1.9em;height:1.9em;font-size:.8em}
.ui-av.xs{width:1.4em;height:1.4em}
.ui-av.lg{width:3.2em;height:3.2em}
.ui-av.acc{background:var(--ui-acc);color:#fff}
.ui-av.ink{background:var(--ui-ink);color:#fff}
.ui-av.warm{background:#F3EDE1;color:#2b3a4a;font-size:.8em}
.ui-avs{display:inline-flex}
.ui-avs .ui-av{box-shadow:0 0 0 2px var(--ui-ring,#fff)}
.ui-avs .ui-av+.ui-av{margin-left:-.6em}
.ui-toggle{position:relative;width:3.1em;height:1.9em;border-radius:999px;background:#D1D1D6;cursor:pointer;transition:background .35s var(--ease);flex:0 0 auto;--c:var(--ui-acc)}
.ui-toggle::after{content:"";position:absolute;top:.15em;left:.15em;width:1.6em;height:1.6em;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .35s var(--ease)}
.ui-toggle.on{background:var(--c)}
.ui-toggle.on::after{transform:translateX(1.2em)}
.ui-prog{position:relative;height:.5em;border-radius:999px;background:var(--ui-g,#E7E7EC);flex:1;min-width:3em;overflow:hidden;--v:0%}
.ui-prog i{position:absolute;inset:0 auto 0 0;width:0;background:var(--c,var(--ui-acc));border-radius:999px;transition:width 1.1s var(--ease)}
.is-in .ui-prog i{width:var(--v)}
.ui-prog.thin{height:.3em}
.ui-pr{display:flex;align-items:center;gap:.7em;font-size:.875em;width:100%}
.ui-pr .n{min-width:2.4em;text-align:right;color:var(--ui-mute);font-size:.9em}
.ui-menu{width:100%;background:#fff;border-radius:1em;padding:.5em;box-shadow:0 1px 0 rgba(11,11,15,.05),0 24px 48px -24px rgba(11,11,15,.35)}
.ui-menu a{display:flex;align-items:center;gap:.9em;padding:.65em .8em;border-radius:.6em;transition:background .3s}
.ui-menu a:hover,.ui-menu a.on{background:var(--ui-g)}
.ui-menu .t{font-weight:600;font-size:.9375em}
.ui-menu .s{font-size:.8125em;color:var(--ui-mute)}
.ui-menu.list a{padding:.6em .9em;font-size:.9375em}
.ui-menu.list a.on{color:var(--ui-acc)}
.ui-menu .grp{font-size:.8em;color:var(--ui-mute);padding:.5em .9em .2em}
.ui-modal{width:100%;background:#fff;border-radius:1.25em;padding:1.5em;box-shadow:0 1px 0 rgba(11,11,15,.05),0 40px 80px -30px rgba(11,11,15,.45);display:flex;flex-direction:column;gap:1em;color:var(--ui-ink)}
.ui-modal .h{display:flex;align-items:center;justify-content:space-between;gap:1em}
.ui-modal .h h5{font-size:1.25em;font-weight:700;letter-spacing:-.02em;margin:0}
.ui-x{width:2.25em;height:2.25em;border-radius:50%;display:grid;place-items:center;background:var(--ui-g);cursor:pointer;flex:0 0 auto;transition:background .3s}
.ui-x:hover{background:var(--ui-line)}
.ui-x svg{width:1em;height:1em}
.ui-modal .a{display:flex;gap:.6em;flex-wrap:wrap}
.ui-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1em;width:100%}
.ui-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;width:100%}
.ui-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;width:100%}
.ui-hr{height:1px;background:var(--ui-line);width:100%}
.ui-ck{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:var(--ui-acc);color:#fff;flex:0 0 auto}
.ui-ck svg{width:.85em;height:.85em;stroke-width:3}
.ui-ck svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .7s var(--ease) .35s}
.is-in .ui-ck svg path{stroke-dashoffset:0}
.ui-ck.off{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ui-line);color:#c9c9cf}
.ui-ck.off svg path{stroke-dashoffset:0}
.ui-ck.sm{width:1.25em;height:1.25em}
.ui-ck.grn{background:#1E9E62}
.ui-tick{display:flex;align-items:center;gap:.6em;font-size:.9375em}
/* calendar pieces (KidNights, Kinvy) */
.ui-cal{width:100%;font-size:.8125em}
.ui-cal .d7{display:grid;grid-template-columns:repeat(7,1fr);gap:.4em .5em;align-items:center}
.ui-cal .wd{font-size:.7em;letter-spacing:.08em;font-weight:700;color:var(--ui-mute);padding-bottom:.4em}
.ui-cal .dn{font-weight:600;font-size:1.05em;padding:.3em 0 .5em;display:flex;align-items:center;gap:.5em}
.ui-cal .dn small{font-weight:400;color:var(--ui-mute);font-size:.72em;white-space:nowrap}
.ui-cal .dn b{display:inline-grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%}
.ui-cal .dn.today b{background:var(--ui-acc);color:#fff}
.ui-cal .sl{height:1.5em;border-radius:999px;background:#ECECF0}
.ui-cal .bar{height:1.5em;border-radius:999px;background:var(--c);color:#fff;display:flex;align-items:center;gap:.4em;padding:0 .6em 0 .15em;font-size:.95em;font-weight:600;white-space:nowrap;overflow:hidden;grid-column:span var(--n,1)}
.ui-cal .bar img{width:1.25em;height:1.25em;border-radius:50%;object-fit:cover}
.ui-cal .evt{display:inline-block;padding:.1em .6em;border-radius:.3em;background:#E3ECFF;color:var(--ui-acc);font-weight:600;font-size:.8em;white-space:nowrap}
.ui-minical{width:100%;font-size:.8125em}
.ui-minical .hd{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:1.15em;margin-bottom:.6em}
.ui-minical .hd small{font-weight:500;font-size:.78em;color:var(--ui-mute)}
.ui-minical .g{display:grid;grid-template-columns:repeat(7,1fr);gap:.45em .3em;justify-items:center}
.ui-minical .wd{font-size:.72em;color:var(--ui-mute);font-weight:600}
.ui-minical .d{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;font-weight:600;background:color-mix(in srgb,var(--c,#fff) 18%,#fff);color:var(--c,var(--ui-ink));transition:transform .4s var(--ease)}
.ui-minical .d:hover{transform:scale(1.08)}
.ui-minical .d.s{background:var(--c);color:#fff}
.ui-minical .d.ink{background:var(--ui-ink);color:#fff}
.ui-minical .d.e{background:transparent}
.ui-days{display:flex;gap:.35em;width:100%}
.ui-days b{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15em;padding:.55em 0;border-radius:.5em;background:var(--c);color:#fff;font-size:.9em;line-height:1;font-weight:700}
.ui-days b small{font-size:.6em;font-weight:700;letter-spacing:.04em}
.ui-days b i{width:.3em;height:.3em;border-radius:50%;background:currentColor;margin-top:.1em}
.ui-dbadge{width:3em;height:3em;border-radius:.6em;background:var(--ui-ink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}
.ui-dbadge b{font-size:1.25em;font-weight:700}
.ui-dbadge small{font-size:.55em;letter-spacing:.08em;font-weight:700;margin-top:.1em}
.ui-dbadge.light{background:var(--ui-g);color:var(--ui-ink)}
.ui-dbadge.red{background:#D7352B}
.ui-dbadge.chk{background:#C8DCFF;color:var(--ui-ink)}
.ui-strip{display:flex;justify-content:space-between;width:100%;font-size:.8125em;font-weight:600}
.ui-strip b{width:2.2em;height:2.2em;border-radius:.5em;display:grid;place-items:center}
.ui-strip b.on{background:var(--ui-acc);color:#fff}
/* blüp */
.ui-steps{display:flex;gap:.22em}
.ui-steps i{width:1.5em;height:2.9em;border-radius:.3em;background:#1b1c22;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:background .3s;cursor:pointer}
.ui-steps i:nth-child(4n+1){background:#22232b}
.ui-steps i.on{background:#6d47ff;box-shadow:none}
.ui-steps.short i{height:2.1em}
.ui-code{font-family:"JetBrains Mono",var(--mono);font-size:.8125em;line-height:1.6;white-space:pre;color:#e8e8ee;background:#15161a;border:1px solid rgba(255,255,255,.08);border-radius:.6em;padding:1em 1.2em;width:100%;overflow:hidden;font-weight:400}
.ui-code .c{color:#7a7f8c}
.ui-code .s{color:#c9b8ff}
/* messages, polls, numerals */
.ui-sms{width:100%;background:#fff;border-radius:1.2em;padding:1em 1.2em;box-shadow:0 1px 0 rgba(11,11,15,.05),0 20px 40px -24px rgba(11,11,15,.3)}
.ui-sms .f{font-weight:700;color:var(--ui-acc);font-size:.9375em}
.ui-sms .m{font-size:1.125em;line-height:1.3;margin-top:.2em;font-weight:500}
.ui-poll{width:100%;display:flex;flex-direction:column;gap:.7em;font-size:.9375em;font-weight:600}
.ui-poll .o{display:grid;grid-template-columns:4.6em 1fr 1.2em;align-items:center;gap:.8em}
.ui-poll .o b{text-align:right}
.ui-tile{display:flex;flex-direction:column;gap:.35em;padding:1.1em 1.1em 1.2em;border-radius:1.1em;background:var(--ui-g);color:var(--ui-ink);min-width:0}
.ui-tile.acc{background:var(--ui-acc);color:#fff}
.ui-tile.ink{background:var(--ui-ink);color:#fff}
.ui-tile.teal{background:#0E7C6B;color:#fff}
.ui-tile .l{font-size:.9em;font-weight:600;opacity:.85}
.ui-tile .big{font-size:2.4em;font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:.1em}
.ui-tile .big small{font-size:.38em;font-weight:600;letter-spacing:0;margin-left:.15em}
.ui-tile .s{font-size:.875em;opacity:.85;margin-top:.1em;line-height:1.3}
/* scale contexts: components in kit mats, hero floats and feature side pieces follow their container */
.kit{container-type:inline-size}
.kit .ui{font-size:calc(clamp(11px,3.6cqw,15.5px)*var(--ui-s,1))}
.kit.s6 .ui{font-size:calc(clamp(11px,2.5cqw,15.5px)*var(--ui-s,1))}
.kit.s8 .ui,.kit.s12 .ui{font-size:calc(clamp(11px,1.9cqw,15.5px)*var(--ui-s,1))}
.kit-b.wide{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;margin:0 calc(-1*clamp(18px,2vw,28px));padding:4px clamp(18px,2vw,28px) 6px}
.kit-b.wide::-webkit-scrollbar{display:none}
.kit-b.wide>.ui{width:max-content;min-width:100%}
.fl{container-type:inline-size}
.fl .ui{font-size:clamp(7px,5cqw,13px)}
.cs .stack .f1:not(.tall){width:34%}
.cs .stack .f2:not(.tall){width:27%}
/* the third card hides behind the MacBook until the stack explodes */
.cs .stack .f3{width:30%;left:35%;bottom:16%;z-index:-1;opacity:0}
@media (prefers-reduced-motion:reduce){.cs .stack .f3{display:none}}
.fl .fl-in{border-radius:1em}
.fu-media{container-type:inline-size}
.fu-media .side .ui{font-size:clamp(8px,1.5cqw,13px)}
/* enter animations (off under reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .ui-rows>.ui-row,.ui-anim>*{opacity:0;transform:translateY(.5em);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .is-in .ui-rows>.ui-row,.is-in .ui-anim>*{opacity:1;transform:none}
  .is-in .ui-rows>.ui-row:nth-child(2),.is-in .ui-anim>*:nth-child(2){transition-delay:.12s}
  .is-in .ui-rows>.ui-row:nth-child(3),.is-in .ui-anim>*:nth-child(3){transition-delay:.24s}
  .is-in .ui-rows>.ui-row:nth-child(4),.is-in .ui-anim>*:nth-child(4){transition-delay:.36s}
  .is-in .ui-rows>.ui-row:nth-child(5),.is-in .ui-anim>*:nth-child(5){transition-delay:.48s}
  .is-in .ui-rows>.ui-row:nth-child(n+6),.is-in .ui-anim>*:nth-child(n+6){transition-delay:.6s}
}
@media (prefers-reduced-motion:reduce){
  .ui-prog i{width:var(--v);transition:none}
  .ui-ck svg path{stroke-dashoffset:0;transition:none}
  .ui-range i,.ui-range b,.ui-toggle,.ui-toggle::after,.ui-pill{transition:none}
}
@media (max-width:900px){
  .kit-b.scrolls>.ui{width:max-content;max-width:none}
}