/* Legal and commerce pages (/contact, /pricing, /terms, /refunds, /privacy).
   Loaded AFTER landing.css, which supplies the tokens, the base type, the buttons, .wrap,
   .site-head and .site-foot. This file adds only what those pages need: a prose column, the
   pricing cards, the wider footer, and a landing-side copy of the app's .pv-* privacy classes.

   Dark mode. There is nothing about it in this file. These pages carry the same Light / Auto /
   Dark switch as /home: the same inline pre-paint bootstrap sets the class on `<body id="app">`
   before first paint and the same /static/landing/landing.js keeps it live, so the dark tokens
   landing.css declares on `#app.dark` apply here exactly as they do there. One preference
   (localStorage gmv_theme) therefore holds across /home, the five legal pages and the app.

   The .pv-* section at the bottom is a DELIBERATE second copy of the class names that
   static/css/80-features.css styles for the in-app Privacy & Security page. The app's rules are
   not moved or shared: /static/style.css is a built artefact whose hash is a snapshot gate
   (docs/refactor-baseline), the app's page must keep rendering exactly as it does, and the two
   sides read a different set of tokens even though both hang them off #app.
   One shared source for the COPY is what matters and that exists: the page body is generated at
   build time from static/js/privacy-copy.js, so the words can never drift. Only the layout is
   written twice, on purpose. */

/* ── the prose column ─────────────────────────────────────────────────────── */

.legal { padding: 34px 0 10px }
.legal .doc { max-width: 760px }

.legal h1 { font-size: 32px; margin-bottom: 6px }
.legal h2 {
  font-size: 21px; font-weight: 700; letter-spacing: -.3px;
  margin: 34px 0 10px; scroll-margin-top: 84px;
}
.legal h3 { font-size: 16px; margin: 22px 0 6px }
.legal p { color: var(--muted); font-size: 15px; max-width: 68ch }
.legal p strong, .legal li strong { color: var(--text); font-weight: 600 }

.doc-updated {
  font-size: 12.5px; font-weight: 600; color: var(--faint);
  margin: 0 0 22px; text-transform: none;
}
.doc-lead { font-size: 16.5px; color: var(--text); max-width: 64ch }

.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; max-width: 68ch }
.legal li { color: var(--muted); font-size: 15px; margin: 0 0 8px; line-height: 1.6 }

/* A block of company or contact facts a reviewer copies out of the page in one go. */
.factbox {
  background: var(--card); border: 1px solid var(--cardb); border-left: 3px solid var(--accent);
  border-radius: 14px; padding: 18px 20px; box-shadow: var(--sh);
  margin: 0 0 22px; max-width: 560px;
}
.factbox p { margin: 0 0 6px; color: var(--text); font-size: 15px }
.factbox p:last-child { margin-bottom: 0 }
.factbox .label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--faint); margin-bottom: 2px;
}

/* The small print under a section: true but not the point. */
.note { font-size: 13.5px; color: var(--faint) }

/* ── pricing cards ────────────────────────────────────────────────────────── */

.plans { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 26px 0 30px }
.plan {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--cardb); border-radius: 16px;
  padding: 22px 20px; box-shadow: var(--sh);
}
.plan h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.2px }
.plan .plan-price {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--text);
  margin: 6px 0 10px;
}
.plan .plan-per { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0 }
.plan .plan-alt { font-size: 14px; font-weight: 600; color: var(--text); margin: -4px 0 10px }
.plan .plan-sub { font-size: 14.5px; color: var(--muted); margin: 0 0 12px }
.plan ul { margin: 0 0 16px; padding-left: 20px }
.plan li { font-size: 14px; margin-bottom: 7px }
/* The action is the LAST thing in every card and it sits on the bottom edge, so three cards of
   different heights still line their buttons up. Anything that qualifies the offer goes above
   it, not below, or the cards stop agreeing on where the button is. */
.plan .plan-cta { margin: auto 0 0; padding-top: 12px }
.plan .note { margin-bottom: 0 }

