/* ─────────────────────────────────────────────────────────────────────────
   frinq.in legal pages: privacy, terms, privacy choices, cookies, delete,
   dating safety. Loads after css/frinq-poster.css (tokens, Inter Tight) and
   page.css (Fine Checklist, the footer), so these pages share the homepage's
   ground, grain, hand and footer.

   Made for reading on a phone: one column, about 68ch, Inter Tight at 17px+,
   real headings, tables that scroll inside their own box. No hover-only
   behaviour; nothing here moves except the hand writing the title word in.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --lg-todo: #FFE14D;      /* draft bar and [COUNSEL] / [FILL] marks (none left since launch on 3 Oct 2026; kept in case a draft needs them) */
  --lg-todo-edge: #8A6D00;
  --lg-error: #A3231A;     /* 6.2:1 on paper hi */
  --lg-hint: #4A4642;
  --lg-place: #6B655E;     /* placeholder, 5.1:1 on paper hi */
}

html { scroll-padding-top: 20px; }
.lg { background: var(--fq-paper); color: var(--fq-ink); }

/* ── draft bar + skip link ── */
.lg-draft { margin: 0; padding: 9px 16px; background: var(--lg-todo); color: var(--fq-ink); text-align: center;
  font: 700 14px/1.35 var(--fq-print); letter-spacing: -.005em; box-shadow: inset 0 -1px 0 #12111026; }
.lg-skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 16px; background: var(--fq-ink); color: var(--fq-paper);
  font: 700 15px/1 var(--fq-print); text-decoration: none; border-radius: 2px; }
.lg-skip:focus { top: 12px; }

/* ── the sheet: paper ground, grain tiled (the portrait grain would stretch over a long page) ── */
.lg-sheet { padding-bottom: clamp(72px, 12vw, 120px); }
.lg-sheet.fq-ground::after { background: url("../images/paper-landscape.jpg") 0 0 / 1200px auto repeat; }

.lg-head { max-width: calc(68ch + 40px); margin: 0 auto; padding: 18px 20px 0; font-size: 18px; text-align: center; }
.lg-logo { display: inline-flex; align-items: center; min-height: 48px; font-size: 34px; color: var(--fq-ink); text-decoration: none; }

/* ── the text ── */
.lg-doc { --fs: clamp(17px, 16px + .25vw, 18.5px); max-width: calc(68ch + 40px); margin: 0 auto; padding: clamp(28px, 6vw, 56px) 20px 0;
  font: 400 var(--fs) / 1.62 var(--fq-print); color: var(--fq-ink); font-kerning: normal; hanging-punctuation: first; }
