/* CoVince feature site — shared stylesheet for the index and every feature page.
   Same glass language as all-in-one-pricing.html: light by default, dark on request,
   every colour behind a token so a page never carries a raw hex. */

:root[data-theme="light"]{
  --bg:#eef3ef; --text:#0d1a12; --muted:#5b7365; --muted-2:#8aa294;
  --accent:#34d17a; --accent-2:#12a150; --accent-text:#0f8f4c;
  --accent-soft:rgba(52,209,122,.14); --accent-line:rgba(18,161,80,.34);
  --warn-text:#a86a06; --warn-soft:rgba(245,166,35,.13); --warn-line:rgba(245,166,35,.45);
  --danger-text:#b4453f; --danger-soft:rgba(214,86,79,.10); --danger-line:rgba(214,86,79,.30);
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.78);
  --glass-line:rgba(255,255,255,.85); --glass-line-2:rgba(16,48,32,.14);
  --surface-1:rgba(255,255,255,.5); --surface-2:rgba(255,255,255,.72);
  --nav-bg:rgba(255,255,255,.62); --track-bg:rgba(16,48,32,.09);
  --inset:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow:0 30px 70px -26px rgba(15,50,33,.35);
  --shadow-sm:0 16px 40px -20px rgba(15,50,33,.28);
  --orb-1:rgba(52,209,122,.34); --orb-2:rgba(18,161,80,.22); --orb-3:rgba(245,166,35,.20);
}
:root[data-theme="dark"]{
  --bg:#07110c; --text:#eaf5ee; --muted:#9db3a6; --muted-2:#7d9488;
  --accent:#34d17a; --accent-2:#12a150; --accent-text:#5ce49b;
  --accent-soft:rgba(52,209,122,.13); --accent-line:rgba(52,209,122,.32);
  --warn-text:#f5c069; --warn-soft:rgba(245,166,35,.12); --warn-line:rgba(245,166,35,.34);
  --danger-text:#ef8a84; --danger-soft:rgba(214,86,79,.12); --danger-line:rgba(214,86,79,.30);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);
  --glass-line:rgba(255,255,255,.09); --glass-line-2:rgba(255,255,255,.14);
  --surface-1:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.07);
  --nav-bg:rgba(7,17,12,.72); --track-bg:rgba(255,255,255,.09);
  --inset:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow:0 30px 70px -26px rgba(0,0,0,.8);
  --shadow-sm:0 16px 40px -20px rgba(0,0,0,.7);
  --orb-1:rgba(52,209,122,.20); --orb-2:rgba(18,161,80,.15); --orb-3:rgba(245,166,35,.12);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ color-scheme:dark; }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* floating background orbs, same as the pricing page */
.orbs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.o1{width:520px;height:520px;background:var(--orb-1);top:-160px;left:-120px;animation:drift1 26s ease-in-out infinite}
.o2{width:420px;height:420px;background:var(--orb-2);top:38%;right:-140px;animation:drift2 32s ease-in-out infinite}
.o3{width:380px;height:380px;background:var(--orb-3);bottom:-120px;left:22%;animation:drift3 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(70px,50px,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-60px,-40px,0) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(40px,-60px,0) scale(1.15)}}
body>*:not(.orbs){position:relative;z-index:1}

/* ── cinema: everything enters, nothing pops ─────────────────────────────
   A page that assembles itself as you scroll reads as something built with care.
   Purely additive: without JS or with reduced motion everything is simply visible. */
.rise{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.16,.84,.44,1),transform .75s cubic-bezier(.16,.84,.44,1)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.07s}.rise.d2{transition-delay:.14s}.rise.d3{transition-delay:.21s}
.rise.d4{transition-delay:.28s}.rise.d5{transition-delay:.35s}.rise.d6{transition-delay:.42s}

/* Screenshots arrive with a slight scale — the one place a little drama is honest,
   because the screen IS the product. */
.shot.rise{transform:translateY(34px) scale(.965)}
.shot.rise.in{transform:none}

