/* ==========================================================================
   Skanli / home.css
   Home page only: the hero and its build figure, and the home section layouts.
   Owner: foundation builder. Loads after site.css.

   The build figure (.stage) is made of layers, back to front:
     .stage-grid    the canvas grid and the top crop marks
     .stage-wire    the wireframe card, plus .screen-wire (dashed boxes) inside each device
     .stage-design  .screen-ui inside each device, the selection on the laptop, the 390 measure
     .stage-code    the code panel
     .stage-live    the device frames, the 04 Live tag and the status card
   Every object is placed in % of the plate (--x, --y, --w), and every size inside it is in
   cqw of the plate, so each layer animates with transform and opacity only.
   The scroll build of the figure is the "Hero build" section below (motion.js drives it).
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{
  /* Display size: fills two lines across the grid, capped by the viewport height so the
     whole hero (caption and proof line included) fits in 1280x800, 1366x768 and 1440x900.
     The hero is a size container, so 100cqw is its width without any scrollbar. */
  --display:min(calc((min(100cqw,1440px) - 2 * var(--margin)) * .0921),13.5vh);
  --chrome:218px; /* header, paddings, eyebrow and the caption row: everything except title and plate */
  container-type:inline-size;
  padding:24px 0;
}
@supports (height:1svh){
  .hero{--display:min(calc((min(100cqw,1440px) - 2 * var(--margin)) * .0921),13.5svh)}
}
.hero__eyebrow{grid-column:1 / -1}
.hero__title{
  grid-column:1 / -1;margin:14px 0 0 -.035em;
  font:400 var(--display)/.92 var(--font-serif);letter-spacing:-.035em;color:var(--ink);text-wrap:wrap;
}
.hero__title em{letter-spacing:-.025em}
.hero__side{grid-column:1 / span 4;grid-row:3;display:flex;flex-direction:column;margin-top:28px;min-width:0}
.hero__lede{font-size:20px;line-height:1.5;letter-spacing:-.01em;color:var(--ink-2)}
.hero__actions{margin-top:28px}
.hero__aside{display:flex;flex-direction:column;flex:1 1 auto;gap:28px;margin-top:32px}
.proof{
  display:flex;align-items:flex-start;gap:12px;margin-top:auto;padding-top:11px;border-top:1px solid var(--rule);
  font-size:var(--fs-small);line-height:20px;color:var(--ink-3);
}
.proof__icons{display:flex;flex:none;gap:4px;padding-top:2px;color:var(--ink-2)}
.proof__icons svg{width:16px;height:16px}
.hero__figure{
  grid-column:5 / -1;grid-row:3;justify-self:end;margin-top:28px;
  width:min(100%,calc((100vh - var(--chrome) - 1.84 * var(--display)) * 888 / 424));
}
@supports (height:1svh){
  .hero__figure{width:min(100%,calc((100svh - var(--chrome) - 1.84 * var(--display)) * 888 / 424))}
}
.hero__figcap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:32px;margin-top:12px}
.hero__figcap .fig-cap{margin-top:0;padding-top:9px;white-space:nowrap}

