/* Haight Street Compute Market, landing page.
   Built from the creative director's Figma frame "005" (file 9wVTqoHlqjNjpubmA6TrO0, node 67:1726, 1440) and the
   designer's companion frames: "005 · Mobile 375" 86:11, "005 · Coupon states (desktop)" 87:2, "005 · Step 2" 88:2 and
   88:209, "005 · Footer (desktop + mobile)" 90:2, "005 · Film" 90:67. Values below are read from their design context.
   The companion frames use stand-in fonts (map in 86:2); the real faces per role are wired below. */

/* TOKENS: from Figma frame 005 and its companion frames */
:root {
  /* colour */
  --paper: #f8f7f5;
  --ink: #161514;
  --muted: #6e685e;
  --box: #f6f2e8;
  --button: #f4f2ee;
  --shade: rgba(0, 0, 0, 0.25);
  --error: #a3271f;
  --open-note: #ffdb54;

  /* families, per role as read from 005 */
  --font-serif: "Cheltenhm BT", Georgia, "Times New Roman", serif;
  --font-sans: "News Gothic SB", "News Gothic MT", "Franklin Gothic Book", Arial, sans-serif;
  --font-pixel: "pix Chicago", "VT323", "Courier New", monospace;
  --font-field: "EB Garamond", Garamond, Georgia, serif;
  --font-small: "Libre Franklin", "Franklin Gothic Book", Arial, sans-serif;
  --font-host: "News Cycle", "News Gothic SB", Arial, sans-serif;

  /* page: 1248 content at 1440 (005 sits at x 86; the build centres it, x 96) */
  --gutter: clamp(20px, 6vw, 96px);
  --content: min(1248px, calc(100vw - 2 * var(--gutter)));
  --pad-top: 65px;

  /* hed 128.582 at a 1248 measure (0.10303), tracking -6.4291px = -0.05em, leading normal */
  --hed-size: min(128.582px, calc(var(--content) * 0.10303));
  --hed-leading: 1.2;
  /* dek 100.481 at 1248 (0.080514), leading 0.87, tracking -4.0192px = -0.04em */
  --dek-size: min(100.481px, calc(var(--content) * 0.080514));
  /* body 20.293 / 24.351, indent 25.3656; fine print 20 / 22.322 */
  --body-size: 20.293px;
  --body-leading: 24.351px;
  --body-indent: 25.3656px;
  --body-gap: 36.527px;
  --fine-size: 20px;
  --fine-leading-n: 22.322; /* unitless twin, so the HSC sign-off can size itself to 3 fine-print lines */
  --fine-leading: calc(var(--fine-leading-n) * 1px);
  --fine-gap: 30.439px;

  /* vertical rhythm, from 005's y positions */
  --gap-hed-film: 59px;
  --gap-film-dek: 71px;
  --gap-dek-body: 71px;
  --gap-body-reply: 81px;
  --gap-reply-footer: 123px;

  /* film */
  /* The render carries its own film gate and black bars (Lashan 2 Oct 20:38, "Keep your gate"), so the frame is a plain
     black 16:9 box with no rounding of its own. */
  --film-ratio: 16 / 9;
  --film-radius: 0px;
  --play-size: 84px;

  /* coupon */
  --coupon-width: 824px;
  --coupon-pad-y: 32px;
  --coupon-pad-x: 32px;
  --coupon-gap: 18px;
  --coupon-head: 46px;
  --coupon-head-leading: 46px;
  --lede-size: 20.29px;
  --lede-leading: 24.35px;
  --lockup-width: 294px;

  /* footer */
  --faq-columns: 3;
  --footer-pad-top: 48px;
  --footer-pad-bottom: 65px;
}

/* Fonts.
   Fonts supplied by the creative director (~/Downloads/chet, ~/Downloads/news), 1 Oct 2026. Confirm the web licence before launch (launch-sheet step).
   Every desktop-licensed face tries the copy installed on this Mac first (local), then a file in assets/fonts/ that is not there yet:
     Cheltenhm BT Roman and Italic: CheltenhamBT-Roman.woff and CheltenhamBT-Italic.woff, generated by Lashan from his Bitstream files (2 Oct). Confirm the web licence before launch.
     News Gothic SB Roman and Bold: NewsGothicSB-Roman.woff2 and NewsGothicSB-Bold.woff2 from the ~/Downloads/news kit (2 Oct).
     pix Chicago: pixChicago.woff, supplied by Lashan (2 Oct); licence to confirm.
   Until those files exist, visitors without the desktop fonts see the fallbacks in each stack.
   EB Garamond, Libre Franklin, News Cycle and VT323 are SIL OFL 1.1, self-hosted, licences beside them. */