/* Hero letters lift on load, staggered by line. */
.f-hero h1,.i-hero h1{animation:heroIn .9s cubic-bezier(.16,.84,.44,1) both}
.promise,.i-hero .lead{animation:heroIn .9s cubic-bezier(.16,.84,.44,1) .12s both}
.f-hero__meta,.i-stats{animation:heroIn .9s cubic-bezier(.16,.84,.44,1) .2s both}
.f-hero .start-row{animation:heroIn .9s cubic-bezier(.16,.84,.44,1) .28s both}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* A slow sheen across the gradient headline. */
.grad{background:linear-gradient(100deg,var(--accent-2) 0%,var(--accent) 38%,var(--accent-2) 62%,var(--accent) 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* Reading-progress hairline: cheap, and it makes a long page feel authored. */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 0 12px var(--accent)}

@media (prefers-reduced-motion:reduce){
  .orb{animation:none}
  .rise{opacity:1;transform:none;transition:none}
  .shot.rise{transform:none}
  .f-hero h1,.i-hero h1,.promise,.i-hero .lead,.f-hero__meta,.i-stats,.f-hero .start-row{animation:none}
  .grad{animation:none}
  html{scroll-behavior:auto}
}

/* ── nav ─────────────────────────────────────────────────────────────── */
/* body > nav, not nav: the orb rule above is `body>*:not(.orbs)`, which carries a class in its
   :not() and therefore OUT-SPECIFIES a bare element selector. The nav was silently relative on
   every sub-page — invisible until a dark hero landed underneath it. */
body > nav:not(.orbs){position:sticky;top:0;z-index:50;background:var(--nav-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--glass-line-2)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:13px 0}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px}
.brand .logo,footer .logo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  overflow:hidden;background:var(--surface-2);border:1px solid var(--glass-line-2);box-shadow:var(--inset)}
.brand .logo img,footer .logo img{width:100%;height:100%;object-fit:contain;display:block}
.nav-links{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:600;color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.nav-links .cta{padding:9px 17px;border-radius:100px;background:linear-gradient(140deg,var(--accent),var(--accent-2));
  color:#04140a;font-weight:800;box-shadow:0 10px 26px -8px rgba(18,161,80,.6)}
.nav-links .cta:hover{color:#04140a;transform:translateY(-1px)}
@media(max-width:760px){.nav-links a:not(.cta){display:none}}

/* ── language switcher ───────────────────────────────────────────────────
   Real links, one per language, so a crawler can walk between the translations and someone
   without JavaScript can still change language. Opens on hover and on keyboard focus; the list
   is in the markup either way, which is the part that matters for indexing. */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:100px;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:650;color:var(--muted);
  background:var(--glass);border:1px solid var(--glass-line-2)}
.lang-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.lang-btn:hover{color:var(--text);border-color:var(--accent-line)}
.lang-list{position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  display:none;grid-template-columns:repeat(2,minmax(128px,1fr));gap:2px;padding:8px;
  max-height:62vh;overflow-y:auto;border-radius:14px;
  background:var(--nav-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-line-2);box-shadow:var(--shadow)}
.lang:hover .lang-list,.lang:focus-within .lang-list{display:grid}
.lang-list a{padding:8px 11px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--muted);
  white-space:nowrap}
.lang-list a:hover{background:var(--surface-2);color:var(--text)}
.lang-list a.on{color:var(--accent-text);font-weight:800}
@media(max-width:760px){
  .lang{order:2}
  .lang-list{right:auto;left:0;grid-template-columns:1fr 1fr}
}

/* ── index hero ──────────────────────────────────────────────────────── */
.i-hero{padding:74px 0 42px;text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:100px;
  background:var(--glass);border:1px solid var(--glass-line-2);font-size:13px;font-weight:650;color:var(--muted)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.i-hero h1{font-size:clamp(38px,6.4vw,70px);line-height:1.03;letter-spacing:-2px;margin:22px 0 0;font-weight:850}
.grad{background:linear-gradient(120deg,var(--accent-2),var(--accent));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.lead{font-size:17px;color:var(--muted);max-width:66ch;margin:18px auto 0}
.i-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.stat{background:var(--glass);border:1px solid var(--glass-line-2);border-radius:16px;
  padding:16px 24px;box-shadow:var(--inset);min-width:190px}
.stat b{display:block;font-size:27px;font-weight:850;letter-spacing:-.6px}
.stat span{font-size:12.5px;color:var(--muted-2)}

/* ── bands ───────────────────────────────────────────────────────────── */
.band{padding:52px 0}
.band--how{background:var(--surface-1);border-block:1px solid var(--glass-line-2)}

/* ── the before and the after ────────────────────────────────────────────
   Two grids of identical cards said "here are three bullet points, twice". These are one
   before/after: the same room behind both bands, cold for the week as it is and lit for the week
   as it could be, with the numbers lining up so 02 answers 02.
   The loop is atmosphere under a scrim — never the thing being watched. */
.band--cine{position:relative;overflow:hidden;isolation:isolate;padding:76px 0;border-block:1px solid var(--glass-line-2)}
.cine-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;
  opacity:0;transition:opacity 1.2s ease}
.cine-bg.ready{opacity:1}
/* Cold and shut down for the week as it is; open and lit for the week as it could be. The after
   has to be VISIBLY brighter or the page tells the same sad story twice. */
.cine-bg--cold{filter:saturate(.22) brightness(.58) contrast(1.1)}
.cine-bg--warm{filter:saturate(1.05) brightness(1.02) contrast(1.02)}
.cine-scrim{position:absolute;inset:0;z-index:-2}
.band--pain .cine-scrim{background:linear-gradient(96deg,rgba(4,10,7,.93) 26%,rgba(4,10,7,.72) 64%,rgba(4,10,7,.5) 100%)}
.band--change .cine-scrim{background:linear-gradient(96deg,rgba(3,14,9,.9) 22%,rgba(4,20,13,.6) 60%,rgba(6,30,19,.3) 100%)}
.cine-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:3px 3px}
/* No plate, no loop: the band still has to be dark, or white text lands on a white page. */
.band--pain{background:#050d09}
.band--change{background:#061a10}
.band--cine .band-eyebrow{color:var(--accent)}
.band--cine .h2{color:#fff;max-width:28ch}
.band--pain .h2{color:#f3ded9}

.beats{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:2px;max-width:1000px}
.beats li{position:relative;display:flex;align-items:flex-start;gap:24px;padding:24px 4px 24px 0;
  border-top:1px solid rgba(255,255,255,.1)}
.beats li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.beats .n{flex:0 0 auto;width:44px;font-size:13px;font-weight:850;letter-spacing:1.4px;
  padding-top:6px;font-variant-numeric:tabular-nums}
.beats p{margin:0;font-size:clamp(17px,2.1vw,23px);line-height:1.42;font-weight:650;letter-spacing:-.3px;
  color:rgba(255,255,255,.9);max-width:56ch}
.beats--pain .n{color:#e8877f}
.beats--pain p{color:rgba(246,226,222,.86)}
/* A hairline that fills as the row arrives — the row is not a bullet, it is a beat. */
.beats li::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
  transition:width 1.1s cubic-bezier(.16,.84,.44,1)}
.beats--pain li::after{background:linear-gradient(90deg,#e8877f,transparent)}
.beats--value li::after{background:linear-gradient(90deg,var(--accent),transparent)}
.beats li.in::after{width:100%}
.beats--value .n{color:var(--accent)}
.beats--value li{padding-left:0}
/* The answer carries the arrow back to the number it answers. */
.beats--value .n::before{content:"→ ";font-weight:700;opacity:.55}

@media(max-width:700px){
  .band--cine{padding:52px 0}
  .beats li{gap:14px;padding:18px 0}
  .beats .n{width:34px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .cine-bg{transition:none}
  .beats li::after{transition:none;width:100%}
}
.h2{font-size:clamp(24px,3vw,33px);letter-spacing:-.7px;font-weight:820;margin:0 0 8px}
.band .lead{margin:0 0 26px}

/* ── index grid ──────────────────────────────────────────────────────── */
.group{margin-bottom:46px}
.group-head h2{font-size:23px;font-weight:820;letter-spacing:-.5px;margin:0}
.group-head p{margin:4px 0 20px;color:var(--muted);font-size:14.5px}

/* ── the four acts ───────────────────────────────────────────────────────
   A group heading is a label; an act is a held frame. Each one opens on a dark slate with its
   own word ghosted behind it — the same register as the title cards on the main page, so the
   two pages read as one film rather than a story and a spreadsheet. Dark in BOTH themes on
   purpose: a light-on-light title card is not a frame, it is a heading. */
:root{
  --act-bg:#050d09;
  --act-text:#f2f8f4;
  --act-muted:#9db3a6;
  --act-glow:rgba(52,209,122,.20);
  --act-ghost:rgba(255,255,255,.045);
  --act-grid:rgba(255,255,255,.045);
}
/* The nav is sticky, so an act jumped to from the running order lands with its number hidden
   underneath it. Clear the bar plus a little air.
   A BAND, not a title card: the first cut gave each act a 400px slate and the directory stopped
   being an overview — four headlines where seventeen tools used to be. (user report) */
.group--act{margin-bottom:56px;scroll-margin-top:96px}
.act-head{position:relative;overflow:hidden;border-radius:22px;margin-bottom:20px;
  padding:22px 28px;min-height:118px;display:flex;align-items:center;gap:26px;
  background:var(--act-bg);color:var(--act-text);box-shadow:var(--shadow-sm)}
.act-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;
  z-index:0;opacity:.5;filter:saturate(.85)}
.act-head::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,var(--act-bg) 26%,rgba(5,13,9,.72) 58%,rgba(5,13,9,.5) 100%),
    radial-gradient(70% 130% at 10% 0%,var(--act-glow),transparent 66%)}
.act-ghost{position:absolute;right:2.5%;top:50%;transform:translateY(-50%);z-index:2;
  font-size:clamp(54px,8.4vw,112px);line-height:.8;font-weight:850;letter-spacing:-5px;
  color:var(--act-ghost);pointer-events:none;user-select:none;white-space:nowrap}
.act-head-in{position:relative;z-index:3;flex:1 1 auto;min-width:0}
.act-rule{width:0;height:2px;border-radius:2px;margin-bottom:13px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  transition:width 1.1s cubic-bezier(.16,.84,.44,1) .1s}
.act-head.in .act-rule{width:52px}
.act-head .act-title{display:block;font-size:clamp(23px,3.1vw,36px);line-height:1.04;letter-spacing:-1.2px;
  font-weight:850;margin:0;color:var(--act-text)}
.act-line{display:block;margin:7px 0 0;font-size:16px;font-weight:650;color:var(--act-muted);max-width:62ch}
.act-count{position:relative;z-index:3;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:100px;white-space:nowrap;
  font-size:12.5px;font-weight:750;letter-spacing:.4px;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-line);backdrop-filter:blur(8px)}

/* the running order, straight under the hero */
.act-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.act-jump a{display:flex;align-items:baseline;gap:9px;padding:11px 17px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-line-2);box-shadow:var(--inset);
  transition:transform .2s cubic-bezier(.16,.84,.44,1),border-color .2s,background .2s}
.act-jump a:hover{transform:translateY(-2px);border-color:var(--accent-line);background:var(--glass-2)}
.act-jump span{font-size:15.5px;font-weight:800;letter-spacing:-.3px}
.act-jump i{font-style:normal;font-size:12px;font-weight:700;color:var(--muted-2);
  padding:2px 8px;border-radius:100px;background:var(--accent-soft);color:var(--accent-text)}

@media(max-width:820px){
  .act-head{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 22px}
  .act-ghost{font-size:clamp(46px,14vw,86px);opacity:.55;right:-3%}
  .act-head .act-title{display:block;margin-right:0}
  .act-line{display:block;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
  .act-rule{transition:none;width:52px}
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;gap:9px;padding:20px;border-radius:18px;overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line-2);box-shadow:var(--inset);
  transition:transform .28s cubic-bezier(.16,.84,.44,1),box-shadow .28s,border-color .28s}
.tile:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--accent-line)}
/* A light that follows the cursor across the card. */
.tile::before{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),var(--accent-soft),transparent 62%)}
.tile:hover::before{opacity:1}
.tile:hover .tile-shot img{transform:scale(1.035)}
.tile-shot img{transition:transform .5s cubic-bezier(.16,.84,.44,1)}
.tile h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.3px}
.tile p{margin:0;font-size:14px;color:var(--muted)}
.ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line)}
.ic svg{width:19px;height:19px;fill:none;stroke:var(--accent-text);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ic.big{width:56px;height:56px;border-radius:16px;flex:0 0 auto}
.ic.big svg{width:27px;height:27px}
/* The shot takes the slack instead of the foot, so a two-line description does not push its
   card's image below the others in the row — the picture tops line up across the grid. */
.tile-shot{display:block;border-radius:11px;overflow:hidden;border:1px solid var(--glass-line-2);
  background:var(--surface-2);margin-top:auto}
.tile-shot img{width:100%;height:132px;object-fit:contain;object-position:center top;display:block}
.tile-shot + .tile-foot{margin-top:0}
.tile-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:10px;border-top:1px solid var(--glass-line-2);font-size:12px}
.tile-foot .repl{color:var(--muted-2)}
.tile-foot .price{color:var(--warn-text);font-weight:750;white-space:nowrap}

