/* ==========================================================================
   privacy.html + terms.html: long-form legal pages (sandbox, Sept 27, 2026)
   Builds on site.css §18 (legal) and §23 (long-form). Tokens only: every
   colour is a var(--…), so Night and Day both work with no overrides here.

   1  Hero: meta pills, the "itemized visit" receipt, the short-version card
   2  Numbered sections (doc + table of contents share one counter style)
   3  Blocks inside the doc: callout, data cards, provider rows, location
      steps, SMS keywords, citation links
   4  Closing "Questions? Call or email Bob" card
   ========================================================================== */


/* ---------------------------------------------------------------- 1 HERO */
.legal-hero .split{align-items:center}
.legal-hero h1{margin-top:22px}
.legal-hero .lead{max-width:620px}
.legal-hero .legal-meta{margin:28px 0 0;gap:10px}
.meta-pill{
  display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 13px 6px 11px;border-radius:var(--r-pill);
  font-size:var(--fs-meta);font-weight:600;line-height:1.3;color:var(--ink-2);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-hair);
}
.meta-pill .ic{width:16px;height:16px;color:var(--ink-3)}
.meta-pill b{font-weight:700;color:var(--ink-strong)}

/* The website, itemized like the app's receipt */
.legal-receipt{width:100%;max-width:460px;margin-left:auto}
.legal-receipt .receipt-head .icon-well{margin:0}
.legal-receipt .receipt-head p + p{margin-top:2px}
.legal-receipt .receipt-row > span:last-child{display:inline-flex;align-items:center;gap:6px}
.legal-receipt .receipt-row .ic{width:16px;height:16px;color:var(--ink-3)}
.legal-receipt .receipt-total{align-items:center}
.legal-receipt .receipt-total .label{max-width:220px;line-height:1.35}

/* "The short version" card (terms) */
.short-card{width:100%;max-width:460px;margin-left:auto}
.short-card .feature-list{margin-top:18px}
.short-card .feature-list li{font-weight:600;color:var(--ink-strong)}
.short-card .feature-list .ic{color:var(--accent)}

@media (max-width: 1020px){
  .legal-receipt,.short-card{margin-left:0}
}

/* Service at a glance (privacy): tucked up under the hero */
.glance{padding-top:clamp(8px, 1.5vw, 24px)}
.glance .section-head{margin-bottom:clamp(20px, 2.4vw, 32px)}
.glance .card{display:flex;flex-direction:column;gap:8px}
.glance .card .icon-well{margin-bottom:10px}
.glance .card h3{font-size:1.12rem}
@media (max-width: 680px){   /* phones: icon beside the words, so four cards don't fill four screens */
  .glance .grid{gap:12px}
  .glance .card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:start}
  .glance .card .icon-well{grid-row:span 2;margin:0;width:44px;height:44px}
  .glance .card h3 + p{margin-top:0}
}


/* ------------------------------------------------------ 2 NUMBERED SECTIONS */
/* Never let one wide word or button widen the single mobile column */
@media (max-width: 1020px){ .legal-doc .doc-layout{grid-template-columns:minmax(0,1fr)} }
.doc{counter-reset:sec}
.doc > section{counter-increment:sec}
.doc > section:first-child > h2{margin-top:0}
.doc > section > h2::before{
  content:counter(sec, decimal-leading-zero);display:block;margin-bottom:10px;
  font-family:var(--font-mono);font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tr-label);color:var(--accent);
}
.doc > section.no-n{counter-increment:none}
.doc > section.no-n > h2::before{content:none}
.doc .lede{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2)}
.doc .lede b{color:var(--ink-strong)}

/* Table of contents: numbered to match the sections */
.toc .label{margin:0 0 4px 10px}
.toc ol{counter-reset:toc;padding:0}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:10px;align-items:baseline;line-height:1.35}
.toc a::before{
  content:counter(toc, decimal-leading-zero);flex:none;
  font-family:var(--font-mono);font-size:var(--fs-label);font-weight:700;color:var(--ink-3);
}
.toc a:hover::before{color:var(--accent)}
.toc li.no-n{counter-increment:none}
.toc li.no-n a::before{content:"";width:2ch}
@media (max-width: 1020px){
  .toc{
    padding:18px 14px 14px;border-radius:var(--r-lg);
    background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line-hair);
  }
  .toc ol{grid-template-columns:repeat(2, minmax(0,1fr));column-gap:8px}
}
@media (max-width: 380px){
  .toc ol{grid-template-columns:1fr}
}


/* ------------------------------------------------------ 3 BLOCKS IN THE DOC */
/* Lists that are components, not prose bullets */
.doc .feature-list,.doc .pt-rows,.doc .not-list,.doc .kw-grid,.doc .loc-steps,.doc .cite-row{padding-left:0}
.doc .feature-list li + li,.doc .pt-rows > li + li,.doc .not-list li + li,
.doc .kw-grid li + li,.doc .loc-steps li + li{margin-top:0}

/* A callout: the one sentence a reader must not miss */
.callout{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:start;
  margin-top:20px;padding:clamp(18px, 2.4vw, 24px);border-radius:var(--r-lg);
  background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--line-strong);
}
.callout .icon-well{grid-row:span 2;width:44px;height:44px;background:var(--surface-2)}
.callout .icon-well.is-go{background:var(--surface-2)}
.doc .callout p{margin-top:0;line-height:1.6}
.callout .callout-title{font-family:var(--font-display);font-size:1.12rem;font-weight:750;line-height:1.35;color:var(--ink-strong)}