@media (max-width:1099px){
  .hero{padding:28px 0 56px}
  .hero__side{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:start;margin-top:32px}
  .hero__copy{grid-column:1 / span 7}
  .hero__aside{grid-column:8 / span 5;margin-top:4px;gap:24px}
  .proof{margin-top:0}
  .hero__figure{grid-column:1 / -1;grid-row:4;justify-self:stretch;width:100%;margin-top:56px}
}
@media (max-width:699px){
  .hero{--display:clamp(40px,12.4vw,64px);padding:24px 0 48px}
  .hero__title{margin-top:14px;line-height:.98;letter-spacing:-.03em}
  .hero__side{display:flex;flex-direction:column;margin-top:22px}
  .hero__lede{font-size:17px;line-height:1.55;letter-spacing:-.005em}
  .hero__actions{margin-top:24px}
  .hero__actions .btn{flex:1 1 auto;padding:0 16px}
  .hero__aside{margin-top:28px;gap:20px}
  .hero__figure{margin-top:44px}
  .hero__figcap{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .hero__figcap .fig-cap{padding-top:0}
}
@media (max-width:399px){
  .hero__actions{flex-direction:column}
  .hero__actions .btn{width:100%}
  .hero__chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__chips .chip{min-height:44px;padding:6px 10px 6px 9px;gap:7px;font-size:13px;line-height:1.25;white-space:normal}
}

/* ── The build figure ─────────────────────────────────────────────────── */
@property --tag-fs{syntax:"<length>";inherits:true;initial-value:10px}
.stage{
  position:relative;aspect-ratio:888 / 424;background:var(--canvas);
  container-type:inline-size;isolation:isolate;
}
.stage > *{--tag-fs:clamp(8px,1.13cqw,10px)}
/* Top crop marks (the stage rail closes the figure at the bottom) */
.stage::before{
  content:"";position:absolute;left:-20px;right:-20px;top:-20px;height:20px;pointer-events:none;
  background:
    linear-gradient(var(--mark),var(--mark)) left 0 top 19px / 12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) left 19px top 0 / 1px 12px no-repeat,
    linear-gradient(var(--mark),var(--mark)) right 0 top 19px / 12px 1px no-repeat,
    linear-gradient(var(--mark),var(--mark)) right 19px top 0 / 1px 12px no-repeat;
}
.stage-grid{
  position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M20 24h8M24 20v8' stroke='%23C3BDAE' stroke-width='1'/%3E%3C/svg%3E");
  background-size:5.4054cqw 5.4054cqw;background-position:0 0;
}
.obj{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z,1)}
.o-wire  {--x:2.252%; --y:9.434%;  --w:23.874%;--z:1}
.o-laptop{--x:27.027%;--y:9.434%;  --w:58.559%;--z:2}
.o-code  {--x:2.252%; --y:49.528%; --w:30.180%;--z:3}
.o-phone {--x:80.405%;--y:12.264%; --w:17.568%;--z:4}
.o-status{--x:43.018%;--y:85.849%; --w:auto;   --z:5}

/* Stage tags: 01 to 03 white, only 04 Live in Lime. Small accents; the rail below is the readable list. */
.stage .tag{position:absolute;height:2.05em;padding:0 .7em;gap:.55em;font-size:var(--tag-fs);box-shadow:0 1px 2px rgb(17 24 20 / .08)}
.o-wire > .tag,.o-code > .tag{left:0;bottom:calc(100% + .7cqw)}
.o-phone > .tag{right:0;bottom:calc(100% + .7cqw)}

/* 01 Wireframe card */
.o-wire__card{border-radius:.6cqw;box-shadow:var(--shadow-1)}
.o-wire__card svg,.o-code__panel svg{width:100%;height:auto}

/* 03 Code panel: the only dark block in the figure */
.o-code__panel{border-radius:1cqw;box-shadow:var(--shadow-3)}
.code text{font-family:var(--font-mono)}

/* Laptop: frame (stage-live) behind, screen layers on top */
.laptop{position:relative;aspect-ratio:508 / 304}
.laptop__frame{position:absolute;inset:0}
.laptop__lid{
  position:absolute;left:5%;right:5%;top:0;height:96.053%;
  background:var(--paper);border:1px solid var(--ink);border-radius:1.58cqw 1.58cqw .35cqw .35cqw;box-shadow:var(--shadow-2);
}
.laptop__cam{position:absolute;left:50%;top:1.1%;width:.42cqw;height:.42cqw;margin-left:-.21cqw;border-radius:50%;background:var(--rule-2)}
.laptop__base{
  position:absolute;left:0;right:0;bottom:0;height:3.947%;
  background:var(--paper);border:1px solid var(--ink);border-radius:0 0 .9cqw .9cqw;box-shadow:0 10px 18px -12px rgb(17 24 20 / .3);
}
.laptop__base::after{content:"";position:absolute;left:43%;right:43%;top:-1px;height:55%;border:1px solid var(--ink);border-top:0;border-radius:0 0 .4cqw .4cqw;background:var(--canvas-2)}
.laptop__screen{position:absolute;left:6.772%;top:2.961%;width:86.457%;aspect-ratio:16 / 10;border-radius:.25cqw;overflow:hidden}
.phone{position:relative;aspect-ratio:156 / 323.6}
.phone__frame{position:absolute;inset:0;background:var(--paper);border:1px solid var(--ink);border-radius:2.93cqw;box-shadow:var(--shadow-3)}
.phone__screen{position:absolute;left:3.846%;right:3.846%;top:1.854%;bottom:1.854%;border-radius:2.25cqw;overflow:hidden}
.screen-layer{position:absolute;inset:0;width:100%;height:100%}
.ui text{font-family:var(--font-sans);fill:var(--ink);font-feature-settings:"tnum" 1}
.ui .t5{font-weight:500}
.ui .t6{font-weight:600}

