/* ─── The legal pages and the 404 (redesign D10, 2026-10-12) ───────────────────────────────────────
   Daniel's answers, all recommended: privacy and terms open on a short "at a glance" row, then their
   sections with a mark each and a contents column beside them (like Settings); the 404 is a large
   outline 404 (the guide's numerals) with four ways back. Flat cards, one typeface, gold only for
   the next action. Hebrew reads right to left inside .lg-page / .nf-page (the document stays LTR).
   Loaded after main.css by privacy.html, terms.html and 404.html — and by 404.html from the ROOT
   (/css/legal.css): Netlify serves that file for any unknown path, nested ones too.
   The improve round (same day, all of Daniel's picks): a live data map beside the privacy title,
   action buttons inside the sections, the key sentence of a section in bold, "not investment
   advice" as the one gold card, a reading progress line on the contents, a calm entrance; on the
   404 a "were you looking for" card, links that fit the visitor, a pulse where the line breaks.  */

:root:not([data-lang="en"]) .lg-page, :root:not([data-lang="en"]) .nf-page { direction: rtl; }

/* ── privacy + terms ── */
.lg-page { max-width: 1100px; margin: 0 auto; padding: 56px 28px 72px; }
.lg-head { max-width: 720px; margin-bottom: 28px; text-align: start; }
.lg-eyebrow { margin: 0 0 10px; font-size: 0.86rem; font-weight: 600; color: var(--gray-300); }
.lg-title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--white); }
.lg-sub { margin: 0; font-size: 1.04rem; line-height: 1.7; color: var(--gray-200); text-wrap: pretty; }
.lg-date { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--edge-hi); font-size: 0.8rem; color: var(--gray-300); }
.lg-date::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-300); }
/* the date and "what changed" on one row; opened, the list takes its own row under them */
.lg-meta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 16px; }
.lg-meta .lg-date { margin: 0; }
.lg-changes { font-size: 0.8rem; color: var(--gray-300); }
.lg-changes > summary { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--edge-hi);
  color: var(--gray-200); cursor: pointer; list-style: none; transition: border-color .15s ease, color .15s ease; }
.lg-changes > summary::-webkit-details-marker { display: none; }
.lg-changes > summary::after { content: ""; position: absolute; inset: -8px 0; }
.lg-changes > summary:hover { color: var(--white); border-color: var(--gray-300); }
.lg-changes > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-changes > summary svg { width: 11px; height: 11px; transition: transform .2s ease; }
.lg-changes[open] { flex-basis: 100%; }
.lg-changes[open] > summary svg { transform: rotate(180deg); }
.lg-changes ol { list-style: none; margin: 14px 0 0; padding: 2px 0 0; border-inline-start: 1px solid var(--edge-hi); }
.lg-changes li { position: relative; padding: 0 0 14px; padding-inline-start: 18px; text-align: start; }
.lg-changes li:last-child { padding-bottom: 2px; }
.lg-changes li::before { content: ""; position: absolute; inset-inline-start: -4px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--gray-400); }
.lg-changes li:first-child::before { background: var(--white); }
.lg-changes time { display: block; margin-bottom: 2px; font-size: 0.8rem; font-weight: 700; color: var(--white); }
.lg-changes li span { display: block; font-size: 0.86rem; line-height: 1.65; color: var(--gray-200); text-wrap: pretty; }
/* privacy: the title beside its data map (the space beside the title used to stay empty) */
.lg-head.has-map { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; align-items: center; }
/* terms: the title beside its four short cards, two by two (the same empty space, filled with the page's own summary) */
.lg-head.has-glance { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 48px; align-items: center; margin-bottom: 40px; }
.lg-head .lg-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }

/* the data map: your browser in the middle, a line to everything that ever gets data — and the one that never does */
.lg-map { margin: 0; padding: 18px 18px 20px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--edge); }
.lg-map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; text-align: start; }
.lg-map-head b { font-size: 0.92rem; font-weight: 700; color: var(--white); }
.lg-map-head span { font-size: 0.78rem; color: var(--gray-300); }
.lg-map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); grid-template-rows: auto 26px auto 26px auto;
  grid-template-areas: "ext e1 acct . ." ". . e2 . ." "ads e3 home e4 coach" ". . e5 . ." ". . forms . ."; }
