/* =============================================================
   MORCANO — dark-first editorial visual system
   Near-black charcoal base, cool pale inversions for rhythm, one
   cool silver/platinum accent. No warm tones anywhere.
   Display: Bodoni Moda (heavier cut). Body: Inter. Breakpoint 768.
   ============================================================= */

/* ---------- fonts ----------
   Self-hosted (SIL Open Font License), so no visitor IP goes to Google.
   Variable files: one file per subset covers every weight used. The
   latin-ext files only download if a page actually uses those glyphs. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("./assets/fonts/bodoni-moda-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("./assets/fonts/bodoni-moda-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- cool-neutral ramp ----------
   One hue family end to end (blue channel >= red at every step, so
   nothing reads warm). The light end carries the accent on dark
   sections; the dark end carries it on inverted sections. */
:root {
  --silver-100: #E8E9EB;  /* brightest — filled buttons on dark      */
  --silver-300: #C7C9CE;  /* the accent — labels, hairlines, hovers  */
  --silver-500: #9BA0A8;  /* body grey on dark — 7.35:1 on base      */
  --silver-700: #5A5E66;  /* accent on light sections — 5.75:1       */
  --silver-750: #50545C;  /* body grey on light — 6.5:1              */

  --charcoal:   #111111;  /* the base                                */
  --charcoal-raised: #1C1C1C;
  --charcoal-deep:   #0A0A0A;

  --blush:      #E8C4BC;  /* soft pink accent                        */
  --blush-soft: #F0D4CE;  /* lighter variant for glows               */
  --near-white: #F2F3F5;
  --pale:       #F1F1EF;  /* the inverted base — cool, no warm tint  */

  /* ---------- semantic layer ----------
     Components read only these. A section flips its whole subtree by
     redeclaring them; nothing needs a per-component override. */
  --surface:      var(--charcoal);
  --ink:          var(--near-white);
  --ink-soft:     var(--silver-500);
  --accent:       var(--silver-300);
  --rule:         rgba(199, 201, 206, 0.16);
  --rule-strong:  rgba(199, 201, 206, 0.34);
  --ph-fill:      #1A1A1A;
  --btn-fill:     var(--silver-100);
  --btn-fill-ink: var(--charcoal);

  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;
  --section-y: clamp(5rem, 12vw, 9.5rem);
  --header-h: 4.5rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, figure, figcaption, dl, dd, ul, ol, li, details, summary { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; }

body {
  background: var(--charcoal);
  color: var(--near-white);
  font-family: var(--font-body);
  /* 400 not 300: light-on-dark text blooms optically, and a 300 weight
     goes spindly against near-black. */
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 1px;
}

/* ---------- utilities ---------- */
.container {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 52rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: 0;
  transform: translateY(-150%);
  z-index: 200;
  background: var(--silver-100); color: var(--charcoal);
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- glass ----------
   Restrained, monochrome, and only ever used on something that sits
   over imagery: the fixed nav, and (when real photos land) a card on
   top of a photo. The fill alone clears AA without the blur, so the
   blur is pure finish — browsers without backdrop-filter lose nothing
   but the softness. */
.glass {
  background: rgba(17, 17, 17, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(199, 201, 206, 0.14);
}

/* ---------- type ---------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}

.h-display {
  font-family: var(--font-display);
  /* 600, not 400: a Didone's hairlines thin out badly in light-on-dark,
     and the optical-size axis makes it worse as the type grows —
     pinning opsz keeps the thin strokes from disappearing at display
     sizes. */
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(2.5rem, 1.55rem + 4.3vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}
.h-display--sm { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

/* ---------- buttons ----------
   Token-driven, so the same markup inverts correctly on a light
   section with no modifier class. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.btn {
  display: inline-block;
  padding: 1rem 2.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 100px;
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease;
}
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(110%); }
.btn--primary {
  background-color: rgba(232, 233, 235, 0.10);
  background-image: linear-gradient(115deg, rgba(232, 233, 235, 0.02) 0%, rgba(232, 196, 188, 0.20) 45%, rgba(199, 201, 206, 0.10) 70%, rgba(232, 233, 235, 0.02) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: btnDrift 7s ease-in-out infinite alternate;
  color: var(--near-white);
  border-color: rgba(232, 233, 235, 0.16);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 0 28px rgba(232, 200, 188, 0.08);
}
.btn--primary:hover {
  background-color: rgba(232, 233, 235, 0.20);
  border-color: rgba(232, 233, 235, 0.28);
  box-shadow: 0 0 36px rgba(232, 200, 188, 0.14);
}
@keyframes btnDrift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
.section--light .btn--primary {
  animation: none;
  background: var(--btn-fill);
  color: var(--btn-fill-ink);
  border-color: var(--btn-fill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.section--light .btn--primary:hover { background: #000000; border-color: #000000; }

.btn--pink {
  background: transparent;
  color: var(--blush);
  border-color: rgba(232, 196, 188, 0.35);
}
.btn--pink:hover {
  background: var(--blush);
  color: var(--charcoal);
  border-color: var(--blush);
}

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: var(--surface); }

/* =============================================================
   HEADER — fixed, glass, floating over the hero image
   ============================================================= */
.site-header {
  position: fixed;
  top: 0.75rem;
  left: 0;
  right: 0;
  width: calc(100% - 1.5rem);
  max-width: 1200px;
  margin-inline: auto;
  z-index: 100;
  border: 1px solid rgba(199, 201, 206, 0.10);
  border-radius: 16px;
  background: rgba(17, 17, 17, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 0 60px rgba(232, 196, 188, 0.04);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* settles once you leave the hero - the same glass, just denser */
.site-header.is-scrolled {
  background: rgba(17, 17, 17, 0.82);
  border-color: rgba(199, 201, 206, 0.14);
  box-shadow: 0 0 80px rgba(232, 196, 188, 0.06);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header__mark { font-size: 0.9375rem; letter-spacing: 0.3em; color: var(--near-white); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-nav a {
  text-decoration: none;
  padding-block: 0.5rem;
  color: var(--silver-500);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.site-nav a:hover { color: var(--near-white); }
.site-nav .site-nav__cta:hover { border-color: rgba(232, 196, 188, 0.45); box-shadow: 0 0 24px rgba(232, 196, 188, 0.18); }
.site-nav__cta {
  color: var(--near-white);
  background: linear-gradient(115deg, rgba(232, 233, 235, 0.08), rgba(232, 196, 188, 0.18)), rgba(232, 233, 235, 0.06);
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.35s ease;
  border: 1px solid rgba(232, 233, 235, 0.16);
  border-radius: 100px;
  padding: 0.5rem 1.25rem;
}

.site-nav a:not(.site-nav__cta) { display: none; }
@media (min-width: 768px) {
  .site-nav a:not(.site-nav__cta) { display: inline-block; }
}

/* =============================================================
   HERO — full viewport, swappable background image
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;   /* mobile: copy sits at the bottom */
  isolation: isolate;
  overflow: hidden;
  background: var(--charcoal-deep);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }

/* Labelled placeholder sits behind the photo, so the hero still reads as
   finished if the image is absent (the img hides itself on error).
   Scoped through .hero__media so it outranks the generic `.ph` rule
   further down the sheet, which would otherwise win on source order and
   collapse this to its content height. */
.hero__media .ph {
  position: absolute;
  inset: 0;
  border: 0;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* portrait crops hard from the sides: keep the designer and the
     laptop in frame. Landscape shows almost the whole width anyway. */
  object-position: 44% 50%;
}

/* Scrim: behind the TEXT COLUMN only. It falls to fully transparent
   well before the right of the frame, so the photograph itself is
   never washed — and it is a soft ramp, not a flat block. */
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Portrait: the copy sits at the bottom edge, and the cover-crop puts
     the brightest part of the subject directly behind the headline — so
     this ramp carries more weight than the landscape one, while still
     clearing the top third of the frame entirely. */
  background: linear-gradient(
    to top,
    rgba(17,17,17,0.97) 0%,
    rgba(17,17,17,0.94) 30%,
    rgba(17,17,17,0.80) 50%,
    rgba(17,17,17,0.38) 70%,
    rgba(17,17,17,0.00) 88%
  );
}
.hero__inner {
  width: 100%;
  padding-block: calc(var(--header-h) + 2rem) clamp(3rem, 8vh, 5.5rem);
}
.hero__copy { max-width: 34rem; }

/* The side-by-side treatment — copy left, subject right, scrim only
   behind the text — needs a LANDSCAPE frame. On a portrait viewport the
   cover-crop zooms in until the empty left of the photograph is gone,
   and a left-hand scrim then has nothing to sit on: text lands on the
   hand itself and drops below AA. Portrait keeps the bottom-anchored
   treatment above, where the scrim rises from the edge instead. */
@media (min-width: 768px) and (min-aspect-ratio: 1 / 1) {
  .hero { align-items: center; }
  .hero__copy { max-width: min(46%, 38rem); }
  .hero__scrim {
    background: linear-gradient(
      to right,
      rgba(17,17,17,0.95) 0%,
      rgba(17,17,17,0.90) 24%,
      rgba(17,17,17,0.62) 42%,
      rgba(17,17,17,0.20) 56%,
      rgba(17,17,17,0.00) 68%
    );
  }
}

.hero__h {
  font-size: clamp(2.75rem, 1.7rem + 4.9vw, 5.5rem);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.hero__sub {
  color: var(--silver-500);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  max-width: 30rem;
}

/* =============================================================
   MEDIA PLACEHOLDERS
   ============================================================= */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  background: var(--ph-fill);
  border: 1px solid var(--rule);
  border-radius: 20px;
  color: var(--ink-soft);
  overflow: hidden;
}
.ph--4x5  { aspect-ratio: 4 / 5; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--1x1  { aspect-ratio: 1 / 1; }

.ph__label {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7;
  padding-inline: 1.25rem;
}
.ph__icon { width: 2.25rem; height: 2.25rem; opacity: 0.7; }

.media { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================
   SECTIONS — the deliberate dark / light sequence
   D D L D D D L D D L D
   ============================================================= */
.section {
  padding-block: var(--section-y);
  background: var(--surface);
  color: var(--ink);
}
.section--raised { --surface: var(--charcoal-raised); --ph-fill: #222222; }
.section--deep   { --surface: var(--charcoal-deep);   --ph-fill: #141414; }

/* Warm glow — the Open studio button gradient (silver into blush),
   stretched over a whole section. It lives on an oversized pseudo-element
   that only moves with transform, so the drift runs on the compositor
   and never repaints the section. */
.section--glow { position: relative; overflow: hidden; isolation: isolate; }
.section--glow::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 78% 38%, rgba(232, 196, 188, 0.13), transparent 72%),
    radial-gradient(34% 38% at 22% 70%, rgba(199, 201, 206, 0.07), transparent 72%),
    linear-gradient(115deg, rgba(232, 233, 235, 0.015) 0%, rgba(232, 196, 188, 0.06) 55%, rgba(232, 233, 235, 0.02) 100%);
  animation: glowDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes glowDrift {
  from { transform: translate3d(-5%, -3%, 0); }
  to   { transform: translate3d(5%, 3%, 0); }
}

/* The inversion. Redeclaring the semantic tokens retints the whole
   subtree — headings, labels, rules, placeholders and buttons — with
   no per-component overrides. */
.section--light {
  --surface: var(--pale);
  --ink: var(--charcoal);
  --ink-soft: var(--silver-750);
  --accent: var(--silver-700);
  --rule: rgba(17, 17, 17, 0.16);
  --rule-strong: rgba(17, 17, 17, 0.38);
  --ph-fill: #E6E6E4;   /* same cast as --pale, one step down */
  --btn-fill: var(--charcoal);
  --btn-fill-ink: var(--pale);
}

[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.section__head { margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.section__lede {
  max-width: var(--measure);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}
.section__foot { margin-top: clamp(2.5rem, 6vw, 4rem); display: flex; justify-content: center; }

/* =============================================================
   2 — HOW IT WORKS
   ============================================================= */
.flow {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  text-align: center;
}
@media (min-width: 768px) {
  .flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 1.25rem; }
}
.flow__step {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.flow__arrow { color: var(--accent); font-size: 1.125rem; }

/* =============================================================
   3 — THE EDITOR  (light)
   Reads as a tool: numbered parameters, then the guarantee.
   ============================================================= */
.decisions { display: grid; gap: clamp(2.5rem, 6vw, 3rem); }
@media (min-width: 768px) {
  .decisions { grid-template-columns: repeat(3, 1fr); gap: clamp(2.5rem, 5vw, 3.5rem); }
}
.decision {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 2px 12px rgba(17, 17, 17, 0.04);
  overflow: hidden;
}
/* subtle pink radial glow behind each card so it isn't flat white */
.decision::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(ellipse at 50% 0%, rgba(232, 196, 188, 0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.decision__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.decision__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  margin-top: 0.5rem;
}
.decision__text { margin-top: 0.75rem; color: var(--ink-soft); max-width: 26rem; }

.editor-caption {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 1.75rem;
  align-items: start;
}
.editor-caption p { max-width: var(--measure); color: var(--ink-soft); }
@media (min-width: 768px) {
  .editor-caption { grid-template-columns: 1fr auto; }
}

/* =============================================================
   PHOTO FRAMES — real images in the same rounded frame as .ph
   ============================================================= */
.shot {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ph-fill);
}
.shot--16x9 { aspect-ratio: 16 / 9; }
.shot--21x9 { aspect-ratio: 21 / 9; }
.shot--4x5  { aspect-ratio: 4 / 5; }
.shot--3x4  { aspect-ratio: 3 / 4; }

/* 2 — WHAT IT IS: photo left, copy right */
.split { display: grid; gap: clamp(2.25rem, 6vw, 4rem); }
@media (min-width: 768px) {
  .split { grid-template-columns: 7fr 5fr; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); }
}

/* 3 — THREE STEPS */
.steps { display: grid; gap: clamp(3rem, 7vw, 3.5rem); }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
}
.step__num {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  margin-top: 0.25rem;
}
.step__text { margin-top: 0.625rem; color: var(--ink-soft); max-width: 24rem; }

/* 4 — STUDIO: the 3D studio shot, then panel + renders
   Studio shots are transparent PNG→WebP, already tilted in 3D, so
   they float on the section with a soft shadow instead of a frame. */
.float-shot img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}
.section--light .float-shot img { filter: drop-shadow(0 28px 48px rgba(17, 17, 17, 0.22)); }
.studio__hero { margin-inline: auto; max-width: 72rem; }

/* 2 — PROMO FILM: narrated, so it never autoplays. The poster carries the
   frame until play; a large frosted play button sits in the centre (main.js
   hides native controls until the first play, then hands over to them). */
.promo { margin-inline: auto; max-width: 72rem; }
.promo__stage { position: relative; }
.promo__play {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(4.5rem, 3rem + 6vw, 7.5rem);
  aspect-ratio: 1;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease, opacity 0.3s ease;
}
.promo__play svg { width: 36%; height: 36%; fill: currentColor; }
.promo__play:hover { background: rgba(255, 255, 255, 0.24); transform: translate(-50%, -50%) scale(1.06); }
.promo__play:focus-visible { outline: 2px solid var(--silver-100); outline-offset: 4px; }
.promo__stage.is-playing .promo__play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.9); }
.no-js .promo__play { display: none; }
.promo__stage:not(.is-started) .promo__video { cursor: pointer; }

.promo__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: var(--charcoal-deep);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
}
.promo__cap {
  margin-top: 1.125rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.promo__fallback { padding: 1.5rem; color: var(--ink-soft); }

.studio {
  margin-top: clamp(3rem, 8vw, 5.5rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 768px) {
  .studio { grid-template-columns: 4fr 8fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
}
.studio__panel img { max-width: min(20rem, 64vw); height: auto; margin-inline: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)); }
.studio__panel figcaption { margin-top: 1.25rem; text-align: center; }

.renders {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
}
/* renders float on a soft radial pool so white pieces don't read as cut-outs */
.render__frame {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: radial-gradient(circle at 50% 42%, rgba(232, 233, 235, 0.07), transparent 68%), var(--ph-fill);
  padding: 12%;
}
.render__frame img { width: 100%; height: auto; }
.render__frame.ph { padding: 0; }
.render__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: 1.1875rem;
}
.render__text { margin-top: 0.25rem; color: var(--ink-soft); font-size: 0.9375rem; }
.render__note {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
}

.pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.pill--beta { color: #9EE6B8; background: rgba(110, 214, 150, 0.12); border: 1px solid rgba(110, 214, 150, 0.32); }
.pill--soon { color: var(--blush); background: rgba(232, 196, 188, 0.10); border: 1px solid rgba(232, 196, 188, 0.34); }

/* 4 — MY DESIGNS: the studio library, woven in after the renders.
   Left copy + a CSS-only saved-design card. No image assets. */
.library {
  margin-top: clamp(3rem, 8vw, 5.5rem);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 768px) {
  .library { grid-template-columns: 7fr 5fr; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.library__eyebrow {
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.library__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height: 1.2;
}
.library__text { margin-top: 0.875rem; color: var(--ink-soft); max-width: 34rem; }
.library__points {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.625rem;
  list-style: none;
}
.library__points li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.library__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--live);
}

/* saved-design card */
.dcard {
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0%, rgba(232, 233, 235, 0.06), transparent 70%), var(--ph-fill);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.dcard__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background:
    radial-gradient(circle at 50% 46%, rgba(232, 233, 235, 0.14), transparent 60%),
    radial-gradient(circle at 50% 52%, transparent 30%, rgba(232, 233, 235, 0.08) 31%, transparent 40%),
    var(--charcoal-deep);
}
.dcard__thumb::after {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
  width: 42%; aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(9px, 3.4vw, 15px) solid rgba(232, 233, 235, 0.5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 6px 14px rgba(0, 0, 0, 0.3);
}
.dcard__tag {
  position: absolute; top: 0.625rem; left: 0.625rem;
  z-index: 1;
  padding: 0.2rem 0.55rem;
  border-radius: 8px;
  background: rgba(10, 10, 10, 0.7);
  border: 1px solid var(--rule);
  font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silver-300);
}
.dcard__name {
  margin-top: 1.125rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: 1.25rem;
}
.dcard__client { margin-top: 0.25rem; color: var(--accent); font-size: 0.875rem; }
.dcard__meta { margin-top: 0.375rem; color: var(--ink-soft); font-size: 0.8125rem; }
.dcard__flow {
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.dstatus {
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--silver-500);
  border: 1px solid var(--rule);
}
.dstatus--done { color: var(--silver-300); border-color: var(--rule-strong); }
.dstatus--active {
  color: var(--charcoal);
  background: var(--live);
  border-color: var(--live);
  font-weight: 600;
}

/* roadmap: inline-SVG glyph for icon-less Live items */
.rm__icon--glyph { display: grid; place-items: center; color: var(--silver-300); }
.rm__icon--glyph svg { width: 68%; height: 68%; }

/* 5 — PRINT-READY: facts sit under the copy */
#print-ready .facts { margin-top: clamp(2rem, 5vw, 2.75rem); }
@media (min-width: 768px) { #print-ready .print-grid { align-items: center; } }

/* 6 — REAL PRINTS: one wide frame, two below */
.prints { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 768px) {
  .prints { grid-template-columns: 1fr 1fr; }
  .prints__wide { grid-column: 1 / -1; }
}

/* 7 — YOUR OBJECT, ONE BODY */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); }
.assembly__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: radial-gradient(circle at 50% 45%, rgba(232, 233, 235, 0.08), transparent 65%), var(--ph-fill);
}
.assembly__frame img {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
}
.assembly figcaption { margin-top: 1rem; color: var(--ink-soft); font-size: 0.9375rem; }
.assembly__num {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-right: 0.5rem;
}

/* 8 — GALLERY */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
@media (min-width: 1024px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

/* 10 — AUTHOR: workshop banner above the founder block */
.workshop { margin-bottom: clamp(3rem, 7vw, 5rem); }
@media (max-width: 767px) {
  .workshop .shot { aspect-ratio: 16 / 9; }
}

/* =============================================================
   4 — PRINT IT LOCALLY
   ============================================================= */
.print-grid { display: grid; gap: clamp(2.5rem, 6vw, 3rem); }
@media (min-width: 768px) {
  .print-grid { grid-template-columns: 1.1fr 0.9fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
}
.facts { border-top: 1px solid var(--rule); }
.facts__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.facts__row dt { color: var(--ink-soft); }
.facts__row dd { color: var(--ink); }

/* =============================================================
   5 — MODELS  (deepest black — the ring showcase)
   Large slots, wide gutters, minimal chrome so the white pieces
   carry the section.
   ============================================================= */
.models-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 1280px) {
  .models-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   6 — WHAT'S INCLUDED
   ============================================================= */
.specs { border-top: 1px solid var(--rule); }
.spec { padding-block: clamp(1.5rem, 3vw, 2rem); border-bottom: 1px solid var(--rule); }
.spec__term {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: 1.1875rem;
}
.spec__desc { margin-top: 0.5rem; color: var(--ink-soft); max-width: var(--measure); }
@media (min-width: 768px) {
  .spec { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; align-items: baseline; }
  .spec__desc { margin-top: 0; }
}

/* =============================================================
   7 — LICENCES  (light)
   ============================================================= */
.tiers { display: grid; gap: clamp(2.5rem, 6vw, 3rem); }
@media (min-width: 768px) {
  .tiers { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}
.tier {
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 2px 12px rgba(17, 17, 17, 0.04);
  overflow: hidden;
}
.tier::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(ellipse at 50% 100%, rgba(232, 196, 188, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.tier__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.tier__line { margin-top: 0.75rem; color: var(--ink-soft); max-width: 24rem; }
.tier__list { margin-top: 1.5rem; display: grid; gap: 0.75rem; font-size: 0.9375rem; }
.tier__list li { padding-left: 1.25rem; position: relative; }
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: 0.75em;
  width: 0.5rem; height: 1px; background: var(--accent);
}
.access__note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}

/* =============================================================
   8 — WHO'S BEHIND THIS
   ============================================================= */
.founder { display: grid; gap: clamp(2.25rem, 6vw, 4rem); }
@media (min-width: 768px) {
  .founder { grid-template-columns: 5fr 7fr; align-items: center; gap: clamp(2.5rem, 6vw, 5.5rem); }
}
@media (min-width: 768px) {
  .founder { align-items: start; }
}
.founder__body { max-width: 38rem; }
.founder__body p + p { margin-top: 1.125rem; }
.founder__body p { color: var(--ink-soft); }

/* 10b — PINTEREST: profile screenshot beside four figures on hairlines */
.pin { display: grid; gap: clamp(2rem, 5vw, 3rem); }
@media (min-width: 1024px) {
  .pin { grid-template-columns: 6fr 5fr; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.pin__shot img {
  width: 100%; height: auto;
  border-radius: 20px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
}
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
}
.stats__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.625rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 1rem clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
}
.stats__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  line-height: 1;
  color: var(--ink);
}
.stats__delta {
  font-family: var(--font-body);
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.04em;
  color: #9EE6B8;
  vertical-align: middle;
}
.stats__label {
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.stats__foot {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
}
.stats__foot p { color: var(--ink-soft); font-size: 0.875rem; }
.stats__foot .btn { display: inline-flex; align-items: center; gap: 0.625rem; }

/* =============================================================
   9 — ROADMAP
   Three status groups. Status colours are the studio's own (green
   live, amber in development, blue planned), desaturated to sit in
   the cool palette, and used only on dots, rails and pills.
   ============================================================= */
.rm {
  --live: #6ED696;
  --dev: #F0A35E;
  --plan: #8FA6F0;
  display: grid;
  gap: clamp(3rem, 7vw, 4.5rem);
}
.rm__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink);
}
.rm__count { color: var(--ink-soft); letter-spacing: 0.1em; }
.rm__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; }
.rm__dot--live { position: relative; background: var(--live); box-shadow: 0 0 0 4px rgba(110, 214, 150, 0.16); }
.rm__dot--live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--live);
  animation: dotPulse 2.4s ease-out infinite;
}
@keyframes dotPulse {
  from { transform: scale(1); opacity: 0.6; }
  to   { transform: scale(3); opacity: 0; }
}
.rm__dot--dev  { background: var(--dev);  box-shadow: 0 0 0 4px rgba(240, 163, 94, 0.16); }
.rm__dot--plan { border: 1.5px solid var(--plan); }

.rm__list {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1rem);
}
@media (min-width: 768px) {
  .rm__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .rm__list--grid { grid-template-columns: repeat(3, 1fr); }
}

.rm__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
  padding: clamp(1.25rem, 2.5vw, 1.625rem) clamp(1.25rem, 2.5vw, 1.625rem) clamp(1.25rem, 2.5vw, 1.625rem) calc(clamp(1.25rem, 2.5vw, 1.625rem) + 0.875rem);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(232, 233, 235, 0.035), rgba(232, 233, 235, 0.01));
  border: 1px solid var(--rule);
  overflow: hidden;
}
/* status rail on the left edge of each card */
.rm__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--live);
  opacity: 0.85;
}
.rm__item--dev::before  { background: var(--dev); }
.rm__item--plan::before { background: transparent; border-left: 1px dashed var(--plan); }
.rm__item:hover { border-color: var(--rule-strong); }

