/* ============================================================
   ReplyPort - replyport.github.io
   Identity: Direction A (restrained Swiss / systems).
   Information density: Direction C, without the terminal aesthetic.
   Palette, mark, type system and rationed accent are the frozen parts.
   Vertical rhythm is deliberately much tighter than the original handoff.
   ============================================================ */

/* ---------- 1 - Fonts (self-hosted, OFL, variable, latin + latin-ext) --- */

@font-face{
  font-family:'Libre Franklin';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/libre-franklin-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:'Libre Franklin';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/libre-franklin-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:'Spline Sans Mono';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/spline-sans-mono-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:'Spline Sans Mono';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/spline-sans-mono-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;
}

/* ---------- 2 - Tokens ---------------------------------------------- */

:root{
  color-scheme:light;

  /* --- Page surfaces: the bands you read on ------------------------- */
  --paper:#FAF9F5;
  --paper-alt:#F4F2EB;
  --panel:#FFFFFF;
  --ink:#0F0F0E;              /* text, and the strong 1px borders */
  --loud-bg:#0F0F0E;          /* the fill of every loud surface */
  --ink-hover:#000000;
  --paper-hover:#FFFFFF;
  --body:#3B3A36;
  --muted:#75736B;
  --muted-2:#9A978E;          /* deliberately quiet: "No" / "Not required" */
  --rule:#E5E2D9;
  --rule-alt:#DDD9CE;
  --border-strong:#CFCBBF;

  /* --- Loud surfaces: the inverted bands ----------------------------
     The footer and the film control bar's primary button. They are filled with --ink and their
     content uses the --on-loud-* scale and --rule-loud hairlines. */
  --on-loud:#B7B4AC;
  --on-loud-strong:#E4E1D9;
  --on-loud-muted:#8B8880;
  --rule-loud:#2B2A27;

  /* --- The one accent, in its three jobs ---------------------------- */
  --signal:#8A2E3B;           /* accent on a page surface */
  --signal-on-loud:#C4726F;   /* accent on a loud surface */
  --signal-fill:#8A2E3B;      /* accent as a filled block; never inverts */
  --on-signal:#FAF9F5;        /* text on that fill; never inverts */

  --sans:'Libre Franklin','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,Consolas,'Courier New',monospace;

  --gutter:36px;
  --content:1240px;

  /* Vertical rhythm. Roughly 45% tighter than the original handoff. */
  --band-y:48px;
  --gap-lg:52px;

  /* mark stroke defaults - the proportional rule from the handoff */
  --rp-w:9%;
  --rp-h:60%;
}

/* ---------- 2.1 - Dark mode ------------------------------------------
   A true inversion of the same system, not a second design. Every pair
   swaps roles: the page goes to ink, the loud bands go to paper, and the
   mark inverts with them (the square is always the opposite of the page).
   Only --signal-fill and --on-signal hold still, because an oxblood block
   with light text reads correctly against either background.
   -------------------------------------------------------------------- */

@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;

    --paper:#0F0F0E;
    --paper-alt:#171614;
    --panel:#141312;
    --ink:#EAE7DF;
    /* The slab sits a little under the text colour so a full-width
       inverted band reads as paper rather than as a light source. */
    --loud-bg:#E3E0D7;
    --ink-hover:#FFFFFF;
    --paper-hover:#000000;
    --body:#C4C1B9;
    --muted:#94918A;
    --muted-2:#82807A;
    --rule:#2B2A28;
    --rule-alt:#33322D;
    --border-strong:#4A4844;

    --on-loud:#55534E;
    --on-loud-strong:#2A2926;
    --on-loud-muted:#5F5D57;
    --rule-loud:#C4C0B4;

    --signal:#C4726F;
    --signal-on-loud:#8A2E3B;
  }
}

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

[hidden]{display:none !important}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,p,dl,dd,ol,ul,figure{margin:0}
dd{margin-inline-start:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block}
b,strong{font-weight:600}

