/* Broadside Reader marketing site.
   A reading app's site should still read like a product, not a document:
   generous measure for copy, more presence everywhere else. */

:root {
  --ink: #16181d;
  --muted: #5c6270;
  --faint: #8b8f99;
  --bg: #fdfcfa;
  --bg-2: #f6f4ef;
  --panel: #ffffff;
  --panel-2: #f2efe9;
  --rule: #e2ded4;
  --tint: #0068d6;
  --tint-ink: #ffffff;
  --tint-wash: rgba(10, 132, 255, 0.1);
  --tint-wash-strong: rgba(10, 132, 255, 0.18);
  --shadow-color: 220 30% 20%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 1px 1px hsl(var(--shadow-color) / 0.04);
  --shadow-md: 0 8px 24px hsl(var(--shadow-color) / 0.10), 0 2px 6px hsl(var(--shadow-color) / 0.06);
  --shadow-lg: 0 24px 60px hsl(var(--shadow-color) / 0.16), 0 6px 16px hsl(var(--shadow-color) / 0.08);
  --measure: 34rem;
  --shell: 74rem;
  --radius-sm: 0.55rem;
  --radius-md: 1rem;
  --radius-lg: 1.6rem;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", serif;

  /* Fixed brand colour used inside app mockups. The app itself is not
     themed by the site's light/dark mode, so this stays constant. */
  --folder-blue: #0a84ff;

  /* Format scatter glyph colours, one per file type. Light values are the
     exact .format-pill swatch hex codes below, so the background and the
     chips are literally the same palette. Dark values are the same hue
     brightened for a dark ground, matching how --tint is handled above.
     The glyphs live in the space around the text, never behind it (see
     .formats-layout), so --scatter-opacity just needs to read as a quiet
     supporting texture rather than compete with the copy - it is no longer
     constrained by AA-against-body-copy math. */
  --scatter-pdf: #cf3e22;
  --scatter-epub: #7c5cbf;
  --scatter-web: #0068d6;
  --scatter-md: #248052;
  --scatter-rtf: #8e6b3c;
  --scatter-txt: #697283;
  --scatter-opacity: 0.88;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef2;
    --muted: #9aa1ae;
    --faint: #6a707c;
    --bg: #0c0d10;
    --bg-2: #131519;
    --panel: #17191e;
    --panel-2: #1c1f25;
    --rule: #2a2e35;
    --tint: #4da3ff;
    --tint-ink: #06141f;
    --tint-wash: rgba(77, 163, 255, 0.14);
    --tint-wash-strong: rgba(77, 163, 255, 0.24);
    --shadow-color: 220 60% 2%;
    --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.5);
    --shadow-md: 0 10px 26px hsl(var(--shadow-color) / 0.55);
    --shadow-lg: 0 28px 70px hsl(var(--shadow-color) / 0.65);
    --scatter-pdf: #ea6c53;
    --scatter-epub: #a48cd9;
    --scatter-web: #4da3ff;
    --scatter-md: #39c680;
    --scatter-rtf: #c99a5b;
    --scatter-txt: #9aa3b8;
    --scatter-opacity: 0.68;
  }
}

/* Explicit overrides win over the OS setting when the viewer flips a toggle
   that stamps data-theme on the root element. */
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #16181d; --muted: #5c6270; --faint: #8b8f99; --bg: #fdfcfa; --bg-2: #f6f4ef;
  --panel: #ffffff; --panel-2: #f2efe9; --rule: #e2ded4; --tint: #0068d6; --tint-ink: #ffffff;
  --tint-wash: rgba(10,132,255,0.1); --tint-wash-strong: rgba(10,132,255,0.18);
  --shadow-color: 220 30% 20%;
  --scatter-pdf: #cf3e22; --scatter-epub: #7c5cbf; --scatter-web: #0068d6;
  --scatter-md: #248052; --scatter-rtf: #8e6b3c; --scatter-txt: #697283;
  --scatter-opacity: 0.88;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eceef2; --muted: #9aa1ae; --faint: #6a707c; --bg: #0c0d10; --bg-2: #131519;
  --panel: #17191e; --panel-2: #1c1f25; --rule: #2a2e35; --tint: #4da3ff; --tint-ink: #06141f;
  --tint-wash: rgba(77,163,255,0.14); --tint-wash-strong: rgba(77,163,255,0.24);
  --shadow-color: 220 60% 2%;
  --scatter-pdf: #ea6c53; --scatter-epub: #a48cd9; --scatter-web: #4da3ff;
  --scatter-md: #39c680; --scatter-rtf: #c99a5b; --scatter-txt: #9aa3b8;
  --scatter-opacity: 0.68;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 clamp(1.0625rem, 0.9rem + 0.5vw, 1.1875rem)/1.65 var(--serif);
  text-rendering: optimizeLegibility;
  position: relative;
}

