@import url("fonts.css");

/* ============================================================
   DIGITAL SAMADHI — core design system

   Direction: oceanic depth. The brand gradient appears only as
   LIGHT (the spine, one lit headline) and never as a filled
   background — that restraint is what separates cinematic from
   crypto. Atmosphere comes from photography and grain.

   Type: Switzer (voice) + Fraunces (display serif, variable
   opsz/SOFT/WONK) + IBM Plex Mono (metadata). Three registers.
   ============================================================ */

:root {
  /* ---- Ground: one hue cast across every surface, ~5% lightness
     per step. On dark, elevation is lightness — shadows don't read. */
  --s0: #05070B;   /* page */
  --s1: #0B0F16;   /* section / card */
  --s2: #131822;   /* nested / hover */
  --s3: #1B212D;   /* overlay */

  --line:      rgba(233, 229, 221, 0.11);
  --line-soft: rgba(233, 229, 221, 0.055);

  /* ---- Ink: warm bone against cool ground. Pure white on near-black
     halates; the warm/cool tension is the whole palette. */
  --bone:     #E9E5DD;   /* 16.0:1 on --s0 */
  --bone-dim: #A9A49B;   /*  8.1:1 */
  --mute:     #727A85;   /*  4.6:1 — the smallest text on the site, so it has
                             to clear 4.5:1 rather than merely look quiet */

  /* ---- Brand, sampled from the wordmark. Used as light, twice. */
  --azure:  #0A8FD8;
  --cyan:   #00BFC5;
  --spring: #00D89A;
  --grad: linear-gradient(100deg, var(--azure) 0%, var(--cyan) 52%, var(--spring) 100%);

  /* ---- Type families */
  --sans:  "Switzer", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Scale: deliberately non-uniform. Ratios widen at the top and
     compress at the bottom, the way Apple's ladder actually behaves —
     a single modular ratio cannot produce this. 390px -> 1440px. */
  /* Hero is sized for a short *phrase*. 180px is single-word edge-to-edge
     scale and would push the CTA below the fold. Apple's own marketing
     headline sits at 96px. */
  --t-hero:  clamp(2.5rem,    1.06rem  +  5.90vw,  6.75rem);  /*  40 -> 108 */
  --t-word:  clamp(3.5rem,   -0.55rem  + 16.6vw,  15rem);     /*  56 -> 240, one word only */
  --t-h1:    clamp(2.25rem,   0.857rem +  5.71vw,  6rem);     /*  36 ->  96 */
  --t-h2:    clamp(1.75rem,   1.100rem +  2.67vw,  3.5rem);   /*  28 ->  56 */
  --t-h3:    clamp(1.375rem,  1.143rem +  0.95vw,  2rem);     /*  22 ->  32 */
  --t-lead:  clamp(1.25rem,   1.100rem +  0.61vw,  1.75rem);  /*  20 ->  28 */
  --t-body:  clamp(1.0625rem, 1.016rem +  0.19vw,  1.1875rem);/*  17 ->  19 */
  --t-label: clamp(0.75rem,   0.727rem +  0.10vw,  0.8125rem);/*  12 ->  13 */

  /* ---- Tracking tightens as size grows. Negative at every size at or
     above body is the single most imitable Apple property. */
  --tr-hero:  -0.045em;
  --tr-h1:    -0.04em;
  --tr-h2:    -0.03em;
  --tr-h3:    -0.02em;
  --tr-lead:  -0.012em;
  --tr-body:  -0.005em;
  --tr-label:  0.14em;

  /* ---- Space. Text and grid get different maxima: text locks near
     65ch, grids run to 1440. */
  --gutter:  clamp(1.5rem, 5vw, 6rem);
  --measure: 62ch;
  --grid-max: 1440px;
  --text-max: 61rem;

  /* Section rhythm varies by weight — uniform padding reads templated. */
  --pad-sm: clamp(4rem, 8vh, 6rem);
  --pad-md: clamp(6rem, 13vh, 10rem);
  --pad-lg: clamp(9rem, 20vh, 16rem);

  /* ---- Motion. Named curves, per-element durations, never one global. */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --d-press:  140ms;
  --d-hover:  240ms;
  --d-reveal: 900ms;

  --radius: 5px;

  /* The logo's descending rule sits 42.1% across the mark, not at its
     centre. Nudging by the 7.9% difference lands it on the page spine. */
  --stroke-offset: 7.9%;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--s0);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: var(--tr-body);
  font-weight: 400;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* height:auto is required alongside the width/height attributes that
   reserve space for CLS — without it the intrinsic height wins and the
   image stretches. */