.ma-ext { grid-area: ext; } .ma-acct { grid-area: acct; } .ma-ads { grid-area: ads; } .ma-home { grid-area: home; } .ma-coach { grid-area: coach; } .ma-forms { grid-area: forms; }
.ma-e1 { grid-area: e1; } .ma-e2 { grid-area: e2; } .ma-e3 { grid-area: e3; } .ma-e4 { grid-area: e4; } .ma-e5 { grid-area: e5; }
.m-node { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 10px 6px 11px; border-radius: 12px;
  background: var(--surface-sunk); border: 1px solid var(--edge); color: var(--white); text-align: center; text-decoration: none; transition: border-color .2s ease, opacity .2s ease; }
.m-node:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.m-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 2px; border-radius: 50%; border: 1px solid var(--edge-hi); color: var(--gray-100); }
.m-ico svg { width: 14px; height: 14px; }
.m-node b { font-size: 0.8rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.m-node small { font-size: 0.7rem; line-height: 1.35; color: var(--gray-300); overflow-wrap: anywhere; }
/* the key insight of the page: the data lives with you */
.m-node.m-home { border-color: color-mix(in srgb, var(--moon) 50%, var(--edge)); }
.m-home .m-ico { color: var(--moon); border-color: color-mix(in srgb, var(--moon) 45%, transparent); }
/* the one that never gets anything */
.m-node.m-off { border-style: dashed; background: transparent; }
.m-off b { color: var(--gray-300); text-decoration: line-through; text-decoration-color: var(--gray-400); }
.m-off .m-ico { color: var(--gray-400); }
/* the lines between them, and the data travelling along them */
.m-edge { position: relative; min-width: 0; }
.m-edge::before { content: ""; position: absolute; background: var(--edge-hi); transition: background .2s ease; }
.m-h::before { inset-inline: 0; top: calc(50% - 0.75px); height: 1.5px; }
.m-v::before { inset-block: 0; left: calc(50% - 0.75px); width: 1.5px; }
.m-cut::before { background: repeating-linear-gradient(90deg, var(--edge-hi) 0 4px, transparent 4px 8px); }
.m-x { position: absolute; top: calc(50% - 9px); left: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 1px solid var(--edge-hi);
  display: inline-flex; align-items: center; justify-content: center; color: var(--gray-300); }
.m-x svg { width: 8px; height: 8px; }
.m-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200); opacity: 0; }
.m-h .m-dot { top: calc(50% - 3px); inset-inline-start: 0; }
.m-v .m-dot { left: calc(50% - 3px); top: 0; }
/* a part pointed at: its lines and the part at their other end light up, the rest steps back */
.lg-map.is-hot .m-node:not(.hot) { opacity: 0.45; }
.m-edge.hot::before { background: color-mix(in srgb, var(--moon) 70%, transparent); }
.m-cut.hot::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--moon) 70%, transparent) 0 4px, transparent 4px 8px); }
.m-edge.hot .m-dot { background: var(--moon); }
.m-node.hot { border-color: color-mix(in srgb, var(--moon) 55%, var(--edge)); }

/* at a glance: four short cards */
.lg-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 40px; }
.lg-g { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--edge); text-align: start; }
.lg-g-ico { width: 34px; height: 34px; margin-bottom: 6px; border-radius: 10px; border: 1px solid var(--edge-hi); display: inline-flex; align-items: center; justify-content: center; color: var(--gray-100); }
.lg-g-ico svg, .lg-ico svg { width: 16px; height: 16px; }
.lg-g b { font-size: 0.98rem; font-weight: 700; color: var(--white); }
.lg-g span { font-size: 0.86rem; line-height: 1.6; color: var(--gray-200); }
.lg-dots { display: none; }

/* the contents beside the sections, with a reading line along their side (neutral: it says where you
   are, not what to do next — the guide's rule) */
.lg-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px; align-items: start; }
.lg-toc { --pc: color-mix(in srgb, var(--white) 55%, transparent); --side: left;
  position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; padding-inline-start: 12px;
  background: linear-gradient(var(--pc), var(--pc)) no-repeat var(--side) top / 2px calc(var(--p, 0) * 100%),
              linear-gradient(var(--edge-hi), var(--edge-hi)) no-repeat var(--side) top / 1px 100%; }