/* What the service collects: one card per kind of person */
.collect-grid{margin-top:22px}
.collect-grid .card{padding:clamp(18px, 2.2vw, 24px)}
.collect-grid .card-top{display:flex;align-items:center;gap:14px}
.collect-grid .card-top .icon-well{margin:0;width:44px;height:44px}
.collect-grid .card-top h3{margin:0;font-size:1.05rem}
.collect-grid .card-top .meta{margin-top:2px}
.doc .collect-grid ul{margin-top:14px;padding-left:1.1em;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}
.doc .collect-grid li{margin:0 0 8px;break-inside:avoid}
.doc .collect-grid li + li{margin-top:0}
.doc .collect-grid li:last-child{margin-bottom:0}
.collect-grid .is-wide{grid-column:1 / -1}
.doc .collect-grid .is-wide ul{columns:2;column-gap:36px}
.collect-grid .is-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px 36px;align-items:center}
.doc .collect-grid .is-row ul{columns:1;margin-top:0}
@media (max-width: 680px){
  .doc .collect-grid .is-wide ul{columns:1}
  .collect-grid .is-row{display:block}
  .doc .collect-grid .is-row ul{margin-top:14px}
}
.collect-grid li::marker{color:var(--ink-3)}
.collect-grid .note{margin-top:14px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.5}
.doc .collect-grid .note{margin-top:14px;line-height:1.5}

.doc .not-list{margin-top:16px;grid-template-columns:repeat(2, minmax(0,1fr))}
.doc .not-list li{font-size:var(--fs-small);line-height:1.35}
@media (max-width: 460px){ .doc .not-list{grid-template-columns:1fr} }

/* Service providers: name + role chip on the left, what they do on the right */
.pt-rows{
  list-style:none;margin-top:18px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2);box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-hair);
}
.pt-rows > li{display:grid;grid-template-columns:168px minmax(0,1fr);gap:8px 22px;padding:18px 20px;border-top:1px solid var(--line-hair)}
.pt-rows > li:first-child{border-top:0}
.pt-rows .who{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pt-rows .who b{font-size:var(--fs-body)}
.pt-rows p{font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}
.doc .pt-rows p{margin-top:0}
.doc .pt-rows p + p{margin-top:6px}
@media (max-width: 640px){
  .pt-rows > li{grid-template-columns:1fr;padding:16px 18px}
  .pt-rows .who{flex-direction:row;align-items:center;gap:10px}
}

/* Approximate location: when the app looks, when it saves, never */
.loc-steps{list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;margin-top:20px}
.loc-steps li{
  display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:var(--r-lg);
  background:var(--surface-2);box-shadow:var(--sh-1), inset 0 0 0 1px var(--line-hair);
}
.loc-steps .icon-well{width:40px;height:40px;margin-bottom:6px}
.loc-steps .icon-well .ic{width:20px;height:20px}
.icon-well.is-mute{color:var(--ink-3);background:var(--surface-inset)}
.loc-steps b{font-size:var(--fs-body)}
.loc-steps span{font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
@media (max-width: 760px){
  .loc-steps{grid-template-columns:1fr}
  .loc-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:start}
  .loc-steps .icon-well{grid-row:span 2;margin:0}
}

/* SMS: the consent script and the three keywords */
.doc .legal-well{margin-top:16px}
.doc .legal-well p{margin-top:0;line-height:1.6}
.doc .legal-well p + p{margin-top:10px}
.consent-script{margin:12px 0 0;padding-left:16px;border-left:3px solid var(--accent)}
.consent-script p{font-size:var(--fs-body);color:var(--ink-strong)}
.verbatim{margin:0}
.verbatim p{font-weight:600;color:var(--ink-strong)}
.kw-grid{list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;margin-top:18px}
.kw-grid li{padding:16px 16px 14px;border-radius:var(--r-md);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-hair)}
.kw-grid .kw{
  display:inline-block;padding:3px 9px;border-radius:var(--r-xs);
  font-family:var(--font-mono);font-size:1.05rem;font-weight:800;letter-spacing:.06em;
  color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent);
}
.kw-grid span{display:block;margin-top:10px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
@media (max-width: 560px){
  .kw-grid{grid-template-columns:1fr;gap:10px}
  .kw-grid li{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:12px;align-items:start;padding:14px}
  .kw-grid .kw{justify-self:start}
  .kw-grid span{margin-top:2px}
}

/* Regulation links (terms) */
.cite-row{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:16px}
.doc .cite-row li + li{margin-top:0}
a.cite-tag{text-decoration:none;height:auto;min-height:36px;white-space:normal}
a.cite-tag .ic{width:14px;height:14px}
a.cite-tag:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.doc .disclaimer{margin-top:20px}
.doc .disclaimer p{margin-top:0;line-height:1.5}

.doc .link-arrow{margin-top:12px}


/* ------------------------------------------------------ 4 CONTACT CARD */
.legal-contact{margin-top:56px;padding:clamp(22px, 3vw, 34px)}
.legal-contact .founder-badge{align-items:center}
.legal-contact h2{margin:0;font-size:clamp(1.3rem, 1.15rem + .6vw, 1.65rem)}
.doc .legal-contact h2{margin-top:0}
.doc .legal-contact p{margin-top:0}
.legal-contact .body-2{margin-top:16px}
.doc .legal-contact .body-2{margin-top:16px}
.legal-contact .btn-row{margin-top:22px}
.legal-contact .contact-list{margin-top:18px}
@media (max-width: 420px){
  .legal-contact .btn{width:100%;white-space:normal}
  .legal-contact .founder-initials{width:56px;height:56px;font-size:1.25rem}
}