img, svg, video { max-width: 100%; height: auto; display: block; }

::selection { background: color-mix(in oklab, var(--cyan) 32%, transparent); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Type ----------
   Weight ladder is 300 / 400 / 600 / 700 — 500 is deliberately absent,
   which forces genuine contrast rather than a mushy middle. */

.display {
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: var(--tr-h1);
  text-wrap: balance;
  max-inline-size: 24ch;
  margin: 0;
}
.display.hero-type { font-size: var(--t-hero); letter-spacing: var(--tr-hero); line-height: 0.96; text-wrap: initial; }
.display.t-word { font-size: var(--t-word); letter-spacing: var(--tr-hero); line-height: 0.86; }
.t-h1 { font-size: var(--t-h1); }
.t-h2 { font-size: var(--t-h2); letter-spacing: var(--tr-h2); line-height: 1.02; }
.t-h3 { font-size: var(--t-h3); letter-spacing: var(--tr-h3); line-height: 1.15; }

/* Fraunces carries the soul lines. WONK + low optical size give it a
   warmth Switzer deliberately doesn't have. */
.serif {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.4;
  letter-spacing: var(--tr-lead);
  color: var(--bone-dim);
  text-wrap: pretty;
  max-inline-size: 34ch;
  margin: 0;
}

.label {
  font-family: var(--mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  font-weight: 400;
  color: var(--mute);
  margin: 0;
}

.prose { max-inline-size: var(--measure); color: var(--bone-dim); }
.prose strong { color: var(--bone); font-weight: 600; }

/* Numerals: tabular wherever a figure sits in a column or changes. */
.num { font-variant-numeric: tabular-nums lining-nums; }

/* The gradient, used as light on type. One of only two uses site-wide. */
.lit {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Layout ---------- */

.wrap { max-width: var(--grid-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-text { max-width: var(--text-max); margin-inline: auto; padding-inline: var(--gutter); }

.screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-block: var(--pad-md);
}

.section    { padding-block: var(--pad-md); position: relative; }
.section-sm { padding-block: var(--pad-sm); position: relative; }
.section-lg { padding-block: var(--pad-lg); position: relative; }

/* Long pages: skip offscreen layout work. Intrinsic size prevents
   scrollbar jump. */
.defer { content-visibility: auto; contain-intrinsic-size: auto 800px; }

/* ---------- The Spine ----------
   The logo's vertical rule, extended through the document. Everything
   composes around a single still axis — which is what samadhi means. */

.spine {
  position: fixed;
  inset-block: 0;
  left: 50%;
  width: 1px;
  translate: -50% 0;
  background: var(--line-soft);
  z-index: 1;
  pointer-events: none;
}
.spine::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--progress, 0) * 100%);
  width: 1px;
  height: 24vh;
  background: var(--grad);
  opacity: 0.85;
  mask-image: linear-gradient(to bottom, transparent, #000 38%, #000 62%, transparent);
}

/* ---------- Grain ----------
   Load-bearing on dark: it dithers gradient banding on 8-bit displays
   as well as adding the film texture. */

.grain {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.055;
  background-size: 182px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
}

/* ---------- Reveal ---------- */

.rise {
  opacity: 0;
  translate: 0 1.4rem;
  transition:
    opacity var(--d-reveal) var(--ease-expo),
    translate var(--d-reveal) var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.rise.in { opacity: 1; translate: 0 0; }

/* ---------- Controls ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--s0);
  text-decoration: none;
  padding: 0.9em 1.6em;
  border-radius: 100px;
  background: var(--bone);
  border: 0;
  cursor: pointer;
  transition: translate var(--d-hover) var(--ease-expo), background var(--d-hover) linear;
}
.cta:hover { translate: 0 -2px; background: #fff; }
.cta:active { scale: 0.97; transition-duration: var(--d-press); }
.cta .arrow { transition: translate var(--d-hover) var(--ease-expo); }
.cta:hover .arrow { translate: 3px 0; }

.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.9375rem;
  color: var(--bone-dim);
  text-decoration: none;
  padding: 0.9em 0.2em;
  transition: color var(--d-hover) var(--ease-out);
}
.cta-ghost:hover { color: var(--bone); }

/* ---------- Logo wall ---------- */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}
.wall img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  padding: 1.9rem 1.5rem;
  background: var(--s0);
  opacity: 0.68;
  transition: opacity var(--d-hover) var(--ease-out), background var(--d-hover) linear;
}
.wall img:hover { opacity: 1; background: var(--s1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .rise { opacity: 1; translate: 0; }
}

/* ============================================================
   CHROME — navigation, footer
   ============================================================ */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.65rem var(--gutter);
  /* Transparent over the hero plate; the glass only appears once scrolled,
     so nothing letterboxes the opening image. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-hover) linear, background var(--d-hover) linear,
              backdrop-filter var(--d-hover) linear;
}
.nav.stuck {
  border-bottom-color: var(--line-soft);
  background: color-mix(in srgb, var(--s0) 84%, transparent);
  /* saturate() is the part everyone omits — without it the glass reads grey */
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.nav a.brand { display: flex; align-items: center; text-decoration: none; }
/* The real mark, sized by height because it is near-square (2461x2215).
   The wordmark is only ~28% of that height, so it needs ~60px before the type
   is legible. The cropped horizontal lockup was rejected — do not bring it back. */
.nav a.brand img { height: clamp(54px, 5.4vw, 74px); width: auto; }

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav-links a {
  font-size: 0.875rem;
  color: var(--bone-dim);
  text-decoration: none;
  letter-spacing: -0.008em;
  transition: color var(--d-hover) var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--bone); }
/* .nav-links a (0,2,1) outranks .cta (0,1,0), so the button's dark-on-bone
   colour has to be restated here or it inherits the muted link colour. */
.nav-links a.cta { color: var(--s0); padding: 0.62em 1.15em; font-size: 0.875rem; }
.nav-links a.cta:hover { color: var(--s0); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--bone);
  padding: 0.5rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 0 0 auto;
    top: 0;
    padding: 5.5rem var(--gutter) 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    background: var(--s0);
    border-bottom: 1px solid var(--line);
    translate: 0 -100%;
    transition: translate 0.42s var(--ease-expo);
  }
  .nav-links[data-open="true"] { translate: 0 0; }
  .nav-links a { font-size: 1.5rem; letter-spacing: -0.02em; }
}