/* ── feature hero ────────────────────────────────────────────────────── */
.f-hero{padding:38px 0 46px}
.back{display:inline-block;font-size:13.5px;font-weight:650;color:var(--muted);margin-bottom:22px}
.back:hover{color:var(--accent-text)}

/* A trail rather than a back button — it says where the page sits, to a reader and to a crawler. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px;
  font-size:13px;font-weight:650;color:var(--muted)}
.crumbs a:hover{color:var(--accent-text)}
.crumbs span{color:var(--muted-2)}
.crumbs b{font-weight:750;color:var(--text)}
.fh--photo .crumbs{color:rgba(234,245,238,.72)}
.fh--photo .crumbs b{color:#fff}

/* The price, said once and quietly — it is context, not the headline. */
.fh-price{margin:18px 0 0;max-width:52ch;font-size:13.5px;line-height:1.6;color:var(--muted);letter-spacing:.1px}
.fh--photo .fh-price{color:rgba(255,255,255,.72)}

/* ── the opening paragraph ───────────────────────────────────────────────
   The moment before the tool exists. First real text under the headline, so it is both the
   emotional opening and the passage a search result gets judged on. */
/* Set as a pulled quote, with room around it. It is somebody's Tuesday said out loud, and it was
   reading as body copy squeezed under the headline. The accent rule carries the emphasis the drop
   cap used to — that had to go regardless: the opening word is often a filename, so lifting its
   first letter out of the line read as "p roposal", a broken word in the first sentence anyone sees. */