a{
  color:var(--ink);
  text-decoration:none;
  transition:color 120ms ease,background-color 120ms ease,border-color 120ms ease;
}
a:hover{color:var(--signal)}
a:focus-visible,summary:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}
/* The accent flips on the inverted bands, so the focus ring flips with it. */
.band--ink a:focus-visible,.foot a:focus-visible{outline-color:var(--signal-on-loud)}
.link{border-bottom:1px solid var(--border-strong);padding-bottom:1px}
.link:hover{border-color:var(--signal)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--loud-bg);color:var(--paper);padding:10px 18px;font-size:14px;
}
.skip-link:focus{left:0;color:var(--paper)}

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

/* ---------- 3 - Layout scaffolding ---------------------------------- */

.wrap{
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin:0 auto;
  padding-inline:var(--gutter);
}

.band{border-bottom:1px solid var(--rule)}
.band--alt{background:var(--paper-alt)}
.band--alt .hair-grid > *{background:var(--paper-alt)}
.band--ink{background:var(--loud-bg);color:var(--paper);border-bottom:0}

.sec{padding-block:var(--band-y)}

[id]{scroll-margin-top:64px}

/* ---------- 4 - Typography roles ------------------------------------ */

.eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--muted);
}
.eyebrow--wide{letter-spacing:.14em}
.eyebrow--widest{letter-spacing:.16em}
.eyebrow--signal{color:var(--signal)}
.eyebrow--on-loud{color:var(--signal-on-loud)}

.meta{
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted);
}
.meta--on-ink{color:var(--on-loud-muted)}

.lead{font-size:15.5px;line-height:1.6;color:var(--body)}
.note{font-size:12.5px;line-height:1.6;color:var(--muted)}

h1{
  font-size:clamp(29px,3.25vw,45px);
  line-height:1.06;
  font-weight:500;
  letter-spacing:-.036em;
  text-wrap:pretty;
}
.h2{
  font-size:clamp(21px,2.05vw,28px);
  line-height:1.12;
  font-weight:500;
  letter-spacing:-.032em;
  text-wrap:pretty;
}
.h2--cta{font-size:clamp(22px,2.4vw,32px)}

/* ---------- 5 - The mark -------------------------------------------- */

.rp-mark{
  position:relative;
  display:inline-block;
  width:28px;height:28px;
  background:var(--loud-bg);
  flex:none;
}
.rp-mark > i{
  position:absolute;left:50%;top:50%;
  width:var(--rp-w);height:var(--rp-h);
  background:var(--paper);
  transform:translate(-50%,-50%) rotate(45deg);
}
.rp-mark--inverse{background:var(--paper)}
.rp-mark--inverse > i{background:var(--ink)}

.rp-mark--16{width:16px;height:16px;--rp-w:2px;--rp-h:10px}
.rp-mark--24{width:24px;height:24px;--rp-w:2.5px;--rp-h:14px}
.rp-mark--28{width:28px;height:28px;--rp-w:2.5px;--rp-h:17px}
.rp-mark--34{width:34px;height:34px;--rp-w:3px;--rp-h:20px}

@keyframes rp-spin{
  from{transform:translate(-50%,-50%) rotate(45deg)}
  to  {transform:translate(-50%,-50%) rotate(405deg)}
}
.rp-mark--idle > i{transform:translate(-50%,-50%) rotate(45deg)}
.rp-mark--working > i{animation:rp-spin 2.6s linear infinite}
.rp-mark--ready > i{transform:translate(-50%,-50%) rotate(0deg)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rp-mark--working > i{animation:none}
  .rp-mark--working{box-shadow:inset 0 0 0 2px var(--signal-fill)}
}

/* ---------- 6 - Buttons --------------------------------------------- */

.btn{
  display:inline-block;
  padding:12px 22px;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  border-radius:0;
  background:var(--loud-bg);
  color:var(--paper);
  text-align:center;
  white-space:nowrap;
}
.btn:hover{color:var(--paper);background:var(--ink-hover)}
.btn--secondary{
  background:transparent;color:var(--ink);
  border:1px solid var(--border-strong);padding:11px 20px;font-weight:400;
}
.btn--secondary:hover{color:var(--signal);background:transparent;border-color:var(--signal)}
.btn--small{padding:9px 16px;font-size:13px}
.btn--on-ink{background:var(--paper);color:var(--ink)}
.btn--on-ink:hover{background:var(--paper-hover);color:var(--ink)}