:root:not([data-lang="en"]) .lg-toc { --side: right; }
.lg-toc-t { margin: 0 0 8px; padding: 0 12px; font-size: 0.78rem; font-weight: 700; color: var(--gray-300); }
.lg-toc a { display: block; padding: 7px 12px; border-radius: 10px; color: var(--gray-200); font-size: 0.88rem; text-decoration: none; transition: color .15s ease, background .15s ease; text-align: start; }
.lg-toc a:hover { color: var(--white); background: var(--surface); }
.lg-toc a.active { color: var(--white); background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
.lg-toc a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* the sections: one card, a hairline between them, a mark each */
.lg-main { min-width: 0; }
.lg-card { padding: 6px 28px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--edge); }
.lg-sec { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-top: 1px solid var(--edge); scroll-margin-top: 84px; text-align: start; }
.lg-sec:first-child { border-top: 0; }
.lg-ico { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--edge-hi); display: inline-flex; align-items: center; justify-content: center; color: var(--gray-100); }
.lg-sec h2 { margin: 6px 0 8px; font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--white); }
/* a link to the clause itself, copied from beside its title: shown when the section is pointed at (always, faintly, on touch) */
.lg-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-inline-start: 6px; padding: 0; vertical-align: -6px;
  border: 0; border-radius: 8px; background: transparent; color: var(--gray-300); cursor: pointer; opacity: 0; transition: opacity .15s ease, color .15s ease, background .15s ease; }
.lg-link::after { content: ""; position: absolute; inset: -8px; }
.lg-link svg { width: 15px; height: 15px; }
.lg-link .lg-link-done { display: none; }
.lg-link.is-done .lg-link-idle { display: none; } .lg-link.is-done .lg-link-done { display: block; color: var(--moon); }
.lg-sec:hover .lg-link, .lg-link:focus-visible, .lg-link.is-done { opacity: 1; }
.lg-link:hover { color: var(--white); background: var(--surface-sunk); }
.lg-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: none) { .lg-link { opacity: 0.7; } }
.lg-sec p { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.8; color: var(--gray-200); text-wrap: pretty; }
.lg-sec p:last-child { margin-bottom: 0; }
/* the sentence that matters most in a section: whole sentences only, so each one translates on its own */
.lg-sec p strong { font-weight: 600; color: var(--white); }
.lg-sec a { color: var(--white); text-underline-offset: 3px; }
/* the reader's place in the section list: when a contents link jumps here, the section lights for a moment */
.lg-sec:target h2 { color: var(--moon); transition: color 1.2s ease; }
/* "not investment advice": the one statement on the terms page in gold, set apart inside the list */
.lg-sec.is-key { margin: 6px -14px; padding: 20px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--moon) 45%, var(--edge));
  background: color-mix(in srgb, var(--moon) 6%, transparent); }
.lg-sec.is-key + .lg-sec { border-top: 0; }
/* this device, now (privacy, the first section): what the stores hold, read in the browser and never sent */
.lg-mine { margin-top: 16px; padding: 16px; border-radius: 14px; background: var(--surface-sunk); border: 1px solid var(--edge); }
.lg-mine-head { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 0.86rem; font-weight: 700; color: var(--white); text-align: start; }
.lg-mine-head::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gray-200); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gray-200) 18%, transparent); }
.lg-mine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 8px; }
.lg-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--edge); text-align: start; }
.lg-stat b { font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--white); font-variant-numeric: tabular-nums; }
.lg-stat b.is-word { padding: 4px 0 3px; font-size: 0.95rem; }
.lg-stat > span { font-size: 0.76rem; line-height: 1.35; color: var(--gray-200); }
.lg-stat small { align-self: flex-start; margin-top: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--edge-hi); font-size: 0.68rem; color: var(--gray-300); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lg-stat small.is-synced { color: var(--gray-100); border-color: color-mix(in srgb, var(--white) 32%, transparent); }
.lg-sec .lg-mine-note { margin: 12px 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--gray-300); }
.lg-mine .lg-acts { margin-top: 12px; }
.lg-sec.is-key .lg-ico { color: var(--moon); border-color: color-mix(in srgb, var(--moon) 45%, transparent); }

/* the actions a section talks about, right where it talks about them */
.lg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lg-act { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--edge-hi);
  background: transparent; color: var(--white); font: inherit; font-size: 0.86rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.lg-act::after { content: ""; position: absolute; inset: -3px 0; }