.band--story{padding:86px 0 62px}
.story{position:relative;margin:0;max-width:58ch;padding-left:34px;
  font-size:clamp(21px,2.5vw,29px);line-height:1.55;font-weight:650;
  letter-spacing:-.4px;color:var(--text)}
.story::before{content:"";position:absolute;left:0;top:.3em;bottom:.2em;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2))}
@media(max-width:900px){.band--story{padding:54px 0 40px}.story{padding-left:22px}}
.terms{margin:30px 0 0;padding-left:34px;font-size:12.5px;color:var(--muted-2);letter-spacing:.2px}

/* ── questions ───────────────────────────────────────────────────────────
   The same answers as the FAQPage data in the head, on purpose: structured data that is not on
   the page is a penalty waiting to happen, and useless to whoever asked. */
.band--faq{background:var(--surface-1);border-block:1px solid var(--glass-line-2)}
.faqs{display:grid;gap:12px;max-width:900px}
.faq{border-radius:16px;background:var(--glass);border:1px solid var(--glass-line-2);
  box-shadow:var(--inset);overflow:hidden;transition:border-color .2s}
.faq[open]{border-color:var(--accent-line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:17px 20px;font-size:16px;font-weight:750;letter-spacing:-.2px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-text)}
.faq summary i{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;color:var(--muted-2);
  transition:transform .25s cubic-bezier(.16,.84,.44,1)}