/* ---------- 7 - Sticky top bar -------------------------------------- */

.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.topbar__bar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:11px;
}
.lockup{display:flex;align-items:center;gap:11px}
.lockup:hover{color:var(--ink)}
.wordmark{font-size:18px;font-weight:600;letter-spacing:-.032em}
.lockup__tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding-left:11px;border-left:1px solid var(--rule-alt);
}
.topbar__links{display:flex;gap:26px;font-size:14px}
.topbar__links a{color:var(--body)}
.topbar__links a:hover{color:var(--signal)}
.navdrop{display:none}

/* ---------- 8 - Hero: headline, the film, facts ---------------------- */

.hero{display:flex;flex-direction:column;gap:22px;padding-block:34px 26px}

/* Two-column editorial head: the claim on the left, the plain explanation
   and the install route on the right. It stays short so the film is the
   first thing that explains the product. */
.hero__head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--gap-lg);align-items:end;
}
.hero__title{display:flex;flex-direction:column;gap:12px}
.hero h1{max-width:17ch;font-size:clamp(31px,3.7vw,52px)}
.hero__intro{display:flex;flex-direction:column;gap:14px;padding-bottom:4px}
.standfirst{font-size:16px;line-height:1.6;color:var(--body);max-width:48ch}
.hero__cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* The film. One canonical light film in both themes: it is a framed object
   on the page, with its own paper, and it ends on an ink card. */
.film{display:flex;flex-direction:column}
.film__frame{
  position:relative;
  aspect-ratio:16 / 9;
  background:#F4F2EB;
  border:1px solid var(--ink);
  overflow:hidden;
}
.film__video{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;background:transparent;
}
.film__video::cue{
  font-family:var(--sans);font-size:clamp(14px,1.6vw,22px);line-height:1.35;
  color:#FAF9F5;background:rgba(15,15,14,.86);
}

/* Centred start button: shown when the film is not previewing (reduced
   motion, Data Saver, autoplay refused) and after it ends. */
