/* IDO — text pages: /privacy (legal text word for word, new frame) and the 404. Phase 7.
   Not drawn in Figma (PROPOSED): built from the tokens, type classes and buttons of the home / case pages.
   Nav, nav sheet and footer come from home.css. */

.doc { background: var(--color-bg-surface); padding-top: 68px; }            /* phone nav band (as .case) */
.doc__inner { width: 100%; max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { .doc { padding-top: 96px; } }
@media (min-width: 1200px) {
  .doc { padding-top: min(120px, 8.333vw); }
  .doc-page .nav { top: 0; }                                                /* as the case pages: the nav band at y 0 */
}

/* ---------- /privacy ---------- */
.legal-hero { padding-block: 48px 40px; border-bottom: 1px solid var(--color-border-subtle); }
.legal-hero__eyebrow { color: var(--color-text-muted); }
.legal-hero__title { margin-top: 16px; }
.legal-hero__updated { margin-top: 12px; }
.legal-body { padding-block: 48px 96px; }
@media (min-width: 768px) { .legal-hero { padding-block: 72px 48px; } .legal-body { padding-block: 64px 120px; } }

.legal-body p, .legal-body li { font-family: var(--font-body); font-size: var(--fs-p); line-height: var(--lh-p); color: var(--color-text-secondary); text-wrap: pretty; }
.legal-body p { margin: 0 0 14px; }
.legal-body strong { color: var(--color-text-primary); font-weight: 600; }
.legal-body a { color: var(--color-brand-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--color-text-primary); }
.legal-body .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.legal-body a.ltr[href^="http"] { display: inline; overflow-wrap: anywhere; }   /* the long opt-out URL may wrap on a 320 screen instead of leaving «בכתובת» alone */
.legal-intro { margin-bottom: 40px !important; font-family: var(--font-heading) !important; font-weight: 500; font-size: 20px !important; line-height: 30px !important; color: var(--color-text-primary) !important; text-wrap: pretty; }
@media (min-width: 768px) { .legal-intro { font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; } }
.legal-intro strong { white-space: nowrap; }   /* «dodo-studio.com» never breaks at its hyphen */

/* table of contents */
.legal-toc { margin-bottom: 56px; padding: 24px; background: var(--color-bg-page); border-radius: var(--radius-2xl); }
.legal-toc h2 { margin: 0 0 12px; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: 0.3px; color: var(--color-text-muted); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 4px 24px; }
@media (min-width: 640px) { .legal-toc ol { grid-template-columns: 1fr 1fr; } }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: inline-block; padding-block: 6px; font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-text-primary); text-decoration: none; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero) "  "; font-family: var(--font-mono); font-weight: 500; color: var(--color-text-muted); }
.legal-toc a:hover { color: var(--color-brand-text); }

/* sections */
.legal-sec { margin-bottom: 48px; scroll-margin-top: 100px; }
.legal-sec h2 { margin: 0 0 16px; font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--color-text-primary); text-wrap: balance; }
.legal-sec h2 .n { margin-inline-end: 12px; font-family: var(--font-mono); font-weight: 500; font-size: 0.6em; color: var(--color-text-muted); }   /* muted, not ink-300: 5.1:1 */
.legal-sec h3 { margin: 24px 0 8px; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-p); line-height: var(--lh-p); color: var(--color-text-primary); }
.legal-sec ul { margin: 0 0 16px; padding: 0; list-style: none; }
.legal-sec li { position: relative; margin-bottom: 8px; padding-inline-start: 22px; }
.legal-sec li::before { content: ""; position: absolute; inset-inline-start: 2px; top: calc(var(--lh-p) / 2 - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--color-deco-green); }

/* contact block: ink panel */
.legal-contact { margin-top: 56px; padding: 32px; background: var(--color-bg-inverse); border-radius: var(--radius-3xl); }
.legal-body .legal-contact h2, .legal-body .legal-contact p, .legal-body .legal-contact .rows { color: var(--color-text-inverse); }
.legal-body .legal-contact p { opacity: .8; }
.legal-body .legal-contact a { color: var(--color-text-inverse); }
.legal-contact .rows { display: grid; gap: 10px; margin-top: 16px; font-family: var(--font-body); font-size: var(--fs-p); line-height: var(--lh-p); }
@media (min-width: 768px) { .legal-contact { padding: 40px 48px; } }

/* ---------- 404 ---------- */
.notfound { min-height: 72svh; display: flex; align-items: center; }
.notfound__inner { padding-block: 64px 96px; display: flex; flex-direction: column; align-items: flex-start; }
.notfound__code { font-family: var(--font-mono); font-weight: 500; letter-spacing: 2px; }
.notfound__title { margin-top: 16px; }
.notfound__p { margin-top: 20px; max-width: 520px; }
.notfound__buttons { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* quiet entrance (case pages' system): fade + 16 px rise, once */
.motion .doc :is(.legal-hero__eyebrow, .legal-hero__title, .legal-hero__updated, .notfound__inner > *) { animation: ido-fade .8s var(--ease-reveal) both, ido-rise16 .8s var(--ease-reveal) both; }
.motion .doc :is(.legal-hero__title, .notfound__title) { animation-delay: .1s; }
.motion .doc :is(.legal-hero__updated, .notfound__p) { animation-delay: .2s; }
.motion .doc .notfound__buttons { animation-delay: .3s; }