.plan-badge {
  display: inline-block; align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
/* Both paid tiers are on sale since docs/coach-tier-plan.md (decision C7), so the two rules that
   dressed an unsellable one - .plan-badge.soon and the .btn-soon span that stood in for its button
   - are gone with the last thing on this page that could not be pressed. */

/* The footer is the same on all six public pages, so its rules live in landing.css (the row gap
   for the nine links, .foot-company and .foot-contact) and there is nothing to repeat here. */

@media (min-width: 640px) {
  .legal h1 { font-size: 40px }
  .legal { padding: 44px 0 10px }
  .plans { grid-template-columns: repeat(3, 1fr) }
}

/* ── the privacy page body (see the note at the top of this file) ─────────── */

.privacy { max-width: 760px; line-height: 1.6 }
.privacy a { color: var(--accent); text-decoration: none }
.privacy a:hover { text-decoration: underline }
.privacy .ic { display: block; flex: none; width: 18px; height: 18px }

.pv-updated { font-size: 12.5px; color: var(--faint); font-weight: 600; margin: 0 0 16px }
.pv-lead { font-size: 16px; color: var(--text); margin: 0 0 20px; max-width: 64ch }
.pv-h {
  font-size: 18px; font-weight: 700; letter-spacing: -.2px; color: var(--text);
  margin: 30px 0 10px; scroll-margin-top: 84px;
}
.pv-p { font-size: 15px; color: var(--muted); margin: 0 0 12px; max-width: 68ch }
.pv-p strong, .pv-list strong { color: var(--text); font-weight: 600 }
.pv-muted { font-size: 13.5px; color: var(--faint) }
.pv-list { margin: 0 0 12px; padding-left: 22px; max-width: 68ch }
.pv-list li { font-size: 15px; color: var(--muted); margin: 0 0 8px; line-height: 1.6 }

.pv-glance {
  display: grid; gap: 12px; padding: 18px 20px; margin: 6px 0 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.pv-glance-item {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; color: var(--text); line-height: 1.5;
}
.pv-glance-item .ic { color: var(--accent); margin-top: 2px }

/* The tables carry a min-width, so the wrapper is what scrolls on a phone. Without it the page
   itself would scroll sideways and the overflow test on 375px would be right to fail. */
.pv-table-wrap {
  border: 1px solid var(--cardb); border-radius: 12px; overflow-x: auto; margin: 14px 0 8px;
}
.pv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 420px }
.pv-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--faint); font-weight: 700; padding: 9px 13px;
  border-bottom: 1px solid var(--cardb2); background: var(--seg);
}
.pv-table td {
  padding: 10px 13px; border-bottom: 1px solid var(--cardb);
  color: var(--muted); vertical-align: top; line-height: 1.5;
}
.pv-table td strong { color: var(--text) }
.pv-table tr:last-child td { border-bottom: none }
.pv-loc { white-space: nowrap; color: var(--faint); font-size: 12.5px }

.pv-tech {
  margin: 24px 0 10px; padding: 12px 15px; border-radius: 12px;
  background: var(--seg); border: 1px solid var(--cardb);
}
.pv-tech > summary { font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; list-style: none }
.pv-tech > summary::-webkit-details-marker { display: none }
.pv-tech > summary::before {
  content: "\203A"; display: inline-block; margin-right: 8px;
  color: var(--accent); font-weight: 800; transition: transform .15s;
}
.pv-tech[open] > summary::before { transform: rotate(90deg) }
.pv-tech .pv-list { margin-top: 12px; margin-bottom: 0 }
.pv-contact {
  font-size: 14px; color: var(--muted); margin: 24px 0 2px;
  padding-top: 16px; border-top: 1px solid var(--cardb);
}

/* ── justified prose ──────────────────────────────────────────────────────── */

/* Peter's ask: the running text of the five public pages is flush on both edges. Only the
   RUNNING text. Justification is applied by the child combinator from `.doc` and by the .pv-*
   prose classes, so everything that is not a full-width paragraph keeps its ragged right on
   purpose: the headings, the pricing cards (short lines and feature lists inside .plans), the
   .factbox blocks (the contact and company details, and the refunds formula line, all narrower
   than the column), the .doc-updated date, the privacy tables, the .pv-glance items and the
   footer. A justified line only looks right when it is long enough to distribute the space
   across, and none of those are.
   `hyphens: auto` comes with it and is not optional: without it the same 68ch column opens
   rivers between the words. It needs a language on the document to pick a dictionary, and every
   one of the five pages carries `lang="en"` on <html>. */
.legal .doc > p:not(.factbox):not(.doc-updated),
.legal .doc > ul > li,
.legal .doc > ol > li,
.privacy .pv-lead,
.privacy .pv-p,
.privacy .pv-muted,
.privacy .pv-list > li {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* A paragraph that carries its own line breaks is not running text: the privacy page's
   "Registered operator" block is one <p class="pv-p"> with a <br> inside it, and a justified line
   that ends on a forced break gets its remaining space distributed across four words. Those
   paragraphs keep their ragged right. `:has()` is the only way to ask the question in CSS; where
   it is not understood the paragraph stays justified, which is what it was a moment ago. */
.legal .doc > p:has(br),
.privacy .pv-p:has(br),
.privacy .pv-lead:has(br) {
  text-align: left;
}

/* A link is never hyphenated. The dictionary happily breaks github.com/AppendinoCom/feedback
   after "Ap" and the reader then sees a hyphen that is not part of the address. Links still wrap
   at the breaks they already carry, such as a slash, they just gain no character of their own. */
.legal .doc > p a,
.legal .doc > ul > li a,
.legal .doc > ol > li a,
.privacy .pv-p a,
.privacy .pv-lead a,
.privacy .pv-muted a,
.privacy .pv-list > li a {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* A phone column is about 40 characters wide, which is where justification starts to fight back:
   one long unbreakable token (an e-mail address, ec.europa.eu/consumers/odr, a GitHub path) is
   enough to stretch a whole line. Links are the only such tokens in this copy, so they are the
   only thing allowed to break mid-word, and only on the narrow layout. */
@media (max-width: 639px) {
  .legal .doc > p a,
  .legal .doc > ul > li a,
  .legal .doc > ol > li a,
  .privacy .pv-p a,
  .privacy .pv-lead a,
  .privacy .pv-muted a,
  .privacy .pv-list > li a {
    overflow-wrap: anywhere;
  }
}