/* Terms, Privacy, Refund and Contact.
   These are read, not browsed: one column at a comfortable measure, a clear
   heading hierarchy, and nothing competing with the text. */

.legal-wrap{max-width:780px;margin:0 auto;padding:clamp(40px,6vw,76px) clamp(20px,5vw,32px) clamp(64px,8vw,104px)}
.legal-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#0e8c84;margin:0 0 12px}
.legal-wrap h1{font-family:'Inter','AbarLow',system-ui,sans-serif;font-weight:700;
  font-size:clamp(28px,4.6vw,42px);line-height:1.2;letter-spacing:-.02em;color:#0a0d16;margin:0 0 14px;text-wrap:balance}
.legal-updated{font-size:13px;color:#8b909c;margin:0 0 clamp(30px,4vw,44px)}

.legal-wrap h2{font-family:'Inter','AbarLow',system-ui,sans-serif;font-weight:600;font-size:clamp(18px,2.4vw,22px);
  line-height:1.35;letter-spacing:-.01em;color:#0a0d16;margin:clamp(36px,4.4vw,52px) 0 12px;padding-top:clamp(28px,3.4vw,38px);
  border-top:1px solid rgba(10,13,22,.08)}
.legal-wrap h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.legal-wrap h3{font-size:15.5px;font-weight:600;color:#0a0d16;margin:26px 0 8px}
/* Prose is held to a readable measure while headings, cards and the facts list
   keep the full column. A hundred characters a line is fine for a paragraph of
   marketing copy and punishing across pages of terms. The limit is in pixels,
   not ch: a ch is the width of a zero, which is narrower than this face's
   average character, so 68ch measured out at 82 characters. */
.legal-wrap p{font-size:15.5px;line-height:1.75;color:#3d4450;margin:0 0 14px;max-width:620px}
.legal-wrap ul{margin:0 0 16px;padding-left:22px}
.legal-wrap li{font-size:15.5px;line-height:1.75;color:#3d4450;margin-bottom:8px;max-width:600px}
.legal-wrap a{color:#0a6b64;text-decoration:underline;text-underline-offset:2px}
.legal-wrap a:hover{color:#0e8c84}
.legal-wrap strong{color:#0a0d16;font-weight:600}

/* The one thing on these pages that is an action rather than prose. */
.legal-card{background:#f7faf9;border:1px solid rgba(14,140,132,.2);border-radius:14px;
  padding:clamp(20px,2.6vw,26px);margin:22px 0}
.legal-card h3{margin-top:0}
.legal-card p:last-child{margin-bottom:0}
.legal-mail{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;
  color:#0a6b64;text-decoration:none;word-break:break-all}
.legal-mail:hover{color:#0e8c84;text-decoration:underline}

/* Key/value pairs for the contact page, so they read as facts not paragraphs. */
.legal-facts{display:grid;grid-template-columns:150px 1fr;gap:10px 20px;margin:18px 0 0;font-size:14.5px}
.legal-facts dt{color:#8b909c}
.legal-facts dd{margin:0;color:#0a0d16}
@media(max-width:560px){.legal-facts{grid-template-columns:1fr;gap:2px 0}
  .legal-facts dd{margin-bottom:12px}}

/* Scoped through .legal-wrap on purpose. This note is a <p>, and `.legal-wrap p`
   is a class plus an element, which outranks a lone class — so a bare
   .legal-note lost its margins to the paragraph rule and sat flush against
   whatever came before it. The box also takes the full column rather than the
   prose measure, so it lines up with the list above instead of ending short. */
.legal-wrap .legal-note{font-size:13.5px;color:#6b7280;line-height:1.7;background:#fafafb;
  border-left:3px solid rgba(10,13,22,.12);padding:14px 18px;margin:18px 0;max-width:none}

/* The closing note after a facts list is a remark about the list, not another
   row in it, so it needs room to read as one. */
.legal-wrap .legal-note--spaced{margin-top:clamp(28px,3.4vw,40px)}