.rm__body { grid-column: 1; grid-row: 1; }
.rm__icon {
  grid-column: 2; grid-row: 1;
  width: clamp(3.75rem, 3rem + 2.5vw, 5rem);
  height: clamp(3.75rem, 3rem + 2.5vw, 5rem);
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rm__item:hover .rm__icon { transform: scale(1.06) rotate(-2deg); }
.rm__icon--pair { display: flex; align-items: center; gap: 0.25rem; width: auto; }
.rm__icon--pair img { width: clamp(2.75rem, 2.25rem + 1.6vw, 3.75rem); height: auto; }
.rm__icon--formats {
  display: grid; place-items: center;
  font-family: var(--font-body);
  font-weight: 700; font-style: italic;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.05; letter-spacing: 0.02em;
  text-align: center;
  color: var(--near-white);
}

.rm__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.25;
}
.rm__title .pill { margin-left: 0.375rem; transform: translateY(-2px); }
.rm__text { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; }
.rm__when {
  margin-bottom: 0.625rem;
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dev);
}
.rm__item--plan .rm__when { color: var(--plan); }

.rm__foot {
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: var(--measure);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* =============================================================
   10 — FAQ  (light)
   ============================================================= */
.faq { display: grid; }
.faq__item { border-bottom: 1px solid var(--rule); border-radius: 12px; }
.faq__item:first-child { border-top: 1px solid var(--rule); }

.faq__q {
  cursor: pointer;
  list-style: none;
  padding-block: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.3s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }

.faq__a { color: var(--ink-soft); max-width: var(--measure); padding-bottom: 1.5rem; }
.js .faq__a { animation: faqIn 0.35s ease; }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================
   11 — FINAL CALL
   ============================================================= */
.final__inner { text-align: center; }
.final .section__lede { margin-inline: auto; }
.final .actions { justify-content: center; }
.final__contacts {
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  flex-wrap: wrap;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.final__contacts a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.25rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.final__contacts a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  background: var(--charcoal-deep);
  border-top: 1px solid rgba(199, 201, 206, 0.12);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.site-footer__inner {
  display: grid;
  gap: 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 2fr;
    text-align: left;
    align-items: start;
  }
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-footer__socials {
  margin: 1.75rem 0 0.5rem;
}
.social-link {
  color: var(--silver-500);
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
}
.social-link svg {
  width: 30px;
  height: 30px;
}
.social-link:hover {
  color: var(--near-white);
}
.site-footer__email { margin-top: 0.75rem; }
.site-footer__email .social-link { display: inline; font-size: 1.125rem; font-weight: 500; }
.site-footer__address {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--silver-500);
  line-height: 1.5;
}
.site-footer__navs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) {
  .site-footer__navs {
    flex-direction: row;
    justify-content: flex-end;
    gap: 5rem;
  }
}
.site-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .site-footer__nav-col {
    align-items: flex-end;
    text-align: right;
  }
}
.site-footer__mark { font-size: 1rem; letter-spacing: 0.3em; color: var(--near-white); }
.site-footer__legal {
  margin-top: 1.5rem;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silver-500);
}