/* ---------- Footer ---------- */

/* The footer is where the page lands, not another section — so it is tight, and
   the page's own hero plate rises out of the bottom edge and dissolves upward
   into the black. Full-bleed: the wrap lives on the three children instead. */
.foot {
  position: relative; isolation: isolate;
  margin-top: clamp(3rem, 6vh, 4.5rem);
  padding-block: clamp(2.5rem, 4.5vw, 3.75rem) 1.1rem;
}
/* The plate reaches up past the footer into the dead space at the end of the
   page, so the page finishes on an image instead of on empty black. */
.foot::before,
.foot::after { content: ""; position: absolute; inset: -280px 0 0; pointer-events: none; }
.foot::before {
  z-index: -2;
  background: url("../img/plates/stillness.jpg") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 46%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 46%);
  opacity: 0.62;
}
/* Ramps to near-solid before the columns start, so the type keeps its contrast
   ratios no matter which plate is behind it. */
.foot::after {
  z-index: -1;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(5,7,11,0.18) 26%, rgba(5,7,11,0.72) 46%, rgba(5,7,11,0.95) 62%, rgba(5,7,11,0.97) 100%);
}
.foot[data-plate="depth"]::before     { background-image: url("../img/plates/depth.jpg"); }
.foot[data-plate="fibre"]::before     { background-image: url("../img/plates/fibre.jpg"); }
.foot[data-plate="horizon"]::before   { background-image: url("../img/plates/horizon.jpg"); }
.foot[data-plate="light"]::before     { background-image: url("../img/plates/light.jpg"); }
.foot[data-plate="ridge"]::before     { background-image: url("../img/plates/ridge.jpg"); }