.faq summary i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.faq[open] summary i{transform:rotate(180deg);color:var(--accent-text)}
.faq p{margin:0;padding:0 20px 19px;font-size:15px;line-height:1.62;color:var(--muted);max-width:78ch}

/* Sideways links. Seventeen pages only rank as a site if they point at each other on purpose. */
.band--related .grid{margin-top:22px}
.band--related .tile-foot .repl{color:var(--accent-text);font-weight:700}
.f-hero__top{display:flex;align-items:center;gap:16px}
.eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--accent-text)}
.f-hero h1{font-size:clamp(31px,4.6vw,50px);line-height:1.06;letter-spacing:-1.4px;margin:2px 0 0;font-weight:850}
.promise{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:60ch;margin:18px 0 0;font-weight:600}
.f-hero__meta{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.meta-card{padding:15px 20px;border-radius:15px;background:var(--glass);border:1px solid var(--glass-line-2);
  box-shadow:var(--inset);min-width:210px}
.meta-card span{display:block;font-size:12px;color:var(--muted-2)}
.meta-card b{display:block;font-size:29px;font-weight:850;letter-spacing:-.8px;color:var(--warn-text)}
.meta-card i{font-size:12px;color:var(--muted);font-style:normal}
.meta-card--ours{background:var(--accent-soft);border-color:var(--accent-line)}
.meta-card--ours b{color:var(--accent-text)}

.start-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:100px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#04140a;font-weight:800;font-size:14.5px;
  box-shadow:0 14px 30px -10px rgba(18,161,80,.65);transition:transform .18s}
