/* Stranger Talk legal / help / guide pages — app design system (Sora/Manrope, brand blue, light/dark). */
@import url('/site-chrome.css?v=483');
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.legal-wrap{width:min(880px,100%);margin:0 auto;padding:18px 20px 24px}
.legal-header{display:none}
.legal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);padding:clamp(22px,5vw,44px);box-shadow:var(--shadow-card)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);background:none;padding:0}
.eyebrow::before{content:"";width:4px;height:14px;border-radius:9999px;background:var(--brand)}
h1{margin:12px 0 12px;max-width:780px;font-family:var(--font-display);font-weight:800;font-size:clamp(26px,5.4vw,38px);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
h2{margin:30px 0 10px;font-family:var(--font-display);font-weight:700;font-size:clamp(18px,3vw,21px);line-height:1.3}
h3{margin:20px 0 6px;font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.35}
p,li{font-size:15px;line-height:1.7;color:var(--text2)}
p{margin:0 0 12px}
ul,ol{padding-left:1.25rem;margin:8px 0 18px}
.lead{max-width:720px;font-size:16px;line-height:1.65;color:var(--text2)}
.meta{margin:20px 0;padding:14px 16px;border:1px solid var(--border);background:var(--surface2);border-radius:var(--r-lg);color:var(--text2);font-size:13.5px;line-height:1.6}
.notice{margin:20px 0;padding:14px 16px;border:1px solid var(--gold-soft);background:var(--gold-soft);border-radius:var(--r-lg);color:var(--text);line-height:1.6}
.notice strong{color:var(--gold)}
.danger{border-color:var(--accent-soft);background:var(--accent-soft);color:var(--text)}
a{color:var(--brand);font-weight:700;text-underline-offset:3px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--surface2);padding:.12em .35em;border-radius:6px}
.hero-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:16px;align-items:stretch;margin:18px 0 24px}
.hero-panel,.info-card,.link-card{border:1px solid var(--border);background:var(--surface2);border-radius:var(--r-lg);padding:18px}
.hero-panel{background:var(--hero-bg);border-color:var(--brand-soft)}
.hero-panel h2{margin-top:0}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.info-card strong{display:block;margin-bottom:4px;color:var(--text);font-family:var(--font-display)}
.info-card span{color:var(--text2);font-size:13.5px;line-height:1.55}
.link-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
.link-card{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--text);background:var(--surface);box-shadow:var(--shadow-card);transition:transform .15s ease,border-color .15s ease}
.link-card:hover{transform:translateY(-2px);border-color:var(--brand)}
.link-card strong{font-family:var(--font-display);font-size:15px}
.link-card strong::after{content:" →";color:var(--brand)}
.link-card span{color:var(--text2);font-size:13.5px;font-weight:500;line-height:1.5}
.steps{counter-reset:step;display:grid;gap:10px;margin:16px 0}
.step{position:relative;padding:16px 16px 16px 56px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:16px;top:15px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-family:var(--font-display);font-weight:800;font-size:13px}
.step strong{display:block;margin-bottom:2px;color:var(--text);font-family:var(--font-display)}
.faq-mini{border-top:1px solid var(--border);margin-top:16px}
.legal-card details{border-top:1px solid var(--border);padding:14px 0}
.legal-card details:first-of-type{margin-top:6px}
.legal-card summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-weight:700;line-height:1.45;color:var(--text)}
.legal-card summary::-webkit-details-marker{display:none}
.legal-card summary::after{content:"";flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--text3);border-bottom:2px solid var(--text3);transform:rotate(45deg);transition:transform .18s ease}
.legal-card details[open] summary::after{transform:rotate(-135deg)}
.legal-card summary:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:6px}
.legal-card details p{margin-top:8px}
.legal-footer{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:20px 0 0}
.legal-footer a{padding:11px 12px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-lg);text-decoration:none;font-size:13px}
.footer-note{grid-column:1/-1;color:var(--text3);font-size:12px;padding:4px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.pill{display:inline-flex;align-items:center;padding:7px 12px;border:0;background:var(--surface2);border-radius:var(--r-pill);font-size:12.5px;font-weight:700;color:var(--text2)}
@media (max-width:760px){.hero-grid,.info-grid{grid-template-columns:1fr}.legal-footer{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.legal-wrap{padding:12px 14px 20px}.legal-card{border-radius:var(--r-xl);padding:20px 16px}.link-grid{grid-template-columns:1fr}p,li{font-size:15px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.link-card,.legal-card summary::after{transition:none}}