/* ---- home/hero.css ---- */
/* ==========================================================================
   Home 01: hero. Headline row + three service cards (an accordion of silk
   windows: one wide and open, two narrow with vertical labels).
   Everything is scoped under .s-hero.
   ========================================================================== */

.s-hero {
  --hc-gap: 14px;
  --hc-collapsed: clamp(124px, 14.2vw, 205px);
  --hc-h: clamp(430px, calc(100svh - 400px), 480px);
  --hc-pad: clamp(24px, 2.3vw, 33px);
  --hc-pad-t: clamp(26px, 2.6vw, 36px);
  --hc-title: clamp(1.75rem, 0.9rem + 1.45vw, 2.25rem);
  --hc-open-w: calc(min(var(--container), 100vw - var(--gutter) * 2) - var(--hc-collapsed) * 2 - var(--hc-gap) * 2);
  --hc-open-h: 540px;
  --hc-bar: 84px;
  position: relative;
  /* no bottom padding: the next section's own .section padding sets the gap below the cards */
  padding: clamp(24px, 2.6vw, 40px) 0 0;
}

/* ---------- Headline row ---------- */
.s-hero .hero__top { display: grid; gap: 28px; margin-bottom: clamp(36px, 4vw, 56px); }
.s-hero .hero__eyebrow { margin-bottom: clamp(18px, 1.9vw, 26px); }
.s-hero .hero__title { max-width: 16em; }
.s-hero .hero__title .mark { z-index: 0; }
.s-hero .hero__title .mark .squiggle { z-index: -1; }
.s-hero .hero__br-m { display: none; }
.s-hero .hero__w { display: inline-block; }

.s-hero .hero__aside { display: grid; gap: 24px; justify-items: start; }
.s-hero .hero__lead {
  max-width: 30em;
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.0625rem); line-height: 1.5; letter-spacing: -0.006em;
  color: rgba(20, 20, 20, 0.8);
  text-wrap: pretty;
}

/* Hero CTA: taller pill, disc drawn as a stadium like the reference */
.s-hero .hero__cta { --btn-h: 62px; padding: 0 4px 0 28px; gap: 44px; font-size: 1.0625rem; }
.s-hero .hero__cta .btn__disc { width: 74px; height: 54px; border-radius: var(--r-pill); }
.s-hero .hero__cta .btn__disc svg + svg { transform: translateX(-300%); }
.s-hero .hero__cta:hover .btn__disc svg:first-child { transform: translateX(300%); }
.s-hero .hero__cta:hover .btn__disc svg + svg { transform: none; }

@media (min-width: 700px) and (max-width: 1199.98px) {
  .s-hero .hero__aside { grid-template-columns: minmax(0, 34em) auto; align-items: end; justify-content: space-between; column-gap: 48px; width: 100%; }
}
@media (min-width: 1200px) {
  .s-hero .hero__lead { font-size: 1rem; line-height: 1.52; }
  .s-hero .hero__top {
    grid-template-columns: minmax(0, 1fr) clamp(360px, 32.5vw, 468px);
    grid-template-areas: "intro aside";
    column-gap: 48px; align-items: end;
  }
  .s-hero .hero__intro { grid-area: intro; }
  .s-hero .hero__aside { grid-area: aside; gap: 26px; padding-bottom: 4px; }
}
@media (max-width: 599.98px) {
  .s-hero .hero__br-m { display: inline; }
  .s-hero .hero__br-d { display: none; }
  .s-hero .hero__top { gap: 22px; margin-bottom: 32px; }
  .s-hero .hero__cta { --btn-h: 58px; gap: 32px; }
  .s-hero .hero__cta .btn__disc { width: 66px; height: 50px; }
}
/* narrow phones (360px): one step down keeps the lead to four lines, so more of the first card shows */
@media (max-width: 374.98px) {
  .s-hero .hero__lead { font-size: 0.9375rem; }
}

/* ---------- Cards ---------- */
.s-hero .hero__cards { position: relative; display: flex; gap: var(--hc-gap); height: var(--hc-h); }
.s-hero .hc {
  position: relative; flex: 0 0 var(--hc-collapsed); min-width: 0;
  border-radius: var(--r-xl); color: var(--white);
  -webkit-tap-highlight-color: transparent;
}
.s-hero .hc.is-active { flex: 1 1 0; }

/* material window */
.s-hero .hc__clip {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit;
  transform: translateZ(0); background: var(--mist);
}
.s-hero .hc__bg {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: max(100%, var(--hc-open-w)); margin-left: calc(max(100%, var(--hc-open-w)) / -2);
  transform: scale(1.06); transform-origin: 50% 50%;
  will-change: transform;
}
.s-hero .hc__shade { position: absolute; inset: 0; pointer-events: none; }
/* open cards carry a directional shade behind the text; closed cards a soft warm tint behind the vertical label */
.s-hero .hc__clip::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.s-hero .hc:not(.is-active) .hc__shade { opacity: 0; }
.s-hero .hc:not(.is-active) .hc__clip::after { opacity: 1; }
.s-hero .hero__cards.is-live .hc__shade,
.s-hero .hero__cards.is-live .hc__clip::after { transition: opacity 0.8s var(--ease-out); }
.s-hero .hc--websites .hc__clip::after { background: linear-gradient(180deg, rgba(179, 70, 18, 0.07), rgba(98, 98, 95, 0.3)); }
.s-hero .hc--brand .hc__clip::after { background: linear-gradient(180deg, rgba(179, 70, 18, 0.06), rgba(179, 70, 18, 0.3) 50%, rgba(179, 70, 18, 0.24)); }
.s-hero .hc--social .hc__clip::after { background: linear-gradient(180deg, rgba(20, 20, 20, 0.02), rgba(20, 20, 20, 0.16)); }
.s-hero .hc--websites .hc__bg { background-position: 40% 50%; }
.s-hero .hc--websites .hc__shade {
  background:
    linear-gradient(104deg, rgba(20, 20, 20, 0.44) 0%, rgba(20, 20, 20, 0.2) 36%, rgba(20, 20, 20, 0.04) 64%, rgba(20, 20, 20, 0) 80%),
    linear-gradient(0deg, rgba(20, 20, 20, 0.14), rgba(20, 20, 20, 0) 45%);
}
.s-hero .hc--brand .hc__shade {
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(20, 20, 20, 0.34) 0%, rgba(20, 20, 20, 0.12) 50%, rgba(20, 20, 20, 0) 80%),
    linear-gradient(0deg, rgba(20, 20, 20, 0.1), rgba(20, 20, 20, 0) 40%);
}
.s-hero .hc--social .hc__shade {
  background:
    radial-gradient(100% 82% at 0% 0%, rgba(20, 20, 20, 0.4) 0%, rgba(20, 20, 20, 0.17) 55%, rgba(20, 20, 20, 0) 88%);
}
/* the pale highlight in this silk runs behind the end of the copy: a firmer halo keeps it readable */
.s-hero .hc--social .hc__desc { text-shadow: 0 1px 14px rgba(20, 20, 20, 0.28); }
.s-hero .hc--brand .w--tint { background: rgba(20, 20, 20, 0.08); }

/* the tab: a real button covering the card; its label is the card title */
.s-hero .hc__head { margin: 0; font: inherit; color: inherit; }
.s-hero .hc__tab {
  position: absolute; inset: 0; z-index: 2; display: block; width: 100%;
  border-radius: inherit; color: var(--white); text-align: left; cursor: pointer;
  overflow: hidden; /* a title mid-swing never pokes into the next card */
}
.s-hero .hc.is-active .hc__tab { pointer-events: none; cursor: default; }
.s-hero .hc__tab:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: var(--r-xl); }
.s-hero .hc__label {
  position: absolute; left: var(--hc-pad); top: var(--hc-pad-t);
  font-size: var(--hc-title); line-height: 1.1; font-weight: 400; letter-spacing: -0.018em;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
  white-space: nowrap; transform-origin: 50% 50%;
  text-shadow: 0 1px 20px rgba(20, 20, 20, 0.14);
}
.s-hero .hc:not(.is-active) .hc__label { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); text-shadow: 0 1px 22px rgba(20, 20, 20, 0.22); }
.s-hero .hc__plus { display: none; }

/* open content */
.s-hero .hc__panel { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.s-hero .hc:not(.is-active) .hc__panel { visibility: hidden; opacity: 0; }
/* the inner box is exactly the card (no padding): the mockups size against it in container units */
.s-hero .hc__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; container-type: size; }
.s-hero .hc__desc {
  position: relative; z-index: 2; max-width: 21.5em;
  margin: calc(var(--hc-pad-t) + var(--hc-title) * 1.1 + 14px) var(--hc-pad) 0;
  font-size: clamp(0.9375rem, 0.86rem + 0.2vw, 1.0625rem); line-height: 1.42; letter-spacing: -0.004em;
  color: rgba(255, 255, 255, 0.92); text-wrap: pretty;
  text-shadow: 0 1px 16px rgba(20, 20, 20, 0.12);
}

/* notch + arrow */
/* a 56px disc in a round cut with a 10px ring (knobs on the card: its mask cuts the ring);
   the progress ring hugs the disc's edge. Closed cards show no cut and no ring. */
.s-hero .hc { --notch-d: 56px; --notch-gap: 10px; }
.s-hero .hc:not(.is-active) { --notch-open: 0; }
.s-hero .hc:not(.is-active) .hc__notch { visibility: hidden; opacity: 0; }
.s-hero .hc__arrow:hover { background: #2B2B2B; }
.s-hero .hc__arrow svg + svg { transform: translateX(-220%); }
.s-hero .hc__arrow:hover svg:first-child { transform: translateX(220%); }
.s-hero .hc__arrow:hover svg + svg { transform: none; }
.s-hero .hc__ring { position: absolute; inset: 0; margin: auto; width: var(--notch-d); height: var(--notch-d); pointer-events: none; fill: none; opacity: 0; transition: opacity 0.5s var(--ease-out); }
.s-hero .hc__ring-track { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.75; }
.s-hero .hc__ring-bar { stroke: rgba(255, 255, 255, 0.92); stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.s-hero .hero__cards.is-auto .hc.is-active .hc__ring { opacity: 1; }

/* hover on a closed card: lift and brighten (enabled after the intro) */
.s-hero .hero__cards.is-live .hc { transition: transform 0.6s var(--ease-out); }
.s-hero .hero__cards.is-live .hc__bg { transition: filter 0.6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .s-hero .hero__cards.is-live .hc:not(.is-active):hover { transform: translateY(-6px); }
  .s-hero .hero__cards.is-live .hc:not(.is-active):hover .hc__bg { filter: brightness(1.08) saturate(1.06); }
}

/* ---------- Glass widgets ---------- */
.s-hero .hc__widgets {
  position: absolute; left: var(--hc-pad); bottom: var(--hc-pad); z-index: 3;
  display: flex; align-items: flex-end; gap: 1.07em;
  font-size: clamp(12px, 0.97vw, 14px); line-height: 1.3;
}
.s-hero .w {
  position: relative; width: 22.2em; height: 15.4em; padding: 1.15em;
  border-radius: 1.45em; overflow: hidden;
}
.s-hero .w--white {
  background: rgba(255, 255, 255, 0.94); color: var(--ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 14px 34px -14px rgba(20, 20, 20, 0.34);
}
.s-hero .w--tint {
  background: rgba(255, 255, 255, 0.16); color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3) brightness(0.9); backdrop-filter: blur(22px) saturate(1.3) brightness(0.9);
  text-shadow: 0 1px 10px rgba(20, 20, 20, 0.12);
  box-shadow: 0 14px 34px -16px rgba(20, 20, 20, 0.3);
}
.s-hero .w__head { display: flex; align-items: center; gap: 0.6em; height: 2.3em; }
.s-hero .w__icon {
  display: grid; place-items: center; flex: none; width: 2.3em; height: 2.3em; border-radius: 50%;
  background: rgba(20, 20, 20, 0.06);
}
.s-hero .w--tint .w__icon { background: rgba(255, 255, 255, 0.2); }
.s-hero .w__icon .i { width: 1.15em; height: 1.15em; }
.s-hero .w__title { font-size: 0.9em; font-weight: 500; letter-spacing: -0.01em; }

/* Websites: icon grid (mirrors the reference's quick-action grid) */
.s-hero .w-grid {
  width: auto; height: auto; padding: 1.5em;
  display: grid; grid-template-columns: repeat(3, 5.7em); grid-auto-rows: 5.7em; gap: 1.07em;
}
.s-hero .w-tile {
  position: relative; display: grid; place-items: center; align-content: center;
  border-radius: 1.45em; background: rgba(20, 20, 20, 0.065); color: var(--ink);
}
.s-hero .w-tile .i { width: 1.85em; height: 1.85em; stroke-width: 1.6; }
.s-hero .w-tile--disc, .s-hero .w-tile--round { border-radius: 50%; }
.s-hero .w-tile--disc { background: var(--ember); color: var(--white); box-shadow: 0 6px 14px -8px rgba(238, 106, 44, 0.55); }
.s-hero .w-tile--disc .i { width: 2em; height: 2em; stroke-width: 1.5; }
.s-hero .w-tile--price small { font-size: 0.72em; color: var(--slate); line-height: 1; }
.s-hero .w-tile--price b { font-size: 1.65em; font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.s-hero .w-dot { position: absolute; top: 0.8em; right: 0.8em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--ember); }
.s-hero .w-tile--thumbs { grid-template-columns: repeat(2, 2.05em); grid-auto-rows: 2.05em; gap: 0.3em; }
.s-hero .w-tile--thumbs i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 0.14em var(--white); }

/* Brand: package checklist (slimmer than the other widgets, so the identity beside it gets the room) */
.s-hero .w-list { width: 18.5em; }
.s-hero .w-list__head {
  display: flex; align-items: center; justify-content: space-between; height: 2.3em;
  font-size: 0.9em; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.s-hero .w-list__head b { font-weight: 600; }
.s-hero .w-list__rows { list-style: none; margin: 0.2em 0 0; padding: 0; }
.s-hero .w-list__rows li {
  display: flex; align-items: center; gap: 0.65em; height: 2.3em;
  font-size: 0.86em; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.s-hero .w-list__rows li:last-child { border-bottom: 0; }
.s-hero .w-tick { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--white); color: var(--ember-ink); }
.s-hero .w-tick .i { width: 0.95em; height: 0.95em; stroke-width: 2.6; }

/* Social: weekly ring */
.s-hero .w-ring__body { display: flex; align-items: center; gap: 1.25em; margin-top: 0.7em; padding-left: 0.2em; }
.s-hero .w-ring__dial { position: relative; flex: none; width: 9em; height: 9em; }
.s-hero .w-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.s-hero .w-ring__svg circle { fill: none; stroke-width: 10; }
.s-hero .w-ring__track { stroke: rgba(255, 255, 255, 0.2); }
.s-hero .w-ring__arc { stroke: var(--ember); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0.25; }
.s-hero .w-ring__center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1.05; }
.s-hero .w-ring__center b { font-size: 1.6em; font-weight: 600; letter-spacing: -0.035em; }
.s-hero .w-ring__center small { font-size: 0.68em; opacity: 0.82; margin-top: 0.25em; }
.s-hero .w-ring__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 1em; }
.s-hero .w-ring__legend li { display: grid; grid-template-columns: 0.75em auto; column-gap: 0.6em; align-items: center; line-height: 1.2; }
.s-hero .w-ring__legend i { width: 0.75em; height: 0.75em; border-radius: 50%; box-shadow: inset 0 0 0 0.14em rgba(255, 255, 255, 0.75); }
.s-hero .w-ring__legend .is-done i { background: var(--ember); box-shadow: none; }
.s-hero .w-ring__legend b { font-size: 0.92em; font-weight: 600; }
.s-hero .w-ring__legend small { grid-column: 2; font-size: 0.72em; opacity: 0.8; }

/* ---------- Demo mockups: transparent renders sitting straight on the silk ----------
   Sized against the open card: .hc__inner is a size container (hero.js holds it at its final
   size during a switch, so nothing reflows mid-move). Ratios below are read off the renders:
   rudo 1062x1600, phone spans x 19-82%, top at 3.8%; kiki 1600x1062 (h = 0.664 w), objects end
   8.6% above its bottom edge, the bag 9% from its right; sadza 1194x1600 (h = 1.34 w), phone
   spans x 21-78%, y 2-97%. The phones' right edges line up at 15.4cqw from the card edge. */
.s-hero .hc__shot { position: absolute; z-index: 1; width: var(--shot-w); }
.s-hero .hc__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(20, 20, 20, 0.2)); }
.s-hero .hc__demo {
  position: absolute; z-index: 1; height: 28px; padding: 0 12px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: 0 8px 20px -10px rgba(20, 20, 20, 0.45);
}

/* Websites: the catalogue phone, bleeding off the bottom of the card */
.s-hero .hc__shot--rudo {
  --shot-w: min(46.5cqw, 400px);
  top: calc(13.2cqh - var(--shot-w) * 0.056);
  right: calc(15.4cqw - var(--shot-w) * 0.18);
}
.s-hero .hc__shot--rudo .hc__demo { left: 85%; top: 13%; }

/* Brand: the identity still life, bottom-aligned with the checklist beside it. On the narrower
   open cards (about 1120-1260px) the last term shrinks it so the business cards stay clear of
   the checklist (cards start 7.6% in from the render's left edge) */
.s-hero .hc__shot--kiki {
  --shot-w: min(60cqw, 112cqh, 120cqw - 436px);
  right: calc(92px - var(--shot-w) * 0.09);
  bottom: calc(var(--hc-pad) - var(--shot-w) * 0.057);
}
.s-hero .hc__shot--kiki .hc__demo { left: 9%; top: 30%; }

/* Social: the whole post phone, top to bottom of the card */
.s-hero .hc__shot--sadza {
  --shot-w: calc(98cqh * 0.746);
  top: 1cqh;
  right: calc(15.4cqw - var(--shot-w) * 0.224);
}
.s-hero .hc__shot--sadza .hc__demo { left: 81%; top: 11%; }

/* ---------- Intro: hidden only while JS boots (never without JS) ---------- */
.js.is-loading:not(.is-qa):not(.is-reduced) .s-hero .hero__eyebrow,
.js.is-loading:not(.is-qa):not(.is-reduced) .s-hero .hero__title,
.js.is-loading:not(.is-qa):not(.is-reduced) .s-hero .hero__lead,
.js.is-loading:not(.is-qa):not(.is-reduced) .s-hero .hero__cta,
.js.is-loading:not(.is-qa):not(.is-reduced) .s-hero .hc {
  opacity: 0;
  animation: hero-failsafe 0.6s ease 3s forwards;
}
@keyframes hero-failsafe { to { opacity: 1; } }

/* ---------- Mid desktop: tighter widgets ---------- */
@media (min-width: 960px) and (max-width: 1279.98px) {
  .s-hero .hc__widgets { font-size: 12px; gap: 12px; }
  .s-hero .hc__desc { max-width: 19.5em; }
}
@media (min-width: 960px) and (max-width: 1119.98px) {
  .s-hero .hc--brand .w-list, .s-hero .hc--social .w-ring { display: none; }
  /* the open card is narrow here: a shorter measure keeps the copy clear of the mockups,
     and with the checklist gone the identity takes more of the card */
  .s-hero .hc__desc { max-width: 16em; }
  .s-hero .hc__shot--kiki { --shot-w: min(72cqw, 112cqh); }
}

