/* Legal pages (terms.html) — "a document meant to be read": plain-language line per clause, sticky contents with
 * scroll-spy, in-page search, "summaries only" switch, refund map, live business identity card, print-ready.
 * Built on the 2026 redesign tokens (redesign.css); logical properties so RTL (default) and LTR mirror.
 * Never letter-space Arabic: the mono/uppercase treatment is only used on [lang="en"] or on numbers. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
html { scroll-padding-top: calc(var(--notice-h, 0px) + 92px); }

.lg-progress { position: fixed; inset-inline: 0; top: var(--notice-h, 0px); height: 3px; z-index: 101; pointer-events: none; }
.lg-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); transform: scaleX(0); transform-origin: left center; }
html[dir="rtl"] .lg-progress span { transform-origin: right center; background: linear-gradient(270deg, var(--blue), var(--green)); }

.lg-page { background: var(--paper); }

/* ---------- hero ---------- */
.lg-hero { position: relative; overflow: hidden; padding-block: calc(78px + clamp(28px, 5vw, 64px)) clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--line); background: #fff; }
.lg-hero::before { /* rings + red sun: the site's Japan motif, quietly */
  content: ""; position: absolute; inset-inline-end: clamp(-160px, -8vw, -60px); top: 50%; width: clamp(280px, 38vw, 520px); aspect-ratio: 1; transform: translateY(-46%);
  background:
    radial-gradient(circle, var(--red) 0 9%, transparent 9.4%),
    repeating-radial-gradient(circle, transparent 0 13%, var(--ring-faint) 13% 13.5%);
  border-radius: 50%; opacity: .75; pointer-events: none;
}
.lg-hero-in { position: relative; max-width: 1280px; }
.lg-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 14px; }
[lang="en"] .lg-kicker { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.lg-seal { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(224, 69, 58, .14); }
.lg-hero h1 { font-size: clamp(34px, 5.4vw, 60px); margin: 0 0 14px; }
.lg-lead { max-width: 60ch; font-size: clamp(15px, 1.5vw, 18px); color: var(--text); margin: 0 0 26px; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; }
.lg-meta > div { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.lg-meta dt { font-size: 12px; color: var(--muted); margin: 0 0 2px; }
.lg-meta dd { margin: 0; color: var(--ink); font-weight: 500; font-size: 14px; }
.lg-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- layout ---------- */
.lg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: clamp(24px, 4vw, 48px) clamp(48px, 6vw, 88px); }
@media (min-width: 980px) { .lg-layout { grid-template-columns: 272px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); } }
.lg-body { min-width: 0; max-width: 820px; }

/* ---------- sidebar ---------- */
.lg-side-in { display: grid; gap: 12px; }
@media (min-width: 980px) { .lg-side-in { position: sticky; top: calc(var(--notice-h, 0px) + 88px); max-height: calc(100vh - var(--notice-h, 0px) - 104px); overflow: auto; padding-inline-end: 4px; } }
.lg-search { position: relative; display: block; }
.lg-search svg { position: absolute; inset-inline-start: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.lg-search input { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding-inline: 38px 12px; font: inherit; font-size: 14px; color: var(--ink); }
.lg-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.lg-search-empty { margin: 0; font-size: 13px; color: var(--muted); }
.lg-switch { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; user-select: none; padding: 4px 2px; }
.lg-switch input { position: absolute; opacity: 0; pointer-events: none; }
.lg-switch-ui { width: 38px; height: 22px; border-radius: 99px; background: var(--seg); position: relative; transition: background .2s; flex: none; }
.lg-switch-ui::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: inset-inline-start .2s; }
.lg-switch input:checked + .lg-switch-ui { background: var(--blue); }
.lg-switch input:checked + .lg-switch-ui::after { inset-inline-start: 19px; }
.lg-switch input:focus-visible + .lg-switch-ui { box-shadow: 0 0 0 3px var(--blue-soft); }

