/* SweepstakeReport Terminal section (/terminal/). Loaded after /css/styles.css and uses only its tokens:
   the same inks, creams, gold, Fraunces / Public Sans / IBM Plex Mono and square-cornered cards as the rest
   of the site. Every rule is scoped to a t- class, except the nav rule just below. */

/* Seven nav links (Terminal added) overflow the header between 768 and about 800px wide. INSTALL.md adds this same
   rule to /css/styles.css for every page; it is repeated here so this page is right on its own. */
@media (min-width: 768px) and (max-width: 899px) {
  .nav-desk a { padding: 0.5rem 0.5rem; font-size: 0.86rem; }
  .nav-desk a::after { left: 0.5rem; right: 0.5rem; }
}

/* ---------- hero ---------- */
.t-hero .hero-grid { gap: 2.25rem; }
@media (min-width: 960px) {
  .t-hero .hero-grid { grid-template-columns: 5fr 7fr; align-items: start; padding: 4rem 0 4.25rem; }
}
.t-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); max-width: 34rem; }
.t-hero .lede { max-width: 33rem; }
.t-hero .lede strong { color: var(--cream); font-weight: 600; }
.t-cta-note {
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}
.t-cta-note span + span::before { content: "\00b7"; margin: 0 0.55em; color: var(--gold); }

/* where the Terminal is not available (2026-10-09). index.html asks /api/terminal/config in its <head> with the
   homepage's own script: html.is-gated hides "Create free account" (the data-when rules in css/styles.css) and shows
   .t-gate-note instead. While the answer is out (html.gate-pending, 2 seconds at most, usually over before the first
   paint) both variants wait unseen in place, and so do the screenshot under them below 960px and everything after the
   hero; from 960px the text column starts at the top of its row (it was centred). So nothing visible moves when the
   answer lands. The "Free now" line gives way to the note the same way, for a visitor who is not logged in only: a
   logged-in visitor's hero never changes and never waits. */
.t-gate-note { margin: 0.9rem 0 0; max-width: 31rem; font-size: 0.9rem; line-height: 1.55; color: var(--stone); }
html.gate-pending:not(.is-in) .t-hero .t-cta-note { visibility: hidden; }
html.is-gated:not(.is-in) .t-hero .t-cta-note { display: none; }
@media (max-width: 959px) {
  html.gate-pending:not(.is-in) .t-hero .t-hero-vis { visibility: hidden; }
}
html.gate-pending:not(.is-in) .t-hero ~ * { visibility: hidden; }
.t-hero [data-when~="open"], .t-hero [data-when~="gated"], .t-hero .t-cta-note { transition: opacity 0.3s var(--ease); }
html.gate-pending .t-hero [data-when~="open"], html.gate-pending .t-hero [data-when~="gated"],
html.gate-pending:not(.is-in) .t-hero .t-cta-note { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .t-hero [data-when~="open"], .t-hero [data-when~="gated"], .t-hero .t-cta-note { transition: none; }
}

/* screenshot frame: a quiet window bar, the screen, square corners like every site card */
.t-frame {
  margin: 0;
  border: 1px solid var(--gold-line);
  background: var(--ink-4);
  box-shadow: inset 0 1px 0 rgba(243, 234, 216, 0.06), 0 30px 60px -32px rgba(0, 0, 0, 0.85);
}
.t-frame-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--stone-2);
  white-space: nowrap;
  overflow: hidden;
}
.t-frame-bar b { font-weight: 500; color: var(--stone); }
.t-frame img, .t-phone img {
  display: block;
  width: 100%;
  height: auto;
  background: #0b0c0e;
}
.t-hero-vis { position: relative; }
.t-hero .t-frame-desk img { aspect-ratio: 1440 / 900; }
.t-frame-phone {
  position: absolute;
  right: -1rem;
  bottom: -2rem;
  width: 23%;
  padding: 0.3rem;
  box-shadow: 0 0 0 1px rgba(12, 11, 9, 0.9), 0 28px 50px -12px rgba(0, 0, 0, 0.9);
}
.t-frame-phone img { aspect-ratio: 600 / 1298; }
@media (min-width: 640px) and (max-width: 959px) { .t-hero-vis { margin: 0 1rem 2rem 0; } }
@media (min-width: 960px) { .t-hero-vis { margin-right: 1rem; } }
@media (max-width: 639px) {
  /* on a phone the hero shows the phone layout, cropped to its first screen */
  .t-frame-phone { display: none; }
  .t-hero .t-frame-desk img { aspect-ratio: 600 / 640; object-fit: cover; object-position: top; }
}
.t-page .section-head h2 { line-height: 1.15; text-wrap: balance; }
.t-page .page-hero h1 { line-height: 1.1; text-wrap: balance; }

