/* Content pages — about, testimonials, press, reviews.
 *
 * These four kept all of their original markup through the conversion; only the nav, the
 * footer and the page chrome were replaced. That is deliberate: the copy on them is
 * hand-written and the citation links on /testimonials are the only record of where
 * several quotes came from, so rewriting the markup risked losing something for purely
 * cosmetic gain. What follows maps their existing class names onto the design tokens.
 */

/* The old pages centred everything in .wrap > .card. The shell's .rack + .band.pad now
   own the frame, so these become pass-throughs rather than being edited out of four
   files by hand. */
.wrap { max-width: none; margin: 0; padding: 0; }
.card { background: none; border: 0; padding: 0; box-shadow: none; }

/* --- Measure -------------------------------------------------------------- */
/* As a pass-through, .wrap was the full 1174px rack and the only thing limiting the text
   was the shell's `p { max-width: 68ch }`. That caps a paragraph at about 550px but does
   nothing to place it, so every one of these pages was a narrow ribbon of text pinned to
   the LEFT edge with half the panel empty beside it - which is why /privacy read as using
   a fifth of a wide screen, and why /about looked lopsided.
   A measure that is centred reads as a deliberate margin instead. 660px is about 80
   characters at the body size, the upper end of comfortable, and 20% wider than the
   guides' column because there is no contents rail to sit beside here.
   Pages that are a GRID of cards are excluded: /testimonials, /reviews and /press want the
   width, and squeezing three-up cards into 660px would be a worse page, not a tidier one. */
/* .prose caps the SECTION at 68ch, so on /privacy and /terms the whole band was ~640px
   wide and pinned to the left of the rack - which meant the wrap inside it had no room to
   centre and the measure below did nothing. The guides hit this too and fixed it in their
   own sheet; these pages do not load that sheet. Hand the width back to the section and let
   the wrap own the measure. */
.band.prose:has(> .wrap) { max-width: none; }

.wrap:not(:has(.testimonial-grid, .review-list, .press-article)) {
  max-width: 660px;
  margin-inline: auto;
}
/* Paragraphs fill whatever measure the wrap sets rather than carrying their own narrower
   cap, which would leave a ragged right edge inside a centred column. */
.wrap:not(:has(.testimonial-grid, .review-list, .press-article)) :is(p, .lede) { max-width: none; }

/* --- Heading rhythm ------------------------------------------------------- */
/* The shell zeroes heading margins (the landing page sets its own), so on these pages every
   h2 sat directly on top of the paragraph above it: "Made by" and "Feedback welcome" had no
   more space above them than a line break. They were also rendering at the shell's
   clamp(26px, 3.4vw, 38px), i.e. 38px on a wide screen - a section heading on a text page
   competing with the page title. */
.wrap h1 { margin-bottom: var(--ar-s-4); }
.wrap h2 { font-size: 26px; letter-spacing: -0.012em; margin: var(--ar-s-7) 0 var(--ar-s-4); }
.wrap h3 { font-size: 18px; margin: var(--ar-s-6) 0 var(--ar-s-3); }
.wrap h2:first-child, .wrap h3:first-child { margin-top: 0; }
/* Headings inside a box are the box's own title and keep their own tighter spacing. */
.contact-box h2, .kit-box h2, .cta-box h2 { font-size: 19px; margin-top: 0; }

/* --- Shared bits --------------------------------------------------------- */

.lede { font-size: 17.5px; color: var(--ar-text-2); max-width: 66ch; }
.sub  { color: var(--ar-text-2); }
ul.plain { list-style: none; padding-left: 0; }
ul.plain li { margin-bottom: var(--ar-s-3); }

.meta {
  margin: 0 0 var(--ar-s-2);
  font-family: var(--ar-font-mono); font-size: 10.5px;
  letter-spacing: var(--ar-tracking-label); text-transform: uppercase;
  color: var(--ar-text-3);
}
.read { font-family: var(--ar-font-mono); font-size: 11px; letter-spacing: .06em; }

/* --- /testimonials ------------------------------------------------------- */
/* A grid rather than the pricing page's carousel: this page exists to be read through,
   not skimmed past. */