.btn:hover{transform:translateY(-2px);color:#04140a}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn--big{padding:15px 30px;font-size:16px}
.btn--ghost{background:none;border:1px solid var(--glass-line-2);color:var(--text);box-shadow:none}
.btn--ghost:hover{color:var(--text);border-color:var(--accent-line)}
.hint{font-size:13px;color:var(--muted-2)}

/* ── cards: problem / value ──────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.card{display:flex;gap:13px;padding:19px;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-line-2);box-shadow:var(--inset)}
.card p{margin:0;font-size:14.5px;color:var(--muted)}
.card--pain{background:var(--danger-soft);border-color:var(--danger-line)}
.card--pain p{color:var(--text)}
.card .x,.card .v{width:26px;height:26px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center}
.card .x{background:var(--danger-soft);border:1px solid var(--danger-line)}
.card .v{background:var(--accent-soft);border:1px solid var(--accent-line)}
.card .x svg,.card .v svg{width:14px;height:14px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.card .x svg{stroke:var(--danger-text)}
.card .v svg{stroke:var(--accent-text)}
.card--value p b{color:var(--text)}

/* ── screenshots ─────────────────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:18px}
@media(max-width:560px){.shots{grid-template-columns:1fr}}
.shot{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--glass-line-2);
  box-shadow:var(--shadow-sm);background:var(--surface-2);cursor:zoom-in;transition:transform .2s}
.shot:hover{transform:translateY(-3px)}
.shot .bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:var(--glass-2);
  border-bottom:1px solid var(--glass-line)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:var(--track-bg);display:block}
.shot .bar .u{margin-left:8px;font-size:11px;color:var(--muted-2)}
.shot img{width:100%;display:block;background:var(--surface-2);object-fit:contain;object-position:top center}
.shot figcaption{padding:11px 14px;font-size:13px;color:var(--muted);border-top:1px solid var(--glass-line-2)}

/* lightbox — closes on the X or Escape only, never on a stray backdrop click */
/* body > .lb, not .lb — same trap as the nav above: `body>*:not(.orbs)` carries a class in its
   :not() and out-specifies a bare class selector, so it was overriding position:fixed with
   position:relative and the "lightbox" rendered as a block at the bottom of the page. */
body>.lb{position:fixed;inset:0;z-index:999;display:none;place-items:center;padding:20px;
  background:rgba(6,14,10,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body>.lb.on{display:grid}
.lb-inner{position:relative;width:100%;max-width:1600px;max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  border:1px solid var(--glass-line-2);box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.lb-inner .bar,.lb-cap{flex:0 0 auto}
.lb-inner .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:rgba(255,255,255,.9);border-bottom:1px solid rgba(0,0,0,.08)}
.lb-inner .bar i{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.12);display:block}
.lb-inner .bar .u{margin-left:8px;font-size:11.5px;color:#5b7365}
.lb-inner img{width:100%;flex:1 1 auto;min-height:0;object-fit:contain;background:#fff;display:block}
.lb-cap{padding:13px 16px;font-size:13.5px;font-weight:650;background:rgba(255,255,255,.94);color:#0d1a12}
.lb-close{position:absolute;top:9px;right:11px;width:32px;height:32px;border-radius:10px;display:grid;
  place-items:center;cursor:pointer;background:rgba(8,20,14,.14);color:#0d1a12}
.lb-close:hover{background:rgba(8,20,14,.3)}
.lb-close svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}

/* ── steps ───────────────────────────────────────────────────────────── */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.steps li{display:flex;gap:13px;padding:19px;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-line-2);box-shadow:var(--inset)}
.steps .n{width:27px;height:27px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-text);
  font-weight:850;font-size:13px}
.steps p{margin:0;font-size:14.5px;color:var(--muted)}

/* ── replaces + cocentric ────────────────────────────────────────────── */
.repl-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 24px;border-radius:18px;background:var(--warn-soft);border:1px solid var(--warn-line)}
.repl-box .repl{margin:4px 0 0;font-size:16px;font-weight:750}
.repl-num{text-align:right}
.repl-num b{display:block;font-size:27px;font-weight:850;color:var(--warn-text);letter-spacing:-.6px}
.repl-num span{font-size:12px;color:var(--muted)}
.cocentric{margin:22px 0 0;font-size:14.5px;color:var(--muted);max-width:76ch}

/* ── cta + prev/next + footer ────────────────────────────────────────── */
.band--cta{background:var(--surface-1);border-block:1px solid var(--glass-line-2)}
.cta-wrap{text-align:center}
.cta-wrap h2{font-size:clamp(24px,3.2vw,36px);letter-spacing:-1px;font-weight:850;margin:0 0 10px}
.cta-wrap p{color:var(--muted);margin:0 0 24px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.prevnext{display:flex;gap:14px;justify-content:space-between;padding:34px 0}
.pn{flex:1 1 0;padding:17px 20px;border-radius:16px;background:var(--glass);
  border:1px solid var(--glass-line-2);box-shadow:var(--inset);transition:border-color .2s}
.pn:hover{border-color:var(--accent-line)}
.pn span{display:block;font-size:12px;color:var(--muted-2)}
.pn b{font-size:15.5px;font-weight:780}
.pn--next{text-align:right}
footer{border-top:1px solid var(--glass-line-2);background:var(--surface-1);padding:26px 0;margin-top:10px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.f-left{display:flex;align-items:center;gap:12px}
.f-left b{display:block;font-size:15px}
.f-left span{font-size:12.5px;color:var(--muted-2)}
.f-right{display:flex;gap:20px;font-size:13.5px;font-weight:650;color:var(--muted)}
.f-right a:hover{color:var(--accent-text)}

/* ══ cinematic feature page ════════════════════════════════════════════════
   A feature page opens on a room, the way the main page does. Without a photo it falls back
   to the plain hero — no page ever depends on an image being there. */
.fh{position:relative;padding:44px 0 54px;isolation:isolate;overflow:clip}
.fh--photo{min-height:76vh;display:grid;align-items:center;color:#fff;background:#050d09}
.fh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  z-index:-2;transform:scale(1.08);animation:fhPush 22s ease-out both}
@keyframes fhPush{from{transform:scale(1.16)}to{transform:scale(1.04)}}
.fh-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(5,13,9,.94),rgba(5,13,9,.6) 48%,rgba(5,13,9,.25)),
             linear-gradient(0deg,rgba(5,13,9,.92),transparent 55%)}
.fh-grain{position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
.fh-body{position:relative;z-index:1;max-width:760px}
.fh--photo .back{color:rgba(234,245,238,.75)}
.fh--photo .back:hover{color:#5ce49b}
.fh--photo .ic.big{background:rgba(52,209,122,.16);border-color:rgba(92,228,155,.45)}
.fh--photo .ic.big svg{stroke:#5ce49b}
.fh--photo .eyebrow{color:#5ce49b}
.fh--photo h1{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.fh--photo .promise{color:rgba(234,245,238,.88);text-shadow:0 1px 22px rgba(0,0,0,.7)}
.fh--photo .meta-card{background:rgba(5,13,9,.55);border-color:rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.fh--photo .meta-card span{color:rgba(234,245,238,.6)}
.fh--photo .meta-card i{color:rgba(234,245,238,.75)}
.fh--photo .meta-card b{color:#f5c069}
.fh--photo .meta-card--ours{background:rgba(52,209,122,.16);border-color:rgba(92,228,155,.45)}
.fh--photo .meta-card--ours b{color:#7dffb9}
.fh--photo .hint{color:rgba(234,245,238,.65)}
.fh .ic.big{margin-bottom:16px}
.fh h1{font-size:clamp(34px,5.6vw,64px);line-height:1.02;letter-spacing:-2px;margin:6px 0 0}
.fh-scroll{display:none;margin-top:34px;font-size:11px;font-weight:800;letter-spacing:2.4px;
  text-transform:uppercase;color:rgba(234,245,238,.5)}
.fh--photo .fh-scroll{display:inline-block;animation:fhBob 2.6s ease-in-out infinite}
@keyframes fhBob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:.9}}

/* chapter strip */
body > .chapters:not(.orbs){position:sticky;top:67px;z-index:40;background:var(--nav-bg);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--glass-line-2)}
/* Two sticky bars stack on a feature page — the nav and the chapter strip. Without this, every
   chapter link lands with its own heading hidden behind the thing you clicked. */
.band[id]{scroll-margin-top:132px}
.chapters .wrap{display:flex;gap:22px;overflow-x:auto;padding:11px 0;scrollbar-width:none}
.chapters .wrap::-webkit-scrollbar{display:none}
.chapters a{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.chapters a:hover{color:var(--accent-text)}
.band-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:8px}

/* the screen walkthrough */
.walk{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start;margin-top:8px}
.walk--single .walk-steps{display:none}
.walk--single{grid-template-columns:1fr}
@media(max-width:900px){.walk{grid-template-columns:1fr;gap:18px}}
/* The stage is a full-height sticky column that holds nothing visible itself; the card is the frame.
   That is what centres the screen against the caption beside it — pinning the card to a fixed top
   left it riding high while the text sat mid-viewport. Frames stack in one grid cell so they can
   cross-fade, and each one centres itself in the column. */
.walk-stage{position:sticky;top:104px;height:calc(100vh - 150px);display:grid;align-items:center}
@media(max-width:900px){.walk-stage{position:relative;top:0;height:auto}}
.walk-frame{grid-area:1/1;align-self:center;width:100%;aspect-ratio:16/10;max-height:100%;
  margin:0;opacity:0;cursor:zoom-in;border-radius:16px;overflow:hidden;
  border:1px solid var(--glass-line-2);box-shadow:var(--shadow);background:var(--surface-2);
  transition:opacity .6s cubic-bezier(.16,.84,.44,1)}
/* The faded-out frames share the same grid cell, so without this the last one in the DOM sits on
   top and eats every click meant for the screen you can actually see. */
.walk-frame{pointer-events:none}
.walk-frame.on{opacity:1;pointer-events:auto}
.walk-frame .bar{position:relative;z-index:2;display:flex;align-items:center;gap:7px;padding:9px 13px;
  background:var(--glass-2);border-bottom:1px solid var(--glass-line)}
.walk-frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--track-bg);display:block}
.walk-frame .bar .u{margin-left:8px;font-size:11px;color:var(--muted-2)}
.walk-frame .zoom{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--accent-text);opacity:0;transition:opacity .2s}
.walk-frame:hover .zoom{opacity:1}
.walk-frame img{width:100%;height:calc(100% - 37px);object-fit:contain;object-position:top center;
  display:block;background:var(--surface-2)}
.walk-steps{display:flex;flex-direction:column}
.walk-step{min-height:58vh;display:flex;align-items:center}
.walk-step .inner{opacity:.25;transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.16,.84,.44,1),transform .45s cubic-bezier(.16,.84,.44,1)}
.walk-step.on .inner{opacity:1;transform:none}
.walk-step .n{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.8px;color:var(--accent-text);margin-bottom:10px}
.walk-step p{margin:0;font-size:17px;line-height:1.5;color:var(--text);font-weight:600}
@media(max-width:900px){.walk-step{min-height:0;padding:14px 0}.walk-step .inner{opacity:1;transform:none}}

/* ══ more cinema on the sub-pages ═════════════════════════════════════════
   The page should feel authored between the blocks, not only inside them. */

/* Bands alternate their light, so scrolling reads as scenes rather than a stack. */
.band{position:relative;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 20% 0%,var(--accent-soft),transparent 65%)}
.band--pain::before{background:radial-gradient(70% 60% at 80% 0%,var(--danger-soft),transparent 65%)}
.band--how::before{background:radial-gradient(70% 60% at 50% 100%,var(--accent-soft),transparent 65%)}
.band + .band::after{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-line-2),transparent)}

