/* Legal and utility pages: privacy policy, thank you, 404 */

/* Hero art (js/gs/art.js) replaces the old CSS slash: privacy = "slash", thank you = "rails" into the tick,
   404 = "dots" behind and the digits drawn as dots ("type"). */

/* =========================================================================
   Privacy policy
   ========================================================================= */
.legal-hero .page-hero__meta dd a { transition: color .25s; }
.legal-hero .page-hero__meta dd a:hover { color: var(--sage); }

.legal__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }

/* sticky contents: a reading ring in the head, and a rail beside the list that fills as you read */
.legal__aside { position: sticky; top: calc(var(--header-h) + 28px); }
.toc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.toc__title { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.toc__head .toc__title { margin-bottom: 0; }
.toc__read { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.toc__read::after { content: attr(data-pct) "%"; min-width: 4ch; text-align: right; }
.toc__read:not([data-pct])::after { content: "0%"; }
.toc__ring { width: 26px; height: 26px; transform: rotate(-90deg); }
.toc__ring circle { fill: none; stroke: var(--line); stroke-width: 3; }
.toc__ring .toc__ring-fill { stroke: var(--sage-3); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.toc__body { position: relative; padding-left: 2px; }
.toc__list { list-style: none; }
.toc__list a { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 7px 0 7px 22px; font-size: .95rem; line-height: 1.35; color: var(--fg-2); transition: color .25s, padding-left .45s var(--ease); }
.toc__list a span { font-family: var(--mono); font-size: .72rem; color: var(--fg-3); min-width: 1.6em; transition: color .25s; }
/* the slash marker steps onto the active entry */
.toc__list a::before { content: ""; position: absolute; left: -4px; top: calc(7px + .42em); width: 11px; height: 6px; background: var(--sage-3); transform: skewX(var(--slash)) scale(0); transform-origin: left center; transition: transform .45s var(--ease); }
.toc__list a:hover { color: var(--fg); }
.toc__list a.is-past span { color: var(--sage-3); }
.toc__list a.is-active { color: var(--fg); padding-left: 28px; }
.toc__list a.is-active span { color: var(--sage-3); }
.toc__list a.is-active::before { transform: skewX(var(--slash)) scale(1); }
.toc__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; }
/* the rail fills down to the active entry (js/site.js sets --toc-i and --toc-n on the nav) */
.toc { --toc-at: 0; }
.toc.has-active { --toc-at: calc((var(--toc-i, 0) + .5) / var(--toc-n, 1)); }
.toc__rail-fill { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(111, 149, 124, .3), var(--sage-3)); transform-origin: top; transform: scaleY(var(--toc-at)); transition: transform .7s var(--ease); }
.legal__help { margin-top: 32px; padding: 20px 22px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line-light); }
.legal__help .toc__title { margin-bottom: 8px; }
.legal__mail { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease); }
.legal__mail .icon { width: 1em; height: 1em; color: var(--sage-3); transition: transform .4s var(--ease); }
.legal__mail:hover { background-size: 100% 1px; }
.legal__mail:hover .icon { transform: translate(2px, -2px); }

/* reading column */
.legal__body { max-width: calc(68ch + 64px); }
.legal__updated { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; color: var(--fg-2); margin-bottom: clamp(20px, 2.4vw, 32px); }
.legal__updated::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sage-3); }
.legal-sec { position: relative; padding: clamp(28px, 3.2vw, 44px) 0 clamp(28px, 3.2vw, 44px) 64px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-sec:last-child { padding-bottom: 0; }
.legal-sec h2 { font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 500; letter-spacing: -.018em; line-height: 1.15; margin-bottom: 16px; }
.legal-sec__num { position: absolute; left: 0; top: calc(clamp(28px, 3.2vw, 44px) + .55em); font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .08em; color: var(--sage-3); }
.legal-sec p { max-width: 68ch; font-size: 1.06rem; line-height: 1.75; color: var(--fg-2); }
.legal-sec p + p, .legal-sec ul + p, .legal-sec ol + p { margin-top: 1em; }
.legal-sec a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--sage-2); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .25s, color .25s; }
.legal-sec a:hover { color: var(--sage-3); text-decoration-color: currentColor; }

.legal-list { list-style: none; display: grid; gap: 10px; margin-top: 14px; max-width: 68ch; }
.legal-list li { position: relative; padding-left: 28px; font-size: 1.04rem; line-height: 1.65; color: var(--fg-2); }
.legal-list li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 11px; height: 6px; background: var(--sage-3); transform: skewX(-42deg); }
.legal-list strong { color: var(--fg); font-weight: 600; }
.legal-list--defs { gap: 0; border-top: 1px solid var(--line); }
.legal-list--defs li { padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); }
.legal-list--defs li::before { top: calc(14px + .7em); }
.legal-list--alpha li { padding-left: 44px; }
.legal-list--alpha li::before { display: none; }
.legal-list__key { position: absolute; left: 0; top: .2em; font-family: var(--mono); font-size: .82rem; color: var(--sage-3); }