.lg-toc { display: none; }
@media (min-width: 980px) { .lg-toc { display: block; border-top: 1px solid var(--line); padding-top: 10px; } }
.lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.lg-toc a { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; color: var(--text); font-size: 13.5px; line-height: 1.45; text-decoration: none; border-inline-start: 2px solid transparent; }
.lg-toc a:hover { background: #fff; color: var(--ink); }
.lg-toc a.active { background: #fff; color: var(--blue); border-inline-start-color: var(--blue); font-weight: 500; }
.lg-toc a .num { font-size: 11.5px; color: var(--muted); min-width: 1.6em; }
.lg-toc a.active .num { color: var(--blue); }
.lg-toc li[hidden] { display: none; }

/* ---------- summary + journey ---------- */
.lg-summary, .lg-journey { margin-bottom: 36px; }
.lg-summary h2, .lg-journey h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 6px; }
.lg-note { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.lg-translation { background: var(--blue-tint); border: 1px solid var(--sky); color: var(--ink); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 0 0 24px; }
.lg-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.lg-cards li { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 16px; display: grid; gap: 6px; align-content: start; position: relative; }
.lg-cards li::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F7A48' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat; margin-bottom: 4px; }
.lg-cards b { color: var(--ink); font-weight: 600; font-size: 15.5px; }
.lg-cards span { font-size: 14px; color: var(--text); line-height: 1.65; }

.lg-stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; counter-reset: none; }
.lg-stages li { --c: var(--green); --t: var(--green-tint); background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 14px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.lg-stages li.mid { --c: #D9941A; --t: #FBF1DF; }
.lg-stages li.no { --c: var(--red); --t: #FCEBEA; }
.lg-stage-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.lg-stages b { color: var(--ink); font-size: 15px; line-height: 1.4; }
.lg-stages em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--ink); background: var(--t); border-radius: 99px; padding: 3px 10px; justify-self: start; }
.lg-stages span:last-child { font-size: 13.5px; color: var(--text); line-height: 1.6; }

/* data map (privacy.html): one table of what we keep, why, who sees it, how long */
.lg-datamap-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.lg-datamap { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; min-width: 620px; }
.lg-datamap th, .lg-datamap td { text-align: start; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--divider); }
.lg-datamap thead th { background: var(--paper); color: var(--muted); font-weight: 500; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.lg-datamap tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.lg-datamap tbody tr:last-child > * { border-bottom: 0; }
.lg-datamap td:nth-child(3) { color: var(--ink); }
.lg-datamap.compact { min-width: 520px; }
.lg-full .lg-datamap-wrap { margin: 4px 0 12px; }
.lg-rights-cta { margin-top: 6px; }

/* ---------- clauses ---------- */
.lg-sec { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 2.6vw, 28px); margin-bottom: 14px; position: relative; }
.lg-sec.lg-key { border-color: var(--sky); box-shadow: 0 0 0 4px var(--blue-50); }
.lg-sec h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(18px, 2vw, 22px); margin: 0 0 12px; padding-inline-end: 40px; }
.lg-n { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.lg-key .lg-n { background: var(--blue); color: #fff; border-color: var(--blue); }
.lg-brief { position: relative; margin: 0 0 14px; background: var(--blue-50); border-radius: 12px; padding: 10px 14px 10px; color: var(--ink); font-size: 15px; line-height: 1.65; border-inline-start: 3px solid var(--blue); }
.lg-brief::before { display: block; font-size: 12px; font-weight: 600; color: var(--blue); margin-bottom: 2px; }
[lang="ar"] .lg-brief::before { content: "باختصار"; }
[lang="en"] .lg-brief::before { content: "IN SHORT"; font-family: var(--font-mono); letter-spacing: .12em; font-size: 11px; }
.lg-full { font-size: 15px; line-height: 1.9; color: var(--text); }
.lg-full p { margin: 0 0 10px; }
.lg-full p:last-child { margin-bottom: 0; }
.lg-full b { color: var(--ink); font-weight: 600; }
.lg-full ul { margin: 0 0 12px; padding-inline-start: 22px; display: grid; gap: 4px; list-style: disc; }
.lg-full ul li { display: list-item; }
.lg-full li::marker { color: var(--red); }
.lg-full a, .lg-note a, .lg-cards a, .lg-search-empty a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.lg-anchor { position: absolute; inset-inline-end: 16px; top: 18px; width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: .55; transition: opacity .15s, background .15s, color .15s; }
.lg-sec:hover .lg-anchor, .lg-anchor:focus-visible { opacity: 1; }
.lg-anchor:hover { background: var(--paper); border-color: var(--line); color: var(--ink); }
.lg-anchor svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lg-anchor.copied { color: var(--green-text); opacity: 1; }
.lg-anchor .lg-tip { position: absolute; bottom: calc(100% + 6px); inset-inline-end: 0; white-space: nowrap; background: var(--ink); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; pointer-events: none; }

.lg-sec.flash { animation: lg-flash 1.6s ease-out; }
@keyframes lg-flash { 0% { box-shadow: 0 0 0 4px rgba(26, 111, 224, .35); } 100% { box-shadow: 0 0 0 4px rgba(26, 111, 224, 0); } }
@media (prefers-reduced-motion: reduce) { .lg-sec.flash { animation: none; } html { scroll-behavior: auto; } }

/* brief-only mode + search */
.lg-doc.brief-only .lg-full { display: none; }
.lg-doc.brief-only .lg-brief { margin-bottom: 0; }
.lg-doc.brief-only .lg-sec { padding-block: 16px; }
.lg-sec[hidden], .lg-summary[hidden], .lg-journey[hidden] { display: none; }
mark.lg-hit { background: #FFE7A3; color: inherit; border-radius: 3px; padding: 0 1px; }

/* identity card */
.lg-idcard { margin: 12px 0 4px; border: 1px dashed var(--line-strong); border-radius: 14px; padding: 14px 16px; background: var(--paper); }
.lg-idcard dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 20px; }
.lg-idcard dt { font-size: 12px; color: var(--muted); }
.lg-idcard dd { margin: 0; color: var(--ink); font-weight: 500; font-size: 14.5px; overflow-wrap: anywhere; }
.lg-idcard dd.pending { color: var(--muted); font-weight: 400; font-style: normal; font-family: var(--font-body); }
.lg-idcard a { color: var(--blue); }

/* end card */
.lg-end { margin-top: 26px; border-radius: 18px; padding: clamp(20px, 3vw, 30px); background: var(--gradient-brand-soft); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.lg-end p { margin: 0; color: var(--ink); font-size: 16px; max-width: 46ch; }
.lg-end div { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 640px) {
  .lg-hero::before { width: 180px; top: calc(78px + 8px); inset-inline-end: -70px; transform: none; opacity: .5; }
  .lg-hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .lg-meta > div { flex: 1 1 calc(50% - 10px); }
  .lg-sec h2 { padding-inline-end: 34px; }
  .lg-anchor { inset-inline-end: 10px; top: 14px; }
}

/* ---------- print / save as PDF ---------- */
@media print {
  .site-header, .mobile-nav, .site-footer, .lg-progress, .lg-side, .lg-hero-actions, .lg-anchor, .lg-end, .sp-fab, .site-notice { display: none !important; }
  body { padding-top: 0 !important; background: #fff; }
  .lg-hero { padding-block: 0 16px; }
  .lg-hero::before { display: none; }
  .lg-layout { display: block; padding: 0; }
  .lg-body { max-width: none; }
  .lg-sec, .lg-cards li, .lg-stages li, .lg-datamap tr { break-inside: avoid; box-shadow: none !important; }
  .lg-rights-cta { display: none; }
  .lg-doc.brief-only .lg-full { display: block; }
  .lg-sec[hidden] { display: block !important; }
  a { color: inherit !important; text-decoration: none !important; }
}