/* =========================================================
   Site Mirror — foundation
   Tokens, nav, buttons and motion follow subscrr's system so the
   two sites share a visual language. Accent is the extension's own
   blue from panel.css; change --accent here and the whole site moves.
   ========================================================= */

:root {
  --accent: #EF3006;
  --accent-rgb: 239, 48, 6;

  --ink: #14161a;
  --muted: #6b7280;
  --bg: #f4f1ea;
  --bg-2: #eae6dc;
  --card: #ffffff;
  --line: rgba(20, 22, 26, 0.1);

  --shadow-sm: 0 4px 16px -6px rgba(30, 28, 24, 0.16);
  --shadow: 0 26px 60px -28px rgba(38, 34, 28, 0.34);
  --shadow-lg: 0 50px 110px -40px rgba(38, 34, 28, 0.42);

  --grain-blend: multiply;
  --grain-op: 0.35;

  --nav-tint: rgba(255, 255, 255, 0.22);
  --nav-tint-scrolled: rgba(255, 255, 255, 0.55);
  --nav-sheen-a: rgba(255, 255, 255, 0.35);
  --nav-sheen-b: rgba(255, 255, 255, 0.18);
  --nav-edge-a: rgba(255, 255, 255, 0.9);
  --nav-edge-b: rgba(255, 255, 255, 0.55);

  --wrap: 1320px;
  --pad: clamp(20px, 5vw, 84px);
  --r: 26px;
  --r-lg: 40px;
  --ink-2: #14141a;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Inter Tight", var(--font);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="dark"] {
  --ink: #F5F5F5;
  --muted: rgba(255, 255, 255, 0.5);
  --bg: #0A0A0A;
  --bg-2: #161616;
  --card: #141414;
  --line: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 60px -24px rgba(0, 0, 0, 0.6);
  --grain-blend: overlay;
  --grain-op: 0.22;
  --nav-tint: rgba(16, 16, 16, 0.45);
  --nav-tint-scrolled: rgba(14, 14, 14, 0.75);
  --nav-sheen-a: rgba(255, 255, 255, 0.07);
  --nav-sheen-b: rgba(255, 255, 255, 0.04);
  --nav-edge-a: rgba(255, 255, 255, 0.25);
  --nav-edge-b: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; transition: background 0.45s; }

body {
  margin: 0;
  /* No background here: html carries the page colour. A background on body
     would paint above #bgTint (z-index -2) and hide the section tint. */
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.45s, color 0.45s;
}

a { color: inherit; text-decoration: none; }
img, video, svg { max-width: 100%; }

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

/* ------------------------------------------------------------- ambience */

/* A solid tint that rides behind everything and is faded in and out by scroll
   position, so the Inspect section arrives on colour and hands the page back
   to cream as it leaves. Opacity is set from JS; see onTint. */
#bgTint {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: #FFC7A0;
  opacity: 0; will-change: opacity;
}

.grain {
  /* inset:0, not -50%: the texture tiles at 140px so a viewport-sized layer is
     pixel-identical to an oversized one, and paints a quarter of the area. */
  position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict;
  opacity: var(--grain-op); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ preloader */
/*
 * The ground and the glow are separate layers from the mark, because the mark
 * has to outlive them: they dissolve while it keeps flying to the nav.
 */
.loader {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  pointer-events: none;
  /* No transition: the mark and the ground are each hidden explicitly, at a
     chosen frame. A fade here would blink the mark on hand-over. */
}
.loader__bg { position: absolute; inset: 0; background: var(--bg); }
.loader__glow {
  position: absolute; width: min(78vw, 900px); height: min(46vh, 420px);
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb), 0.20), transparent 70%);
  filter: blur(38px); opacity: 0; pointer-events: none;
}
.loader.done { visibility: hidden; }   /* no fade: the mark is hidden explicitly, one frame after the brand appears */
.loader__logo {
  position: relative;
  width: clamp(220px, 46vw, 620px); height: auto;
  /* Visible from the very first paint. Starting at 0 left the page blank for
     however long it took the first animation frame to arrive. */
  opacity: 1; overflow: visible;
  transform-origin: center center;
}
.loader__logo path { transform-box: fill-box; }

/* The nav brand is painted from the first frame and never hidden. The flying
   mark simply sits on top of it during the intro and is removed on landing,
   so there is no state in which neither is on screen. */

/* ------------------------------------------------------------------ nav */