.film__start{
  position:absolute;right:2.2%;top:3.6%;
  display:flex;align-items:center;gap:16px;
  padding:16px 24px 16px 18px;border:0;border-radius:0;cursor:pointer;
  background:#0F0F0E;color:#FAF9F5;font:inherit;text-align:left;
  box-shadow:0 0 0 1px rgba(250,249,245,.18);
}
.film__start:hover{background:#000}
.film__start:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.film__start-icon{
  width:38px;height:38px;flex:none;background:#FAF9F5;position:relative;
}
.film__start-icon::after{
  content:'';position:absolute;left:14px;top:11px;
  border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #0F0F0E;
}
.film.is-ended .film__start{background:#FAF9F5;color:#0F0F0E}
.film.is-ended .film__start-icon{background:#0F0F0E}
.film.is-ended .film__start-icon::after{border-left-color:#FAF9F5}
.film.is-ended .film__start-meta{color:#75736B}
.film__start-text{display:flex;flex-direction:column;gap:2px}
.film__start-label{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.film__start-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#B7B4AC}

.film__unmute{
  position:absolute;right:2.2%;top:3.6%;
  display:inline-flex;align-items:center;gap:9px;
  min-height:40px;padding:0 14px;border:0;border-radius:0;cursor:pointer;
  background:#0F0F0E;color:#FAF9F5;font:inherit;font-size:13.5px;font-weight:500;
}
.film__unmute:hover{background:#000}
.film__unmute:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.film__error{
  position:absolute;left:0;right:0;bottom:0;padding:12px 16px;
  background:var(--paper);border-top:1px solid var(--ink);font-size:13.5px;color:var(--body);
}
.film.is-failed .film__bar,.film.is-failed .film__unmute{display:none}

/* Control bar: sits under the film so nothing covers the picture. It is
   only shown when the player script can run (html.js is set inline in the
   head, so its space is reserved from the first paint); without script
   the video keeps its native controls. */
.js .film__bar{display:flex}
.film__bar{
  position:relative;
  display:none;align-items:stretch;flex-wrap:wrap;
  border:1px solid var(--ink);border-top:0;background:var(--paper);
}
.film__btn{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 16px;
  border:0;border-right:1px solid var(--rule);border-radius:0;
  background:transparent;color:var(--ink);cursor:pointer;
  font:inherit;font-size:13.5px;line-height:1;white-space:nowrap;
}
.film__btn:hover{color:var(--signal)}
.film__btn:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.film__btn--primary{background:var(--loud-bg);color:var(--paper);font-weight:500;padding:0 18px;border-right-color:var(--ink)}
.film__btn--primary:hover{background:var(--ink-hover);color:var(--paper)}
.film__btn[aria-pressed="true"]{color:var(--signal)}
.film__btn--end{margin-left:auto;border-right:0;border-left:1px solid var(--rule)}
.film__time{
  display:flex;align-items:center;gap:.45em;padding:0 16px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.film__progress{position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent;pointer-events:none}
.film__progress span{display:block;height:100%;width:0;background:var(--signal)}

/* Icons: drawn with borders so they stay crisp and inherit colour. */
.film__ico{position:relative;width:14px;height:14px;flex:none;display:inline-block}
.film__ico--pause::before,.film__ico--pause::after{content:'';position:absolute;top:1px;width:4px;height:12px;background:currentColor}
.film__ico--pause::before{left:2px}
.film__ico--pause::after{right:2px}
.film__ico--play::before{
  content:'';position:absolute;left:3px;top:1px;
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;
}
.film__ico--restart{border:2px solid currentColor;border-radius:50%;border-top-color:transparent;width:13px;height:13px}
.film__ico--restart::after{
  content:'';position:absolute;right:-3px;top:-3px;
  border-style:solid;border-width:4px 0 4px 5px;border-color:transparent transparent transparent currentColor;
  transform:rotate(-45deg);
}
.film__ico--sound::before{content:'';position:absolute;left:0;top:4px;width:4px;height:6px;background:currentColor}
.film__ico--sound::after{
  content:'';position:absolute;left:3px;top:1px;
  border-style:solid;border-width:6px 7px 6px 0;border-color:transparent currentColor transparent transparent;
}
[data-act="mute"][aria-pressed="false"] .film__ico--sound{opacity:.45}
.film__ico--full{border:2px solid currentColor;width:14px;height:11px;margin-top:1px}
.film__cc{
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;
  border:1.5px solid currentColor;padding:1px 3px;line-height:1.1;
}

/* Written version of the film. */
.transcript{border-bottom:1px solid var(--rule)}
.transcript summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:2px 0 12px;
}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary::before{content:'+';font-size:13px;line-height:1;color:var(--signal)}
.transcript[open] summary::before{content:'\2013'}
.transcript summary:hover{color:var(--signal)}
.transcript summary:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.transcript__list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px;
  padding-bottom:18px;counter-reset:t;
}
.transcript__list li{
  counter-increment:t;position:relative;padding-left:30px;
  font-size:13.5px;line-height:1.55;color:var(--body);
}
.transcript__list li::before{
  content:counter(t,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:11px;color:var(--signal);
}
.transcript__list b{color:var(--ink);font-weight:600}

#use-cases{padding-bottom:30px}

/* ---------- 9 - Hairline grids and strips ---------------------------- */

.hair-grid{
  display:grid;gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.hair-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hair-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hair-grid > *{background:var(--paper);min-width:0}
.strip{margin-bottom:0}

.usecase{padding:18px 20px 20px;display:flex;flex-direction:column;gap:5px}
.usecase__title{font-size:19px;font-weight:500;letter-spacing:-.026em;line-height:1.15}
.usecase__text{font-size:13.5px;line-height:1.55;color:var(--body)}

/* ---------- 11 - Section heads --------------------------------------- */

.sec-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:40px;align-items:end;
  padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--rule);
}
.band--alt .sec-head{border-bottom-color:var(--rule-alt)}
.sec-head__main{display:flex;flex-direction:column;gap:8px}
.sec-head .h2{max-width:22ch}
.sec-head .lead{max-width:52ch}

/* ---------- 12 - Columns, spec lists, notes -------------------------- */

.cols{display:grid;gap:36px}
.cols--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.col{display:flex;flex-direction:column;gap:10px;min-width:0}
.col--pad{padding:18px 20px 20px}

.speclist{display:flex;flex-direction:column;border-top:1px solid var(--rule-alt)}
.speclist > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--rule-alt);
}
.speclist dt{font-size:14px;color:var(--ink);min-width:0}
.speclist dd{font-size:13px;color:var(--body);flex:none;font-family:var(--mono);letter-spacing:.02em}
.speclist .is-no{color:var(--muted-2)}
.speclist--2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;border-top:0}
.speclist--2col > div{border-top:1px solid var(--rule-alt);border-bottom:0}

#windows .btn{max-width:100%;white-space:normal}
.requirements-list{display:grid;gap:8px;font-size:14px;color:var(--body)}
.requirements-list li{padding-bottom:8px;border-bottom:1px solid var(--rule-alt)}

/* ---------- 13 - How-it-works boundary statement + step list --------- */

.how-boundary{display:flex;flex-direction:column;gap:4px}
.how-boundary__statement{
  font-size:19px;font-weight:600;letter-spacing:-.022em;line-height:1.25;color:var(--ink);
}
.how-boundary__support{font-size:13px;line-height:1.5;color:var(--muted)}

.how-steps{
  display:flex;align-items:stretch;
  border-top:1px solid var(--rule-alt);border-bottom:1px solid var(--rule-alt);
}
.how-step{
  position:relative;flex:1 1 0;min-width:0;
  padding:18px 24px 20px;display:flex;flex-direction:column;gap:5px;
  border-left:1px solid var(--rule-alt);
}
.how-step:first-child{border-left:0}
.how-step__num{font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.03em}
.how-step__title{font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.how-step__text{font-size:13.5px;line-height:1.55;color:var(--body)}
.how-step--you{box-shadow:inset 3px 0 0 var(--signal)}
.how-step__arrow{
  position:absolute;top:22px;right:-12px;z-index:1;
  width:24px;height:24px;background:var(--paper);color:var(--muted);
}
.how-step__arrow::before{
  content:'';position:absolute;left:5px;right:5px;top:11px;border-top:1px solid currentColor;
}
.how-step__arrow::after{
  content:'';position:absolute;right:5px;top:8px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}

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

.foot{background:var(--loud-bg);color:var(--on-loud);border-top:1px solid var(--rule-loud)}
.foot__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
  padding-block:36px 26px;
}
.foot__brand{display:flex;flex-direction:column;gap:11px}
.foot__lockup{display:flex;align-items:center;gap:11px}
.foot__wordmark{font-size:16px;font-weight:600;letter-spacing:-.03em;color:var(--paper)}
.foot__blurb{font-size:13px;line-height:1.6;max-width:38ch}
.foot__col{display:flex;flex-direction:column;gap:7px;font-size:13px}
.foot__col .eyebrow{margin-bottom:2px;color:var(--on-loud-muted)}
.foot__col a{color:var(--on-loud)}
.foot__col a:hover{color:var(--signal-on-loud)}
/* Destinations that do not exist yet render as plain text, so the footer
   never ships a dead link. Swap the span for an <a href> once published. */
.foot__pending{color:var(--on-loud-muted)}
.foot__legal{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-top:1px solid var(--rule-loud);padding-block:14px 30px;
  font-family:var(--mono);font-size:10.5px;color:var(--on-loud-muted);letter-spacing:.04em;
}

/* ---------- 15.1 - Privacy policy ------------------------------------ */

.privacy-hero__inner{padding-block:72px 64px;display:grid;gap:18px}
.privacy-hero h1{max-width:14ch}
.privacy-standfirst{max-width:68ch;font-size:18px;line-height:1.65;color:var(--body)}
.privacy-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:80px;padding-block:64px 88px}
.privacy-nav{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:10px;font-size:14px}
.privacy-nav .eyebrow{margin-bottom:8px;color:var(--muted)}
.privacy-nav a{color:var(--body)}
.privacy-nav a:hover{color:var(--signal)}
.privacy-copy{display:flex;flex-direction:column;gap:48px}
.privacy-copy section{display:flex;flex-direction:column;gap:14px;scroll-margin-top:88px}
.privacy-copy h2{font-size:clamp(26px,3vw,38px);line-height:1.08;letter-spacing:-.035em}
.privacy-copy h3{font-size:18px;line-height:1.25;margin-top:10px}
.privacy-copy p,.privacy-copy li{font-size:16px;line-height:1.72;color:var(--body)}
.privacy-copy ul{display:flex;flex-direction:column;gap:10px;padding-left:20px;list-style:square}
.privacy-copy li::marker{color:var(--signal)}
.privacy-callout{border-left:4px solid var(--signal);padding:16px 20px;background:var(--paper-alt);color:var(--ink) !important}

/* ---------- 15.2 - Setup guide -------------------------------------- */

.guide-hero__inner{padding-block:64px 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:var(--gap-lg);align-items:end}
.guide-hero h1{max-width:15ch}
.guide-standfirst{max-width:62ch;font-size:18px;line-height:1.65;color:var(--body);margin-top:18px}
.guide-boundary{border:1px solid var(--ink);padding:18px 20px;background:var(--panel);display:flex;flex-direction:column;gap:9px}
.guide-boundary strong{font-size:18px;font-weight:500;letter-spacing:-.02em}
.guide-boundary ul{display:grid;gap:8px;list-style:square;padding-left:16px;font-size:13.5px;line-height:1.6;color:var(--body)}
.guide-boundary p{font-size:13.5px;line-height:1.6;color:var(--body)}
.guide-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:80px;padding-block:56px 88px}
.guide-nav{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:10px;font-size:14px}
.guide-nav .eyebrow{margin-bottom:8px;color:var(--muted)}
.guide-nav a{color:var(--body)}
.guide-nav a:hover{color:var(--signal)}
.guide-copy{display:flex;flex-direction:column;gap:52px}
.guide-copy section{display:flex;flex-direction:column;gap:14px;scroll-margin-top:88px}
.guide-copy h2{font-size:clamp(26px,3vw,38px);line-height:1.08;letter-spacing:-.035em}
.guide-copy h3{font-size:18px;line-height:1.25;margin-top:10px}
.guide-copy p,.guide-copy li{font-size:16px;line-height:1.72;color:var(--body)}
.guide-copy ul{display:flex;flex-direction:column;gap:10px;padding-left:20px;list-style:square}
.guide-copy li::marker{color:var(--signal)}
.guide-callout{border-left:4px solid var(--signal);padding:16px 20px;background:var(--paper-alt);color:var(--ink) !important}
.guide-steps{display:flex;flex-direction:column;border-top:1px solid var(--rule-alt);counter-reset:guide-step}
.guide-step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--rule-alt);counter-increment:guide-step}
.guide-step::before{content:counter(guide-step,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--signal);padding-top:4px}
.guide-step h3{margin:0;font-size:18px;font-weight:500;letter-spacing:-.02em}
.guide-step p{font-size:14.5px;line-height:1.62;margin-top:4px}
.guide-step code{font-family:var(--mono);font-size:.92em;color:var(--ink)}
.ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:4px}
.ai-card{background:var(--paper);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ai-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule-alt);padding-bottom:10px}
.ai-card__head h3{margin:0;font-size:20px;font-weight:500;letter-spacing:-.025em}
.instruction{margin:0;padding:14px;background:var(--panel);border:1px solid var(--border-strong);font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
.instruction-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.copy-button{border:1px solid var(--border-strong);border-radius:0;padding:9px 12px;background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.copy-button:hover{border-color:var(--signal);color:var(--signal)}
.copy-button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.instruction-download{font-size:13px;border-bottom:1px solid var(--border-strong);padding-bottom:1px}
.copy-status{font-family:var(--mono);font-size:11px;color:var(--signal);min-height:1.5em}
.guide-help{display:grid;gap:0}
.guide-help > div{padding:14px 0;border-top:1px solid var(--rule-alt)}
.guide-help dt{font-size:16px;font-weight:500;color:var(--ink)}
.guide-help dd{margin-top:4px;font-size:14px;line-height:1.6;color:var(--body)}

.guide-source{font-size:13px !important;line-height:1.6 !important;color:var(--muted) !important}
.guide-source a{color:var(--body);border-bottom:1px solid var(--border-strong)}
.guide-source a:hover{color:var(--signal);border-color:var(--signal)}

/* ============================================================
   16 - Responsive. Density on desktop must not become clutter
   on a phone: the same components, progressively unstacked.
   ============================================================ */

/* --- <=1180px -------------------------------------------------------- */
@media (max-width:1180px){
  :root{--gutter:28px;--gap-lg:40px}
  .lockup__tag{display:none}
  .topbar__links{gap:20px;font-size:13.5px}
  .hero__head{gap:36px}
  .sec-head{gap:32px}
  .cols{gap:28px}
  .foot__grid{gap:28px}
}

/* --- <=980px: two-column bands collapse ------------------------------ */
@media (max-width:980px){
  .topbar__links{display:none}
  .navdrop{display:block;border-top:1px solid var(--rule)}
  .navdrop summary{
    list-style:none;cursor:pointer;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);
  }
  .navdrop summary::-webkit-details-marker{display:none}
  .navdrop__summary{display:flex;align-items:center;justify-content:space-between;padding-block:9px}
  .navdrop__summary::after{content:'+';font-size:13px;line-height:1}
  .navdrop[open] .navdrop__summary::after{content:'\2013'}
  .navdrop__menu{display:flex;flex-direction:column;padding-bottom:6px}
  .navdrop__menu a{
    padding:9px 0;font-size:15px;color:var(--ink);border-top:1px solid var(--rule);
  }
  /* The sticky bar is taller once the Sections disclosure is part of it. */
  [id]{scroll-margin-top:100px}

  .hero{padding-block:26px 22px;gap:20px}
  .hero__head{grid-template-columns:1fr;gap:16px;align-items:start}
  .hero h1{max-width:20ch}
  .standfirst{max-width:62ch}
  .transcript__list{grid-template-columns:1fr}

  .sec-head{grid-template-columns:1fr;gap:10px;align-items:start}
  .sec-head .h2,.sec-head .lead{max-width:60ch}

  .cols--2{grid-template-columns:1fr}


  .foot__grid{grid-template-columns:1fr 1fr 1fr;gap:26px}
  .foot__brand{grid-column:1 / -1}
  .foot__blurb{max-width:60ch}
  .privacy-layout{grid-template-columns:1fr;gap:36px}
  .privacy-nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;border-bottom:1px solid var(--rule);padding-bottom:28px}
  .privacy-nav .eyebrow{grid-column:1 / -1}
  .guide-hero__inner{grid-template-columns:1fr;gap:28px;padding-block:48px 42px}
  .guide-hero h1{max-width:20ch}
  .guide-layout{grid-template-columns:1fr;gap:36px;padding-block:42px 64px}
  .guide-nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;border-bottom:1px solid var(--rule);padding-bottom:28px}
  .guide-nav .eyebrow{grid-column:1 / -1}
}