/* Section headings arrive with their eyebrow, a beat apart. */
.band-eyebrow{opacity:0;transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.16,.84,.44,1),transform .6s cubic-bezier(.16,.84,.44,1)}
.band-eyebrow.in{opacity:1;transform:none}

/* The problem cards lean in slightly, the value cards settle — two moods, one motion system. */
.card--pain.rise{transform:translateY(26px) rotate(-.4deg)}
.card--pain.rise.in{transform:none}
.card--value.rise{transform:translateY(26px) scale(.985)}
.card--value.rise.in{transform:none}

/* The numbered steps draw a line down the column as they appear. */
.steps{position:relative}
@media(min-width:920px){
  .steps li{position:relative}
  .steps li::after{content:"";position:absolute;top:50%;right:-7px;width:14px;height:1px;
    background:var(--glass-line-2)}
  .steps li:last-child::after{display:none}
}
.steps .n{transition:transform .5s cubic-bezier(.16,.84,.44,1),box-shadow .5s}
.steps li.in .n{box-shadow:0 0 0 6px var(--accent-soft)}

/* Replaces box: the price counts up like the ones on the main page. */
.repl-num b{font-variant-numeric:tabular-nums}

/* Prev / next become photo doors when the neighbour has a hero image. */
.prevnext{gap:16px}
.pn{position:relative;overflow:hidden;min-height:104px;display:flex;flex-direction:column;justify-content:center}
.pn-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;z-index:-1;
  transition:opacity .35s,transform .6s cubic-bezier(.16,.84,.44,1);transform:scale(1.06)}
.pn:hover .pn-bg{opacity:.4;transform:scale(1.12)}
.pn span,.pn b{position:relative}

