/* ============================================================
   BetterSkin — legal / policy pages
   Built on site.css tokens (orange brand). Body text stays
   restrained: no italics or accent words in headings.
   ============================================================ */

.legal{background:var(--cream)}

/* ---------- page header ---------- */
.legal-head{background:var(--lavender);padding:56px 0 40px;border-bottom:1px solid var(--border)}
.legal-head .eyebrow{color:var(--purple-deeper);margin-bottom:14px}
.legal-crumb{display:inline-block;font-size:13px;font-weight:600;color:var(--purple-deeper);margin-bottom:22px}
.legal-crumb:hover{color:var(--dark)}
.legal-head h1{font-family:var(--serif);font-weight:700;font-size:clamp(32px,4.2vw,52px);line-height:1.06;letter-spacing:-.01em;color:var(--dark);max-width:820px}
.legal-meta{margin-top:16px;max-width:720px}
.legal-meta p{font-size:14.5px;color:var(--dark);opacity:.82;line-height:1.55;margin:0 0 4px}
.legal-meta a{color:var(--purple-deeper);text-decoration:underline;text-underline-offset:2px}
.legal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn-link{color:var(--dark);border-color:transparent;text-decoration:underline;text-underline-offset:3px;padding-left:10px;padding-right:10px}
.btn-link:hover{color:var(--purple-deep)}

/* ---------- layout ---------- */
.legal-body{display:grid;grid-template-columns:240px minmax(0,760px);gap:56px;padding-top:48px;padding-bottom:96px;align-items:start}
.legal-toc{position:sticky;top:104px;max-height:calc(100vh - 130px);overflow-y:auto;padding-right:8px}
.toc-title{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:12px}
.legal-toc a{display:block;font-size:13px;line-height:1.35;color:var(--dark);padding:6px 0 6px 12px;border-left:2px solid var(--border);transition:color .12s,border-color .12s}
.legal-toc a.lv3{font-size:12.5px;color:var(--mid);padding-left:22px}
.legal-toc a:hover{color:var(--purple-deep);border-left-color:var(--purple-deep)}

/* ---------- document typography ---------- */
.legal-doc{font-size:15.5px;line-height:1.7;color:var(--dark)}
.legal-doc>*+*{margin-top:14px}
.legal-doc p{margin:0}
.legal-doc a{color:var(--purple-deeper);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--periwinkle)}
.legal-doc a:hover{color:var(--purple-deep);text-decoration-color:var(--purple-deep)}
.legal-doc strong{font-weight:600;color:var(--dark)}
.legal-doc em{font-style:italic}
.legal-doc u{text-decoration:none}

/* section band (the boxed SECTION headers in the source docs) */
.legal-doc h2.band{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--dark);background:#fff;border:1px solid var(--border);border-left:4px solid var(--purple-deep);border-radius:12px;padding:16px 20px;margin-top:44px;scroll-margin-top:110px}
.legal-doc h2.band:first-child{margin-top:0}
.legal-doc h3{font-family:var(--sans);font-size:17px;font-weight:600;line-height:1.35;color:var(--dark);margin-top:30px;scroll-margin-top:110px}
.legal-doc h4{font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--dark);margin-top:22px;scroll-margin-top:110px}
.legal-doc h2.band+h3,.legal-doc h2.band+p,.legal-doc h2.band+ul,.legal-doc h2.band+div{margin-top:18px}

/* lists */
.legal-doc ul,.legal-doc ol{padding-left:24px}
.legal-doc li{margin:6px 0;padding-left:4px}
.legal-doc li::marker{color:var(--purple-deep)}
.legal-doc ul ul,.legal-doc ol ol,.legal-doc ul ol,.legal-doc ol ul{margin-top:6px}

