/* /legal/* — terms, privacy, refunds, contact.
 *
 * Loaded after qyverix.css and marketing.css, and ADDITIVE ONLY: it overrides
 * one app rule (`.page`, scoped to `.lg-page`) and touches nothing else. The
 * reason it is its own file rather than a section of marketing.css is that
 * none of these routes renders inside `.mkt`, so the marketing layer never
 * reached them -- they were left in bare console styling, which is 13.5px type
 * across a 1280px column.
 *
 * THE ONE THING THIS FILE IS FOR is the measure. A legal document set to the
 * full width of a control panel runs about 150 characters to the line; the eye
 * loses the return sweep somewhere past 90 and starts re-reading lines. These
 * are the pages where re-reading a line costs somebody money, so the article
 * column is capped at 500px -- 76 characters, measured with a Range rather
 * than estimated -- and everything else here exists to make that column
 * findable and citable:
 * a contents list that marks where you are, an anchor on every section, and a
 * date you can check.
 *
 * Type is the marketing page's pairing, Fraunces for display and Outfit for
 * prose, because /legal/* is reached from that page's footer and should not
 * read as a different website. Scoped to .lg-page so the console keeps Inter
 * and its 550/650/750 half-steps.
 */

/* The container is the band system here, so the app's page padding and
   1280px cap both come off -- the hero has to reach the edges. */
.page.lg-page { max-width: none; padding: 0; }

.lg-page {
  font-family: Outfit, Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-optical-sizing: auto;
  background: var(--base);
}

/* 900, against the 1120 the marketing nav and footer are set to. Matching
   1120 was tried, and it does align this page's left edge with the brand in
   the bar above and the columns in the footer below -- but it also leaves 290
   blank pixels to the right of every paragraph, and makes the hero visibly
   wider than the document under it. A page whose own two halves agree reads
   better than one that agrees with the furniture around it: the band
   backgrounds are full-bleed either way, so nothing boxy is left hanging. */