.legal-rights { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; max-width: 68ch; }
.legal-rights li { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-light); font-size: .95rem; font-weight: 500; color: var(--ink); }
.legal-rights li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--sage-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f957c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }

@media (max-width: 1024px) {
  .legal__grid { grid-template-columns: 1fr; }
  .legal__aside { position: static; }
  .toc__list { columns: 2; column-gap: 24px; }
  .toc__list li { break-inside: avoid; }
  .toc__rail, .toc__read { display: none; }
  .toc__list a, .toc__list a.is-active { padding-left: 0; }
  .toc__list a::before { display: none; }
  .legal__help { display: none; }
}

/* reading dock (tablets and phones): the current section and a progress line, while the policy is on screen */
.read-dock { position: fixed; z-index: 70; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: min(460px, calc(100vw - 24px)); display: none; align-items: center; gap: 12px; height: 52px; padding: 0 6px 0 18px; border-radius: 999px; background: rgba(15, 15, 32, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); color: var(--on-dark); overflow: hidden; transform: translate(-50%, 0); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s; }
.read-dock.is-off, .read-dock:not([data-pct]) { opacity: 0; visibility: hidden; transform: translate(-50%, 24px); transition: opacity .3s, transform .5s var(--ease), visibility 0s linear .5s; }
.read-dock__num { font-family: var(--mono); font-size: .74rem; color: var(--sage); letter-spacing: .06em; }
.read-dock__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 500; }
.read-dock__top { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(163, 193, 173, .14); color: var(--sage); }
.read-dock__top .icon { width: 16px; height: 16px; transform: rotate(-90deg); }
.read-dock__bar { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: rgba(255, 255, 255, .08); }
.read-dock__bar i { position: absolute; inset: 0; background: var(--sage); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (max-width: 1024px) { html.js .read-dock { display: flex; } }
@media print { .read-dock { display: none !important; } }
@media (max-width: 640px) {
  .toc__list { columns: 1; }
  .legal-sec { padding-left: 0; }
  .legal-sec__num { position: static; display: block; margin-bottom: 10px; }
}

/* =========================================================================
   Status pages (thank you, 404): one full-height panel
   ========================================================================= */
.status .page-hero__frame { min-height: calc(100svh - var(--frame) * 2); justify-content: flex-start; }
.status .gridlines { z-index: -1; opacity: .45; }

/* thank you */
.status__body { position: relative; margin: auto; width: 100%; max-width: 980px; padding: calc(var(--header-h) + clamp(40px, 6vh, 72px)) var(--gutter) clamp(48px, 7vh, 88px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.status__title { font-size: clamp(2.6rem, 6.2vw, 5.9rem); font-weight: 500; line-height: .98; letter-spacing: -.028em; margin: clamp(18px, 2.2vw, 26px) 0 clamp(16px, 2vw, 24px); }
.status__body .lead { max-width: 34rem; }
.status__body .btn-row { justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }
.status__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 28px; }
.status__meta { position: relative; background: rgba(15, 15, 32, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.status__meta dd a { transition: color .25s; }
.status__meta dd a:hover { color: var(--sage); }

/* animated check: ring draws, then the tick */
.tick { position: relative; width: clamp(92px, 9vw, 124px); aspect-ratio: 1; margin-bottom: clamp(22px, 3vw, 36px); }
.tick::before { content: ""; position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(163, 193, 173, .22), rgba(163, 193, 173, 0)); opacity: 0; animation: tick-glow 1.6s var(--ease) .9s forwards; }
.tick svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.tick__track { stroke: rgba(163, 193, 173, .16); stroke-width: 2; }
.tick__ring { stroke: var(--sage); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 60px 60px; animation: tick-draw 1s var(--ease-in-out) .25s forwards; }
.tick__mark { stroke: var(--sage); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tick-draw .6s var(--ease) 1.05s forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
@keyframes tick-glow { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }

@media (max-width: 640px) {
  .status__meta { grid-template-columns: minmax(0, 1fr); }
  .status__meta > div { flex-basis: 100%; border-left: 0 !important; padding-block: 12px; }
  .status__meta > div + div { border-top: 1px solid var(--line-dark); }
  .status__body .btn-row { width: 100%; }
  .status__body .btn-row .btn { flex: 1 1 200px; }
}

/* 404 */
.nf { position: relative; margin-top: auto; width: auto; margin-inline: var(--hx); padding: calc(var(--header-h) + clamp(32px, 5vh, 64px)) var(--gutter) clamp(40px, 6vh, 80px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: end; }
.nf__code { display: flex; align-items: flex-end; font-size: clamp(7.5rem, 23vw, 21rem); font-weight: 500; line-height: .74; letter-spacing: -.035em; color: var(--on-dark); margin: clamp(22px, 3vw, 40px) 0 clamp(28px, 3.6vw, 48px) -.04em; user-select: none; }
.nf__digit { position: relative; display: block; }
.nf__zero { color: transparent; -webkit-text-stroke: 2px rgba(163, 193, 173, .7); }
.nf__bar { position: absolute; left: 47%; top: 50%; width: 40%; height: .1em; margin-top: -.05em; background: var(--sage); transform: skewX(-42deg) scaleX(0); transform-origin: left center; animation: nf-bar .9s var(--ease) .5s forwards; }
@keyframes nf-bar { to { transform: skewX(-42deg) scaleX(1); } }
.nf__title { font-size: clamp(2.2rem, 4.4vw, 4rem); font-weight: 500; letter-spacing: -.025em; line-height: 1; }
.nf__intro .lead { max-width: 34rem; margin-top: 18px; }
.nf__intro .btn-row { margin-top: clamp(26px, 3vw, 38px); }
.nf__links-title { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 16px; }
.nf__links .row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; padding: clamp(16px, 1.8vw, 22px) 0; }
.nf__links .row__title { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.nf__links .row__title small { display: block; margin-top: 4px; font-size: .88rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--on-dark-3); transition: color .3s; }
.nf__links .row__arrow { width: 40px; height: 40px; }
.nf__links a.row:hover .row__title small { color: var(--on-dark-2); }
@media (max-width: 960px) {
  .nf { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
  .nf__code { font-size: clamp(6.5rem, 38vw, 9.5rem); }
  .nf__zero { -webkit-text-stroke-width: 1.5px; }
  .nf__intro .btn-row .btn { flex: 1 1 200px; }
}

/* 404: the digits are drawn as dots that scatter from the pointer (or a tap) and settle back */
.nf__code[data-hero-art] { cursor: default; }
.nf__hint { display: none; align-items: center; gap: 10px; margin: calc(clamp(28px, 3.6vw, 48px) * -1 + 10px) 0 clamp(26px, 3.2vw, 42px); font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.nf__hint::before { content: ""; width: 14px; height: 6px; background: var(--sage); transform: skewX(var(--slash)); }
html.gs-ready:not(.gs-reduced) .nf__hint { display: inline-flex; }
.nf__hint-touch, .gs-touch .nf__hint-fine { display: none; }
.gs-touch .nf__hint-touch { display: inline; }
html.js .nf__hint { opacity: 0; transition: opacity 1s var(--ease) 2.2s; }
html.js .nf__code.gs-art-ready + .nf__hint { opacity: 1; }

/* thank you: the rails converge on the tick and each arrival rings out from it */
.status--thanks .page-hero__art::after { background: radial-gradient(48% 46% at 50% 58%, rgba(26, 26, 46, .9), rgba(26, 26, 46, .55) 62%, rgba(26, 26, 46, .05) 100%), linear-gradient(180deg, rgba(26, 26, 46, .35), transparent 22%, transparent 74%, rgba(15, 15, 32, .8)); }
.status--thanks .tick { z-index: 1; }
@media (max-width: 760px) { .status--thanks .page-hero__art::after { background: radial-gradient(80% 50% at 50% 55%, rgba(26, 26, 46, .88), rgba(26, 26, 46, .4) 70%, rgba(26, 26, 46, .1)); } }

/* =========================================================================
   Cookie policy (14 Oct 2026): what the site stores, one row each; rows become cards on phones
   ========================================================================= */
.legal-table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.legal-table th { text-align: left; padding: 0 16px 10px 0; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.legal-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--fg-2); }
.legal-table td:first-child { font-family: var(--mono); font-size: .82rem; color: var(--fg); overflow-wrap: anywhere; min-width: 9em; }
.legal-table td:last-child, .legal-table th:last-child { padding-right: 0; }
.legal-cat { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-light); font-size: .8rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.legal-cat--opt { background: var(--sage-tint); border-color: rgba(111, 149, 124, .35); color: #3f5f4a; }
.legal-actions { margin: 18px 0 20px; }
@media (max-width: 760px) {
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; }
  .legal-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .legal-table tr:first-child { border-top: 1px solid var(--line); }
  .legal-table td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 4px 0; border: 0; }
  .legal-table td::before { content: attr(data-label); font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); padding-top: .2em; }
  .legal-table td:first-child { min-width: 0; }
}
@media (max-width: 760px) { .legal-table td > .legal-cat { justify-self: start; } }