/* =============================================================
   GUIDE — placeholder page chrome only
   ============================================================= */
.guide-placeholder {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--section-y);
  padding-top: calc(var(--header-h) + var(--section-y));
}
.guide-placeholder p {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-500);
}

/* =============================================================
   SCROLL REVEAL — fades only, and only when JS is on
   ============================================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* stagger siblings in a row so grids cascade instead of popping in */
:is(.steps, .renders, .gallery, .prints, .pair) > [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
:is(.steps, .renders, .gallery, .prints, .pair) > [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
:is(.steps, .renders, .gallery, .prints, .pair) > [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

/* roadmap cards cascade inside their group */
.js .rm__group[data-reveal] .rm__item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--i, 0) * 60ms),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--i, 0) * 60ms),
              border-color 0.35s ease;
}
.js .rm__group.is-revealed .rm__item { opacity: 1; transform: none; }
.rm__item:nth-child(2) { --i: 1; } .rm__item:nth-child(3) { --i: 2; }
.rm__item:nth-child(4) { --i: 3; } .rm__item:nth-child(5) { --i: 4; }
.rm__item:nth-child(6) { --i: 5; } .rm__item:nth-child(7) { --i: 6; }
.rm__item:nth-child(8) { --i: 7; } .rm__item:nth-child(9) { --i: 8; }
.rm__item:nth-child(10) { --i: 9; }

