/* ============================================================
   Lab — interim home, service pages, case previews. Third pass.
   Language of the site: dark ground #171719, panels #232325, light plates
   #EAEAEA / #F7F7F7, Inter, radii 20/16/14, page gutter 24 → 6 by band
   (the steps of 01-header.css and 14b-footer.css).
   No WebGL, no Lenis, no reveal or decorative scroll motion. States move by
   the site law: capsule left→right, 300 ms in, 240 ms out,
   cubic-bezier(.4,0,.2,1) — the two durations are tokens (--lab-in/--lab-out,
   set in lab-chrome.css) and collapse to 1 ms under reduced motion. No idle
   animation: the SKARR.PRO column highlight is a static block.
   ============================================================ */

:root {
  --g: 24px;                 /* page gutter, one number per band */
  --hdr-h: 88px;             /* first-screen header: padding-top + bar + padding-bottom, by band */
  --clear: 72px;             /* anchor line: below the compact logo that stands where the header left */
  --ink: #eaeaea;
  --ink-dim: #d9d9d9;
  --ink-mute: #818181;
  --ground: #171719;
  --panel: #232325;
  --plate: #eaeaea;
  --ww: #f7f7f7;
  --line: rgba(234, 234, 234, 0.14);
  --line-dark: rgba(23, 23, 25, 0.16);
  --lab-in: 300ms;
  --lab-out: 240ms;
  --lab-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 1200px)   { :root { --g: 20px; --hdr-h: 84px; } }
@media (max-width: 1024px)   { :root { --g: 16px; --hdr-h: 80px; } }
@media (max-width: 768px)    { :root { --g: 12px; --hdr-h: 76px; } }
@media (max-width: 519.98px) { :root { --g: 8px;  --hdr-h: 68px; } }
@media (max-width: 375px)    { :root { --g: 6px; } }
@media (max-width: 374.98px) { :root { --hdr-h: 56px; } }

.lab, .lab * { box-sizing: border-box; }
/* The tail of the page keeps the height of the floating dock free, so the
   footer's service line can scroll clear of the Menu (pool 3, 16.09.2026:
   the pill covered Accessibility on every width but 768). */
.lab { min-width: 320px; overflow-x: clip; padding-bottom: var(--dock-reserve, 0px); }
.lab-main, .sp { position: relative; z-index: 5; }
#services, #cases, #next, #improving, #contact, #contact-card, [data-dock-target] { scroll-margin-top: var(--clear); }

/* ---------- Shared type ---------- */
.lab-h2 {
  margin: 0;
  font: 600 40px/44px "Inter", sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.lab-lead { margin: 12px 0 0; max-width: 62ch; font: 400 18px/26px "Inter", sans-serif; color: var(--ink-dim); }
.lab-eyebrow {
  margin: 0;
  font: 500 12px/16px "Inter", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lab-sechead { display: flex; flex-direction: column; }
.lab-sechead--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap; }
.lab-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Text link with a 44 px hit area that does not move the text. */
.lab-textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
  padding: 0 2px;
  font: 500 13px/16px "Inter", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(128, 128, 128, 0.5);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: text-decoration-color var(--lab-out) linear;
}
.lab-textlink:hover, .lab-textlink:active { text-decoration-color: currentColor; transition-duration: var(--lab-in); }
.lab-textlink:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
/* Tags on the home are the canonical chip (.svc-chips / .svc-chip from
   05-services-row.css, hover fill from 95-chips.css) — not these rules.
   .lab-tags / .lab-tag stay only for the editions on /apps/ (src/apps.mjs,
   pool 2); once that list takes the canonical chip too, delete them. */
.lab-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lab-tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px currentColor;
  font: 500 12px/16px "Inter", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Visible marker of prototype or unconfirmed content. */
