/* Privacy and terms: a sticker with the review note, a light headline, the short version on a printout with Evan's note,
   then the full text typed on one glass frame, a thin numeral per clause. Plain and readable first. */
.legal-hero{padding-top:clamp(40px,6vw,88px)}
.legal-hero .review{max-width:560px; margin-bottom:clamp(39px,5vw,64px); transform:rotate(-.6deg)}
.legal-hero .review .eb-label{font-size:30px; margin-bottom:8px}
.legal-hero .review p:not(.eb-label){color:var(--paper-ink); font-size:16px}
.legal-hero .review b{font-weight:500}
.legal-hero h1{max-width:none}
.legal-hero .lede{margin-top:22px}
.legal-hero .meta{margin-top:22px; font-size:15px; color:var(--ink-muted)}
.legal-grid{display:grid; grid-template-columns:minmax(0,760px) minmax(0,1fr); gap:26px 120px; align-items:start}
.legal-grid .note{align-self:center; max-width:13ch}
.short .rows li{font-size:17px; line-height:1.5}
.legal{padding:clamp(26px,4.4vw,64px); max-width:1040px}
.clauses{list-style:none; margin:0; padding:0; max-width:880px}
.clauses > li{display:grid; grid-template-columns:clamp(56px,7vw,96px) minmax(0,1fr); gap:clamp(14px,2.4vw,32px); padding:clamp(22px,2.6vw,32px) 0; border-top:1.5px dashed var(--dash)}
.clauses > li:first-child{border-top:0; padding-top:0}
.clauses > li:last-child{padding-bottom:0}
.clauses .n{font-weight:200; font-size:clamp(36px,3.6vw,52px); line-height:.9; letter-spacing:-.055em; font-variant-numeric:tabular-nums}
.clauses h2{font-size:clamp(22px,2vw,28px); margin:4px 0 10px}
.clauses p,.clauses .dash li{max-width:68ch; color:var(--ink); font-size:17px; line-height:1.6}
.clauses a,.also a{color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px}
.clauses .dash{list-style:none; margin:0; padding:0}
.clauses .dash li{padding:8px 0 8px 22px; position:relative}
.clauses .dash li::before{content:""; position:absolute; left:0; top:20px; width:10px; height:1.5px; background:var(--ink-muted)}
.clauses b{font-weight:500}
.also{margin-top:26px; font-size:15px; color:var(--ink-muted)}
/* placeholders: a dashed pen outline, so nothing unfilled can go unnoticed */
.ph{outline:1.5px dashed color-mix(in srgb, var(--pen) 60%, transparent); outline-offset:2px; border-radius:4px; padding:0 2px; font-weight:500; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.eb-sticker .ph{outline-color:color-mix(in srgb, var(--pen-paper) 60%, transparent)}
@media (max-width:860px){
  .legal-grid{grid-template-columns:minmax(0,1fr)}
  .legal-grid .note{order:-1; padding-left:8px}
}
@media (max-width:600px){
  .clauses > li{grid-template-columns:minmax(0,1fr); gap:8px}
  .legal-grid .note{max-width:20ch}
}