.lg-act[hidden] { display: none; }
.lg-act:hover { border-color: var(--gray-300); background: var(--surface-sunk); }
.lg-act:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-act svg { width: 14px; height: 14px; flex: none; color: var(--gray-300); }
.lg-act.is-done svg { color: var(--moon); }
.lg-sec .lg-act { color: var(--white); text-decoration: none; }
:root:not([data-lang="en"]) .lg-act .lg-go { transform: scaleX(-1); }

/* the way on: the other page, and the contact */
.lg-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.lg-next-card { display: inline-flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--edge);
  color: var(--white); text-decoration: none; transition: border-color .2s ease; text-align: start; }
.lg-next-card:hover { border-color: var(--edge-hi); }
.lg-next-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lg-next-card small { display: block; font-size: 0.78rem; color: var(--gray-300); }
.lg-next-card b { font-size: 1rem; }
.lg-next-arrow { color: var(--gray-300); }
:root:not([data-lang="en"]) .lg-next-arrow { transform: scaleX(-1); }

/* motion: the page comes in once, calmly; the map draws its lines, then data starts to travel along them */
html:not(.anim-off) .lg-head > *, html:not(.anim-off) .lg-g, html:not(.anim-off) .lg-body { animation: lgIn .7s cubic-bezier(.22,.61,.36,1) both; }
html:not(.anim-off) .lg-head > :nth-child(2) { animation-delay: .12s; }
html:not(.anim-off) .lg-g:nth-child(1) { animation-delay: .18s; } html:not(.anim-off) .lg-g:nth-child(2) { animation-delay: .24s; }
html:not(.anim-off) .lg-g:nth-child(3) { animation-delay: .30s; } html:not(.anim-off) .lg-g:nth-child(4) { animation-delay: .36s; }
html:not(.anim-off) .lg-body { animation-delay: .4s; }
html:not(.anim-off) .m-h::before { transform-origin: left; animation: lgDrawX .7s cubic-bezier(.65,0,.35,1) .55s both; }
:root:not([data-lang="en"]):not(.anim-off) .m-h::before { transform-origin: right; }
html:not(.anim-off) .m-v::before { transform-origin: top; animation: lgDrawY .5s cubic-bezier(.65,0,.35,1) .55s both; }
html:not(.anim-off) .m-x { animation: lgFade .4s ease 1.1s both; }
html:not(.anim-off) .m-h .m-dot { animation: lgTravelX 2.8s ease-in-out 1.3s infinite; }
html:not(.anim-off) .m-v .m-dot { animation: lgTravelY 2.2s ease-in-out 1.3s infinite; }
html:not(.anim-off) .m-two .m-dot { animation-direction: alternate; }
html:not(.anim-off) .m-edge:nth-of-type(2n) .m-dot { animation-delay: 1.9s; }
@keyframes lgIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lgDrawX { from { transform: scaleX(0); } to { transform: none; } }
@keyframes lgDrawY { from { transform: scaleY(0); } to { transform: none; } }
@keyframes lgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lgTravelX { 0% { inset-inline-start: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { inset-inline-start: calc(100% - 6px); opacity: 0; } }
@keyframes lgTravelY { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 6px); opacity: 0; } }

/* ── 404 ── */
.nf-page { max-width: 760px; margin: 0 auto; padding: 72px 28px 80px; text-align: center; }
.nf-big { position: relative; display: inline-block; margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(7rem, 22vw, 11rem); line-height: 1;
  letter-spacing: -0.05em; user-select: none; direction: ltr;
  /* an outline only: Heebo's 4 is drawn from overlapping shapes, and a plain stroke traced the overlaps inside
     it too. The stroke goes under a fill of the page's own ground, so only its outer half (1.5px) shows. */
  color: var(--black); -webkit-text-stroke: 3px var(--edge-hi); paint-order: stroke fill; }
