/* ==========================================================================
   wipp.it — home page (root component)
   Self-contained: does NOT depend on /assets/css/style.css, which still
   serves /vision, /docs, /ideas and /setup. Do not merge the two.

   Source of truth for every value here:
     source/site/site-20260822/design_handoff_wippit_home/README.md
   Deviations from that handoff are marked with a DEVIATION note.
   ========================================================================== */

/* --- Display face -------------------------------------------------------
   DEVIATION: the handoff ships Archivo Black Italic as a stand-in and notes
   the real face (Elaine Sans Black Italic) "no está disponible para web".
   It is: the licensed TTFs have been live at /assets/webfonts/elaine-sans/
   since May. Converted to woff2 (321 KB -> 84 KB), full Latin + Spanish
   coverage verified. Archivo stays as the fallback only.                  */
@font-face {
  font-family: 'Elaine Sans';
  src: url('/assets/webfonts/elaine-sans/ElaineSans-BlackItalic.woff2') format('woff2'),
       url('/assets/webfonts/elaine-sans/ElaineSans-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand palette (chili red / raisin black / silver) over the Nocturne ramp */
  --color-bg:          #1c1c21;
  --color-surface:     #24242b;
  --color-text:        #f1f0f0;
  --color-accent:      #dd2c10;
  --color-accent-100:  #fdece8;
  --color-accent-200:  #ff8a70;
  --color-accent-300:  #ff5230;
  --color-accent-400:  #f0421f;
  --color-accent-500:  #dd2c10;
  --color-accent-600:  #b52309;
  --color-accent-700:  #8a1c08;
  --color-accent-800:  #5d1406;
  --color-accent-900:  #2f0d05;
  --color-neutral-100: #f6f5f5;
  --color-neutral-200: #e6e5e5;
  --color-neutral-300: #c9c7c8;
  --color-neutral-400: #a5a3a4;
  --color-neutral-500: #868485;
  --color-neutral-600: #676566;
  --color-neutral-700: #4d4b4d;
  --color-neutral-800: #353437;
  --color-neutral-900: #26262b;
  --color-divider:     color-mix(in srgb, #c9c7c8 18%, transparent);
  --color-section:     #23100c;
  --color-section-glow:#6d1a08;

  --shadow-sm: 0 0 0 1px #353437;
  --shadow-md: 0 0 0 1px #4d4b4d, 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 0 0 1px #868485, 0 16px 40px rgba(0, 0, 0, 0.65);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* DEVIATION: body face is DM Sans, not Inter. The open site task requires
     wipp.it and account.wipp.it to read as one company, and the console is
     on DM Sans. Metrics are close enough that the handoff's type scale holds. */
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Elaine Sans', 'Archivo', system-ui, sans-serif;

  --radius: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--color-accent-900) 80%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 35%, transparent), transparent 55%),
    var(--color-bg);
}

img, svg { max-width: 100%; }

a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); }

/* Never leave the browser's blue ring. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }

/* --- shared bits --------------------------------------------------------- */

.w-wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 72px);
}

.w-kicker {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-accent-300);
}

.w-h2 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.16; }

.w-body {
  font-size: 16.5px;
  line-height: 1.62;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}

/* Rules fade out over the last 48px on each side — never edge to edge. */
.w-rule {
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, transparent, var(--color-neutral-700) 48px calc(100% - 48px), transparent) 1;
}

.w-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 15px;
  color: var(--color-accent-300);
  font-feature-settings: 'tnum' 1;
}

.tnum { font-feature-settings: 'tnum' 1; }

/* --- buttons (stand in for the Nocturne DS, which does not ship with the
       handoff). On this dark ground "primary" reads as an accent outline. --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.btn:hover { color: var(--color-text); }

.btn-primary { border-color: var(--color-accent); }
.btn-primary:hover {
  border-color: var(--color-accent-400);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.btn-ghost { border-color: transparent; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-neutral-300) 10%, transparent); }

.btn-outline { border-color: color-mix(in srgb, var(--color-neutral-300) 34%, transparent); }
.btn-outline:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.btn-block { width: 100%; }

.btn-sm {
  min-height: 32px;
  padding-inline: 12px;
  font-size: 13px;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }

/* --- 1 · nav ------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 22px clamp(20px, 5vw, 72px);
  max-width: 1200px;
  margin-inline: auto;
  flex-wrap: wrap;
}
.nav-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.nav-brand img { display: block; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.nav-links a {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}
.nav-links a:hover { color: var(--color-accent-200); }

/* The section anchors go away with the room for them; the two doors stay. */
@media (max-width: 860px) { .nav-links { display: none; } }
@media (max-width: 560px) {
  .nav { gap: 10px; padding-block: 16px; }
  .nav-brand img:first-child { height: 22px; }
  .nav-brand img:last-child  { height: 16px; }
  .nav .btn { padding-inline: 12px; font-size: 14px; }
  .nav .btn-sm { padding-inline: 10px; }
}