.ui .mu{fill:var(--ink-3)}
.ui .g2{fill:var(--ink-2)}

/* 02 Design trace: selection with handles, size label and the tag anchored under it */
.selection{position:absolute;left:24.167%;top:16.667%;width:22.5%;height:18.667%;border:1.5px solid var(--ink)}
.selection__h{position:absolute;width:.62cqw;height:.62cqw;background:var(--paper);border:1px solid var(--ink)}
.selection__h:nth-child(1){left:0;top:0;transform:translate(-55%,-55%)}
.selection__h:nth-child(2){right:0;top:0;transform:translate(55%,-55%)}
.selection__h:nth-child(3){left:0;bottom:0;transform:translate(-55%,55%)}
.selection__h:nth-child(4){right:0;bottom:0;transform:translate(55%,55%)}
/* Tag and size label sit in one row under the box; the row may run into the empty band under the next card */
.selection__meta{position:absolute;left:-1.5px;top:calc(100% + .5cqw);display:flex;align-items:center;gap:.45cqw}
.selection__meta .tag{position:static}
.selection__size{
  display:inline-flex;align-items:center;height:2.05em;padding:0 .55em;
  background:var(--paper);border:1px solid var(--ink);font:500 calc(var(--tag-fs) * .9)/1 var(--font-mono);letter-spacing:.04em;color:var(--ink);white-space:nowrap;
}
/* Measurement line, true to scale: the phone screen is drawn 390 units wide */
.measure{
  position:absolute;left:3.846%;right:3.846%;top:calc(100% + .9cqw);display:flex;justify-content:center;height:calc(var(--tag-fs) * 1.6);
  background:linear-gradient(var(--ink),var(--ink)) left center / 1px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) right center / 1px 100% no-repeat;
}
.measure::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink)}
.measure span{position:relative;display:flex;align-items:center;padding:0 .5em;background:var(--canvas);font:500 var(--tag-fs)/1 var(--font-mono);letter-spacing:.04em;color:var(--ink)}