/* A quiet paper grain so flat colour panels do not feel like plastic.
   Static: it never animates, so it costs nothing under reduced motion. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark) {
  body::before { opacity: 0.7; }
}

img, svg { max-width: 100%; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--panel);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-md);
}

:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 3px;
  border-radius: 0.2rem;
}

/* Header and footer ------------------------------------------------------

   No header.site left on any page: the brand mark lives in .hero-mark at the
   top of <main> instead, and the legal pages link it back to / (#site-853). */

footer.site nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.9375rem;
}

footer.site {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: 2.5rem 1.25rem 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9375rem;
  font-family: var(--sans);
  position: relative;
  z-index: 1;
}
footer.site .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}
footer.site p { margin: 0; }
footer.site nav a { color: var(--muted); text-decoration: none; margin-inline-end: 1.1rem; }
footer.site nav a:last-child { margin-inline-end: 0; }
footer.site nav a:hover { color: var(--ink); text-decoration: underline; }

/* Layout shells ----------------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

main { position: relative; z-index: 1; }

.section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section + .section { border-top: 1px solid var(--rule); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tint);
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

h3 {
  font-size: 1.0625rem;
  font-family: var(--sans);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
li { margin-bottom: 0.5rem; }

a { color: var(--tint); text-underline-offset: 0.15em; }

strong { font-weight: 600; }

.lede { font-size: 1.125em; color: var(--ink); max-width: 38rem; }

.small {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}

/* Hero --------------------------------------------------------------------*/

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
}

.hero::before {
  content: "";
  position: absolute;
  /* The whole section, not a pool in one corner: it runs corner to corner now,
     strongest at the top left and gone before the bottom right. Kept faint, so
     it reads as light in the room rather than as a coloured panel. */
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom right,
    var(--tint-wash-strong) 0%,
    var(--tint-wash) 38%,
    transparent 78%
  );
}

.hero .shell {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}

/* Stacked, the devices go first: the picture says what this is faster than the sentence
   does, and on a phone the reader sees only the top of the page before deciding. */
.hero-visual { order: -1; }

@media (min-width: 60rem) {
  .hero .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-visual { order: 0; }
}

.hero-copy .lede { margin-bottom: 1.6rem; }


.cta { margin: 1.75rem 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 0.7rem;
  background: var(--tint);
  color: var(--tint-ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  border: 1px solid transparent;
}
.button svg { width: 1.1rem; height: 1.1rem; }
.button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.button:active { transform: translateY(0); }

.button.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: none;
}
.button.ghost:hover { background: var(--panel-2); }

/* Device stage -------------------------------------------------------------*/

.device-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 18rem;
}

.device-tv {
  width: 100%;
  max-width: 34rem;
  filter: drop-shadow(var(--shadow-lg));
}

.device-phone {
  position: absolute;
  width: 32%;
  min-width: 6.5rem;
  max-width: 9.5rem;
  right: 2%;
  bottom: -6%;
  filter: drop-shadow(var(--shadow-lg));
}

@media (max-width: 26rem) {
  .device-phone { right: -2%; bottom: -4%; width: 34%; }
}

/* Feature grid ---------------------------------------------------------- */

.feature-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
@media (min-width: 40rem) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card .icon-badge { margin-bottom: 0.9rem; }

.card h3 { font-size: 1.0625rem; }
.card p { color: var(--muted); font-size: 0.95em; margin-bottom: 0; }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.8rem;
  background: var(--tint-wash);
  color: var(--tint);
}
.icon-badge svg { width: 1.4rem; height: 1.4rem; }

.icon { width: 1.5rem; height: 1.5rem; }

/* Section header: icon-badge sits beside its heading, not above it --------
   The badge is top-aligned with the heading's first line rather than
   centred on the whole block, so a wrapped heading hangs under its own
   text instead of reflowing around the icon. Stays side by side down to
   the smallest supported width; the badge is small enough relative to a
   320px column that dropping it above the heading there would add a
   layout shift for no readability gain. */
.section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0 0 0.75rem;
}
.section-head .icon-badge { flex: none; margin-top: 0.1rem; }
.section-head h2 { margin: 0; }

/* Split section: copy beside a visual, alternating ------------------------*/

.section--split .shell {
  display: grid;
  gap: 2rem 3rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .section--split .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .section--split.is-reverse .shell { direction: rtl; }
  .section--split.is-reverse .shell > * { direction: ltr; }
}

.section-copy .lede { margin-bottom: 0; }
.section-visual { display: grid; place-items: center; }
.section-visual svg { width: 100%; height: auto; }

/* Format pills ------------------------------------------------------------*/