.lab-pending {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px currentColor;
  font: 500 12px/16px "Inter", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lab-pending::before { content: "["; }
.lab-pending::after { content: "]"; }
.lab-pending--small { height: auto; min-height: 24px; margin-top: 8px; padding: 3px 8px; font-size: 10px; line-height: 14px; white-space: normal; text-align: left; color: var(--ink-mute); }
@media (max-width: 1024px) {
  .lab-h2 { font-size: 34px; line-height: 36px; }
  .lab-lead { font-size: 17px; line-height: 25px; }
}
@media (max-width: 719.98px) {
  .lab-h2 { font-size: 28px; line-height: 30px; }
  .lab-lead { font-size: 16px; line-height: 24px; margin-top: 10px; }
}

/* Her line breaks (Alexa, 16.09.2026): the tail phrase of a line is one piece —
   it drops to the next line whole instead of leaving a widow, and wraps inside
   itself only where a column is narrower than the phrase. */
.lab-tail { display: inline-block; }

/* ---------- Button, type B (one label). Buttons law, sections 2–4. ---------- */
.lab-btn {
  --btn-bg: var(--ww);
  --btn-ink: #171719;
  --btn-fill: #171719;
  --btn-fill-ink: #eaeaea;
  --btn-ring: none;
  --btn-focus: #eaeaea;
  --btn-radius: 14px;
  /* The fill stops short of the edge: a rim of the rest colour stays, so the
     capsule still reads when filled (Alexa, 16.09.2026). */
  --btn-inset: 2px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  font: 600 16px/20px "Inter", sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-ink);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--lab-out) linear;
}
.lab-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--btn-bg);
  box-shadow: var(--btn-ring);
}
.lab-btn::after {
  content: "";
  position: absolute;
  inset: var(--btn-inset);
  z-index: -1;
  border-radius: calc(var(--btn-radius) - var(--btn-inset));
  background: var(--btn-fill);
  clip-path: inset(0 100% 0 0 round calc(var(--btn-radius) - var(--btn-inset)));
  transition: clip-path var(--lab-out) var(--lab-ease);
}
.lab-btn:hover::after, .lab-btn:active::after, .lab-btn:focus-visible::after,
.svs-link:hover .lab-btn::after, .svs-link:focus-visible .lab-btn::after,
.svr-link:hover .lab-btn::after, .svr-link:focus-visible .lab-btn::after,
.cse-link:hover .lab-btn::after, .cse-link:focus-visible .lab-btn::after {
  clip-path: inset(0 round calc(var(--btn-radius) - var(--btn-inset)));
  transition-duration: var(--lab-in);
}
.lab-btn:hover, .lab-btn:active, .lab-btn:focus-visible,
.svs-link:hover .lab-btn, .svs-link:focus-visible .lab-btn,
.svr-link:hover .lab-btn, .svr-link:focus-visible .lab-btn,
.cse-link:hover .lab-btn, .cse-link:focus-visible .lab-btn {
  color: var(--btn-fill-ink);
  transition-duration: var(--lab-in);
}
.lab-btn:focus-visible { outline: 2px solid var(--btn-focus); outline-offset: 3px; }
.lab-btn--dark { --btn-bg: #171719; --btn-ink: #eaeaea; --btn-fill: var(--ww); --btn-fill-ink: #171719; --btn-focus: #171719; }
.lab-btn--ghost { --btn-bg: transparent; --btn-ring: inset 0 0 0 1px var(--ink); --btn-ink: var(--ink); --btn-fill: var(--ink); --btn-fill-ink: #171719; --btn-focus: var(--ink); }

/* ---------- Section tabs in the canonical .cs-tabs (09-cases.css) ----------
   Filter buttons share the tab look. Hover: the site's capsule; the active tab
   is a plate and does not react. The row scrolls when the width runs out. */
.hs-nav { margin-top: 24px; }
.hs-row { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.hs-row::-webkit-scrollbar { display: none; }
.hs-tab {
  position: relative;
  isolation: isolate;
  flex: 1 0 auto;
  gap: 8px;
  font-family: "Inter", sans-serif;
  text-decoration: none;
  scroll-snap-align: start;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--lab-out) linear;
}
.hs-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #eaeaea;
  clip-path: inset(0 100% 0 0 round 51px);
  transition: clip-path var(--lab-out) var(--lab-ease);
}
.hs-tab:not(.cs-tab--active):hover::after,
.hs-tab:not(.cs-tab--active):active::after,
.hs-tab:not(.cs-tab--active):focus-visible::after { clip-path: inset(0 round 51px); transition-duration: var(--lab-in); }
.hs-tab:not(.cs-tab--active):hover,
.hs-tab:not(.cs-tab--active):active,
.hs-tab:not(.cs-tab--active):focus-visible { color: #232325; transition-duration: var(--lab-in); }
.hs-tab.cs-tab--active { cursor: pointer; }
.hs-tab.cs-tab--active::after { display: none; }
.hs-tab:focus-visible { outline: 2px solid #eaeaea; outline-offset: -4px; }
.hs-count { font-weight: 400; opacity: 0.6; }
.cse-tabs { position: relative; }
.cse-tabs::after { content: ""; position: absolute; top: 4px; right: 4px; bottom: 4px; width: 48px; border-radius: 0 51px 51px 0; background: linear-gradient(90deg, rgba(35, 35, 37, 0), #232325); pointer-events: none; opacity: 1; transition: opacity 160ms linear; }
.cse-tabs[data-at-end]::after { opacity: 0; }

/* ============================================================
   HOME
   ============================================================ */

/* ---------- Hero: big typography with two fragments of real work inside it ---------- */
.hero { padding: calc(var(--hdr-h) + 40px) var(--g) 0; color: var(--ink); }
.hero-kicker { margin: 0; font: 500 13px/16px "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.04em;
  margin: 16px 0 0;
  font: 600 clamp(40px, 5.4vw, 88px) / 1 "Inter", sans-serif;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.hero-line { display: flex; align-items: center; gap: 0.2em; white-space: nowrap; }
.hero-frag {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: block;
  width: 2.2em;
  height: 0.9em;
  overflow: hidden;
  border-radius: 0.2em;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: width var(--lab-out) var(--lab-ease);
}
.hero-frag.is-open { width: max(4.2em, 240px); transition-duration: var(--lab-in); }
.hero-frag-media { position: absolute; inset: 0; }
.hero-frag-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-frag-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 18px 12px 10px;
  background: linear-gradient(180deg, rgba(23, 23, 25, 0), rgba(23, 23, 25, 0.86));
  font: 500 12px/16px "Inter", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #eaeaea;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--lab-out) linear, transform var(--lab-out) var(--lab-ease);
}
.hero-frag-cap strong { font-weight: 600; }
.hero-frag-cap span { color: #b8b8bd; overflow: hidden; text-overflow: ellipsis; }
.hero-frag-cap em { margin-left: auto; font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
.hero-frag.is-open .hero-frag-cap { opacity: 1; transform: none; transition-duration: var(--lab-in); }
.hero-frag:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero-sub { margin: 22px 0 0; max-width: 60ch; font: 400 18px/26px "Inter", sans-serif; color: var(--ink-dim); }
.hero-strip { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

/* ---------- Services ---------- */
.svs { margin-top: 64px; padding: 0 var(--g); }

/* Category navigator: a product element, room for an icon per category. */
.cat { margin-top: 24px; }
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cat-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 132px;
  padding: 14px 16px 14px 14px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px rgba(234, 234, 234, 0.1);
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--lab-out) var(--lab-ease), background-color var(--lab-out) var(--lab-ease);
}
.cat-item:hover, .cat-item:active { background-color: #2a2a2d; box-shadow: inset 0 0 0 1px var(--ink); transition-duration: var(--lab-in); }
.cat-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cat-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(234, 234, 234, 0.06);
  font: 500 12px/16px "Inter", sans-serif;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.cat-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cat-kicker { font: 500 10px/14px "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.cat-title { font: 600 17px/20px "Inter", sans-serif; letter-spacing: -0.01em; }
.cat-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 400 13px/18px "Inter", sans-serif; color: var(--ink-dim); }
.cat-meta { margin-top: auto; padding-top: 6px; font: 500 12px/16px "Inter", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.cat-title, .cat-kicker, .cat-meta { -webkit-user-select: none; user-select: none; }

/* Featured offer: copy with the two payments, the site's gallery on the right. */
.sps-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 4px;
  margin-top: 24px;
  padding: 4px;
  border-radius: 20px;
  background: var(--plate);
  color: #171719;
}
.sps-copy { display: flex; flex-direction: column; min-width: 0; padding: 28px; }
.sps-eyebrow { color: #5c5c60; }
.sps-title { margin: 10px 0 0; max-width: 14ch; font: 600 clamp(28px, 2.6vw, 40px) / 1.05 "Inter", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.sps-tags { margin-top: 16px; column-gap: 8px; }
.sps-tags .svc-chip { padding: 7px 12px; font-size: 14px; line-height: 18px; }
.sps-lead { margin: 18px 0 0; max-width: 52ch; font: 400 18px/26px "Inter", sans-serif; }
.sps-support { margin: 8px 0 0; max-width: 52ch; font: 400 15px/22px "Inter", sans-serif; color: #444448; }
.sps-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
}
.sps-price { min-width: 0; }
.sps-price dt { font: 500 12px/16px "Inter", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #5c5c60; }
.sps-price dd { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.sps-price strong { font: 600 36px/40px "Inter", sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sps-price small { font: 500 16px/20px "Inter", sans-serif; letter-spacing: 0; color: #444448; }
.sps-price dd span { max-width: 28ch; font: 400 13px/18px "Inter", sans-serif; color: #444448; }
/* The buttons stand at the bottom-left, the same distance from the left and
   the bottom edge as the copy (Alexa, 16.09.2026). */
.sps-buy { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: auto; padding-top: 36px; }
.sps-buy-item { display: flex; flex-direction: column; }
.sps-buy .cmp-test { margin-top: 8px; color: #5c5c60; }
.sps-visual {
  position: relative;
  margin: 0;
  min-height: 440px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
}
.sps-media { position: absolute; inset: 0; outline: none; }
.sps-media > img, .sps-media .gal-frame--native img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sps-visual.is-focus-left .sps-media .gal-frame--native img { object-position: left top; }
.sps-media:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
/* The canonical gallery on this slot: the concentric radii of the case slot
   (96-gallery.css), the native first frame fills the slot like the others. */
.sps-media.gal { --gal-bar: 24px; --gal-nav: 52px; --gal-radius: 16px; border-radius: 16px; }
.sps-media .gal-frame--native { position: absolute; inset: 0; }

/* Six cards: title → chips → line → price → See details. */
.svs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.svs-card { display: flex; min-width: 0; }
.svs-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
  border-radius: 20px;
  background: var(--plate);
  color: #171719;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  transition: background-color var(--lab-out) var(--lab-ease);
}
.svs-link:hover, .svs-link:active { background-color: var(--ww); transition-duration: var(--lab-in); }
.svs-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.svs-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: #1d1d1f; }
.svs-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.svs-media.is-focus-left img { object-position: left top; }
.svs-media.is-focus-center img, .cse-media.is-focus-center img, .spv-frame.is-focus-center .spv-media img { object-position: center; }
.svs-media.is-tile, .cse-media.is-tile, .spv-frame.is-tile .spv-media {
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, rgba(224, 85, 154, 0.20), rgba(224, 85, 154, 0) 62%), var(--ground);
}
.svs-media.is-tile img, .cse-media.is-tile img, .spv-frame.is-tile .spv-media img { width: 32%; height: auto; border-radius: 22%; }
/* A portrait shot stands whole in the frame, on the dark plate. */
.cse-media.is-phone, .spv-frame.is-phone .spv-media { position: relative; background: #1d1d1f; }
.cse-media.is-phone img, .spv-frame.is-phone .spv-media img { position: absolute; top: 6%; left: 50%; width: auto; height: 100%; max-width: none; transform: translateX(-50%); object-fit: cover; object-position: top; border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px rgba(234, 234, 234, 0.12); }
.svs-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 12px; padding: 16px 16px 16px; }
.svs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.svs-title { margin: 0; font: 600 24px/24px "Inter", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.svs-index { font: 500 12px/16px "Inter", sans-serif; letter-spacing: 0.14em; color: var(--ink-mute); }
.svs-line { margin: 0; max-width: 38ch; font: 400 15px/22px "Inter", sans-serif; color: #2c2c2c; }
.svs-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 0; }
.svs-price strong { font: 600 22px/26px "Inter", sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.svs-price span { font: 500 12px/16px "Inter", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.svs-foot { display: flex; align-items: center; margin-top: auto; padding-top: 12px; }
.svs-title, .svs-cta, .lab-tags, .svc-chips, .cse-title, .cse-status, .cse-cta, .svr-title, .svr-cta, .svr-entries, .svs-price {
  -webkit-user-select: none;
  user-select: none;
}

/* Seventh: three entry points. */
.svr-card { margin-top: 12px; }
.svr-link {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
  padding: 28px;
  border-radius: 20px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px rgba(234, 234, 234, 0.14);
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--lab-out) var(--lab-ease);
}
.svr-link:hover, .svr-link:active { box-shadow: inset 0 0 0 1px var(--ink); transition-duration: var(--lab-in); }
.svr-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.svr-title { margin: 8px 0 0; font: 600 32px/34px "Inter", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.svr-lead { margin: 12px 0 0; max-width: 52ch; font: 400 16px/24px "Inter", sans-serif; color: var(--ink-dim); }
.svr-thesis { margin: 12px 0 0; max-width: 40ch; font: 500 18px/26px "Inter", sans-serif; }
.svr-line { margin: 0 0 8px; font: 400 14px/20px "Inter", sans-serif; color: var(--ink-mute); }
.svr-entries { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.svr-entries li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font: 400 16px/22px "Inter", sans-serif; }
.svr-entries li:last-child { border-bottom: 1px solid var(--line); }
.svr-num { font: 500 12px/16px "Inter", sans-serif; letter-spacing: 0.14em; color: var(--ink-mute); }
.svr-cta {
  justify-self: end;
  width: 168px;
  height: 168px;
  min-height: 168px;
  max-height: 168px;
  padding: 24px;
  --btn-radius: 50%;
  font-size: 14px;
  line-height: 18px;
  white-space: normal;
  text-align: center;
}

/* ---------- Cases: the library ---------- */
.cse { margin-top: 96px; padding: 0 var(--g); }
.cse-count { margin: 0; font: 500 13px/16px "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.cse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.cse-card { display: flex; min-width: 0; }
.cse-card[hidden] { display: none; }
.cse-link, .cse-nda {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
  border-radius: 20px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}
.cse-link { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; transition: background-color var(--lab-out) var(--lab-ease); }
.cse-link:hover, .cse-link:active { background-color: #2a2a2d; transition-duration: var(--lab-in); }
.cse-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cse-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: #1d1d1f; }
.cse-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cse-media.is-focus-left img { object-position: left top; }
.cse-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; padding: 18px 16px 16px; }
.cse-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0; }
.cse-status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(234, 234, 234, 0.3);
  font: 500 11px/16px "Inter", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cse-title { margin: 0; font: 600 26px/28px "Inter", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.cse-line { margin: 0; font: 400 16px/24px "Inter", sans-serif; color: var(--ink-dim); }
.cse-foot { display: flex; align-items: center; margin-top: auto; padding-top: 12px; }
/* NDA card: the frame where a screenshot would stand is deliberately
   classified (Alexa, 16.09.2026) — grain, the ghost of a screen under
   redaction bars, an inked stamp; then the category, one title element with
   the name blurred and the label over it, the map's role line and three short
   rows: what, where, role. No product visual, no name, no link. */
.cse-nda { box-shadow: inset 0 0 0 1px rgba(234, 234, 234, 0.1); }
.cse-media--nda {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #141416;
  color: rgba(234, 234, 234, 0.9);
}
.cse-media--nda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.16;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* The ghost of a screen: a bar, a headline, two lines, a visual, two cards. */
.cse-ghost {
  position: absolute;
  inset: 10% 9% 0;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(#333338, #333338) 5% 6% / 18% 4% no-repeat,
    linear-gradient(#2c2c30, #2c2c30) 95% 6% / 30% 4% no-repeat,
    linear-gradient(#2e2e33, #2e2e33) 5% 24% / 52% 14% no-repeat,
    linear-gradient(#27272b, #27272b) 5% 44% / 44% 3% no-repeat,
    linear-gradient(#27272b, #27272b) 5% 51% / 36% 3% no-repeat,
    linear-gradient(#2a2a2e, #2a2a2e) 96% 62% / 34% 46% no-repeat,
    linear-gradient(#232327, #232327) 5% 96% / 26% 16% no-repeat,
    linear-gradient(#232327, #232327) 40% 96% / 26% 16% no-repeat,
    #1c1c1f;
  box-shadow: inset 0 0 0 1px rgba(234, 234, 234, 0.08);
  filter: blur(1.4px);
}
/* Redaction bars over the headline and the first line. */
.cse-ghost::before, .cse-ghost::after { content: ""; position: absolute; left: 5%; background: #08080a; box-shadow: 0 0 0 1px rgba(234, 234, 234, 0.06); }
.cse-ghost::before { top: 21%; width: 46%; height: 7%; }
.cse-ghost::after { top: 31%; width: 30%; height: 6%; }
.cse-stamp {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 22px 14px;
  border: 3px solid currentColor;
  border-radius: 8px;
  box-shadow: inset 0 0 0 4px #141416, inset 0 0 0 5.5px currentColor;
  transform: rotate(-7deg);
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.2 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.2 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  -webkit-mask-size: 240px 240px;
  mask-size: 240px 240px;
}
.cse-stamp-big { font: 800 26px/26px "Inter", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.cse-stamp-small { font: 600 9px/12px "Inter", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }
.cse-facts { display: grid; margin: 6px 0 0; padding: 0; }
.cse-facts > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.cse-facts dt { font: 500 11px/20px "Inter", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.cse-facts dd { margin: 0; font: 400 14px/20px "Inter", sans-serif; color: var(--ink-dim); }
.cse-title--nda { position: relative; display: block; margin: 4px 0 0; }
.cse-redacted { display: inline-block; filter: blur(7px); opacity: 0.55; -webkit-user-select: none; user-select: none; }
.cse-nda-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--ink);
  font: 500 11px/16px "Inter", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cse-nda .cse-line { margin-top: 4px; font-size: 15px; line-height: 22px; }

/* ---------- Transitional CTA: short, tied to the order path, leading below ---------- */
.nxt {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: start;
  margin: 80px var(--g) 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.nxt-title { margin: 0; font: 600 34px/38px "Inter", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.nxt-text { margin: 12px 0 0; max-width: 64ch; font: 400 18px/26px "Inter", sans-serif; color: var(--ink-dim); }
.nxt-text span { display: block; }
.nxt-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.nxt-below { margin: 0; max-width: 44ch; font: 400 14px/20px "Inter", sans-serif; color: var(--ink-mute); }
.lab .imp-stage { margin-top: 56px; }

/* ---------- Contact: the real callback form, channels, briefs as a line ---------- */
.ctc { margin-top: 56px; padding: 0 var(--g); }
.lab--home > .ftr { margin-top: 48px; }
.ctc-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 8px;
  border-radius: 38px 38px 24px 24px;
  background: var(--plate);
  color: #171719;
}
.ctc-intro { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 8px; }
.ctc-title { margin: 0; max-width: 18ch; font: 600 36px/40px "Inter", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.ctc-lead { margin: 16px 0 0; max-width: 52ch; font: 400 18px/26px "Inter", sans-serif; color: #2c2c2c; }
.ctc-briefs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 28px 0 0; font: 400 14px/20px "Inter", sans-serif; color: #444448; }
.ctc-briefs .lab-eyebrow { flex-basis: 100%; color: #5c5c60; }
.ctc-brief {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
  padding: 0 2px;
  color: #171719;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(23, 23, 25, 0.35);
  -webkit-tap-highlight-color: transparent;
  transition: text-decoration-color var(--lab-out) linear;
}
.ctc-brief:hover, .ctc-brief:active { text-decoration-color: currentColor; transition-duration: var(--lab-in); }
.ctc-brief:focus-visible { outline: 2px solid #171719; outline-offset: 2px; border-radius: 4px; }
.ctc-dot { color: #8a8a8f; }
.ctc-panel .ctc-form { grid-column: 2; grid-row: 1 / 3; min-height: 0; }
.ctc-panel .brf-channels { grid-column: 1; grid-row: 2; align-self: end; }
.brf-channel, .brf-channel *, .brf-send { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.imp-system button { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* ============================================================
   SERVICE PAGES, CASE PREVIEWS
   ============================================================ */
.sp { padding: calc(var(--hdr-h) + 40px) 0 96px; color: var(--ink); }
.sp-head { padding: 0 var(--g); }
.sp-crumb { margin: 0; font: 500 13px/16px "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.sp-crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -14px;
  padding: 0 2px;
  color: var(--ink-dim);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: text-decoration-color var(--lab-out) linear;
}
.sp-crumb a:hover, .sp-crumb a:active { text-decoration-color: currentColor; transition-duration: var(--lab-in); }
.sp-crumb a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.sp-kicker { margin-bottom: 12px; }
.sp-headgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 32px; align-items: end; margin-top: 20px; }
.sp-title { margin: 0; font: 600 clamp(36px, 4.2vw, 64px) / 1 "Inter", sans-serif; letter-spacing: -0.03em; text-transform: uppercase; }
.sp-meta { margin: 16px 0 0; font: 500 14px/20px "Inter", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.sp-explain { margin: 0; max-width: 58ch; font: 400 18px/26px "Inter", sans-serif; color: var(--ink-dim); }

/* ---------- Ribbon: kinds of work, the current one marked ---------- */
.rib { margin-top: 40px; padding: 0 var(--g); }
.rib-wrap { position: relative; }
.rib-wrap::after, .rib-wrap::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 56px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 160ms linear;
}
.rib-wrap::after { right: 0; background: linear-gradient(90deg, rgba(23, 23, 25, 0), var(--ground)); }
.rib-wrap::before { left: 0; background: linear-gradient(270deg, rgba(23, 23, 25, 0), var(--ground)); }
.rib-wrap[data-at-end]::after, .rib-wrap[data-at-start]::before { opacity: 0; }
.rib-track {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 5px 5px 8px;
  margin: -5px -5px 0;
}
.rib-track::-webkit-scrollbar { display: none; }
.rib-item {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 172px;
  min-height: 72px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px rgba(234, 234, 234, 0.10);
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--lab-out) var(--lab-ease);
}
.rib-name { font: 500 16px/20px "Inter", sans-serif; letter-spacing: -0.01em; white-space: nowrap; }
.rib-count { font: 400 13px/16px "Inter", sans-serif; color: var(--ink-mute); white-space: nowrap; }
.rib-item:not([aria-current]):hover, .rib-item:not([aria-current]):active { box-shadow: inset 0 0 0 1px var(--ink); transition-duration: var(--lab-in); }
.rib-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rib-item[aria-current="page"] { background: var(--plate); color: #171719; box-shadow: none; }
.rib-item[aria-current="page"] .rib-count { color: #5c5c60; }

/* ---------- Visuals: two frames shared by the whole service ---------- */
.spv { margin-top: 40px; padding: 0 var(--g); }
.spv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spv-frame { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 4px; border-radius: 20px; background: var(--panel); color: var(--ink); }
.spv-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: #1d1d1f; }
.spv-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.spv-frame.is-focus-left .spv-media img { object-position: left top; }
.spv-cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 14px 12px; font: 400 14px/20px "Inter", sans-serif; color: var(--ink-dim); }

/* ---------- Comparison: options in columns, criteria in rows, groups ---------- */
.cmp {
  margin-top: 72px;
  padding: 0 var(--g);
  /* PLACEHOLDER hue for the SKARR.PRO highlight — not decided; Alexa sends the
     final one. Everything below derives from this single variable. */
  --cmp-accent: #8f6bff;
  --cmp-accent-soft: color-mix(in srgb, var(--cmp-accent) 14%, transparent);
  --cmp-accent-faint: color-mix(in srgb, var(--cmp-accent) 5%, transparent);
  --cmp-accent-glow: color-mix(in srgb, var(--cmp-accent) 45%, transparent);
  --cmp-accent-plate: color-mix(in srgb, var(--cmp-accent) 14%, var(--ground));
}
.cmp-order {
  max-width: 44ch;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--panel);
  font: 400 14px/20px "Inter", sans-serif;
  color: var(--ink-dim);
}
.cmp-order p { margin: 6px 0 0; }
.cmp-order .lab-eyebrow { margin: 0; }
.cmp-tabs { display: none; }
.cmp-wrap { position: relative; margin-top: 28px; border-radius: 20px; }
/* SKARR.PRO: ONE continuous highlight behind the whole column — the tier
   name, the price, Buy and every row, straight through the group bars, no
   gaps (Alexa, 16.09.2026, after the «Ultimate» card of reactbits.dev): a
   frame and a soft glow, the content above it. compare.js sets left/width
   from the real column geometry; top and bottom are the table's own. */
.cmp-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 20px;
  border: 1.5px solid var(--cmp-accent);
  background: linear-gradient(180deg, var(--cmp-accent-soft), var(--cmp-accent-faint) 55%, var(--cmp-accent-soft));
  box-shadow: 0 0 60px 10px var(--cmp-accent-glow);
  pointer-events: none;
}
.cmp-glow[hidden] { display: none; }
.cmp-table { position: relative; z-index: 1; width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: var(--ink); }
.cmp-table th, .cmp-table td { padding: 20px 20px 22px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp-table thead th { padding-top: 0; padding-bottom: 20px; border-top: 0; vertical-align: top; }
.cmp-table th[scope="row"], .cmp-corner { width: 20%; }
.cmp-table th[data-tier], .cmp-table td[data-tier] { padding-left: 16px; padding-right: 16px; }
.cmp-row th[scope="row"] { padding-top: 24px; font: 500 12px/16px "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.cmp-tier { display: block; font: 500 12px/16px "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.cmp-price { display: block; margin-top: 10px; font: 600 36px/40px "Inter", sans-serif; letter-spacing: -0.02em; white-space: nowrap; }
.cmp-per { font: 500 16px/20px "Inter", sans-serif; letter-spacing: 0; color: var(--ink-dim); }
.cmp-period { display: block; margin-top: 6px; font: 400 14px/20px "Inter", sans-serif; color: var(--ink-mute); }
.cmp-buy { display: block; margin-top: 16px; }
.cmp-buy .lab-btn { display: flex; width: 100%; }
.cmp-test { margin: 10px 0 0; font: 400 13px/18px "Inter", sans-serif; color: var(--ink-mute); }
.cmp-test--soon { color: #a8a8ad; }
.cmp-test[hidden] { display: none; }
.cmp-cell-label { display: none; }
.cmp-prose { margin: 0; max-width: 36ch; font: 400 16px/24px "Inter", sans-serif; }
/* Group rows: a name, and for a secondary group the toggle. */
.cmp-group-head th { padding: 28px 0 6px; border-top: 0; }
.cmp-group-head .cmp-group-name { font: 500 12px/16px "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.cmp-group:first-of-type .cmp-group-head th { padding-top: 8px; }
.cmp-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -8px;
  margin-left: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-dim);
  font: 500 11px/16px "Inter", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--lab-out) var(--lab-ease), box-shadow var(--lab-out) var(--lab-ease);
}
.cmp-toggle:hover, .cmp-toggle:active, .cmp-toggle:focus-visible { background: rgba(234, 234, 234, 0.08); box-shadow: inset 0 0 0 1px var(--ink); transition-duration: var(--lab-in); }
.cmp-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cmp-row[hidden] { display: none; }
@media (min-width: 720px) {
  .cmp-table thead th { position: sticky; top: 0; z-index: 2; padding-top: 20px; }
  /* Once the head is stuck it is a plate over the rows; the PRO cell keeps the
     column's tint and its two side lines, so the block reads continuous. */
  .cmp-wrap.is-stuck thead th { background: var(--ground); box-shadow: 0 1px 0 var(--line); }
  .cmp-wrap.is-stuck thead th[data-tier="pro"] { background: var(--cmp-accent-plate); box-shadow: inset 1.5px 0 0 var(--cmp-accent), inset -1.5px 0 0 var(--cmp-accent), 0 1px 0 var(--line); }
}

/* ---------- Contact strip on sub-pages ---------- */
.spc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; margin: 72px var(--g) 0; padding-top: 32px; border-top: 1px solid var(--line); }
.spc-title { margin: 0; font: 600 24px/28px "Inter", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.spc p { margin: 8px 0 0; max-width: 52ch; font: 400 16px/24px "Inter", sans-serif; color: var(--ink-dim); }

/* ---------- Service Redesign page ---------- */
.rdt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; margin-top: 40px; padding: 0 var(--g); }
.rdt-thesis { padding: 28px; border-radius: 20px; background: var(--plate); color: #171719; }
.rdt-title { margin: 0; max-width: 16ch; font: 600 clamp(28px, 2.8vw, 40px) / 1.08 "Inter", sans-serif; letter-spacing: -0.02em; }
.rdt-thesis p { margin: 16px 0 0; max-width: 52ch; font: 400 17px/25px "Inter", sans-serif; color: #2c2c2c; }
.rdt-path { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; background: var(--panel); }
.rdt-path-frame {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: 220px;
  padding: 20px;
  border: 1px dashed rgba(234, 234, 234, 0.32);
  border-radius: 14px;
  background: repeating-linear-gradient(135deg, rgba(234, 234, 234, 0.04) 0 12px, transparent 12px 24px), #1d1d1f;
}
.rdt-path-frame .lab-pending { align-self: flex-start; }
.rdt-path-frame p { margin: 0; max-width: 40ch; font: 400 14px/20px "Inter", sans-serif; color: var(--ink-mute); }
.rde { margin-top: 72px; padding: 0 var(--g); }
.rde-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.rde-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(234, 234, 234, 0.10); }
.rde-num { font: 500 12px/16px "Inter", sans-serif; letter-spacing: 0.14em; color: var(--ink-mute); }
.rde-card h3 { margin: 0; font: 600 24px/26px "Inter", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.rde-card p { margin: 0; font: 400 15px/22px "Inter", sans-serif; color: var(--ink-dim); }
.rde-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.rde-price strong { font: 600 28px/32px "Inter", sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rde-price > span:not(.lab-pending) { font: 400 14px/20px "Inter", sans-serif; color: var(--ink-mute); }
.rde-price .lab-pending { height: 26px; font-size: 11px; color: var(--ink-dim); }
.rde-buy .lab-btn { display: flex; width: 100%; margin-top: 12px; }
.rde-buy .cmp-test { margin-top: 8px; }
.rde-actions { margin-top: 24px; }

/* ---------- Case previews ---------- */
.csp { margin-top: 40px; padding: 0 var(--g); }
.csp-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 12px; align-items: start; }
.csp-frame { grid-column: 1; }
.csp-facts { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px; background: var(--plate); color: #171719; }
.csp-facts .lab-eyebrow { color: #5c5c60; }
.csp-facts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font: 400 15px/22px "Inter", sans-serif; }
.csp-facts li { position: relative; padding-left: 16px; }
.csp-facts li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: #171719; }
.csp-note { margin: 4px 0 0; font: 400 14px/20px "Inter", sans-serif; color: #444448; }
.csp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.csp-actions .lab-btn--light { --btn-bg: #171719; --btn-ink: #eaeaea; --btn-fill: var(--ww); --btn-fill-ink: #171719; --btn-focus: #171719; }
.csp-actions .lab-btn--ghost { --btn-ring: inset 0 0 0 1px #171719; --btn-ink: #171719; --btn-fill: #171719; --btn-fill-ink: #eaeaea; --btn-focus: #171719; }

/* ============================================================
   Bands
   ============================================================ */
@media (max-width: 1200px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svs-grid { gap: 10px; }
  .svs-title { font-size: 22px; line-height: 22px; }
  .svr-link { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .svr-cta { grid-column: 1 / -1; justify-self: start; }
  .cse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .hero { padding-top: calc(var(--hdr-h) + 32px); }
  .svs { margin-top: 56px; }
  .cse { margin-top: 72px; }
  .nxt { margin-top: 64px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sps-card { grid-template-columns: minmax(0, 1fr); }
  .sps-visual { order: -1; min-height: 320px; }
  /* One column: the copy's head splits in two — eyebrow and title on the
     left, the chips with the description on the right — so the width beside
     the short title works instead of standing empty, and the chips wrap in
     their own column instead of one tight line (Alexa's marked iPad shot,
     16.09.2026, pool 3). Prices and the buttons keep the full width below. */
  .sps-copy--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-content: start; }
  .sps-copy--split .sps-info .sps-tags { margin-top: 0; }
  .sps-copy--split .sps-prices, .sps-copy--split .sps-buy { grid-column: 1 / -1; }
  .svs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp { padding-top: calc(var(--hdr-h) + 32px); }
  .sp-headgrid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cmp-price { font-size: 30px; line-height: 34px; }
  .cmp-order { max-width: none; }
  .ctc-panel { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr); }
  .csp-grid { grid-template-columns: minmax(0, 1fr); }
  .csp-facts { grid-column: 1; grid-row: 2; position: static; }
}

@media (max-width: 768px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spv-grid { grid-template-columns: minmax(0, 1fr); }
  .cse-grid { grid-template-columns: minmax(0, 1fr); }
  .rdt { grid-template-columns: minmax(0, 1fr); }
  .rde-grid { grid-template-columns: minmax(0, 1fr); }
  .cmp-table th, .cmp-table td { padding-right: 12px; }
}

@media (max-width: 719.98px) {
  .hero { padding-top: calc(var(--hdr-h) + 20px); }
  .hero-title { font-size: clamp(34px, 9.4vw, 44px); gap: 0; }
  .hero-line { display: block; white-space: normal; }
  .hero-title .hero-frag { display: none; }
  .hero-sub { margin-top: 16px; font-size: 16px; line-height: 24px; }
  /* The fragments move into their own row between the thesis and the buttons. */
  .hero-strip { display: flex; gap: 8px; margin-top: 18px; }
  .hero-strip .hero-frag { flex: 1 1 0; width: auto; height: 96px; border-radius: 12px; transition: flex-grow var(--lab-out) var(--lab-ease); }
  .hero-strip .hero-frag.is-open { flex-grow: 2.2; width: auto; transition-duration: var(--lab-in); }
  .hero-actions { margin-top: 18px; }
  .hero-actions .lab-btn { flex: 1 1 100%; display: flex; }
  .svs { margin-top: 40px; }
  .cat { margin-top: 16px; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cat-item { min-height: 0; padding: 12px 14px 12px 12px; }
  .cat-line { -webkit-line-clamp: 1; }
  .cse { margin-top: 56px; }
  .nxt { margin-top: 48px; padding-top: 24px; }
  .nxt-title { font-size: 26px; line-height: 28px; }
  .nxt-text { font-size: 16px; line-height: 24px; }
  .nxt-side .lab-btn { align-self: stretch; display: flex; }
  .lab .imp-stage { margin-top: 40px; }
  .ctc { margin-top: 40px; }
  .hs-nav { margin-top: 16px; }
  .sps-card { margin-top: 16px; }
  .sps-copy { padding: 20px 16px 16px; }
  /* Phones: too narrow for two columns — the head and the info stack again. */
  .sps-copy--split { display: flex; }
  .sps-copy--split .sps-info .sps-tags { margin-top: 16px; }
  .sps-prices { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; padding-top: 18px; }
  .sps-price + .sps-price { padding-top: 16px; border-top: 1px solid var(--line-dark); }
  .sps-buy { padding-top: 24px; }
  .sps-buy, .sps-buy-item { width: 100%; }
  .sps-buy .lab-btn { display: flex; width: 100%; }
  .sps-visual { min-height: 240px; }
  .svs-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .svs-body { gap: 10px; padding: 14px 12px 12px; }
  .svs-foot .lab-btn { flex: 1 1 100%; display: flex; }
  .svr-link { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 16px; }
  .svr-title { font-size: 26px; line-height: 28px; }
  .svr-cta { justify-self: start; display: flex; }
  .cse-grid { gap: 8px; }
  .cse-title { font-size: 22px; line-height: 24px; }
  .cse-foot .lab-btn { flex: 1 1 100%; display: flex; }
  .ctc-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 8px; border-radius: 24px; }
  .ctc-intro { grid-row: auto; padding: 16px 12px 12px; }
  .ctc-title { font-size: 28px; line-height: 30px; }
  .ctc-lead { font-size: 16px; line-height: 24px; }
  .ctc-briefs { margin-top: 20px; }
  .ctc-panel .ctc-form, .ctc-panel .brf-channels { grid-column: auto; grid-row: auto; }
  .ctc-panel .brf-contact { min-height: 0; padding: 16px; border-radius: 18px; gap: 20px; }
  .ctc-panel .brf-contact-title { padding: 0; font-size: 24px; line-height: 26px; }
  .ctc-panel .brf-contact-fields { margin-top: 0; gap: 8px; padding: 0; }
  .ctc-panel .brf-inp-dark { height: 44px; padding: 0 12px; }
  .ctc-panel .brf-send { min-height: 44px; padding: 10px 12px; font-size: 14px; }
  .sp { padding-top: calc(var(--hdr-h) + 20px); padding-bottom: 72px; }
  .sp-headgrid { margin-top: 16px; }
  .sp-explain { font-size: 16px; line-height: 24px; }
  .rib { margin-top: 32px; }
  .rib-item { min-width: 160px; min-height: 64px; padding: 12px 16px; }
  .spv { margin-top: 32px; }
  .spv-cap { flex-wrap: wrap; gap: 8px 16px; }
  .cmp { margin-top: 56px; }
  /* Tabs switch the visible option; the criteria stay next to its values. */
  .cmp-tabs {
    position: sticky;
    top: 8px;
    z-index: 3;
    display: flex;
    gap: 4px;
    margin-top: 20px;
    padding: 4px;
    border-radius: 999px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(234, 234, 234, 0.14);
  }
  .cmp-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    height: 48px;
    padding: 0 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: 600 11px/14px "Inter", sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--lab-out) var(--lab-ease), color var(--lab-out) linear;
  }
  .cmp-tab[aria-selected="true"] { background: var(--plate); color: #171719; transition-duration: var(--lab-in); }
  .cmp-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
  .cmp-tab-price { font: 500 11px/14px "Inter", sans-serif; letter-spacing: 0; text-transform: none; opacity: 0.8; }
  .cmp-wrap { margin-top: 16px; }
  .cmp-table, .cmp-table thead, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto; }
  .cmp-corner, .cmp-table [data-tier] { display: none; }
  .cmp-wrap[data-tier="lite"] [data-tier="lite"],
  .cmp-wrap[data-tier="skarr"] [data-tier="skarr"],
  .cmp-wrap[data-tier="pro"] [data-tier="pro"] { display: block; }
  .cmp-table th[data-tier], .cmp-table td[data-tier] { padding-left: 0; padding-right: 0; }
  .cmp-table thead th { position: static; padding: 4px 0 20px; border: 0; }
  .cmp-price { font-size: 32px; line-height: 36px; }
  .cmp-group-head th { padding: 20px 0 4px; }
  .cmp-group:first-of-type .cmp-group-head th { padding-top: 4px; }
  .cmp-row th[scope="row"] { width: auto; padding: 14px 0 4px; border-top: 1px solid var(--line); }
  .cmp-row td { padding: 0 0 14px; border-top: 0; }
  .cmp-prose { max-width: none; font-size: 15px; line-height: 22px; }
  .spc { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
  .spc .lab-btn { display: flex; }
  .rdt-thesis, .rdt-path { padding: 20px 16px; }
  .rde-actions .lab-btn { display: flex; }
  .csp-actions .lab-btn { flex: 1 1 100%; display: flex; }
}

@media (max-width: 430px) {
  .sps-title { font-size: 26px; }
  .sps-price strong { font-size: 30px; line-height: 34px; }
  .cmp-price { font-size: 28px; line-height: 32px; }
  .hero-strip .hero-frag { height: 84px; }
}

@media (max-width: 375px) {
  .svs-line { font-size: 14px; line-height: 21px; }
  .rib-item { min-width: 152px; }
}

@media (max-width: 320px) {
  .hero-actions .lab-btn, .svs-foot .lab-btn, .cmp-buy .lab-btn, .spc .lab-btn, .sps-buy .lab-btn, .csp-actions .lab-btn { padding: 0 16px; }
}

/* ---------- Reduced motion: states change at once, nothing travels, no idle drift ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --lab-in: 1ms; --lab-out: 1ms; }
  .rib-wrap::after, .rib-wrap::before { transition-duration: 1ms; }
}

/* ---------- Forced colours: shapes survive without the fill layers ---------- */
@media (forced-colors: active) {
  .lab-btn, .hs-tab, .rib-item, .cat-item, .cmp-tab, .cmp-toggle, .ctc-brief, .hero-frag { border: 1px solid ButtonText; }
  .lab-btn::after, .hs-tab::after { display: none; }
  .hs-tab.cs-tab--active, .rib-item[aria-current="page"], .cmp-tab[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .cmp-glow { display: none; }
}