@charset "utf-8";
/* ------------------------------------------------------------
   FPG — the legal pages (views/legal.php): Terms & Conditions, Privacy Policy, Cookie Policy
   2.1.02 (12 November 2026), from the design (Design/claude-design/legal-cookie-policy.dc.html).
   The flat band (.page-band--legal) and .side-nav are page_body.css.
   ⚠ The documents' sections are h3s (their content files are unchanged), styled here as the
   design's section headings.
------------------------------------------------------------ */
.legal-grid { align-items:flex-start; display:flex; flex-wrap:wrap; gap:clamp(32px, 4vw, 56px); }

.legal-side { display:flex; flex:1 1 260px; flex-direction:column; gap:20px; min-width:0; }
@media (min-width:960px) {
    .legal-side { max-height:calc(100vh - 48px); overflow-y:auto; position:sticky; top:24px; }
}

/* the three documents (components/legal_docs.php) */
.legal-docs ul { display:flex; flex-direction:column; gap:6px; list-style:none; margin:0; padding:0; }
.frame .legal-docs li { margin:0; }
.frame .inner-page .legal-docs a {
    align-items:center;
    background:var(--fpg-tint);
    border-radius:12px;
    color:var(--fpg-purple);
    display:flex;
    font-size:0.9375rem;
    font-weight:600;
    min-height:44px;
    padding:0 16px;
    text-decoration:none;
}
.frame .inner-page .legal-docs a:hover { box-shadow:inset 0 0 0 2px var(--fpg-purple-mid); }
.frame .inner-page .legal-docs a[aria-current="page"] { background:var(--fpg-purple-mid); color:#FFF; }

/* "On this page": white with a border here */
.legal-toc { background:#FFF; border:1px solid var(--fpg-line); border-radius:16px; padding:20px; }
.frame .inner-page .legal-toc a { font-size:0.875rem; font-weight:400; padding:6px 0; }

/* --- the document --- */
.legal-article { color:#3A3150; flex:999 1 600px; font-size:1rem; max-width:760px; min-width:0; }
.frame .legal-article p,
.frame .legal-article li { color:#3A3150; font-size:1rem; line-height:1.75; }
.frame .legal-article p { margin:0 0 14px; }
.frame .legal-article > p:first-child { color:var(--fpg-ink); font-size:1.125rem; line-height:1.65; }
.frame .legal-article ul,
.frame .legal-article ol { margin:0 0 14px; padding-left:22px; }
.frame .legal-article li { margin-bottom:8px; }
.legal-article strong { color:var(--fpg-ink); }
.frame .legal-article h3 {
    font-size:clamp(1.3rem, calc(1.1rem + 0.6vw), 1.5rem);
    font-weight:700;
    line-height:1.25;
    margin:36px 0 10px;
    scroll-margin-top:16px;
}
.frame .legal-article h4 { font-size:1.0625rem; font-weight:700; margin:24px 0 8px; }

/* the "… was last updated" line at the end of each document */
.frame .legal-article > p:last-child {
    background:var(--fpg-tint);
    border-radius:14px;
    color:var(--fpg-purple);
    font-size:0.9375rem;
    margin:28px 0 0;
    padding:18px 20px;
}

/* the Cookie Policy's table */
.legal-table { border:1px solid var(--fpg-line); border-collapse:separate; border-radius:16px; border-spacing:0; margin:0 0 18px; overflow:hidden; width:100%; }
.legal-table th,
.legal-table td { border-bottom:1px solid #EEEAF7; padding:16px 20px; text-align:left; vertical-align:top; }
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom:0; }
.legal-table thead th {
    background:var(--fpg-tint);
    color:var(--fpg-purple-mid);
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.06em;
    padding-bottom:10px;
    padding-top:10px;
    text-transform:uppercase;
}
.legal-table tbody th { color:var(--fpg-purple); font-size:0.875rem; font-weight:700; width:170px; }
.legal-table tbody th span { color:#6A6080; display:block; font-size:0.75rem; font-weight:400; margin-top:2px; }
.legal-table code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.875rem; }
.legal-table td { font-size:0.9375rem; line-height:1.6; }

@media (max-width:600px) {
    .legal-table thead { display:none; }
    .legal-table tr,
    .legal-table th,
    .legal-table td { display:block; width:auto; }
    .legal-table tbody th { border-bottom:0; padding-bottom:4px; width:auto; }
}