/* learn base shell
 *
 * Lifted out of base_learn.html so it is fetched ONCE and
 * then served from cache for every following page. It used to be an
 * inline <style> block, which meant every navigation re-downloaded the
 * same 14 KB of rules that had not changed -- the wrong trade for a
 * course site, where a learner walks through 63 lessons in one sitting.
 *
 * Page-specific rules stay inline in their own template on purpose:
 * those genuinely differ per page and belong in the document.
 */
/* Light-only by design: the main site treats dark mode as opt-in, and
           learn has no theme toggle yet, so there is no prefers-color-scheme
           block here. Add tokens for both themes together if that changes. */
        :root {
            /* The identity's own indigo, taken from the mark's plate, not a
               generic UI blue. #2563eb sat between the CSEO tier blue (#2878B5)
               and this indigo and matched neither, so every primary button read
               as a fourth blue that belonged to nothing. */
            --brand: #17307A;
            --brand-dark: #0F2059;
            --ink: #0f172a;
            --ink-soft: #334155;
            /* #64748b measured 4.48:1 on the CSEP paper -- a hair under the
               4.5 AA needs for small text, and this token is what the price
               label and the struck former price are painted in. Darkened
               just enough to clear it on every tier background. */
            --ink-muted: #5b6779;
            --line: #e2e8f0;
            --surface: #ffffff;
            --surface-alt: #f8fafc;
            --header-dark: #1a1d29;
            --radius: 14px;
        }

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

        html { -webkit-text-size-adjust: 100%; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--surface);
            color: var(--ink);
            line-height: 1.6;
            min-width: 320px;
            /* Both declarations, in this order, on purpose.
               overflow-x: hidden makes the body a scroll container, which
               silently breaks position:sticky on every descendant -- the
               apply wizard's pay bar scrolls away instead of holding to the
               viewport. overflow-x: clip clips exactly the same way WITHOUT
               creating a scroll container, so sticky keeps working. Browsers
               too old to know `clip` ignore that line and keep `hidden`,
               landing back on the old behaviour rather than on a page that
               scrolls sideways. */
            overflow-x: hidden;
            overflow-x: clip;
            /* Sticky footer: short pages (e.g. /verify/) used to leave the
               footer floating mid-screen with blank space beneath it. dvh so
               mobile browser chrome does not cause a phantom scroll. */
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
        }
        main { flex: 1 0 auto; }

        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; height: auto; }

        .learn-shell { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

        /* ── Header ── */
        .learn-header {
            background: var(--header-dark);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .learn-header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            /* Sticky, so every pixel here is taken off the content area on
               every page and every scroll position. 52 is the floor that still
               clears the 26px mark with a comfortable optical margin. */
            height: 52px;
        }
        .learn-brand { display: flex; align-items: center; gap: 0.6rem; }
        .learn-brand img { width: 26px; height: 26px; }
        .learn-brand-text { color: #fff; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
        /* The trademark symbol, on the lockup and in the footer notice.
           super + 0.52em rather than a <sup>: the browser default raises the
           baseline by half the LINE height, which on a 52px sticky header
           pushed the symbol into the row above and nudged the wordmark down.
           letter-spacing is reset because the wordmark's own -0.01em pulls the
           following character back under the E. */
        .tm { font-size: 0.52em; line-height: 1; vertical-align: super;
              letter-spacing: 0; margin-left: 0.1em; opacity: 0.85; }
        /* The lockup is ISE alone. The parent belongs in the copy, not
           beside the mark: two names in one lockup is two brands competing for
           the same glance, and "by Trusted Rw" says more where a sentence can
           carry it -- the standfirst, and the issuing line on every card. */
        /* ── Navigation ───────────────────────────────────────────────────
           Words, not icons. Every link used to carry a Font Awesome glyph in
           front of its label, which at 0.88rem reads as a toolbar rather than
           as navigation; and below the breakpoint the labels were hidden,
           leaving three undecodable glyphs in a row -- an award, a magnifier
           and a gauge. The rule that hid them (`.learn-nav a span`) could not
           reach Sign out, because that one is a <button> inside a form, so the
           least important and most destructive action was the only thing in
           the header still wearing a word.

           Labels always, icons never, and on a phone a real menu behind a
           burger instead of a row of mysteries. No JavaScript: the menu is a
           checkbox and a label, the same mechanism the forum header uses, so
           it cannot be left stuck open by a script that failed to load. */
        .learn-nav { display: flex; align-items: center; gap: 1.6rem; }
        .learn-nav a,
        .learn-linkbtn {
            display: inline-flex; align-items: center;
            background: none; border: 0; padding: 0; cursor: pointer;
            font: inherit; font-size: 0.88rem; font-weight: 500;
            color: rgba(255, 255, 255, 0.72);
            white-space: nowrap;
            transition: color 0.15s ease;
        }
        .learn-nav a:hover, .learn-linkbtn:hover { color: #fff; }
        /* Which page you are on. Without it the header looks identical on all
           four pages, and the light blue is the one the LEARN tag already
           uses -- the header gets no new colour out of this. */
        .learn-nav a.is-on { color: #fff; font-weight: 600; position: relative; }
        .learn-nav a.is-on::after {
            content: ''; position: absolute; left: 0; right: 0; bottom: -7px;
            height: 2px; background: #93c5fd; border-radius: 2px;
        }
        /* Signing out is not a destination, so it does not sit in the row of
           places you can go: it is past a divider and a shade quieter. */
        .learn-account { display: flex; align-items: center; gap: 1.6rem; }
        .learn-account::before {
            content: ''; width: 1px; height: 17px; background: rgba(255, 255, 255, 0.16);
        }
        .learn-account .learn-linkbtn { color: rgba(255, 255, 255, 0.55); }

        /* ── The phone menu ── */
        /* Visually hidden rather than display:none: a checkbox that cannot be
           focused is a menu that cannot be opened from a keyboard. */
        .learn-menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
        .learn-burger {
            display: none;
            align-items: center; justify-content: center;
            width: 42px; height: 42px; margin-right: -0.55rem;
            color: #fff; font-size: 1.02rem; cursor: pointer;
            border-radius: 9px;
            transition: background 0.15s ease;
        }
        .learn-burger:hover { background: rgba(255, 255, 255, 0.08); }
        .learn-menu-toggle:checked ~ .learn-shell .learn-burger { background: rgba(255, 255, 255, 0.12); }
        /* Hidden at every width by default. Declared only inside the media
           query it renders as a second nav row on every desktop page. */
        .learn-menu { display: none; }

        /* ── Footer ── */
        /* No margin-top here: <main> already absorbs the slack, and a margin
           would push the footer past the viewport and invent a scrollbar on
           short pages. Breathing room above it belongs to each page's own
           bottom padding, so ANY page long enough to scroll must set one or its
           last element will touch the footer. Not done globally on <main>
           because the application wizard is tuned to fit a step without
           scrolling and extra padding would break that. */
        .learn-footer {
            background: var(--header-dark);
            color: rgba(255, 255, 255, 0.6);
            margin-top: 0;
            /* More above the columns than below the notice: the rule and the
               notice close the page, the columns open the footer and need the
               air. */
            padding: 2.75rem 0 1.9rem;
            font-size: 0.85rem;
            flex-shrink: 0;
        }
        .learn-footer-inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .learn-footer a { color: rgba(255, 255, 255, 0.75); }
        .learn-footer a:hover { color: #fff; text-decoration: underline; }
        .learn-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

        /* Five columns of links, replacing the single row of legal links.

           Explicit column counts, not auto-fit. auto-fit with a 172px minimum
           put three columns on an 820px tablet and left the fourth cell of the
           second row empty beside the tallest column in the footer -- a hole
           the width of a column and the height of the certifications list.
           Three named widths are three layouts that were each looked at:

             1040px and up   five columns, certifications 1.3x the others
             700 - 1039px    three columns, certifications moved last
             under 700px     one column, every list collapsed

           The certifications column is the widest because its labels are the
           longest; at an equal fifth every level name took three lines instead
           of two. At three columns it is ordered last so the empty cell of the
           second row sits BESIDE the long list rather than under it, which
           reads as two full rows instead of a gap. */
        .learn-footer-cols {
            display: grid;
            grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr;
            gap: 2rem;
            padding-bottom: 2rem;
            align-items: start;
        }
        .learn-footer-col { min-width: 0; }
        /* display:none above the phone breakpoint, where the label does
           nothing and the columns are always open: left merely invisible it
           was five dead tab stops between the last link of the page and the
           notice. Below the breakpoint it comes back as visually-hidden but
           focusable -- see the media query -- because there it IS the control
           that opens a column and must be reachable from a keyboard. */
        .fcol-toggle { display: none; }
        .fcol-links { display: flex; flex-direction: column; gap: .6rem; }
        /* An <h2> because it heads a real section of the document and a
           crawler reads the outline; sized down to look like the label it is.
           The heading level is for meaning, the type scale is for the eye, and
           these two jobs are not the same job. */
        /* 0.58, not 0.45. At 0.45 these measured 4.42:1 against the footer
           ground -- under the 4.5:1 WCAG AA minimum, and they are 11.5px
           uppercase, which is the size that needs the ratio most. Measured on
           the rendered page; do not dim them back down by eye. */
        .learn-footer-col h2 {
            margin: 0 0 .85rem;
            font-size: .72rem; font-weight: 700;
            letter-spacing: .08em; text-transform: uppercase;
            color: rgba(255, 255, 255, 0.58);
        }
        .learn-footer-col h2 label { cursor: default; }
        /* line-height 1.35 with a .6rem gap, not 1.45 with .5rem. A link that
           wraps sets two lines 1.35em apart while two separate links sit
           1.35em + the gap apart; at the old numbers those two distances were
           close enough that "What is customer / experience?" read as two
           items and the column read as noise. Widening the ratio is what makes
           a wrapped label look like one link. */
        .learn-footer-col a {
            color: rgba(255, 255, 255, 0.72);
            text-decoration: none;
            line-height: 1.35;
            /* Avoids a one-word last line on the labels that wrap. Ignored by
               engines that do not have it, which just wrap as before. */
            text-wrap: pretty;
        }
        .learn-footer-col a:hover { color: #fff; text-decoration: underline; }
        /* The abbreviation leads each certification and carries the weight, so
           a two-line entry has a visible start. Same anchor, same text, one
           word of it emphasised -- nothing here changes what the link says. */
        .learn-footer-col a b { font-weight: 600; color: rgba(255, 255, 255, 0.92); }

        .learn-footer-base {
            display: flex;
            align-items: center;
            gap: 1rem 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 1.4rem;
            color: rgba(255, 255, 255, 0.5);
            font-size: .8rem;
            line-height: 1.5;
        }
        .learn-footer-mark { flex-shrink: 0; display: flex; opacity: .85; }
        .learn-footer-mark:hover { opacity: 1; }
        .learn-footer-mark img { display: block; }
        /* Capped at a readable measure. Left to itself this ran the full
           1120px of the shell, which is about twice the line length anyone
           reads comfortably and looked like a stray line of code under the
           columns. */
        .learn-footer-legal { max-width: 60ch; }
        /* Pushed to the far end of the row: a copyright is the last thing on
           the page and a reader looks for it in the corner. */
        .learn-footer-copy { margin-left: auto; white-space: nowrap; }

        @media (max-width: 1039px) {
            .learn-footer-cols { grid-template-columns: repeat(3, 1fr); }
            .learn-footer-col--certs { order: 1; }
        }

        /* One column, all five lists closed. Twenty-two links stacked at full
           width made the footer 990px tall on a 390px phone -- longer than the
           viewport, and the reader had to scroll past all of it to reach the
           notice. Closed, the same footer is five rows and the reader opens
           the one they want.

           The rows are 48px targets with a rule between them, matching the
           mobile header menu exactly: the two are the same control doing the
           same job at opposite ends of the page. */
        @media (max-width: 699px) {
            .learn-footer-cols {
                display: block;
                padding-bottom: 1.2rem;
            }
            .fcol-toggle {
                display: block;
                position: absolute;
                width: 1px; height: 1px;
                margin: -1px; padding: 0; border: 0;
                overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
            }
            .learn-footer-col { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
            /* The notice below brings its own rule; without this the last
               column's border and that one sat a few pixels apart and read as
               a double line. */
            .learn-footer-col:last-child { border-bottom: 0; }
            .learn-footer-col h2 { margin: 0; }
            .learn-footer-col h2 label {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                min-height: 48px;
                cursor: pointer;
                color: rgba(255, 255, 255, 0.82);
                font-size: .8rem;
            }
            /* A chevron drawn in CSS rather than another icon: the icon font
               here is a built subset and adding a glyph to it means rebuilding
               the font to draw a triangle. */
            .learn-footer-col h2 label::after {
                content: "";
                flex-shrink: 0;
                width: 8px; height: 8px;
                margin-right: 3px;
                border-right: 2px solid currentColor;
                border-bottom: 2px solid currentColor;
                transform: translateY(-2px) rotate(45deg);
                transition: transform .18s ease;
            }
            .fcol-toggle:checked ~ h2 label { color: #fff; }
            .fcol-toggle:checked ~ h2 label::after {
                transform: translateY(2px) rotate(225deg);
            }
            .fcol-toggle:focus-visible ~ h2 label {
                outline: 2px solid rgba(255, 255, 255, 0.6);
                outline-offset: 2px;
            }
            .fcol-links { display: none; padding: .1rem 0 1rem; gap: .85rem; }
            .fcol-toggle:checked ~ .fcol-links { display: flex; }
            .learn-footer-col a { font-size: .875rem; }

            /* Stacked, and the copyright loses its margin-left: on one column
               "auto" would push it to the right edge on its own line, away
               from the notice it belongs to. */
            .learn-footer-base {
                flex-direction: column;
                align-items: flex-start;
                gap: .8rem;
                padding-top: 1.3rem;
            }
            .learn-footer-copy { margin-left: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .learn-footer-col h2 label::after { transition: none; }
        }

        /* Breadcrumbs. Rendered from seo.breadcrumbs in base_learn.html, so
           the trail on screen and the BreadcrumbList in the head are the same
           list -- Google requires them to agree.

           The separator is a CSS ::before on every item but the first, not a
           character in the markup: a screen reader reading "Home slash
           Certifications slash CSEO" is reading punctuation aloud, and the
           <ol> already conveys the ordering. */
        .learn-crumbs { border-bottom: 1px solid var(--line); background: var(--surface-alt); }
        .learn-crumbs ol {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .5rem;
            list-style: none;
            padding: .7rem 0;
            font-size: .85rem;
            color: var(--ink-muted);
        }
        .learn-crumbs li { display: inline-flex; align-items: center; gap: .5rem; }
        .learn-crumbs li + li::before {
            content: "/";
            color: var(--line);
            /* Decorative: never announced. */
            speak: never;
        }
        .learn-crumbs a { color: var(--ink-soft); text-decoration: none; }
        .learn-crumbs a:hover { color: var(--brand); text-decoration: underline; }
        .learn-crumbs [aria-current="page"] { color: var(--ink-muted); }

        /* 640, measured against the nav as it now stands.

           This number has moved three times in a day and every move was a
           consequence of the nav's LENGTH, so measure before touching it:

             2 items  -> 780   (the original)
             5 items  -> 860   (measured at 694px of brand + links)
             3 items  -> 640   (measured at 346px, signed out)

           At 1280px the brand plus Home / Courses / Verify / Sign in occupies
           346px inside a 1120px shell; signed in, My learning and Sign out
           take it to roughly 500px. The shell keeps 24px of padding each side,
           so 640 leaves ~90px of slack in the worst case and every phone still
           gets the burger. Do not raise it on a hunch: at 860 the burger was
           appearing on an 820px window with 470px of empty header beside it. */
        @media (max-width: 640px) {
            .learn-nav { display: none; }
            .learn-burger { display: inline-flex; }
            .learn-menu-toggle:checked ~ .learn-menu { display: block; }
            .learn-menu {
                border-top: 1px solid rgba(255, 255, 255, 0.08);
                padding-bottom: 0.6rem;
            }
            /* Full-width rows, each one a comfortable target, each one with
               its name on it. */
            .learn-menu a,
            .learn-menu .learn-linkbtn {
                display: flex; align-items: center; width: 100%;
                min-height: 48px; padding: 0.55rem 0;
                font-size: 0.98rem; font-weight: 500; text-align: left;
                color: rgba(255, 255, 255, 0.82);
                border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            }
            .learn-menu a.is-on { color: #fff; font-weight: 600; }
            /* Same rule as on the desktop row: the way out is not a
               destination. Last item, no rule under it, quieter. */
            .learn-menu form { margin-top: 0.35rem; }
            .learn-menu .learn-linkbtn {
                border-bottom: 0;
                color: rgba(255, 255, 255, 0.55);
            }
            /* Signed out, the last row is Sign in (an <a>) rather than the
               Sign out <button>, and it was leaving a hairline hanging under
               the end of the menu. Signed in this matches nothing: the last
               child is the logout <form>, so every anchor keeps its rule. */
            .learn-menu a:last-child { border-bottom: 0; }
        }

        /* ── Credential card design system ─────────────────────────────────
           Shared by the certifications index and every detail page so the
           branding rule holds: logo, typography, layout, seal, badge shape and
           issuing-body wording stay IDENTICAL across levels, and only the
           colour system (field / metal / paper / tier ink) varies.
           Edit here, never per page. ──────────────────────────────────────── */
        .cert-card {
            display: flex;
            flex-direction: column;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 18px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                        0 10px 26px -14px rgba(15, 23, 42, 0.22);
            transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                        border-color 0.28s ease;
        }
        a.cert-card:hover,
        .cert-card:hover {
            transform: translateY(-7px);
            border-color: transparent;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                        0 28px 50px -18px var(--glow);
        }

        /* Header: the credential's own mark, on a light tier-tinted ground.
           It replaced a jewel-tone panel carrying the level name and the
           abbreviation in type. The mark sets both itself, so the panel was
           saying twice over what the artwork already said, and it forced the
           card to shout in a colour the mark then had to compete with. */
        .cert-head {
            position: relative;
            display: flex;
            justify-content: center;
            padding: 1.6rem 1.5rem 1.5rem;
            background: var(--paper);
            overflow: hidden;
        }
        /* The tier wash. A flat tint token would need a fifth colour per level
           and a fresh contrast measurement; the field at 6% over paper stays in
           step with whatever the field is set to. */
        .cert-head::after {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--field);
            opacity: 0.06;
        }
        .cert-head::before {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: 0;
            z-index: 1;
            height: 3px;
            background: linear-gradient(90deg, var(--metal) 0%, var(--metal-light) 50%, var(--metal) 100%);
        }
        .cert-mark {
            position: relative;
            z-index: 1;
            display: block;
            /* Over the 96px floor the mark's two issuing lines need, and capped
               so it does not swell on the widest card in the 3-up grid. */
            width: min(178px, 64%);
            height: auto;
            /* THE MARK IS CENTRED HERE, not by .cert-head's justify-content.
               _seal.html wraps the <img> in a <picture>, so the flex item
               .cert-head centres is the PICTURE -- which is display:block and
               stretched to 291px of the 339px head -- while the 178px image
               inside it stayed hard against the picture's left edge. Every
               badge on the home page and on the certification sidebar sat off
               to the left with a block of empty tint beside it, and the
               justify-content above looked like it was already handling this.
               Do not remove: centring the wrapper does not centre the image. */
            margin-inline: auto;
        }

        /* Body: warm off-white ground, not pure white. */
        .cert-body {
            display: flex;
            flex-direction: column;
            flex: 1;
            /* Side padding trimmed from 1.5rem: it buys the 12px that lets the
               longest certification name hold one line. */
            padding: 1.4rem 1.15rem 1.25rem;
            background: var(--paper);
        }
        /* Sized so all three names sit on a single row in the 3-up grid.
           Measured at a 303px content box: "Certified Service Excellence
           Professional" is the longest and needs 294px here, 9px of slack.
           1.02rem overflowed by 16px. Wrapping is deliberately still allowed so
           a narrower card or a longer future name degrades instead of clipping. */
        .cert-name {
            font-size: 0.94rem;
            font-weight: 700;
            letter-spacing: -0.015em;
            color: var(--ink);
            line-height: 1.35;
            margin-bottom: 0.6rem;
        }
        .cert-positioning {
            color: var(--ink-soft);
            font-size: 0.87rem;
            margin-bottom: 1.4rem;
        }
        /* Issuing-body line: identical on every card and page. */
        .cert-card-foot {
            margin-top: auto;
            padding-top: 1rem;
            border-top: 1px solid rgba(15, 23, 42, 0.09);
            font-size: 0.79rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--ink-soft);
        }
        .cert-card-foot i {
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        /* ── Cookie consent notice ──────────────────────────────────────
           Markup and behaviour come from templates/analytics/cookie_consent
           .html, shared with trusted.rw and the forum; only the paint is
           learn's own. It is a strip of the same white card the rest of the
           site is built from, floated over the page rather than dropped in
           as a dark bar: a black slab across the foot of a light page is the
           one thing this design system does not do.

           Accept is the identity's indigo -- the same button the apply
           wizard uses -- because it is the ordinary action here, and
           Decline sits beside it as a real, readable second choice rather
           than a grey hint. */
        #ckc {
            position: fixed;
            bottom: 24px;
            left: 50%;
            z-index: 9999;
            transform: translateX(-50%) translateY(24px) scale(.98);
            opacity: 0;
            pointer-events: none;
            display: flex;
            align-items: center;
            gap: 14px;
            width: calc(100% - 32px);
            max-width: 560px;
            padding: 14px 16px;
            background: var(--surface);
            color: var(--ink-soft);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            font-size: .8125rem;
            line-height: 1.5;
            box-shadow: 0 12px 40px rgba(15, 23, 42, .16), 0 3px 10px rgba(15, 23, 42, .07);
            transition: opacity .34s ease, transform .42s cubic-bezier(.22, .68, 0, 1.10);
        }
        #ckc.ckc--on {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0) scale(1);
        }
        .ckc-ico {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            line-height: 1;
            background: rgba(23, 48, 122, .08);
            box-shadow: inset 0 0 0 1px rgba(23, 48, 122, .16);
        }
        .ckc-msg { flex: 1; min-width: 0; }
        #ckc strong {
            display: block;
            color: var(--ink);
            font-weight: 600;
            font-size: .875rem;
            margin-bottom: 1px;
        }
        #ckc a { color: var(--brand); font-weight: 600; text-decoration: none; }
        #ckc a:hover { text-decoration: underline; }
        #ckc-btns { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
        .ckc-decline, .ckc-accept {
            padding: 9px 16px;
            border-radius: 9px;
            cursor: pointer;
            font-family: inherit;
            font-size: .75rem;
            font-weight: 600;
            white-space: nowrap;
            transition: background .15s, border-color .15s, color .15s;
        }
        .ckc-decline {
            background: transparent;
            color: var(--ink-muted);
            border: 1px solid var(--line);
        }
        .ckc-decline:hover { background: var(--surface-alt); color: var(--ink); }
        .ckc-accept {
            background: var(--brand);
            color: #fff;
            border: 1px solid var(--brand);
        }
        .ckc-accept:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
        .ckc-decline:focus-visible, .ckc-accept:focus-visible {
            outline: 2px solid var(--brand);
            outline-offset: 2px;
        }
        /* Below this width the two buttons cannot sit beside the text without
           one of them wrapping mid-word: the notice becomes two rows and the
           buttons take a full-width half each, at a thumb-sized height. */
        @media (max-width: 560px) {
            #ckc {
                bottom: 10px;
                left: 10px;
                right: 10px;
                width: auto;
                max-width: none;
                flex-wrap: wrap;
                gap: 12px;
                padding: 16px;
                transform: translateY(24px) scale(.98);
            }
            #ckc.ckc--on { transform: translateY(0) scale(1); }
            #ckc-btns { width: 100%; gap: 10px; }
            .ckc-decline, .ckc-accept { flex: 1; padding: 12px 16px; font-size: .8125rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            #ckc { transition: opacity .01s linear; }
        }