/* a chart line that rises and then breaks off — the link that went nowhere */
.nf-line { display: block; width: min(420px, 90%); height: 56px; margin: -18px auto 22px; overflow: visible; }
.nf-line path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nf-line .nf-up { stroke: var(--moon); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.nf-line .nf-gap { stroke: var(--gray-400); stroke-width: 2; stroke-dasharray: 0.02 0.035; }
.nf-line .nf-end { fill: var(--moon); }
/* where it broke: a quiet pulse, like the last price on a chart */
.nf-line .nf-pulse { fill: var(--moon); opacity: 0; transform-box: fill-box; transform-origin: center; }
.nf-title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.2rem); color: var(--white); }
.nf-sub { margin: 0 auto; max-width: 460px; font-size: 1.02rem; line-height: 1.7; color: var(--gray-200); }
/* the address that was not found, shown back as typed */
.nf-path { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px auto 0; font-size: 0.82rem; color: var(--gray-300); }
.nf-path[hidden] { display: none; }
.nf-path code { max-width: 100%; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--edge-hi); background: var(--surface-sunk); color: var(--gray-100);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; overflow-wrap: anywhere; }
.nf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; text-align: start; }
.nf-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--edge);
  color: var(--white); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.nf-link[hidden] { display: none; }
.nf-link:hover { border-color: var(--edge-hi); transform: translateY(-2px); }
.nf-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nf-link .lg-ico { flex: none; }
.nf-link b { display: block; font-size: 0.98rem; }
.nf-link small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--gray-300); }
.nf-link.is-next { border-color: color-mix(in srgb, var(--moon) 50%, var(--edge)); }
.nf-link.is-next .lg-ico { color: var(--moon); border-color: color-mix(in srgb, var(--moon) 45%, transparent); }
/* report a broken link: the site's own feedback form, with the address already written in */
.nf-report { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; font-size: 0.86rem; color: var(--gray-300); }
.nf-report[hidden] { display: none; }
/* "were you looking for": the page closest to the address, across the whole row, the gold one */
.nf-suggest { grid-column: 1 / -1; }
.nf-suggest[hidden] { display: none; }
.nf-suggest .nf-go { margin-inline-start: auto; color: var(--moon); }
:root:not([data-lang="en"]) .nf-suggest .nf-go { transform: scaleX(-1); }