/* ---------- Stacked accordion (below 960px) ---------- */
@media (max-width: 959.98px) {
  .s-hero {
    --hc-gap: 10px;
    --hc-pad: 22px;
    --hc-pad-t: 26px;
    --hc-title: 1.75rem;
    --hc-open-h: clamp(500px, 64vh, 540px);
  }
  /* hero.js keeps a tapped card in place while the heights move; the browser's own scroll anchoring
     would correct the scroll a second time (it threw the page to the opening card, then dragged it back) */
  .s-hero .hero__cards { flex-direction: column; height: auto; overflow-anchor: none; }
  .s-hero .hc { flex: none; height: var(--hc-bar); }
  .s-hero .hc.is-active { flex: none; height: var(--hc-open-h); }
  .s-hero .hc__bg {
    left: 0; right: 0; width: auto; margin-left: 0;
    top: 50%; bottom: auto; height: var(--hc-open-h); margin-top: calc(var(--hc-open-h) / -2);
  }
  .s-hero .hc__label { line-height: 1.15; }
  .s-hero .hc:not(.is-active) .hc__label { left: var(--hc-pad); top: 50%; transform: translateY(-50%); }
  /* the plus: a white disc like the Demo chips and the dock, so it reads as a button on every silk.
     It dips under the finger, then turns and fades as the arrow takes its corner. It sits on the bar's
     centre line, which is also the open title's, so mid-switch it stays beside the title of a card that
     is still tall instead of floating half-way down it. */
  .s-hero .hc__plus {
    display: grid; place-items: center; position: absolute; right: 18px; top: calc(var(--hc-bar) / 2); margin-top: -21px;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.94); color: var(--ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 18px -10px rgba(20, 20, 20, 0.45);
    opacity: 0; transform: rotate(90deg) scale(0.7);
  }
  .s-hero .hc__plus .i { width: 18px; height: 18px; stroke-width: 2; }
  .s-hero .hc:not(.is-active) .hc__plus { opacity: 1; transform: none; }
  .s-hero .hero__cards.is-live .hc__plus { transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out); }
  .s-hero .hero__cards.is-live .hc:not(.is-active) .hc__plus { transition-delay: 0.35s; }
  .s-hero .hc:not(.is-active) .hc__tab:active .hc__plus { transform: scale(0.9); transition-delay: 0s; }
  /* top shades firm enough for white copy on the two pale silks (about 3 to 5:1 behind every line at 360 to 768).
     The brand shade is ember-ink first, so the top of the card deepens to burnt orange instead of going olive. */
  .s-hero .hc--websites .hc__shade {
    background:
      linear-gradient(180deg, rgba(20, 20, 20, 0.48) 0%, rgba(20, 20, 20, 0.32) 30%, rgba(20, 20, 20, 0.1) 50%, rgba(20, 20, 20, 0) 66%),
      linear-gradient(0deg, rgba(20, 20, 20, 0.16), rgba(20, 20, 20, 0) 40%);
  }
  .s-hero .hc--brand .hc__shade {
    background:
      linear-gradient(180deg, rgba(179, 70, 18, 0.5) 0%, rgba(179, 70, 18, 0.3) 32%, rgba(179, 70, 18, 0) 58%),
      linear-gradient(180deg, rgba(20, 20, 20, 0.22) 0%, rgba(20, 20, 20, 0.12) 30%, rgba(20, 20, 20, 0) 50%);
  }
  .s-hero .hc--websites .hc__desc, .s-hero .hc--brand .hc__desc { text-shadow: 0 1px 14px rgba(20, 20, 20, 0.3); }
  /* closed bars: the tint sits behind the label on the left */
  .s-hero .hc--websites .hc__clip::after { background: linear-gradient(90deg, rgba(98, 98, 95, 0.4), rgba(98, 98, 95, 0.14) 75%); }
  .s-hero .hc--brand .hc__clip::after { background: linear-gradient(90deg, rgba(179, 70, 18, 0.3), rgba(179, 70, 18, 0.06) 75%); }
  .s-hero .hc--social .hc__clip::after { background: linear-gradient(90deg, rgba(20, 20, 20, 0.16), rgba(20, 20, 20, 0) 75%); }
  .s-hero .hc__desc { margin-top: calc(var(--hc-pad-t) + var(--hc-title) * 1.15 + 12px); }
  .s-hero .hc__desc { max-width: 26em; }
  .s-hero .hc__widgets { font-size: 13px; left: 18px; bottom: 18px; }
  /* the arrow's round cut moves to the top-right corner, where the closed bars show their plus */
  .s-hero .hc { --notch-d: 48px; --notch-gap: 8px; --notch-top: 1; }
  .s-hero .hc__notch { top: calc(var(--notch-in) - var(--notch-R)); bottom: auto; }
  .s-hero .hc__shot--rudo { --shot-w: 376px; top: auto; bottom: -170px; right: calc(clamp(96px, 16vw, 150px) - 68px); }
  /* the arrow has moved to the top corner, so the bag can sit close to the bottom-right edge */
  .s-hero .hc__shot--kiki { --shot-w: min(480px, 66cqw); right: calc(20px - var(--shot-w) * 0.09); }
  /* the whole post phone stands clear of the arrow's cut (88px) with the copy beside it
     (the phone is 41.7cqh wide) */
  .s-hero .hc__shot--sadza { right: calc(88px - var(--shot-w) * 0.224); }
  .s-hero .hc__shot--sadza .hc__demo { top: 19%; }
  .s-hero .hc--social .hc__desc { max-width: min(26em, calc(100cqw - 41.7cqh - 88px - var(--hc-pad) - 28px)); }
}
/* below 720px the checklist and the weekly ring would crowd the mockups,
   and the post phone rises from the bottom edge instead, like the catalogue phone */
@media (max-width: 719.98px) {
  .s-hero .hc--brand .w-list, .s-hero .hc--social .w-ring { display: none; }
  .s-hero .hc--social .hc__desc { max-width: 26em; }
  .s-hero .hc__shot--kiki { --shot-w: min(480px, 84cqw); }
  .s-hero .hc__shot--sadza { --shot-w: 340px; top: auto; bottom: -132px; right: auto; left: 50%; margin-left: -167px; }
  .s-hero .hc__shot--sadza .hc__demo { left: 23%; top: -36px; }
}
@media (max-width: 599.98px) {
  .s-hero .hc__widgets { font-size: 12.5px; left: 14px; right: 14px; bottom: 14px; }
  .s-hero .hc__widgets .w { width: 100%; }
  /* Websites: the icon grid becomes a glass dock in front of the phone */
  .s-hero .w-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0.6em; padding: 0.9em; }
  .s-hero .w-grid .w-tile { aspect-ratio: 1; }
  .s-hero .w-tile--thumbs { grid-template-columns: repeat(2, 1.55em); grid-auto-rows: 1.55em; gap: 0.22em; }
  .s-hero .w-tile--price b { font-size: 1.35em; }
  .s-hero .w-dot { top: 0.5em; right: 0.5em; width: 0.4em; height: 0.4em; } /* clear of "from" on the smaller tiles */
  .s-hero .w-tile .i { width: 1.6em; height: 1.6em; }
  /* the phones follow the description in flow, so copy that runs to an extra line (narrow phones) or a
     shorter card (short screens, where the card is 500px) can never put the Demo chip on the text.
     Taller cards (up to 540px) give them a little more air above. */
  .s-hero .hc__shot--rudo, .s-hero .hc__shot--sadza {
    position: relative; top: auto; right: auto; bottom: auto; left: auto;
    margin: calc(60px + (100cqh - 500px) / 2) 0 0 calc(50% - 167px);
  }
  .s-hero .hc__shot--rudo { --shot-w: 331px; }
  /* the render's transparent sides may run past the card edges; the objects stay inside */
  .s-hero .hc__shot--kiki { --shot-w: calc(100cqw + 18px); right: auto; left: -9px; bottom: calc(14px - var(--shot-w) * 0.057); }
  .s-hero .hc__shot--kiki .hc__demo { left: 10%; top: 27%; }
  /* no room beside the catalogue phone at this width: the chip sits above its top corner */
  .s-hero .hc__shot--rudo .hc__demo { left: 20%; top: -38px; }
  /* the silks' pale highlights go behind the mockups instead of the copy: the websites and social crops
     move right, and the brand silk is drawn a little larger, so its deep orange fills the top and the
     yellow wave sweeps behind the bag */
  .s-hero .hc--websites .hc__bg { background-position: 80% 50%; }
  .s-hero .hc--brand .hc__bg { background-size: auto 135%; background-position: 50% 4%; }
  .s-hero .hc--social .hc__bg { background-position: 85% 50%; }
  .s-hero .hc--social .hc__shade {
    background:
      linear-gradient(180deg, rgba(20, 20, 20, 0.3) 0%, rgba(20, 20, 20, 0.12) 18%, rgba(20, 20, 20, 0) 32%),
      radial-gradient(100% 82% at 0% 0%, rgba(20, 20, 20, 0.4) 0%, rgba(20, 20, 20, 0.17) 55%, rgba(20, 20, 20, 0) 88%);
  }
  /* Brand: three rows of the package checklist fill the band between the copy and the still life,
     in white glass like the Websites dock, in flow under the copy so a longer description pushes it down */
  .s-hero .hc--brand .hc__widgets { position: relative; left: auto; right: auto; bottom: auto; margin: 16px var(--hc-pad) 0; }
  .s-hero .hc--brand .hc__widgets .w-list {
    display: block; width: min(100%, 14em); height: auto; padding: 0.85em 1.05em 0.45em;
    background: rgba(255, 255, 255, 0.94); color: var(--ink); border: 0; text-shadow: none;
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 14px 34px -14px rgba(20, 20, 20, 0.34);
  }
  .s-hero .hc--brand .w-list__head { border-bottom-color: rgba(20, 20, 20, 0.1); }
  .s-hero .hc--brand .w-list__head b { color: var(--ember-ink); }
  .s-hero .hc--brand .w-list__rows li { border-bottom-color: rgba(20, 20, 20, 0.07); }
  .s-hero .hc--brand .w-list__rows li:nth-child(3) { border-bottom: 0; }
  .s-hero .hc--brand .w-list__rows li:nth-child(n+4) { display: none; }
  .s-hero .hc--brand .w-tick { background: var(--ember); color: var(--white); }
}


/* ---- home/brand.css ---- */
/* ==========================================================================
   02 BRAND — logo tile + vertical deck of Forge business cards
   Reference: two rounded windows side by side; the logo sharpens in on the left,
   a sage tile on the right steps a stack of cards upward one at a time.
   ========================================================================== */

.s-brand .brand-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
}
@media (min-width: 720px) {
  .s-brand .brand-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.s-brand .brand-tile {
  position: relative;
  aspect-ratio: 1 / 0.92;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0); /* keeps the rounded clip crisp while children move */
}

/* Left: quiet grey-white window with the logo */
.s-brand .brand-tile--logo {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, var(--mist) 0%, var(--fog) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.s-brand .brand-logo {
  width: 55%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Right: sage window. Sage = patina washed over stone, so it stays inside the palette. */
.s-brand .brand-tile--deck {
  container-type: inline-size;
  background:
    radial-gradient(70% 52% at 50% 50%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(140% 120% at 50% 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.1) 100%),
    linear-gradient(rgba(92, 138, 87, 0.34), rgba(92, 138, 87, 0.34)),
    var(--stone);
}
.s-brand .brand-deck { position: absolute; inset: 0; }

/* A business card. Position comes from --p (slot, 0 = centre) and --s (scale); JS takes over when motion runs. */
.s-brand .brand-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  width: 80cqw;
  aspect-ratio: 1.6;
  border-radius: 14px;
  border-radius: 2.6cqw;
  overflow: hidden;
  color: var(--white);
  font-size: 15px;
  font-size: 3.5cqw;
  transform: translate(-50%, -50%) translateY(calc(var(--p, 3) * 106%)) scale(var(--s, 0.8));
  z-index: 1;
  box-shadow:
    0 30px 60px -22px rgba(22, 36, 20, 0.55),
    0 12px 24px -12px rgba(22, 36, 20, 0.35);
  will-change: transform;
  backface-visibility: hidden;
}
.s-brand .brand-card[style*="--p:0"] { z-index: 3; }
.s-brand .brand-card[style*="--p:1"], .s-brand .brand-card[style*="--p:-1"] { z-index: 2; }
/* glass edge and a soft top-left sheen, like a laminated card */
.s-brand .brand-card::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.s-brand .brand-card.is-ink { color: var(--ink); }
.s-brand .brand-card.is-ink::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* Chip-like detail, top left: frosted and engraved */
.s-brand .brand-card__chip {
  position: absolute; left: 7.5%; top: 13%;
  width: 12%; aspect-ratio: 4 / 3;
  border-radius: 22%;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 55%, rgba(255, 255, 255, 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.s-brand .brand-card__chip svg {
  width: 100%; height: 100%;
  fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.s-brand .brand-card.is-ink .brand-card__chip svg { stroke: rgba(20, 20, 20, 0.28); }

/* Mark + line, bottom right (the reference lockup position) */
.s-brand .brand-card__mark {
  position: absolute; right: 6.5%; bottom: 11%;
  display: inline-flex; align-items: center; gap: 0.42em;
  font-weight: 500; letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.12);
}
.s-brand .brand-card.is-ink .brand-card__mark { text-shadow: none; }
.s-brand .brand-card__mark svg { width: 1.08em; height: 1.08em; flex: none; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.1)); }
.s-brand .brand-card.is-ink .brand-card__mark svg { filter: none; }

/* ---------- Caption row ---------- */
.s-brand .brand-cap {
  display: grid;
  gap: 24px;
  margin-top: clamp(28px, 3.4vw, 48px);
}
@media (min-width: 960px) {
  .s-brand .brand-cap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 24px);
    align-items: end;
  }
}
.s-brand .brand-cap__text { display: grid; gap: 14px; justify-items: start; }
.s-brand .brand-cap__title {
  max-width: 24ch;
  font-size: clamp(1.25rem, 1.02rem + 0.62vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.s-brand .brand-cap__aside {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
@media (min-width: 960px) { .s-brand .brand-cap__aside { padding-top: 0; border-top: 0; min-height: 46px; } }
.s-brand .brand-cap__now {
  display: inline-flex; align-items: baseline; gap: 14px;
  font-size: var(--fs-small); color: var(--slate);
}
.s-brand .brand-cap__count { color: var(--stone); letter-spacing: 0.02em; }
.s-brand .brand-cap__count b { font-weight: 500; color: var(--ink); }
.s-brand .brand-cap__label { color: var(--ink); }
.s-brand .brand-cap__actions { display: inline-flex; align-items: center; gap: 22px; }
.s-brand .brand-cap__link { font-size: 0.9375rem; }

/* Pause / play */
.s-brand .brand-cap__toggle { width: 44px; height: 44px; }
.s-brand .brand-cap__toggle .i { width: 16px; height: 16px; stroke-width: 2; }
.s-brand .brand-cap__toggle .i-play { display: none; fill: currentColor; stroke-width: 1.4; }
.s-brand .brand-cap__toggle.is-paused .i-pause { display: none; }
.s-brand .brand-cap__toggle.is-paused .i-play { display: block; }

/* ---- home/statement.css ---- */
/* ==========================================================================
   03 STATEMENT — a big centred line over the dotted wave field, with small
   floating interface cards drifting around it at different depths.
   ========================================================================== */

.s-statement {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--section) * 0.62);
}
.s-statement .stmt-field {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.s-statement > .container { position: relative; z-index: 1; }

/* Stage: --u is the floating-card unit (16px at 1440) so the cards scale with the layout. */
.s-statement .stmt-stage {
  --u: clamp(10px, 2.72vw, 14px);
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "tiles tiles" "title title" "chart discs";
  justify-content: center;
  align-items: center;
  gap: clamp(32px, 7vw, 48px) 16px;
}

.s-statement .stmt-title {
  grid-area: title;
  position: relative; z-index: 2;
  max-width: 17ch;
  margin-inline: auto;
  text-align: center;
  line-height: 1.1;
}
.s-statement .stmt-line { display: inline; }

.s-statement .stmt-float { position: relative; z-index: 1; font-size: var(--u); }
.s-statement .stmt-float--tiles { grid-area: tiles; justify-self: center; display: flex; gap: 1.35em; }
.s-statement .stmt-float--chart { grid-area: chart; }
.s-statement .stmt-float--discs { grid-area: discs; align-self: end; margin-bottom: 1.4em; }

@media (min-width: 1024px) {
  .s-statement .stmt-stage {
    --u: clamp(11px, 1.12vw, 16px);
    display: block;
    padding-top: calc(var(--u) * 12);
    padding-bottom: calc(var(--u) * 12.4);
  }
  .s-statement .stmt-title { max-width: none; }
  .s-statement .stmt-line { display: block; }
  .s-statement .stmt-float { position: absolute; }
  .s-statement .stmt-float--tiles { top: 0; right: 3.5%; }
  .s-statement .stmt-float--chart { left: 3.5%; bottom: 0; }
  .s-statement .stmt-float--discs { right: 14%; bottom: 1.3em; margin: 0; }
}

/* ---------- Tile cards (reference "Popular payments" / "Bank of recipient") ---------- */
.s-statement .stmt-tile {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 15.2em; height: 10.2em; padding: 1.15em 1.2em 1.2em;
  border-radius: 1.6em;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 20px 44px -22px rgba(20, 20, 20, 0.28);
}
.s-statement .stmt-tile__icon {
  display: grid; place-items: center;
  width: 4em; height: 4em; border-radius: 1.05em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px -8px rgba(20, 20, 20, 0.35);
}
.s-statement .stmt-tile__icon svg { width: 1.95em; height: 1.95em; }
.s-statement .stmt-tile__icon--ember  { background: var(--ember); }
.s-statement .stmt-tile__icon--patina { background: var(--patina); }
.s-statement .stmt-tile__icon .g-fill { fill: var(--white); }
.s-statement .stmt-tile__icon .i { width: 1.75em; height: 1.75em; color: var(--white); }
.s-statement .stmt-tile__icon--ember .g-cut  { fill: var(--ember); }
.s-statement .stmt-tile__icon--patina .g-cut { fill: var(--patina); }
.s-statement .stmt-tile__label {
  font-size: 1.08em; line-height: 1.2; letter-spacing: -0.012em; color: var(--ink); white-space: nowrap;
}

/* ---------- Chart card (reference "Total savings") ---------- */
.s-statement .stmt-chart {
  width: 15.8em;
  padding: 1.2em 1.2em 1.1em;
  border-radius: 1.6em;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 24px 50px -24px rgba(20, 20, 20, 0.3);
}
.s-statement .stmt-chart__title { font-size: 1.05em; line-height: 1.2; color: var(--slate); letter-spacing: -0.01em; }
.s-statement .stmt-chart__figure {
  display: inline-flex; align-items: center; margin-top: 0.6em;
  height: 1.95em; padding: 0 0.75em; border-radius: var(--r-pill);
  background: var(--mist);
  font-size: 0.875em; font-weight: 500; color: var(--ink); letter-spacing: -0.01em;
}
.s-statement .stmt-chart__plot { width: 100%; height: auto; margin-top: 0.5em; overflow: visible; }
.s-statement .stmt-chart__grid { fill: none; stroke: rgba(20, 20, 20, 0.07); stroke-width: 1; }
.s-statement .stmt-chart__line {
  fill: none; stroke: var(--patina); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.s-statement .stmt-chart__cursor { fill: none; stroke: var(--patina); stroke-width: 1.2; opacity: 0.7; }
.s-statement .stmt-chart__dot { fill: var(--patina); stroke: var(--white); stroke-width: 2; }
.s-statement .stmt-chart__status {
  display: flex; align-items: center; gap: 0.7em; margin-top: 0.4em;
}
.s-statement .stmt-chart__ok {
  display: grid; place-items: center; flex: none;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  background: var(--patina-soft); color: var(--patina-ink);
}
.s-statement .stmt-chart__ok .i { width: 1.05em; height: 1.05em; stroke-width: 2.4; }
.s-statement .stmt-chart__status b { display: block; font-size: 1em; font-weight: 500; line-height: 1.2; letter-spacing: -0.012em; color: var(--ink); }
.s-statement .stmt-chart__status small { display: block; margin-top: 0.2em; font-size: 0.7em; line-height: 1.2; color: var(--slate); letter-spacing: 0.01em; }

/* ---------- Discs (reference star / hanger / utensils) ---------- */
.s-statement .stmt-float--discs { display: flex; }
.s-statement .stmt-disc {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: 4.7em; height: 4.7em; border-radius: 50%;
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 28px -14px rgba(20, 20, 20, 0.4);
}
.s-statement .stmt-disc + .stmt-disc { margin-left: -0.5em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), -0.45em 0 0.9em -0.35em rgba(20, 20, 20, 0.32), 0 14px 28px -14px rgba(20, 20, 20, 0.4); }
.s-statement .stmt-disc--temper { background: var(--temper); z-index: 1; }
.s-statement .stmt-disc--ember  { background: var(--ember); z-index: 2; }
.s-statement .stmt-disc--patina { background: var(--patina); z-index: 3; }
.s-statement .stmt-disc svg { width: 1.9em; height: 1.9em; }
.s-statement .stmt-disc .i-hanger { stroke-width: 2.3; }
.s-statement .stmt-disc--patina svg { fill: currentColor; }

/* ---- home/work.css ---- */
/* ==========================================================================
   04 WORK - "Demo sites": a mosaic of phone columns on a silver silk panel.
   Reference: columns of phone mockups on a light grey silk ground, offset
   vertically, gliding past at different speeds as the page scrolls.
   Every screen is a small, designed site built in HTML/CSS (em units, so it
   scales with --phone-w). Mobile: a horizontal scroll-snap row.
   ========================================================================== */

.s-work { --w-gap: clamp(18px, 2.8vw, 44px); }
.s-work .w-head { margin-bottom: clamp(40px, 5vw, 64px); }
.s-work .w-lead { max-width: 620px; text-wrap: balance; }

/* ---------- Stage ---------- */
.s-work .w-stage {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-xl);
  background: #E6E6E3 url("../../img/silk/banner-silver.webp") center / cover no-repeat;
  /* the stage draws the banner up to 1800x900, so its 1x copy is 1800 wide */
  background-image: image-set(url("../../img/silk/banner-silver-1800.webp") 1x, url("../../img/silk/banner-silver.webp") 2x);
  container-type: inline-size;
  transform: translateZ(0);
}
/* soft wash so the phones, not the silk, carry the eye */
.s-work .w-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(246, 246, 243, 0) 40%, rgba(236, 236, 233, 0.5) 100%),
    rgba(238, 238, 235, 0.28);
}