/* ---------- disclaimer strip variant (no em dash, Terminal wording) ---------- */
.t-strip span + span::before { content: "\00b7"; margin: 0 0.5em; color: var(--gold); }

/* ---------- section heads ---------- */
.t-sec-lede { margin: 0.75rem 0 0; max-width: 44rem; color: var(--stone); line-height: 1.6; }

/* ---------- what it does ---------- */
.t-cards {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .t-cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.t-card {
  border: 1px solid var(--rule-strong);
  background: var(--ink-3);
  padding: 1.25rem 1.25rem 1.35rem;
  box-shadow: inset 0 1px 0 rgba(243, 234, 216, 0.06);
}
.t-card h3 {
  margin: 0.55rem 0 0;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.t-card p { margin: 0.6rem 0 0; font-size: 0.93rem; line-height: 1.6; color: var(--stone); }
/* fix round 2: card 03 (the directory's facts, the daily estimate and the sign-up bonus) is the long one; three
   cards side by side left 01 and 02 mostly empty. From 768px: 01 and 02 stacked on the left, 03 beside both. */
@media (min-width: 768px) {
  .t-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-cards > .t-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .t-cards > .t-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .t-cards > .t-card:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
}

.t-never {
  display: grid;
  gap: 1rem 2rem;
  margin: 1.5rem 0 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(74, 28, 34, 0.22), rgba(18, 17, 14, 0.6));
}
@media (min-width: 768px) { .t-never { grid-template-columns: 13rem 1fr; align-items: start; } }
.t-never h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: var(--cream);
}
.t-never ul {
  display: grid;
  gap: 0.55rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .t-never ul { grid-template-columns: 1fr 1fr; } }
.t-never li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--cream-soft);
}
.t-never li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.3rem;
  width: 0.8rem;
  height: 0.8rem;
  background:
    linear-gradient(45deg, transparent 44%, var(--gold) 44%, var(--gold) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--gold) 44%, var(--gold) 56%, transparent 56%);
}

/* ---------- how it works ---------- */
.t-steps {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.t-steps li {
  display: flex;
  gap: 1rem;
  padding: 1.35rem 0.25rem;
  border-bottom: 1px solid var(--rule);
}
.t-steps li:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .t-steps { grid-template-columns: repeat(3, 1fr); }
  .t-steps li { flex-direction: column; gap: 0.6rem; padding: 1.6rem 1.5rem 1.7rem; border-bottom: 0; border-left: 1px solid var(--rule); }
  .t-steps li:first-child { border-left: 0; padding-left: 0.25rem; }
}
.t-step-n {
  flex-shrink: 0;
  width: 2.75rem;
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { .t-step-n { font-size: 2.6rem; width: auto; } }
.t-steps h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cream);
}
.t-steps p { margin: 0.45rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--stone); }
.t-keys { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; font-size: 0.85rem; color: var(--stone); }
.t-keys kbd {
  display: inline-block;
  min-width: 1.5rem;
  margin-right: 0.3rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--rule-strong);
  background: var(--ink-4);
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
  color: var(--cream-soft);
}

/* ---------- screens ---------- */
.t-gallery {
  display: grid;
  gap: 1.75rem 1.5rem;
  margin: 2rem 0 0;
}
@media (min-width: 768px) { .t-gallery { grid-template-columns: 1fr 1fr; } }
.t-shot { margin: 0; }
.t-shot figcaption, .t-phone figcaption {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--stone);
}
.t-shot figcaption b, .t-phone figcaption b {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--gold);
}
.t-shot img { aspect-ratio: 1440 / 900; }