.lg-wrap {
  max-width: 900px; margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

/* ══ the title page ════════════════════════════════════════════════════════
 *
 * The wash sits top-RIGHT, not top-left as on the marketing hero, because
 * this hero's copy is left-aligned and short: the right half is where the
 * emptiness is, so that is where the colour goes.
 */
.lg-hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(760px 380px at 86% -25%,
                    color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    var(--base);
}
.lg-hero-in {
  display: grid; gap: clamp(26px, 3.5vw, 48px); align-items: start;
  padding-block: clamp(34px, 5.5vw, 64px) clamp(30px, 4vw, 48px);
}
/* Centred against the summary, not top-aligned to it. The Terms have seven
   summary lines and a two-line title, so aligning both to the top left a
   280px hole under the headline that read as something having failed to
   load. */
.lg-hero-in.has-short { align-items: center; }
/* Two columns only when there is a summary to put in the second one. The
   contact page has four lines and no summary, and a 40% empty column beside
   a heading reads as something that failed to load. */
@media (min-width: 1020px) {
  .lg-hero-in.has-short { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  /* The switcher spans both, so the hero's second row is one wide strip
     and not a chip block under whichever column happens to be shorter. */
  .lg-hero-in.has-short > .lg-switch { margin-top: 8px; }
}
.lg-hero-copy { min-width: 0; }
/* The not-found page is a hero and nothing else. The hairline under a normal
   hero separates it from the document; here it drew a line across the screen
   and promised a page that was not coming. */
.lg-hero-only { border-bottom: 0; }
.lg-hero-only .lg-hero-in { padding-bottom: clamp(40px, 7vw, 90px); }

.lg-kicker {
  display: inline-block; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
  background: var(--accent-surface); border-radius: var(--rp);
  padding: 4px 12px; margin-bottom: 16px;
}

.lg-h1 {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600; font-size: clamp(29px, 4vw, 42px);
  line-height: 1.05; letter-spacing: -.02em; color: var(--text-1);
}
/* The italic clause is the document's own one-line description, moved into the
   headline rather than left below it as a second paragraph saying the same
   thing. It is set at half the roman size and on its own line: at full size a
   fifty-character sentence in italic serif swallows the document's name, which
   is the one string a payment reviewer is scanning for. */
.lg-em {
  display: block; font-style: italic; font-weight: 600; color: var(--accent);
  font-size: .5em; line-height: 1.22; letter-spacing: -.01em;
  margin-top: .5em; max-width: 26ch;
}

/* The stamp line. A legal page with no date is one nobody can tell has been
   superseded, so the date is a real element with a machine-readable datetime
   and not a grey footnote. */
.lg-facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-top: 24px;
}
.lg-fact {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--rp);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.lg-fact svg { width: 13px; height: 13px; color: var(--accent); }
.lg-fact time { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── the other three documents ────────────────────────────────────────────
 * On every page, because these are read as a set -- a reviewer wants the
 * refund policy and then the terms -- and the only other list of them is the
 * marketing footer, two navigations away from here.
 *
 * Its own row across the bottom of the hero rather than a block inside the
 * headline column: in a 410px column the fourth chip orphans onto a line of
 * its own, and one lonely "Contact" under three others reads as a mistake. */
.lg-switch {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.lg-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 14px; border-radius: var(--rp);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  transition: color .18s, border-color .18s, background .18s;
}
.lg-chip svg { width: 14px; height: 14px; }
.lg-chip:hover { color: var(--text-1); border-color: var(--border-strong); }
.lg-chip.is-here {
  background: var(--accent-surface); color: var(--accent); font-weight: 600;
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* ══ in short ══════════════════════════════════════════════════════════════
 *
 * Written only where every line traces to a sentence in the document, and
 * each line links to the section it came from so the paraphrase can be
 * checked in one click. The accent edge marks it as apparatus rather than
 * text: it is a way in, not a clause, and the note above the list says so.
 */
.lg-tldr {
  min-width: 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r3);
  background: var(--surface);
  padding: clamp(18px, 2.2vw, 24px);
}
.lg-tldr-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}
.lg-tldr-h svg { width: 15px; height: 15px; }
.lg-tldr-note {
  font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin-top: 8px;
}
.lg-tldr-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.lg-tldr-list li {
  position: relative; padding-left: 20px;
  font-size: 14px; line-height: 1.55; color: var(--text-2);
}
.lg-tldr-list li::before {
  content: ''; position: absolute; left: 1px; top: .6em;
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}
.lg-tldr-list a {
  font-weight: 600; color: var(--text-1);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.lg-tldr-list a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ══ contents and article ══════════════════════════════════════════════════ */
.lg-cols {
  display: grid; gap: clamp(24px, 3vw, 44px);
  padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px);
}
@media (min-width: 980px) {
  .lg-cols { grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
  /* No contents list means no rail to leave room for. */
  .lg-cols.lg-solo { grid-template-columns: minmax(0, 1fr); }
}

.lg-toc {
  border: 1px solid var(--border); border-radius: var(--r3);
  background: var(--surface); padding: 14px 8px 10px;
}
/* Sticky only where there is a column for it to stick in. Below the
   breakpoint it is a card at the top of the document, which is what a
   contents list is on paper anyway. */
@media (min-width: 980px) {
  .lg-toc {
    position: sticky; top: 20px;
    max-height: calc(100vh - 40px); overflow-y: auto;
  }
}
.lg-toc-h {
  margin: 0 0 8px; padding-inline: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3);
}
.lg-toc-list { list-style: none; margin: 0; padding: 0; }
.lg-toc-list a {
  display: flex; gap: 10px; align-items: baseline; min-height: 30px;
  padding: 6px 10px 6px 8px; border-radius: var(--r2);
  border-left: 2px solid transparent;
  font-size: 13px; line-height: 1.35; color: var(--text-2);
  transition: color .15s, background .15s, border-color .15s;
}
.lg-toc-list a:hover { background: var(--surface-alt); color: var(--text-1); }
/* Three signals on the current section -- a bar, a tint and the accent --
   because this is the one piece of state on the page and it is read out of
   the corner of the eye while the eye is on the prose. */
.lg-toc-list a.is-here {
  color: var(--accent); font-weight: 600;
  background: var(--accent-surface);
  border-left-color: var(--accent);
}
.lg-toc-n {
  flex: none; min-width: 13px; font-size: 11px;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.lg-toc-list a.is-here .lg-toc-n { color: var(--accent); }

.lg-article { min-width: 0; }

.lg-sec {
  /* THE MEASURE, and the reason this file exists. Measured, not guessed: the
     first draft capped paragraphs at 36em on the theory that a character runs
     about half an em, and a Range walked across the rendered line came back
     with 88 of them -- Outfit is a narrow geometric and its average character
     is nearer .41em. 500px at 16px is 76 characters, inside Bringhurst's
     45-75 for a single column and not so starved that it looks like a column
     of a newspaper beside a 232px index.

     The cap is on the SECTION and not on the paragraph, so the hairline
     between two sections ends where the text ends. On the paragraph it left
     every rule running 190px past the last word above it. */
  max-width: 500px;
  padding-block: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--border);
  /* The anchor lands the section's own top rule just below the viewport
     edge, so a cited clause arrives with its heading visible rather than
     flush against the top of the screen. */
  scroll-margin-top: 20px;
}
.lg-sec:first-child { border-top: 0; padding-top: 0; }

.lg-h2 {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600; font-size: clamp(20px, 2.1vw, 25px);
  line-height: 1.22; letter-spacing: -.012em; color: var(--text-1);
  margin-bottom: 14px;
}
/* Sections are numbered so a clause can be named out loud -- "section 3,
   acceptable use" -- which is how anyone actually refers to one of these on a
   phone call. The number is the same one the contents list shows. */
.lg-num {
  display: inline-block; margin-right: 11px; vertical-align: 4px;
  padding: 3px 9px; border-radius: var(--rp);
  font-family: Outfit, Inter, system-ui, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--accent); background: var(--accent-surface);
  font-variant-numeric: tabular-nums;
}
/* 24px square is the tap minimum, not a design choice -- it is a standalone
   control, and at phone width a 13px glyph is not a target. */