.s-work .w-flag {
  position: absolute; z-index: 6; left: 50%; top: 22px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  height: 36px; padding: 0 16px 0 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 24px -12px rgba(20, 20, 20, 0.25);
  font-size: 0.8125rem; font-weight: 600; color: var(--ink); letter-spacing: -0.005em;
}
.s-work .w-flag__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(238, 106, 44, 0.18); }
.s-work .w-flag__sep { width: 1px; height: 14px; background: var(--line-strong); }
.s-work .w-flag__muted { font-weight: 400; color: var(--slate); }

.s-work .w-scroll { position: relative; z-index: 1; }
.s-work .w-scroll:focus-visible { outline-offset: -4px; border-radius: var(--r-xl); }
.s-work .w-cols { position: relative; z-index: 1; display: flex; }
.s-work .w-col { display: flex; flex-direction: column; gap: var(--w-gap); }
.s-work .w-item { margin: 0; position: relative; }
.s-work .w-phone {
  --phone-w: 262px;
  box-shadow: inset 0 0 0 1.5px #4A4A4A, 0 40px 70px -28px rgba(20, 20, 20, 0.42), 0 14px 26px -14px rgba(20, 20, 20, 0.3);
}

/* caption under each phone */
.s-work .w-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding: 0 6px 0 10px; width: var(--phone-w, 262px);
}
.s-work .w-cap > span:first-child { display: grid; gap: 2px; min-width: 0; }
.s-work .w-cap b { font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.s-work .w-cap small { font-size: 0.75rem; color: var(--slate); line-height: 1.3; text-wrap: balance; }
.s-work .w-tier {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: var(--r-pill); background: var(--white); color: var(--ink);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.06);
}
.s-work .w-tier::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--stone); }
.s-work .w-tier--go::before   { background: var(--patina); }
.s-work .w-tier--plus::before { background: var(--temper); }
.s-work .w-tier--pro { background: var(--ink); color: var(--white); }
.s-work .w-tier--pro::before  { background: var(--ember); }
.s-work .w-tier--all::before  { background: var(--ember); }

/* ---------- Desktop mosaic ---------- */
@media (min-width: 960px) {
  .s-work .w-stage { height: clamp(760px, 62vw, 900px); }
  .s-work .w-scroll { height: 100%; }
  /* the phones dissolve into the silk at the top and bottom edges */
  .s-work .w-cols {
    justify-content: center; align-items: flex-start; gap: var(--w-gap); height: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  }
  .s-work .w-cols { --pw: min(262px, calc((100cqi - var(--w-pad, 96px) - var(--w-gap) * 3) / 4)); }
  .s-work .w-phone { --phone-w: var(--pw); }
  .s-work .w-cap { width: var(--pw); }
  /* resting offsets, in phone widths so the mosaic keeps its rhythm at every size (the scrub moves around these) */
  .s-work .w-col[data-work-col="0"] { margin-top: calc(var(--pw) * -1.15); }
  .s-work .w-col[data-work-col="1"] { margin-top: calc(var(--pw) * -1.98); }
  .s-work .w-col[data-work-col="2"] { margin-top: calc(var(--pw) * -1.45); }
  .s-work .w-col[data-work-col="3"] { margin-top: calc(var(--pw) * -2.29); }
  .s-work .w-ctrl, .s-work .w-swipe { display: none; }
  /* a phone lifts a little under the pointer */
  .s-work .w-phone { transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); }
  .s-work .w-item:hover .w-phone {
    transform: translateY(-10px);
    box-shadow: inset 0 0 0 1.5px #4A4A4A, 0 56px 80px -30px rgba(20, 20, 20, 0.45), 0 18px 30px -14px rgba(20, 20, 20, 0.3);
  }

  /* QA / reduced motion: the whole mosaic, static, every phone in view */
  .is-qa .s-work .w-stage, .is-reduced .s-work .w-stage { height: auto; padding: 88px 0 56px; }
  .is-qa .s-work .w-scroll, .is-reduced .s-work .w-scroll { height: auto; }
  .is-qa .s-work .w-cols, .is-reduced .s-work .w-cols { -webkit-mask-image: none; mask-image: none; }
  .is-qa .s-work .w-col, .is-reduced .s-work .w-col { margin-top: 0 !important; }
  .is-qa .s-work .w-col[data-work-col="1"], .is-reduced .s-work .w-col[data-work-col="1"] { padding-top: 72px; }
  .is-qa .s-work .w-col[data-work-col="2"], .is-reduced .s-work .w-col[data-work-col="2"] { padding-top: 28px; }
  .is-qa .s-work .w-col[data-work-col="3"], .is-reduced .s-work .w-col[data-work-col="3"] { padding-top: 100px; }
}

/* small laptops: tighter mosaic, captions stack (name, then tier) */
@media (min-width: 960px) and (max-width: 1239.98px) {
  .s-work { --w-gap: 20px; --w-pad: 56px; }
  .s-work .w-cap { flex-direction: column; align-items: flex-start; gap: 8px; padding-left: 8px; }
  .s-work .w-cap small { display: none; }
}

/* ---------- Mobile / tablet: a swipeable row ---------- */
@media (max-width: 959.98px) {
  .s-work .w-scroll {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 76px 0 30px;
  }
  .s-work .w-scroll::-webkit-scrollbar { display: none; }
  .s-work .w-flag__sep, .s-work .w-flag__muted { display: none; }
  .s-work .w-cols { width: max-content; gap: 16px; padding-inline: calc(50cqi - 118px); }
  .s-work .w-col { display: contents; }
  .s-work .w-item { order: var(--o); scroll-snap-align: center; }
  .s-work .w-phone { --phone-w: 236px; }
  .s-work .w-cap { width: 236px; }

  /* counter + arrows under the row (same pattern as the brand section's "01 / 06") */
  .s-work .w-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-inline: 4px; }
  .s-work .w-now { display: flex; align-items: baseline; gap: 12px; min-width: 0; font-size: 0.875rem; color: var(--ink); }
  .s-work .w-now__count { color: var(--stone); font-size: 0.8125rem; flex: none; }
  .s-work .w-now__count b { color: var(--ink); font-weight: 500; }
  .s-work .w-now__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .s-work .w-ctrl__btns { display: flex; gap: 8px; flex: none; }
  .s-work .w-ctrl .icon-btn:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--ink); border-color: var(--line-strong); }
  /* "Swipe" cue (forge.css .hint--chip, touch screens only) in the silk band under the captions, a mirror of
     the "Demo sites" flag, so it covers no phone; and a soft fade on the side(s) of the row that have more to
     show (forge.css .hint-rail) */
  .s-work .w-swipe { left: 50%; bottom: 16px; transform: translateX(-50%); }
  .s-work .w-scroll { --hint-fade: 40px; --hint-fade-to: 0.3; }
  .is-qa .s-work .w-swipe { display: none; }
  .s-work .w-flip { transform: rotate(180deg); }
  html:not(.js) .s-work .w-ctrl { display: none; }

  /* QA: every phone at once, as a static grid */
  .is-qa .s-work .w-scroll { overflow: visible; scroll-snap-type: none; padding: 76px 16px 28px; }
  .is-qa .s-work .w-cols { width: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; padding: 0; }
  .is-qa .s-work .w-phone, .is-qa .s-work .w-cap { --phone-w: calc((100cqi - 44px) / 2); width: var(--phone-w); }
  .is-qa .s-work .w-cap { flex-wrap: wrap; padding: 0 4px; gap: 6px; }
  .is-qa .s-work .w-ctrl { display: none; }
}
@media (min-width: 600px) and (max-width: 959.98px) {
  .s-work .w-cols { padding-inline: 48px; gap: 20px; }
  .s-work .w-item { scroll-snap-align: start; scroll-margin-inline: 48px; }
  .is-qa .s-work .w-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; padding: 0; }
  .is-qa .s-work .w-scroll { padding-inline: 24px; }
  .is-qa .s-work .w-phone, .is-qa .s-work .w-cap { --phone-w: calc((100cqi - 80px) / 3); }
}

/* ---------- CTA under the panel ---------- */
.s-work .w-cta { display: grid; justify-items: center; gap: 20px; margin-top: clamp(40px, 5vw, 64px); text-align: center; }
@media (min-width: 960px) { .s-work .w-cta { margin-top: 56px; } }

/* ==========================================================================
   Phone screens. Base font = --phone-w * 0.043 (about 11px), all in em.
   ========================================================================== */
.s-work .w-scr { background: #F4F4F2; letter-spacing: -0.01em; }
.s-work .w-scr .i { width: 1em; height: 1em; }
.s-work .w-scr b { font-weight: 600; }
.s-work .w-scr small { font-size: 0.78em; color: var(--slate); }

.s-work .sc { display: flex; flex-direction: column; gap: 0.85em; padding: 0.35em 1.2em 1.2em; }
.s-work .sc--tight { gap: 0.72em; padding-top: 0.9em; }
.s-work .sc-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.s-work .sc-top--pad { padding: 0.35em 1.2em 0; position: relative; z-index: 4; }
.s-work .sc-logo { font-size: 1.45em; font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.s-work .sc-logo em { font-style: normal; color: var(--ember); }
.s-work .sc-sample, .s-work .sc-open, .s-work .sc-lockt {
  display: inline-flex; align-items: center; gap: 0.35em; height: 2em; padding: 0 0.75em;
  border-radius: 99px; background: var(--white); font-size: 0.74em; font-weight: 500; color: var(--slate);
}
.s-work .sc-lockt .i { width: 0.95em; height: 0.95em; }
.s-work .sc-sample { background: var(--ember-soft); color: var(--ember-ink); font-weight: 600; }
.s-work .sc-open { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.s-work .sc-open::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: #4ADE80; }
.s-work .sc-burger { display: grid; gap: 0.28em; width: 2.4em; height: 2.4em; place-content: center; border-radius: 50%; background: var(--white); }
.s-work .sc-burger i { display: block; width: 0.95em; height: 1.5px; background: currentColor; }
.s-work .sc-back { display: inline-flex; align-items: center; gap: 0.4em; font-size: 1.2em; font-weight: 600; letter-spacing: -0.03em; }
.s-work .sc-back .i { transform: rotate(180deg); width: 0.85em; }
.s-work .sc-forge { display: inline-flex; align-items: center; gap: 0.45em; font-size: 1em; font-weight: 600; letter-spacing: -0.02em; }
.s-work .sc-forge > svg { width: 1.5em; height: 1.5em; color: var(--ink); }

.s-work .sc-kick { font-size: 0.72em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-ink); margin-bottom: -0.55em; }
.s-work .sc-kick--mute { color: var(--slate); }
.s-work .sc-h { font-size: 1.9em; line-height: 1.06; letter-spacing: -0.045em; font-weight: 400; text-wrap: balance; }
.s-work .sc-h span { color: var(--ember); }
.s-work .sc-h--sm { font-size: 1.45em; line-height: 1.12; }
.s-work .sc-p { font-size: 0.86em; color: var(--slate); line-height: 1.4; }
.s-work .sc-label { font-size: 0.78em; font-weight: 600; color: var(--ink); margin-bottom: -0.35em; }

.s-work .sc-chips { display: flex; gap: 0.35em; overflow: hidden; }
.s-work .sc-chips span { flex: none; height: 2.2em; display: inline-flex; align-items: center; padding: 0 0.9em; border-radius: 99px; background: var(--white); font-size: 0.8em; font-weight: 500; }
.s-work .sc-chips .is-on { background: var(--ink); color: var(--white); }
.s-work .sc-chips--wrap { flex-wrap: wrap; }

.s-work .sc-card { background: var(--white); border-radius: 1.1em; padding: 0.8em 0.9em; box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04); }
.s-work .sc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.s-work .sc-row--head b { font-size: 0.92em; }
.s-work .sc-search { display: flex; align-items: center; gap: 0.55em; height: 2.9em; padding: 0 1em; border-radius: 99px; background: var(--white); font-size: 0.82em; color: var(--stone); }

.s-work .sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  height: 3.3em; padding: 0 0.35em 0 1.2em; border-radius: 99px;
  background: linear-gradient(180deg, #2A2A2A, var(--ink)); color: var(--white);
  font-size: 0.86em; font-weight: 500; letter-spacing: -0.01em;
}
.s-work .sc-btn > i { display: grid; place-items: center; width: 2.6em; height: 2.6em; margin-left: auto; border-radius: 50%; background: var(--white); color: var(--ink); }
.s-work .sc-btn--block { width: 100%; justify-content: flex-start; }
.s-work .sc-btn--ghost { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.s-work .sc-btn--ghost > i { background: var(--mist); }
.s-work .sc-btn--wa { background: #1DA851; }
.s-work .sc-btn--wa > i { color: #13823C; }
.s-work .sc-btn--temper { background: var(--temper-ink); }
.s-work .sc-btn--temper > i { color: var(--temper-ink); }

.s-work .sc-round { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--white); font-size: 1em; }
.s-work .sc-round--wa { background: #1DA851; color: var(--white); }
.s-work .sc-round--wa .i { width: 1.25em; height: 1.25em; }
.s-work .sc-note { display: flex; align-items: center; justify-content: center; gap: 0.45em; font-size: 0.74em; color: var(--slate); margin-top: -0.2em; }
.s-work .sc-note .i { color: #13823C; width: 1.2em; height: 1.2em; }

/* home indicator */
.s-work .w-scr::after {
  content: ""; position: absolute; z-index: 7; left: 50%; bottom: 0.5em;
  width: 36%; height: 0.36em; transform: translateX(-50%);
  border-radius: 99px; background: var(--ink); opacity: 0.88; pointer-events: none;
}
.s-work .w-scr--home::after { background: var(--white); }

/* mobile browser bar floating at the foot of every website screen: the address is part of the story */
.s-work .sf {
  position: absolute; z-index: 6; left: 0.85em; right: 0.85em; bottom: 1.45em;
  display: flex; align-items: center; gap: 0.4em; height: 3.25em; padding: 0 0.3em 0 0.4em;
  border-radius: 99px; background: rgba(252, 252, 250, 0.94);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.06), 0 0.6em 1.4em -0.5em rgba(20, 20, 20, 0.3);
}
.s-work .sf__url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4em; font-size: 0.84em; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
.s-work .sf__url .i { width: 0.95em; height: 0.95em; color: var(--slate); }
.s-work .sf__btn { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; color: var(--slate); }
.s-work .sf__btn .i { width: 1.05em; height: 1.05em; }
.s-work .sf::before { content: ""; width: 2.5em; flex: none; }

/* hero band inside a screen (silk ground, status bar on top) */
.s-work .w-hero { position: relative; padding-bottom: 1.3em; border-radius: 0 0 1.8em 1.8em; overflow: hidden; }
.s-work .w-hero--dark { color: var(--white); }
.s-work .kk-title { position: relative; z-index: 3; padding: 1em 0.75em 0; font-size: 1.6em; line-height: 1.08; letter-spacing: -0.045em; max-width: 11em; text-wrap: balance; }

/* 1 Rudo catalogue */
.s-work .sc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.s-work .sc-prod { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.25em 0.3em; padding: 0.4em 0.4em 0.6em; background: var(--white); border-radius: 1.1em; }
.s-work .sc-img { grid-column: 1 / -1; aspect-ratio: 1 / 0.86; border-radius: 0.8em; margin-bottom: 0.3em; }
.s-work .sc-prod b { font-size: 0.82em; font-weight: 500; padding-left: 0.25em; }
.s-work .sc-price { font-size: 0.82em; font-weight: 600; padding-right: 0.2em; }
.s-work .sc-wa { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 0.35em; height: 2.2em; border-radius: 99px; background: rgba(29, 168, 81, 0.12); color: #13823C; font-size: 0.74em; font-weight: 600; margin-top: 0.2em; }

/* 2 Kiki booking */
.s-work .kk-svc { display: grid; gap: 0.35em; }
.s-work .kk-svc > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6em; padding: 0.55em 0.6em 0.55em 0.9em; background: var(--white); border-radius: 0.95em; font-size: 0.9em; }
.s-work .kk-svc > div > span:first-child { display: grid; line-height: 1.2; }
.s-work .kk-svc > div > span:nth-child(2) { font-weight: 600; }
.s-work .kk-svc i { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fog); }
.s-work .kk-svc .is-on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.s-work .kk-svc .is-on i { background: var(--ink); color: var(--white); box-shadow: none; }
.s-work .kk-svc .is-on i .i { width: 0.9em; height: 0.9em; stroke-width: 2.4; }
.s-work .kk-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35em; }
.s-work .kk-days span { display: grid; justify-items: center; gap: 0.1em; padding: 0.5em 0; border-radius: 0.95em; background: var(--white); font-size: 0.72em; color: var(--slate); }
.s-work .kk-days b { font-size: 1.45em; color: var(--ink); font-weight: 500; }
.s-work .kk-days .is-on { background: var(--ink); color: rgba(255, 255, 255, 0.7); }
.s-work .kk-days .is-on b { color: var(--white); }
.s-work .kk-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35em; }
.s-work .kk-slots span { display: grid; place-items: center; height: 2.3em; border-radius: 99px; background: var(--white); font-size: 0.8em; font-weight: 500; }
.s-work .kk-slots .is-on { background: var(--ember); color: var(--white); }
.s-work .kk-slots .is-off { color: var(--stone); text-decoration: line-through; background: transparent; box-shadow: inset 0 0 0 1px var(--fog); }

/* 3 Sadza menu */
.s-work .mn-list { display: grid; gap: 0.4em; }
.s-work .mn-list > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75em; padding: 0.45em 0.8em 0.45em 0.45em; background: var(--white); border-radius: 1em; }
.s-work .mn-list i { width: 3em; height: 3em; border-radius: 0.8em; }
.s-work .mn-list span { display: grid; line-height: 1.2; font-size: 0.9em; }
.s-work .mn-list span b { font-weight: 500; }
.s-work .mn-list em { font-style: normal; font-weight: 600; font-size: 0.95em; }
.s-work .mn-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; }
.s-work .mn-info .sc-card { display: grid; gap: 0.15em; padding: 0.7em 0.8em; font-size: 0.86em; align-content: start; }
.s-work .mn-info .sc-card > .i { color: var(--ember); margin-bottom: 0.25em; }
.s-work .mn-map { position: relative; overflow: hidden; padding-top: 3.2em !important; }
.s-work .mn-map b { position: relative; z-index: 1; }