.format-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  margin: 1.4rem 0 0;
  font-family: var(--sans);
}
/* No capsule around them. The coloured square and the word carry the idea on
   their own, and eight bordered pills in a row read as a control panel. */
.format-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.format-pill .swatch {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.4rem;
  display: grid;
  place-items: center;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
}

/* Format scatter background -------------------------------------------------
   Small, coloured file glyphs arranged in the space around the section copy,
   never over it: above, below, and in the side gutters. This is a CSS grid
   with the copy pinned to its own "content" cell (.formats-layout > .prose)
   and the icons confined to the surrounding cells (.scatter-top/bottom/
   left/right). That makes the exclusion zone hold by construction rather
   than by hand-placed coordinates tuned to clear the text at a few measured
   widths: grid tracks never overlap, whatever height the heading/paragraph/
   chips end up needing at a given width and however they wrap, because the
   content cell and the icon cells are always different rows/columns.

   Below the 44rem breakpoint there isn't room for working gutters beside
   the text (see .prose's own measure below), so the side columns are
   dropped entirely and the icons live only in the top/bottom bands - fewer
   icons, placed above and below, rather than crammed into a gutter that's
   too narrow for them at 320-414px.

   Each glyph is tinted to its .format-pill swatch colour below, so the
   background and chips read as one palette. Nothing sits behind the text
   any more, so --scatter-opacity is tuned for a supporting-texture feel,
   not to survive AA contrast behind body copy. */

.section-formats { overflow: hidden; }

.formats-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "content" "bottom";
  row-gap: 1.75rem;
  max-width: calc(var(--measure) + 2.5rem);
  margin-inline: auto;
}

.formats-layout > .prose { grid-area: content; }

.scatter-region {
  display: flex;
  pointer-events: none;
}

.scatter-top,
.scatter-bottom {
  grid-column: 1 / -1;
  justify-content: space-evenly;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1.25rem;
}
.scatter-top { grid-area: top; }
.scatter-bottom { grid-area: bottom; }

.scatter-left,
.scatter-right {
  display: none;
}

.scatter-icon {
  flex: none;
  height: auto;
  aspect-ratio: 1 / 1;
  opacity: var(--scatter-opacity);
  transform: rotate(var(--r, 0deg));
}

.doc-pdf  { color: var(--scatter-pdf); }
.doc-epub { color: var(--scatter-epub); }
.doc-web  { color: var(--scatter-web); }
.doc-md   { color: var(--scatter-md); }
.doc-rtf  { color: var(--scatter-rtf); }
.doc-txt  { color: var(--scatter-txt); }

.t1, .b1 { width: 1.6rem;  --r: -12deg; }
.t2, .b2 { width: 1.25rem; --r: 9deg;   }
.t3, .b3 { width: 1.4rem;  --r: -6deg;  }

/* From 44rem there's enough room for a real gutter on each side of the
   34rem measure (see .prose) without squeezing it, so the icons split into
   four bands around the text instead of two. */
@media (min-width: 44rem) {
  .formats-layout {
    grid-template-columns: minmax(3.5rem, 1fr) minmax(0, calc(var(--measure) + 2.5rem)) minmax(3.5rem, 1fr);
    grid-template-areas: "top top top" "left content right" "bottom bottom bottom";
    column-gap: 1rem;
    max-width: 58rem;
  }

  .scatter-left,
  .scatter-right {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding-block: 0.75rem;
  }
  .scatter-left { grid-area: left; }
  .scatter-right { grid-area: right; }

  .l1, .r1 { width: 1.5rem;  --r: 10deg;  }
  .l2, .r2 { width: 1.15rem; --r: -14deg; }
  .l3, .r3 { width: 1.35rem; --r: 6deg;   }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) or (animation-timeline: scroll()) {
    .scatter-region {
      animation: scatter-drift auto linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 100%;
    }
  }
}

@keyframes scatter-drift {
  from { transform: translateY(-10px); }
  to   { transform: translateY(10px); }
}

/* Reflow / page comparison -------------------------------------------------*/

.compare {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: start;
  margin-top: 1.75rem;
}
@media (min-width: 40rem) {
  .compare { grid-template-columns: 1fr 1fr; }
}

.compare figure {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
.compare figcaption {
  font-family: var(--sans);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  line-height: 1.5;
  margin-top: 1rem;
}
.compare figcaption strong { display: block; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.375rem); margin-bottom: 0.35rem; }
.compare figcaption span { display: block; color: var(--muted); }
.compare svg { display: block; width: 100%; height: auto; border-radius: 0.5rem; }

/* Theme swatches ------------------------------------------------------------*/