/* 04 Live: the final-beat status card */
.o-status{
  display:flex;align-items:center;gap:.9em;height:2.9em;padding:0 1.1em 0 .95em;
  background:var(--paper);border:1px solid var(--ink);box-shadow:var(--shadow-1);white-space:nowrap;
  font-size:clamp(9px,1.24cqw,11px);
}
.status__live{display:inline-flex;align-items:center;gap:.55em;font:500 1em/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.status__live::before{content:"";width:.8em;height:.8em;background:var(--lime);box-shadow:0 0 0 1px var(--ink)}
.status__sep{align-self:stretch;width:1px;margin:.75em 0;background:var(--rule)}
.status__text{font:500 1em/1 var(--font-sans);letter-spacing:-.005em;color:var(--ink-2)}

@media (max-width:699px){
  .stage{aspect-ratio:350 / 456}
  .stage::before{display:none}
  .stage-grid{background-size:11.43cqw 11.43cqw}
  .o-wire  {--x:3.43%; --y:7.456%; --w:44.57%}
  .o-code  {--x:52%;   --y:7.456%; --w:44.57%}
  .o-laptop{--x:2.29%; --y:39.035%;--w:82.86%}
  .o-phone {--x:65.71%;--y:42.98%; --w:32%}
  .o-status{--x:3.43%; --y:79.82%}
  .o-wire__card{border-radius:1.1cqw}
  .o-code__panel{border-radius:1.5cqw}
  .laptop__lid{border-radius:2.3cqw 2.3cqw .5cqw .5cqw}
  .laptop__base{border-radius:0 0 1.3cqw 1.3cqw}
  .laptop__cam{width:.8cqw;height:.8cqw;margin-left:-.4cqw}
  .phone__frame{border-radius:5.33cqw}
  .phone__screen{border-radius:4.1cqw}
  .selection__h{width:1.3cqw;height:1.3cqw}
  .selection__size{display:none}
  .o-wire > .tag,.o-code > .tag,.o-phone > .tag{bottom:calc(100% + 1.4cqw)}
  .measure{top:calc(100% + 1.6cqw)}
  .o-status{font-size:9px}
}

/* ── Hero build ───────────────────────────────────────────────────────────
   The scroll build of the figure (motion.js; spec in design/storyboard/MOTION.md).
   - html.hero-build is set in the page head when motion is allowed, so the first paint is already
     the blank canvas. Without it (no JavaScript, reduced motion, or motion.js never started) none of
     this applies and the hero is the finished, static figure.
   - --p is the build's progress: 0 = blank canvas, 1 = finished figure (identical to the static one).
     motion.js draws the wireframes on first view (p 0 to .35 in about 1.1 s), then the pinned scroll
     builds design, code and live (p .35 to 1).
   - Every moving part runs ONE paused animation over its own window [--a, --b] of --p:
     duration (b - a) s, delay (a - p) s, so the paused frame is exactly the frame at --p.
     Only opacity, transform, clip-path and stroke-dashoffset change. */
@property --p{syntax:"<number>";inherits:true;initial-value:1}

/* 1  The pin: the hero sticks (desktop: under the header; below 1100 px: with the figure centred
      under the header, motion.js sets --pin-top) while the empty run after it scrolls by.
      data-mode="play" (the figure does not fit the screen): no pin, the build plays on view. */
.hero-pin{--pin-len:165vh}
@supports (height:1svh){ .hero-pin{--pin-len:165svh} }
@media (max-width:1099px){
  .hero-pin{--pin-len:135vh}
  @supports (height:1svh){ .hero-pin{--pin-len:135svh} }
}
.hero-build .hero-pin::after{content:"";display:block;height:var(--pin-len)}
.hero-build .hero{position:sticky;top:var(--pin-top,calc(var(--header-h) + 1px));--p:0}
.hero-build .hero-pin[data-mode="play"]::after{content:none}
.hero-build .hero-pin[data-mode="play"] .hero{position:static}
/* Printed, nothing pins (motion.js shows the finished figure while printing) */
@media print{
  .hero-build .hero-pin::after{content:none}
  .hero-build .hero{position:static}
}

/* 2  Build-only hooks (invisible in the finished figure) */
/* Hairline artboard around each screen while it has no device frame */
.screen-edge{position:absolute;inset:0;z-index:3;border:1px solid rgb(17 24 20 / .32);border-radius:inherit;pointer-events:none;opacity:0}
/* While building, the dashed boxes sit above the UI so each component lands inside its own box */
.hero-build .screen-wire{z-index:1}
.hero-build .selection{z-index:2}
/* SVG component groups scale about their own centre */
.hero-build .ui-part{transform-box:fill-box;transform-origin:center}
/* Drawn lines: one dash as long as the path (pathLength 1), moved by stroke-dashoffset */
.hero-build :is(.wf-line,.wd,.code-check){stroke-dasharray:1 2}
/* Stage rail: the current step's 3 px bar is a scaleX layer that fills with the build. Every step
   has its bar (one animation each, never rebuilt); only the current step's shows. */
.hero-build .stage-rail__item{position:relative}
.hero-build .stage-rail__item[aria-current="step"]{padding-top:8px;border-top-width:1px}
.hero-build .stage-rail__item::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:3px;
  background:var(--line-strong);transform:scaleX(0);transform-origin:left center;
}
.hero-build .stage-rail__item:not([aria-current="step"])::before{opacity:0}
/* Until motion.js sets the first stage, no step is current */
.hero-build .hero:not([data-stage]) .stage-rail__item[aria-current="step"] .stage-rail__label{background:none}

/* 3  The engine */
.hero-build .hero :is(.stage-grid,.o-wire,.wf-line,.wf-cross,.wf-fill,.screen-edge,.ui-bg,.ui-part,.wd,.wb,
  .selection,.measure,.o-code,.code-nums text,.code-lines text,.code-check,.code-build text,.code-live text,
  .laptop__frame,.phone__frame,.tag--live,.o-status),
.hero-build .hero .stage-rail__item::before{
  animation-name:var(--kf);
  animation-duration:calc((var(--b) - var(--a)) * 1s);
  animation-delay:calc((var(--a) - var(--p)) * 1s);
  animation-timing-function:var(--ease,linear);
  animation-iteration-count:1;
  animation-fill-mode:both;
  animation-play-state:paused;
}