.lg-anchor {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 4px; vertical-align: -4px;
  border-radius: var(--r1); font-family: var(--mono); font-size: 13px;
  color: var(--text-3); opacity: .4;
  transition: opacity .15s, color .15s, background .15s;
}
.lg-sec:hover .lg-anchor { opacity: 1; }
.lg-anchor:hover, .lg-anchor:focus-visible {
  opacity: 1; color: var(--accent); background: var(--accent-surface);
}

/* 16px, not the console's 13.5px. This is the one place in the product where
   someone reads several hundred words in a row rather than scanning a table,
   and the width the section carries above is calibrated to this size. */
.lg-sec p, .lg-sec li {
  font-size: 16px; line-height: 1.72; color: var(--text-2);
}
.lg-sec p + p { margin-top: 14px; }
.lg-sec strong { color: var(--text-1); font-weight: 600; }
.lg-sec a {
  color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.lg-sec a:hover { text-decoration-color: var(--accent); }

/* A diamond rather than a disc, and hung outside the text block, so a list of
   exclusions reads as a list of separate items and not as one grey paragraph
   with breaks in it. */
.lg-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.lg-sec li { position: relative; padding-left: 22px; }
.lg-sec li::before {
  content: ''; position: absolute; left: 2px; top: .66em;
  width: 6px; height: 6px; transform: rotate(45deg);
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.lg-note { font-size: 13px; color: var(--text-3); }

.lg-foot {
  max-width: 500px;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 8px 20px; margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: 20px; border-top: 1px solid var(--border);
}
.lg-foot p { font-size: 13px; color: var(--text-3); }
.lg-foot a { color: var(--accent); }

/* ══ motion ════════════════════════════════════════════════════════════════
 * Only the title block rises, and only because marketing/motion.js has
 * already proved it can un-hide it. The sections themselves are never
 * animated: a clause that fades in on scroll is a clause that is missing from
 * a print, a full-page capture and an anchor jump, which are three of the
 * four ways anyone arrives at a document like this. */
@media (prefers-reduced-motion: reduce) {
  .lg-chip, .lg-toc-list a, .lg-anchor { transition: none; }
}

/* ══ print ═════════════════════════════════════════════════════════════════
 * These get printed and attached to things. Navigation is furniture on paper,
 * the measure cap wastes half a page, and a section split across a page break
 * is how a clause gets misread. No colours are set here: the browser's own
 * print rendering already flattens them, and overriding them with hex would
 * be the one place in this file that stops speaking in tokens. */
@media print {
  .lg-toc, .lg-switch, .lg-anchor, .lg-kicker { display: none; }
  .lg-hero { background: none; }
  .lg-cols { display: block; padding-block: 0; }
  .lg-sec { break-inside: avoid; }
  .lg-sec, .lg-foot, .lg-em { max-width: none; }
}