/*
 * content.css — the five content pages: about, contact, tos, privacy, success.
 *
 * Loads after site-system.css and before desktop-tokens.css, so every surface,
 * control and type step here comes from the system; this file only does the
 * three things the system deliberately leaves to a page:
 *   1. the layout of each page's own blocks,
 *   2. the page-owned class names the system maps but does not lay out
 *      (.about-card-new, the .contact-form-box internals, .tos-card, success),
 *   3. the two overrides of older sheets, noted at each rule.
 *
 * Nothing here invents a surface, a radius, a shadow or a colour. If a value is
 * not a --ds-* token it is a layout number, and it says why.
 */

/* ===========================================================================
 * 1. THE PAGE OPENING — shared by all five
 *
 * The hero column belongs to site-system.css now: .page-hero-inner is
 * left-aligned there and trimmed by two gutters, so the h1 shares a left edge
 * with every .ds-container below it. Nothing about the opening is this file's.
 * ======================================================================== */
/* A section head carries 48px beneath it to clear the content it introduces.
   When it IS the content, that becomes dead space above the next hairline. */
.desktop-web .ds-section-head:last-child { margin-bottom: 0; }

/* ===========================================================================
 * 2. ABOUT — three numbered cards
 * ======================================================================== */
/* The card object, its padding and its padding steps all come from
   site-system.css (.about-card-new is mapped there); only the stack and the
   figure are the page's business. */
.desktop-web .about-card-new {
  display: grid;
  align-content: start;
  gap: var(--ds-2);
}

/*
 * `.card-number` is gone, rule and markup both.
 *
 * These three cards carried a numbered figure at the head of each tile. They
 * are not a sequence: "Frustrated with slow PCs", "Passion for Windows and
 * hardware" and "Real results for real users" are three reasons, read in any
 * order, and numbering them said they had an order they do not have. The home
 * page's `.steps` are genuinely ordered (DESIGN.md §14 records the one
 * exemption), so the figure stays there and leaves here.
 */

/* The closing statement below the reasons grid takes the section rhythm as a
   gap above it, the same distance a new .ds-section would open with, rather
   than being its own section with a hairline and a full section-y on both
   sides of two sentences. */
.desktop-web .about-closing { margin-top: var(--ds-section-y); }

/* ===========================================================================
 * 3. CONTACT — one card, the system's field rhythm inside it
 *
 * Every label is a .ds-label inside a .ds-field, and the controls are the
 * system's recessed wells (DESIGN.md §7), so the label/control stack is the
 * system's and not this file's.
 *
 * The cells used to be divided by hairlines, which was a legible grid while the
 * controls were bare underlines. Once the controls became wells it was a box
 * inside a cell inside a card, three deep, which §15 retires: the hairlines are
 * gone and the fields are spaced instead.
 * ======================================================================== */
.desktop-web .contact-form-box { max-width: 720px; }

.desktop-web .contact-form-box #formContent {
  display: grid;
  gap: var(--ds-5);
}
.desktop-web .contact-form-box .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-5);
}
.desktop-web .contact-form-box .form-row.single { grid-template-columns: 1fr; }

/* A select's empty option is real text, not a placeholder, so it arrives at
   full --text weight beside four --text-faint hints. It is required and empty,
   which is exactly what :invalid means here. */
.desktop-web .contact-form-box #formContent select:required:invalid { color: var(--text-faint); }

/* The card's own padding is the gutter now, so the button's right edge lines up
   with the field above it without one of its own. */
/* Left, with the labels and the fields above it. The form reads down a single
   left edge and then the one control jumped to the right margin, so the eye had
   to cross the card to find it. DESIGN §3's left alignment is the page's spine;
   a submit button is not the exception to it. */
.desktop-web .contact-form-box .form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--ds-3);
}

/* contact.js flips display to block, so this is a block notice rather than the
   flex .ds-notice: an icon slot would be wiped by the textContent write. The
   message names the field it is about, so colour is not the only carrier. */
.desktop-web .contact-form-box .error-banner {
  display: none;
  margin-bottom: var(--ds-5);
  padding: var(--ds-3) var(--ds-4);
  border: 1px solid rgba(229, 104, 109, 0.42);
  border-radius: var(--ds-r-md);
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: var(--ds-text-small);
  line-height: 1.6;
}