/* 4 Buildwell store */
.s-work .bw-logo { display: inline-flex; align-items: center; gap: 0.35em; font-size: 1.3em; }
.s-work .bw-logo i { width: 0.85em; height: 0.85em; border-radius: 0.2em; background: var(--brass); box-shadow: 0.28em 0.28em 0 var(--ink); }
.s-work .bw-mark { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.8em; background: var(--ink); flex: none; }
.s-work .bw-mark i { width: 0.95em; height: 0.95em; border-radius: 0.2em; background: var(--brass); box-shadow: 0.3em 0.3em 0 var(--ember); transform: translate(-0.15em, -0.15em); }
.s-work .bw-cart { position: relative; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--ink); color: var(--white); }
.s-work .bw-cart b { position: absolute; top: -0.2em; right: -0.2em; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--ember); font-size: 0.72em; box-shadow: 0 0 0 2px #F4F4F2; }
.s-work .bw-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.s-work .bw-cats span { display: grid; justify-items: center; gap: 0.5em; padding: 0.7em 0.2em 0.6em; border-radius: 1.1em; background: var(--white); font-size: 0.72em; font-weight: 500; }
.s-work .bw-cats i { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 0.9em; color: var(--white); font-size: 1em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.s-work .bw-cats i .i { width: 1.35em; height: 1.35em; }
.s-work .bw-cats i.icon-tile--brass { background: var(--brass); }
.s-work .bw-cats i.icon-tile--ember { background: var(--ember); }
.s-work .bw-cats i.icon-tile--temper { background: var(--temper); }
.s-work .bw-cats i.icon-tile--patina { background: var(--patina); }
.s-work .bw-list { display: grid; gap: 0.4em; }
.s-work .bw-list .sc-card { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.6em; padding: 0.5em 0.5em 0.5em 0.5em; }
.s-work .bw-ic { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 0.8em; background: var(--mist); font-size: 1em; }
.s-work .bw-ic .i { width: 1.2em; height: 1.2em; }
.s-work .bw-ic--brass  { background: var(--brass-soft);  color: #9A6412; }
.s-work .bw-ic--temper { background: var(--temper-soft); color: var(--temper-ink); }
.s-work .bw-ic--ember  { background: var(--ember-soft);  color: var(--ember-ink); }
.s-work .bw-ic--patina { background: var(--patina-soft); color: var(--patina-ink); }
.s-work .bw-list span { display: grid; line-height: 1.25; font-size: 0.88em; }
.s-work .bw-list span b { font-weight: 500; white-space: nowrap; }
.s-work .bw-list em { font-style: normal; font-weight: 600; font-size: 0.86em; }
.s-work .bw-list u { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--ink); color: var(--white); }
.s-work .st { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 600; }
.s-work .st::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.s-work .st--in { color: var(--patina-ink); }
.s-work .st--low { color: var(--ember-ink); }
.s-work .bw-pay { display: flex; align-items: center; gap: 0.6em; height: 3.6em; padding: 0 0.35em 0 1.1em; border-radius: 99px; background: var(--ink); color: var(--white); font-size: 0.86em; }
.s-work .bw-pay > span:first-child { color: rgba(255, 255, 255, 0.66); }
.s-work .bw-pay b { margin-left: auto; }
.s-work .bw-pay__btn { display: grid; place-items: center; height: 2.9em; padding: 0 1em; border-radius: 99px; background: var(--ember); font-weight: 600; }
.s-work .bw-methods { display: flex; justify-content: center; align-items: center; gap: 0.9em; font-size: 0.7em; color: var(--slate); margin-top: -0.3em; }
.s-work .bw-methods .pn-logo--eco { height: 1.05em; }
.s-work .bw-methods .pn-logo--visa { height: 0.9em; }
.s-work .bw-methods .pn-logo--mc { height: 1.5em; }
.s-work .bw-methods .pn-logo--zs { height: 1.75em; }

/* 5 Bright Minds */
.s-work .bm-logo { display: inline-flex; align-items: center; gap: 0.45em; font-size: 1.15em; letter-spacing: -0.035em; }
.s-work .bm-logo i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 0.5em; background: var(--temper); color: var(--white); font-size: 0.85em; }
.s-work .bm-hero { display: grid; gap: 0.5em; padding: 1.1em 1em; border-radius: 1.3em; color: var(--white); min-height: 8.5em; align-content: end; position: relative; isolation: isolate; overflow: hidden; }
/* scrim so the white headline stays legible over the pale highlights of the temper silk */
.s-work .bm-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(38, 42, 110, 0.62), rgba(38, 42, 110, 0.18) 70%, rgba(38, 42, 110, 0)); }
.s-work .bm-hero p, .s-work .bm-hero small { text-shadow: 0 1px 10px rgba(30, 32, 90, 0.25); }
.s-work .bm-hero p { font-size: 1.55em; line-height: 1.06; letter-spacing: -0.045em; max-width: 8em; }
.s-work .bm-hero small { color: rgba(255, 255, 255, 0.84); }
.s-work .bm-fee { display: flex; align-items: center; justify-content: space-between; }
.s-work .bm-fee > span:first-child { display: grid; gap: 0.1em; }
.s-work .bm-fee b { font-size: 1.5em; font-weight: 500; letter-spacing: -0.04em; }
.s-work .bm-fee b em { font-style: normal; font-size: 0.55em; color: var(--slate); letter-spacing: 0; }
.s-work .bm-seat { font-size: 0.72em; font-weight: 600; padding: 0.45em 0.8em; border-radius: 99px; background: var(--temper-soft); color: var(--temper-ink); }
.s-work .bm-form { display: grid; gap: 0.35em; }
.s-work .bm-in { display: flex; align-items: center; height: 2.9em; padding: 0 1em; border-radius: 0.9em; background: var(--white); box-shadow: inset 0 0 0 1px var(--fog); font-size: 0.82em; color: var(--stone); }
.s-work .bm-in--sel { color: var(--ink); justify-content: space-between; }
.s-work .bm-in--sel::after { content: ""; width: 0.45em; height: 0.45em; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-0.15em); }
.s-work .bm-in--sel small { margin-right: 0.6em; font-size: 1em; color: var(--stone); } /* field label beside its value, no colon */

/* 6 WhatsApp order */
.s-work .w-scr--wa { background: #EDE9E3; display: flex; flex-direction: column; }
.s-work .w-scr--wa .phone__status { background: var(--white); }
.s-work .wa-bar { display: flex; align-items: center; gap: 0.6em; padding: 0.4em 1em 0.8em; background: var(--white); box-shadow: 0 1px 0 var(--line); }
.s-work .wa-bar > .i { transform: rotate(180deg); color: #13823C; }
.s-work .wa-bar > span:last-child { display: grid; line-height: 1.2; font-size: 0.95em; }
.s-work .wa-av { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; font-weight: 600; }
.s-work .wa-chat { flex: 1; display: flex; flex-direction: column; gap: 0.5em; padding: 1em 0.9em; }
.s-work .wa-day { align-self: center; font-size: 0.7em; padding: 0.35em 0.9em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.8); color: var(--slate); font-weight: 500; }
.s-work .wa-msg { max-width: 84%; padding: 0.6em 0.8em 0.45em; border-radius: 0.3em 1.1em 1.1em 1.1em; background: var(--white); font-size: 0.88em; line-height: 1.38; box-shadow: 0 1px 1px rgba(20, 20, 20, 0.06); }
.s-work .wa-msg em { display: flex; justify-content: flex-end; align-items: center; gap: 0.25em; font-style: normal; font-size: 0.74em; color: var(--stone); margin-top: 0.15em; }
.s-work .wa-msg em .i { color: #34B7F1; stroke-width: 2.4; }
.s-work .wa-msg--out { align-self: flex-end; background: #DDF3D2; border-radius: 1.1em 0.3em 1.1em 1.1em; }
.s-work .wa-prod { display: flex; gap: 0.6em; align-items: center; margin: -0.2em -0.4em 0.55em; padding: 0.4em; border-radius: 0.8em; background: rgba(255, 255, 255, 0.7); }
.s-work .wa-prod > span:first-child { width: 2.8em; height: 2.8em; border-radius: 0.6em; flex: none; }
.s-work .wa-prod > span:last-child { display: grid; line-height: 1.2; }
.s-work .wa-link { display: grid; line-height: 1.25; margin: -0.25em -0.45em 0.55em; padding: 0.35em 0.35em 0.5em; border-radius: 0.8em; background: var(--mist); }
.s-work .wa-link__img { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0.2em; height: 3.6em; margin-bottom: 0.45em; }
.s-work .wa-link__img i { border-radius: 0.55em; }
.s-work .wa-link b { padding-inline: 0.3em; font-size: 0.95em; }
.s-work .wa-link small { padding-inline: 0.3em; }
.s-work .wa-input { display: flex; align-items: center; gap: 0.5em; margin: 0 0.8em 1.6em; }
.s-work .wa-input span { flex: 1; height: 3em; display: flex; align-items: center; padding: 0 1.1em; border-radius: 99px; background: var(--white); color: var(--stone); font-size: 0.86em; }
.s-work .wa-input i { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 50%; background: #1DA851; color: var(--white); }

/* 7 Monthly report */
.s-work .rp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; }
.s-work .rp-kpis .sc-card { display: grid; gap: 0.1em; }
.s-work .rp-kpis b { font-size: 1.75em; font-weight: 500; letter-spacing: -0.05em; line-height: 1.1; }
.s-work .rp-kpis em { font-style: normal; font-size: 0.74em; font-weight: 600; }
.s-work .up { color: var(--patina-ink); }
.s-work .rp-chart { display: grid; gap: 0.7em; }
.s-work .rp-chart .sc-row b { font-size: 0.86em; font-weight: 600; }
.s-work .rp-bars { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 0.55em; height: 7.2em; padding-top: 0.2em; background: repeating-linear-gradient(0deg, transparent 0 calc(2.4em - 1px), var(--fog) calc(2.4em - 1px) 2.4em); }
.s-work .rp-bars span { height: var(--h); border-radius: 0.5em 0.5em 0.2em 0.2em; background: var(--fog); transform-origin: bottom; }
.s-work .rp-bars .is-on { background: var(--ember); }
.s-work .rp-axis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.55em; margin-top: -0.3em; text-align: center; font-size: 0.68em; color: var(--stone); }
.s-work .rp-src { display: grid; gap: 0.55em; }
.s-work .rp-src .sc-row b { font-size: 0.86em; font-weight: 600; }
.s-work .rp-line { position: relative; display: flex; justify-content: space-between; align-items: center; height: 2.1em; padding: 0 0.7em; border-radius: 0.6em; background: var(--mist); font-size: 0.8em; overflow: hidden; isolation: isolate; }
.s-work .rp-line::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: inherit; background: var(--ember-soft); }
.s-work .rp-line:first-of-type::before { background: rgba(238, 106, 44, 0.3); }
.s-work .rp-line em { font-style: normal; font-weight: 600; }
.s-work .rp-note { display: flex; gap: 0.7em; align-items: center; }
.s-work .rp-note > i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.8em; background: var(--ink); color: var(--white); flex: none; }
.s-work .rp-note > span { display: grid; line-height: 1.3; font-size: 0.9em; }

/* 8 Paynow checkout */
.s-work .sc-lockt { background: var(--patina-soft); color: var(--patina-ink); font-weight: 600; }
.s-work .pn-sum { display: grid; gap: 0.5em; font-size: 0.86em; }
.s-work .pn-shop { display: flex; align-items: center; gap: 0.7em; padding-bottom: 0.65em; margin-bottom: 0.1em; border-bottom: 1px solid var(--line); }
.s-work .pn-shop > span { display: grid; line-height: 1.25; }
.s-work .pn-shop b { font-weight: 600; }
.s-work .pn-shop .bw-mark { width: 2.7em; height: 2.7em; }
.s-work .pn-sum .sc-row > span:first-child { color: var(--slate); }
.s-work .pn-total { padding-top: 0.55em; border-top: 1px dashed var(--line-strong); font-size: 1.1em; }
.s-work .pn-opts { display: grid; gap: 0.35em; }
.s-work .pn-opts > div { display: flex; align-items: center; gap: 0.65em; height: 3.2em; padding: 0 0.9em; border-radius: 0.95em; background: var(--white); font-size: 0.86em; }
.s-work .pn-opts b { font-weight: 500; }
.s-work .pn-r { width: 1.35em; height: 1.35em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--stone); flex: none; }
.s-work .pn-opts .is-on { box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 0.95em 0.95em 0.3em 0.3em; }
.s-work .pn-opts .is-on .pn-r { box-shadow: inset 0 0 0 0.38em var(--ink); }
.s-work .pn-tag { margin-left: auto; font-size: 0.8em; font-weight: 600; color: var(--patina-ink); background: var(--patina-soft); padding: 0.3em 0.7em; border-radius: 99px; }
.s-work .pn-logos { margin-left: auto; display: flex; align-items: center; gap: 0.4em; }
.s-work .pn-logo { display: block; width: auto; height: 1em; flex: none; }
.s-work .pn-logo--eco { height: 0.8em; }
.s-work .pn-logo--visa { height: 0.72em; }
.s-work .pn-logo--mc { height: 1.2em; }
.s-work .pn-logo--zs { height: 1.45em; }
.s-work .pn-num { justify-content: space-between; margin-top: -0.3em; border-radius: 0.3em 0.3em 0.95em 0.95em !important; background: #FAFAF8 !important; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--slate); }
.s-work .pn-num b { color: var(--ink); font-weight: 600; letter-spacing: 0.02em; }
.s-work .pn-foot { display: flex; align-items: center; justify-content: center; gap: 0.4em; font-size: 0.72em; color: var(--slate); margin-top: -0.3em; }

/* 9 Maps listing (and the mini map) */
.s-work .w-scr--map .phone__status { position: absolute; left: 0; right: 0; top: 0; }
.s-work .map {
  position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background:
    radial-gradient(38% 26% at 18% 76%, var(--patina-soft) 0 98%, transparent 100%),
    linear-gradient(118deg, transparent 0 62%, var(--temper-soft) 62% 70%, transparent 70%),
    linear-gradient(28deg, transparent 0 47%, #FFFFFF 47% 50.5%, transparent 50.5%),
    linear-gradient(-62deg, transparent 0 38%, #FFFFFF 38% 40%, transparent 40%),
    linear-gradient(90deg, transparent 0 30%, #FFFFFF 30% 31.5%, transparent 31.5%),
    repeating-linear-gradient(28deg, transparent 0 2.4em, rgba(255, 255, 255, 0.75) 2.4em 2.55em),
    repeating-linear-gradient(-62deg, transparent 0 3.1em, rgba(255, 255, 255, 0.75) 3.1em 3.25em),
    #E8E8E3;
}
.s-work .map__search { position: absolute; left: 1em; right: 1em; top: 4.1em; display: flex; align-items: center; gap: 0.6em; height: 3.1em; padding: 0 1.1em; border-radius: 99px; background: var(--white); box-shadow: 0 6px 16px -8px rgba(20, 20, 20, 0.3); font-size: 0.86em; }
.s-work .map__pin { position: absolute; left: 56%; top: 52%; display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 50% 50% 50% 0.2em; transform: translate(-50%, -100%) rotate(-45deg); background: var(--ember); color: var(--white); box-shadow: 0 8px 18px -6px rgba(179, 70, 18, 0.6); }
.s-work .map__pin .i { transform: rotate(45deg); }
.s-work .map__you { position: absolute; left: 28%; top: 70%; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--temper); box-shadow: 0 0 0 0.35em rgba(111, 121, 216, 0.25), 0 0 0 2px var(--white) inset; }
.s-work .map--mini { position: absolute; inset: 0; height: auto; bottom: 1.6em; background-size: auto; }
.s-work .map--mini .map__pin { width: 1.9em; height: 1.9em; top: 64%; font-size: 0.9em; }
.s-work .map-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.35em; padding: 0.7em 1.2em 1.4em; border-radius: 1.8em 1.8em 0 0; background: var(--white); box-shadow: 0 -10px 30px -12px rgba(20, 20, 20, 0.2); }
.s-work .map-grab { justify-self: center; width: 3em; height: 0.3em; border-radius: 99px; background: var(--fog); margin-bottom: 0.4em; }
.s-work .map-name { font-size: 1.45em; letter-spacing: -0.04em; line-height: 1.1; }
.s-work .map-meta { font-size: 0.84em; color: var(--slate); }
.s-work .map-open { font-size: 0.84em; color: var(--slate); }
.s-work .map-open b { color: var(--patina-ink); }
.s-work .map-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3em; margin-top: 0.5em; }
.s-work .map-acts span { display: grid; justify-items: center; gap: 0.35em; font-size: 0.7em; font-weight: 500; color: var(--slate); }
.s-work .map-acts i { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--mist); color: var(--ink); font-size: 1.2em; }
.s-work .map-acts .is-on i { background: var(--ink); color: var(--white); }
.s-work .map-photos { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0.35em; margin-top: 0.55em; }
.s-work .map-photos span { height: 4.4em; border-radius: 0.8em; }

/* 10 Add to home screen */
.s-work .w-scr--home { background: #6F79D8 url("../../img/silk/card-temper.webp") center / cover no-repeat; color: var(--white); }
.s-work .hs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4em 1.1em; padding: 1.6em 1.5em 0; }
.s-work .hs-grid span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 1.05em; background: rgba(255, 255, 255, 0.26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.92); }
.s-work .hs-grid .i { width: 1.45em; height: 1.45em; stroke-width: 1.6; }
.s-work .hs-grid span:nth-child(3n) { background: rgba(255, 255, 255, 0.4); }
.s-work .hs-grid span:nth-child(5) { background: rgba(20, 20, 20, 0.22); }
.s-work .hs-sheet { position: absolute; left: 0.7em; right: 0.7em; bottom: 0.7em; display: grid; gap: 0.6em; padding: 1.2em; border-radius: 1.9em; background: rgba(255, 255, 255, 0.95); color: var(--ink); box-shadow: 0 20px 40px -12px rgba(20, 20, 20, 0.45); }
.s-work .hs-app { display: flex; align-items: center; gap: 0.75em; }
.s-work .hs-app > span:last-child { display: grid; line-height: 1.2; }
.s-work .hs-icon { position: relative; display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 0.95em; background: linear-gradient(145deg, #2A2A2A, var(--ink)); box-shadow: 0 6px 14px -6px rgba(20, 20, 20, 0.5); }
.s-work .hs-icon i { width: 1.2em; height: 1.2em; border-radius: 0.25em; background: var(--brass); box-shadow: 0.36em 0.36em 0 var(--ember); transform: translate(-0.18em, -0.18em); }
.s-work .hs-h { font-size: 1.4em; line-height: 1.1; letter-spacing: -0.04em; text-wrap: balance; }
.s-work .hs-p { font-size: 0.84em; color: var(--slate); line-height: 1.4; }
.s-work .hs-btns { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0.4em; margin-top: 0.3em; }
.s-work .hs-btns span { display: grid; place-items: center; height: 3.1em; border-radius: 99px; background: var(--mist); font-size: 0.86em; font-weight: 500; }
.s-work .hs-btns .is-on { background: var(--ink); color: var(--white); }

/* 11 AI assistant */
.s-work .ai { height: calc(100% - var(--phone-w) * 0.14); }
.s-work .ai-name > i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: linear-gradient(145deg, var(--ember), var(--brass)); color: var(--white); }
.s-work .ai-name > span { display: grid; line-height: 1.2; }
.s-work .ai-name small { font-weight: 400; }
.s-work .ai-chat { flex: 1; display: flex; flex-direction: column; gap: 0.5em; padding-top: 0.4em; border-top: 1px solid var(--line); }
.s-work .ai-msg { max-width: 86%; padding: 0.65em 0.85em; border-radius: 1.1em 1.1em 1.1em 0.3em; background: var(--white); font-size: 0.88em; line-height: 1.38; }
.s-work .ai-msg--me { align-self: flex-end; background: var(--ink); color: var(--white); border-radius: 1.1em 1.1em 0.3em 1.1em; }
.s-work .ai-prod { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6em; max-width: 86%; padding: 0.5em 0.8em 0.5em 0.5em; font-size: 0.88em; }
.s-work .ai-prod > i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.75em; background: var(--brass-soft); color: #9A6412; }
.s-work .ai-prod > span { display: grid; line-height: 1.25; }
.s-work .ai-prod em { font-style: normal; font-weight: 600; }
.s-work .ai-cart { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; max-width: 86%; width: 86%; height: 3.4em; padding: 0 0.3em 0 1em; border-radius: 99px; background: var(--ink); color: var(--white); font-size: 0.86em; }
.s-work .ai-cart > span:first-child { display: flex; align-items: baseline; gap: 0.5em; }
.s-work .ai-cart small { color: rgba(255, 255, 255, 0.64); }
.s-work .ai-input { margin: 0; }
.s-work .ai-input i { background: var(--ink); }

/* 12 Booking confirmed */
.s-work .ok { padding-top: 1.6em; align-items: flex-start; }
.s-work .ok-tick { display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--patina); color: var(--white); font-size: 1.1em; box-shadow: 0 0 0 0.55em var(--patina-soft); margin: 0.4em 0 0.4em 0.4em; }
.s-work .ok-tick .i { stroke-width: 2.4; width: 1.3em; height: 1.3em; }
.s-work .ok-h { margin-top: 0.3em; }
.s-work .ok-card { width: 100%; display: grid; gap: 0; padding: 0.3em 0.9em; }
.s-work .ok-line { display: flex; align-items: center; gap: 0.75em; padding: 0.7em 0; }
.s-work .ok-line + .ok-line { border-top: 1px solid var(--line); }
.s-work .ok-line > i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.8em; flex: none; }
.s-work .ok-line > i:not(.silk) { background: var(--mist); }
.s-work .ok-line > span { display: grid; line-height: 1.25; font-size: 0.9em; }
.s-work .ok-line b { font-weight: 500; }
.s-work .ok-map { position: relative; width: 100%; height: 7.4em; padding: 0; overflow: hidden; }
.s-work .ok-map .map--mini { bottom: 0; }
.s-work .ok-map .map__pin { left: 70%; top: 58%; }
.s-work .ok-map__txt { position: absolute; left: 0.6em; bottom: 0.6em; display: grid; line-height: 1.25; padding: 0.5em 0.8em; border-radius: 0.8em; background: var(--white); font-size: 0.86em; box-shadow: 0 4px 12px -6px rgba(20, 20, 20, 0.3); }
.s-work .ok-map__txt b { font-weight: 600; }

/* Narrow phones (under 380px): the CTA's grid track and the button may not grow past the screen; the button
   drops " of your site" so it fits on one line. */
.s-work .w-cta { grid-template-columns: minmax(0, 1fr); }
.s-work .w-cta .btn { max-width: 100%; }
@media (max-width: 379.98px) { .s-work .w-cta__more { display: none; } }

/* ---- home/features.css ---- */
/* ==========================================================================
   05 FEATURES — "How we work"
   A white rounded surface: a phone whose screen changes on the left, three
   feature rows on the right. The active row is a filled colour panel; the
   phone scales down, swaps its screen and pops floating chips past its edges.
   Everything inside the phone is sized in em off --phone-w so it scales.
   ========================================================================== */

.s-features { position: relative; }
/* static state (?qa=1 stands in for reduced motion) and the first paint: no transitions */
.is-qa .s-features *, .is-qa .s-features *::before, .is-qa .s-features *::after,
.s-features.fx-instant *, .s-features.fx-instant *::before, .s-features.fx-instant *::after { transition: none !important; }