.theme-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1.75rem;
}
@media (min-width: 34rem) {
  .theme-grid { grid-template-columns: repeat(4, 1fr); }
}
.theme-card {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.theme-card svg { display: block; width: 100%; height: auto; }
.theme-card figcaption {
  margin: 0;
  padding: 0.6rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}

/* Icon trio (cue line / countdown / mirror) ---------------------------------*/

.trio-item .icon-badge { margin-bottom: 0.7rem; }

/* Privacy + sync illustration -------------------------------------------- */

.privacy-mock {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  box-shadow: var(--shadow-md);
}
.privacy-mock svg { display: block; width: 100%; height: auto; }

/* Privacy points list - plain check + text, no chip/pill container. */

.privacy-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
}
.privacy-points li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.privacy-points .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: #2fa86b;
  flex-shrink: 0;
}

/* Reveal-on-scroll ---------------------------------------------------------
   Content is visible by default; this is decoration only. See script.js. */

.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) or (animation-timeline: scroll()) {
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      animation: reveal-in auto linear both;
      animation-timeline: view();
      /* "entry" (not "cover") because its end point is pinned to the
         subject's own size: fully visible if it fits the viewport,
         fully covering it otherwise. Distance needed is always
         min(subject height, viewport height), which the document
         always has room for since the subject is part of the document -
         unlike a "cover N%" endpoint, which is a share of subject-height
         plus viewport-height and can fall past the end of the page for a
         tall section or one with little scroll left below it (e.g. the
         last section on a short viewport). */
      animation-range: entry 0% entry 100%;
    }
  }

  .js .reveal.js-observe {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .js .reveal.js-observe.is-visible {
    opacity: 1;
    transform: none;
  }

  .device-tv, .device-phone {
    transition: transform 0.4s ease;
  }
}

@keyframes reveal-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* FAQ ---------------------------------------------------------------------*/

.faq .shell { max-width: 48rem; }
.faq .card { margin-bottom: 1rem; }
.faq .card p { color: var(--ink); font-size: 1em; }

/* Legal pages ---------------------------------------------------------------*/

/* 20% wider than the site's usual reading measure. A privacy policy and a set
   of terms are read start to finish rather than skimmed section by section,
   and the extra width means fewer, longer lines rather than more of them. */
.legal .prose { max-width: calc(var(--measure) * 1.2); }

.legal .prose h2 {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.legal .prose section:first-of-type h2,
.legal .prose > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.75rem; }

/* Support page --------------------------------------------------------------*/

@media (min-width: 40rem) {
}

/* Utility -------------------------------------------------------------------*/

.center { text-align: center; }
.max-copy { max-width: 40rem; margin-inline: auto; }

/* Frequently asked questions ------------------------------------------------

   Native <details>, so it opens with JavaScript off, is keyboard operable
   without any code of ours, and hands a screen reader the right announcement.
   The answers are in the HTML whether or not anyone opens them, which is what
   lets a crawler read them. */




/* Safari draws its own triangle through a pseudo-element the standard property
   does not reach. */




/* The plus becomes a minus by turning, so one drawing serves both states. */


@media (prefers-reduced-motion: reduce) {
}

/* The wordmark, centred above the page ---------------------------------------

   There is no navigation bar anywhere on the site any more: the brand mark
   carries that job instead. On the home page it is plain text, since you are
   already there; on the legal pages the same mark is a link back to / (#site-853). */

.hero-mark {
  display: block;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  text-align: center;
  text-decoration: none;
}
a.hero-mark:hover .brand-logo { opacity: 0.9; }
a.hero-mark:focus-visible { outline: 2px solid var(--tint); outline-offset: 6px; border-radius: 0.5rem; }

.brand-logo {
  display: block;
  /* Doubled again, so the mark carries the top of the page rather than sitting
     level with the name beneath it. */
  width: auto;
  height: clamp(4.8rem, 4.4rem + 1.2vw, 5.4rem);
  margin: 0 auto 0.45rem;
}

.brand-name {
  margin: 0;
  font-family: var(--sans);
  /* Twice the 1.125rem it was. */
  font-size: clamp(1.9rem, 1.7rem + 0.7vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.brand-name span { color: var(--muted); font-weight: 500; }
.brand-name span::before { content: " "; }

/* Frequently asked questions ------------------------------------------------

   Restored: a cleanup pass meant to drop the unused `.faq` rule from the old
   questions page matched `.faq-list`, `.faq-item` and the rest along with it,
   because the word boundary falls before the hyphen. */

.faq-list {
  margin-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--tint); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq-mark {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--tint);
  stroke-width: 2.25;
  stroke-linecap: round;
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-mark { transform: rotate(135deg); }
.faq-answer {
  padding: 0 0 1.35rem;
  max-width: 42rem;
}
.faq-answer p { margin: 0; color: var(--muted); }
  .faq-mark { transition: none; }