.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 100; width: calc(100% - 28px); max-width: var(--wrap);
  display: flex; align-items: center; gap: 24px;
  padding: 12px 12px 12px 22px; border-radius: 100px;
  transition: transform 0.5s var(--ease), background 0.4s, box-shadow 0.4s;
}
.nav__glass { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; }
.nav__glass i { position: absolute; inset: -2%; backdrop-filter: blur(7px) saturate(175%); }
.nav > :not(.nav__glass) { position: relative; z-index: 1; }
.nav::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--nav-edge-a), rgba(255,255,255,0.08) 38%, rgba(255,255,255,0.03) 62%, var(--nav-edge-b));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.nav::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, var(--nav-sheen-a) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, var(--nav-sheen-b) 100%), var(--nav-tint);
  transition: background 0.4s;
}
.nav.is-scrolled::before {
  background: linear-gradient(115deg, var(--nav-sheen-a) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, var(--nav-sheen-b) 100%), var(--nav-tint-scrolled);
}

.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; }

/* There is only ever ONE wordmark. The header holds an empty slot of exactly
   the right size so the bar's layout is settled from the first paint, and the
   mark the intro flies in is moved into that slot on landing and stays there.
   Two copies would both be on screen during the flight. */
.brand__slot { display: block; width: 101px; height: 17px; flex: none; }
.brand__slot > svg { display: block; width: 100%; height: 100%; color: var(--ink); }

/* The name is still in the accessibility tree while the slot is empty. */
.brand__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Once the mark has been moved into the header it is an ordinary child again:
   no fixed positioning, no leftover transform from the flight. */
.brand__slot > .loader__logo {
  position: static; transform: none !important; opacity: 1 !important;
  width: 100%; height: 100%;
}

/* The mark sits on a soft white bloom, so it reads as lit rather than pasted,
   and breathes very slowly. */
.brand__mark { position: relative; display: inline-flex; flex: none; }
.brand__mark::before {
  content: ""; position: absolute; inset: -55%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%);
  filter: blur(6px); z-index: -1;
}
.brand__mark img {
  display: block; width: 30px; height: 30px; border-radius: 8px;
  box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb), 0.55);
  animation: markFloat 6s var(--ease) infinite;
}
.brand:hover .brand__mark img { animation-play-state: paused; transform: rotate(-6deg) scale(1.06); transition: transform 0.4s var(--spring); }

@keyframes markFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2.5px) rotate(-2.5deg); }
}

.nav__links { display: flex; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 500; color: var(--muted); }
.nav__links a { position: relative; transition: color 0.3s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: right center;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left center; }
@media (max-width: 900px) {
  .nav__links { display: none; }
  /* Phone: brand on the left, call to action held to the right edge.
     margin-left:auto normally lives on .nav__links, which is hidden here, so
     it is set on the button instead. */
  .nav > .btn { margin-left: auto; }
}

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 100px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.35s var(--spring), background 0.3s, color 0.3s, box-shadow 0.35s, border-color 0.3s;
}
.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn--lg { padding: 17px 30px; font-size: 16px; }
.btn--solid { background: var(--accent); color: #fff; box-shadow: 0 18px 40px -22px rgba(var(--accent-rgb), 0.9); }
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 26px 54px -22px rgba(var(--accent-rgb), 0.95); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--ink); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------ type-scale */

.eyebrow {
  display: inline-block; font: 600 12px/1 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 18px;
}
h1, h2 { font-family: var(--display); letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(34px, 5.2vw, 68px); font-weight: 800; }
h2 em { font-style: normal; color: var(--accent); }

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: 1fr 1.3fr; align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: 150px var(--pad) 90px;
  max-width: var(--wrap); margin-inline: auto;
}
/* Capped so "Save any page." holds one line in the text column; above this
   the two clauses break in the wrong place. */
.hero__title { font-size: clamp(40px, 4.5vw, 66px); font-weight: 800; }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lead { font-size: clamp(16px, 1.35vw, 19px); color: var(--muted); max-width: 46ch; margin: 26px 0 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__fine { margin: 22px 0 0; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hero__fine b { color: var(--ink); font-weight: 600; }

/* Grid items default to min-width:auto and refuse to shrink below their
   min-content width, which is what pushed the hero off the right edge at
   ~1200px. Both columns must be allowed to compress. */
.hero > * { min-width: 0; }
.hero__title { overflow-wrap: break-word; }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; padding-top: 130px; gap: 40px; }
  .hero__stage { order: 2; }
  .hero__lead { max-width: none; }
}

/* --------------------------------------------------------- the macbook */
/*
 * Drawn, not photographed: the screen holds live DOM so the film plays inside
 * it, which a PNG bezel cannot do. Everything is in em, so the whole machine
 * scales from one font-size.
 *
 * Built as the object actually is, in four stacked pieces: light spilling off
 * the screen onto what is behind it, the lid, the base, and a contact shadow
 * on the surface underneath.
 */

