/* ============================================================
   IT IS UNDERSTOOD: visual identity. Site-specific.

   WHO THIS IS FOR
   People about to click "I agree," start a subscription, sign a
   lease or accept a job offer, often a little anxious, often on
   a phone, who want to know what they're agreeing to without
   hiring a lawyer to find out.

   WHAT THE DESIGN HAS TO SAY
   Calm, credible, on your side. The contract on one side, the
   plain-English margin note on the other. Nothing looks like a
   law firm ad.

   SIGNATURES
   The clause card: a numbered section with the clause name under
   a highlighter stroke, beside a mint "In plain English" note.
   The opener line "It is understood and agreed that..." with its
   translation. Rose status panels with dated timelines for rules
   that changed, and a clause finder that marks matches in place.

   COLOR
   Paper, navy ink, document blue for links and buttons, teal for
   plain English, a deep red for "why it matters," highlighter
   yellow. Every text pair, highlighter included, is checked by the
   build script. Labels are always words, never color alone.

   TYPE
   Red Rose for headings and labels: firm and modern. Gelasio for
   reading: a sturdy book serif that feels like a document without
   feeling like legalese.
   ============================================================ */

:root {
  --paper: #fbfaf6;
  --hl:    #fff09a;
  --mint:  #e3f1ee;
  --rose:  #fbe9e7;
  --ink:   #1d2433;
  --soft:  #4b5263;
  --link:  #1f4fa3;
  --teal:  #0f5e59;
  --red:   #9b2226;
  --navy:  #1d2433;
  --line:  #d9dce3;
  --f-text: #d6dbe6;

  --accent:     var(--link);
  --accent-ink: #ffffff;
  --focus:      var(--link);
  --measure:    66ch;

  --display: 'Red Rose', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Gelasio', Georgia, 'Times New Roman', serif;
}

[hidden] { display: none !important; }
body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--paper); }
.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; color: var(--ink); }
h1 { font-weight: 700; font-size: clamp(2.3rem, 6vw, 3.9rem); letter-spacing: -0.01em; }
h2 { font-weight: 700; font-size: clamp(1.55rem, 3.4vw, 2.15rem); margin-bottom: 0.6rem; }
h3 { font-weight: 600; font-size: 1.2rem; margin-bottom: 0.35rem; }
p + p { margin-top: 0.8rem; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); text-decoration-thickness: 2.5px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.kicker { font-family: var(--display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.5rem; }
.lede { font-size: 1.2rem; color: var(--soft); max-width: 56ch; }
.fine { font-size: 0.9rem; color: var(--soft); margin-top: 0.8rem; }
.source { font-size: 0.8125rem; color: var(--soft); margin-top: auto; padding-top: 0.6rem; overflow-wrap: anywhere; }
.lab { font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0.9rem 0 0.15rem; color: var(--soft); }
.lab:first-child { margin-top: 0; }
.lab--plain { color: var(--teal); }
.lab--watch { color: var(--red); }
.lab--where { color: var(--soft); }

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--ink); text-decoration: none; }
.seal { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hl); color: var(--ink); font-family: var(--body); font-weight: 700; font-size: 1.15rem; border: 2px solid var(--ink); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.1rem 0.4rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.55rem; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 0.975rem; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { background: linear-gradient(transparent 58%, var(--hl) 58%); }

main { padding-block: 2.75rem 4rem; }
.hero { padding-bottom: 1rem; }
.hero h1 { max-width: 17ch; margin-bottom: 0.9rem; }
.section { margin-top: 3.25rem; }

.opener { margin-top: 1.6rem; border-left: 4px solid var(--ink); padding: 0.4rem 0 0.4rem 1rem; max-width: 40rem; }
.legalese { font-style: italic; font-size: 1.3rem; }
.legalese { background: linear-gradient(transparent 60%, var(--hl) 60%); display: inline; }
.translate { font-family: var(--display); font-weight: 600; color: var(--teal); margin-top: 0.4rem; }