/* hero: the photo settles, the copy rises in after it */
.hero__img { animation: heroSettle 14s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes heroSettle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.hero__copy > * { animation: riseIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__copy > :nth-child(2) { animation-delay: 0.15s; }
.hero__copy > :nth-child(3) { animation-delay: 0.3s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* studio shots drift gently, out of phase so they don't bob together */
.float-shot, .studio__panel > img { animation: floatY 8s ease-in-out infinite; will-change: transform; }
.studio__panel > img { animation-duration: 9s; animation-delay: -3s; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* render tiles lift on hover */
.render__frame, .assembly__frame { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.35s ease; }
.render:hover .render__frame, .assembly:hover .assembly__frame { transform: translateY(-4px); border-color: var(--rule-strong); }
.render__frame img, .assembly__frame img { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.render:hover .render__frame img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .rm__group[data-reveal] .rm__item { opacity: 1; transform: none; }
  .float-shot, .studio__panel > img, .hero__img, .btn--primary, .rm__dot--live::after, .section--glow::before { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header { display: none; }
  .js [data-reveal], .js .rm__group .rm__item { opacity: 1; transform: none; }
}

/* =============================================================
   COOKIE MODAL
   ============================================================= */
.cookie-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 90vw;
  width: 440px;
  margin: auto;
}
.cookie-modal::backdrop {
  background: rgba(17, 17, 17, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cookie-modal__inner {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 24px;
  color: var(--ink);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.cookie-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cookie-modal__close {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.cookie-modal__close:hover { color: var(--ink); }
.cookie-modal__intro {
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.cookie-modal__intro a {
  color: var(--accent);
  text-decoration: underline;
}
.cookie-category {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.cookie-category__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.cookie-category__header h3 {
  font-size: 0.9375rem;
  font-weight: 500;
}
.badge {
  display: inline-block;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  padding: 0.125rem 0.375rem;
  background: rgba(199, 201, 206, 0.1);
  color: var(--silver-300);
  border-radius: 2px;
  margin-top: 0.25rem;
}
.badge--locked {
  background: var(--charcoal-deep);
}
.cookie-category p {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle__slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--rule-strong);
  transition: .4s;
  border-radius: 20px;
}
.toggle__slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: var(--ink);
  transition: .4s;
  border-radius: 50%;
}
.toggle input:checked + .toggle__slider {
  background-color: var(--accent);
}
.toggle input:checked + .toggle__slider:before {
  transform: translateX(16px);
  background-color: var(--surface);
}
.toggle--locked .toggle__slider {
  cursor: not-allowed;
  opacity: 0.6;
}
.cookie-modal__actions {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cookie-modal__actions .btn {
  width: 100%;
  padding: 0.75rem;
}
@media (min-width: 480px) {
  .cookie-modal__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .cookie-modal__actions .btn {
    width: auto;
  }
}

/* =============================================================
   MOBILE PERFORMANCE GUARD
   Cards drop backdrop-filter on narrow viewports to protect
   scroll performance. Navbar and buttons keep glass (small area).
   ============================================================= */
@media (max-width: 767px) {
  .decision {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
  }
  .tier {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
  }
}

/* =============================================================
   FALLBACK — browsers without backdrop-filter support
   ============================================================= */
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(17, 17, 17, 0.92); }
  .site-header.is-scrolled { background: rgba(17, 17, 17, 0.96); }
  .btn--primary {
    background: var(--btn-fill);
    color: var(--btn-fill-ink);
    border-color: var(--btn-fill);
  }
  .decision { background: #141613; }
  .tier { background: var(--pale); }
}

/* =============================================================
   EARLY ACCESS FORM
   Same glass language as the primary button; the input sits in one row
   with the button on wide screens and stacks on phones.
   ============================================================= */
.waitlist { margin-top: clamp(1.75rem, 4vw, 2.5rem); max-width: 34rem; }
.waitlist--final { margin-inline: auto; max-width: 46rem; }
.waitlist__row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.waitlist__input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0 1.375rem;
  border-radius: 100px;
  border: 1px solid rgba(232, 233, 235, 0.18);
  background: rgba(17, 17, 17, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--near-white);
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS from zooming on focus */
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.waitlist__input::placeholder { color: var(--silver-500); }
.waitlist__input:hover { border-color: rgba(232, 233, 235, 0.30); }
.waitlist__input:focus-visible {
  outline: none;
  border-color: rgba(232, 196, 188, 0.6);
  box-shadow: 0 0 0 4px rgba(232, 196, 188, 0.12);
}
.waitlist__select {
  flex: 0 1 15rem;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1.5 6 6.5 11 1.5%27 fill=%27none%27 stroke=%27%239BA0A8%27 stroke-width=%271.5%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
}
.waitlist__select:invalid, .waitlist__select option[value=""] { color: var(--silver-500); }
.waitlist__select option { color: #111; }
.waitlist__btn { flex: 0 0 auto; min-height: 3.25rem; white-space: nowrap; }
.waitlist__btn:disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 560px) {
  .waitlist__input, .waitlist__select, .waitlist__btn { flex: 1 1 100%; }
}
.waitlist__note { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--silver-500); }
.waitlist__note a { color: inherit; }
.waitlist__status { margin-top: 0.5rem; font-size: 0.9375rem; min-height: 1.5em; }
.waitlist[data-state="success"] .waitlist__status { color: #9EE6B8; }
.waitlist[data-state="error"] .waitlist__status { color: #F0A58E; }
.waitlist[data-state="success"] .waitlist__row { opacity: 0.55; }
.waitlist__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hero .waitlist__note { color: rgba(242, 243, 245, 0.72); }

/* 404 */
.not-found { min-height: 70vh; display: flex; align-items: center; padding-top: calc(var(--header-h) + var(--section-y)); }
.not-found .actions { justify-content: center; }
.not-found .section__lede { margin-inline: auto; }

/* Articles: guides and solution pages (generated by tools/guides/build.js).
   Hub / tutorial layout: a tinted hero band, a reading column with a sticky
   "On this page" list, bordered notes, preview cards. Tokens only. */
.art { --tone-edge: rgba(255, 255, 255, 0.12); }

/* hero band */
/* Same surface as the landing's raised sections: charcoal-raised with the soft blush/silver glow. */
.ahero { position: relative; overflow: hidden; isolation: isolate; background: var(--charcoal-raised); padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(2.5rem, 6vw, 4rem); }
.ahero__in { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 64rem) { .ahero__in { grid-template-columns: minmax(0, 1fr) 24rem; } .ahero__in--index { grid-template-columns: minmax(0, 1fr); } }
.ahero__text > * + * { margin-top: 1.25rem; }
.ahero .crumbs ol { font-size: 0.9375rem; color: var(--silver-300); }
.ahero .crumbs li:first-child a::before { content: "\2190"; margin-right: 0.625rem; }
.ahero h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); max-width: 22ch; }
.ahero__sub { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); color: var(--silver-300); max-width: 40rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; font-size: 0.875rem; color: var(--silver-100); border: 1px solid var(--tone-edge); border-radius: 99px; }
.chip .gi { width: 1rem; height: 1rem; color: var(--silver-300); }
.ahero .btn { text-decoration: none; }
.ahero__fig { border-radius: 14px; overflow: hidden; border: 1px solid var(--tone-edge); background: rgba(0, 0, 0, 0.28); padding: 1.25rem; }
.ahero__fig img { width: 100%; height: auto; max-height: 20rem; object-fit: contain; margin-inline: auto; }
@media (max-width: 63.99rem) { .ahero__fig { display: none; } }

.ahero::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(38% 42% at 78% 38%, rgba(232, 196, 188, 0.13), transparent 72%), radial-gradient(34% 38% at 22% 70%, rgba(199, 201, 206, 0.07), transparent 72%), linear-gradient(115deg, rgba(232, 233, 235, 0.015) 0%, rgba(232, 196, 188, 0.06) 55%, rgba(232, 233, 235, 0.02) 100%); }

/* reading column */
.art__grid { display: grid; gap: 3rem; padding-block: clamp(2.5rem, 6vw, 4rem) var(--section-y); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .art__grid { grid-template-columns: minmax(0, 47rem) 16rem; justify-content: space-between; } }
.art__main > * + * { margin-top: 1.25rem; }
.art p, .art li, .art dd { color: var(--ink-soft); line-height: 1.7; }
.art a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
.art a:hover { text-decoration-color: var(--accent); }
.art strong { color: var(--ink); font-weight: 500; }
.art h2 { font-family: var(--font-display); font-weight: 600; font-optical-sizing: none; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); line-height: 1.15; color: var(--ink); margin-top: clamp(3rem, 7vw, 4.25rem); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.art__lead { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); line-height: 1.65; color: var(--ink) !important; }
.art__main ul:not([class]) { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.5rem; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.8125rem; color: var(--silver-500); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--rule-strong); }
.crumbs a { color: inherit !important; text-decoration: none; }
.crumbs a:hover { color: var(--ink) !important; }

.gi { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); }

/* Key facts: a bordered notice, like the notices on the tutorial pages */
.gkey { display: flex; gap: 1rem; padding: 1.125rem 1.375rem; border: 1px solid var(--rule-strong); border-radius: 12px; }
.gkey .gi { margin-top: 0.15rem; }
.gkey__label { font-weight: 500; color: var(--ink) !important; margin-bottom: 0.5rem; }
.gkey ul { display: grid; gap: 0.375rem; list-style: none; padding: 0; }
.gkey li { position: relative; padding-left: 1.125rem; }
.gkey li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--accent); }