/* --- 2 · hero ------------------------------------------------------------ */

.w-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px clamp(32px, 5vw, 80px);
  align-items: center;
  padding-top: 104px;
  padding-bottom: 84px;
}
.hero-title {
  font-size: clamp(38px, 4.8vw, 66px);
  line-height: 1.07;
  margin-left: -0.06em; /* optical correction for the italic */
}
.hero-sub    { font-size: 18px; line-height: 1.6; max-width: 52ch; margin-top: 30px; }
.hero-aud    { font-size: 16px; line-height: 1.55; max-width: 50ch; margin-top: 18px;
               color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.hero-ctas   { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 32px; }
.hero-micro  { font-size: 13px; letter-spacing: 0.04em; margin-top: 20px;
               color: color-mix(in srgb, var(--color-text) 58%, transparent); }
.hero-fig    { margin: 0; display: grid; gap: 16px; justify-items: center; }
.hero-cap    { font-size: 13px; line-height: 1.5; text-align: center; max-width: 34ch;
               color: color-mix(in srgb, var(--color-text) 60%, transparent); }

@media (max-width: 900px) { .w-hero { grid-template-columns: 1fr; padding-top: 64px; } }

/* --- the Inbox mock ------------------------------------------------------
   Drawn at its natural 440x915 design size and scaled down whole, so type
   and padding keep their real proportions. Product colours, not site colours. */

.mock-frame { width: 316px; height: 657px; position: relative; overflow: hidden; }
.mock {
  position: absolute; top: 0; left: 0;
  width: 440px; height: 915px;
  transform: scale(0.7182);
  transform-origin: top left;
  display: flex; flex-direction: column;
  background: #f6f5f1;
  border: 1px solid #dcd9d0;
  border-radius: 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1f2420;
}
.mock-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 3px solid #4a7c3f;
  background: #fbfaf7;
}
.mock-burger { display: grid; gap: 3px; width: 20px; }
.mock-burger span { display: block; height: 2px; background: #4b514a; }
.mock-head-mid { flex: 1; text-align: center; }
.mock-head-mid p:first-child { font-size: 15px; font-weight: 600; }
.mock-head-mid p:last-child  { margin-top: 2px; font-size: 11px; color: #7b817a; }
.mock-me {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: #cfdcc8;
  font-size: 11px; font-weight: 600; color: #3c5c33;
}
.mock-filters { display: flex; align-items: center; gap: 7px; padding: 12px 14px 10px; }
.mock-pill {
  padding: 6px 13px; border-radius: 16px; border: 1px solid #dcd9d0;
  background: #fff; font-size: 11.5px; color: #4b514a;
}
.mock-pill.is-on { background: #1f2420; border-color: #1f2420; color: #fff; font-weight: 600; }
.mock-tools { margin-left: auto; display: flex; gap: 6px; color: #4b514a; }
.mock-tools span {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 9px; border: 1px solid #dcd9d0; background: #fff;
}
.mock-listwrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* DEVIATION: gap is 20px, not the prototype's 10px. The prototype's cards ran
   taller on its font, so the sixth one fell under the fade — the "screenshot cut
   mid-list" the handoff asks for. On DM Sans the six fit with room to spare and
   the list reads as finished. The extra gap restores the cut. Both languages
   measure the same height here, so one value covers both. */
.mock-list { display: grid; gap: 20px; padding: 0 16px 16px; align-content: start; }
.mock-fade {
  position: absolute; inset: auto 0 0 0; height: 56px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(246, 245, 241, 0), #f6f5f1);
}
.mock-card {
  background: #fff; border: 1px solid #e4e1d8; border-left: 3px solid #e4e1d8;
  border-radius: 10px; padding: 11px 12px; display: grid; gap: 5px;
}
.mock-card.t-red   { border-left-color: #c0392b; }
.mock-card.t-amber { border-left-color: #b07d1a; }
.mock-top { display: flex; align-items: flex-start; gap: 9px; }
.mock-ini {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  border-radius: 50%; font-size: 9.5px; font-weight: 700; color: #3f4a3a;
}
.mock-who { flex: 1; min-width: 0; }
.mock-name { display: block; font-size: 13px; font-weight: 600; }
.mock-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.mock-chip { padding: 2px 7px; border-radius: 10px; background: #eeeae1; font-size: 9.5px; color: #5c6259; }
.mock-detail { font-size: 10px; color: #8b918a; }
.mock-time { flex: none; font-size: 9.5px; color: #8b918a; }
.mock-body { font-size: 12.5px; line-height: 1.4; }
.mock-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mock-due { font-size: 11px; color: #8b918a; }
.t-red   .mock-due { color: #c0392b; }
.t-amber .mock-due { color: #96681a; }
.mock-badge { padding: 3px 9px; border-radius: 6px; background: #1f2420; color: #fff; font-size: 10px; font-weight: 600; }
.t-red .mock-badge { background: #c0392b; }
/* thread roll-up: the footer OF the card, flush to its edges */
.mock-more {
  margin: 6px -12px -11px; padding: 9px 12px;
  border-top: 1px solid #e4e1d8; background: #f2efe8;
  border-radius: 0 0 8px 8px; font-size: 11px; color: #6d736c;
}
.mock-nav {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 10px 12px 14px; border-top: 1px solid #e4e1d8;
  background: #fbfaf7; font-size: 10.5px;
}
.mock-nav > span { display: grid; gap: 4px; justify-items: center; color: #7b817a; }
.mock-nav > span.is-on { color: #c0392b; font-weight: 600; }
.mock-mark { display: block; width: 18px; height: 2px; border-radius: 1px; background: #c0392b; }
.mock-ico { position: relative; display: grid; place-items: center; }
.mock-dot {
  position: absolute; top: -5px; left: 11px;
  display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; background: #c0392b; color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
}

/* --- 2b · the 20% that doesn't fit --------------------------------------
   Deliberately NOT a second saturated band: the store band is the only one on
   the page and stays that way. This one carries weight with type and a rule.  */

.sec-8020 { padding-top: 8px; padding-bottom: 72px; }
.sec-8020 .w-kicker { margin-bottom: 18px; }
.saas-title {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.14;
  max-width: 22ch;
  margin-bottom: 22px;
}
.saas-body {
  max-width: 60ch;
  padding-top: 22px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, var(--color-accent-500) 0 96px, var(--color-neutral-700) 96px calc(100% - 48px), transparent) 1;
}

/* --- 3 · what it's for --------------------------------------------------- */

.sec-uses { padding-top: 56px; padding-bottom: 96px; }
.sec-uses .w-h2 { max-width: 28ch; }
.uses-sub { margin: 18px 0 44px; max-width: 52ch; }

.w-uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 24px; }
.use { margin: 0; display: grid; gap: 12px; align-content: start; }
.use img {
  width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
  border-radius: var(--radius); display: block; background: var(--color-surface);
}
.use figcaption {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 17px; line-height: 1.25;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.values-lead {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(20px, 2.1vw, 27px); line-height: 1.3;
  margin: 64px 0 36px; max-width: 50ch;
}
.w-values { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 24px; }
.value {
  display: grid; gap: 18px; padding-top: 18px;
  border-top: 2px solid var(--color-accent);
  align-content: start; justify-items: center; text-align: center;
}
.value img { width: 64px; height: 64px; display: block; }
.value p { font-size: 18px; line-height: 1.35; }

@media (max-width: 1000px) { .w-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .w-uses   { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  {
  .w-uses   { grid-template-columns: 1fr; }
  .w-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 4 · plans ------------------------------------------------------------
   The two blocks of each column line up across columns via subgrid. Without
   it, category blurbs of different length knock the price cards out of row. */

.sec-plans { padding-bottom: 96px; }
.plans-sub { margin: 14px 0 34px; max-width: 50ch; }

.w-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: max-content max-content;
  gap: 24px;
  align-items: start;
  padding-top: 12px;
}
.plan { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 16px; align-content: start; }
.plan-head {
  display: grid; gap: 10px; align-content: start;
  padding-top: 16px; border-top: 2px solid var(--color-accent);
}
.plan-nameline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-name {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05;
  color: var(--color-accent-300);
}
.plan-stage {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.plan-blurb { font-size: 15.5px; line-height: 1.5; margin-top: 4px;
              color: color-mix(in srgb, var(--color-text) 88%, transparent); }

.plan-card { display: grid; gap: 14px; padding: 26px; align-content: start; }
.plan-price {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 38px; line-height: 1.1; letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
}
.plan-price span {
  font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.plan-pricenote { font-size: 13px; line-height: 1.5; margin-top: 8px;
                  color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.plan-for { font-size: 15px; line-height: 1.55;
            color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.plan-feats { padding-top: 16px; display: grid; gap: 10px; }
.plan-plus  { font-size: 13px; color: var(--color-accent-300); }
.plan-feats p:not(.plan-plus) {
  font-size: 14.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}
.plan-setup { padding-top: 16px; display: grid; gap: 4px; }
.plan-setup-label {
  font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-accent-300);
}
.plan-setup-gap { margin-top: 12px; }
.plan-setup-val { font-size: 14.5px; line-height: 1.5;
                  color: color-mix(in srgb, var(--color-text) 88%, transparent); }
.plan-meta { font-size: 12.5px; line-height: 1.5; margin-top: 4px;
             color: color-mix(in srgb, var(--color-text) 55%, transparent); }

@media (max-width: 940px) {
  .w-plans { grid-template-columns: 1fr; grid-template-rows: none; }
  .plan    { grid-template-rows: none; grid-row: auto; }
}

/* --- 5 · how it works ---------------------------------------------------- */

.sec-how { padding-top: 24px; padding-bottom: 56px; }
.how-img { display: block; width: 100%; height: auto; margin-top: 12px; }
/* Texto para lectores de pantalla e indexadores: el SVG no lo entrega.
   En móvil deja de estar oculto y SUSTITUYE al diagrama — a 335px de ancho el
   dibujo de 1200px deja las pastillas en ~4px de texto, ilegible. Un diagrama
   no refluye; el texto sí. */
.w-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 880px) {
  .how-img { display: none; }
  .w-sr {
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; clip-path: none; white-space: normal;
    display: grid; gap: 26px; margin-top: 26px;
  }
  .w-sr .sr-step { display: grid; gap: 6px; }
  .w-sr .sr-n { font-family: var(--font-display); font-style: italic; font-weight: 900;
                font-size: 22px; line-height: 1; color: var(--color-accent); }
  .w-sr h3 { font-size: 21px; line-height: 1.18; }
  .w-sr p { font-size: 16px; line-height: 1.6;
            color: color-mix(in srgb, var(--color-text) 80%, transparent); }
}
.how-title {
  font-size: clamp(30px, 4vw, 54px); line-height: 1.1;
  color: var(--color-accent-300); margin-bottom: 44px;
}
.w-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 300px) minmax(0, 1fr);
  gap: 28px clamp(24px, 4vw, 72px);
  align-items: baseline;
  padding: 34px 0;
}
.w-step + .w-step {
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, transparent, var(--color-neutral-700) 48px calc(100% - 48px), transparent) 1;
}
.w-step h3 { font-size: 26px; line-height: 1.15; }
.w-step .w-body { max-width: 52ch; }

@media (max-width: 880px) { .w-step { grid-template-columns: 1fr; gap: 12px; } }

/* --- 5b · who does what --------------------------------------------------
   The division-of-responsibility panel. Two columns of the same weight on
   purpose: neither side is the fine print of the other.                    */

.sec-scope { padding-top: 8px; padding-bottom: 88px; }
.scope-sub { margin: 14px 0 40px; max-width: 58ch; }
.w-scope {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.scope-col { padding: 30px clamp(22px, 3vw, 36px); }
.scope-h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-accent-300);
  margin-bottom: 16px;
}
.scope-list { list-style: none; margin: 0; padding: 0; }
.scope-list li {
  position: relative;
  padding: 14px 0 14px 24px;
  font-size: 16.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.scope-list li + li { border-top: 1px solid var(--color-divider); }
.scope-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 23px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-500);
}

@media (max-width: 720px) { .w-scope { grid-template-columns: 1fr; } }

/* --- 6 · live cases ------------------------------------------------------ */

.sec-cases { padding-bottom: 96px; }
.cases-sub { margin: 14px 0 44px; max-width: 48ch; }
.w-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.case { margin: 0; }
.case img {
  width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
  border-radius: 10px; display: block; background: var(--color-surface);
}
.case figcaption {
  font-size: 14.5px; line-height: 1.5; margin-top: 14px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

@media (max-width: 720px) { .w-cases { grid-template-columns: 1fr; } }

/* --- 7 · store band — the only saturated band on the page ---------------- */

.sec-store {
  padding: 72px 0;
  margin-bottom: 96px;
  background:
    radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%),
    var(--color-section);
}
.w-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px clamp(32px, 6vw, 96px);
  align-items: start;
}
.sec-store .w-h2 { max-width: 20ch; }
.store-body { margin-bottom: 28px; max-width: 50ch; }

@media (max-width: 720px) { .w-two { grid-template-columns: 1fr; } }

/* --- 8 · close ----------------------------------------------------------- */

.sec-close { padding-bottom: 120px; }
.close-hr {
  height: 1px; border: 0; margin: 0 0 76px;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent);
}
.close-title { font-size: clamp(30px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.018em; max-width: 26ch; }
.close-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 34px; }
.contact-lead { font-size: 16px; line-height: 1.55; margin: 44px 0 18px;
                color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.contact-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.contact-row a[href^="mailto"] { font-size: 15px; }

/* --- 9 · footer ---------------------------------------------------------- */

.w-footer {
  padding-bottom: 64px;
  font-size: 13px; line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}

/* --- skip link ----------------------------------------------------------- */

.skip {
  position: absolute; left: -9999px;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text);
}
.skip:focus { left: clamp(20px, 5vw, 72px); top: 12px; z-index: 10; }