.mac {
  --u: clamp(9px, 1.55vw, 19px);
  font-size: var(--u);
  width: 100%;
  position: relative;
  isolation: isolate;
}

/* Screen light on the wall behind. Warm and neutral rather than branded, so
   it sits under footage of any colour. */
.mac::before {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  left: -14%; right: -14%; top: -8%; bottom: 4%;
  background: radial-gradient(58% 54% at 50% 46%, rgba(126, 114, 100, 0.34), transparent 72%);
  filter: blur(2.6em);
}

/* Contact shadow where the machine meets the surface. Tight and dark at the
   feet, falling away fast — a single soft box-shadow reads as a floating card. */
.mac::after {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  left: -4%; right: -4%; bottom: -1.4em; height: 2.4em;
  background: radial-gradient(50% 50% at 50% 38%, rgba(34, 30, 26, 0.34), transparent 74%);
  filter: blur(1em);
}

.mac__lid {
  position: relative;
  /* Anodised aluminium: a lit top edge, the body falling away beneath it,
     and both side edges rolling into shadow. */
  background:
    linear-gradient(90deg, rgba(0,0,0,0.38), transparent 5%, transparent 95%, rgba(0,0,0,0.38)),
    linear-gradient(180deg, #45484e 0, #2b2d32 1.6%, #212328 42%, #17181c 100%);
  border-radius: 0.78em 0.78em 0.2em 0.2em;
  padding: 0.34em 0.34em 0.5em;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09) inset,
    0 0.055em 0 rgba(255, 255, 255, 0.22) inset,
    0 2.4em 3.6em -1.7em rgba(30, 27, 23, 0.5);
}
.mac__lid::after {                          /* raking sheen across the lid */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(116deg, rgba(255,255,255,0.11), transparent 26%, transparent 74%, rgba(255,255,255,0.06));
}

.mac__bezel {
  position: relative; border-radius: 0.3em; overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 10;                    /* matches hero-capture.mp4 exactly */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95) inset;
}
.mac__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 7em; height: 0.48em; background: #0a0b0c; z-index: 6;
  border-radius: 0 0 0.32em 0.32em;
}
.mac__screen { position: absolute; inset: 0; background: #0b0c0e; overflow: hidden; }

/* Glass: one raking reflection, plus a vignette so the panel reads as
   recessed behind it rather than printed on the surface. */
.mac__glare {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background:
    linear-gradient(114deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.022) 15%, transparent 37%),
    radial-gradient(125% 105% at 50% -5%, transparent 62%, rgba(0, 0, 0, 0.24) 100%);
}

/* The base is wider than the lid and tapers, with a lit front edge and the
   thumb notch cut into it. */
.mac__base {
  position: relative;
  height: 0.6em; margin: 0 -5.2%;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.42), transparent 3.5%, transparent 96.5%, rgba(0,0,0,0.42)),
    linear-gradient(180deg, #3e4147 0, #2b2d32 20%, #1a1c1f 68%, #0d0e10 100%);
  border-radius: 0 0 0.5em 0.5em;
  box-shadow: 0 0.05em 0 rgba(255, 255, 255, 0.17) inset;
}
.mac__base::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 8.4em; height: 0.2em;
  background: linear-gradient(180deg, #08090a, #15171a);
  border-radius: 0 0 0.26em 0.26em;
}

html[data-theme="dark"] .mac::before {
  background: radial-gradient(58% 54% at 50% 46%, rgba(150, 160, 180, 0.20), transparent 72%);
}
html[data-theme="dark"] .mac::after {
  background: radial-gradient(50% 50% at 50% 40%, rgba(0, 0, 0, 0.7), transparent 72%);
}

/* ------------------------------------------------- browser inside screen */