/* Steps: serif number in the margin, hairline between */
.gsteps { counter-reset: gs; list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.gsteps li { counter-increment: gs; display: grid; grid-template-columns: 2.75rem 1fr; gap: 0 0.5rem; padding-block: 1.125rem; border-bottom: 1px solid var(--rule); }
.gsteps li::before { content: counter(gs); grid-row: span 2; font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.1; color: var(--accent); }
.gsteps h3 { font-size: 1.0625rem; font-weight: 500; color: var(--ink); line-height: 1.4; }
.gsteps p { margin-top: 0.25rem; }

/* Specs: label / value rows */
.gspecs { border-top: 1px solid var(--rule); }
.gspecs > div { display: grid; grid-template-columns: 1.25rem minmax(0, 11rem) 1fr; gap: 0.25rem 1rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); align-items: start; }
.gspecs dt { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); font-weight: 500; line-height: 1.9; }
.gspecs dd { margin: 0; }
.gspecs .gi { margin-top: 0.3rem; }
.gspecs .is-na .gi { color: var(--silver-700); }
@media (max-width: 40rem) { .gspecs > div { grid-template-columns: 1.25rem 1fr; } .gspecs dd { grid-column: 2; } }
.gbadge { display: inline-block; margin-right: 0.5rem; padding: 0 0.5rem; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--rule-strong); border-radius: 99px; color: var(--ink-soft); vertical-align: 0.05em; }