.foot-mark, .foot-grid, .foot-base {
  max-width: var(--grid-max); margin-inline: auto; padding-inline: var(--gutter);
}
/* The mark signs off the page, centred above the columns. */
.foot-mark { display: block; margin-block: 0 clamp(1.6rem, 3vw, 2.4rem); }
.foot-mark img { height: clamp(44px, 4.6vw, 60px); width: auto; margin-inline: auto; translate: var(--stroke-offset) 0; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .foot-grid { grid-template-columns: 1.4fr repeat(3, minmax(0,1fr)); gap: 2.25rem; } }
.foot .foot-h { font-family: var(--mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--mute); font-weight: 400; margin: 0 0 1.1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot a { color: var(--bone-dim); text-decoration: none; font-size: 0.9375rem; transition: color var(--d-hover) var(--ease-out); }
.foot a:hover { color: var(--bone); }
.foot-base {
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between;
  margin-block: 1.75rem 0; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  font-size: 0.8125rem; color: var(--mute);
}

/* ============================================================
   SECTION PATTERNS
   ============================================================ */

/* Asymmetric editorial split — the default interior layout. */
.split { display: grid; gap: clamp(2rem, 4vw, 5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); align-items: end; }
}

.eyebrow-row { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.5rem; }

/* Process — a real sequence, so numbering carries information */
.steps { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); margin-top: 3rem; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--s0); padding: clamp(1.75rem, 3vw, 2.75rem); }
.step .n { font-family: var(--mono); font-size: var(--t-label); color: var(--cyan); letter-spacing: var(--tr-label); }
.step h3 { font-size: var(--t-h3); font-weight: 300; letter-spacing: var(--tr-h3); margin: 1.1rem 0 0.7rem; line-height: 1.15; }
.step p { color: var(--bone-dim); margin: 0; font-size: 0.9375rem; line-height: 1.55; }

/* The whole offer as one scannable line. Nine cards with descriptions is
   reading; nine words at display size is understood at a glance. */
.every {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; gap: 0.6em 1.4em;
  grid-template-columns: 1fr;
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  font-weight: 300; letter-spacing: -0.03em; line-height: 1.2;
  color: var(--bone);
}
/* Fixed columns rather than wrapping: eight items divide evenly at every
   breakpoint, so no item is ever left stranded alone on a row. */
@media (min-width: 620px)  { .every { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .every { grid-template-columns: repeat(4, 1fr); } }
.every li { display: flex; align-items: baseline; gap: 0.5em; }
.every li::before {
  content: ""; flex: none;
  width: 0.19em; height: 0.19em; border-radius: 50%;
  background: var(--cyan); opacity: 0.75; translate: 0 -0.3em;
}

/* Capability grid — an unordered set, so no numbering. Same hairline
   construction as .steps: 1px gaps over the rule colour, cells painted back in. */
.cap { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); margin-top: 3rem; }
@media (min-width: 620px)  { .cap { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cap { grid-template-columns: repeat(4, 1fr); } }
.cap div { background: var(--s0); padding: 1.9rem 1.6rem 2.2rem; }
.cap h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.6rem; letter-spacing: -0.012em; }
.cap p { margin: 0; color: var(--mute); font-size: 0.9375rem; line-height: 1.5; }