/* 4  Keyframes: each one is a single, tweenable change */
@keyframes sb-grid{from{opacity:.4}to{opacity:1}}
@keyframes sb-fade{from{opacity:0}to{opacity:1}}
@keyframes sb-fade-out{from{opacity:1}to{opacity:0}}
@keyframes sb-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes sb-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sb-snap{from{opacity:0;transform:scale(var(--from,.94))}to{opacity:1;transform:none}}
/* SVG UI parts settle by a short move, not a scale: a changing scale makes the browser lay out
   every SVG text inside again on each frame (measured: 4 to 12 ms a frame); a move does not */
@keyframes sb-settle{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sb-type{from{clip-path:inset(-40% 100% -40% 0)}to{clip-path:inset(-40% 0 -40% 0)}}
@keyframes sb-open{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes sb-close{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes sb-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes sb-edge{0%{opacity:0}6%{opacity:1}95%{opacity:1}100%{opacity:0}}
@keyframes sb-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 5  Windows, stage by stage (--a and --b are shares of the build) */
/* 1 Canvas, 0 to .10: the grid comes up from 40% to full strength */
.hero-build .hero .stage-grid{--kf:sb-grid;--a:0;--b:.10}

/* 2 Wireframe, .10 to .35: the sketch card, the screen artboards, then the dashed boxes */
.hero-build .hero .o-wire{--kf:sb-rise;--a:.10;--b:.15;--rise:1.5cqw;--ease:var(--ease-arrive)}
.hero-build .hero .wf-line{--kf:sb-draw;--b:calc(var(--a) + .03)}
.hero-build .hero .wf-line:nth-child(1){--a:.120}
.hero-build .hero .wf-line:nth-child(2){--a:.128}
.hero-build .hero .wf-line:nth-child(3){--a:.136}
.hero-build .hero .wf-line:nth-child(4){--a:.144}
.hero-build .hero .wf-line:nth-child(5){--a:.152}
.hero-build .hero .wf-line:nth-child(6){--a:.160}
.hero-build .hero .wf-line:nth-child(7){--a:.168}
.hero-build .hero .wf-fill{--kf:sb-fade;--a:.17;--b:.21}
.hero-build .hero .wf-cross{--kf:sb-fade;--a:.19;--b:.21}
/* Artboards: outline in at the start of the wireframe, out as the frames close (Build) */
.hero-build .hero .laptop .screen-edge{--kf:sb-edge;--a:.15;--b:.88}
.hero-build .hero .phone .screen-edge{--kf:sb-edge;--a:.16;--b:.89}
.hero-build .hero .laptop .ui-bg{--kf:sb-fade;--a:.15;--b:.18}
.hero-build .hero .phone .ui-bg{--kf:sb-fade;--a:.16;--b:.19}
/* Dashed boxes, drawn along their outline through the .wd mask copies */
.hero-build .hero .wd{--kf:sb-draw}
.hero-build .hero .laptop .wd:nth-child(1){--a:.170;--b:.220}
.hero-build .hero .laptop .wd:nth-child(2){--a:.180;--b:.230}
.hero-build .hero .laptop .wd:nth-child(3){--a:.200;--b:.235}
.hero-build .hero .laptop .wd:nth-child(4){--a:.210;--b:.245}
.hero-build .hero .laptop .wd:nth-child(5){--a:.220;--b:.255}
.hero-build .hero .laptop .wd:nth-child(6){--a:.230;--b:.275}
.hero-build .hero .laptop .wd:nth-child(7){--a:.240;--b:.285}
.hero-build .hero .phone .wd:nth-child(1){--a:.260;--b:.290}
.hero-build .hero .phone .wd:nth-child(2){--a:.270;--b:.305}
.hero-build .hero .phone .wd:nth-child(3){--a:.280;--b:.320}
.hero-build .hero .phone .wd:nth-child(4){--a:.295;--b:.330}
.hero-build .hero .phone .wd:nth-child(5){--a:.310;--b:.350}

/* 3 Design, .35 to .60: each component settles into its box while the box fades out */
.hero-build .hero .ui-part{--kf:sb-settle;--ease:var(--ease-snap)}
.hero-build .hero .wb{--kf:sb-fade-out;--ease:var(--ease-snap)}
.hero-build .hero :is(.ui-side,.laptop .wb:nth-child(1)){--a:.370;--b:.410}
.hero-build .hero :is(.ui-top,.laptop .wb:nth-child(2)){--a:.380;--b:.420}
.hero-build .hero :is(.ui-s1,.laptop .wb:nth-child(3)){--a:.400;--b:.440}
.hero-build .hero :is(.ui-s2,.laptop .wb:nth-child(4)){--a:.410;--b:.450}
.hero-build .hero :is(.ui-s3,.laptop .wb:nth-child(5)){--a:.420;--b:.460}
.hero-build .hero :is(.ui-chart,.laptop .wb:nth-child(6)){--a:.430;--b:.475}
.hero-build .hero :is(.ui-list,.laptop .wb:nth-child(7)){--a:.440;--b:.485}
.hero-build .hero :is(.ui-sys,.ui-head,.phone .wb:nth-child(1)){--a:.470;--b:.500}
.hero-build .hero :is(.ui-kpi,.phone .wb:nth-child(2)){--a:.480;--b:.515}
.hero-build .hero :is(.ui-act,.phone .wb:nth-child(3)){--a:.490;--b:.525}
.hero-build .hero :is(.ui-proj,.phone .wb:nth-child(4)){--a:.500;--b:.535}
.hero-build .hero :is(.ui-tabs,.phone .wb:nth-child(5)){--a:.510;--b:.545}
/* The 02 Design selection snaps onto the first stat card; the 390 measure opens from its centre */
.hero-build .hero .selection{--kf:sb-snap;--from:1.06;--a:.52;--b:.56;--ease:var(--ease-snap)}
.hero-build .hero .measure{--kf:sb-open;--a:.54;--b:.60;--ease:var(--ease-arrive)}

/* 4 Code, .60 to .80: the panel rises, then nine lines type at one speed, a character per step */
.hero-build .hero .o-code{--kf:sb-rise;--a:.60;--b:.64;--rise:2cqw;--ease:var(--ease-arrive)}
.hero-build .hero .code-lines text{--kf:sb-type;--ease:steps(var(--n),end)}
.hero-build .hero .code-nums text{--kf:sb-fade;--b:calc(var(--a) + .002)}
.hero-build .hero :is(.code-nums,.code-lines) text:nth-child(1){--a:.635}
.hero-build .hero :is(.code-nums,.code-lines) text:nth-child(2){--a:.661}
.hero-build .hero :is(.code-nums,.code-lines) text:nth-child(3){--a:.691}
.hero-build .hero :is(.code-nums,.code-lines) text:nth-child(4){--a:.700}
.hero-build .hero :is(.code-nums,.code-lines) text:nth-child(5){--a:.722}
.hero-build .hero :is(.code-nums,.code-lines) text:nth-child(6){--a:.746}
.hero-build .hero :is(.code-nums,.code-lines) text:nth-child(7){--a:.772}
.hero-build .hero :is(.code-nums,.code-lines) text:nth-child(8){--a:.780}
.hero-build .hero :is(.code-nums,.code-lines) text:nth-child(9){--a:.784}
.hero-build .hero .code-lines text:nth-child(1){--b:.659;--n:28} /* export function Overview() { */
.hero-build .hero .code-lines text:nth-child(2){--b:.689;--n:32} /* const stats = useStats("today"); */
.hero-build .hero .code-lines text:nth-child(3){--b:.698;--n:8}  /* return ( */
.hero-build .hero .code-lines text:nth-child(4){--b:.720;--n:23} /* <Page title="Overview"> */
.hero-build .hero .code-lines text:nth-child(5){--b:.744;--n:26} /* <StatGrid items={stats} /> */
.hero-build .hero .code-lines text:nth-child(6){--b:.770;--n:28} /* <ActivityChart range="7d" /> */
.hero-build .hero .code-lines text:nth-child(7){--b:.778;--n:7}  /* </Page> */
.hero-build .hero .code-lines text:nth-child(8){--b:.782;--n:2}  /* ); */
.hero-build .hero .code-lines text:nth-child(9){--b:.785;--n:1}  /* } */

/* 5 Build, .80 to .90: "Build passed 38 s", then the device frames close around the screens */
.hero-build .hero .code-check{--kf:sb-draw}
.hero-build .hero .code-build .code-check{--a:.800;--b:.812}
.hero-build .hero .code-build text:nth-of-type(1){--kf:sb-type;--a:.806;--b:.826;--ease:steps(12,end)} /* Build passed */
.hero-build .hero .code-build text:nth-of-type(2){--kf:sb-type;--a:.828;--b:.832;--ease:steps(4,end)}  /* 38 s */
.hero-build .hero .code-build text:nth-of-type(3){--kf:sb-fade;--a:.832;--b:.836}                      /* 10:24 */
.hero-build .hero .laptop__frame{--kf:sb-close;--a:.83;--b:.88;--ease:var(--ease-snap)}
.hero-build .hero .phone__frame{--kf:sb-close;--a:.84;--b:.89;--ease:var(--ease-snap)}

/* 6 Live, .90 to 1: the last code line, the 04 Live tag, then the deploy card */
.hero-build .hero .code-live .code-check{--a:.900;--b:.912}
.hero-build .hero .code-live text{--kf:sb-type;--a:.906;--b:.940;--ease:steps(28,end)} /* Live on web, iOS and Android */
.hero-build .hero .tag--live{--kf:sb-pop;--a:.92;--b:.95;--ease:var(--ease-arrive);transform-origin:100% 100%}
.hero-build .hero .o-status{--kf:sb-rise;--a:.94;--b:.99;--rise:1.2cqw;--ease:var(--ease-arrive)}

/* Stage rail: the current step's bar fills across its stage (01 Wireframe to 04 Live) */
.hero-build .hero .stage-rail__item::before{--kf:sb-fill}
.hero-build .hero .stage-rail__item:nth-child(1)::before{--a:.10;--b:.35}
.hero-build .hero .stage-rail__item:nth-child(2)::before{--a:.35;--b:.60}
.hero-build .hero .stage-rail__item:nth-child(3)::before{--a:.60;--b:.90}
.hero-build .hero .stage-rail__item:nth-child(4)::before{--a:.90;--b:1}

/* ── Services ─────────────────────────────────────────────────────────── */
.service-after{
  display:flex;align-items:center;gap:16px;padding:24px 0 0;
  font-size:var(--fs-lede);line-height:1.45;letter-spacing:-.01em;color:var(--ink);
}
.service-after__icon{display:grid;place-items:center;flex:none;width:48px;height:48px;background:var(--lime);color:var(--ink)}
.service-after__icon svg{width:24px;height:24px}

/* ── Selected work ────────────────────────────────────────────────────── */
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:64px var(--gutter)}
.work-grid > .project-card{grid-column:span 4}
.work-grid > .project-card--feature{grid-column:span 6}
.work-more{
  grid-column:span 4;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  min-height:100%;padding:24px;border:1px solid var(--ink);background:var(--surface);
  transition:background-color var(--dur-2) linear;
}
.work-more:hover{background:var(--surface-hover,var(--paper))}
.work-more__title{font:400 var(--fs-h3)/1.1 var(--font-serif);letter-spacing:-.018em}
.work-more__title a::after{content:"";position:absolute;inset:0}
.work-more__title a:focus-visible{outline:none}
.work-more__title a:focus-visible::after{outline:2px solid var(--focus);outline-offset:4px}
.work-more__list{display:grid;gap:0}
.work-more__list li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.35;color:var(--ink-2)}
.work-more__list li span:last-child{font:500 var(--fs-micro)/20px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.work-more__go{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 16px/1.3 var(--font-sans)}
.work-more__go svg{width:20px;height:20px;transition:transform 320ms var(--ease-arrive)}
.work-more:hover .work-more__go svg{transform:translateX(4px)}
@media (max-width:1099px){
  .work-grid{gap:56px var(--gutter)}
  .work-grid > .project-card,.work-grid > .project-card--feature,.work-more{grid-column:span 6}
}
@media (max-width:699px){
  .work-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .work-grid > .project-card,.work-grid > .project-card--feature,.work-more{grid-column:1 / -1}
}

/* ── Process ──────────────────────────────────────────────────────────── */
.process-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1099px){ .process-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px} }
@media (max-width:699px){ .process-steps{grid-template-columns:minmax(0,1fr);row-gap:36px} }

/* ── Products ─────────────────────────────────────────────────────────── */
.product-grid__more{position:relative;transition:background-color var(--dur-2) linear}
.product-grid__more:hover{background:var(--surface-hover,var(--paper))}
.product-grid__more .work-more__go svg{transition:transform 320ms var(--ease-arrive)}
.product-grid__more:hover .work-more__go svg{transform:translateX(4px)}

/* ── Clients ──────────────────────────────────────────────────────────── */
.clients-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin-top:28px}
.clients-foot p{max-width:60ch;color:var(--ink-2)}