/* ============================================================
   PROTOCOL — the document pages.

   Terms, refunds, privacy, help. One stylesheet for all four, because
   they are one kind of page: a long column of prose that has to be
   readable end to end on a phone at eleven at night.

   The whole design brief is "nothing here is hiding". No collapsed
   sections, no accordions, no tiny grey small-print class. If a line
   is bad news it is set in the same size as the good news.
   ============================================================ */

.doc .page{max-width:none}

.docwrap{
  max-width:760px;margin:0 auto;
  padding:clamp(48px,8vw,96px) var(--pad-x) clamp(80px,12vw,140px);
}

/* ---- the head ---- */
.dochead{padding-bottom:clamp(30px,4vw,44px);border-bottom:1px solid var(--line)}
.dochead .kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
}
.dochead h1{
  margin-top:16px;
  font-size:clamp(34px,6vw,58px);font-weight:600;letter-spacing:-.035em;line-height:1.02;
}
.dochead .lede{margin-top:18px;font-size:17.5px;line-height:1.62;color:var(--text-2);max-width:60ch}
.dochead .meta{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
}

/* ---- the body ---- */
.docwrap h2{
  margin-top:clamp(46px,6vw,68px);
  font-size:clamp(21px,2.6vw,27px);font-weight:600;letter-spacing:-.025em;line-height:1.2;
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.docwrap h2 .sn{
  display:block;margin-bottom:9px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--text-3);
}
.docwrap h3{
  margin-top:32px;font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--text);
}
/* The column is 760px, which at 16.5px runs to roughly 92 characters a line —
   wider than the .lede that introduces it and past the point where the eye
   reliably finds the next line. Capped to the site's own measure token. */
.docwrap p,.docwrap li{max-width:var(--measure)}
.docwrap p{margin-top:16px;font-size:16.5px;line-height:1.68;color:var(--text-2)}
.docwrap p b,.docwrap li b{color:var(--text);font-weight:500}
/* Inline links in prose get an underline; whole-surface links (the hub cards)
   must not, or every word inside the card gets ruled through. */
.docwrap a:not(.btn):not(.wm):not(.dcard){color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.docwrap a:not(.btn):not(.wm):not(.dcard):hover{text-decoration-color:var(--text-2)}

/* `list-style:none` makes Safari + VoiceOver stop announcing these as lists,
   which on a terms page removes "list of 8 items" from every clause group.
   The markers are still ours to draw; the role is restored explicitly. */
.docwrap ul,.docwrap ol{margin-top:16px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.docwrap ul,.docwrap ol{-webkit-padding-start:0}
.docwrap li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.62;color:var(--text-2)}
.docwrap ul > li:before{
  content:"";position:absolute;left:2px;top:.72em;width:5px;height:1px;background:var(--text-3);
}
.docwrap ol{counter-reset:d}
.docwrap ol > li{counter-increment:d;padding-left:30px}
.docwrap ol > li:before{
  content:counter(d);position:absolute;left:0;top:.06em;
  font-family:var(--mono);font-size:12px;color:var(--text-3);
}

/* ---- the fact table ----
   Used at the top of terms and refunds. Everything a person actually needs
   to know before paying, above everything they will not read. */
.dtable{
  margin-top:26px;border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;
  background:var(--s-1);
}
.dtable div{
  display:grid;grid-template-columns:minmax(140px,26%) 1fr;gap:18px;
  padding:15px 18px;border-bottom:1px solid var(--line);align-items:baseline;
}
.dtable div:last-child{border-bottom:0}
.dtable dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
/* On the refunds page the left column carries whole sentences ("You are removed
   for two missed calls with no message"), and a 10.5px tracked mono caps face
   is built for two words. When the label is long it drops the caps treatment
   and becomes readable text. */
.dtable dt.say{
  font-family:var(--sans);font-size:14.5px;letter-spacing:-.005em;text-transform:none;
  line-height:1.45;color:var(--text);font-weight:500;
}
.dtable dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--text-2)}
.dtable dd b{color:var(--text);font-weight:500}
@media(max-width:560px){
  .dtable div{grid-template-columns:1fr;gap:6px;padding:14px 15px}
}

/* ---- the pulled statement ----
   For the handful of sentences that decide whether someone is treated
   fairly. They get a rule and a surface so they cannot be skimmed past. */
.dsay{
  margin-top:26px;padding:22px 24px;border-left:2px solid var(--line-strong);
  background:var(--s-1);border-radius:0 var(--r-3) var(--r-3) 0;
}
.dsay p{margin-top:0;font-size:17px;color:var(--text)}
.dsay p + p{margin-top:12px;color:var(--text-2)}

/* Bad news gets the same weight as good news — a slightly warmer surface,
   never a red border. Red on this site means locked or failed, and a
   clause is neither. */
.dsay.hard{border-left-color:var(--text-2)}

/* ---- the crisis block ----
   The one thing on any of these pages that might matter at 3am. It is
   never behind a link, never collapsed, and never styled as an aside. */
.crisis{
  margin-top:26px;border:1px solid var(--line-strong);border-radius:var(--r-3);
  background:var(--s-2);padding:24px;
}
.crisis h3{margin-top:0}
.crisis .lines{display:flex;flex-direction:column;gap:0;margin-top:16px}
.crisis .lines > div{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.crisis .lines > div:last-child{border-bottom:0}
.crisis .who{font-size:15.5px;color:var(--text);font-weight:500;min-width:118px}
/* These are real links now (tel: and https:), because on the one page where a
   number matters, making somebody retype it by hand is the wrong ask. */
.crisis .num{
  font-family:var(--mono);font-size:15px;color:var(--text);letter-spacing:.02em;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);
  display:inline-flex;align-items:center;min-height:32px;
}
.crisis .num:hover{text-decoration-color:var(--text)}
@media(pointer:coarse){.crisis .num{min-height:44px}}
.crisis .when{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* ---- the hub ----
   Four documents as four things you can actually aim at, rather than four grey
   words in a footer. This is the only page in the set that is a menu. */
.dlist{display:flex;flex-direction:column;gap:12px;margin-top:clamp(30px,4vw,44px)}
.dcard{
  display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:6px;
  padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-3);
  background:var(--s-1);text-decoration:none;
  transition:border-color var(--d-tint) ease,background var(--d-tint) ease,transform var(--d-element) var(--ease);
}
.dcard .dcard-n{grid-row:1 / span 2;letter-spacing:.16em;color:var(--text-3);padding-top:3px}
.dcard b{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.dcard span:not(.dcard-n){font-size:14.5px;line-height:1.55;color:var(--text-2);max-width:56ch}
@media(hover:hover){
  .dcard:hover{border-color:var(--line-strong);background:var(--s-2);transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){.dcard{transition:none}.dcard:hover{transform:none}}
@media(max-width:520px){
  .dcard{padding:18px;column-gap:14px}
}

/* ---- the foot of the document ---- */
.docfoot{
  margin-top:clamp(56px,8vw,88px);padding-top:28px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
}
.docfoot a{
  color:var(--text-2);text-decoration:none;
  /* was ~21px tall. These are the links to the refund policy and the crisis
     page; they do not get to be the hardest thing on the page to hit. */
  display:inline-flex;align-items:center;min-height:32px;
}
.docfoot a:hover{color:var(--text)}
@media(pointer:coarse){.docfoot a{min-height:44px}}

/* .foot .legal lives in protocol.css — index.html and about.html carry that
   footer and do not load this stylesheet. */