/* Loaded-cost comparison — the majors dropped this from their pricing pages */
.ledger { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; margin-top: 2.5rem; }
@media (min-width: 760px) { .ledger { grid-template-columns: 1fr 1fr; } }
.ledger > div { background: var(--s0); padding: clamp(1.75rem, 3vw, 2.75rem); }
.ledger .hi { background: var(--s1); }
.ledger dl { margin: 1.75rem 0 0; display: grid; gap: 0.9rem; }
.ledger dt { font-size: 0.875rem; color: var(--mute); }
.ledger dd { margin: 0 0 0.5rem; font-size: 1.375rem; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.ledger .big { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }

/* Cinematic full-bleed frame */
.frame { position: relative; overflow: hidden; border-radius: var(--radius); }
.frame img { width: 100%; height: min(76svh, 720px); object-fit: cover; }
.frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,7,11,0.94) 3%, rgba(5,7,11,0.1) 46%, transparent 72%); }
.frame .over { position: absolute; left: 0; bottom: 0; padding: clamp(1.5rem, 3.5vw, 3rem); z-index: 2; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--bone); color: var(--s0); padding: 0.8rem 1.2rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ============================================================
   LIVE SITES — the showcase of work we built and still host
   ============================================================ */

.sites {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  margin-top: 3rem;
}

.site {
  appearance: none;
  border: 1px solid var(--line-soft);
  background: var(--s1);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color var(--d-hover) linear, translate 0.45s var(--ease-expo);
}
.site:hover { border-color: var(--line); translate: 0 -3px; }
.site img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  background: var(--s2);
  transition: scale 0.7s var(--ease-out);
}
.site:hover img { scale: 1.03; }
.site figcaption,
.site .cap-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8rem; padding: 1rem 1.2rem 1.15rem;
}
.site .nm { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em; }
.site .kind {
  font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--mute); white-space: nowrap;
}

/* ---- Lightbox ---- */
#siteview {
  border: 1px solid var(--line);
  background: var(--s1);
  color: var(--bone);
  border-radius: 10px;
  padding: 0;
  width: min(1080px, calc(100vw - 2rem));
  max-width: none;
  max-height: 92svh;
  overflow: hidden;
}
#siteview::backdrop { background: rgba(5, 7, 11, 0.86); backdrop-filter: blur(6px); }
#siteview img { width: 100%; max-height: 68svh; object-fit: contain; background: var(--s0); display: block; }
.sv-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; padding: 1.1rem 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.sv-meta h3 { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.sv-meta p { margin: 0.35rem 0 0; color: var(--bone-dim); font-size: 0.9375rem; max-inline-size: 56ch; }
.sv-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.sv-nav {
  appearance: none; background: none; border: 1px solid var(--line);
  color: var(--bone-dim); width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; font: inherit; font-size: 1rem; line-height: 1;
  transition: color var(--d-hover) linear, border-color var(--d-hover) linear;
}
.sv-nav:hover { color: var(--bone); border-color: var(--bone-dim); }
.sv-visit {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--bone); color: var(--s0); text-decoration: none;
  font-size: 0.875rem; font-weight: 600; padding: 0.7em 1.2em; border-radius: 100px;
  transition: translate var(--d-hover) var(--ease-expo);
}
.sv-visit:hover { translate: 0 -1px; }

/* ============================================================
   TIER SHOWCASE — one full screen per tier, so the value of each
   step is felt rather than read off a comparison table.
   ============================================================ */