/* The hero's own scrim lifts a touch as you scroll away from it, so the page "opens". */
.fh--photo .fh-body{will-change:transform}

/* The closing line where the price band used to be: quiet, centred, no box around it. */
.band--cocentric{padding:6px 0 40px}

/* The follow-up line under the cocentric one: same voice, one step quieter. */
.cocentric--chase{margin-top:14px;opacity:.85}

/* ── the platform page ────────────────────────────────────────────────────
   Six plain cards. No screenshots here on purpose: these are the parts you cannot photograph,
   and a stock illustration next to "every action has a name on it" would cheapen it. */
.band--parts{background:var(--surface-1);border-block:1px solid var(--glass-line-2)}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:26px}
.part{padding:22px 22px 24px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line-2);box-shadow:var(--inset)}
.part .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-bottom:13px;
  background:var(--accent-soft);border:1px solid var(--accent-line)}
.part .ic svg{width:19px;height:19px;fill:none;stroke:var(--accent-text);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.part b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.3px;margin-bottom:7px}
.part p{margin:0;font-size:14px;line-height:1.62;color:var(--muted)}
.f-hero--plain{padding:44px 0 10px}

/* ── the whole ring, standing still ──────────────────────────────────────
   Seventeen tools at one radius around whatever you put in the middle. Not the reel from the
   main page: that one spins and swaps its centre per goal, and its palette is built for a dark
   film frame. This is the diagram, in daylight, with every label readable at once. */
.band--ring{padding:70px 0 64px}
.pring{display:grid;place-items:center;margin:36px 0 6px}
.pring-holder{position:relative;width:min(88vw,620px);aspect-ratio:1;--r:min(38vw,268px)}
.pring-orbit{position:absolute;inset:14%;border-radius:50%;border:1px dashed var(--accent-line)}
.pring-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44%;
  display:grid;place-items:center;gap:3px;text-align:center;padding:18px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--accent-soft),transparent 72%)}
.pring-core b{font-size:clamp(17px,2.4vw,23px);font-weight:850;letter-spacing:-.5px}
.pring-core i{font-size:11.5px;font-style:normal;color:var(--muted);line-height:1.4}
/* Placed on the circle by angle; the label hangs under its own icon and stays upright because
   nothing here rotates. */
.pring-sat{position:absolute;left:50%;top:50%;width:96px;margin:-24px 0 0 -48px;
  display:grid;justify-items:center;gap:5px;text-align:center;text-decoration:none;color:inherit;
  transform:rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  transition:transform .3s cubic-bezier(.16,.84,.44,1)}
.pring-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;
  background:var(--glass-2);border:1px solid var(--glass-line-2);box-shadow:var(--shadow-sm);
  transition:border-color .3s,background .3s}
.pring-ic svg{width:21px;height:21px;fill:none;stroke:var(--accent-text);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pring-sat em{font-style:normal;font-size:10.5px;font-weight:700;line-height:1.25;color:var(--muted);
  max-width:96px}
.pring-sat:hover .pring-ic{background:var(--accent-soft);border-color:var(--accent-line)}
.pring-sat:hover em{color:var(--text)}
.pring-cap{text-align:center;margin:10px 0 0;font-size:14px;font-weight:700;color:var(--accent-text)}
/* Below the width where seventeen labels can share a circle, it becomes a list. A ring nobody
   can read is decoration, and decoration is not worth a screen of scrolling on a phone. */
@media(max-width:760px){
  .pring-holder{width:100%;aspect-ratio:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:16px}
  .pring-orbit,.pring-core{display:none}
  .pring-sat{position:static;width:auto;margin:0;transform:none}
}

/* ── the logo rail ───────────────────────────────────────────────────────
   Scrolls on its own, the list printed twice so the loop has no seam. Greyed back by default:
   somebody else's brand colours next to yours fight your page and win. */
.band--clients{padding:44px 0 40px;overflow:hidden}
.clients-head{margin:0 0 22px;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--muted-2)}
.logo-rail{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.logo-track{display:flex;align-items:center;gap:64px;width:max-content;
  animation:logoRoll 42s linear infinite}
.logo-rail:hover .logo-track{animation-play-state:paused}
.logo-item{display:grid;place-items:center;flex:0 0 auto;height:46px}
.logo-item img{max-height:46px;max-width:170px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.55;transition:filter .35s,opacity .35s}
.logo-item:hover img{filter:none;opacity:1}
/* Half of the track is the duplicate, so one loop is exactly -50%. */
@keyframes logoRoll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:40px}
}

/* The whole-idea band now has a room behind it. */
.band--sameas{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;
  padding:52px 0 46px;margin:8px 0}
.band--sameas .bleed-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band--sameas::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--bg) 8%,rgba(238,243,239,.86) 46%,rgba(238,243,239,.42) 100%)}
:root[data-theme="dark"] .band--sameas::after{
  background:linear-gradient(100deg,var(--bg) 8%,rgba(7,17,12,.88) 46%,rgba(7,17,12,.5) 100%)}
.band--sameas .wrap{position:relative}