/* --- <=767px: single column everywhere ------------------------------- */
@media (max-width:767px){
  :root{--gutter:22px;--band-y:34px;--gap-lg:26px}

  .hair-grid--3,.hair-grid--2{grid-template-columns:1fr}
  /* The film runs edge to edge on phones: every pixel of width matters. */
  .film__frame{margin-inline:calc(var(--gutter) * -1);border-inline:0}
  .film__bar{margin-inline:calc(var(--gutter) * -1);border-inline:0}
  .film__btn{padding:0 13px}
  .film__btn-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .film__btn--primary{flex:1 1 auto;justify-content:center}
  .film__time{display:none}
  /* On a phone the control bar sits right under the picture, so the
     overlay shrinks to a play square and the extra sound button goes. */
  .film__unmute{display:none !important}
  .film__start{right:10px;top:10px;padding:0;gap:0;box-shadow:none}
  .film__start-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .film__start-icon{width:44px;height:44px}
  .film__start-icon::after{left:17px;top:13px;border-width:9px 0 9px 14px}

  .speclist--2col{grid-template-columns:1fr}

  .foot__grid{grid-template-columns:1fr 1fr;gap:24px}
  .foot__legal{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:26px}
  .privacy-hero__inner{padding-block:48px 42px}
  .privacy-standfirst{font-size:16px}
  .privacy-layout{padding-block:42px 64px}
  .guide-standfirst{font-size:16px}
  .guide-copy{gap:40px}
  .ai-grid{grid-template-columns:1fr}

  /* How-it-works steps -> stack vertically, arrows point down between them. */
  .how-steps{flex-direction:column;border-left:1px solid var(--rule-alt);border-right:1px solid var(--rule-alt)}
  .how-step{border-left:0;border-top:1px solid var(--rule-alt)}
  .how-step:first-child{border-top:0}
  .how-step__arrow{
    top:auto;right:auto;left:50%;bottom:-12px;
    transform:translateX(-50%) rotate(90deg);
  }
}