.testimonial-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ar-s-4); margin: var(--ar-s-6) 0;
}
.press-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ar-s-4);
  border-top: var(--ar-border); padding-top: var(--ar-s-5); margin-top: var(--ar-s-6);
  font-family: var(--ar-font-mono); font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ar-text-2);
}
.press-strip strong { color: var(--ar-text-3); font-weight: 400; }
.press-strip a { color: var(--ar-text-2); border-bottom: 1px solid var(--ar-line-2); }
.press-strip a:hover { color: var(--ar-text); text-decoration: none; border-bottom-color: var(--ar-blue); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--ar-s-4); align-items: center; margin-top: var(--ar-s-6); }
.cta-row .sub { font-family: var(--ar-font-mono); font-size: 11px; letter-spacing: .06em; margin: 0; }

/* --- /press -------------------------------------------------------------- */
.press-article {
  border-bottom: var(--ar-border); padding: var(--ar-s-5) 0;
  max-width: 74ch;
}
.press-article:first-of-type { padding-top: 0; }
.press-article:last-of-type { border-bottom: 0; }
.press-article h3 { font-size: 18px; margin: 0 0 var(--ar-s-3); line-height: 1.35; }
.press-article h3 a { color: var(--ar-text); }
.press-article h3 a:hover { color: var(--ar-blue); text-decoration: none; }
.press-article p { color: var(--ar-text-2); margin: 0; }

/* Two different things were sharing one slot on this page, which is what made it read as
   inconsistent: some entries quoted the article verbatim, others carried OUR summary of the
   coverage, and both arrived as an unstyled <blockquote> with the browser's default indent.
   One of them was even the pricing boilerplate, which tells a reader nothing.
   Now they look like what they are. A quote is someone else's words: indented behind a rule,
   in quotation marks. A note is ours: flush left, smaller, dimmer, no rule, no quote marks.
   The class is .cov-note, not .note: the shell's .note is a bordered notice panel, and
   borrowing that name put two of the six entries in a dark box and left four without one -
   which was the inconsistency, not the fix for it. */
.press-article blockquote {
  margin: var(--ar-s-4) 0 0; padding: 0 0 0 var(--ar-s-4);
  border-left: 2px solid var(--ar-record-24);
  color: var(--ar-text); font-size: 15px; line-height: 1.6;
}
.press-article .cov-note {
  margin: var(--ar-s-4) 0 0;
  font-size: 14px; line-height: 1.6; color: var(--ar-text-3);
}
.press-article blockquote + .cov-note { margin-top: var(--ar-s-3); }
.press-article .read { display: inline-block; margin-top: var(--ar-s-4); }

.kit-box, .contact-box {
  border: var(--ar-border); background: var(--ar-ink);
  padding: var(--ar-s-5); margin: var(--ar-s-5) 0; max-width: 66ch;
}
.kit-download {
  display: inline-flex; align-items: center; gap: var(--ar-s-2);
  margin-top: var(--ar-s-3);
  font-family: var(--ar-font-mono); font-size: 11px; letter-spacing: .07em;
}
.contact-email { font-family: var(--ar-font-mono); font-size: 14px; }
.tip { font-size: 13.5px; color: var(--ar-text-3); }

/* --- /reviews ------------------------------------------------------------ */
/* One card per venue. The point of the page is to make leaving a review a single
   obvious click, so the button carries the venue name rather than a generic label. */
/* Five venues. As auto-fill minmax(280px) a 1174px band fits four, which left Audiofanzine
   alone on a second row - a single card beside two empty tracks reads as a missing card
   rather than as the fifth one. Flex instead of grid: the last row's items grow to fill the
   width, so there is never a lone card at any viewport. 330px basis gives three then two. */