.s-features .fx-surface {
  --pad-y: clamp(36px, 7.5vw, 56px);
  --pad-x: clamp(20px, 5.5vw, 40px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "device" "list" "foot";
  padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) * 0.8);
  background: var(--white);
  border-radius: var(--r-xl);
}

/* ---------- Heading ---------- */
.s-features .fx-head { grid-area: head; display: grid; justify-items: start; gap: 18px; }
.s-features .fx-title { max-width: 14ch; }
.s-features .fx-br { display: none; }

/* ---------- Feature rows ---------- */
.s-features .fx-list {
  grid-area: list;
  display: grid; gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
.s-features .fx-row {
  --fs-t: clamp(1.3125rem, 1.05rem + 1.1vw, 1.625rem);
  --px: clamp(18px, 4.6vw, 26px);
  --py: clamp(18px, 4.6vw, 24px);
  --c: var(--ember); --c-deep: var(--ember-ink); --silk: url("../../img/silk/card-ember.webp");
  position: relative; isolation: isolate;
  padding: var(--py) var(--px);
  border-radius: var(--r-lg);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.s-features .fx-row--patina { --c: var(--patina); --c-deep: var(--patina-ink); --silk: url("../../img/silk/card-patina.webp"); }
.s-features .fx-row--temper { --c: var(--temper); --c-deep: var(--temper-ink); --silk: url("../../img/silk/card-temper.webp"); }

/* hover wash on resting rows */
.s-features .fx-row::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: rgba(20, 20, 20, 0.035); opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .s-features .fx-row:not(.is-active):hover::before { opacity: 1; }
  .s-features .fx-row:not(.is-active):hover .fx-row__hook { transform: translate(3px, var(--hook-y)); color: var(--ink); }
}

/* the colour panel: deep tone under the text, the metal's own colour and a
   soft silk bloom towards the top right (white text stays AA on it) */
.s-features .fx-row__bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(200deg, var(--c) 0%, var(--c-deep) 72%);
  opacity: 0;
  /* leaving: the colour drains to a light tinted grey first, then the panel fades (reference f_059, f_062) */
  filter: grayscale(0.94) brightness(1.8);
  transition: filter 0.3s var(--ease-out), opacity 0.8s var(--ease-in-out) 0.1s;
}
.s-features .fx-row.is-active .fx-row__bg {
  opacity: 1; filter: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0s;
}
.s-features .fx-row__bg::before {
  content: ""; position: absolute; top: -60%; bottom: -30%; left: 38%; right: -30%;
  background: var(--silk) center / cover no-repeat;
  filter: blur(22px) saturate(1.1);
  opacity: 0.72;
  -webkit-mask-image: radial-gradient(closest-side at 70% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side at 70% 40%, #000 30%, transparent 100%);
}
.s-features .fx-row__bg::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(70% 90% at 96% -10%, rgba(255, 255, 255, 0.26), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 40%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.s-features .fx-row__title {
  font-size: var(--fs-t); line-height: 1.2; letter-spacing: -0.015em; font-weight: 400;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
  text-wrap: pretty;
}
.s-features .fx-row__btn {
  display: flex; align-items: flex-start; gap: 0.5em;
  width: 100%; text-align: left;
  font: inherit; letter-spacing: inherit; color: inherit;
  transition: color 0.3s var(--ease-out);
}
.s-features .fx-row__btn:focus-visible { outline: none; }
/* the whole row is the hit area */
.s-features .fx-row__btn::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.s-features .fx-row__btn:focus-visible::after { outline: 2px solid var(--ember); outline-offset: 1px; }
.s-features .fx-row.is-active .fx-row__btn:focus-visible::after { outline-color: var(--ink); }
.s-features .fx-row__hook {
  --hook-y: 0.16em;
  flex: none; width: 0.66em; height: 0.66em; margin-top: 0.2em;
  stroke-width: 1.7; color: var(--slate);
  transform: translate(0, var(--hook-y));
  transition: transform var(--dur-2) var(--ease-out), color 0.45s var(--ease-out);
}
.s-features .fx-row.is-active .fx-row__btn { color: var(--white); }
.s-features .fx-row.is-active .fx-row__hook { color: rgba(255, 255, 255, 0.86); }

/* description: collapses to nothing on resting rows (only once JS runs) */
.s-features .fx-row__more { display: grid; grid-template-rows: 1fr; }
.js .s-features .fx-row__more { grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-out); }
.js .s-features .fx-row.is-active .fx-row__more { grid-template-rows: 1fr; transition-duration: 0.8s; }
.s-features .fx-row__more > div { overflow: hidden; min-height: 0; }
/* collapsed descriptions leave the accessibility tree once folded (matches aria-expanded) */
.js .s-features .fx-row:not(.is-active) .fx-row__more > div { visibility: hidden; transition: visibility 0s linear 0.55s; }
.s-features .fx-row__desc {
  max-width: 31em;
  padding-top: 8px;
  padding-left: calc(var(--fs-t) * 1.16);
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); line-height: 1.5;
  color: var(--slate);
  text-wrap: pretty;
}
.js .s-features .fx-row__desc {
  color: rgba(255, 255, 255, 0.94);
  opacity: 0; filter: blur(6px); transform: translate3d(0, 6px, 0);
  transition: opacity 0.35s var(--ease-out), filter 0.35s var(--ease-out), transform 0.5s var(--ease-out);
}
.js .s-features .fx-row.is-active .fx-row__desc {
  opacity: 1; filter: none; transform: none;
  transition: opacity 0.6s var(--ease-out) 0.18s, filter 0.7s var(--ease-out) 0.18s, transform 0.8s var(--ease-out) 0.18s;
}
/* without JS every row simply reads as a list */
html:not(.js) .s-features .fx-row.is-active .fx-row__desc { color: rgba(255, 255, 255, 0.94); }

/* timer line: shows the auto-advance on touch layouts */
.s-features .fx-row__timer {
  position: absolute; left: var(--px); right: var(--px); bottom: 10px; z-index: 0;
  height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.s-features .fx-row__timer i { display: block; height: 100%; background: rgba(255, 255, 255, 0.92); transform-origin: 0 50%; transform: scaleX(0); }
.s-features.is-timed .fx-row.is-active .fx-row__timer { opacity: 1; }

/* ---------- Foot note ---------- */
.s-features .fx-foot {
  grid-area: foot;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding-inline: var(--fx-foot-x, 4px);
}
.s-features .fx-note {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-small); line-height: 1.6; color: var(--slate);
}
.s-features .fx-note > .i { width: 18px; height: 18px; margin-top: 2px; color: var(--ink); flex: none; }
.s-features .fx-note .link { margin-left: 6px; color: var(--ink); white-space: nowrap; padding-bottom: 0; }
.s-features .fx-pause { flex: none; width: 44px; height: 44px; }
.s-features .fx-pause .i-play, .s-features .fx-pause.is-paused .i-pause { display: none; }
.s-features .fx-pause.is-paused .i-play { display: block; }

/* ==========================================================================
   Device
   ========================================================================== */
.s-features .fx-device {
  --phone-w: clamp(200px, 56vw, 232px);
  grid-area: device;
  justify-self: center;
  margin: clamp(32px, 8vw, 48px) 0 clamp(28px, 7vw, 40px);
}
.s-features .fx-device__inner {
  position: relative;
  font-size: calc(var(--phone-w) * 0.043);
  line-height: 1.35;
  transform-origin: 50% 50%;
}
/* .phone declares its own --phone-w; take the section's instead so the chips (sized off the same value) line up */
.s-features .fx-phone { --phone-w: inherit; }
.s-features .fx-phone { box-shadow: inset 0 0 0 1.5px #4A4A4A, 0 40px 70px -30px rgba(20, 20, 20, 0.42), 0 14px 28px -16px rgba(20, 20, 20, 0.3); }
.s-features .fx-screen { background: var(--paper); }

/* screens */
.s-features .fx-scr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  letter-spacing: -0.005em;
}
.s-features .fx-scr:not(.is-on) { opacity: 0; visibility: hidden; }
.s-features .fx-scr b { font-weight: 500; }
.s-features .fx-scr small { display: block; }
.s-features .fx-scr em { font-style: normal; }
.s-features .fx-scr .i { stroke-width: 2; }

.s-features .fx-card {
  position: relative; flex: none;
  margin: 0 0.95em;
  background: var(--white);
  border-radius: 1.25em;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 0 0 1px rgba(20, 20, 20, 0.025);
}
.s-features .fx-sec {
  display: flex; justify-content: space-between; align-items: baseline; flex: none;
  margin: 1.05em 1.3em 0.55em;
}
.s-features .fx-sec b { font-size: 0.86em; }
.s-features .fx-sec small { font-size: 0.66em; color: var(--slate); }
.s-features .fx-tabbar {
  position: absolute; left: 15%; right: 15%; bottom: 1.5em; z-index: 3;
  display: flex; align-items: center; justify-content: space-around;
  height: 3.2em; padding: 0 0.5em; border-radius: 2em;
  background: var(--coal);
  box-shadow: 0 12px 22px -12px rgba(0, 0, 0, 0.55);
}
.s-features .fx-tabbar span { position: relative; display: grid; place-items: center; width: 2.3em; height: 2.3em; color: rgba(255, 255, 255, 0.5); }
.s-features .fx-tabbar span.is-on { color: var(--white); }
.s-features .fx-tabbar span.is-on::after { content: ""; position: absolute; bottom: 0.05em; left: 50%; width: 0.26em; height: 0.26em; margin-left: -0.13em; border-radius: 50%; background: currentColor; }
.s-features .fx-tabbar .i { width: 1.12em; height: 1.12em; }
.s-features .fx-homebar { position: absolute; left: 33%; right: 33%; bottom: 0.55em; z-index: 3; height: 0.3em; border-radius: 1em; background: var(--ink); }
/* content passes under the tab bar */
.s-features .fx-scr--build::after, .s-features .fx-scr--report::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7.5em; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 246, 243, 0), var(--paper) 70%);
}

/* ---------- Screen 1: build tracker ---------- */
.s-features .fx-hdr {
  position: relative; flex: none; overflow: hidden;
  height: 19.6em;
  border-radius: 0 0 1.9em 1.9em;
  color: var(--white);
  background-position: 50% 35%;
}
.s-features .fx-hdr::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 34% at 50% 48%, rgba(18, 38, 16, 0.34), rgba(18, 38, 16, 0) 100%),
    linear-gradient(180deg, rgba(15, 15, 15, 0.2) 0%, rgba(15, 15, 15, 0) 34%, rgba(15, 15, 15, 0.08) 70%, rgba(15, 15, 15, 0.26) 100%);
}
.s-features .fx-hdr > * { position: relative; z-index: 1; }
.s-features .fx-greet { display: flex; align-items: center; gap: 0.5em; margin: 0.1em 1.15em 0; }
.s-features .fx-greet > span:nth-child(2) { font-size: 0.86em; font-weight: 500; }
.s-features .fx-av {
  display: grid; place-items: center; flex: none;
  width: 2.2em; height: 2.2em; border-radius: 50%;
  color: var(--ink); font-size: 0.86em; font-weight: 600;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}
.s-features .fx-bell {
  display: grid; place-items: center; flex: none; margin-left: auto;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.s-features .fx-bell svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-features .fx-hdr__body { text-align: center; margin-top: 1.35em; text-shadow: 0 1px 14px rgba(15, 30, 14, 0.35); }
.s-features .fx-hdr__label { font-size: 0.76em; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.01em; }
.s-features .fx-hdr__fig { margin-top: 0.08em; font-size: 3.05em; line-height: 1.02; letter-spacing: -0.045em; font-weight: 400; }
.s-features .fx-hdr__fig small { display: inline; font-size: 0.46em; letter-spacing: 0; margin-left: 0.08em; opacity: 0.78; }
.s-features .fx-hdr__bar { display: block; width: 56%; height: 0.36em; margin: 0.7em auto 0; border-radius: 1em; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
.s-features .fx-hdr__bar i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--white); transform-origin: 0 50%; }
.s-features .fx-hdr__tags { display: flex; justify-content: center; gap: 0.4em; margin-top: 0.75em; }
.s-features .fx-hdr__tags span {
  display: inline-flex; align-items: center; gap: 0.35em;
  height: 1.95em; padding: 0 0.75em; border-radius: 1em;
  font-size: 0.66em; font-weight: 500;
  background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}
.s-features .fx-hdr__tags .i { width: 1.15em; height: 1.15em; }

.s-features .fx-steps { padding: 0.15em 0.95em; }
.s-features .fx-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7em; padding: 0.62em 0; }
.s-features .fx-step + .fx-step { box-shadow: 0 -1px 0 var(--line); }
.s-features .fx-step > i {
  position: relative; display: grid; place-items: center;
  width: 2.8em; height: 2.8em; border-radius: 50%;
  font-size: 0.66em; font-style: normal; font-weight: 600;
  background: var(--mist); color: var(--slate);
}
.s-features .fx-step > i .i { width: 1.4em; height: 1.4em; stroke-width: 2.6; }
.s-features .fx-step.is-done > i { background: var(--patina-soft); color: var(--patina-ink); }
.s-features .fx-step.is-now > i { background: var(--ember); }
.s-features .fx-step.is-now > i::before { content: ""; width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--white); }
.s-features .fx-step.is-now > i::after {
  content: ""; position: absolute; inset: -0.35em; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(238, 106, 44, 0.45);
  animation: fx-ring 2.2s var(--ease-out) infinite;
}
.is-qa .s-features .fx-step.is-now > i::after { animation: none; }
@keyframes fx-ring { 0% { transform: scale(0.7); opacity: 1; } 80%, 100% { transform: scale(1.25); opacity: 0; } }
.s-features .fx-step b { display: block; font-size: 0.78em; line-height: 1.25; }
.s-features .fx-step small { font-size: 0.64em; line-height: 1.3; margin-top: 0.12em; color: var(--slate); }
.s-features .fx-step.is-now small { color: var(--ember-ink); }
.s-features .fx-step:not(.is-done):not(.is-now) b { color: var(--slate); }
.s-features .fx-step em { font-size: 0.64em; color: var(--slate); }

.s-features .fx-linkcard { display: flex; align-items: center; gap: 0.7em; margin-top: 0.6em; padding: 0.72em 0.95em; }
.s-features .fx-linkcard > i { display: grid; place-items: center; flex: none; width: 1.85em; height: 1.85em; border-radius: 50%; background: var(--temper-soft); color: var(--temper-ink); }
.s-features .fx-linkcard > i .i { width: 1em; height: 1em; }
.s-features .fx-linkcard b { display: block; font-size: 0.72em; line-height: 1.25; }
.s-features .fx-linkcard small { font-size: 0.62em; color: var(--slate); }
.s-features .fx-linkcard em { margin-left: auto; padding: 0.35em 0.7em; border-radius: 1em; font-size: 0.58em; font-weight: 600; background: var(--patina-soft); color: var(--patina-ink); }

.s-features .fx-promise { display: flex; align-items: center; gap: 0.7em; margin-top: 0.6em; padding: 0.72em 0.95em; }
.s-features .fx-promise > i { display: grid; place-items: center; flex: none; width: 1.85em; height: 1.85em; border-radius: 50%; background: var(--ember-soft); color: var(--ember-ink); }
.s-features .fx-promise > i .i { width: 0.95em; height: 0.95em; }
.s-features .fx-promise b { display: block; font-size: 0.72em; line-height: 1.25; }
.s-features .fx-promise small { font-size: 0.6em; color: var(--slate); }

/* ---------- Screen 2: preview ---------- */
.s-features .fx-url {
  display: flex; align-items: center; gap: 0.45em; flex: none;
  height: 2.5em; margin: 0.1em 0.95em 0; padding: 0 0.4em 0 0.85em;
  border-radius: 2em; background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
}
.s-features .fx-url > .i { width: 0.85em; height: 0.85em; color: var(--slate); }
.s-features .fx-url span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72em; font-weight: 500; }
.s-features .fx-url em { padding: 0.4em 0.75em; border-radius: 1em; font-size: 0.56em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--ember-soft); color: var(--ember-ink); }
.s-features .fx-site {
  position: relative; flex: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 12.4em; margin: 0.65em 0.95em 0; padding: 0.95em 1em 3.5em;
  border-radius: 1.4em; color: var(--white);
  background-position: 30% 40%;
}
.s-features .fx-site::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(20deg, rgba(120, 40, 8, 0.42) 0%, rgba(120, 40, 8, 0) 60%);
}
.s-features .fx-site > * { position: relative; z-index: 1; }
.s-features .fx-site__top { display: flex; justify-content: space-between; align-items: center; }
.s-features .fx-site__logo { font-size: 1.05em; font-weight: 600; letter-spacing: -0.03em; }
.s-features .fx-site__logo em { color: var(--ink); }
.s-features .fx-site__tag { display: inline-flex; align-items: center; height: 2.1em; padding: 0 0.85em; border-radius: 1em; font-size: 0.62em; font-weight: 500; background: rgba(20, 20, 20, 0.82); }
.s-features .fx-site__copy small { font-size: 0.56em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.s-features .fx-site__copy b { display: block; margin-top: 0.3em; max-width: 7.6em; font-size: 1.5em; font-weight: 400; line-height: 1.04; letter-spacing: -0.035em; }
.s-features .fx-sec--gap { margin-top: 2.25em; }
.s-features .fx-prods { display: flex; justify-content: space-between; padding: 0.75em 3.1em 0.7em 0.85em; }
.s-features .fx-prods span { display: grid; justify-items: center; gap: 0.1em; text-align: center; }
.s-features .fx-prods i { width: 2.65em; height: 2.65em; margin-bottom: 0.25em; border-radius: 50%; }
.s-features .fx-prods b { font-size: 0.56em; line-height: 1.2; white-space: nowrap; }
.s-features .fx-prods small { font-size: 0.56em; color: var(--slate); }
.s-features .fx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55em; flex: none; margin: 0.6em 0.95em 0; }
.s-features .fx-grid2 span { height: 7.4em; border-radius: 1.1em; }
.s-features .fx-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; gap: 0.2em;
  padding: 0.65em 1.15em 1.55em;
  border-radius: 1.6em 1.6em 0 0;
  background: var(--white);
  box-shadow: 0 -12px 26px -14px rgba(20, 20, 20, 0.24);
}
.s-features .fx-sheet__grab { justify-self: center; width: 2.6em; height: 0.3em; margin-bottom: 0.5em; border-radius: 1em; background: var(--fog); }
.s-features .fx-sheet b { font-size: 0.86em; }
.s-features .fx-sheet small { font-size: 0.64em; line-height: 1.4; color: var(--slate); }
.s-features .fx-pay {
  display: flex; align-items: center; justify-content: space-between;
  height: 3em; margin-top: 0.7em; padding: 0 0.42em 0 1.1em;
  border-radius: 2em; background: var(--ink); color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.s-features .fx-pay span { font-size: 0.78em; font-weight: 500; }
.s-features .fx-pay em { display: inline-flex; align-items: center; height: 3.4em; padding: 0 1em; border-radius: 2em; font-size: 0.6em; font-weight: 600; background: var(--white); color: var(--ink); }
.s-features .fx-scr--preview .fx-homebar { z-index: 3; }

/* ---------- Screen 3: report ---------- */
.s-features .fx-rhead { display: flex; align-items: center; justify-content: space-between; flex: none; margin: 0.2em 1.3em 0.7em; }
.s-features .fx-rhead b { font-size: 1em; letter-spacing: -0.015em; }
.s-features .fx-rhead em { padding: 0.4em 0.75em; border-radius: 1em; font-size: 0.56em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--mist); color: var(--slate); }
.s-features .fx-row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; }
.s-features .fx-row2 > b { font-size: 0.74em; }
.s-features .fx-row2 > small { font-size: 0.6em; color: var(--slate); }
.s-features .fx-donut { padding: 0.8em 0.9em 0.8em; }
.s-features .fx-donut__ring { position: relative; width: 11.4em; height: 11.4em; margin: 0.45em auto 0.35em; }
.s-features .fx-donut__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.s-features .fx-donut__ring circle { fill: none; stroke-width: 15; }
.s-features .fx-ring-bg { stroke: var(--mist); }
.s-features .fx-seg--ember  { stroke: var(--ember); }
.s-features .fx-seg--patina { stroke: var(--patina); }
.s-features .fx-seg--temper { stroke: var(--temper); }
.s-features .fx-donut__mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.s-features .fx-donut__mid b { font-size: 1.5em; font-weight: 400; line-height: 1.05; letter-spacing: -0.04em; }
.s-features .fx-donut__mid small { font-size: 0.6em; color: var(--slate); }
.s-features .fx-bub {
  position: absolute; left: var(--x); top: var(--y);
  padding: 0.5em 0.6em; margin: -1em 0 0 -1.6em; border-radius: 1em;
  font-size: 0.56em; font-weight: 600; line-height: 1;
  background: var(--white); box-shadow: 0 2px 8px rgba(20, 20, 20, 0.16);
}
.s-features .fx-legend { display: flex; justify-content: center; gap: 0.3em; }
.s-features .fx-legend span {
  display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap;
  padding: 0.45em 0.65em; border-radius: 1em; background: var(--paper);
  font-size: 0.54em;
}
.s-features .fx-legend span::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--ember); }
.s-features .fx-legend .is-patina::before { background: var(--patina); }
.s-features .fx-legend .is-temper::before { background: var(--temper); }
.s-features .fx-clicks { margin-top: 0.6em; padding: 0.8em 0.9em 0.7em; }
.s-features .fx-clicks .fx-row2 small { font-size: 0.6em; color: var(--slate); }
.s-features .fx-clicks .fx-row2 b { display: flex; align-items: center; gap: 0.4em; margin-top: 0.1em; font-size: 1.3em; font-weight: 400; line-height: 1.1; letter-spacing: -0.035em; }
.s-features .fx-clicks .fx-row2 b em { padding: 0.35em 0.55em; border-radius: 1em; font-size: 0.42em; font-weight: 600; letter-spacing: 0; background: var(--patina-soft); color: var(--patina-ink); }
.s-features .fx-drop { align-self: flex-start; }
.s-features .fx-clicks__plot { position: relative; height: 6em; margin-top: 0.45em; display: flex; flex-direction: column; justify-content: space-between; }
.s-features .fx-clicks__plot span { height: 1px; background: var(--line); }
.s-features .fx-axis { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 0.4em; font-size: 0.54em; color: var(--stone); }
.s-features .fx-axis span:last-child { color: var(--ember-ink); font-weight: 600; }
.s-features .fx-plain { display: flex; align-items: center; gap: 0.65em; margin-top: 0.6em; padding: 0.7em 0.9em; background: var(--patina-soft); box-shadow: none; }
.s-features .fx-plain > i { display: grid; place-items: center; flex: none; width: 1.95em; height: 1.95em; border-radius: 50%; background: var(--white); color: var(--patina-ink); }
.s-features .fx-plain > i .i { width: 1em; height: 1em; }
.s-features .fx-plain span { font-size: 0.66em; line-height: 1.35; color: var(--ink); }

