/* Privacy notice - page-specific layout only.
 *
 * Loads AFTER styles.css and css/shared.css and only ADDS selectors: every class here is new
 * (.priv-*) or a compound of an existing class with a new one (.dtable-wrap.priv-table,
 * .tiles-mini.priv-tiles), so nothing the home page or another inner page uses can move.
 *
 * This is a reading page, so the whole thing is built around one measure and one sticky
 * contents rail. .dtable, .notice, .card, .disc, .list-check and .tiles-mini come from the
 * shared sheets unchanged.
 */

/* ------------------------------------------------------------------ 1. Title block */
.priv-head { background: var(--sage-2); border-bottom: 1px solid var(--sage-3); }
.priv-head__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-lg); align-items: start; }
.priv-head__copy { min-width: 0; }
.priv-title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1.07; letter-spacing: -.024em; margin: 0 0 .45em; text-wrap: balance; max-width: 17ch; }
.priv-lead { max-width: 58ch; margin: 0 0 24px; }

.priv-meta { list-style: none; margin: 0; padding: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 24px; border-top: 1px solid var(--sage-3); }
.priv-meta li { min-width: 0; }
.priv-meta span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.priv-meta strong { display: block; font-size: .95rem; color: var(--forest); }

/* the side rail: the warning, then the three things most people came here to check */
.priv-head__side { min-width: 0; display: grid; gap: 16px; align-content: start; }
.priv-warn { background: var(--warm-white); }
.priv-quick { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.priv-quick li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--forest); font-weight: 600; }
.priv-quick .icon { flex: none; margin-top: 2px; width: 19px; height: 19px; color: var(--leaf); }

/* ------------------------------------------------------------------ 2. Body layout */
.priv-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: clamp(32px, 4vw, 56px); }

.priv-toc { position: sticky; top: calc(var(--header-h) + 24px); min-width: 0; }
.priv-toc__title { margin: 0 0 12px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.priv-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 1px; border-left: 2px solid var(--line); }
.priv-toc__list li { counter-increment: toc; min-width: 0; }
.priv-toc__list a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.priv-toc__list a::before { content: counter(toc) ". "; color: var(--line-2); font-variant-numeric: tabular-nums; }
.priv-toc__list a:hover { color: var(--forest); border-left-color: var(--leaf); }
.priv-toc__list a:focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------------ 3. The notice itself */
/* The column is wide enough for the two tables; the prose inside it keeps a reading measure,
   so a paragraph never runs to 120 characters while a table still gets the room it needs. */
.priv-doc { min-width: 0; max-width: 1020px; }
.priv-sec { scroll-margin-top: calc(var(--header-h) + 24px); }
.priv-sec + .priv-sec { margin-top: clamp(30px, 3.4vw, 46px); padding-top: clamp(30px, 3.4vw, 46px); border-top: 1px solid var(--line); }
.priv-sec h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); margin: 0 0 14px; max-width: 26ch; }
.priv-sec p { color: var(--ink); max-width: 72ch; }
.priv-sec p strong { color: var(--forest); }
.priv-sec > p:last-child { margin-bottom: 0; }

.priv-list { margin: 0 0 1em; max-width: 78ch; }
.priv-list li { color: var(--ink); }

/* a quieter block for the "here is the demo reality" asides inside a section */
.priv-aside { background: var(--sage-2); border-left: 4px solid var(--leaf); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 18px; font-size: .92rem; margin: 20px 0 0; max-width: 86ch; }
.priv-sec p.priv-aside { max-width: 86ch; }
.priv-aside strong { color: var(--forest); }

.dtable-wrap.priv-table { margin: 18px 0; }
.priv-table .dtable { font-size: .88rem; }
.priv-table .dtable tbody th { width: 26%; }

/* rights: term and definition, read as a list rather than a form */
.priv-rights { margin: 0; display: grid; gap: 0; }
.priv-rights dt { font-weight: 800; color: var(--forest); font-size: .98rem; padding-top: 14px; border-top: 1px solid var(--line); }
.priv-rights dt:first-child { padding-top: 0; border-top: 0; }
.priv-rights dd { margin: 4px 0 14px; color: var(--muted); font-size: .93rem; max-width: 78ch; }
.priv-rights dd:last-child { margin-bottom: 0; }

/* contact: the mailbox card beside the four promises */
.priv-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; margin: 20px 0 0; }
.priv-contact__card { display: grid; gap: 8px; align-content: start; }
.priv-contact__card h3 { margin: 0; max-width: none; }
.priv-contact__card p, .priv-sec .priv-contact__card p { margin: 0; max-width: none; }
/* break-word, not anywhere: the address may wrap, but only where it has to */
.priv-mail { font-size: 1rem; overflow-wrap: break-word; }
.priv-sec .priv-mail { max-width: none; }
.priv-mail strong { color: var(--forest); }

.priv-promise { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.priv-promise li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--muted); }
.priv-promise .icon { flex: none; margin-top: 3px; width: 20px; height: 20px; color: var(--leaf); }
.priv-promise strong { color: var(--forest); }

.priv-end { margin-top: 22px; }

/* ------------------------------------------------------------------ 4. Where next */
.priv-next__title { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); margin: 0 0 22px; }
.tiles-mini.priv-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .priv-head__inner { grid-template-columns: 1fr; }
  .priv-title { max-width: 22ch; }
  .priv-body { grid-template-columns: 1fr; gap: 28px; }
  .priv-toc { position: static; background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
  .priv-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; }
  .priv-toc__list a { padding-left: 0; margin-left: 0; border-left: 0; }
  .priv-toc__list a:hover { text-decoration: underline; }
  .priv-doc { max-width: none; }
  .tiles-mini.priv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .priv-contact { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .priv-toc__list { grid-template-columns: 1fr; }
  .tiles-mini.priv-tiles { grid-template-columns: 1fr; }
}
/* Stacked on a phone, shared.css right-aligns each value against its label. That is right for a
   figure and wrong for a sentence, and every value in these two tables is a sentence - so the
   label goes on its own line and the prose reads from the left, as prose does. */
@media (max-width: 699px) {
  .priv-table .dtable tbody th { width: auto; }
  .priv-table .dtable td, .priv-table .dtable tbody th { display: block; text-align: left; }
  .priv-table .dtable td::before, .priv-table .dtable tbody th::before { display: block; margin-bottom: 4px; }
}