.review-list {
  display: flex; flex-wrap: wrap;
  gap: var(--ar-s-4); margin: var(--ar-s-6) 0;
}
.review-list > .review-card { flex: 1 1 330px; }
.review-card {
  border: var(--ar-border); background: var(--ar-panel-2);
  padding: var(--ar-s-5); display: flex; flex-direction: column; gap: var(--ar-s-3);
}
.rc-text { margin: 0; font-size: 14.5px; color: var(--ar-text-2); }
.rc-btn {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ar-touch-min); padding: 0 var(--ar-s-4);
  border: 1px solid var(--ar-blue-24); background: transparent; color: var(--ar-blue);
  font-family: var(--ar-font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
}
.rc-btn:hover { background: var(--ar-blue-12); border-color: var(--ar-blue); text-decoration: none; }

/* --- /about -------------------------------------------------------------- */
.author {
  display: flex; align-items: center; gap: var(--ar-s-4);
  margin: var(--ar-s-5) 0 var(--ar-s-6);
  padding-bottom: var(--ar-s-5); border-bottom: var(--ar-border);
}
/* .author-avatar is a DIV holding the initials "VY", not an <img>. Styled as an image it
   got object-fit (meaningless on a div) and no centring, so the initials sat in the
   top-left corner with the circle drawn around empty space beside them. The img rule stays
   for the day it becomes a photo. */
.author-avatar {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: var(--ar-border); background: var(--ar-panel);
  font-family: var(--ar-font-mono); font-size: 13px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ar-text-2);
}
.author-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 0; }
.author-name { display: block; color: var(--ar-text); font-weight: 500; }
.author-role {
  display: block; font-family: var(--ar-font-mono); font-size: 10.5px;
  letter-spacing: var(--ar-tracking-label); text-transform: uppercase; color: var(--ar-text-2);
}

/* --- /refer form --------------------------------------------------------- */
/* This form predates the .field primitive and uses bare label/input, so it was falling
   back to browser defaults: a 13.3px font and a 21px-tall input. Both matter - iOS
   auto-zooms the page for any input under 16px, and 21px is half the 44px touch minimum.
   Scoped to #referralForm rather than added as classes in the markup, because the form
   contains a honeypot whose exact attributes and positioning the server relies on to drop
   bot submissions; it is not worth editing that markup for styling. */
#referralForm label {
  display: block; margin: var(--ar-s-4) 0 var(--ar-s-2);
  font-family: var(--ar-font-mono); font-size: 10.5px;
  letter-spacing: var(--ar-tracking-label); text-transform: uppercase; color: var(--ar-text-2);
}
#referralForm label:first-of-type { margin-top: 0; }
#referralForm label .opt { text-transform: none; letter-spacing: 0; color: var(--ar-text-3); }
#referralForm input[type="email"],
#referralForm input[type="text"],
#referralForm textarea {
  width: 100%; max-width: 46ch; min-height: var(--ar-touch-min);
  padding: 0 var(--ar-s-3);
  font-family: var(--ar-font-sans); font-size: 16px;   /* 16px: under this iOS zooms */
  color: var(--ar-text); background: var(--ar-ink);
  border: var(--ar-border); border-radius: var(--ar-r-1);
}
#referralForm textarea { padding: var(--ar-s-3); min-height: 110px; line-height: 1.55; }
#referralForm input::placeholder, #referralForm textarea::placeholder { color: var(--ar-text-3); }
#referralForm input:focus-visible, #referralForm textarea:focus-visible {
  outline: var(--ar-focus); outline-offset: var(--ar-focus-offset); border-color: var(--ar-blue);
}
/* The honeypot lives inside an aria-hidden, off-screen 1px box. Do not give it a size. */
#referralForm [aria-hidden="true"] input { min-height: 0; }
#submitBtn { margin-top: var(--ar-s-5); }
#msg { margin-top: var(--ar-s-4); font-size: 14px; }
#successBlock { margin-top: var(--ar-s-5); }

/* ============================================================================
   Classes the conversion left with no rule
   ============================================================================
   A site-wide audit - every class used on a page against the sheets that page loads -
   found 23 of these. The guides audit earlier only covered guides, which is why they
   survived. The most serious were on /thank-you: the page a buyer lands on after paying
   was displaying their licence key as unstyled body text, with an unstyled spinner and an
   error state that looked identical to the success state.
   ============================================================================ */

