/* ── ORTEC XS policy pages ────────────────────────────────────────────────
   A branded header, one readable column of policy text, and a footer that
   links the policies together. Everything sits on the Bolster tokens in
   bolster.css — no other colours. */

*, *::before, *::after {box-sizing:border-box;}

body {
    margin:0;
    font-family:Roboto, -apple-system, "Segoe UI", sans-serif;
    font-weight:300;
    font-size:16px;
    line-height:26px;
    letter-spacing:0.25px;
    background:var(--bol-color-background-primary);
    color:var(--bol-color-text-primary);
    -webkit-font-smoothing:antialiased;
}

a {color:var(--bol-color-primary);}

strong {font-weight:500;}

.wrap {max-width:760px;margin:0 auto;padding:0 20px;}

/* ── Header ─────────────────────────────────────────────────────────────── */

.hero {
    padding:56px 0 32px;
    background:
        radial-gradient(1100px 320px at 12% -40%, var(--bol-color-accent-lighter), transparent 70%),
        var(--bol-color-background-primary);
    border-bottom:1px solid var(--bol-color-border);
}

.hero .logo {height:26px;display:block;margin-bottom:28px;}

.hero h1 {
    margin:0 0 12px;
    font-size:36px;
    line-height:44px;
    font-weight:700;
    letter-spacing:-0.5px;
}

.hero h1 em {font-style:normal;color:var(--bol-color-accent);}

.hero p {
    margin:0 0 8px;
    max-width:62ch;
    font-size:17px;
    line-height:26px;
    color:var(--bol-color-text-secondary);
}

/* ── Policy text ────────────────────────────────────────────────────────── */

.doc {padding-top:16px;padding-bottom:48px;}

.doc h2 {
    margin:32px 0 8px;
    font-size:18px;
    line-height:26px;
    font-weight:500;
    color:var(--bol-color-primary);
}

.doc p {margin:0 0 12px;}

.doc ul {margin:0 0 12px;padding-left:22px;}

.doc li {margin:0 0 4px;}

.doc li::marker {color:var(--bol-color-accent);}

.doc .stamp {
    margin-top:32px;
    font-size:13px;
    color:var(--bol-color-text-secondary);
}

/* ── Index ──────────────────────────────────────────────────────────────── */

.cards {list-style:none;margin:0;padding:0;display:grid;gap:12px;}

.cards a {
    display:block;
    padding:18px 22px;
    background:var(--bol-color-background-secondary);
    border:1px solid var(--bol-color-border);
    border-radius:var(--bol-rounding-medium);
    text-decoration:none;
    color:var(--bol-color-text-primary);
    font-weight:500;
    transition:background .12s, border-color .12s;
}

.cards a:hover {background:var(--bol-color-hover);border-color:var(--bol-color-primary);}

.cards a span {display:block;margin-top:2px;font-size:14px;font-weight:300;color:var(--bol-color-text-secondary);}

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer {
    border-top:1px solid var(--bol-color-border);
    padding:28px 0 56px;
    font-size:13px;
    color:var(--bol-color-text-secondary);
}

footer nav {display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:8px;}

footer p {margin:0;}

a:focus-visible {outline:2px solid var(--bol-color-focus);outline-offset:2px;border-radius:var(--bol-rounding-small);}

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width:640px) {
    .hero {padding:36px 0 24px;}
    .hero h1 {font-size:28px;line-height:34px;}
    .hero p {font-size:16px;line-height:24px;}
}