/* callouts (the single-cell shaded boxes in the source docs) */
.legal-doc .callout{background:var(--purple-50);border:1px solid var(--border);border-radius:12px;padding:16px 20px;font-size:14.5px;line-height:1.6}
.legal-doc .callout p+p{margin-top:10px}
.legal-doc .callout.important{background:#fff;border-left:4px solid var(--purple-deep)}

/* long all-caps legal paragraphs — keep the text, soften the wall */
.legal-doc p.caps{font-size:14px;line-height:1.65;color:var(--dark);background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 18px}

/* italic footers / signature notes in the source */
.legal-doc p.colophon{font-size:13px;color:var(--mid);font-style:normal}
.legal-doc p.colophon em{font-style:normal}

/* checkbox lines */
.legal-doc .checkline{display:flex;flex-wrap:wrap;gap:8px 22px}
.legal-doc .chk{display:inline-flex;align-items:center;gap:9px;font-size:15px}
.legal-doc .chk .box{width:16px;height:16px;border:1.5px solid var(--dark);border-radius:4px;background:#fff;flex-shrink:0}
.legal-doc .chk .box.on{background:var(--purple-deep);border-color:var(--purple-deep)}

/* tables */
.legal-doc .table-wrap{overflow-x:auto}
.legal-doc table.doc-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;font-size:14px;line-height:1.5}
.legal-doc table.doc-table th,.legal-doc table.doc-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}
.legal-doc table.doc-table tr:last-child td{border-bottom:none}
.legal-doc table.doc-table th{background:var(--purple-50);font-weight:600;color:var(--dark)}
.legal-doc table.doc-table.kv td:first-child{font-weight:600;width:34%;background:var(--purple-50)}
.legal-doc table.doc-table.kv td:nth-child(3){font-weight:600;background:var(--purple-50)}
.legal-doc table.doc-table td.blank{min-width:120px}
.legal-doc table.doc-table td.blank::after{content:"";display:block;height:22px;border-bottom:1.5px solid var(--border)}

/* opt-out control on Your Privacy Choices */
.legal-doc .optout-box{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.legal-doc .optout-status{font-size:13.5px;color:var(--purple-deeper)}

/* ---------- original-document viewer ---------- */
.docx-frame{padding:40px 0 96px}
.docx-container{background:transparent}
.docx-container .docx-wrapper{background:transparent!important;padding:0!important}
.docx-container .docx-wrapper>section.docx{box-shadow:0 12px 40px rgba(214,106,57,.10)!important;border:1px solid var(--border);margin:0 auto 24px!important;max-width:100%}
.docx-fallback{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;font-size:14.5px}
.docx-fallback a{color:var(--purple-deeper);text-decoration:underline}

/* ---------- hub ---------- */
.legal-hub{padding-top:40px;padding-bottom:96px}
.legal-group{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-.01em;margin:36px 0 18px}
.legal-group:first-child{margin-top:0}
.legal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.legal-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:16px;transition:transform .15s,box-shadow .15s}
.legal-card:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(231,127,79,.14)}
.legal-card-body{flex:1}
.legal-card h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.legal-card h3 a:hover{color:var(--purple-deep)}
.legal-card p{font-size:14px;color:var(--mid);line-height:1.55}
.legal-card-meta{font-size:12px;color:var(--mid);margin-top:10px}
.legal-card-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-link-sm{font-size:13px;font-weight:600;color:var(--mid);text-decoration:underline;text-underline-offset:3px;padding:0 6px}
.btn-link-sm:hover{color:var(--purple-deep)}
.legal-contact{margin-top:40px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px}
.legal-contact p{font-size:14px;color:var(--mid);line-height:1.7}
.legal-contact a{color:var(--purple-deeper);text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .legal-body{grid-template-columns:1fr;gap:28px}
  .legal-toc{position:static;max-height:none;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px}
}
@media (max-width:768px){
  .legal-head{padding:40px 0 30px}
  .legal-doc{font-size:15px}
  .legal-doc h2.band{font-size:21px;padding:14px 16px}
  .legal-actions .btn{padding:11px 18px}
}

/* bold lead-in lines (e.g. "Option 1 — Use this page.") get breathing room above */
.legal-doc p.lead{margin-top:22px}
.legal-doc h3+p.lead,.legal-doc h2.band+p.lead,.legal-doc h4+p.lead{margin-top:14px}