/* --- <=520px --------------------------------------------------------- */
@media (max-width:520px){
  :root{--gutter:18px}
  .topbar__bar{gap:12px}
  .wordmark{font-size:16px}
  .btn--small{padding:8px 12px;font-size:12px}
  .hero__cta-row .btn{flex:1 1 100%}
  .foot__grid{grid-template-columns:1fr;gap:22px}
  .privacy-nav{grid-template-columns:1fr}
  .privacy-nav .eyebrow{grid-column:auto}
  .guide-nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 20px;padding-bottom:16px}
  .guide-nav .eyebrow{display:none}
  .guide-step{grid-template-columns:36px minmax(0,1fr);gap:10px}
  .guide-step h3{font-size:17px}
  .guide-step p{font-size:14px}
  .instruction-actions{align-items:flex-start;flex-direction:column;gap:8px}
}

/* --- <=360px: keep the lockup and the Store button on one row --------- */
@media (max-width:360px){
  :root{--gutter:14px}
  .lockup{gap:8px}
  .wordmark{font-size:15px}
  .topbar__bar .rp-mark--24{width:20px;height:20px;--rp-w:2px;--rp-h:12px}
  .btn--small{padding:7px 9px;font-size:11px}
}

/* ---------- 17 - Print ------------------------------------------------ */
@media print{
  /* Paper is paper. Reset to the light palette whatever the screen was. */
  :root{
    color-scheme:light;
    --paper:#FFFFFF;--paper-alt:#FFFFFF;--panel:#FFFFFF;--ink:#000000;
    --body:#000000;--muted:#333333;--muted-2:#555555;
    --rule:#BBBBBB;--rule-alt:#BBBBBB;--rule-loud:#BBBBBB;--border-strong:#999999;
    --on-loud:#000000;--on-loud-strong:#000000;--on-loud-muted:#333333;
    --signal:#000000;--signal-on-loud:#000000;--signal-fill:#FFFFFF;--on-signal:#000000;
  }
  .band--ink,.foot{
    background:#fff;color:#000;
  }
  .foot__blurb,.foot__legal,.foot__col a,.foot__pending{color:#000}
  .film__bar,.film__start{display:none !important}
  .topbar{position:static}
  .btn,.navdrop,.skip-link{display:none}
  html{scroll-behavior:auto}
}