.tier-screen {
  padding-block: var(--pad-lg);
  border-top: 1px solid var(--line-soft);
  position: relative;
}
.tier-screen:first-of-type { border-top: 0; }

/* The picture is the argument here. It keeps its own tall 9:16 shape — so it is
   never cropped — which leaves it running well past the copy top and bottom,
   with the copy centred against it. */
.ts-grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
/* Below this the row would squeeze the copy into a narrow tall column and the
   picture with it, so it stays stacked and full width instead. */
@media (min-width: 1120px) {
  /* The media takes the larger track. The tracks swap along with the side, so
     the picture stays exactly the same size whichever way the row is laid out. */
  .ts-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); }
  /* Alternate the image side so three stacked tiers don't read as a list. */
  .tier-screen:nth-of-type(even) .ts-grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
  .tier-screen:nth-of-type(even) .ts-media { order: -1; }
}

.ts-price {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin: 1.2rem 0 0;
}
.ts-price .amt {
  font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 300;
  letter-spacing: -0.045em; line-height: 0.9;
  font-variant-numeric: tabular-nums lining-nums;
}
.ts-price .per { color: var(--mute); font-size: 1rem; }

.tier-screen h2 {
  font-size: var(--t-h2); font-weight: 300; letter-spacing: var(--tr-h2);
  line-height: 1.05; margin: 1.6rem 0 0; max-inline-size: 18ch;
}
.tier-screen .ts-lead {
  font-size: var(--t-lead); line-height: 1.4; letter-spacing: var(--tr-lead);
  color: var(--bone-dim); margin: 1.4rem 0 0; max-inline-size: 40ch; text-wrap: pretty;
}

.ts-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.ts-list li {
  font-size: 0.9375rem; line-height: 1.45; color: var(--bone-dim);
  padding-left: 1.6rem; position: relative;
}
.ts-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 1px; background: var(--cyan);
}
.ts-list li strong { color: var(--bone); font-weight: 600; }

/* The value anchor. This is the line that does the persuading, so it gets
   its own frame rather than sitting in the bullet list. */
.ts-anchor {
  margin: 2.2rem 0 0; padding: 1.1rem 1.3rem;
  border-left: 1px solid var(--cyan); background: var(--s1);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ts-anchor p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--bone-dim); }
.ts-anchor strong { color: var(--bone); font-weight: 600; }

.ts-media {
  /* These are <figure>s, so the UA's 1em/40px margin has to go or the picture
     sits inset from its own column. */
  margin: 0;
  border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden;
  background: var(--s1); box-shadow: 0 50px 110px -60px rgba(0,0,0,0.95);
}
.ts-media img { width: 100%; object-fit: cover; }

/* Standing on its own across the full column, the artwork keeps its own shape. */
.ts-wide img { aspect-ratio: 4 / 3; }

/* Paired beside copy: the tall 9:16 plates, so even a phone gets a big picture. */
.ts-grid .ts-media img,
.shot--split .ts-media img { aspect-ratio: 9 / 16; }

@media (min-width: 900px) {
  /* Beside a short caption there is no copy to match, so the plate keeps its
     own height rather than being cropped down to fit the text. */
  .shot--split .ts-media { align-self: start; }
}

/* A section-width figure on the inner pages. The caption carries the claim —
   the picture on its own only ever says "a screen", so it needs the sentence. */
.shot { margin: 3rem 0 0; }
.shot > .ts-media { display: block; }
.shot figcaption {
  margin-top: 1rem; max-inline-size: 62ch;
  font-size: 0.9375rem; line-height: 1.55; color: var(--bone-dim);
}
.shot figcaption strong { color: var(--bone); font-weight: 500; }
@media (min-width: 900px) {
  .shot--split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem); align-items: stretch;
  }
  .shot--split figcaption { margin-top: 0; align-self: center; }
  /* Alternate the side so a run of these doesn't read as a list. */
  .shot--flip > .ts-media { order: 2; }
}

.ts-go { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }