/* Kahunas legal pages — terms.html + privacy.html
------------------------------------------------------------------
These two documents are ~7,800 and ~3,200 words. Nobody reads them
start to finish; people arrive with ONE question ("can I cancel?",
"do you sell my data?"). So the page is answer-first:
1. .lgl-answers plain-English cards for the questions people
actually arrive with, each linking to the clause
that binds. Non-binding reading aid.
2. .lgl-body the full document, verbatim, with a sticky TOC.
Nothing is hidden or collapsed: Cmd-F must find every word, and a
legal document people may need to cite has to stay linkable and
quotable. Layout only — no accordions. */
/* ---------- shared page rhythm -------------------------------------
One rule owns the gap between top-level sections so a new section
never has to invent its own margin. */
.lgl-sec + .lgl-sec{margin-top:clamp(56px,7vh,96px)}
/* ---------- meta strip under the hero ---------------------------- */
.lgl-meta{
display:flex;flex-wrap:wrap;justify-content:center;
gap:10px 28px;margin-top:28px;
}
.lgl-meta div{
font-family:var(--mono);font-size:12px;letter-spacing:.06em;
color:var(--muted);
}
.lgl-meta b{color:var(--ink);font-weight:500}
/* ---------- "in plain English" answer cards ----------------------
The trust layer. A grid of short answers, each a link down to the
binding clause — so the summary can never be mistaken for the
authority, it always points at it. */
.lgl-answers{
margin-top:clamp(40px,5vh,64px);
display:grid;gap:14px;
grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
}
.lgl-card{
display:block;text-decoration:none;color:inherit;
background:var(--surface);border:1px solid var(--line);
border-radius:16px;padding:26px 26px 22px;
box-shadow:var(--e1);
transition:transform .5s var(--ease),box-shadow .5s var(--ease),
border-color .5s var(--ease);
}
.lgl-card .q{
font-size:17px;font-weight:600;letter-spacing:-.015em;
line-height:1.3;margin-bottom:10px;
}
.lgl-card .a{color:var(--muted);font-size:15px;line-height:1.55}
/* the clause pointer — mono, so it reads as a reference not prose */
.lgl-card .ref{
display:inline-flex;align-items:center;gap:6px;margin-top:16px;
font-family:var(--mono);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--blue);
}
.lgl-card .ref .arr{transition:transform .45s var(--ease)}
@media (hover:hover) and (pointer:fine){
.lgl-card:hover{
transform:translateY(-2px);
box-shadow:var(--e-ink);border-color:transparent;
}
.lgl-card:hover .ref .arr{transform:translateX(3px)}
}
.lgl-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* the summary is our words, not the lawyer's — say so, plainly */
.lgl-disclaim{
margin-top:20px;padding:14px 18px;
border-left:2px solid var(--line);
color:var(--muted);font-size:14px;line-height:1.6;max-width:72ch;
}
/* ---------- document body: sticky TOC + prose ------------------- */
.lgl-body{
margin-top:clamp(56px,7vh,96px);
display:grid;gap:clamp(32px,5vw,72px);
/* The prose column is capped rather than fluid: a 1440px viewport would
otherwise give it ~92 characters per line, well past the 60-75 that
reads comfortably. Legal text is the last place to make people work.
Capped in px, not ch — at this font 72ch measures ~840px, wider than
the column it was meant to constrain, so it never bound. */
grid-template-columns:236px minmax(0,640px);
align-items:start;
}
.lgl-toc{
position:sticky;top:96px;
/* its own scroll when the list outruns the viewport (terms has 27) */
max-height:calc(100vh - 128px);overflow-y:auto;
/* the scrollbar sits off the text rather than against it */
padding-right:8px;
}
.lgl-toc h2{
font-family:var(--mono);font-size:11px;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
margin-bottom:14px;
}
.lgl-toc ol{list-style:none;counter-reset:toc}
.lgl-toc li{counter-increment:toc}
.lgl-toc a{
display:flex;gap:10px;padding:6px 0;
color:var(--muted);text-decoration:none;
font-size:13.5px;line-height:1.4;
border-left:2px solid transparent;padding-left:12px;margin-left:-14px;
transition:color .3s var(--ease),border-color .3s var(--ease);
}
.lgl-toc a::before{
content:counter(toc);
font-family:var(--mono);font-size:11px;color:var(--line);
flex:none;padding-top:2px;transition:color .3s var(--ease);
}
.lgl-toc a:hover{color:var(--ink)}
/* scrollspy — set by the page's inline script */
.lgl-toc a.active{color:var(--ink);border-left-color:var(--blue)}
.lgl-toc a.active::before{color:var(--blue)}
.lgl-toc a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* ---------- the legal prose itself ------------------------------ */
.lgl-doc{max-width:640px}
.lgl-doc section{
/* anchor targets must clear the fixed nav when jumped to */
scroll-margin-top:96px;
}
.lgl-doc section + section{margin-top:52px}
.lgl-doc h3{
font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.02em;
line-height:1.25;margin-bottom:14px;text-wrap:balance;
}
/* the clause number, set apart so headings scan as a numbered list */
.lgl-doc h3 .n{
font-family:var(--mono);font-size:12px;font-weight:500;
letter-spacing:.1em;color:var(--muted);
display:block;margin-bottom:7px;
}
.lgl-doc p{
color:var(--ink-2,var(--muted));font-size:16px;line-height:1.72;
max-width:70ch;
}
.lgl-doc p + p{margin-top:14px}
.lgl-doc ul{margin:14px 0 0;padding-left:20px}
.lgl-doc li{
color:var(--ink-2,var(--muted));font-size:16px;line-height:1.7;
margin-bottom:8px;
}
.lgl-doc a{color:var(--blue);text-decoration:none}
.lgl-doc a:hover{text-decoration:underline}
/* a pulled-out clause that people specifically hunt for */
.lgl-note{
margin-top:16px;padding:16px 20px;
background:var(--paper,oklch(98.4% 0.0015 106));
border:1px solid var(--line-soft);border-radius:12px;
font-size:15px;line-height:1.6;color:var(--ink);
}
.lgl-note b{font-weight:600}
/* ---------- close: who to actually contact ---------------------- */
.lgl-contact{
margin-top:clamp(56px,7vh,96px);
border-top:1px solid var(--line-soft);padding-top:40px;
display:flex;flex-wrap:wrap;gap:24px 48px;align-items:baseline;
}
.lgl-contact h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.lgl-contact p{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:52ch}
.lgl-contact a{color:var(--blue);text-decoration:none}
.lgl-contact a:hover{text-decoration:underline}
/* ---------- responsive ------------------------------------------
Below the two-column breakpoint the sticky rail stops earning its
width: it becomes a plain jump-list above the document. */
@media (max-width:900px){
.lgl-body{grid-template-columns:minmax(0,1fr)}
.lgl-toc{
position:static;max-height:none;overflow:visible;
padding:22px 24px;border:1px solid var(--line);border-radius:16px;
background:var(--surface);
}
.lgl-toc ol{
columns:2;column-gap:28px;
}
.lgl-toc a{break-inside:avoid}
}
@media (max-width:560px){
.lgl-toc ol{columns:1}
.lgl-card{padding:22px 22px 20px}
.lgl-meta{gap:8px 18px}
}
/* Reduced motion: the shell already zeroes .rv reveals. The card lift is
a hover affordance rather than ambient motion, but it still moves —
drop the translate and keep the shadow so the affordance survives. */
@media (prefers-reduced-motion:reduce){
.lgl-card{transition:box-shadow .01ms,border-color .01ms}
.lgl-card:hover{transform:none}
.lgl-card .ref .arr{transition:none}
}