/* ---------- Floating chips (outside the phone's edges) ---------- */
.s-features .fx-chips { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.s-features .fx-chips:not(.is-on) { opacity: 0; visibility: hidden; }
.s-features .fx-chips > * { position: absolute; }

/* dark pill row (reference Deposit / Send / More) */
.s-features .fx-pills { left: -3.2em; right: -3.2em; display: flex; gap: 0.45em; }
.s-features .fx-pills--build { top: 16.2em; }
.s-features .fx-pills--preview { top: 17.4em; }
.s-features .fx-pill {
  flex: 1; display: flex; align-items: center; gap: 0.5em;
  height: 2.6em; padding: 0 0.9em 0 0.34em; border-radius: 2em;
  background: linear-gradient(180deg, #262626, var(--coal));
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px -10px rgba(20, 20, 20, 0.55);
}
.s-features .fx-pill > i {
  display: grid; place-items: center; flex: none;
  width: 1.9em; height: 1.9em; border-radius: 0.6em;
  background: var(--white); color: var(--ink);
}
.s-features .fx-pill > i .i { width: 1.1em; height: 1.1em; stroke-width: 2.2; }
.s-features .fx-pill b { flex: 1; text-align: center; font-size: 0.86em; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }

/* a list row lifted off the screen, a little wider than the phone (reference "Shopping -$125") */
.s-features .fx-lift {
  left: -1.3em; right: -1.3em;
  display: flex; align-items: center; gap: 0.75em;
  height: 3.9em; padding: 0 1.1em 0 0.75em;
  border-radius: 1.05em;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 22px 40px -18px rgba(20, 20, 20, 0.34);
}
.s-features .fx-lift > i {
  display: grid; place-items: center; flex: none;
  width: 2.35em; height: 2.35em; border-radius: 50%;
  color: var(--white); background: var(--ember);
}
.s-features .fx-lift > i.is-patina { background: var(--patina); }
.s-features .fx-lift > i.is-temper { background: var(--temper); }
.s-features .fx-lift > i .i { width: 1.15em; height: 1.15em; stroke-width: 2.2; }
.s-features .fx-lift > span { flex: 1; min-width: 0; }
.s-features .fx-lift b { display: block; font-size: 0.9em; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
.s-features .fx-lift small { display: block; margin-top: 0.1em; font-size: 0.68em; color: var(--slate); }
.s-features .fx-lift em { font-style: normal; font-size: 0.74em; font-weight: 500; color: var(--slate); white-space: nowrap; }
.s-features .fx-lift--build { top: 22.85em; }
.s-features .fx-lift--preview { top: 31.4em; }
.s-features .fx-lift--report { top: 38.5em; }

/* round accent disc half outside the right edge (reference orange "+") */
.s-features .fx-disc {
  display: grid; place-items: center;
  width: 3.5em; height: 3.5em; border-radius: 50%;
  color: var(--white); background: var(--patina);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 14px 26px -12px rgba(62, 107, 58, 0.7);
}
.s-features .fx-disc .i { width: 1.6em; height: 1.6em; }
.s-features .fx-disc--wa { top: 24.1em; right: -1.75em; }

/* the clicks line runs past both edges (reference spending chart).
   viewBox x maps onto [-3.6em, 100% + 3.6em]; y onto [top, top + height]. */
.s-features .fx-chips { --wx: -3.6em; --ww: calc(100% + 7.2em); --wt: 26.1em; --wh: 6.2em; }
.s-features .fx-wave { left: var(--wx); top: var(--wt); width: var(--ww); max-width: none; height: var(--wh); overflow: visible; }
.s-features .fx-wave__area--patina { fill: url(#fx-wave-area-p); }
.s-features .fx-wave__area--ember { fill: url(#fx-wave-area-e); }
.s-features .fx-wave__line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.s-features .fx-wave__line--patina { stroke: var(--patina); }
.s-features .fx-wave__line--ember { stroke: var(--ember); }
.s-features .fx-wave__cursor { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.s-features .fx-wave__cursor--patina { stroke: var(--patina); }
.s-features .fx-wave__cursor--ember { stroke: var(--ember); opacity: 0.7; }
.s-features .fx-wave__dot {
  width: 0.72em; height: 0.72em; margin: -0.36em 0 0 -0.36em; border-radius: 50%;
  background: var(--patina); box-shadow: 0 0 0 0.2em var(--white), 0 2px 6px rgba(20, 20, 20, 0.2);
}
.s-features .fx-wave__dot--patina { left: calc(var(--wx) + var(--ww) * 0.6); top: calc(var(--wt) + var(--wh) * 0.30); }
.s-features .fx-wave__dot--ember  { left: calc(var(--wx) + var(--ww) * 0.625); top: calc(var(--wt) + var(--wh) * 0.40); background: var(--ember); }
.s-features .fx-tip {
  left: calc(var(--wx) + var(--ww) * 0.6125); top: calc(var(--wt) - 1.1em);
  translate: -50% 0;
  display: inline-flex; align-items: center; height: 1.4em; padding: 0 0.55em; border-radius: 1em;
  white-space: nowrap;
  background: var(--white); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 4px 12px -2px rgba(20, 20, 20, 0.18);
}
.s-features .fx-tip > span { font-size: 0.64em; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }

/* ==========================================================================
   Tablet: heading on top, phone and list side by side
   ========================================================================== */
@media (min-width: 720px) {
  .s-features .fx-surface {
    --pad-y: clamp(44px, 6vw, 64px);
    --pad-x: clamp(28px, 4vw, 44px);
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "head head" "device list" "device foot";
    column-gap: clamp(28px, 4vw, 48px);
  }
  .s-features .fx-title { max-width: 18ch; }
  .s-features .fx-device { --phone-w: 212px; margin: clamp(36px, 5vw, 56px) 30px 0; align-self: start; }
  .s-features .fx-list { margin-top: clamp(36px, 5vw, 56px); align-self: start; }
  .s-features .fx-foot { align-self: start; }
}
@media (min-width: 720px) and (max-width: 959.98px) {
  .s-features .fx-surface {
    column-gap: 18px;
    grid-template-rows: auto 1fr auto auto 1fr;
    grid-template-areas: "head head" "device ." "device list" "device foot" "device .";
  }
  .s-features .fx-list { margin-top: clamp(36px, 5vw, 56px); }
  .s-features .fx-row { --fs-t: 1.3rem; --px: 20px; --py: 20px; }
  .s-features .fx-row__btn { gap: 0.42em; }
  .s-features .fx-foot { --fx-foot-x: 20px; }
}

/* ==========================================================================
   Desktop: phone left, everything else right, vertically centred.
   The card is sized to fit the viewport because it pins.
   ========================================================================== */
@media (min-width: 960px) {
  .s-features .fx-surface {
    --pad-y: clamp(44px, 7.4vh, 80px);
    --pad-x: clamp(32px, 3.4vw, 48px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "device ." "device head" "device list" "device foot" "device .";
    column-gap: clamp(32px, 3.6vw, 56px);
    padding: var(--pad-y) var(--pad-x);
  }
  .s-features .fx-title { max-width: none; }
  .s-features .fx-br { display: inline; }
  .s-features .fx-device {
    --phone-w: clamp(236px, calc((100vh - 250px) * 0.47), 292px);
    margin: 0; align-self: center;
  }
  .s-features .fx-list { margin-top: clamp(28px, 3.3vw, 48px); }
  .s-features .fx-row {
    --fs-t: clamp(1.375rem, 0.3rem + 1.8vw, 2rem);
    --px: clamp(24px, 2.35vw, 34px);
    --py: clamp(20px, 1.95vw, 28px);
  }
  .s-features .fx-foot { --fx-foot-x: var(--px, 30px); margin-top: 26px; }
}
@media (min-width: 1200px) {
  .s-features .fx-surface { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 960px) and (max-height: 760px) {
  .s-features .fx-row { --py: 18px; }
  .s-features .fx-list { margin-top: 26px; }
}

/* ---- home/why.css ---- */
/* ==========================================================================
   06 WHY — "Why Forge"
   A white rounded window holding a mist inset panel. Copy on the left, a stack
   of "folder" cards on the right: each folder has its top-right corner cut away
   for a tab label, a satin gradient in its metal, a big figure and floating pills
   that overlap its left edge.
   Modes
   - default (no JS, ?qa=1, reduced motion): folders in a column beside sticky copy;
     below 960px a two-column grid, then a single column.
   - .is-scene (desktop with motion, set by why.js): the window pins and the folders
     travel up through the panel one after another; pills trail their folder.
   Everything inside a folder is sized off the folder width (container units).
   ========================================================================== */

.s-why { position: relative; }

/* ---------- Window + inset panel ---------- */
.s-why .why-surface {
  --frame: clamp(10px, 2.2vw, 28px);
  padding: var(--frame);
  background: var(--white);
  border-radius: var(--r-xl);
}

.s-why .why-panel {
  --pad-x: clamp(22px, 4.4vw, 64px);
  --pad-y: clamp(32px, 5vw, 72px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 48px);
  padding: var(--pad-y) var(--pad-x);
  background: var(--mist);
  border-radius: calc(var(--r-xl) - 4px);
  overflow: hidden;
  overflow: clip; /* clips like hidden but is not a scroll container, so the sticky copy tracks the viewport */
}
/* soft daylight from the top left, and a faint brushed sheen low on the left
   (both stay clear of the right column, where the tab cut-outs need flat mist) */
.s-why .why-panel::before,
.s-why .why-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.s-why .why-panel::before {
  inset: 0;
  background: radial-gradient(48% 42% at 16% 0%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 72%);
}
.s-why .why-panel::after {
  left: -14%;
  bottom: -34%;
  width: 72%;
  height: 86%;
  background: repeating-linear-gradient(116deg, rgba(255, 255, 255, 0.85) 0 1px, rgba(255, 255, 255, 0) 1px 7px);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
  opacity: 0.7;
}

/* ---------- Copy ---------- */
.s-why .why-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 40px;
}
.s-why .why-head {
  display: grid;
  justify-items: start;
  gap: 20px;
}
.s-why .why-title { max-width: 13.5ch; }
.s-why .why-br { display: none; }
.s-why .why-lead { max-width: 30em; margin-top: 4px; }

/* progress index: only meaningful while the scene is pinned */
.s-why .why-index { display: none; }

/* ---------- Folder rack ---------- */
.s-why .why-stage { position: relative; }
.s-why .why-rack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 40px);
}

.s-why .why-folder {
  --c: var(--brass);
  --c-deep: var(--brass);
  --silk: url("../../img/silk/card-brass.webp");
  --fg: var(--white);
  --notch-bg: var(--mist);
  --notch-r: 20px;
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1.24;
  color: var(--fg);
}
.s-why .why-folder--patina { --c: var(--patina); --c-deep: var(--patina-ink); --silk: url("../../img/silk/card-patina.webp"); }
.s-why .why-folder--temper { --c: var(--temper); --c-deep: var(--temper-ink); --silk: url("../../img/silk/card-temper.webp"); }
.s-why .why-folder--ember  { --c: var(--ember);  --c-deep: var(--ember-ink);  --silk: url("../../img/silk/card-ember.webp"); }
/* brass is a light metal: ink text keeps it readable (white on brass is 2.2:1) */
.s-why .why-folder--brass  { --fg: var(--ink); }

/* satin face: the metal's deep tone under the text, its own colour above,
   a blurred silk bloom and a highlight towards the top right */
.s-why .why-folder__face {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(28deg, var(--c-deep) 0%, var(--c) 58%, var(--c) 100%);
  box-shadow:
    0 34px 60px -34px rgba(20, 20, 20, 0.5),
    0 14px 28px -18px rgba(20, 20, 20, 0.22);
  transform: translateZ(0);
}
.s-why .why-folder__face::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -25%;
  bottom: -20%;
  left: 20%;
  background: var(--silk) center / cover no-repeat;
  filter: blur(26px) saturate(1.08);
  opacity: 0.8;
  -webkit-mask-image: radial-gradient(closest-side at 62% 38%, #000 25%, transparent 100%);
  mask-image: radial-gradient(closest-side at 62% 38%, #000 25%, transparent 100%);
}
.s-why .why-folder__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(64% 70% at 78% 8%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 62%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 64%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.s-why .why-folder--brass .why-folder__face {
  background: linear-gradient(28deg, var(--brass) 0%, var(--brass) 55%, var(--brass-soft) 130%);
}
.s-why .why-folder--brass .why-folder__face::before { opacity: 0.38; filter: blur(34px) saturate(1.1); }

/* tab label in the cut-out corner (reference "Payments") */
.s-why .why-folder__tab {
  z-index: 3;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
}
.s-why .why-folder__tab span {
  display: inline-flex;
  align-items: center;
  height: clamp(36px, 8.6cqw, 46px);
  padding: 0 clamp(14px, 4cqw, 22px);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: clamp(0.875rem, 3.3cqw, 1.0625rem);
  letter-spacing: -0.005em;
  color: var(--slate);
  white-space: nowrap;
}

/* figure + caption, bottom left */
.s-why .why-folder__body {
  position: absolute;
  z-index: 2;
  left: 7.5%;
  right: 8%;
  bottom: 8.5%;
}
.s-why .why-folder__num {
  font-size: clamp(2.25rem, 12.6cqw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 400;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  white-space: nowrap;
}
.s-why .why-folder__cap {
  margin-top: 0.55em;
  max-width: 22em;
  font-size: clamp(0.9375rem, 3.9cqw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.s-why .why-folder__src {
  margin-top: 0.95em;
  font-size: clamp(0.6875rem, 2.5cqw, 0.8125rem);
  line-height: 1.35;
  letter-spacing: 0.005em;
  opacity: 0.78;
}
.s-why .why-folder--brass .why-folder__src { opacity: 0.72; }

/* ---------- Floating pills ---------- */
.s-why .why-pill {
  position: absolute;
  z-index: 4;
  left: var(--x);
  top: var(--y);
  font-size: clamp(13px, 3.8cqw, 19px);
  transform: rotate(var(--r));
  transform-origin: 18% 50%;
}
.s-why .why-pill__in {
  display: inline-flex;
  align-items: center;
  gap: 0.72em;
  height: 3.25em;
  padding: 0 1.35em 0 0.34em;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-weight: 450;
  letter-spacing: -0.012em;
  white-space: nowrap;
  box-shadow:
    0 22px 40px -18px rgba(20, 20, 20, 0.42),
    0 6px 14px -6px rgba(20, 20, 20, 0.16),
    inset 0 -1px 0 rgba(20, 20, 20, 0.04);
}
.s-why .why-pill__disc {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.57em;
  height: 2.57em;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
}
.s-why .why-pill__disc svg { width: 1.1em; height: 1.1em; stroke-width: 1.9; }

/* glass pill with a dark disc (reference "Withdraw") */
.s-why .why-pill--glass { z-index: 3; font-size: clamp(12px, 3.4cqw, 17px); }
.s-why .why-pill--glass .why-pill__in {
  height: 2.9em;
  padding-right: 1.25em;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 10px 24px -14px rgba(20, 20, 20, 0.3);
}
.s-why .why-pill--glass .why-pill__disc {
  width: 2.3em;
  height: 2.3em;
  background: var(--c-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.s-why .why-folder--ember .why-pill--glass .why-pill__in { background: rgba(255, 255, 255, 0.58); }

/* sparkline chip (reference "32%") */
.s-why .why-pill--spark .why-pill__in {
  height: auto;
  gap: 1em;
  padding: 0.85em 1em 0.85em 1.05em;
  border-radius: 1.15em;
}
.s-why .why-spark__txt { display: grid; gap: 0.3em; }
.s-why .why-spark__txt b {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 1.12em;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.s-why .why-spark__txt b svg { width: 0.95em; height: 0.95em; stroke-width: 2.1; }
.s-why .why-spark__txt small {
  font-size: max(10.5px, 0.7em);
  line-height: 1.2;
  color: var(--slate);
  letter-spacing: 0;
}
.s-why .why-spark__plot { width: 5.6em; height: 2.9em; overflow: visible; }
.s-why .why-spark__line {
  fill: none;
  stroke: var(--patina);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* chat bubble (incoming message) */
.s-why .why-pill--bubble .why-pill__in {
  display: grid;
  gap: 0.28em;
  height: auto;
  max-width: 13.5em;
  padding: 0.8em 1.05em 0.62em;
  border-radius: 1.15em 1.15em 1.15em 0.32em;
  white-space: normal;
  line-height: 1.3;
}
.s-why .why-pill--bubble small {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.3em;
  font-size: 0.66em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.s-why .why-pill--bubble small svg { width: 1.3em; height: 1.3em; color: var(--temper-ink); stroke-width: 2; }

/* "typing" dots: the reply on its way */
.s-why .why-pill--typing { z-index: 3; }
.s-why .why-pill--typing .why-pill__in {
  gap: 0.36em;
  height: 2.3em;
  padding: 0 1em;
  background: var(--ink);
  box-shadow: 0 14px 28px -14px rgba(20, 20, 20, 0.55);
}
.s-why .why-pill--typing i {
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  animation: why-typing 1.3s var(--ease-in-out) infinite;
}
.s-why .why-pill--typing i:nth-child(2) { animation-delay: 0.16s; }
.s-why .why-pill--typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes why-typing {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-0.18em); }
}
.is-qa .s-why .why-pill--typing i { animation: none; opacity: 0.8; }

/* ---------- Tablet: two folders a row ---------- */
@media (min-width: 640px) and (max-width: 959.98px) {
  .s-why .why-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .s-why .why-folder { aspect-ratio: 1.02; }
  .s-why .why-folder__cap { font-size: clamp(0.875rem, 4.6cqw, 1.0625rem); }
  .s-why .why-lead { max-width: 36em; }
}
@media (max-width: 639.98px) {
  .s-why .why-folder { aspect-ratio: 1.1; }
}

/* ---------- Desktop ---------- */
@media (min-width: 960px) {
  .s-why .why-panel {
    grid-template-columns: minmax(0, 1fr) min(42%, 520px);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  .s-why .why-br { display: inline; }
  .s-why .why-title { max-width: none; }
  .s-why .why-copy {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    padding-top: 12px;
  }
  .s-why .why-stage { padding-block: 8px; }
}

/* ---------- Pinned scene (desktop, motion) ---------- */
@media (min-width: 960px) {
  .s-why.is-scene .why-surface { height: clamp(620px, calc(100vh - 56px), 820px); }
  .s-why.is-scene .why-panel {
    height: 100%;
    grid-template-rows: minmax(0, 1fr);
  }
  .s-why.is-scene .why-copy {
    position: relative;
    top: auto;
    height: 100%;
    grid-template-rows: auto 1fr;
  }
  .s-why.is-scene .why-stage {
    align-self: stretch;
    margin-block: calc(var(--pad-y) * -1);
    padding: 0;
  }
  .s-why.is-scene .why-rack {
    position: absolute;
    inset: 0;
    display: block;
  }
  .s-why.is-scene .why-folder {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    will-change: transform;
    backface-visibility: hidden;
  }
  .s-why.is-scene .why-pill { will-change: transform; }

  .s-why.is-scene .why-index {
    display: grid;
    align-self: end;
    justify-items: start;
    gap: 14px;
  }
  .s-why .why-index__count {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--fs-small);
    color: var(--stone);
    letter-spacing: 0.02em;
  }
  .s-why .why-index__count b { font-weight: 500; color: var(--ink); }
  .s-why .why-index__steps { display: flex; gap: 22px; }
  .s-why .why-index__steps li { display: grid; gap: 10px; }
  .s-why .why-index__steps i {
    position: relative;
    display: block;
    width: 56px;
    height: 2px;
    border-radius: 2px;
    background: var(--line-strong);
    overflow: hidden;
  }
  .s-why .why-index__steps b {
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: scaleX(var(--f, 0));
    transform-origin: left center;
  }
  .s-why .why-index__steps li:first-child b { --f: 1; }
  .s-why .why-index__steps span {
    font-size: 0.8125rem;
    color: var(--stone);
    transition: color var(--dur-2) var(--ease-out);
  }
  .s-why .why-index__steps li.is-on span { color: var(--ink); }
}

/* ---- home/orbit.css ---- */
/* ==========================================================================
   07 ORBIT — "What you get"
   A coal rounded panel. Left: three large items, the active one white with a
   small glossy tile sliding in before it. Right: a thin orbit (one solid ring,
   one dashed) with dark badges riding it, and a carousel of coloured frames
   travelling along a very large wheel pivoted off to the right: the previous
   frame leaves up and to the right, the next waits bottom right, tilted.
   Geometry is driven by --cw (frame width): ring = 1.86 cw, centred 0.3 cw to
   the right of the frame. orbit.js places the frames; CSS gives a static state.
   ========================================================================== */

.s-orbit { position: relative; }

.s-orbit .orbit-panel {
  --pad-x: clamp(22px, 5.5vw, 80px);
  --pad-y: clamp(28px, 4.4vw, 64px);
  --cw: min(76vw, 420px);                 /* frame width */
  --ch: calc(var(--cw) / 1.28);           /* frame height */
  --cx: 47%;                              /* frame centre, across the stage */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--coal);
  display: flex;
  flex-direction: column;
  padding: var(--pad-y) var(--pad-x);
}

/* ---------- Copy ---------- */
.s-orbit .orbit-copy,
.s-orbit .orbit-main { display: contents; }
.s-orbit .orbit-eyebrow { order: 1; position: relative; z-index: 2; margin: 0; }
.s-orbit .orbit-list    { order: 2; }
.s-orbit .orbit-detail  { order: 3; }
.s-orbit .orbit-stage   { order: 4; }

.s-orbit .orbit-list {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  margin-top: 22px;
}
.s-orbit .orbit-item {
  --tile: 0.84em;
  --gap: 0.36em;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  /* room on the right for the label's shift when active, so focus ring and hit area cover it */
  padding: 0.17em calc(var(--tile) + var(--gap) + 0.2em) 0.17em 0;
  font-size: clamp(1.375rem, 0.9rem + 2.2vw, 1.875rem);
  line-height: 1.22;
  letter-spacing: -0.021em;
  font-weight: 400;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  color: var(--stone);
  text-align: left;
  white-space: nowrap;
  border-radius: 10px;
  transition: color 0.55s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.s-orbit .orbit-item:focus-visible { outline-offset: 4px; }
.s-orbit .orbit-item__label {
  display: block;
  transition: transform 0.8s var(--ease-out);
}
.s-orbit .orbit-item__tile {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--tile);
  height: var(--tile);
  margin-top: calc(var(--tile) / -2);
  border-radius: 0.24em;
  opacity: 0;
  transform: translate3d(-0.7em, 0, 0) scale(0.55) rotate(-12deg);
  filter: blur(5px);
  transition: opacity 0.4s var(--ease-out), transform 0.8s var(--ease-out), filter 0.6s var(--ease-out);
  /* glossy, like a small enamel badge */
  background-image: linear-gradient(155deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 52%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.18), 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}
.s-orbit .orbit-item__tile svg { width: 0.46em; height: 0.46em; stroke-width: 2; }
.s-orbit .orbit-item.is-active { color: var(--white); }
.s-orbit .orbit-item.is-active .orbit-item__label { transform: translate3d(calc(var(--tile) + var(--gap)), 0, 0); }
.s-orbit .orbit-item.is-active .orbit-item__tile {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-delay: 0.08s, 0.04s, 0.08s;
}
@media (hover: hover) and (pointer: fine) {
  .s-orbit .orbit-item:not(.is-active):hover { color: rgba(255, 255, 255, 0.66); }
}
/* static state (QA stands in for reduced motion): switch instantly */
.is-qa .s-orbit .orbit-item,
.is-qa .s-orbit .orbit-item * { transition: none !important; }
/* Static only (nothing switches by itself there): "Choose one to see more" (forge.css .hint) under the list,
   in room the detail keeps for it */
.is-qa .s-orbit .orbit-detail, .is-reduced .s-orbit .orbit-detail { margin-top: 46px; }

.s-orbit .orbit-detail {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 22px;
  margin-top: 20px;
}
.s-orbit .orbit-line {
  max-width: 34ch;
  min-height: 3em;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.5;
  color: var(--slate);
  text-wrap: pretty;
}
.s-orbit .orbit-actions { display: flex; align-items: center; gap: 12px; }
/* while the pill tweens to its new width the label clips, never the disc */
.s-orbit .orbit-cta .btn__label { display: block; min-width: 0; overflow: hidden; text-overflow: clip; }
.s-orbit .orbit-pause { width: 46px; height: 46px; }
.s-orbit .orbit-pause .i { width: 16px; height: 16px; stroke-width: 2; }
.s-orbit .orbit-pause .i-play { display: none; fill: currentColor; stroke-width: 1.4; }
.s-orbit .orbit-pause.is-paused .i-pause { display: none; }
.s-orbit .orbit-pause.is-paused .i-play { display: block; }

/* ---------- Stage: ring, badges, frames ---------- */
/* touch layouts: the stage closes the panel, bleeding to its bottom edge;
   the frame leaving upwards fades out rather than being cut */
.s-orbit .orbit-stage {
  position: relative;
  z-index: 1;
  height: calc(var(--ch) * 1.7);
  margin: 12px calc(var(--pad-x) * -1) calc(var(--pad-y) * -1);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
}
@media (max-width: 959.98px) {
  .s-orbit .orbit-stage .orbit-cards { top: calc(46% - var(--ch) / 2); }
  .s-orbit .orbit-stage .orbit-ring { top: calc(46% - var(--cw) * 0.93); }
  .s-orbit .orbit-stage .orbit-glow { top: calc(46% - var(--cw) * 1.1); }
}
.s-orbit .orbit-glow {
  position: absolute;
  left: calc(var(--cx) + var(--cw) * 0.3 - var(--cw) * 1.1);
  top: calc(50% - var(--cw) * 1.1);
  width: calc(var(--cw) * 2.2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 70%);
}
.s-orbit .orbit-ring {
  --spin-o: 0deg;
  --spin-i: 0deg;
  position: absolute;
  left: calc(var(--cx) + var(--cw) * 0.3 - var(--cw) * 0.93);
  top: calc(50% - var(--cw) * 0.93);
  width: calc(var(--cw) * 1.86);
  height: calc(var(--cw) * 1.86);
}
.s-orbit .orbit-ring__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}
.s-orbit .orbit-ring__lines circle { fill: none; stroke-width: 1; }
.s-orbit .orbit-ring__solid { stroke: rgba(255, 255, 255, 0.13); }
.s-orbit .orbit-ring__dash { stroke: rgba(255, 255, 255, 0.17); stroke-dasharray: 7 7; }

.s-orbit .orbit-badges { position: absolute; inset: 0; }
.s-orbit .orbit-badges--outer { --rr: calc(var(--cw) * 0.93); --spin: var(--spin-o); }
.s-orbit .orbit-badges--inner { --rr: calc(var(--cw) * 0.69); --spin: var(--spin-i); }
.s-orbit .orbit-badge {
  --size: clamp(40px, calc(var(--cw) * 0.105), 54px);
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.72);
  background: radial-gradient(120% 120% at 30% 18%, #3B3B3B 0%, #262626 46%, #1E1E1E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 26px 8px rgba(255, 255, 255, 0.035),
    0 14px 26px -10px rgba(0, 0, 0, 0.7);
  transform: rotate(calc(var(--a) + var(--spin))) translateX(var(--rr)) rotate(calc(-1 * (var(--a) + var(--spin))));
  will-change: transform;
}
.s-orbit .orbit-badge svg { width: calc(var(--size) * 0.4); height: calc(var(--size) * 0.4); stroke-width: 1.8; }
.s-orbit .orbit-badge .i-fill { width: calc(var(--size) * 0.36); height: calc(var(--size) * 0.36); }

.s-orbit .orbit-cards {
  position: absolute;
  left: calc(var(--cx) - var(--cw) / 2);
  top: calc(50% - var(--ch) / 2);
  width: var(--cw);
  height: var(--ch);
  container-type: inline-size;
}

/* ---------- Frames ---------- */
.s-orbit .orbit-card {
  --c: var(--ember);
  --silk: url("../../img/silk/card-ember.webp");
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(20px, 6cqw, 30px);
  background: var(--c);
  color: var(--ink);
  box-shadow:
    0 50px 90px -40px rgba(0, 0, 0, 0.85),
    0 20px 40px -22px rgba(0, 0, 0, 0.6);
  /* static fallback: slot d on the wheel (JS replaces this with exact values) */
  transform: translate3d(calc(var(--d) * var(--d) * 2.2%), calc(var(--d) * 112%), 0) rotate(calc(var(--d) * -8.5deg));
  will-change: transform;
  backface-visibility: hidden;
}
.s-orbit .orbit-card[style*="--d:0"] { z-index: 3; }
.s-orbit .orbit-card--patina { --c: var(--patina); --silk: url("../../img/silk/card-patina.webp"); }
.s-orbit .orbit-card--temper { --c: var(--temper); --silk: url("../../img/silk/card-temper.webp"); }
.s-orbit .orbit-card::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -2;
  background: var(--silk) center / cover no-repeat;
  filter: blur(12px) saturate(1.05);
}
.s-orbit .orbit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(90% 70% at 22% -6%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 62%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 45%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* Demo renders: transparent objects sitting straight on the frame's silk, with their own
   contact shadows (a soft extra drop shadow lifts them off the saturated colour) */
.s-orbit .oc-img {
  display: block;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 3.6cqw 4.4cqw rgba(0, 0, 0, 0.24));
}
.s-orbit .oc-img--zuva { width: 90%; margin-top: 3cqw; }   /* laptop and phone, 1600x904 */
.s-orbit .oc-img--kiki { width: 86%; margin-top: 4cqw; }   /* identity still life, 1600x1062 */
/* the report phone (1194x1600) stands in the frame and runs off its bottom edge */
.s-orbit .oc-img--report {
  position: absolute;
  left: 50%;
  top: 1.5cqw;
  width: 76%;
  margin-left: -38.5%;
}
.s-orbit .oc-tag {
  position: absolute;
  left: 5cqw;
  top: 5cqw;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: max(22px, 5cqw);
  padding: 0 max(9px, 2.2cqw);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: max(10px, 2.1cqw);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 1.6cqw 3.2cqw -1.6cqw rgba(0, 0, 0, 0.4);
}

/* ---------- Desktop: list left, stage right ---------- */
@media (min-width: 960px) {
  .s-orbit .orbit-panel {
    --cw: clamp(320px, 45vw - 150px, 500px);
    --fs-item: clamp(1.625rem, 0.1rem + 2.95vw, 2.625rem);
    --card-mr: clamp(24px, 4.2vw, 60px);
    --cx: calc(100% - var(--card-mr) - var(--cw) / 2);
    display: block;
    padding: 0;
    min-height: 760px;
  }
  .s-orbit .orbit-copy {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    min-height: inherit;
    height: 100%;
    padding: var(--pad-y) var(--pad-x);
  }
  .s-orbit .orbit-main { display: contents; }
  .s-orbit .orbit-eyebrow { grid-row: 1; align-self: start; }
  .s-orbit .orbit-list { grid-row: 2; margin-top: 0; }
  .s-orbit .orbit-detail { grid-row: 3; align-self: start; margin-top: clamp(28px, 3vw, 44px); }
  .s-orbit .orbit-item { font-size: var(--fs-item); }
  .s-orbit .orbit-stage {
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .s-orbit .orbit-pause { display: none; }
}

/* pinned scene: the panel is one viewport tall */
@media (min-width: 960px) {
  .s-orbit.is-scene .orbit-panel { height: clamp(620px, calc(100vh - 56px), 820px); min-height: 0; }
  /* The pinned panel clips its corners with clip-path rather than overflow: Chrome reports the switch of an
     overflow-clipping element to and from position: fixed as a 0.82 layout shift (CLS), although nothing moves. */
  .s-orbit.is-scene .orbit-panel { overflow: visible; -webkit-clip-path: inset(0 round var(--r-xl)); clip-path: inset(0 round var(--r-xl)); }
}

/* The rotated frames, the badge ring and (on desktop, where the pinned panel clips with clip-path, which still
   counts as overflow) the glow can reach past the screen's edge, and the page would then scroll sideways. Clip
   the section on that axis only, at every width: clip makes no scroll container, leaves vertical overflow
   (shadows) alone, and does not reach the panel while it is pinned (fixed to the viewport). */
.s-orbit { overflow-x: clip; }

/* ---- home/ladder.css ---- */
/* ==========================================================================
   08 LADDER: five website steps as a staircase of cards.
   Each step is a white card whose silk window grows with the step
   (silver, brass, ember, temper, graphite: metal heating in the forge).
   Upgrade chips sit on the risers; the selected step opens its panel below.
   ========================================================================== */

/* The card colour is a registered property so it can transition when a step is
   selected (the notch's ring is cut out of the mat, so it shows this colour too). */
@property --lad-bg { syntax: "<color>"; inherits: true; initial-value: #FFFFFF; }

.s-ladder {
  --lad-gap: 12px;
  --lad-base: 332px;   /* Starter card height */
  --lad-rise: 32px;    /* height added per step (room for the chip above each lower step) */
  --lad-col: min(256px, 68vw);
}
/* phones: a gentler climb, so the row doesn't open with a tall empty band above Starter */
@media (max-width: 719.98px) {
  .s-ladder { --lad-rise: 26px; }
}
@media (min-width: 1200px) {
  .s-ladder { --lad-base: 352px; --lad-rise: 48px; }
}

/* ---------- Head ---------- */
.s-ladder .lad-head {
  display: grid;
  gap: 28px;
  margin-bottom: clamp(16px, 5vw, 76px);
}
@media (min-width: 960px) {
  .s-ladder .lad-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: end; }
}
.s-ladder .lad-head__text { display: grid; gap: 20px; justify-items: start; }
.s-ladder .lad-title { max-width: 22ch; }
.s-ladder .lad-nw { white-space: nowrap; } /* keeps "ready." from sitting alone on the last line */
.s-ladder .lad-head__aside { display: grid; gap: 26px; justify-items: start; }
.s-ladder .lad-lead { max-width: 46ch; }
.s-ladder .lad-mode { display: grid; gap: 12px; justify-items: start; }
.s-ladder .lad-toggle [role="radio"] { color: var(--slate); }
.s-ladder .lad-toggle [role="radio"][aria-checked="true"] { color: var(--ink); }
/* before the script places the sliding pill */
.s-ladder .lad-toggle:not(.is-ready) [aria-checked="true"] { background: var(--white); box-shadow: var(--shadow-1); }
.s-ladder .lad-toggle:not(.is-ready) .segmented__pill { display: none; }
.s-ladder .lad-mode__note {
  max-width: 46ch;
  min-height: 4.5em; /* room for the longer of the two notes, so switching never moves the page */
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--slate);
  text-wrap: pretty;
}
@media (min-width: 720px) { .s-ladder .lad-mode__note { min-height: 3em; } }
/* "Switch to see Flex prices" (forge.css .hint): beside the toggle where the row has room for it, under it
   elsewhere, in a band the toggle keeps whether the hint shows or not */
.s-ladder .lad-toggle { margin-bottom: 22px; }
@media (min-width: 600px) and (max-width: 959.98px), (min-width: 1200px) {
  .s-ladder .lad-toggle { margin-bottom: 0; }
  .s-ladder .lad-toggle__hint { left: calc(100% + 18px); top: 50%; transform: translateY(-50%); }
}

/* initial state from the script lands without animating */
.s-ladder.lad-instant, .s-ladder.lad-instant * { transition: none !important; }

/* Split headline words (script adds .lw when motion runs) */
.s-ladder .lw { display: inline-block; }

/* ---------- Staircase ---------- */
.s-ladder .lad-stage { position: relative; }

/* "Choose a step" hint (forge.css .hint) in the corner the stairs leave empty above Starter, so it never
   moves anything. Below 1200px on touch screens the row is a swipe rail: the shorter swipe hint, with the
   same swipe glyph as the other rails, sits just above the "+$50" chip (clear of it while the row peeks
   sideways); with a mouse the longer one keeps to the top of the corner. */
.s-ladder .lad-hint { position: absolute; z-index: 7; left: 0; top: 0; }
.s-ladder .lad-hint--touch { display: none; }
@media (max-width: 1199.98px) {
  .s-ladder .lad-hint { top: 10px; }
}
@media (hover: none) and (max-width: 1199.98px) {
  .s-ladder .lad-hint { top: calc(10px + var(--lad-rise) * 3.5 - 40px); }
  .s-ladder .lad-hint--fine { display: none; }
  .s-ladder .lad-hint--touch { display: inline-flex; }
}
/* the swipe rail's edge fades (forge.css .hint-rail): wide on the right, where the next step peeks a long
   way; on the left only about the gutter, so the step that has snapped into place stays crisp */
.s-ladder .lad-steps { --hint-fade-r: 56px; --hint-fade-l: calc(var(--gutter) + 6px); }

/* Touch layout: a snap row that still climbs left to right */
.s-ladder .lad-steps {
  display: flex;
  align-items: flex-end;
  gap: var(--lad-gap);
  /* the bottom padding gives the selected card's shadow room inside the scroller; the negative
     margin takes that room back so the controls still sit close under the row */
  margin: 0 calc(var(--gutter) * -1) -56px;
  padding: 10px var(--gutter) 64px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.s-ladder .lad-steps::-webkit-scrollbar { display: none; }
.s-ladder .lad-col {
  position: relative;
  flex: 0 0 var(--lad-col);
  scroll-snap-align: start;
}
@media (min-width: 1200px) {
  .s-ladder .lad-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
}

/* A step */
.s-ladder .lad-step {
  --lad-bg: var(--white);
  --lad-fg: var(--ink);
  --lad-sub: var(--slate);
  --lad-faint: var(--stone);
  --lad-rule: var(--line);
  /* notch knobs, shared by the mat (whose mask cuts the circle) and the cut (which holds the disc) */
  --notch-d: 40px; --notch-gap: 7px; --notch-card-r: calc(var(--r-lg) - 6px);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* a minimum, so a step whose copy wraps grows upward instead of pushing its mat out of the card */
  min-height: calc(var(--lad-base) + var(--i, 0) * var(--lad-rise));
  padding: 6px;
  border-radius: var(--r-lg);
  background: var(--lad-bg);
  color: var(--lad-fg);
  text-align: left;
  container-type: inline-size;
  box-shadow: inset 0 0 0 1px var(--lad-rule), 0 1px 2px rgba(20, 20, 20, 0.04), 0 10px 26px -18px rgba(20, 20, 20, 0.16);
  transition: --lad-bg 0.5s var(--ease-out), color 0.5s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.s-ladder .lad-step[aria-selected="true"] {
  --lad-bg: var(--coal);
  --lad-fg: var(--white);
  --lad-sub: rgba(255, 255, 255, 0.68);
  --lad-faint: rgba(255, 255, 255, 0.4);
  --lad-rule: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 60px -30px rgba(20, 20, 20, 0.65);
}
@media (hover: hover) {
  .s-ladder .lad-step[aria-selected="false"]:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 1px var(--line-strong), 0 2px 6px rgba(20, 20, 20, 0.05), 0 24px 44px -24px rgba(20, 20, 20, 0.28);
  }
}
.s-ladder .lad-step:focus-visible { outline-offset: 4px; border-radius: var(--r-lg); }

.s-ladder .lad-step__body {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 16px;
}
.s-ladder .lad-step__head { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.s-ladder .lad-step__name { font-size: 1.125rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.s-ladder .lad-step__num {
  margin-left: auto;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--lad-faint);
  transition: color 0.5s var(--ease-out);
}
.s-ladder .lad-step__flex {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  background: var(--ember-soft); color: var(--ember-ink);
  opacity: 0; transform: scale(0.6); transform-origin: left center;
  transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out);
}
.s-ladder.is-flex .lad-step__flex { opacity: 1; transform: none; }

.s-ladder .lad-step__val {
  margin-top: 22px;
  font-size: 2.5rem;
  font-size: clamp(2rem, 19cqi, 3rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  white-space: nowrap;
}
.s-ladder .lad-step__plus { margin-left: 0.04em; font-size: 0.62em; vertical-align: 0.42em; color: var(--lad-sub); }
.s-ladder .lad-step__line {
  margin-top: 12px;
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.s-ladder .lad-step__term {
  margin-top: 3px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--lad-sub);
  transition: color 0.5s var(--ease-out);
}
.s-ladder .lad-step__for {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--lad-rule);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--lad-sub);
  text-wrap: pretty;
  transition: color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.s-ladder .lad-step__eta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.3;
}
.s-ladder .lad-step__eta .i { width: 14px; height: 14px; color: var(--ember); flex: none; }

/* Silk window: grows with the step */
.s-ladder .lad-step__mat {
  position: relative;
  flex: 1 1 auto;
  min-height: 62px;
  margin-top: auto;
  border-radius: calc(var(--r-lg) - 6px);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}
.s-ladder .lad-step__silk {
  position: absolute; inset: 0; z-index: 0;
  transition: transform 1.4s var(--ease-out);
}
.s-ladder .lad-step:hover .lad-step__silk { transform: scale(1.07); }
.s-ladder .lad-step__tile {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  color: var(--ink);
}
.s-ladder .lad-step__tile .i { width: 19px; height: 19px; }
/* The round cut: a 40px disc in a 7px ring, bitten out of the mat's 18px corner. The mat is a
   .notch--hole: its mask cuts the whole circle, so the step's own colour shows round the disc. The cut
   lives in the step (shifted by the step's 6px padding), concentric with the mat's circle. */
.s-ladder .lad-step > .lad-step__cut {
  right: calc(var(--notch-in) - var(--notch-R) + 6px); bottom: calc(var(--notch-in) - var(--notch-R) + 6px);
}
.s-ladder .lad-step .arrow-btn {
  transition: transform 0.6s var(--ease-out), background-color 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
.s-ladder .lad-step[aria-selected="true"] .arrow-btn { background: var(--white); color: var(--ink); transform: rotate(90deg); }

/* Upgrade chip: sits in the open space above the lower step, against the riser it climbs */
.s-ladder .lad-rise {
  position: absolute; z-index: 5;
  left: calc(var(--lad-gap) * -1 - 8px);
  top: calc(var(--lad-rise) / 2);
  translate: -100% -50%;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px 0 4px;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--white);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 0 0 3px var(--paper), 0 12px 24px -10px rgba(20, 20, 20, 0.5);
  pointer-events: none;
}
.s-ladder .lad-rise__disc {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ember); color: var(--white);
}
.s-ladder .lad-rise__disc .i { width: 12px; height: 12px; stroke-width: 2.4; }

/* Floor with the sliding marker (desktop grid only) */
.s-ladder .lad-floor { display: none; }
@media (min-width: 1200px) {
  .s-ladder .lad-floor { display: block; position: relative; height: 3px; margin-top: 16px; }
  .s-ladder .lad-floor__line {
    position: absolute; left: 0; right: 0; top: 1px; height: 1px;
    background: var(--line-strong);
    transform-origin: left center;
  }
  .s-ladder .lad-floor__bar {
    position: absolute; left: 0; top: 0; height: 3px; border-radius: 3px;
    width: calc((100% - 4 * var(--lad-gap)) / 5);
    background: var(--ember);
    transform: translateX(calc(var(--sel, 0) * (100% + var(--lad-gap))));
    transition: transform 0.75s var(--ease-out);
  }
}

/* Touch controls */
.s-ladder .lad-nav {
  position: relative; z-index: 6; /* above the scroller's shadow padding */
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px;
}
@media (min-width: 1200px) { .s-ladder .lad-nav { display: none; } }
.s-ladder .lad-nav__count { font-size: var(--fs-small); color: var(--slate); letter-spacing: 0.01em; }
.s-ladder .lad-nav__count b { font-weight: 500; color: var(--ink); }
.s-ladder .lad-nav__label { margin-left: 10px; color: var(--ink); font-weight: 500; }
.s-ladder .lad-nav__btns { display: flex; gap: 8px; }
.s-ladder .lad-nav .icon-btn[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

/* ---------- Detail panel ---------- */
.s-ladder .lad-panels { position: relative; margin-top: 18px; }
@media (min-width: 1200px) { .s-ladder .lad-panels { margin-top: 22px; } }
.s-ladder .lad-panel {
  display: grid;
  gap: 32px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
@media (min-width: 720px) {
  .s-ladder .lad-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-ladder .lad-panel__next { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .s-ladder .lad-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, 0.84fr); gap: clamp(28px, 3.2vw, 52px); }
  .s-ladder .lad-panel__next { grid-column: auto; }
}
.s-ladder .lad-panel__main { display: flex; flex-direction: column; align-items: flex-start; }
.s-ladder .lad-panel__kicker {
  font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ember-ink);
}
.s-ladder .lad-panel__title { margin-top: 14px; }
.s-ladder .lad-panel__for { margin-top: 12px; max-width: 40ch; color: var(--slate); text-wrap: pretty; }
.s-ladder .lad-panel__eta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-size: var(--fs-small); font-weight: 500;
}
.s-ladder .lad-panel__eta .i { width: 16px; height: 16px; color: var(--ember); }
.s-ladder .lad-panel__sum { margin-top: 10px; max-width: 44ch; font-size: var(--fs-small); line-height: 1.55; color: var(--slate); }
.s-ladder .lad-panel__sum .lad-swap { display: inline; }
.s-ladder .lad-panel__cta { margin-top: auto; padding-top: 28px; }

.s-ladder .lad-panel__label {
  margin-bottom: 18px;
  font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--slate);
}
.s-ladder .lad-panel__list { position: relative; padding-top: 2px; }
.s-ladder .lad-ticks { gap: 13px; font-size: 0.9375rem; }
.s-ladder .lad-ticks li { text-wrap: pretty; }
@media (min-width: 1200px) {
  .s-ladder .lad-panel__list::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
    left: calc(clamp(28px, 3.2vw, 52px) * -0.5);
    background: var(--line);
  }
}

.s-ladder .lad-panel__next {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 240px;
  padding: 10px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}
.s-ladder .lad-next {
  width: 100%;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
}
.s-ladder .lad-next__kicker {
  font-size: 0.75rem; font-weight: 600; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate);
}
.s-ladder .lad-next__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 10px;
  font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.02em;
}
.s-ladder .lad-next__title span { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ember-ink); white-space: nowrap; }
.s-ladder .lad-next__text { margin-top: 8px; font-size: 0.875rem; line-height: 1.45; color: var(--slate); text-wrap: pretty; }

/* Swapping figures (Pay upfront / Forge Flex) */
.s-ladder .lad-swap { display: inline-block; }

/* ---------- Foot ---------- */
.s-ladder .lad-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 14px 40px;
  margin-top: 22px;
  padding-inline: 6px;
}
.s-ladder .lad-foot__note { max-width: 80ch; font-size: 0.8125rem; line-height: 1.5; color: var(--slate); }
.s-ladder .lad-foot__link { font-size: 0.9375rem; }

/* ---- home/bundles.css ---- */
/* ==========================================================================
   09 BUNDLES: three white cards, each with a silk window (blush, ember, patina),
   a folder tab naming who it is for, glass tiles for the parts, and a
   receipt-style list that adds up to the struck-through separate price.
   ========================================================================== */

/* ---------- Head ---------- */
.s-bundles .bun-head {
  display: grid;
  gap: 24px;
  margin-bottom: clamp(40px, 4.6vw, 68px);
}
@media (min-width: 960px) {
  .s-bundles .bun-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: end; }
}
.s-bundles .bun-head__text { display: grid; gap: 20px; justify-items: start; }
.s-bundles .bun-title { max-width: 18ch; }
.s-bundles .bun-lead { max-width: 46ch; }
.s-bundles .lw { display: inline-block; }

/* ---------- Grid ---------- */
.s-bundles .bun-grid { display: grid; gap: 16px; }
@media (min-width: 1000px) {
  .s-bundles .bun-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- Card ---------- */
.s-bundles .bun-card {
  --notch-bg: var(--white);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(20, 20, 20, 0.04), 0 12px 30px -20px rgba(20, 20, 20, 0.18);
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
}
@media (hover: hover) {
  .s-bundles .bun-card:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 1px var(--line-strong), 0 2px 6px rgba(20, 20, 20, 0.05), 0 30px 56px -30px rgba(20, 20, 20, 0.3);
  }
}
/* Tablet: window on the left, content on the right */
@media (min-width: 720px) and (max-width: 999.98px) {
  .s-bundles .bun-card { flex-direction: row; align-items: stretch; }
  .s-bundles .bun-mat { flex: 0 0 38%; height: auto !important; min-height: 100%; }
}

/* Silk window */
.s-bundles .bun-mat {
  position: relative;
  height: clamp(188px, 15vw, 216px);
  border-radius: calc(var(--r-xl) - 8px);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}
.s-bundles .bun-mat__silk { position: absolute; inset: 0; z-index: 0; transition: transform 1.6s var(--ease-out); }
.s-bundles .bun-card:hover .bun-mat__silk { transform: scale(1.07); }

/* Folder tab, top right (reference "Payments" label) */
.s-bundles .bun-tab { --notch-r: 16px; z-index: 3; padding: 0 0 8px 8px; border-bottom-left-radius: 22px; }
.s-bundles .bun-tab__chip {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  color: var(--slate);
}

/* The parts, as glass tiles joined by plus signs */
.s-bundles .bun-tiles {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
}
.s-bundles .bun-tile {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  color: var(--ink);
}
.s-bundles .bun-tile .i { width: 22px; height: 22px; }
.s-bundles .bun-plus {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink);
}
.s-bundles .bun-plus .i { width: 11px; height: 11px; stroke-width: 2.4; }

/* Body */
.s-bundles .bun-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 18px 16px;
}
@media (min-width: 720px) and (max-width: 999.98px) { .s-bundles .bun-body { padding: 22px 18px 14px 26px; } }
.s-bundles .bun-name {
  font-size: clamp(1.5rem, 1.25rem + 0.5vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
}
.s-bundles .bun-for {
  margin-top: 10px;
  max-width: 40ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--slate);
  text-wrap: pretty;
}
/* three cards in a row: equal intro height so the receipt rows line up */
@media (min-width: 1000px) { .s-bundles .bun-for { min-height: 6em; } }
@media (min-width: 1200px) { .s-bundles .bun-for { min-height: 4.5em; } }
.s-bundles .bun-list { margin-top: 22px; border-top: 1px solid var(--line); }
.s-bundles .bun-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.s-bundles .bun-list li span:last-child { flex: none; color: var(--slate); }

.s-bundles .bun-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin-top: 22px;
}
.s-bundles .bun-price__now {
  font-size: clamp(2.5rem, 2rem + 1.2vw, 3.125rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
}
.s-bundles .bun-price__was {
  position: relative;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--slate);
}
.s-bundles .bun-price__was s { text-decoration: none; }
/* centred on the figures' x-height (measured: 0.62em from the top of a 1.55 line box) */
.s-bundles .bun-strike {
  position: absolute; left: -3px; right: -3px; top: 0.62em;
  height: 1.5px; border-radius: 2px;
  background: currentColor;
  transform-origin: left center;
}
.s-bundles .bun-save {
  align-self: center;
  margin-left: auto;
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--patina-soft);
  color: var(--patina-ink);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.005em;
}
.s-bundles .bun-then { margin-top: 8px; font-size: var(--fs-small); color: var(--slate); }
.s-bundles .bun-cta { margin-top: auto; padding-top: 24px; }
.s-bundles .bun-cta .btn { padding-left: 24px; }

