/* Legal pages (privacy, terms, refunds, acceptable use, grievance, security) and
   small special pages (link preview, @handle available, unsupported open-in-app link). */

/* ---------- Legal layout ---------- */
.legal { padding-top: 32px; }
@media (min-width: 900px) { .legal { padding-top: 56px; } }
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1000px) { .legal-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 56px; } }
.legal-main { min-width: 0; max-width: 780px; }

.legal-toc { display: none; }
@media (min-width: 1000px) {
  .legal-toc { display: block; position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
}
.legal-toc-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); margin: 0 0 10px 12px; }
html[lang="hi"] .legal-toc-h { letter-spacing: 0; text-transform: none; font-size: 14px; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--line); }
.legal-toc a { display: flex; gap: 10px; align-items: baseline; padding: 7px 12px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--muted); text-decoration: none; }
.legal-toc a .n { font-size: 12px; font-weight: 700; color: var(--faint); min-width: 16px; font-variant-numeric: tabular-nums; }
.legal-toc a:hover { color: var(--ink); }
.legal-toc a.is-active { color: var(--accent); border-left-color: var(--accent); }
.legal-toc a.is-active .n { color: var(--accent); }

.legal-toc-m { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin: 0 0 28px; }
@media (min-width: 1000px) { .legal-toc-m { display: none; } }
.legal-toc-m summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; }
.legal-toc-m summary::-webkit-details-marker { display: none; }
.legal-toc-m summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--muted); line-height: 1; }
.legal-toc-m[open] summary::after { content: "–"; }
.legal-toc-m summary svg { width: 18px; height: 18px; color: var(--muted); }
.legal-toc-m ol { margin: 0; padding: 0 16px 14px 36px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.legal-toc-m a { color: var(--ink-2); text-decoration: none; font-weight: 600; }

.legal-updated { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.legal-updated svg { width: 16px; height: 16px; }

.legal-summary { background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: 22px 22px 20px; margin-bottom: 16px; }
.legal-summary h2 { margin-bottom: 14px; }
.legal-summary .check-list { gap: 10px; color: var(--ink-2); font-size: 15px; }
.legal-hindi { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px 20px; margin-bottom: 28px; }
.legal-hindi h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 16px; }
.legal-hindi h2 svg { width: 18px; height: 18px; color: var(--accent); }
.legal-hindi p { font-family: 'Noto Sans Devanagari', var(--font); font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.legal-summary + .legal-toc-m, .legal-hindi + .legal-toc-m { margin-top: 12px; }

/* Article */
.legal-body { max-width: none; }
/* html already sets scroll-padding-top for anchor jumps */
.legal-body > section + section { border-top: 1px solid var(--line); margin-top: 8px; }
.legal-body h2 { font-size: 22px; margin: 32px 0 12px; display: flex; gap: 12px; align-items: baseline; }
.legal-body h2 .n { font-size: 14px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 8px; min-width: 28px; height: 28px; display: inline-grid; place-items: center; flex: 0 0 auto; transform: translateY(-2px); }
.legal-body h3 { font-size: 17px; margin: 22px 0 8px; }
.legal-body li::marker { color: var(--faint); }
.legal-body ul, .legal-body ol { padding-left: 22px; }
.legal-body a { overflow-wrap: anywhere; }
.legal-body .table-wrap { margin: 4px 0 20px; }
.legal-body .table-wrap table { margin: 0; }
.legal-body .table th, .legal-body .table td { font-size: 14px; padding: 12px 14px; vertical-align: top; }
.legal-body .table td code { font-size: 13px; white-space: nowrap; }
.legal-body .callout { margin: 8px 0 20px; }
.legal-body .callout p:last-child { margin-bottom: 0; }
.legal-body dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 20px; margin: 0 0 20px; }
@media (min-width: 560px) { .legal-body dl { grid-template-columns: 170px minmax(0, 1fr); } }
.legal-body dt { font-weight: 700; color: var(--ink); }
.legal-body dd { margin: 0 0 10px; color: var(--ink-2); overflow-wrap: anywhere; }
.legal-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 8px 0 20px; }
.legal-cards .card { padding: 18px; border-radius: var(--r-md); }
.legal-cards .card strong { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; color: var(--ink); }
.legal-cards .card strong svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
.legal-cards .card p { margin: 0; font-size: 14px; color: var(--muted); }
.legal-cards.red .card strong svg { color: var(--red); }

.legal-consent { margin: 4px 0 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-md); padding: 14px 16px; }
.legal-consent p { margin: 0 !important; font-size: 14px; }