.t-phones-block {
  display: grid;
  gap: 0.5rem 2.5rem;
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 960px) { .t-phones-block { grid-template-columns: 1fr 2.4fr; align-items: center; } }
.t-phones-head h3 {
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--cream);
}
.t-phones-head p:not(.mast-kicker) { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--stone); max-width: 26rem; }
.t-phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
/* focusable (tabindex="0") so a keyboard can scroll the strip below 640px */
.t-phones:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.t-phone { margin: 0; }
.t-phone .t-frame { padding: 0.45rem; }
.t-phone img { aspect-ratio: 600 / 1298; }
@media (max-width: 639px) {
  /* a swipeable strip on a phone: three screens side by side would each be 100px wide */
  .t-phones {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    margin-right: -1rem;
    padding-right: 1rem;
  }
  .t-phones > li { flex: 0 0 68%; scroll-snap-align: start; }
}
.t-note { margin: 1.5rem 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--stone-2); max-width: 52rem; }

/* ---------- plans ---------- */
.t-plans {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) { .t-plans { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.t-plan {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-strong);
  background: var(--ink-3);
  padding: 1.4rem 1.35rem 1.35rem;
  box-shadow: inset 0 1px 0 rgba(243, 234, 216, 0.06);
}
.t-plan.is-now {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(201, 165, 106, 0.08), rgba(22, 20, 18, 0.95) 40%);
}
.t-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.t-plan h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--cream);
}
.t-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--rule-strong);
  color: var(--stone);
}
.t-badge.is-now { border-color: rgba(61, 122, 98, 0.6); background: rgba(30, 61, 50, 0.45); color: #b7d4c6; }
.t-price { margin: 1rem 0 0; display: flex; align-items: baseline; gap: 0.4rem; }
.t-price b {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.t-price span { font-size: 0.9rem; color: var(--stone); }
/* What a plan shows in the visitor's state, in Sweeps Coins (2026-10-12): js/home.js fills .t-plan-val and the
   note's [data-plan-val-where] from the /config answer. Both stay hidden (no space taken) when there is no figure. */
.t-plan-val {
  margin: 0.85rem 0 0;
  padding-left: 0.65rem;
  border-left: 2px solid var(--gold-line);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cream-soft);
}
.t-plan-val[hidden], [data-plan-val-where][hidden] { display: none; }
.t-plan-note + .t-note { margin-top: 0.75rem; }
.t-plan-terms { margin: 0.9rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--stone); }
.t-feat {
  flex: 1;
  margin: 1.15rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.t-feat li {
  position: relative;
  padding-left: 1.45rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--cream-soft);
}
.t-feat li + li { margin-top: 0.55rem; }
.t-feat li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.32rem;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
.t-feat li.t-plus { font-weight: 600; color: var(--cream); }
.t-feat li.t-plus::before {
  top: 0.2rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 0;
  transform: none;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 1.5px 100% no-repeat;
}
.t-plan .btn { margin-top: 1.35rem; width: 100%; }
.t-plan .btn[aria-disabled="true"] {
  border-color: var(--rule-strong);
  color: var(--stone-2);
  cursor: default;
  pointer-events: none;
}
/* a plan's call to action where the Terminal is not available (the homepage since 2026-10-08, /terminal/ since
   2026-10-09; this rule moved here from css/home.css, which the homepage loads after this file) */
.t-plan .a-off {
  display: inline-flex;
  justify-content: center;
  margin-top: 1.35rem;
  width: 100%;
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--rule-strong);
  font-size: 0.9rem;
  color: var(--stone-2);
}

/* ---------- what you get: the free account (2026-10-13) ----------
   The Terminal is free: one card (the .t-plan look, .t-free-card) beside the list of what every account gets.
   js/home.js fills the card's two state lines (.t-plan-val[data-state-val], [data-state-signup]) and the note's
   [data-state-where] from the /config answer; each stays hidden (no space taken) when there is nothing to show. */