/* Tip / note: a rounded panel with an icon tile */
.gtip { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--charcoal-raised); }
.gtip .gi { flex: none; box-sizing: content-box; padding: 0.4rem; border: 1px solid var(--rule-strong); border-radius: 8px; width: 1.125rem; height: 1.125rem; }
.gtip--na { border-style: dashed; background: transparent; }
.gtip--na .gi { color: var(--silver-700); }
.gtip p { margin: 0.25rem 0 0; }
.gtip__label { font-weight: 600; color: var(--ink); margin-right: 0.375rem; }

.gfig { margin: 0; }
.gfig img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--rule); }
.gfig figcaption { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--silver-500); }
.gfigs { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* Sticky "On this page" with an active marker */
.art__side { display: none; }
@media (min-width: 64rem) { .art__side { display: block; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.toc ol { display: grid; gap: 0.125rem; }
.toc a { display: block; margin-left: -1px; padding: 0.375rem 0 0.375rem 1rem; border-left: 2px solid transparent; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-soft) !important; text-decoration: none; }
.toc a:hover { color: var(--ink) !important; }
.toc a.is-active { color: var(--ink) !important; border-left-color: var(--ink); }

/* Preview cards (hubs and "Keep reading") */
.acards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); list-style: none; padding: 0; }
.acard { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--charcoal-raised); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.art a.acard { color: var(--ink); text-decoration: none; }
.acard:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.acard__thumb { aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 42%, rgba(232, 233, 235, 0.07), transparent 68%), #222222; display: grid; place-items: center; padding: 1rem; overflow: hidden; }
.acard__thumb img { max-height: 100%; max-width: 78%; width: auto; height: auto; object-fit: contain; }
.acard__thumb.is-photo { padding: 0; }
.acard__thumb.is-photo img { max-width: none; width: 100%; height: 100%; object-fit: cover; }
.acard__thumb .gi { width: 3rem; height: 3rem; color: rgba(255, 255, 255, 0.55); }
.acard__body { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; flex: 1; padding: 1.25rem 1.375rem 1.125rem; }
.acard__t { font-family: var(--font-display); font-weight: 600; font-optical-sizing: none; font-size: 1.3125rem; line-height: 1.25; color: var(--ink); }
.acard__m { font-size: 0.875rem; color: var(--silver-500) !important; }