.legal-foot { margin-top: 40px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--soft); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.legal-more { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.legal-more a { color: var(--muted); font-weight: 600; text-decoration: none; }
.legal-more a:hover { color: var(--accent); }

.officer { display: grid; gap: 4px 20px; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; margin: 8px 0 24px; }
@media (min-width: 560px) { .officer { grid-template-columns: 150px minmax(0, 1fr); } }
.officer dt { font-weight: 700; color: var(--muted); font-size: 14px; }
.officer dd { margin: 0 0 10px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.timeline { list-style: none; padding: 0 !important; margin: 8px 0 24px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.timeline li { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; background: var(--surface); margin: 0; }
.timeline .v { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--accent); }
.timeline .k { display: block; font-size: 14px; color: var(--muted); }
.legal-form { margin-top: 12px; }

/* ---------- Link preview (hi4.in/slug+) ---------- */
.lp { padding: 32px 0 56px; }
@media (min-width: 900px) { .lp { padding: 56px 0 88px; } }
.lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 640px) { .lp-card { padding: 32px; } }
.lp-head { display: flex; flex-direction: column; gap: 6px; }
.lp-head h1 { font-size: clamp(24px, 4vw, 32px); line-height: 1.2; overflow-wrap: anywhere; }
.lp-head h1 .short { color: var(--accent); }
.lp-dest { border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.lp-domain { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: clamp(16px, 4.6vw, 20px); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; line-height: 1.25; }
.lp-domain svg { width: 22px; height: 22px; color: var(--muted); flex: 0 0 auto; }
.lp-url { font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; word-break: break-all; margin: 0; }
.lp-url mark { background: var(--accent-soft); color: var(--ink); font-weight: 700; border-radius: 4px; padding: 1px 3px; }
.lp-url .scheme.http { color: var(--red); font-weight: 700; }
.lp-dest .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.lp-hidden { display: flex; gap: 14px; align-items: flex-start; }
.lp-hidden svg { width: 28px; height: 28px; color: var(--muted); flex: 0 0 auto; margin-top: 2px; }
.lp .verdict .ico { width: 28px; height: 28px; flex: 0 0 auto; }
.lp .verdict.safe .ico { color: var(--green); }
.lp .verdict.warn .ico { color: var(--amber); }
.lp .verdict.danger .ico { color: var(--red); }
.lp-reasons { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); }
.lp-reasons li { display: flex; gap: 8px; align-items: flex-start; }
.lp-reasons li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--faint); }
.lp-reasons li.danger::before { background: var(--red); }
.lp-reasons li.warn::before { background: var(--amber); }
.lp-reasons li.ok::before { background: var(--green); }
.lp-meta { display: grid; gap: 4px 16px; grid-template-columns: minmax(0, 1fr); font-size: 14px; margin: 0; }
@media (min-width: 520px) { .lp-meta { grid-template-columns: 140px minmax(0, 1fr); } }
.lp-meta dt { color: var(--muted); font-weight: 600; }
.lp-meta dd { margin: 0 0 6px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-actions .btn { flex: 1 1 auto; }
@media (max-width: 520px) { .lp-actions .btn { width: 100%; } }
.lp-tip { font-size: 14px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.lp-tip svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.lp-tip code { background: var(--soft); border-radius: 6px; padding: 1px 6px; color: var(--ink); }

/* ---------- @handle available ---------- */
.hf { padding: 40px 0 24px; }
@media (min-width: 900px) { .hf { padding: 72px 0 40px; } }
.hf-grid { display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .hf-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } }
.hf-handle { font-family: var(--mono); font-size: clamp(20px, 3.4vw, 30px); font-weight: 700; letter-spacing: -.02em; color: var(--accent); background: var(--accent-tint); border: 1.5px dashed var(--accent-line); border-radius: var(--r); padding: 8px 14px; display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; margin-bottom: 10px; line-height: 1.25; }
.hf .claim { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.hf .claim .input-group { flex: 1 1 260px; }
.hf .claim .btn { flex: 0 0 auto; }
@media (max-width: 520px) { .hf .claim .btn { width: 100%; } }
.hf-phone { display: none; }
@media (min-width: 900px) { .hf-phone { display: block; } }
.hf-phone .phone-screen { height: 520px; }
.hf-mock { padding: 0 14px 20px; background: #F5F6FA; min-height: 100%; }
.hf-mock .cover { height: 96px; margin: 0 -14px; background: linear-gradient(135deg, #3730C9, #B0479B); border-radius: 0 0 20px 20px; }
.hf-mock .av { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: #EEEDFC; color: #3730C9; margin-top: -36px; display: grid; place-items: center; font-weight: 800; font-size: 26px; }
.hf-mock .nm { font-weight: 800; font-size: 18px; margin-top: 10px; color: #101326; overflow-wrap: anywhere; }
.hf-mock .mt { font-size: 12px; color: #4A5068; margin-top: 2px; }
.hf-mock .acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0; }
.hf-mock .acts span { background: #fff; border: 1px solid #E4E6EF; border-radius: 12px; height: 54px; display: grid; place-items: center; color: #3730C9; }
.hf-mock .acts span svg { width: 20px; height: 20px; }
.hf-mock .acts span.wa { background: #0B7A55; border-color: #0B7A55; color: #fff; }
.hf-mock .ln { background: #fff; border: 1px solid #E4E6EF; border-radius: 12px; height: 46px; margin-bottom: 8px; display: flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 700; color: #101326; }
.hf-mock .ln i { flex: 1; height: 8px; border-radius: 4px; background: #E4E6EF; margin-left: 10px; }

/* ---------- Unsupported open-in-app link ---------- */
.ou-apps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.ou-apps li { background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ou-given { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; word-break: break-all; background: var(--soft); border-radius: var(--r); padding: 12px 14px; color: var(--ink-2); }