.t-free {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 0;
}
@media (min-width: 900px) { .t-free { grid-template-columns: 5fr 7fr; gap: 1.5rem; } }
.t-free-list {
  border: 1px solid var(--rule-strong);
  background: var(--ink-3);
  padding: 1.4rem 1.35rem 1.35rem;
  box-shadow: inset 0 1px 0 rgba(243, 234, 216, 0.06);
}
.t-free-list .t-feat { margin-top: 0.85rem; }
@media (min-width: 640px) {
  .t-feat-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 2rem; }
  .t-feat-2 li + li { margin-top: 0; }
}
.t-plan-val + .t-plan-val { margin-top: 0.6rem; }
.t-plan-val[data-state-val] { font-size: 0.95rem; color: var(--cream); }
[data-state-where][hidden] { display: none; }
/* fix round 1: with no state line (gated, no JS, unknown state, a failed or late answer, an older Worker) the card
   is as tall as the list beside it: its call to action sits at its foot, not above an empty band */
.t-free-card .t-plan-terms { margin-bottom: 1.35rem; }
.t-free-card > .btn, .t-free-card > .a-off { margin-top: auto; }
/* the homepage hero's sign-up bonus count (js/home.js [data-state-hero]): hidden, no space taken, until filled */
.a-hero-count { max-width: 31rem; margin: 0.85rem 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--cream-soft); }
.a-hero-count[hidden] { display: none; }

/* ---------- availability + 18+ ---------- */
.t-two {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 900px) { .t-two { grid-template-columns: 7fr 5fr; gap: 1.5rem; } }
.t-panel {
  border: 1px solid var(--gold-line);
  background: var(--ink-4);
  padding: 1.4rem 1.35rem;
  box-shadow: inset 0 1px 0 rgba(243, 234, 216, 0.06);
}
@media (min-width: 640px) { .t-panel { padding: 1.75rem; } }
.t-panel h2 {
  margin: 0.45rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--cream);
  text-wrap: balance;
}
.t-panel p { margin: 0.8rem 0 0; line-height: 1.6; color: var(--cream-soft); }
.t-panel p.muted { color: var(--stone); font-size: 0.93rem; }
.t-avail-line { font-size: 1.05rem; color: var(--cream) !important; }
.t-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.t-chips .st-chip { font-size: 11px; }
.t-age {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.4rem;
}
.t-age b {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--gold-2);
}

/* ---------- set play limits ---------- */
.t-limits {
  display: grid;
  gap: 1.5rem 2.5rem;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  padding: 2rem 0;
}
@media (min-width: 900px) { .t-limits { grid-template-columns: 7fr 5fr; } }
.t-limits h2 {
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--cream);
}
.t-limits ol { margin: 1rem 0 0; padding-left: 1.25rem; color: var(--cream-soft); line-height: 1.6; }
.t-limits ol li + li { margin-top: 0.45rem; }
.t-limits ol li::marker { color: var(--gold); font-family: var(--mono); font-size: 0.85em; }
.t-call {
  align-self: start;
  border: 1px solid var(--rule-strong);
  background: linear-gradient(180deg, rgba(30, 61, 50, 0.3), rgba(18, 17, 14, 0.6));
  padding: 1.35rem;
}
.t-call .fig {
  display: block;
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.t-call p { margin: 0.6rem 0 0; font-size: 0.93rem; line-height: 1.55; color: var(--stone); }

/* ---------- FAQ accordion ---------- */
.t-faq { margin: 1.75rem 0 0; border-top: 1px solid var(--gold-line); }
.t-faq details { border-bottom: 1px solid var(--rule); }
.t-faq summary {
  position: relative;
  display: block;
  padding: 1.15rem 2.75rem 1.15rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cream);
  transition: color 0.3s var(--ease);
}
@media (min-width: 640px) { .t-faq summary { font-size: 1.3rem; } }
.t-faq summary::-webkit-details-marker { display: none; }
.t-faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.45rem;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 1.5px 100% no-repeat;
  transition: transform 0.35s var(--ease);
}
.t-faq details[open] summary::after {
  background: linear-gradient(var(--gold), var(--gold)) center / 100% 1.5px no-repeat;
}
.t-faq summary:hover { color: var(--gold-2); }
.t-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.t-faq .t-a { padding: 0 2.75rem 1.35rem 0.25rem; max-width: 50rem; }
.t-faq .t-a p { margin: 0; line-height: 1.65; color: var(--cream-soft); }
.t-faq .t-a p + p { margin-top: 0.75rem; }
.t-faq .t-a a { color: var(--gold-2); text-decoration-color: var(--gold-line); text-underline-offset: 3px; }