/* motion: the 404 draws itself in once (the outline fades up, the line rises and breaks, then the break pulses) */
html:not(.anim-off) .nf-big { animation: nfIn 1s cubic-bezier(.22,.61,.36,1) both; }
html:not(.anim-off) .nf-line .nf-up { stroke-dashoffset: 1; animation: nfDraw 1.3s cubic-bezier(.65,0,.35,1) .35s forwards; }
html:not(.anim-off) .nf-line .nf-gap, html:not(.anim-off) .nf-line .nf-end { opacity: 0; animation: nfFade .6s ease 1.55s forwards; }
html:not(.anim-off) .nf-line .nf-pulse { animation: nfPulse 2.4s ease-out 2.2s infinite; }
html:not(.anim-off) .nf-title, html:not(.anim-off) .nf-sub, html:not(.anim-off) .nf-path, html:not(.anim-off) .nf-links { animation: nfIn .8s cubic-bezier(.22,.61,.36,1) both; }
html:not(.anim-off) .nf-title { animation-delay: .25s; } html:not(.anim-off) .nf-sub, html:not(.anim-off) .nf-path { animation-delay: .4s; } html:not(.anim-off) .nf-links { animation-delay: .55s; }
@keyframes nfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nfDraw { to { stroke-dashoffset: 0; } }
@keyframes nfFade { to { opacity: 1; } }
@keyframes nfPulse { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
@media (prefers-reduced-motion: reduce) {
  html:not(.anim-off) .nf-big, html:not(.anim-off) .nf-title, html:not(.anim-off) .nf-sub, html:not(.anim-off) .nf-path, html:not(.anim-off) .nf-links { animation: none; }
  html:not(.anim-off) .nf-line .nf-up { animation: none; stroke-dashoffset: 0; }
  html:not(.anim-off) .nf-line .nf-gap, html:not(.anim-off) .nf-line .nf-end { animation: none; opacity: 1; }
  html:not(.anim-off) .nf-line .nf-pulse { animation: none; }
  html:not(.anim-off) .lg-head > *, html:not(.anim-off) .lg-g, html:not(.anim-off) .lg-body { animation: none; }
  html:not(.anim-off) .m-h::before, html:not(.anim-off) .m-v::before, html:not(.anim-off) .m-x { animation: none; }
  html:not(.anim-off) .m-dot { animation: none; }
}

/* ── narrower ── */
@media (max-width: 1000px) {
  .lg-head.has-map { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lg-head.has-glance { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 28px; }
  .lg-head.has-map .lg-map { max-width: 560px; }
  .lg-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* the contents become a chip row that stays under the nav — the same row Settings has — with the
     reading line along its bottom edge */
  .lg-toc { top: 58px; z-index: 20; flex-direction: row; gap: 8px; overflow-x: auto; margin: 0 -28px; padding: 10px 28px;
            background: linear-gradient(var(--pc), var(--pc)) no-repeat var(--side) bottom / calc(var(--p, 0) * 100%) 2px,
                        linear-gradient(var(--edge), var(--edge)) no-repeat var(--side) bottom / 100% 1px, var(--black);
            scrollbar-width: none; }
  .lg-toc::-webkit-scrollbar { display: none; }
  .lg-toc-t { display: none; }
  .lg-toc a { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--edge-hi); font-size: 0.84rem; white-space: nowrap; }
  .lg-toc a.active { box-shadow: none; border-color: var(--moon); }
  /* the nav AND the sticky chip row sit above a section the contents jump to */
  .lg-sec { scroll-margin-top: 124px; }
}
@media (max-width: 560px) {
  .lg-page { padding: 36px 16px 56px; }
  .lg-toc { margin: 0 -16px; padding: 10px 16px; }
  .lg-map { padding: 14px 12px 16px; }
  .lg-map-grid { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); grid-template-rows: auto 22px auto 22px auto; }
  .m-node { padding: 9px 4px 10px; }
  .m-node b { font-size: 0.74rem; }
  .m-node small { font-size: 0.66rem; }
  .m-x { top: calc(50% - 8px); left: calc(50% - 8px); width: 16px; height: 16px; }
  /* a phone: the glance cards become one row that scrolls sideways (the next card peeks in), each a short
     card with the mark beside its title — about 300px less to scroll before the sections. Dots under it. */
  .lg-glance, .lg-head .lg-glance { display: flex; gap: 10px; margin: 0 -16px 28px; padding: 2px 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .lg-head .lg-glance { margin-bottom: 0; }
  .lg-glance::-webkit-scrollbar { display: none; }
  .lg-dots { display: flex; justify-content: center; gap: 6px; margin: -16px 0 24px; }
  .lg-head .lg-dots { margin: -18px 0 0; }   /* in the header the grid's 28px gap sits above it: 10px in all */
  .lg-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--edge-hi); transition: width .2s ease, background .2s ease; }
  .lg-dots i.on { width: 16px; background: var(--gray-200); }
  .lg-g { flex: 0 0 84%; scroll-snap-align: start; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 14px 16px; }
  .lg-g-ico { grid-row: span 2; margin-bottom: 0; }
  .lg-card { padding: 4px 18px; }
  .lg-sec { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .lg-sec.is-key { margin: 6px -10px; padding: 18px 10px; }
  .nf-page { padding: 44px 16px 56px; }
  .nf-links { grid-template-columns: minmax(0, 1fr); }
}

/* ── print / save as PDF: black on white, the words only ──
   The tokens are re-pointed for paper (":root[data-theme]" so the light theme's own block does not win), and
   everything that only works on a screen is left out: the nav, the contents, the map, the buttons. */
@media print {
  :root, :root[data-theme="light"] {
    --white: #111; --gray-100: #222; --gray-200: #333; --gray-300: #555; --gray-400: #777;
    --black: #fff; --surface: #fff; --surface-sunk: #fff; --edge: #ddd; --edge-hi: #bbb; --moon: #6b5216;
  }
  body { background: #fff; }
  .main-nav, .lg-toc, .lg-map, .lg-acts, .lg-next, .lg-link, .lg-mine, .lg-changes, .lg-dots { display: none; }
  .lg-page { max-width: none; padding: 0; }
  .lg-head, .lg-head.has-map, .lg-head.has-glance { display: block; margin-bottom: 18px; }
  .lg-glance, .lg-head .lg-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 20px; }
  .lg-g { padding: 10px 12px; break-inside: avoid; }
  .lg-body { display: block; }
  .lg-card { padding: 0; border: 0; }
  .lg-sec { break-inside: avoid; padding: 14px 0; }
  .lg-sec.is-key { margin: 6px 0; padding: 14px; }
  .lg-sec a[href^="mailto:"]::after { content: none; }
}