/* The success state replaces the form inside the same card, so it is a face of
   that card and not a second card nested in it. */
.desktop-web .contact-form-box .success-box {
  display: none;
  padding: var(--ds-2) 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* interactive.css centres .site-success-mark with `margin: 10px auto 20px`;
   the rest of this panel is left-aligned, so the mark is too. */
.desktop-web .contact-form-box .success-icon { margin: 0 0 var(--ds-4); }
.desktop-web .contact-form-box .success-title {
  margin: 0 0 var(--ds-2);
  font-size: var(--ds-text-h3);
}
.desktop-web .contact-form-box .success-copy {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--ds-text-small);
  line-height: 1.6;
}
.desktop-web .contact-form-box .success-notice { margin-top: var(--ds-4); }
.desktop-web .contact-form-box .success-notice-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.desktop-web .contact-form-box .success-reply {
  margin: var(--ds-4) 0 0;
  color: var(--text-faint);
  font-size: var(--ds-text-help);
  line-height: 1.6;
}

@media (max-width: 600px) {
  .desktop-web .contact-form-box .form-row { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * 4. TOS AND PRIVACY — long-form legal
 *
 * Eleven stacked cards is a page with no hierarchy (DESIGN.md §8), and a card
 * per clause says nothing a hairline does not. .tos-card is mapped to the card
 * object in site-system.css and is unmade here; the request to drop it from
 * that list is in the report.
 * ======================================================================== */
.desktop-web .tos-card {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.desktop-web .tos-card + .tos-card {
  margin-top: var(--ds-6);
  padding-top: var(--ds-6);
  border-top: 1px solid var(--ds-hairline);
}

/* A clause number, not an eyebrow: mono and quiet, no tracking, no capitals, no
   accent. People cite these, so they stay. */
.desktop-web .tos-card .tos-section-num {
  display: block;
  margin: 0 0 var(--ds-2);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-tag);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Three classes, so it outranks site-system's (0,2,1) `.section-head h2` rule
   on class count: the heading keeps the h2 size step and gains the space a
   clause heading needs under it. */
.desktop-web .tos-card .tos-h { margin: 0 0 var(--ds-4); }

.desktop-web .tos-card :is(.tos-p, .tos-list) { margin: 0 0 var(--ds-3); }
.desktop-web .tos-card :is(.tos-p, .tos-list):last-child { margin-bottom: 0; }
.desktop-web .tos-card .tos-list { padding-left: 20px; line-height: 1.8; }
.desktop-web .tos-card .tos-list li { margin-bottom: var(--ds-2); }
.desktop-web .tos-card .tos-list li strong { color: var(--text); font-weight: 600; }

/* ===========================================================================
 * 5. SUCCESS — the payment-return hand-off
 *
 * /success is the legacy Stripe return address. pages/success.js reads the
 * session reference and forwards to /?payment=success, where the one status
 * controller lives, so this page holds a hand-off and a fallback and nothing
 * else.
 *
 * It used to carry a preparation form, a "Checking your Stripe payment" panel
 * and a "Your ticket has been created" card, none of which any script had
 * referenced since that controller moved. Roughly 150 declarations here dressed
 * them. They are gone with the markup; a fallback that only ever paints when
 * the redirect cannot run has no business being the longest section in this
 * sheet.
 * ======================================================================== */
.desktop-web .success-shell .payment-panel {
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-4);
  padding: var(--ds-4) var(--ds-5);
}
.desktop-web .success-shell .payment-panel strong { display: block; font-size: var(--ds-text-body); }
.desktop-web .success-shell .payment-panel span {
  display: block;
  margin-top: var(--ds-1);
  color: var(--text-muted);
  font-size: var(--ds-text-help);
  line-height: 1.5;
}
/* The ways on, and the reason the panel is a flex row at all. --ds-2 is the
   gap between sibling controls everywhere on the site (DESIGN §5). */
.desktop-web .success-shell .payment-panel-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--ds-2);
}

@media (max-width: 650px) {
  .desktop-web .success-shell .payment-panel { flex-direction: column; align-items: flex-start; }
}

/* Two more text-less icon containers, sized the same way and for the same
   reason as .checkout-back (site-system.css §18). */
.success-icon { font-size: 20px; }
.success-notice-icon { font-size: 14px; }