/* ---------- disclosure + closing call ---------- */
.t-disc {
  display: grid;
  gap: 1.5rem 2.5rem;
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(30, 61, 50, 0.28), rgba(18, 17, 14, 0.6));
  padding: 1.5rem;
  box-shadow: inset 0 1px 0 rgba(243, 234, 216, 0.06);
}
@media (min-width: 640px) { .t-disc { padding: 2rem; } }
@media (min-width: 900px) { .t-disc { grid-template-columns: 7fr 5fr; align-items: center; } }
.t-disc h2 {
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cream);
}
.t-disc p { margin: 0.75rem 0 0; line-height: 1.6; color: var(--cream-soft); }
.t-disc .t-quote {
  margin: 0.9rem 0 0;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 2px solid var(--gold);
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--cream);
}
.t-docs { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--stone); }
.t-docs a + a { margin-left: 1.1rem; }
.t-close h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  font-style: italic;
  color: var(--cream);
}
.t-close p { margin: 0.4rem 0 0; color: var(--stone); }
.t-close .hero-actions { margin-top: 1rem; }

/* ---------- the two Terminal footer lines, just above the site footer ---------- */
.t-fine {
  margin-top: 0.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(12, 11, 9, 0.6);
}
.t-fine .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.85rem 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--stone);
}
.t-fine a { color: var(--cream-soft); text-underline-offset: 3px; text-decoration-color: var(--gold-line); }
.t-fine a:hover { color: var(--gold-2); }
.t-fine .t-r { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
.t-fine + .site-footer { margin-top: 0; }
@media (max-width: 639px) {
  .t-fine .wrap { flex-direction: column; align-items: flex-start; }
}

/* ---------- Terms and Privacy drafts ---------- */
.t-draft {
  border-top: 1px solid rgba(196, 146, 58, 0.55);
  border-bottom: 1px solid rgba(196, 146, 58, 0.55);
  background: repeating-linear-gradient(-45deg, rgba(196, 146, 58, 0.16) 0 12px, rgba(196, 146, 58, 0.08) 12px 24px);
}
.t-draft .wrap-narrow { padding: 1rem 0; }
.t-draft strong {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold-2);
}
.t-draft p { margin: 0.35rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--cream-soft); }
/* .t-doc h2 anchors: html { scroll-padding-top } in css/styles.css keeps them below the sticky bar (2026-10-08) */
.t-doc h3 {
  margin: 1.6rem 0 0.4rem;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--gold);
}
.t-doc ul li::marker { color: var(--gold); }
.t-review {
  display: block;
  margin: 1rem 0 0;
  padding: 0.6rem 0.85rem;
  border-left: 2px solid var(--amber);
  background: rgba(196, 146, 58, 0.1);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cream-soft);
}
.t-review::before { content: "Review note: "; color: var(--gold-2); }
.t-ph {
  padding: 0 0.3rem;
  background: rgba(196, 146, 58, 0.18);
  color: var(--gold-2);
  font-family: var(--mono);
  font-size: 0.85em;
}
.t-toc { margin: 1.5rem 0 0; padding: 1rem 1.15rem; border: 1px solid var(--rule-strong); background: var(--ink-3); }
.t-toc p { margin: 0 0 0.4rem; font-family: var(--mono); font-size: 11px; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--stone); }
.t-toc ol { margin: 0; padding-left: 1.4rem; columns: 2 14rem; column-gap: 2rem; font-size: 0.93rem; }
.t-toc li { break-inside: avoid; margin: 0; padding: 0.12rem 0; }
.t-toc a { color: var(--cream-soft); text-decoration: none; }
.t-toc a:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.t-table-wrap { overflow-x: auto; margin: 1rem 0 0; }
.t-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.5; }
.t-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--rule-strong);
}
.t-table td { padding: 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--cream-soft); }
.t-table td:first-child { color: var(--cream); font-weight: 500; min-width: 9rem; }

/* page-load reveal for the Terminal blocks, same motion as the site's cards */
.t-card, .t-plan, .t-steps li {
  animation: rise 0.55s var(--ease) both;
  animation-delay: var(--reveal-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .t-faq summary::after { transition: none; }
}