/* hub sections */
.art__index { padding-block: clamp(2.5rem, 6vw, 4rem) var(--section-y); display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.art__sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.art__sechead h2 { font-family: var(--font-display); font-weight: 600; font-optical-sizing: none; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); color: var(--ink); }
.art__more { color: var(--ink); text-decoration: none; font-size: 0.9375rem; }
.art__more::after { content: " \2192"; }
.art__more:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* closing call: a light card with a dark pill button */
.acta { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 20px; background: var(--pale); }
.art .acta h2 { margin-top: 0.5rem; color: #111; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.art .acta p { color: #4a4d52; }
.art .acta .acta__eyebrow { font-size: 0.8125rem; color: #5a5e66; margin: 0; }
.acta__btn { margin-top: 0.5rem; background: #111; color: #fff !important; border-color: #111; text-decoration: none; }
.acta__btn:hover { background: #000; }

/* Studio slot: one fragment, modes by data-mode (no script).
   The iframe variant is deliberately not styled in: see tools/guides/build.js. */
.studio-slot[data-mode="screenshot-link"] .studio-slot__btn,
.studio-slot[data-mode="button"] .studio-slot__shot,
.studio-slot[data-mode="iframe"] .studio-slot__shot,
.studio-slot[data-mode="iframe"] .studio-slot__btn { display: none; }
.studio-slot__shot { position: relative; display: block; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; text-decoration: none; }
.studio-slot__shot img { width: 100%; height: auto; }
.studio-slot__cap { position: absolute; left: 1rem; bottom: 1rem; padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); background: rgba(17, 17, 17, 0.78); border: 1px solid var(--rule-strong); border-radius: 99px; }
.studio-slot__shot:hover .studio-slot__cap { border-color: var(--accent); }
.studio-slot__frame { width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--rule); border-radius: 12px; }
.art .faq { margin-top: 1rem; }
.art .gkey ul { list-style: none; padding: 0; }
.draftbar { padding: 0.75rem 1rem; border: 1px dashed var(--rule-strong); border-radius: 12px; color: var(--ink); }
.draftbar strong { letter-spacing: 0.12em; }

/* Business articles: tables, sub-headings, sources */
.gh3 { font-size: 1.125rem; font-weight: 500; color: var(--ink); margin-top: 2rem; }
.gtable { overflow-x: auto; margin-block: 1.5rem; border: 1px solid var(--rule); border-radius: 12px; }
.gtable table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.gtable caption { caption-side: bottom; text-align: left; padding: 0.75rem 1rem; font-size: 0.8125rem; color: var(--silver-500); }
.gtable th, .gtable td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); color: var(--ink-soft); line-height: 1.5; }
.gtable thead th { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--ink); }
.gtable tbody th { color: var(--ink); font-weight: 500; }
.gtable tbody tr:last-child > * { border-bottom: 0; }
.gsources { padding-left: 1.25rem; font-size: 0.9375rem; }
.gsources li { margin-block: 0.375rem; }
.gsources span, .gsources__note { color: var(--silver-500); font-size: 0.875rem; }