/* three narrow cards (1000 to 1279px) */
@media (min-width: 1000px) and (max-width: 1279.98px) {
  /* four-figure prices leave no room for the pill, so it takes its own row in every card */
  .s-bundles .bun-price { display: grid; grid-template-columns: auto 1fr; justify-items: start; gap: 10px 14px; }
  .s-bundles .bun-save { grid-column: 1 / -1; margin-left: 0; }
  /* "First three months of Social Growth" wraps here; reserve that line in every list so the prices line up */
  .s-bundles .bun-list { min-height: calc(3 * (24px + 1.4 * 0.9375rem + 1px) + 1.4 * 0.9375rem + 1px); }
  /* keep the arrow disc inside the pill */
  .s-bundles .bun-cta .btn { gap: 12px; padding-left: 20px; font-size: 0.9375rem; }
}

/* ---------- Foot ---------- */
.s-bundles .bun-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 14px 40px;
  margin-top: 22px;
  padding-inline: 6px;
}
.s-bundles .bun-foot__note { font-size: 0.8125rem; line-height: 1.5; color: var(--slate); }
.s-bundles .bun-foot__link { font-size: 0.9375rem; }

/* one column below 1000px that never grows past the container (its auto track followed the widest card's content) */
.s-bundles .bun-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .s-bundles .bun-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- home/faq.css ---- */
/* ==========================================================================
   10 FAQ: sticky heading and Health Check card on the left, numbered
   single-open accordion on the right.
   ========================================================================== */