/* --- /thank-you ---------------------------------------------------------- */
.check-circle {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--ar-s-4);
  border: 1px solid rgba(76,175,80,.4); border-radius: 50%;
  background: rgba(76,175,80,.1);
  color: var(--ar-green); font-size: 20px; line-height: 1;
}
.subtitle { color: var(--ar-text-2); margin-bottom: var(--ar-s-5); }

/* The licence key itself. This is the one thing on the page the buyer has to be able to
   read, select and copy, so it gets the most deliberate treatment on any of these pages:
   monospaced, selectable in one gesture, and unambiguous about where the key ends. */
.key-box {
  border: var(--ar-border); border-left: 2px solid var(--ar-green);
  background: var(--ar-ink); padding: var(--ar-s-5);
  margin: var(--ar-s-5) 0;
}
.key-label {
  margin: 0 0 var(--ar-s-3);
  font-family: var(--ar-font-mono); font-size: 10.5px;
  letter-spacing: var(--ar-tracking-label); text-transform: uppercase;
  color: var(--ar-text-2);
}
.key-value {
  margin: 0; padding: var(--ar-s-3) var(--ar-s-4);
  background: var(--ar-bg); border: 1px solid var(--ar-line);
  font-family: var(--ar-font-mono); font-size: 15px; letter-spacing: .04em;
  color: var(--ar-text); word-break: break-all;
  user-select: all;              /* one click selects the whole key */
}
#copyBtn { margin-top: var(--ar-s-4); }
/* The copy button swaps its own label to "Copied!" and adds .copied for 2 seconds. The
   class had no rule, so the only confirmation was the text change - on the one action this
   page exists to support. (Found by auditing classList.add across every page, since a scan
   of class attributes in the HTML cannot see classes JavaScript adds.) */
#copyBtn.copied {
  border-color: rgba(76,175,80,.5); color: var(--ar-green); background: rgba(76,175,80,.1);
}

.instructions { margin-top: var(--ar-s-7); }
.instructions ol { padding-left: var(--ar-s-5); }
.instructions li { margin-bottom: var(--ar-s-3); color: var(--ar-text-2); }

/* Waiting and failed states. These were plain text, so "we couldn't find your licence"
   read with exactly the same weight as the rest of the page - on the one page where a
   failure has to be obvious, because the buyer has already been charged. */
.pending {
  display: flex; align-items: center; gap: var(--ar-s-3);
  padding: var(--ar-s-4); margin: var(--ar-s-5) 0;
  border: var(--ar-border); background: var(--ar-ink);
  font-size: 14.5px; color: var(--ar-text-2);
}
.spinner {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--ar-line-2); border-top-color: var(--ar-blue);
  animation: ar-spin 720ms linear infinite;
}
@keyframes ar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.error {
  padding: var(--ar-s-4); margin: var(--ar-s-5) 0;
  border: var(--ar-border); border-left: 2px solid var(--ar-amber);
  background: var(--ar-ink); font-size: 14.5px; color: var(--ar-text-2);
}

/* --- /privacy, /terms ---------------------------------------------------- */
.content { min-width: 0; }
.updated {
  margin: 0 0 var(--ar-s-6);
  font-family: var(--ar-font-mono); font-size: 10.5px;
  letter-spacing: var(--ar-tracking-label); text-transform: uppercase;
  color: var(--ar-text-3);
}

/* --- /refer -------------------------------------------------------------- */
.card-body { min-width: 0; }
/* The submit button is inline-level, so after an inline-block textarea it flowed onto the
   same line and sat against the textarea's right edge, bottom-aligned. */
#referralForm textarea { display: block; }
#submitBtn { display: inline-flex; margin-top: var(--ar-s-5); }
.msg:empty { display: none; }          /* an empty aria-live target should take no space */
.msg { margin-top: var(--ar-s-4); font-size: 14px; color: var(--ar-text-2); }
.success-block {
  border: var(--ar-border); border-left: 2px solid var(--ar-green);
  background: var(--ar-ink); padding: var(--ar-s-5); margin-top: var(--ar-s-5);
}
.success-block h2 { margin-top: 0; font-size: 19px; }
.success-block p:last-child { margin-bottom: 0; }
.btn .arrow { margin-left: 2px; }