/*! frb-legal.css — privacy and terms, one copy.
 *
 * privacy.html and terms.html carried the same 96-line block twice. Same
 * reasoning as frb-hub.css, same verification.
 */

:root {
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --card-shadow: 0 10px 50px -10px rgba(0,0,0,0.5);
}
/* --- THEME ENGINE --- */
body.theme-midnight {
    --bg-gradient: radial-gradient(circle at 50% 10%, #1a1a1a 0%, #000000 100%);
    --text-primary: #f8fafc;
    --text-secondary: #9ca3af;
    --accent-primary: #d4af37;
    --accent-glow: rgba(212, 175, 55, 0.2);
    --panel-bg: rgba(10, 10, 10, 0.8);
}
body.theme-ocean {
    --bg-gradient: radial-gradient(circle at 50% 0%, #0a2540 0%, #000814 100%);
    --text-primary: #e5effa;
    --text-secondary: #8fa6bf;
    --accent-primary: #4fa3d1;
    --accent-glow: rgba(79, 163, 209, 0.25);
    --panel-bg: rgba(8, 18, 32, 0.85);
}
body.theme-sunset {
    --bg-gradient: radial-gradient(circle at 50% 0%, #434343 0%, #000000 100%);
    --text-primary: #fff1e6;
    --text-secondary: #dcb3a8;
    --accent-primary: #ff9f43;
    --accent-glow: rgba(255, 159, 67, 0.25);
    --panel-bg: rgba(30, 30, 30, 0.85);
}
body.theme-forest {
    --bg-gradient: radial-gradient(circle at 50% 0%, #1a2e28 0%, #050f0c 100%);
    --text-primary: #e8f5e9;
    --text-secondary: #a5d6a7;
    --accent-primary: #66ff66;
    --accent-glow: rgba(102, 255, 102, 0.2);
    --panel-bg: rgba(13, 27, 30, 0.85);
}
/* LIGHT MODE OVERRIDES */
body.light-mode {
    --bg-gradient: radial-gradient(circle at 50% 10%, #f8fafc 0%, #e2e8f0 100%);
    --text-primary: #0f172a;
    --text-secondary: #55637a;
    --panel-bg: rgba(255, 255, 255, 0.92);
    --glass-border: 1px solid rgba(15, 23, 42, 0.12);
}
body.light-mode.theme-midnight { --accent-primary: #bfa039; }
body.light-mode.theme-ocean { --accent-primary: #0077b6; }
body.light-mode.theme-sunset { --accent-primary: #e67e22; }
body.light-mode.theme-forest { --accent-primary: #059669; }
body {
    font-family: 'Outfit', sans-serif;
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh; margin: 0;
}
/* --- NAVBAR --- */
.navbar-glass {
    position: sticky; top: 0; width: 100%;
    padding: 20px 40px;
    display: flex; justify-content: space-between; align-items: center;
    background: var(--panel-bg);
    border-bottom: var(--glass-border);
    backdrop-filter: blur(20px);
    z-index: 100;
    box-sizing: border-box;
}
.brand-logo {
    font-family: 'JetBrains Mono', monospace; font-weight: 800;
    color: var(--accent-text, var(--accent-primary)); font-size: 24px; cursor: pointer; text-decoration: none;
}
.nav-back {
    font-family: 'JetBrains Mono', monospace; font-size: 13px;
    color: var(--text-secondary); text-decoration: none;
}
.nav-back:hover { color: var(--accent-text, var(--accent-primary)); }
/* --- CONTENT --- */
.legal-wrap {
    max-width: 820px; width: 90%;
    margin: 40px auto 80px auto;
}
.legal-card {
    background: var(--panel-bg);
    border: var(--glass-border);
    border-radius: 24px;
    padding: 48px;
    backdrop-filter: blur(20px);
    box-shadow: var(--card-shadow);
}
/* The page title, from the token every other page title reads. 2.4rem is
   38px, which was the largest heading in the section by ten pixels. */
.legal-card h1 { font-weight: 800; font-size: var(--frb-app-title-size, 28px); margin: 0 0 6px 0; }
.legal-card .updated { color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 13px; margin-bottom: 32px; }
.legal-card h2 { font-weight: 700; font-size: 1.3rem; margin: 34px 0 10px 0; color: var(--accent-text, var(--accent-primary)); }
.legal-card p, .legal-card li { color: var(--text-secondary); font-size: 16px; line-height: 1.7; }
.legal-card ul { padding-left: 22px; }
.legal-card a { color: var(--accent-text, var(--accent-primary)); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE LEGAL PAGES ON A PHONE
   ───────────────────────────────────────────────────────────────────────────
   Both numbers here were chosen against an 820px column and neither was ever
   re-read at 390. `width: 90%` takes 39px off the screen and then the card
   spends 48px a side on top of that, so the text column measured 253px inside
   a 390px window — 35 per cent of the screen given to margins — and "Terms of
   Service" at 2.4rem (38px) needed two lines to say four words.

   16px body text stays exactly as it is. This is a document people read, the
   line is the thing that got short, and shrinking the prose to fix a margin
   would be solving it from the wrong end.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
    .legal-wrap {
        width: auto;
        max-width: none;
        margin: 18px var(--frb-shell-gutter, 14px) 56px;
    }
    .legal-card {
        padding: var(--frb-space-5, 20px);
        border-radius: 16px;
    }
    .legal-card h1 { line-height: 1.2; }
    .legal-card h2 { font-size: 17px; margin-top: 26px; }
}

/* ── THE SAME WIDTH AS EVERY OTHER PAGE ───────────────────────────────────
   Three pages, three widths, none of them the same: the portals page and
   analytics run edge to edge on a 40px gutter (content 40..1400 at 1440), the
   styleguide sat at 1220, and these legal cards at 820 centred — 310..1130,
   which reads as a narrow slip floating in the middle of a wide dark page
   rather than as part of the product.
   The gutter is the number the rest of the product already uses, so it is the
   number here. Phone width keeps the block below, which is a different
   question and already answered. */
@media (min-width: 621px) {
    .legal-wrap {
        max-width: none;
        width: auto;
        margin: 40px 40px 80px;
    }
}

/* ── THE PAGE'S HEAD ──────────────────────────────────────────────────────
   Name, the sentence that says what the page is, and when it last changed —
   above the card rather than inside it, which is the shape analytics, the
   section hubs and the two-factor screen all use. The card is then the
   document and nothing else, which is also why its first heading is now a
   numbered section rather than the page's own title. */
/* A BAND ACROSS THE PAGE WITH A RULE UNDER IT, which is what a page head is
   everywhere else in this product: the dev portal, notifications, analytics and
   every section hub all draw the name and its sentence on a full-width block
   closed by a hairline. Sitting inside the document's inset wrapper it was a
   heading with a paragraph under it and nothing marking where the head stopped
   and the page began. Same padding as `.module-header`, same rule. */
.legal-head {
    padding: 26px 40px 20px;
    border-bottom: 1px solid var(--glass-border-color, rgba(127, 127, 127, .18));
    background: linear-gradient(to bottom, rgba(255, 255, 255, .02), transparent);
    margin: 0;
}
.legal-head h1 {
    font-weight: 800;
    font-size: var(--frb-app-title-size, 28px);
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin: 0 0 8px;
}
.legal-lede {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary, #9ca3af);
    max-width: 78ch;
}
.legal-head .updated {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: .6px;
    color: var(--text-secondary, #9ca3af);
    opacity: .75;
}
/* The card opens on the document now, so it does not need a title's worth of
   space above its first heading. */
.legal-card > h2:first-child { margin-top: 0; }

@media (max-width: 620px) {
    .legal-head { padding: 18px var(--frb-shell-gutter, 14px) 14px; }
    .legal-lede { font-size: 13.5px; }
}

/* ═══ THE EDITORIAL TREATMENT ═══════════════════════════════════════════════
   privacy.html and terms.html both link this sheet, so the treatment is written
   once rather than twice.

   THESE TWO GET LESS THAN THE OTHER PAGES, DELIBERATELY. A privacy policy is
   ~3,700 words somebody has to actually read, and hairline grids, shared edges
   and numbered tiles are devices for a set of things — there is no set here,
   there is one long document. What it takes is the type system and a measure:
   the display face on the title, the serif italic reserved for nothing because
   nothing here is an accent, mono for the dateline and the section marks, and
   a line length that does not run to the full width of a desktop.
   ═════════════════════════════════════════════════════════════════════════ */

.legal-head h1,
.legal-card h1 {
    font-family: var(--frb-ed-display, 'Syne', 'Outfit', sans-serif);
    font-size: var(--frb-ed-title);
    font-weight: var(--frb-ed-title-weight);
    line-height: var(--frb-ed-title-leading);
    letter-spacing: var(--frb-ed-title-tracking);
}

/* The accent word. These two headings used to BE the page's name, which is why
   frb-app-shell.js read the crumb straight off them; now that they are composed
   the crumb is stated in TOPLEVEL instead. */
.legal-head h1 em,
.legal-card h1 em {
    font-family: var(--frb-ed-serif, Georgia, 'Times New Roman', serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--frb-ed-accent-size);
    /* letter-spacing: normal — the accent must NOT inherit the display face's
   tracking. --frb-ed-title-tracking is -.04em, which is right for Syne at 50px
   and wrong for a serif italic: at that size it pulls two glyphs together by
   2px each, and Instrument Serif's swash ampersand is the worst case — "&
   updates." and "& settings." closed up into "&updates." and "&settings."
   while "policy." and "system." merely looked cramped. A display face is
   tracked tight because its counters are open; a serif italic is drawn to fit
   at its natural metrics. */
    letter-spacing: normal;
    color: var(--accent-text, var(--accent-primary));
}

/* A MEASURE, WHICH IS THE WHOLE POINT ON A PAGE LIKE THIS.
   Legal prose at the full width of a 1440px screen runs to about 150 characters
   a line, and the eye loses its place returning to the left edge. 74ch is long
   for body text and right for a document nobody reads for pleasure — it keeps
   the line count down while staying inside the range that can be tracked. */
.legal-lede,
.legal-card p,
.legal-card li {
    max-width: 74ch;
}
.legal-lede {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 12.5px;
    line-height: 1.85;
}

/* The dateline and the section headings take the mono, uppercase and tracked —
   the same voice the eyebrows use everywhere else. A section heading in a
   contract is a marker, not a title. */
.legal-head .updated,
.legal-card .updated {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.legal-card h2 {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    /* A rule above it does the work a larger size would have done, and it scales
       to a document of any length without the headings competing with the
       title. */
    padding-top: 26px;
    border-top: 1px solid var(--glass-border-color);
    margin-top: 40px;
}
.legal-card > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Square, like everywhere else. */
.legal-card { border-radius: 0; }

/* ── AND THE CARD COMES IN TO MEET THE MEASURE ───────────────────────────────
   The measure above and the full-bleed card two rules up were decided in
   different passes and did not agree. `.legal-wrap` goes edge to edge at a 40px
   gutter on purpose — "one gutter, one edge", the same as every other page —
   and inside it the prose stopped at 74ch, so on a 1440 screen the card carried
   roughly 380px of empty ground down its right side. A page margin that wide
   reads as a margin; the same gap INSIDE a bordered box reads as something
   that failed to load.

   The head band still runs the full width, because that is the product's page
   head and it is not a document. What changes is the card under it: it is the
   document, so it is the width of the document. It still starts at the same
   40px gutter, so the left edge lines up with every other page.

   Not a two-column rail with the headings in the gutter, which is where the
   reference would put them — that wants each section wrapped as an element, and
   the markup here is a flat run of h2/p/ul across two long files. A grid that
   guesses at flat markup breaks the moment a section has two paragraphs.

   901px is where the card first gets wider than the measure. Below it the
   prose already fills the card, so there is nothing to clamp — one query, not
   a min-width:621 and a max-width:900 both claiming the 621-900 band. */
@media (min-width: 901px) {
    .legal-card {
        /* The measure, plus the card's own padding on both sides.
           box-sizing IS THE POINT OF THIS RULE. Only the nav bar sets
           border-box in this sheet, so the card is content-box by default and
           max-width lands on the CONTENT box — the first version of this clamp
           computed 910px and the card still rendered 1008, because 48px of
           padding a side was being added outside the number. It left 98px of
           the gap still there and looked like the clamp was being ignored.
           Both of these together say "the card is the measure, plus its own
           padding", which is what was meant. */
        box-sizing: border-box;
        max-width: calc(74ch + 96px);
    }
}