.lg-doc > * { max-width: 68ch; }
.lg-doc p, .lg-doc ul, .lg-doc ol { margin: 0 0 1.05em; }
.lg-doc strong { font-weight: 700; }
.lg-doc em { font-style: italic; }
.lg-doc code { font: 500 .88em/1 ui-monospace, "SF Mono", Menlo, monospace; padding: .12em .32em; border-radius: 2px; background: #1211100f; white-space: nowrap; }
.lg-doc a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; text-decoration-color: #12111080;
  overflow-wrap: anywhere; -webkit-tap-highlight-color: #E4412A33; }
.lg-doc a:active { color: #AD3842; text-decoration-color: currentColor; }

.lg-h1 { margin: 0 0 18px; font: 800 clamp(40px, 10.5vw, 76px) / 1.02 var(--fq-print); letter-spacing: -.04em; text-wrap: balance; color: var(--fq-ink); }
.lg-h1 .fq-em { color: #AD3842; font-size: 1.18em; margin-right: .04em; }
.lg-meta { font-size: 15px; line-height: 1.6; color: var(--lg-hint); margin-bottom: 26px !important; }
.lg-meta strong { color: var(--fq-ink); }
.lg-lead { font-size: clamp(19px, 17px + .6vw, 22px); line-height: 1.5; letter-spacing: -.01em; text-wrap: pretty; }

/* section heads: a short hand-drawn stroke above each, like the homepage's rules */
.lg-doc h2 { position: relative; margin: clamp(56px, 9vw, 76px) 0 14px; padding-top: 28px;
  font: 800 clamp(25px, 5.2vw, 34px) / 1.1 var(--fq-print); letter-spacing: -.032em; text-wrap: balance; }
.lg-doc h2::before { content: ""; position: absolute; left: -2px; top: 0; width: min(200px, 52%); height: 9px; background: currentColor; rotate: -.6deg;
  -webkit-mask: url("../assets/rule-wavy.svg") center / 100% 100% no-repeat; mask: url("../assets/rule-wavy.svg") center / 100% 100% no-repeat; }
.lg-doc h3 { margin: 36px 0 10px; font: 800 clamp(19px, 4.4vw, 22px) / 1.25 var(--fq-print); letter-spacing: -.02em; text-wrap: balance; }
.lg-doc h2 + h3 { margin-top: 22px; }

/* lists: a short ink dash per item; numbered steps in the hand, like "How it works" */
.lg-doc ul, .lg-doc ol { padding: 0; list-style: none; }
.lg-doc li { position: relative; padding-left: 28px; margin-bottom: .55em; }
.lg-doc ul > li::before { content: ""; position: absolute; left: 3px; top: .8em; width: 13px; height: 2px; border-radius: 2px; background: currentColor; rotate: -9deg; }
.lg-doc ol { counter-reset: lg; }
.lg-doc ol > li { counter-increment: lg; padding-left: 46px; min-height: 2.2em; margin-bottom: .9em; }
.lg-doc ol > li::before { content: counter(lg) "."; position: absolute; left: 0; top: -.32em; font: 400 1.75em/1 var(--fq-hand); rotate: -6deg; color: #AD3842; }

/* unresolved items: yellow, loud, until counsel and the owner fill them */
mark.lg-todo { padding: .06em .34em; border-radius: 2px; background: var(--lg-todo); color: var(--fq-ink); font-weight: 600; font-size: .9em;
  box-shadow: 0 0 0 1px #8A6D0055; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ── contents ── */
.lg-toc { margin: 34px 0 8px; padding: 26px 22px 14px; font-size: 16px; line-height: 1.4; }
.lg-toc-h { margin: 0 0 14px !important; font-size: 17px; color: var(--fq-ink); }
.lg-doc .lg-toc ol { counter-reset: none; margin: 0; }
.lg-doc .lg-toc li { padding: 0; margin: 0; min-height: 0; }
.lg-doc .lg-toc li::before { content: none; }
.lg-doc .lg-toc a { display: flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; border-bottom: 1px solid #1211101a; }
.lg-doc .lg-toc li:last-child a { border-bottom: 0; }
@media (min-width: 700px) {
  .lg-toc ol { columns: 2; column-gap: 28px; }
  .lg-doc .lg-toc li { break-inside: avoid; }
  .lg-doc .lg-toc li:last-child a { border-bottom: 1px solid #1211101a; }
}

/* ── tables: their own scroll box, edge shadows say there's more ── */
.lg-table { margin: 20px 0 30px; max-width: 100% !important; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: 2px;
  background:
    linear-gradient(90deg, var(--fq-paper-hi) 30%, #F6F3ED00) left / 36px 100% no-repeat local,
    linear-gradient(270deg, var(--fq-paper-hi) 30%, #F6F3ED00) right / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, #12111052, #12111000) left / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, #12111052, #12111000) right / 18px 100% no-repeat scroll,
    var(--fq-paper-hi);
  box-shadow: 0 0 0 1px #1211101a, 0 1px 0 #1211100d, 0 12px 18px -16px #12111066;
  scrollbar-width: thin; scrollbar-color: #12111055 transparent; }
.lg-table:focus-visible { outline: 2px solid var(--fq-ink); outline-offset: 4px; }
.lg-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.lg-cols-3 table { min-width: 600px; }
.lg-cols-4 table { min-width: 760px; }
.lg-table th, .lg-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #1211101c; }
.lg-table thead th { padding-top: 15px; padding-bottom: 11px; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--lg-hint); border-bottom: 1.5px solid var(--fq-ink); }
.lg-table tbody th { font-weight: 700; min-width: 8em; }
.lg-table tbody tr:last-child > * { border-bottom: 0; }
.lg-table mark.lg-todo { font-size: .88em; }

/* ── the background-screening notice (NJ asks for bold capitals, 12pt+) ── */
.lg-notice { margin: 6px 0 30px !important; padding: 20px 22px; border-radius: 2px; background: var(--fq-ink); color: var(--fq-paper-hi);
  font: 800 clamp(18px, 4.6vw, 22px) / 1.32 var(--fq-print); letter-spacing: .005em; box-shadow: 0 16px 24px -20px #121110cc; }
.lg-notice strong { font-weight: 800; }

/* ── buttons ── */
.lg-cta { margin: 22px 0 8px !important; }
.lg-doc .fq-btn { font-weight: 700; text-decoration: none; color: var(--fq-paper); background: var(--fq-ink); min-width: min(100%, 280px); }
.fq-btn:disabled { cursor: progress; background: transparent; color: var(--fq-ink); box-shadow: inset 0 0 0 1.5px #12111066; }

/* ── the advertising switch ── */
.lg-switch-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 18px; margin: 22px 0 18px; padding: 16px 18px;
  background: var(--fq-paper-hi); border-radius: 2px; box-shadow: 0 0 0 1px #1211101a, 0 1px 0 #1211100d, 0 10px 16px -14px #12111066; }
.lg-switch-row[hidden] { display: none; }
.lg-switch-label { font-weight: 700; line-height: 1.35; }
.lg-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; min-width: 48px; margin: -4px -4px -4px 0; padding: 4px;
  border: 0; border-radius: 2px; background: none; color: var(--fq-ink); cursor: pointer; font: 700 16px/1 var(--fq-print); -webkit-tap-highlight-color: transparent; }
.lg-switch-track { position: relative; width: 58px; height: 32px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--fq-ink); transition: background-color .25s var(--fq-ease); }
.lg-switch-knob { position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 1px; background: var(--fq-ink); transition: translate .3s var(--fq-ease), background-color .25s; }
.lg-switch[aria-checked="true"] .lg-switch-track { background: var(--fq-ink); }
.lg-switch[aria-checked="true"] .lg-switch-knob { translate: 26px 0; background: var(--fq-paper-hi); }
.lg-switch-word { min-width: 2em; text-align: left; }
.lg-switch[aria-disabled="true"] { cursor: not-allowed; }
.lg-switch[aria-disabled="true"] .lg-switch-track { background: transparent; box-shadow: inset 0 0 0 1.5px #12111080; background-image: repeating-linear-gradient(-45deg, #12111014 0 4px, transparent 4px 8px); }
.lg-switch[aria-disabled="true"] .lg-switch-knob { background: #12111080; }
.lg-switch:focus-visible { outline: 2px solid var(--fq-ink); outline-offset: 3px; }
.lg-switch:active .lg-switch-knob { scale: .9; }
.lg-switch-state { grid-column: 1 / -1; margin: 0 !important; font-size: 15px; line-height: 1.45; color: var(--lg-hint); }

/* ── forms ── */
.lg-form { display: grid; gap: 30px; margin: 26px 0 10px; }
.lg-form[hidden] { display: none; }
.lg-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.lg-label { display: block; margin: 0 0 12px; padding: 0; font: 800 clamp(19px, 4.4vw, 21px) / 1.25 var(--fq-print); letter-spacing: -.02em; }
.lg-opt-tag { margin-left: 6px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--lg-hint); }
.lg-hint { margin: -6px 0 12px !important; font-size: 15px; line-height: 1.45; color: var(--lg-hint); }

.lg-opts { display: grid; gap: 12px; }
@media (min-width: 640px) { .lg-opts { grid-template-columns: 1fr 1fr; gap: 14px 16px; } }
.lg-opt { display: flex; align-items: center; min-height: 56px; padding: 14px 18px; cursor: pointer; line-height: 1.3; -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--fq-ease); }
.lg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lg-opt:active { transform: translateY(1px) scale(.995); }
.lg-opt:has(input:focus-visible) { outline: 2px solid var(--fq-ink); outline-offset: 5px; }
.lg-plain .lg-opt.is-picked { box-shadow: 0 0 0 2.5px var(--fq-ink); }
.lg-field[aria-invalid="true"] .lg-opt { box-shadow: 0 0 0 1px #A3231A66, 0 10px 16px -14px #12111066; }

.lg-input { display: block; width: 100%; min-height: 56px; padding: 15px 16px; border: 0; border-radius: 2px; background: var(--fq-paper-hi); color: var(--fq-ink);
  font: 500 17px/1.4 var(--fq-print); caret-color: var(--fq-signal);
  box-shadow: inset 0 0 0 1px #12111033, 0 10px 16px -16px #12111066; transition: box-shadow .2s; -webkit-appearance: none; appearance: none; }
.lg-input::placeholder { color: var(--lg-place); opacity: 1; }
.lg-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--fq-ink), 0 10px 16px -16px #12111066; }
.lg-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--lg-error); }
.lg-area { min-height: 150px; resize: vertical; line-height: 1.5; }
.lg-count { margin: 8px 0 0 !important; font-size: 14px; color: var(--lg-hint); text-align: right; font-variant-numeric: tabular-nums; }
.lg-error { margin: 10px 0 0 !important; padding-left: 26px; position: relative; font: 600 15px/1.4 var(--fq-print); color: var(--lg-error); }
.lg-error::before { content: ""; position: absolute; left: 0; top: .12em; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.4v5.6M12 16.6v.1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.4v5.6M12 16.6v.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.lg-error[hidden] { display: none; }

.lg-actions { display: grid; gap: 14px; }
.lg-submit { width: 100%; }
@media (min-width: 640px) { .lg-submit { width: auto; min-width: 300px; justify-self: start; } }
.lg-form-status { margin: 0 !important; padding: 14px 16px; border-radius: 2px; background: var(--fq-paper-hi); box-shadow: inset 0 0 0 2px var(--lg-error);
  font: 600 16px/1.45 var(--fq-print); color: var(--fq-ink); }
.lg-form-status[hidden] { display: none; }

/* the honeypot: off-screen, out of the tab order, ignored by assistive tech */
.lg-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* after a 201 */
.lg-done { margin: 30px 0 14px; padding: 30px 22px 22px; font-size: 17px; line-height: 1.55; }
.lg-done:focus { outline: none; }
.lg-done:focus-visible { outline: 2px solid var(--fq-ink); outline-offset: 4px; }
.lg-done-head { margin: 0 0 8px !important; font: 800 clamp(20px, 5vw, 24px) / 1.25 var(--fq-print); letter-spacing: -.02em; overflow-wrap: anywhere; }
.lg-done-body { margin: 0 !important; }

/* while the request forms are off (js/legal.js FORMS_LIVE): the address, big enough to tap and to select */
.lg-mailto { margin: 22px 0 18px !important; padding: 18px 20px; background: var(--fq-paper-hi); border-radius: 2px;
  box-shadow: 0 0 0 1px #1211101a, 0 1px 0 #1211100d, 0 10px 16px -14px #12111066;
  font: 700 clamp(19px, 4.6vw, 22px) / 1.35 var(--fq-print); letter-spacing: -.01em; }
.lg-doc .lg-mailto a { display: inline-block; padding: 6px 0; font-weight: 800; -webkit-user-select: text; user-select: text; }
.lg-mailto[hidden] { display: none; }

.lg-noscript { padding: 14px 16px; background: var(--fq-paper-hi); border-radius: 2px; box-shadow: 0 0 0 1px #1211101a; }

/* ── print: ink on white, no grain, links spelled out ── */
@media print {
  .lg-draft { background: none; border: 1px solid #000; }
  .lg-sheet.fq-ground::after, .foot, .lg-skip, .lg-toc { display: none; }
  .lg-sheet { background: #fff; }
  .lg-table { overflow: visible; box-shadow: none; background: none; }
  .lg-cols-3 table, .lg-cols-4 table { min-width: 0; }
}