.s-faq .faq-grid { display: grid; gap: 48px; }
@media (min-width: 1000px) {
  .s-faq .faq-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(56px, 6.5vw, 120px); }
}

/* ---------- Left ---------- */
.s-faq .faq-side__in { display: grid; gap: 20px; justify-items: start; }
@media (min-width: 1000px) {
  .s-faq .faq-side__in { position: sticky; top: calc(var(--header-h) + 36px); }
}
.s-faq .faq-title { max-width: 14ch; }
.s-faq .faq-lead { max-width: 38ch; }
.s-faq .lw { display: inline-block; }

/* Health Check card: blush silk with the reference notch + arrow disc */
.s-faq .faq-help {
  --notch-bg: var(--paper);
  --notch-card-r: var(--r-lg);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 460px;
  min-height: 176px;
  margin-top: 20px;
  padding: 22px 76px 24px 22px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
}
.s-faq .faq-help__silk { position: absolute; inset: 0; z-index: -2; transition: transform 1.4s var(--ease-out); }
/* a soft wash keeps the copy clear of the silk's contour lines */
.s-faq .faq-help::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 55%, rgba(255, 255, 255, 0) 100%);
}
.s-faq .faq-help:hover .faq-help__silk { transform: scale(1.06); }
.s-faq .faq-help__tile {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  color: var(--ink);
}
.s-faq .faq-help__tile .i { width: 20px; height: 20px; }
.s-faq .faq-help__text { display: grid; gap: 6px; padding-top: 2px; }
.s-faq .faq-help__title { font-size: 1.1875rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.s-faq .faq-help__body { font-size: 0.9375rem; line-height: 1.5; color: rgba(20, 20, 20, 0.76); text-wrap: pretty; }
.s-faq .faq-help:focus-visible { outline-offset: 4px; border-radius: var(--r-lg); }

/* ---------- Accordion ---------- */
.s-faq .faq-q { font-size: inherit; line-height: inherit; }
.s-faq .acc-trigger {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 12px;
  padding: 22px 0;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
@media (min-width: 720px) {
  .s-faq .acc-trigger { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 26px 0; }
}
.s-faq .faq-num {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--slate);
  transition: color var(--dur-2) var(--ease-out);
}
.s-faq .faq-text { text-wrap: pretty; }
.s-faq .acc-item.is-open .faq-num { color: var(--ember-ink); }
/* the icon overhangs the row so the first text line sets its height: number and question share a
   baseline, and a one-line question sits on the icon's centre */
.s-faq .acc-icon { align-self: center; width: 40px; height: 40px; margin-block: -7px; }
@media (hover: hover) {
  .s-faq .acc-item:not(.is-open) .acc-trigger:hover .acc-icon { background: var(--mist); border-color: var(--ink); }
}
.s-faq .acc-trigger:focus-visible { outline-offset: 2px; border-radius: 10px; }
.s-faq .acc-body { padding: 0 0 24px 46px; max-width: none; }
@media (min-width: 720px) { .s-faq .acc-body { padding: 0 64px 28px 60px; } }
.s-faq .acc-body p { max-width: 62ch; text-wrap: pretty; }

/* Collapsed answers leave the tab order and the accessibility tree once closed */
.s-faq .acc-item:not(.is-open) .acc-panel > div { visibility: hidden; transition: visibility 0s linear 0.55s; }
.s-faq .acc-item.is-open .acc-panel > div { visibility: visible; }

.s-faq .faq-more { margin-top: 28px; font-size: var(--fs-small); color: var(--slate); }
.s-faq .faq-more .link { color: var(--ink); }

/* ---- home/cta.css ---- */
/* ==========================================================================
   11 CTA: graphite silk band (forge.css .cta-band) with the Health Check
   offer on the left and four glass chips, the four things we check, on the right.
   ========================================================================== */

.s-cta .cta-box { padding: clamp(40px, 6.4vw, 96px) clamp(24px, 4.6vw, 72px); }
/* keeps the copy readable where the silk turns light */
.s-cta .cta-box::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.5) 0%, rgba(15, 15, 15, 0.22) 55%, rgba(15, 15, 15, 0.4) 100%);
}
@media (min-width: 1240px) {
  .s-cta .cta-box::before { background: linear-gradient(90deg, rgba(15, 15, 15, 0.7) 0%, rgba(15, 15, 15, 0.45) 45%, rgba(15, 15, 15, 0.05) 78%); }
}
.s-cta .cta-grid { position: relative; z-index: 2; display: grid; gap: 40px; }
@media (min-width: 1240px) {
  .s-cta .cta-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 48px; }
}

/* ---------- Copy ---------- */
.s-cta .cta-copy { display: grid; gap: 22px; justify-items: start; }
.s-cta .cta-title { color: var(--white); text-wrap: wrap; }
.s-cta .cta-s { display: block; }
.s-cta .cta-br { display: none; }
@media (min-width: 600px) {
  .s-cta .cta-s { display: inline; }
  .s-cta .cta-br { display: inline; }
}
.s-cta .lw { display: inline-block; }
.s-cta .cta-lead {
  max-width: 48ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.74);
}
.s-cta .cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.s-cta .cta-wa { --btn-h: 56px; gap: 10px; padding: 0 24px 0 20px; font-size: 1rem; }
.s-cta .cta-wa .i { width: 20px; height: 20px; }

/* ---------- Chips ---------- */
.s-cta .cta-stage { position: relative; min-height: 300px; max-width: 560px; }
@media (min-width: 1240px) { .s-cta .cta-stage { min-height: 388px; max-width: none; } }
.s-cta .cta-glow {
  position: absolute; inset: 4% -6% 0;
  background: radial-gradient(closest-side, rgba(238, 106, 44, 0.2), rgba(238, 106, 44, 0) 72%);
  pointer-events: none;
}
.s-cta .cta-chips { position: absolute; inset: 0; }
.s-cta .cta-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 12px 0 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 22px 44px -22px rgba(0, 0, 0, 0.7);
  color: var(--white);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  transform: rotate(var(--r, 0deg));
}
@media (min-width: 1240px) {
  .s-cta .cta-chip { height: 62px; padding: 0 14px 0 8px; font-size: 1.0625rem; gap: 14px; }
}
.s-cta .cta-chip__icon {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); color: var(--ink);
}
@media (min-width: 1240px) { .s-cta .cta-chip__icon { width: 46px; height: 46px; } }
.s-cta .cta-chip__icon .i { width: 19px; height: 19px; }
.s-cta .cta-chip--light {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.75);
}
.s-cta .cta-chip--light .cta-chip__icon { background: var(--ink); color: var(--white); }
.s-cta .cta-chip__tick {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; margin-left: 4px; border-radius: 50%;
  background: var(--patina);
}
.s-cta .cta-chip__tick svg { width: 16px; height: 16px; fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.s-cta .cta-chip:nth-child(1) { top: 2%;  left: 0; }
.s-cta .cta-chip:nth-child(2) { top: 27%; right: 0; }
.s-cta .cta-chip:nth-child(3) { top: 52%; left: 3%; }
.s-cta .cta-chip:nth-child(4) { top: 77%; right: 5%; }
@media (min-width: 1240px) {
  /* the stage is narrow; chips may drift into the band's right padding */
  .s-cta .cta-chip:nth-child(1) { top: 5%;  left: -6px; }
  .s-cta .cta-chip:nth-child(2) { top: 29%; right: -30px; }
  .s-cta .cta-chip:nth-child(3) { top: 54%; left: -18px; }
  .s-cta .cta-chip:nth-child(4) { top: 79%; right: -10px; }
}

.s-cta .cta-timer {
  position: absolute; right: -18px; top: -4%;
  display: none; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px 0 10px;
  border-radius: var(--r-pill);
  /* dark glass: it sits over the pale highlight of the graphite banner */
  background: rgba(20, 20, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.92);
}
.s-cta .cta-timer .i { width: 14px; height: 14px; color: var(--ember); }
@media (min-width: 1240px) { .s-cta .cta-timer { display: inline-flex; } }