/* block, not swap, for the faces that set the page (2 Oct 21:20): text waits briefly for the preloaded font instead of
   flashing Georgia first. Browsers cap the wait at about 3 s, then fall back. */
@font-face { font-family: "Cheltenhm BT"; font-style: normal; font-weight: 400; font-display: block; src: local("CheltenhamBT-Roman"), local("Cheltenhm BT Roman"), url("assets/fonts/CheltenhamBT-Roman.woff") format("woff"); }
@font-face { font-family: "Cheltenhm BT"; font-style: italic; font-weight: 400; font-display: block; src: local("CheltenhamBT-Italic"), local("Cheltenhm BT Italic"), url("assets/fonts/CheltenhamBT-Italic.woff") format("woff"); }
@font-face { font-family: "News Gothic SB"; font-style: normal; font-weight: 400; font-display: block; src: local("NewsGothicSB-Roman"), url("assets/fonts/NewsGothicSB-Roman.woff2") format("woff2"); }
@font-face { font-family: "News Gothic SB"; font-style: normal; font-weight: 700; font-display: block; src: local("NewsGothicSB-Bold"), url("assets/fonts/NewsGothicSB-Bold.woff2") format("woff2"); }
@font-face { font-family: "pix Chicago"; font-style: normal; font-weight: 400; font-display: block; src: local("pixChicago"), local("pix Chicago"), url("assets/fonts/pixChicago.woff") format("woff"); }
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: block; src: url("assets/fonts/vt323.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: block; src: url("assets/fonts/eb-garamond.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400 600; font-display: block; src: url("assets/fonts/libre-franklin.woff2") format("woff2"); }
@font-face { font-family: "News Cycle"; font-style: normal; font-weight: 700; font-display: block; src: url("assets/fonts/news-cycle-700.woff2") format("woff2"); }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { display: block; max-width: 100%; }
h1, h2, h3, p, figure, fieldset, legend, dl, dd { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.reply:focus, .receipt-head:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* Page */
.page { width: var(--content); margin: 0 auto; padding-top: var(--pad-top); }

/* Hed */
/* Hed and dek are centered at every width (2 Oct, Lashan 18:23). */
.hed { font-weight: 400; font-size: var(--hed-size); line-height: var(--hed-leading); letter-spacing: -0.08em; white-space: nowrap; text-align: center; }
.hed-nobreak { white-space: nowrap; } /* keeps "Clusterf—s." whole: phones break after "GPU", never at the dash */

/* Film: still with 25% shade and a play button; plays in the same rounded frame (90:67) */
.film { margin-top: var(--gap-hed-film); position: relative; }
.film-frame { position: relative; aspect-ratio: var(--film-ratio); border-radius: var(--film-radius); overflow: hidden; background: #000; isolation: isolate; }
.film-poster, .film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* The film: a plain <video> with no controls; our poster shows through until the first frame. While it plays, a clear
   layer over it pauses on click; paused or ended, the shade and our round play button return. CC toggles captions. */
.film-video { background: transparent; }
.film-video::cue { font-family: "News Gothic SB", Arial, sans-serif; background: rgba(22, 21, 20, 0.75); color: #fff; }
.film-hit { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: none; }
.film.is-playing .film-hit { display: block; }
.film-cc {
  position: absolute; right: 16px; bottom: 16px; padding: 4px 7px; border: 1.5px solid #fff; border-radius: 2px; background: rgba(22, 21, 20, 0.5);
  color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.12em; cursor: pointer;
}
.film-cc[aria-pressed="false"] { background: transparent; opacity: 0.7; text-decoration: line-through; }
.film-shade { position: absolute; inset: 0; background: var(--shade); pointer-events: none; }
.film-play { position: absolute; left: 50%; top: 50%; width: var(--play-size); height: var(--play-size); transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.film-play svg { width: 100%; height: 100%; }
.film-play:disabled { cursor: default; }
.film-caption {
  position: absolute; left: 50%; top: calc(50% + var(--play-size) / 2 + 12px); transform: translateX(-50%);
  font-family: var(--font-sans); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; white-space: nowrap; pointer-events: none;
}
.film.is-playing .film-shade, .film.is-playing .film-play, .film.is-started .film-caption { display: none; }
/* Restart (Lashan 2 Oct 21:15): a small button under the play button, only while the film is paused part way or has ended. */
.film-restart {
  position: absolute; left: 50%; top: calc(50% + var(--play-size) / 2 + 12px); transform: translateX(-50%); display: none;
  padding: 5px 9px; border: 1.5px solid #fff; border-radius: 2px; background: rgba(22, 21, 20, 0.5);
  color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.film.is-paused .film-restart { display: block; }

/* Dek */
.dek { margin-top: var(--gap-film-dek); font-size: var(--dek-size); line-height: 0.87; letter-spacing: -0.06em; max-width: 1240px; margin-left: auto; margin-right: auto; text-align: center; }

/* Body: one flow of indented paragraphs in three balanced columns (about 380 each at 1440, 005's 36.527 gutter; Lashan,
   2 Oct 18:27, "Switch to 3"), like print: the text runs from the foot of one column to the top of the next, splitting a
   paragraph where it has to. The block is centered under the centered hed and dek. Between the phone breakpoint and
   1120px three columns would be narrower than about 300px, so it drops to two there; phones get one.
   The two .col wrappers in the HTML step out of the layout (display: contents), so every paragraph joins the one flow.
   The fine print is the last item and is never split. */
.body {
  margin-top: var(--gap-dek-body);
  max-width: calc(3 * 380px + 2 * var(--body-gap));
  margin-left: auto; margin-right: auto;
  column-count: 3; column-gap: var(--body-gap); column-fill: balance;
  orphans: 2; widows: 2;
}
.body .col { display: contents; }
.col p { text-indent: var(--body-indent); }
.col i { font-style: italic; }
.col .fine-print { text-indent: 0; margin-top: var(--fine-gap); font-family: var(--font-sans); font-size: var(--fine-size); line-height: var(--fine-leading); break-inside: avoid; }

/* HSC sign-off (9 Oct): the host lockup floats in the fine print at the foot of the last column, bottom right, and the fine
   print wraps around it, like the logo at the foot of an 80s magazine ad (Lashan 20:38). Same lockup and scale as the host column had. */
.body-sign { --sign-pad-y: 4; --hsc-scale: calc((3 * var(--fine-leading-n) - 2 - var(--sign-pad-y)) / 52); /* the box is 3 fine-print lines less 2px (so it never clips a fourth line, Lashan 9 Oct 20:46); the lockup inside is 52 x scale tall, inside the padding (21:43; no bottom padding, 21:45) */ float: right; clear: right; break-inside: avoid; box-sizing: content-box; padding: calc(var(--sign-pad-y) * 1px) 0 0 12px; display: flex; align-items: flex-start; gap: calc(12.5px * var(--hsc-scale)); margin: 0; text-indent: 0; }
/* A zero-width float above the lockup pushes it down to the fine print's third-to-last line (app.js sets its height), so the
   lines above stay full width and only the last 3 wrap beside the lockup. Without JS the lockup sits top right. */
.sign-spacer { float: right; width: 0; height: var(--sign-offset, 0px); }
.body-sign .lockup-name { display: block; text-indent: 0; }

/* Reply row: coupon (824) and sponsor lockup (294), 24 apart */
.reply-row { margin-top: var(--gap-body-reply); display: grid; grid-template-columns: minmax(0, var(--coupon-width)) var(--lockup-width); column-gap: 24px; align-items: start; }
.reply { position: relative; display: flex; flex-direction: column; gap: 24px; }
.scissors { position: absolute; left: 34px; top: -37.4px; width: 55.025px; height: 37.407px; }
.scissors-row { display: none; width: 77.024px; height: 37.407px; }

/* Coupon */
.coupon { border: 2px dashed var(--ink); padding: var(--coupon-pad-y) var(--coupon-pad-x); display: flex; flex-direction: column; gap: var(--coupon-gap); }
.coupon-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.step-mark { margin-bottom: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; }
#step2-head:focus { outline: none; }
.coupon-head h2 { font-weight: 400; font-size: var(--coupon-head); line-height: var(--coupon-head-leading); letter-spacing: -0.02em; }
/* Date and venue on the form (Lashan 6 Oct): the date in Cheltenham like the body copy, the venue in News Gothic like the fine
   print, set a size smaller, with a little space under the date. Right of the heading; under it on phones. */
.coupon-head { flex-wrap: wrap; }
.coupon-when { text-align: right; }
.when-date { display: block; margin-bottom: 6px; font-family: var(--font-serif); font-size: var(--body-size); line-height: var(--body-leading); }
.when-place { display: block; font-family: var(--font-sans); font-size: max(13px, calc(var(--fine-size) * 0.8)); line-height: max(16px, calc(var(--fine-leading) * 0.8)); }
@media (max-width: 599px) { .coupon-when { text-align: left; } }
.coupon-lede { font-size: var(--lede-size); line-height: var(--lede-leading); }
/* Reply-by line (9 Oct): the first review round's cutoff, under the coupon head, between dashed rules like the coupon's own edge.
   html.after-cutoff (set in the head from the clock) shows the rolling-review wording instead. */
.coupon-deadline { margin: 18px 0 4px; padding: 10px 0; border-top: 1px dashed var(--ink); border-bottom: 1px dashed var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.35; }
.coupon-deadline strong { font-weight: 700; }
html.after-cutoff .if-before-cutoff, html:not(.after-cutoff) .if-after-cutoff { display: none; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* I'm here to and rough deal size side by side in step 1 (13 Oct); fieldsets need min-width 0 to shrink inside the grid. */
.group-row { align-items: start; }
.group-row > .group { min-width: 0; }
/* Four rows each side: the roles one per line, the seven deal sizes in two columns. */
.group-row .choices { display: grid; grid-template-columns: 1fr; gap: 7px 18px; }
.group-row [data-field="deal_size"] .choices { grid-template-columns: repeat(2, max-content); }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.field input {
  font-family: var(--font-field); font-size: 17px; line-height: normal; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0;
  padding: 6px 0 8px; width: 100%; caret-color: var(--ink);
}
.field input::placeholder { color: var(--muted); opacity: 1; }
/* Focus (87:31): the underline thickens to 2.5 */
.field input:focus, .field input:focus-visible { outline: none; border-bottom-width: 2.5px; padding-bottom: 7px; }
/* Error (87:136): red underline, red message under the field (Libre Franklin 12) */
.has-error input:not([type="checkbox"]):not([type="radio"]) { border-bottom-color: var(--error); }
.field-error { font-family: var(--font-small); font-size: 12px; line-height: normal; color: var(--error); }

.group { display: block; }
.group legend { display: flex; flex-wrap: wrap; gap: 6px 32px; align-items: baseline; margin-bottom: 10px; width: 100%; }
.group .field-error { margin-top: 6px; }
.referrals .field-row + .field-row { margin-top: 12px; }
.group-label { font-family: var(--font-sans); font-weight: 400; font-size: 11px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.group-hint { font-family: var(--font-small); font-size: 10px; line-height: normal; color: var(--muted); }
.choices { display: flex; flex-wrap: wrap; gap: 7px 18px; }
/* The "Other" text line under a choices row: the same underlined single-line field, a little space above. */
.other-field { margin-top: 10px; }
.choice { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-field); font-size: 16px; line-height: 21px; cursor: pointer; }
.choice input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; flex: none; background: var(--box); border: 1.5px solid var(--ink); border-radius: 0; }
.choice input:checked { background: var(--ink); }
.choice.radio input { border-radius: 50%; background: transparent; }
.choice.radio input:checked { background: var(--ink); box-shadow: inset 0 0 0 2.5px var(--paper); }
.choice input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.has-error .choice input { border-color: var(--error); }

.consent-block { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.consent { align-items: flex-start; gap: 8px; font-family: var(--font-sans); font-size: 13px; line-height: 16px; }
.consent input { margin-top: 1px; }
.consent a { text-decoration: underline; }
.referrals { gap: 12px; }
.referrals .field-row { gap: 24px; }
.referrals .referral-help { margin-top: 8px; }

/* Mac button (67:1776): pressed and Sending… states per 87:311 */
.coupon-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.mac-button {
  font-family: var(--font-pixel); font-size: 12px; line-height: normal; color: var(--ink);
  background: var(--button); border: 1.5px solid var(--ink); border-radius: 0; padding: 14px 26px;
  box-shadow: 3px 3px 0 #000; cursor: pointer; white-space: nowrap;
}
.mac-button:active, .mac-button[aria-busy="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.mac-button[aria-busy="true"] { cursor: progress; }
.mac-button:focus-visible { outline-offset: 5px; }
.skip { font-family: var(--font-field); font-size: 17px; line-height: normal; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.form-status { font-family: var(--font-small); font-size: 12px; line-height: 1.4; color: var(--muted); }
.form-status.is-error { color: var(--error); }
.form-status:empty { display: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sent (receipt), 87:347 */
.receipt-lines { border-top: 1px dashed var(--ink); border-bottom: 1px dashed var(--ink); padding: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.receipt-lines > div { display: flex; gap: 16px; align-items: baseline; }
.receipt-lines dt { flex: none; width: 120px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.receipt-lines dd { font-family: var(--font-field); font-size: 17px; line-height: normal; min-width: 0; overflow-wrap: anywhere; }
.referral { display: flex; flex-direction: column; gap: 18px; }
.referral-card { border-top: 1px dashed var(--ink); padding-top: 24px; }
.referral-card[hidden] { display: none; }
.referral-row { display: flex; gap: 24px; align-items: flex-end; }
.referral-row .field { flex: 1; }
.referral-help { font-family: var(--font-small); font-size: 12px; line-height: normal; color: var(--muted); }
.coupon-step-2 { gap: 22px; }
.step2-actions { padding-top: 6px; }

/* Host lockup (77:2126) */
.lockup { display: flex; flex-direction: column; gap: 16px; }
.lockup-label { font-family: var(--font-small); font-weight: 500; font-size: 10px; line-height: normal; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
/* 7 Oct: the HSC lockup is centred as a whole over the 219.559px column. The two partner marks below it are laid out
   differently, and should stay that way: Exascale's and SF Compute's ICONS are centre-aligned with each other on one vertical
   axis (--icon-axis, the centre of the wider of the two, SF Compute's, whose ink is 36.75px wide; Exascale's is 30.75px and is
   offset to centre on it), and their wordmarks end on the column's right edge.
   HSC keeps Lashan's 2 Oct lockup: "Haight St." over "Compute", the sign running from just above the cap line of the first
   line to just below the baseline of the second (News Gothic SB: cap 0.667em, ascent 0.79em, descent 0.21em, measured).
   Mark, gap and type all scale together by --hsc-scale, so the proportions hold. At 0.769 the sign was 36.9px tall, as tall
   as SF Compute's icon (Exascale's is 31px); 7 Oct it went up 20% in both directions to 0.923, so the sign is 44.3px tall. */
.lockup { --logo-gap: 12px; --icon-axis: 19.44px; --hsc-scale: 0.923; } /* Lashan 6 Oct: "spacing between the logos ... a little tight": extra space above each partner mark, on top of the 16px stack gap */
.lockup-host { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; width: 219.559px; gap: calc(12.5px * var(--hsc-scale)); }
.lockup-mark { flex: none; width: calc(37.4px * var(--hsc-scale)); height: calc(48px * var(--hsc-scale)); object-fit: contain; }
.lockup-name { font-family: var(--font-sans); font-weight: 400; font-size: calc(28px * var(--hsc-scale)); line-height: calc(26px * var(--hsc-scale)); letter-spacing: -0.005em; white-space: nowrap; }
.lockup-name span { display: block; }
.lockup-exascale { position: relative; width: 219.559px; height: 31px; margin-top: var(--logo-gap); }
.exascale-icon { position: absolute; left: calc(var(--icon-axis) - 15.38px); /* centre-aligned with SF Compute's icon on the shared axis; keep it so */ top: 0; width: 30.716px; height: 31px; }
.exascale-word { position: absolute; left: 48.06px; top: 2.84px; width: 171.495px; height: 25.312px; }
.lockup-sfcompute { margin-top: var(--logo-gap); line-height: 0; }
/* Exascale's width; 440:74. The file has 1.06px of blank space after the wordmark, so it moves right by that to end on the edge.
   Its icon then sits on --icon-axis, centre-aligned with Exascale's; keep it so. */
.lockup-sfcompute img { display: block; width: 219.559px; height: 36.926px; margin-left: 1.06px; }
/* New York Token Exchange by TrustedRouter (9 Oct): one lockup, as wide as the column, like Exascale and SF Compute above it. */
.lockup-partner { margin-top: var(--logo-gap); line-height: 0; }
.lockup-partner img { display: block; width: auto; height: 28px; }
.lockup-partner-wide img { width: 219.559px; height: auto; }
/* The legal line under the form (moved from under the host logos, 7 Oct). */
.reply-legal { font-family: var(--font-small); font-size: 10px; line-height: normal; color: var(--muted); margin: 0; }

/* Footer (90:3 desktop, 90:32 mobile) */
.footer { margin-top: var(--gap-reply-footer); padding: var(--footer-pad-top) 0 var(--footer-pad-bottom); border-top: 0; display: flex; flex-direction: column; gap: 32px; }
.footer::before { content: ""; display: block; height: 1px; background: var(--ink); }
.footer-head { font-family: var(--font-sans); font-weight: 700; font-size: 11px; line-height: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.faq { display: grid; grid-template-columns: repeat(var(--faq-columns), minmax(0, 1fr)); gap: 32px 36.5px; }
.faq-item { display: flex; flex-direction: column; gap: 6px; }
.faq h3 { font-weight: 400; font-size: 18px; line-height: 22px; }
.faq p { font-family: var(--font-sans); font-size: 14px; line-height: 17.5px; }
.footer-legal { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 16px; font-family: var(--font-small); font-size: 12px; line-height: normal; }
.footer-legal a { text-decoration: underline; }
.legal-links { display: flex; align-items: center; gap: 12px; }
.copyright { font-size: 10px; color: var(--muted); }
.privacy-choices { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Cookie notice (consent.js, Babur's legal update 3 Oct): pinned to the bottom of the window until the visitor chooses. */
.consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; margin: 0 auto; max-width: 720px;
  display: flex; align-items: center; gap: 16px 24px; padding: 16px 20px;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 #000;
}
.consent-banner[hidden] { display: none; }
.consent-text { flex: 1; font-family: var(--font-sans); font-size: 14px; line-height: 18px; }
.consent-text a { text-decoration: underline; }
.consent-actions { display: flex; gap: 16px; flex-shrink: 0; }
@media (max-width: 600px) {
  .consent-banner { flex-direction: column; align-items: flex-start; }
}

/* OPEN notes, as the designer draws them (yellow tag). Resolve the item, delete the data-open attribute, the note goes. */
/* Hidden on the live domain (html.live, set in index.html), so visitors never see them. */
html.live [data-open]::after { display: none; }
[data-open]::after {
  content: "OPEN · " attr(data-open);
  display: inline-block;
  padding: 3px 6px;
  border-radius: 2px;
  background: var(--open-note);
  color: var(--ink);
  font-family: var(--font-small);
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  line-height: normal;
  letter-spacing: 0;
  text-transform: none;
  text-indent: 0;
  white-space: normal;
}
.lockup-host[data-open]::after { flex-basis: 100%; }

/* Narrower than the 1440 frame: stack the reply row */
@media (max-width: 63.99em) {
  .reply-row { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  :root { --faq-columns: 2; }
}

/* Below 1120px three body columns would fall under about 300px wide: two columns instead */
@media (max-width: 69.99em) {
  .body { column-count: 2; }
}

/* Phone: "005 · Mobile 375" (86:11), step 2 mobile (88:209), footer mobile (90:32) */
@media (max-width: 47.99em) {
  :root {
    --gutter: 20px;
    --pad-top: 28px;
    --hed-size: 52px;
    --hed-leading: 1;
    --dek-size: 40px;
    --body-size: 17px;
    --body-leading: 21px;
    --body-indent: 21px;
    --fine-size: 15px;
    --fine-leading-n: 17.5;
    --fine-leading: calc(var(--fine-leading-n) * 1px);
    --fine-gap: 18px;
    --gap-hed-film: 28px;
    --gap-film-dek: 28px;
    --gap-dek-body: 28px;
    --gap-body-reply: 28px;
    --gap-reply-footer: 28px;
    --film-radius: 0px;
    --play-size: 52px;
    --coupon-pad-y: 24px;
    --coupon-pad-x: 20px;
    --coupon-head: 30px;
    --coupon-head-leading: 32px;
    --lede-size: 20px;
    --lede-leading: 24px;
    --faq-columns: 1;
    --footer-pad-top: 32px;
    --footer-pad-bottom: 40px;
  }
  .hed { white-space: normal; }
  .body { column-count: 1; }
  .scissors { display: none; }
  .scissors-row { display: block; margin-bottom: -24px; }
  .reply { gap: 24px; }
  .reply-row { row-gap: 28px; }
  .field-row, .referral-row { grid-template-columns: 1fr; display: grid; gap: 18px; }
  .referral-row { align-items: stretch; }
  .referral-row .mac-button { justify-self: start; }
  .lockup-host[data-open]::after { flex-basis: auto; }
  .faq { gap: 24px; }
  .footer { gap: 24px; }
  .footer-legal { flex-direction: column; align-items: flex-start; padding-top: 8px; }
}

/* Add to calendar under the receipt (Lashan 15 Oct 08:29). */
.receipt-cal { margin-top: 12px; font-family: var(--font-sans); font-size: 13px; }
.receipt-cal a { color: inherit; }