/* No-JS: /api/subscribe redirects to /#joined or /#join-error. */
.nojs-error { display: none; }
#join-error:target { display: block; }
#joined:target { display: block; }
.signup:has(#joined:target) .signup-form { display: none; }

/* Values below come from the approved Paper boards
   “V3 FINAL APPROVED — Desktop 1440” and “— Mobile 390”. */

/* Section titles (Fraunces 900) */
.section-title {
  font: 900 56px/62px var(--font-display);
  letter-spacing: -0.025em;
}

/* ---------- Hero ---------- */
.hero {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 80px; padding-bottom: 112px;
  text-align: center;
}
.hero-title {
  max-width: 1040px;
  font: 900 76px/80px var(--font-display);
  letter-spacing: -0.03em;
}
.hero-sub {
  max-width: 720px; margin-top: 28px;
  color: #333333; font-size: 21px; line-height: 32px;
}

/* Video: poster with play button; label and chips sit over the poster.
   --label-top places the label under the play button; the scrim reaches its
   full strength just above it, so the white label never depends on the photo. */
.video { --label-top: calc(50% + 50px); position: relative; width: 100%; margin-top: 48px; }
.video-poster {
  position: relative; display: block; width: 100%;
  aspect-ratio: 1248 / 600;
  padding: 0; border: 0; background: #1c1c1c; cursor: pointer;
}
.video-poster img { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; left: 50%; top: calc(50% - 82px);
  z-index: 2;
  width: 112px; height: 112px; margin-left: -56px;
  background: var(--stet-red);
}
.video-play::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 36px; height: 42px; margin: -21px 0 0 -18px;
  background: var(--paper);
  clip-path: polygon(7.14% 3.13%, 96.43% 50%, 7.14% 96.88%);
}
.video-poster:hover .video-play { background: #b81f18; }
.video-meta {
  position: absolute; inset: 0 0 auto 0; z-index: 1;
  aspect-ratio: 1248 / 600;
  pointer-events: none;
  /* Ink scrim: clear at the top, 80% ink from just above the label down.
     Worst case (pure white poster) leaves #414141 behind the label: 10.2:1. */
  background: linear-gradient(
    to bottom,
    rgb(17 17 17 / 0) 30%,
    rgb(17 17 17 / 0.8) calc(var(--label-top) - 4px),
    rgb(17 17 17 / 0.8) 100%
  );
}
.video-label {
  position: absolute; left: 0; right: 0; top: var(--label-top);
  color: var(--paper);
  font: italic 400 24px/32px var(--font-display);
}
.video-chips {
  position: absolute; right: 32px; bottom: 28px;
  display: flex; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.video-chips li {
  padding: 4px 8px; background: var(--ink); color: var(--paper);
  font: 600 13px/18px var(--font-body);
}

/* Transcript (not drawn in Paper; styled to match the form note and FAQ). */
.transcript { margin-top: 16px; text-align: center; }
.transcript summary {
  display: inline-block; cursor: pointer;
  font: 600 14px/20px var(--font-body);
  text-decoration: underline 1px; text-underline-position: from-font;
  list-style: none;
}
.transcript summary::-webkit-details-marker { display: none; }
.transcript-body {
  max-width: 720px; margin: 16px auto 0;
  display: flex; flex-direction: column; gap: 12px;
  color: #444444; font-size: 17px; line-height: 26px; text-align: left;
}

/* Sign-up form */
.signup { width: 100%; max-width: 600px; margin-top: 40px; text-align: left; }
/* DOM order is the reading and focus order: label, input, errors, opt-in,
   button, note. On desktop a grid lifts the button beside the input (row 2)
   without changing that order; everything else spans both columns. */
.signup-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.signup-form > * { grid-column: 1 / -1; }
.signup-form > .field-label { grid-row: 1; }
.signup-form > .text-input { grid-row: 2; grid-column: 1; }
.signup-form > .button { grid-row: 2; grid-column: 2; }
.signup-form[hidden] { display: none; }
.signup-note {
  justify-self: center; text-align: center;
  color: var(--pencil); font-size: 14px; line-height: 21px;
}
.signup-success {
  padding: 18px;
  background: var(--offcut); border-left: 3px solid var(--stet-red);
  color: #444444; font-size: 15px; line-height: 22px;
}
.signup-success strong {
  display: block; margin-bottom: 6px;
  color: var(--ink); font: 800 22px/28px var(--font-display);
}
.signup-success:focus { outline: none; }
.signup-success:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- Problem → fix ---------- */
.problem-fix {
  display: flex; flex-direction: column; align-items: center;
  padding-block: 112px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.problem-fix .section-title { max-width: 780px; }
.quote { margin-top: 20px; }
.quote blockquote p {
  color: var(--stet-red);
  font: italic 400 26px/34px var(--font-display);
}
.quote figcaption { margin-top: 20px; color: var(--pencil); font-size: 14px; line-height: 20px; }

.panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  width: 100%; margin-top: 56px; text-align: left;
}
.panel { display: flex; flex-direction: column; gap: 24px; padding: 40px; }
.panel .caps-label { display: flex; align-items: center; gap: 10px; }
.panel .caps-label::before { content: ''; width: 10px; height: 10px; flex-shrink: 0; background: currentColor; }
.panel--problem { background: var(--offcut); }
.panel--problem ul {
  display: flex; flex-direction: column; gap: 12px; flex-grow: 1;
  margin: 0; padding: 0; list-style: none;
}
.panel--problem li {
  display: flex; align-items: center; gap: 16px; flex-grow: 1;
  padding: 22px 24px;
  background: var(--paper); color: var(--pencil);
  font: 600 22px/30px var(--font-display);
}
.panel--problem li::before {
  content: '×'; content: '×' / '';
  width: 16px; flex-shrink: 0;
  font: 600 16px/20px var(--font-body);
}
.panel--fix { border: 1.5px solid var(--ink); }
.panel--fix .caps-label { color: var(--ink); }
.panel--fix .caps-label::before { background: var(--stet-red); }
.panel-title {
  font: 900 34px/40px var(--font-display);
  letter-spacing: -0.02em;
}
.steps { margin: 0; padding: 0; list-style: none; }
.steps li {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 18px; row-gap: 4px;
  padding-block: 18px;
  border-top: 1px solid var(--rule);
}
.steps h4 { font: 800 22px/28px var(--font-display); }
.steps p { grid-column: 2; color: #444444; font-size: 17px; line-height: 26px; }
.mark { grid-row: 1 / span 2; width: 22px; height: 22px; }
.mark--square { background: var(--ink); }
.mark--circle { background: var(--stet-red); clip-path: circle(50%); }
.mark--triangle { background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------- Rules (ink band) ---------- */
.rules {
  padding-block: 112px;
  background: var(--ink); color: var(--paper);
  text-align: center;
}
.rules .caps-label { color: #a8a8a8; }
.rules .section-title { margin-top: 14px; }
.rules-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px;
  margin: 64px 0 0; padding: 0; list-style: none; text-align: left;
}
.rules-list li { display: flex; flex-direction: column; gap: 14px; }
.rule-num {
  color: var(--stet-red);
  font: 300 120px/110px var(--font-display);
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.04em;
}
.rules-list h3 { font: 800 24px/30px var(--font-display); }
.rules-list p { color: #d4d4d4; font-size: 18px; line-height: 28px; }

/* ---------- Outcome ---------- */
.outcome {
  display: flex; flex-direction: column; align-items: center;
  padding-block: 112px; text-align: center;
}
.outcome .section-title,
.closing .section-title {
  font-size: 64px; line-height: 68px; letter-spacing: -0.03em;
}
.outcome .section-title { max-width: 1180px; margin-top: 14px; }
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  width: 100%; margin: 56px 0 0; padding: 0; list-style: none;
}
.card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 20px; background: var(--offcut);
}
.card h3 { font: 800 22px/30px var(--font-display); }
.card p { color: #444444; font-size: 17px; line-height: 26px; }

/* ---------- FAQ ---------- */
.faq {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 104px; padding-bottom: 112px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.faq .section-title { margin-top: 14px; }
.faq-item {
  width: 100%; max-width: 960px;
  padding-block: 26px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.faq-item:first-of-type { margin-top: 48px; border-top: 1px solid var(--ink); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  cursor: pointer; list-style: none;
  font: 800 23px/30px var(--font-display);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; width: 24px; height: 24px; flex-shrink: 0;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 18px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 18px no-repeat;
}
.faq-item[open] summary::after {
  background: linear-gradient(var(--stet-red), var(--stet-red)) center / 18px 2px no-repeat;
}
.faq-item p {
  max-width: 620px; margin-top: 12px;
  color: #444444; font-size: 18px; line-height: 28px;
}

/* ---------- Closing CTA (offcut band) ---------- */
.closing { padding-block: 112px; background: var(--offcut); text-align: center; }
.closing .wrap { display: flex; flex-direction: column; align-items: center; }
.closing-body {
  margin-top: 16px;
  color: #444444; font-size: 19px; line-height: 30px;
}
.closing .signup { margin-top: 36px; }

/* ---------- Sticky mobile bar (not drawn in Paper; per spec §3) ---------- */
.sticky-join {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--rule);
}
.sticky-join[hidden] { display: none; }
.sticky-join .button { width: 100%; min-height: 52px; }
@media (min-width: 768px) { .sticky-join { display: none !important; } }
/* Keeps content clear of the bar (--sticky-bar-h in tokens.css, plus the safe area):
   padding so the page end isn't covered, scroll-padding so a focused field isn't. */
@media (max-width: 767px) {
  body.has-sticky-join { padding-bottom: calc(var(--sticky-bar-h) + env(safe-area-inset-bottom)); }
  html:has(body.has-sticky-join) { scroll-padding-bottom: calc(var(--sticky-bar-h) + env(safe-area-inset-bottom) + 16px); }
}

/* ---------- Tablet (768 to 1023): no Paper board; reuses mobile stacking where two
   columns got cramped (panel text was ~220px wide) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .panels { grid-template-columns: 1fr; gap: 24px; }
  .rules-list { gap: 32px; }
  .cards { gap: 16px; }
}

/* ---------- Mobile (390 board) ---------- */
@media (max-width: 767px) {
  .section-title { font-size: 31px; line-height: 36px; }

  .hero { padding-top: 32px; padding-bottom: 56px; }
  .hero-title { font-size: 40px; line-height: 43px; }
  .hero-sub { margin-top: 16px; font-size: 17px; line-height: 26px; }

  .video { width: auto; margin: 28px calc(-1 * var(--gutter)) 0; align-self: stretch; }
  .video-poster, .video-meta { aspect-ratio: 390 / 240; }
  .video-play { top: calc(50% - 54px); width: 72px; height: 72px; margin-left: -36px; }
  .video-play::before { width: 24px; height: 28px; margin: -14px 0 0 -12px; }
  .video { --label-top: calc(50% + 30px); }
  .video-label { font-size: 17px; line-height: 24px; }
  .video-chips { right: 12px; bottom: 12px; gap: 6px; }
  .video-chips li { padding: 3px 6px; font-size: 12px; line-height: 16px; }
  .transcript { padding-inline: var(--gutter); }
  .transcript-body { font-size: 16px; line-height: 24px; }

  .signup { margin-top: 24px; }
  /* Mobile board stacks in DOM order: input, opt-in, full-width button. */
  .signup-form { grid-template-columns: minmax(0, 1fr); }
  .signup-form > .field-label,
  .signup-form > .text-input,
  .signup-form > .button { grid-row: auto; grid-column: 1; }

  .problem-fix { padding-block: 56px; }
  .quote { margin-top: 12px; }
  .quote blockquote p { font-size: 20px; line-height: 28px; }
  .quote figcaption { margin-top: 12px; font-size: 13px; line-height: 18px; }
  .panels { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .panel { gap: 16px; }
  .panel .caps-label::before { width: 8px; height: 8px; }
  .panel--problem { padding: 22px 16px; }
  .panel--problem ul { gap: 8px; }
  .panel--problem li { align-items: baseline; gap: 12px; padding: 14px 16px; font-size: 18px; line-height: 25px; }
  .panel--problem li::before { width: 12px; font-size: 14px; line-height: 20px; }
  .panel--fix { padding: 24px 18px; }
  .panel-title { font-size: 28px; line-height: 33px; }
  .steps li { grid-template-columns: 18px 1fr; column-gap: 14px; padding-block: 14px; }
  .steps h4 { font-size: 19px; line-height: 24px; }
  .steps p { font-size: 16px; line-height: 24px; }
  .mark { width: 18px; height: 18px; }

  .rules { padding-block: 56px; }
  .rules .section-title { margin-top: 12px; font-size: 34px; line-height: 38px; }
  .rules-list { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .rules-list li { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; row-gap: 6px; align-content: start; }
  .rule-num { grid-row: 1 / span 2; font-size: 72px; line-height: 64px; }
  .rules-list h3 { font-size: 20px; line-height: 26px; }
  .rules-list p { grid-column: 2; font-size: 16px; line-height: 24px; }

  .outcome { padding-block: 56px; }
  .outcome .section-title { margin-top: 12px; font-size: 38px; line-height: 42px; }
  .cards { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .card { gap: 6px; padding: 22px 18px; }
  .card h3 { font-size: 20px; line-height: 26px; }
  .card p { font-size: 16px; line-height: 24px; }

  .faq { padding-block: 56px; }
  .faq .section-title { margin-top: 10px; font-size: 34px; line-height: 38px; letter-spacing: -0.02em; }
  .faq-item { padding-block: 20px; }
  .faq-item:first-of-type { margin-top: 20px; }
  .faq-item summary { align-items: flex-start; gap: 16px; font-size: 20px; line-height: 26px; }
  .faq-item p { max-width: none; margin-top: 10px; font-size: 17px; line-height: 26px; }

  .closing { padding-block: 56px; }
  .closing .section-title { font-size: 34px; line-height: 38px; }
  .closing-body { font-size: 17px; line-height: 26px; }
  .closing .signup { margin-top: 22px; }
  .closing .text-input, .closing .button { height: 52px; min-height: 52px; }
}