.tiles { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.tile { max-width: none; background: #ffffff; border: 1px solid var(--line); border-top: 5px solid var(--link); border-radius: 10px; padding: 1.1rem 1.2rem; position: relative; }
.tile h3 a { color: var(--ink); text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; }
.tile h3 a:hover { text-decoration: underline; }
.tile:focus-within { outline: 3px solid var(--link); outline-offset: 3px; }
.tile h3 a:focus-visible { outline: none; }

.clauses { display: grid; gap: 1.25rem; margin-top: 1.2rem; }
.clause { display: grid; grid-template-columns: 1fr; background: #ffffff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; scroll-margin-top: 1rem; }
.clause .legal { padding: 1.1rem 1.3rem 0.9rem; border-bottom: 1px dashed var(--line); }
.clause .num { font-family: var(--display); font-weight: 600; color: var(--soft); font-size: 0.9rem; }
.clause h3 { font-family: var(--body); font-weight: 700; font-size: 1.45rem; margin: 0.15rem 0 0.2rem; }
.hl { background: linear-gradient(transparent 58%, var(--hl) 58%); padding: 0 0.1em; }
.also { font-style: italic; color: var(--soft); font-size: 0.975rem; }
.clause .plain { background: var(--mint); padding: 1rem 1.3rem 1rem; display: flex; flex-direction: column; }
.plain-text { font-size: 1.1rem; }
@media (min-width: 52rem) {
  .clause { grid-template-columns: minmax(14rem, 1fr) 2fr; }
  .clause .legal { border-bottom: 0; border-right: 1px dashed var(--line); }
}
.more { margin-top: 1rem; font-family: var(--display); font-weight: 600; }

.letters ul { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.letters a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; font-family: var(--display); font-weight: 700; text-decoration: none; color: var(--ink); }
.letters a:hover { background: var(--hl); }

.cards { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.card { max-width: none; background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem 1rem; display: flex; flex-direction: column; }
.card.tool { border-top: 5px solid var(--teal); }
.cost { font-size: 0.95rem; margin-top: 0.6rem; }
.go { margin-top: auto; padding-top: 0.6rem; font-family: var(--display); font-weight: 600; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

.panel { background: #ffffff; border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.2rem, 3vw, 1.9rem); max-width: 52rem; }
.panel--rose { background: var(--rose); border-color: #efc9c4; }
.panel ul { padding-left: 1.2rem; }
.panel li { margin-bottom: 0.6rem; }
.timeline { list-style: none; padding: 0; margin: 1rem 0 0; border-left: 3px solid var(--red); }
.timeline li { position: relative; padding: 0 0 1.1rem 1.3rem; margin: 0; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 0.35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--rose); border: 3px solid var(--red); }
.timeline h3 { font-size: 1.05rem; }
.timeline .source { padding-top: 0.2rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0.8rem 0 0; padding: 0; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: #ffffff; text-decoration: none; font-family: var(--display); font-weight: 600; }
.chips a:hover { background: var(--hl); color: var(--ink); }

.checklist { counter-reset: step; list-style: none; padding: 0; margin: 1.2rem 0 0; max-width: 46rem; }
.checklist li { counter-increment: step; position: relative; padding: 0.2rem 0 0.9rem 3rem; }
.checklist li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--hl); border: 2px solid var(--ink); font-family: var(--display); font-weight: 700; }

.finder label { display: block; font-family: var(--display); font-weight: 700; margin-top: 1rem; margin-bottom: 0.3rem; }
.finder textarea { width: 100%; min-height: 12rem; padding: 0.8rem 0.9rem; border: 2px solid var(--soft); border-radius: 10px; background: #ffffff; font: inherit; font-size: 1rem; color: var(--ink); resize: vertical; }
.finder .actions { margin-top: 0.9rem; }
.finder-out:not(:empty) { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.found { padding-left: 1.3rem; margin-top: 0.6rem; }
.found li { margin-bottom: 1.2rem; }
.found-name { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.snippet { font-size: 0.95rem; color: var(--ink); background: var(--paper); border-left: 3px solid var(--line); padding: 0.4rem 0.8rem; overflow-wrap: anywhere; }
mark { background: var(--hl); color: var(--ink); padding: 0 0.1em; }
.finder-error { font-weight: 700; color: var(--red); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.4rem; background: var(--link); color: #ffffff; border: 2px solid var(--link); border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; text-decoration: none; }
.btn--quiet { background: #ffffff; color: var(--ink); border-color: var(--ink); }
.btn--quiet:hover { background: var(--hl); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.5rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }

.site-footer { background: var(--navy); color: #ffffff; margin-top: 3rem; padding-block: 2.25rem 3rem; }
.site-footer .notice { color: #ffffff; border-bottom: 1px solid #3a4356; padding-bottom: 1.2rem; margin-bottom: 1.6rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hl); margin-bottom: 0.5rem; }
.site-footer p { color: var(--f-text); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; }
.site-footer .notice a { display: inline; padding: 0; }
.site-footer a:hover { color: var(--hl); }
.site-footer .fine { color: var(--f-text); margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--hl); }

@media (forced-colors: active) {
  .hl, .legalese, .site-nav a[aria-current="page"] { background: none; text-decoration: underline; }
  mark { forced-color-adjust: none; background: Mark; color: MarkText; }
}