.br { position: absolute; inset: 0; display: flex; flex-direction: column; background: #f1f1f3; }
html[data-theme="dark"] .br { background: #202124; }

.br__bar { display: flex; align-items: center; gap: 0.55em; padding: 0.5em 0.7em 0; flex: none; }
.br__dots { display: flex; gap: 0.3em; }
.br__dots i { width: 0.5em; height: 0.5em; border-radius: 50%; background: #d8d8dc; }
html[data-theme="dark"] .br__dots i { background: #4a4c50; }
.br__tab {
  display: flex; align-items: center; gap: 0.4em;
  background: #fff; border-radius: 0.42em 0.42em 0 0;
  padding: 0.42em 0.85em; font-size: 0.62em; font-weight: 500; color: #3c4043;
  max-width: 14em; overflow: hidden; white-space: nowrap;
}
html[data-theme="dark"] .br__tab { background: #35363a; color: #e8eaed; }
.br__fav { width: 0.9em; height: 0.9em; border-radius: 0.2em; background: var(--accent); flex: none; }

.br__url {
  display: flex; align-items: center; gap: 0.5em; flex: none;
  margin: 0.45em 0.7em; padding: 0.4em 0.8em;
  background: #fff; border-radius: 1em; font-size: 0.6em; color: #5f6368;
}
html[data-theme="dark"] .br__url { background: #292a2d; color: #9aa0a6; }
.br__url svg { width: 0.9em; height: 0.9em; flex: none; opacity: 0.6; }

.br__body { flex: 1; display: flex; gap: 0; min-height: 0; }

/* the page being captured — abstracted, never a real brand */
.br__page { flex: 1; background: #fff; padding: 1.5em; overflow: hidden; min-width: 0; }
html[data-theme="dark"] .br__page { background: #17181b; }
.sk { border-radius: 0.3em; background: #ecedf0; }
html[data-theme="dark"] .sk { background: #26282d; }
.sk--hero { height: 4.6em; margin-bottom: 1em; background: linear-gradient(120deg, rgba(var(--accent-rgb),0.5), rgba(var(--accent-rgb),0.16)); }
.sk--h { height: 1.1em; width: 62%; margin-bottom: 0.6em; }
.sk--t { height: 0.55em; margin-bottom: 0.4em; }
.sk--t.w80 { width: 80%; } .sk--t.w65 { width: 65%; } .sk--t.w90 { width: 90%; }
.sk-row { display: flex; gap: 0.7em; margin-top: 1.1em; }
.sk-card { flex: 1; height: 3.4em; border-radius: 0.4em; background: #ecedf0; }
html[data-theme="dark"] .sk-card { background: #26282d; }

/* --------------------------------------------------- the side panel mock */
/*
 * A DOM recreation of panel.html, driven by the real progress strings from
 * background.js. It stands in until the screen recording lands, and it is
 * also what plays for anyone on reduced motion.
 */

.sp {
  width: 15.5em; flex: none; display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid #e4e6eb;
  font-size: 0.62em; color: #14161a;
}
html[data-theme="dark"] .sp { background: #16181d; border-left-color: #2b2f36; color: #e8eaed; }

.sp__top { display: flex; align-items: center; gap: 0.6em; padding: 0.9em 1em; border-bottom: 1px solid #e4e6eb; }
html[data-theme="dark"] .sp__top { border-bottom-color: #2b2f36; }
.sp__brand { font-weight: 650; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp__tools { display: flex; gap: 0.25em; }
.sp__tools i { width: 1.5em; height: 1.5em; border-radius: 0.35em; background: #f0f1f4; }
html[data-theme="dark"] .sp__tools i { background: #24272d; }

.sp__tabs { display: flex; border-bottom: 1px solid #e4e6eb; }
html[data-theme="dark"] .sp__tabs { border-bottom-color: #2b2f36; }
.sp__tab {
  flex: 1; text-align: center; padding: 0.75em 0.2em; font-size: 0.92em; font-weight: 600;
  color: #6b7280; border-bottom: 2px solid transparent;
}
.sp__tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.sp__body { padding: 1.1em 1.2em; display: flex; flex-direction: column; gap: 0.7em; }
.sp__h { font-weight: 700; font-size: 1.15em; }
.sp__d { color: #6b7280; line-height: 1.45; margin: -0.3em 0 0.2em; }
html[data-theme="dark"] .sp__d { color: #9aa0a6; }

.sp__go {
  width: 100%; padding: 0.75em; border: 0; border-radius: 0.55em;
  background: var(--accent); color: #fff; font: inherit; font-weight: 650;
  position: relative;
}
.sp__bar { height: 0.4em; border-radius: 0.2em; background: #e4e6eb; overflow: hidden; }
html[data-theme="dark"] .sp__bar { background: #2b2f36; }
.sp__bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.sp__status { min-height: 1.5em; color: #6b7280; font-size: 0.95em; }
html[data-theme="dark"] .sp__status { color: #9aa0a6; }

.sp__stats { display: flex; flex-direction: column; gap: 0.4em; }
.sp__stat {
  display: flex; justify-content: space-between; gap: 0.6em;
  padding: 0.55em 0.75em; border-radius: 0.4em; background: #f6f7f9; font-size: 0.95em;
}
html[data-theme="dark"] .sp__stat { background: #1d2026; }
.sp__stat span { color: #6b7280; }
html[data-theme="dark"] .sp__stat span { color: #9aa0a6; }
.sp__stat b { font-weight: 650; font-variant-numeric: tabular-nums; }

/* the pointer that drives the demo */
.sp__cursor {
  position: absolute; z-index: 9; width: 1.15em; height: 1.15em; left: 0; top: 0;
  pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* real video swaps in here; see README.md */
.mac__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 5; }

@media (max-width: 620px) { .sp { display: none; } }


/* ------------------------------------------------------------ promo film */
/*
 * The launch film, framed exactly like subscrr's promo section: a rounded
 * container that grows as it enters, the video scaling gently inside it, and a
 * sound toggle that mutes itself again as soon as the section leaves the
 * screen -- so audio can never play off-camera.
 */
.promo {
  padding: clamp(30px, 6vh, 70px) var(--pad) calc(clamp(30px, 6vh, 70px) + min(5.7vw, 75px));
  max-width: var(--wrap); margin-inline: auto;
}
.promo__media {
  position: relative; margin: 0;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-2); box-shadow: var(--shadow);
  transform-origin: center center; will-change: transform;
  max-width: 100%;
}
.promo__video { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.promo__sound {
  position: absolute; right: clamp(14px, 2vw, 22px); bottom: clamp(14px, 2vw, 22px);
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border: 0; border-radius: 100px; cursor: pointer;
  color: #fff; background: rgba(20, 20, 26, 0.5); backdrop-filter: blur(14px);
  transition: transform 0.35s var(--spring), background 0.3s var(--ease);
}
.promo__sound:hover { transform: translateY(-3px); background: rgba(20, 20, 26, 0.72); }
.promo__ico { width: 22px; height: 22px; }
.promo__ico--on { display: none; }
.promo__sound.is-on .promo__ico--off { display: none; }
.promo__sound.is-on .promo__ico--on { display: block; }


/* ------------------------------------------------- feature section (lede) */
/*
 * subscrr's Overview pattern: an oversized head, then image left / copy right.
 * The tick colour comes from --accent, so it follows the brand token.
 */
.work { padding: clamp(40px, 6vh, 80px) var(--pad) clamp(50px, 8vh, 100px); max-width: var(--wrap); margin-inline: auto; }
.work__head h2 { font-size: clamp(38px, 6.2vw, 96px); }

.lede {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 80px); align-items: center;
  margin-top: clamp(36px, 6vh, 80px);
}
.lede > * { min-width: 0; }
.lede__media { margin: 0; border-radius: var(--r-lg); overflow: hidden; will-change: transform; background: var(--bg-2); }
.lede__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; will-change: transform; }
.lede__text p { font-size: clamp(17px, 1.4vw, 22px); margin: 0 0 28px; color: var(--muted); }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 38px; color: var(--muted); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: calc(0.8em - 12px);
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.14);
}
.ticks li::after {
  content: ""; position: absolute; left: 12px; top: 0.8em;
  width: 9px; height: 5.5px;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 900px) {
  .lede { grid-template-columns: 1fr; }
}


/* --------------------------------------------------- split card (feature) */
/*
 * subscrr's Breakdown card: a raised white panel, copy left, image right,
 * with a three-line headline whose last line carries the accent.
 */
.split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  max-width: var(--wrap); margin: 0 auto clamp(30px, 5vh, 60px);
}
.split > * { min-width: 0; }
.split__text {
  padding: clamp(40px, 6vw, 90px);
  display: flex; flex-direction: column; justify-content: center;
}
.split__text h2 { font-size: clamp(34px, 4vw, 64px); text-wrap: normal; }
.split__text p { color: var(--muted); font-size: clamp(16px, 1.2vw, 19px); max-width: 460px; margin: 26px 0 0; }
.split__media {
  margin: clamp(24px, 3vw, 48px); overflow: hidden;
  align-self: center; border-radius: var(--r-lg); background: var(--ink-2);
}
.split__media img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__media { order: 2; margin-top: 0; }
}


/* ----------------------------------------------- centred feature (inspect) */
/*
 * subscrr's Reminders pattern: centred head, then a rounded card with a
 * floating element that rises out of blur when the card comes into view.
 * Here the floating element is the box model itself, drawn in HTML with the
 * four colours the extension's own overlay uses, so it stays crisp.
 */
.centre { text-align: center; padding: clamp(80px, 14vh, 180px) var(--pad); max-width: 1000px; margin-inline: auto; }
/* On the tint the muted grey goes muddy, so the section deepens its own text. */
.centre .eyebrow { color: #8A2200; }
.centre > p { color: rgba(40, 22, 14, 0.78); }
.centre h2 { font-size: clamp(38px, 6.2vw, 92px); }
.centre > p { color: var(--muted); max-width: 540px; margin: 26px auto 0; font-size: clamp(16px, 1.2vw, 19px); }

.shot { position: relative; margin: clamp(40px, 7vh, 80px) auto 0; max-width: 760px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-2); }
.shot__bg { display: block; width: 100%; height: auto; }

.shot__float {
  position: absolute; top: 50%; left: 50%;
  width: min(74%, 420px);
  transform: translate(-50%, calc(-50% - 26px)) scale(0.96);
  opacity: 0; filter: blur(8px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.shot.is-in .shot__float { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }

/* The box model, in DevTools' own colour order: margin, border, padding, content. */
.bm {
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(18px);
  border-radius: 18px; padding: 16px; text-align: left;
  box-shadow: 0 30px 70px -30px rgba(20, 22, 26, 0.5);
}
.bm__label { font: 600 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280; margin-bottom: 10px; }
.bm__ring { position: relative; border-radius: 8px; display: grid; place-items: center; padding: 22px 26px; }
.bm__ring--margin  { background: rgba(246, 178, 107, 0.45); }
.bm__ring--border  { background: rgba(255, 229, 153, 0.6);  padding: 16px 20px; }
.bm__ring--padding { background: rgba(147, 196, 125, 0.6);  padding: 14px 18px; }
.bm__content {
  background: rgba(111, 168, 220, 0.65); border-radius: 4px;
  min-height: 34px; min-width: 96px; display: grid; place-items: center;
  font: 700 12px/1 var(--mono); color: #14161a;
}
.bm__n { position: absolute; font: 700 9px/1 var(--mono); color: rgba(20, 22, 26, 0.55); }
.bm__n--t { top: 4px; left: 50%; transform: translateX(-50%); }
.bm__n--r { right: 5px; top: 50%; transform: translateY(-50%); }
.bm__n--b { bottom: 4px; left: 50%; transform: translateX(-50%); }
.bm__n--l { left: 5px; top: 50%; transform: translateY(-50%); }
.bm__tag { position: absolute; top: 4px; left: 6px; font: 700 8px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(20, 22, 26, 0.45); }

@media (max-width: 620px) { .shot__float { width: 84%; } .bm { padding: 12px; } }

/* --------------------------------------------------------------- reveal */

.reveal-up { opacity: 0; transform: translateY(26px); }
.reveal-up.in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }

/* The OS "reduce motion" setting is deliberately not honoured: the reveals and
   the opening sequence run for every visitor. See HONOUR_OS_REDUCED_MOTION in
   script.js — flip that and restore this block together to undo it. */


/* ------------------------------------------------------------- manifesto */
/*
 * One statement, set large, revealed a word at a time. Each word sits in an
 * overflow-hidden box with padding top and bottom so descenders are not
 * clipped as it rises; the negative margins put the line back where it was.
 */
.manifesto { padding: clamp(80px, 14vh, 180px) var(--pad) clamp(60px, 10vh, 120px); max-width: 1120px; margin-inline: auto; }
.manifesto__text {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px, 4.2vw, 58px); line-height: 1.12; letter-spacing: -0.035em;
  margin: 0; max-width: none;
}
.manifesto__text em { font-style: normal; color: var(--accent); }
.reveal-words .word > span { will-change: transform; }


/* ------------------------------------------------------ photographic beats */
/*
 * Three shapes carry the photography: a full-bleed band that the page falls
 * into, an editorial pair that gives the feature sections room to breathe,
 * and a closing band behind the last call to action.
 */

.band { position: relative; overflow: hidden; height: clamp(340px, 64vh, 680px); }
.band img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.band::after {                     /* keeps type legible and deepens the frame */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,10,8,0.42), rgba(12,10,8,0.10) 42%, rgba(12,10,8,0.55));
}
.band__line {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(28px, 5vw, 64px);
  padding: 0 var(--pad); margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 3.6vw, 54px); letter-spacing: -0.03em; line-height: 1.06;
  color: #fff; text-wrap: balance;
  max-width: 20ch;
}
.band__line em { font-style: normal; color: #FF8A5B; }

.pair {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(40px, 7vh, 100px) var(--pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 30px);
  align-items: stretch;
}
.pair > figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
.pair img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

.closer {
  position: relative; overflow: hidden;
  min-height: clamp(420px, 70vh, 720px);
  display: grid; place-items: center; text-align: center;
  margin-top: clamp(48px, 10vh, 130px);      /* breathing room after the manifesto */
  border-radius: clamp(24px, 3vw, 40px);
}
.closer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,11,9,0.55), rgba(14,11,9,0.72));
}
.closer__in { position: relative; z-index: 2; padding: clamp(40px, 8vw, 90px) var(--pad); max-width: 780px; }
.closer h2 { color: #fff; font-size: clamp(34px, 5vw, 74px); }
.closer h2 em { font-style: normal; color: #FF8A5B; }
.closer p { color: rgba(255,255,255,0.72); font-size: clamp(16px, 1.2vw, 19px); margin: 22px auto 34px; max-width: 46ch; }
.closer .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.closer .btn--ghost:hover { border-color: #fff; }

/* The manifesto gets a photograph above it, so the statement lands on a scene. */
.manifesto__media { margin: 0 0 clamp(40px, 7vh, 84px); border-radius: var(--r-lg); overflow: hidden; }
.manifesto__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }

/* --------------------------------------------------------------- footer */
/*
 * A dark panel the page falls into, with the call to action set as large as
 * the hero. The product icon stands in for the S of "Site", so the mark is
 * read rather than displayed; both it and the words lift on hover, and each
 * line rises out of its own clipped box when the footer scrolls into view.
 */
.footer {
  position: relative; z-index: 2;
  margin-top: clamp(40px, 8vh, 90px);
  padding: clamp(80px, 14vh, 170px) var(--pad) 34px;
  background: var(--ink-2);
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  overflow: hidden;
}
.footer__cta {
  display: block; text-align: center;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(38px, 7.2vw, 112px); line-height: 1.04; letter-spacing: -0.045em;
  color: var(--accent);
  margin-bottom: clamp(80px, 13vh, 150px);
}
.footer__cta-line { display: block; }
.footer__cta-s { white-space: nowrap; }
.footer__icon {
  position: relative; display: inline-block;
  width: 0.9em; height: 0.9em; vertical-align: -0.13em; margin: 0 0.02em 0 0.06em;
  transition: transform 0.45s var(--spring);
}
.footer__icon::before {                 /* white drop light behind the mark */
  content: ""; position: absolute; inset: -38%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
  filter: blur(0.16em); z-index: 0;
}
.footer__icon img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%; border-radius: 0.2em;
  box-shadow: 0 0.12em 0.4em -0.06em rgba(0, 0, 0, 0.45);
}
.footer__cta:hover .footer__icon { transform: rotate(-7deg) scale(1.08); }
.footer__cta-w { display: inline-block; transition: transform 0.45s var(--spring); }
.footer__cta:hover .footer__cta-w { transform: translateY(-3px); }

.footer__store {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin: calc(-1 * clamp(36px, 6vh, 80px)) 0 clamp(64px, 11vh, 130px);
}
.footer__badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px; border-radius: 100px;
  background: #fff; color: #14161a;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s var(--ease);
}
.footer__badge svg { width: 22px; height: 22px; }
.footer__badge:hover { transform: translateY(-2px); }
.footer__fine { color: #9a9ba3; font-size: 14px; }

.footer__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #f4f4f6; }
.footer__brand .brand__mark img { width: 24px; height: 24px; border-radius: 6px; }
.footer__links { display: flex; gap: 24px; margin-left: auto; color: #9a9ba3; font-size: 14px; }
.footer__links a, .footer__links span { white-space: nowrap; }
.footer__links a:hover { color: #fff; }
.footer__note { color: #6f7077; font-size: 13px; margin: 22px 0 0; }

@media (max-width: 620px) {
  .footer { margin-top: 40px; padding-top: 70px; }
  .footer__cta { font-size: clamp(34px, 11vw, 60px); margin-bottom: 62px; }
  .footer__store { margin-bottom: 60px; }
  .footer__row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer__links { margin-left: 0; flex-wrap: wrap; gap: 12px 20px; }
}

/* ============================================================== mobile */
/*
 * The desktop type scale is driven by vw, which on a phone lands far too
 * large — headlines break mid-phrase and authored <br> points stop making
 * sense. Everything below re-sets the scale for a hand, tightens the
 * vertical rhythm, and makes every call to action full width so the two
 * buttons read as a pair rather than two odd shapes.
 */

@media (max-width: 900px) {
  .hero { padding-top: 132px; gap: 34px; }
  .work { padding: 46px var(--pad) 54px; }
  .centre { padding: 64px var(--pad); }
  .manifesto { padding: 64px var(--pad); }
  .pair { padding: 40px var(--pad); }
  .split__text { padding: 40px 30px 34px; }
  .split__media { margin: 0 30px 34px; }
  .band { height: clamp(300px, 54vh, 460px); }
}

@media (max-width: 620px) {
  .hero { padding-top: 124px; }
  .hero__title { font-size: clamp(34px, 9.4vw, 46px); }
  .hero__lead { font-size: 16px; margin: 20px 0 28px; }
  .hero__fine { font-size: 12.5px; flex-wrap: wrap; }

  /* Stacked and full width, so the two buttons align instead of stepping. */
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn { width: 100%; }
  .btn--lg { padding: 15px 24px; font-size: 15px; }

  .eyebrow { font-size: 11px; margin-bottom: 14px; }
  h2 { font-size: clamp(30px, 8.4vw, 40px); }
  .work__head h2 { font-size: clamp(30px, 8.4vw, 40px); }
  .work { padding: 40px var(--pad) 44px; }
  .lede { margin-top: 28px; gap: 26px; }
  .lede__text p { font-size: 16px; margin-bottom: 22px; }
  .ticks li { padding-left: 32px; font-size: 15px; }
  .ticks li::before { width: 20px; height: 20px; top: calc(0.8em - 10px); }
  .ticks li::after { left: 10px; }

  .split { border-radius: var(--r); }
  .split__text { padding: 34px 22px 26px; }
  .split__text h2 { font-size: clamp(29px, 8vw, 38px); }
  .split__text p { font-size: 16px; margin-top: 18px; }
  .split__media { margin: 0 22px 26px; border-radius: var(--r); }

  .centre { padding: 56px var(--pad); }
  .centre h2 { font-size: clamp(29px, 8.2vw, 40px); }
  .centre > p { font-size: 16px; margin-top: 18px; }
  .shot { border-radius: var(--r); margin-top: 30px; }

  .band { height: clamp(280px, 48vh, 400px); }
  .band__line { font-size: clamp(21px, 6.4vw, 30px); max-width: 15ch; bottom: 24px; }

  .pair { padding: 34px var(--pad); gap: 12px; }
  .pair > figure { border-radius: var(--r); }

  .manifesto { padding: 52px var(--pad); }
  .manifesto__text { font-size: clamp(23px, 6.3vw, 32px); line-height: 1.16; }
  .manifesto__media { margin-bottom: 30px; border-radius: var(--r); }
  .manifesto__media img { aspect-ratio: 4 / 3; }

  .closer { min-height: auto; }
  .closer__in { padding: 64px 22px; }
  .closer h2 { font-size: clamp(29px, 8.2vw, 40px); }
  .closer p { font-size: 16px; margin: 18px auto 26px; }
  .closer .hero__cta { flex-direction: column; align-items: stretch; }

  .foot { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 48px; font-size: 13px; }
  .foot .spacer { display: none; }

  .mac { --u: clamp(8px, 3.4vw, 13px); }
}

@media (max-width: 400px) {
  .hero__title { font-size: 33px; }
  .band__line { font-size: 20px; }
}

/* ---------------------------------------------------------------- privacy */
.perms {
  list-style: none; margin: clamp(30px, 5vh, 52px) auto 0; padding: 0;
  max-width: 720px; display: grid; gap: 10px; text-align: left;
}
.perms li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 15px 22px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
}
.perms b {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--accent); white-space: nowrap;
}
.perms span { color: var(--muted); font-size: 15px; line-height: 1.5; flex: 1 1 280px; }
.perms__note { max-width: 640px; margin: 24px auto 0 !important; font-size: 14.5px !important; }

/* ---------------------------------------------------------------- install */
.install__dl { margin-top: clamp(28px, 4.5vh, 44px); }
.install__dl svg { width: 20px; height: 20px; }
.install__meta {
  margin: 14px auto 0 !important; font-size: 14px !important; letter-spacing: 0.02em;
}
.install__steps {
  counter-reset: step; list-style: none;
  margin: clamp(38px, 6vh, 64px) auto 0; padding: 0;
  max-width: 760px; text-align: left; display: grid; gap: 12px;
}
.install__steps li {
  counter-increment: step; position: relative;
  padding: 20px 24px 20px 68px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.install__steps li::before {
  content: counter(step); position: absolute; left: 22px; top: 19px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.install__steps b { display: block; font-size: 17px; font-weight: 650; color: var(--ink); }
.install__steps span { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.install__steps em { font-style: normal; font-weight: 600; color: var(--ink); }

@media (max-width: 600px) {
  .perms li { padding: 13px 18px; }
  .install__steps li { padding: 17px 18px 17px 58px; }
  .install__steps li::before { left: 16px; top: 16px; width: 27px; height: 27px; font-size: 13px; }
}

/* label above the "what we do store" list in the privacy section */
.plbl {
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}