/* ===========================================================================
   RS Research — public landing page.

   Kept separate from nexora.css: that file styles an application shell, and
   loading it here would ship a sidebar and a data grid to every visitor.

   No web fonts and no CDN. The specification asks for minimal external
   dependencies, and a marketing page that waits on a third-party font server
   is slower than one that does not, on exactly the connections that matter.
   =========================================================================== */

:root {
    --ink:        #10151c;
    --ink-700:    #333d4b;
    --ink-500:    #5c6675;
    --line:       #e2e6ec;
    --line-soft:  #f1f4f8;
    --white:      #ffffff;
    --shell:      #f7f9fc;

    --accent:      #1f4e79;
    --accent-dark: #163a5b;
    --accent-soft: #e8f0f8;
    --gold:        #b8892b;
    --green:       #14602f;
    --green-soft:  #e7f0e9;

    --radius: 10px;
    --shadow: 0 1px 2px rgba(16, 21, 28, .05), 0 8px 24px rgba(16, 21, 28, .06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.015em; }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A citation inside body copy is the one place an underline earns its keep:
   it is how a reader tells the attribution apart from the sentence holding it. */
.provenance a { text-decoration: underline; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

/* A long unbroken string — a URL, a domain, a pasted company name — is the
   usual cause of a page that scrolls sideways on a phone. Break it instead. */
body { overflow-wrap: anywhere; }

.eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 .7rem;
}

.lede { font-size: 1.06rem; color: var(--ink-700); max-width: 62ch; }

.section { padding: 4.5rem 0; border-top: 1px solid var(--line); }
.section--shell { background: var(--shell); }
.section__head { max-width: 68ch; margin-bottom: 2.2rem; }
.section h2 { font-size: 1.85rem; }

/* --- Skip link and header ------------------------------------------------ */

.skip {
    position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff;
    padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

.masthead {
    position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line);
}
.masthead__inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .6rem 1rem; padding: .85rem 0;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand__mark {
    width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 1.05rem;
}
.brand__name { font-weight: 700; letter-spacing: .04em; font-size: .95rem; }
.brand__name small { display: block; font-weight: 500; font-size: .68rem; color: var(--ink-500); letter-spacing: .12em; text-transform: uppercase; }
.masthead nav { display: flex; align-items: center; gap: 1.4rem; }
.masthead__pages { display: flex; align-items: center; gap: 1.4rem; }
/* :not(.btn) matters — `.masthead nav a` is more specific than `.btn--primary`,
   so without it the header call to action renders dark text on navy. */
.masthead nav a:not(.btn) { font-size: .88rem; text-decoration: none; color: var(--ink-700); }
.masthead nav a:not(.btn):hover { color: var(--accent); }
.masthead nav .btn { padding: .6rem 1.05rem; font-size: .87rem; }

.langswitch { display: inline-flex; align-items: center; gap: .1rem; font-size: .82rem; }
.langswitch a, .langswitch__on { padding: .25rem .5rem; border-radius: 5px; text-decoration: none; }
.langswitch a { color: var(--ink-500); }
.langswitch a:hover { background: var(--line-soft); color: var(--accent); }
.langswitch__on { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-block; padding: .78rem 1.35rem; border-radius: 8px; font-size: .93rem;
    font-weight: 600; text-decoration: none; border: 1px solid var(--line);
    background: var(--white); color: var(--ink); cursor: pointer; transition: all .15s ease;
}
.btn:hover { border-color: var(--ink-500); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--lg { padding: .95rem 1.7rem; font-size: 1rem; }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding: 5rem 0 3.5rem; background:
    radial-gradient(1000px 420px at 12% -8%, var(--accent-soft), transparent 70%); }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.3rem); margin-bottom: 1rem; }
.hero__tag { font-size: 1.3rem; font-weight: 600; color: var(--accent); margin-bottom: 1.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__scope {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-500);
}

/* --- KPI cards ----------------------------------------------------------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.kpi {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.4rem; box-shadow: var(--shadow);
}
.kpi__value { font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.kpi__label { font-size: .93rem; font-weight: 600; margin-top: .55rem; }
.kpi__note { font-size: .8rem; color: var(--ink-500); margin: .2rem 0 0; }

/* --- Look up your business ------------------------------------------------ */

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lookup {
    margin-top: 2.6rem; max-width: 640px; background: var(--white);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow);
}
.lookup__title { font-size: 1.15rem; margin-bottom: .3rem; }
.lookup__lede { font-size: .9rem; color: var(--ink-500); margin-bottom: 1rem; }
.lookup__form { display: flex; gap: .6rem; flex-wrap: wrap; }
.lookup__form input {
    flex: 1 1 260px; padding: .75rem .9rem; border: 1px solid var(--line);
    border-radius: 7px; font: inherit; font-size: .95rem; color: var(--ink);
}
.lookup__form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.lookup__form button[disabled] { opacity: .6; cursor: progress; }

.lookup__out:empty { display: none; }
.lookup__result {
    display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 1.2rem;
    padding: 1.1rem; border-radius: 8px; border: 1px solid var(--line); background: var(--line-soft);
}
.lookup__result--ok   { background: var(--green-soft); border-color: #bcd7c4; }
.lookup__result--warn { background: #fdf8ef; border-color: #f0e2c6; }
.lookup__result--none { background: var(--accent-soft); border-color: #c9dcec; }
.lookup__score {
    font-size: 2.1rem; font-weight: 700; line-height: 1; margin: 0; color: var(--accent);
    white-space: nowrap;
}
.lookup__score span { font-size: .85rem; font-weight: 500; color: var(--ink-500); }
.lookup__body { flex: 1 1 auto; min-width: 0; }
.lookup__body h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.lookup__body p { font-size: .89rem; margin: 0 0 .55rem; color: var(--ink-700); }
.lookup__meta { color: var(--ink-500) !important; font-size: .82rem !important; }
.lookup__caveat { font-size: .78rem !important; color: var(--ink-500) !important; }
.lookup__cta { margin: .8rem 0 0 !important; }

/* --- Contact -------------------------------------------------------------- */

.contact {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.4rem; margin-bottom: 1.6rem;
}
.contact h3 { font-size: 1.05rem; }
.contact p { font-size: .92rem; color: var(--ink-700); }
.contact__row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .8rem; }
.contact__or { font-size: .85rem !important; color: var(--ink-500) !important; margin: 0 !important; }
.btn--wa { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.btn--wa:hover { background: #17603c; border-color: #17603c; }

/* --- Sticky mobile contact bar -------------------------------------------- */

.stickybar { display: none; }

@media (max-width: 720px) {
    .stickybar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        display: flex; gap: 1px; background: var(--line);
        border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .stickybar a {
        flex: 1 1 0; text-align: center; padding: .85rem .4rem; font-size: .85rem;
        font-weight: 600; text-decoration: none; background: var(--white); color: var(--ink);
    }
    .stickybar__wa   { background: #1f7a4d !important; color: #fff !important; }
    .stickybar__form { background: var(--accent) !important; color: #fff !important; }
    /* Clear the bar so it never covers the last line of the page. */
    .foot { padding-bottom: 5rem; }
}

/* --- Demand chart -------------------------------------------------------- */

.bars { display: grid; gap: .55rem; }
.bar { display: grid; grid-template-columns: minmax(140px, 15rem) 1fr auto; gap: .9rem; align-items: center; }
.bar__label { font-size: .9rem; font-weight: 600; }
/* Both are spans, so both need display:block — width and height do not apply
   to an inline box, and the fill renders as nothing at all without this. */
.bar__track {
    display: block; background: var(--line-soft); border-radius: 5px;
    height: 1.55rem; overflow: hidden;
}
.bar__fill {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--accent), #2f6da3);
    border-radius: 5px; transition: filter .15s ease;
}
.bar:hover .bar__fill, .bar:focus-within .bar__fill { filter: brightness(1.12); }
.bar__value { font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }

/* --- Generic cards ------------------------------------------------------- */

.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.4rem;
}
.card h3 { font-size: 1.02rem; }
.card p { font-size: .92rem; color: var(--ink-700); margin-bottom: 0; }

.champion__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.champion__score {
    background: var(--green-soft); color: var(--green); font-weight: 700; font-size: .88rem;
    padding: .3rem .6rem; border-radius: 6px; white-space: nowrap;
}
.champion__industry { font-size: .78rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; }

/* --- Checklist ----------------------------------------------------------- */

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.checks li { position: relative; padding-left: 1.6rem; font-size: .93rem; color: var(--ink-700); }
.checks li::before {
    content: ""; position: absolute; left: .25rem; top: .55rem; width: .45rem; height: .45rem;
    border-radius: 50%; background: var(--accent);
}

/* --- Flow ---------------------------------------------------------------- */

/*
 * Six steps in two columns, at every width.
 *
 * Stacked one per row they ran to six screens on a phone, and a reader
 * scrolling that far through numbered boxes stops reading them. Two columns
 * puts the whole method in view at once, which is the only reason to number
 * the steps in the first place.
 */
.flow {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
    /* Capped rather than filling the 1120px wrap. Two half-width cards
       holding a heading and one short question left most of each card empty,
       which reads as a layout that ran out of content rather than one that
       was sized for it. */
    max-width: 920px;
}
.flow__step {
    display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem;
}
.flow__num {
    width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent-soft);
    color: var(--accent-dark); font-weight: 700; display: grid; place-items: center; font-size: .9rem;
}
.flow__step h3 { font-size: .97rem; margin-bottom: .15rem; }
.flow__step p { font-size: .9rem; color: var(--ink-500); margin: 0; }

/*
 * On a narrow screen the number moves above the words rather than beside
 * them. Two columns inside a 375px viewport leaves about 160px per card;
 * spending 38px of that on a badge and 16px on the gap beside it would leave
 * roughly sixty for the text, which is not a column, it is a crease.
 */
@media (max-width: 640px) {
    .flow { gap: .45rem; }
    .flow__step {
        grid-template-columns: 1fr; gap: .5rem; padding: .85rem .9rem;
    }
    .flow__num { width: 2rem; height: 2rem; font-size: .82rem; }
    .flow__step h3 { font-size: .92rem; }
    .flow__step p { font-size: .84rem; line-height: 1.45; }
}

/* --- Notes and provenance ------------------------------------------------ */

.note {
    background: var(--line-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 6px; padding: .9rem 1.1rem; font-size: .88rem; color: var(--ink-700);
}
.note strong { color: var(--ink); }
.note--warn { border-left-color: var(--gold); background: #fdf8ef; border-color: #f0e2c6; }

.provenance { font-size: .8rem; color: var(--ink-500); margin-top: 1.2rem; }
.provenance a { color: var(--ink-500); }

/* --- What is riding on it ------------------------------------------------- */

.stake { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.stake__inputs, .stake__out {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem;
}
.stake__inputs .field { margin-bottom: 1rem; }
.stake__inputs .field:last-of-type { margin-bottom: 0; }

/* Marks the served figures as an illustration. landing.js hides it the moment
   a visitor changes anything, because from then on the numbers are theirs. */
.stake__flag {
    font-size: .78rem; font-weight: 600; color: var(--gold);
    background: #fdf8ef; border: 1px solid #f0e2c6; border-radius: 6px;
    padding: .4rem .6rem; margin-bottom: 1.1rem;
}
.stake__privacy { font-size: .78rem; color: var(--ink-500); margin: 1rem 0 0; }

.stake__row { padding: .9rem 0; border-bottom: 1px solid var(--line-soft); }
.stake__row:first-child { padding-top: 0; }
.stake__row:last-of-type { border-bottom: 0; }
.stake__label { display: block; font-size: .85rem; color: var(--ink-700); }
.stake__value {
    display: block; font-size: 1.45rem; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; margin-top: .2rem; line-height: 1.25;
}
.stake__value--warn { color: var(--gold); }
.stake__note { display: block; font-size: .78rem; color: var(--ink-500); margin-top: .35rem; }
.stake__row--lead .stake__value { color: var(--accent); }
.stake__verdict {
    font-size: .88rem; color: var(--ink-700); margin: 1rem 0 0;
    padding-top: 1rem; border-top: 1px solid var(--line);
}

/* `.card .case__figure`, not `.case__figure`.
 *
 * Every one of these lives inside a .card, and `.card p` (0,1,1) beats a bare
 * class (0,1,0) — so the headline figure has been rendering at .92rem in
 * ink-700 since the section was written, the same size as the note under it,
 * with the accent colour thrown away. It looked like a paragraph that happened
 * to contain a number, which for the one section built entirely around three
 * numbers is the whole point missed. Found by measuring the computed style
 * rather than by reading the rule, which is the only way this kind of bug
 * ever surfaces. */
.card .case__figure {
    font-size: 1.8rem; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums; margin-bottom: .4rem; line-height: 1.1;
}
.card .case__figure--warn { color: var(--gold); }

@media (max-width: 820px) {
    .stake { grid-template-columns: 1fr; }
}

/* --- Form ---------------------------------------------------------------- */

.form { display: grid; gap: 1rem; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.field input[type="text"], .field input[type="email"], .field input[type="url"],
.field input[type="number"], .field select, .field textarea {
    width: 100%; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 7px;
    font: inherit; font-size: .93rem; background: var(--white); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field .hint { display: block; font-size: .78rem; color: var(--ink-500); margin-top: .3rem; }
.field .error { display: block; font-size: .82rem; color: #a8412f; margin-top: .3rem; font-weight: 600; }
.field--invalid input, .field--invalid textarea { border-color: #d9a49c; }

fieldset { border: 0; margin: 0; padding: 0; }
legend { font-size: .85rem; font-weight: 600; margin-bottom: .5rem; padding: 0; }

.objectives { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .5rem; }
.objective {
    display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem;
    border: 1px solid var(--line); border-radius: 7px; background: var(--white);
    font-size: .9rem; cursor: pointer;
}
.objective:hover { border-color: var(--accent); }
.objective input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.objective:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1.4rem; font-size: .93rem; }
.alert--ok { background: var(--green-soft); border: 1px solid #bcd7c4; color: var(--green); }
.alert--error { background: #fbeeec; border: 1px solid #f0c2bf; color: #a8412f; }

/* --- Footer -------------------------------------------------------------- */

.foot { background: var(--ink); color: #b8c2d0; padding: 3rem 0 2rem; font-size: .88rem; }
.foot a { color: #d6dee9; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.foot h3 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .7rem; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.foot__base { border-top: 1px solid #263040; padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8rem; }

@media (max-width: 820px) {
    .wrap { padding: 0 1.15rem; }
    /* Direct children only. The section links are children of nav; the
       language links are grandchildren, inside .langswitch. Without the child
       combinator this hides those too — and since the current language renders
       as a span rather than a link, what disappears is always the language the
       visitor is not reading, leaving a phone with no way to switch at all. */
    /* The masthead becomes two rows: brand, language and the ask on the
       first, the pages on a second beneath it.

       NOT a hamburger. That needs script, and the whole public site is built
       to work without it — a menu button that does nothing is worse than no
       menu button. Two rows cost about 40px and are always open.

       The page links used to be hidden here, which was right when they were
       anchors into the same page and wrong the moment they became the only
       route between pages. */
    .masthead nav { flex-wrap: wrap; row-gap: 0; justify-content: flex-end; }
    .masthead__pages {
        order: 3; width: 100%;
        justify-content: flex-start; gap: 1.1rem;
        margin-top: .55rem; padding-top: .55rem;
        border-top: 1px solid var(--line);
        overflow-x: auto;                 /* a fourth page must not widen the page */
        -webkit-overflow-scrolling: touch;
    }
    .masthead nav .btn { padding: .55rem .8rem; font-size: .82rem; white-space: nowrap; }
    /* Nothing in the bar may wrap mid-word: "English" breaking after "Engl"
       is what an over-full row does, and it reads as a rendering fault
       rather than as a control. */
    .langswitch { flex: 0 0 auto; }
    .langswitch a, .langswitch__on { white-space: nowrap; }
    .masthead__pages a, .masthead__on { white-space: nowrap; padding: .35rem 0; }
    /* A finger is not a cursor. At the desktop padding these come out 31px
       tall, under the 44px a touch target wants, and they sit next to each
       other — so a mis-tap switches language rather than missing. */
    .langswitch a, .langswitch__on { padding: .62rem .7rem; }
    .section { padding: 3.2rem 0; }
    .hero { padding: 3rem 0 2.5rem; }
    .bar { grid-template-columns: 1fr auto; }
    .bar__track { grid-column: 1 / -1; }
    .kpi__value { font-size: 2rem; }
    .section h2 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* --- Calls to action ---------------------------------------------------- */
/*
 * A band that interrupts the page with the one thing being asked for. It is
 * visually the loudest element on the page apart from the hero, and that is
 * the intent: on a page of eleven sections the ask has to be findable from
 * wherever a visitor stopped reading.
 */
.cta-band {
    background: var(--accent); color: #fff;
    padding: 2.4rem 0;
}
.cta-band .wrap {
    display: flex; gap: 1.5rem; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
}
.cta-band__text { flex: 1 1 22rem; min-width: 0; }
.cta-band__heading { font-size: 1.35rem; font-weight: 700; margin: 0 0 .35rem; line-height: 1.25; }
.cta-band__lede { margin: 0; color: #d3e2f1; max-width: 54ch; line-height: 1.55; }
.cta-band__action { flex: 0 0 auto; text-align: center; }
/* The button inverts inside the band: a navy button on navy is invisible. */
.cta-band .btn--primary { background: #fff; color: var(--accent); border-color: #fff; }
.cta-band .btn--primary:hover { background: var(--accent-soft); color: var(--accent-dark); }
.cta-band__note { margin: .5rem 0 0; font-size: .8rem; color: #b9cfe6; }

.wrap--narrow { max-width: 760px; }

/* --- The sticky call to action ------------------------------------------ */
/*
 * Appears once the hero has scrolled away and follows the visitor down.
 * Bottom rather than top on purpose: a top bar competes with the browser's
 * own chrome on a phone and covers content the reader is heading toward.
 */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--ink); color: #fff;
    box-shadow: 0 -6px 24px rgba(16, 21, 28, .22);
    padding: .7rem 0;
}
.sticky-cta .wrap {
    display: flex; align-items: center; gap: 1rem; justify-content: center; flex-wrap: nowrap;
}
.sticky-cta__text { margin: 0; font-size: .9rem; line-height: 1.35; flex: 0 1 auto; }
.sticky-cta .btn { flex: 0 0 auto; white-space: nowrap; }
.sticky-cta__close {
    appearance: none; background: transparent; border: 0; cursor: pointer;
    color: #9aa6b5; font-size: 1.4rem; line-height: 1; padding: .25rem .4rem;
    flex: 0 0 auto;
}
.sticky-cta__close:hover { color: #fff; }

/* On a phone the sentence is what gives, not the button: the button is the
   point of the bar, and a wrapped headline pushes it off the screen. */
@media (max-width: 560px) {
    .sticky-cta__text { display: none; }
    .sticky-cta .wrap { justify-content: space-between; }
    .sticky-cta .btn { flex: 1 1 auto; text-align: center; }
    .cta-band__action { flex: 1 1 100%; text-align: left; }
}

/* The page's own bottom padding, so the sticky bar never covers the last
   thing on the page — the footer, which carries the contact details. */
body { padding-bottom: 4.5rem; }
@media (min-width: 561px) { body { padding-bottom: 4rem; } }

/* --- The lookup's not-assessed answer ----------------------------------- */
/*
 * Most visitors see this block, so it is built to be read rather than
 * skimmed past. The five checks are the substance: they are what somebody
 * takes away whether or not they ever contact us.
 */
.lookup__checklist-lede { margin: 1rem 0 .5rem; font-weight: 600; color: var(--ink); }
.lookup__checklist {
    list-style: none; margin: 0 0 .8rem; padding: 0;
    display: grid; gap: .55rem;
}
.lookup__checklist li {
    padding-left: 1.6rem; position: relative;
    font-size: .92rem; line-height: 1.5; color: var(--ink-700);
}
/* A tick rather than a bullet: these are things to check off against your
   own site, which is the whole invitation. */
.lookup__checklist li::before {
    content: "\2713"; position: absolute; left: 0; top: 0;
    color: var(--accent); font-weight: 700;
}
.lookup__checklist li strong { color: var(--ink); }
.lookup__selfcheck { font-size: .88rem; color: var(--ink-700); margin: 0 0 1rem; }
.lookup__expect { font-size: .85rem; color: var(--ink-500); margin: .55rem 0 0; }

/* ---------------------------------------------------------------------------
 * The legal notices.
 *
 * Set for reading rather than for skimming: a narrower measure, a larger
 * line height, and headings that separate clearly. Somebody reading a privacy
 * notice is looking for one specific sentence, and the layout's only job is
 * to let them find it.
 * ------------------------------------------------------------------------ */

/* A second list in the same footer column needs air above its heading. */
.foot ul + h3 { margin-top: 1.4rem; }

.legal-page .masthead nav { gap: 1.2rem; }

.legal__tabs {
    display: flex; flex-wrap: wrap; gap: .4rem;
    margin: 1.6rem 0 2.2rem;
    border-bottom: 1px solid var(--line);
}
.legal__tabs a {
    padding: .55rem .95rem;
    font-size: .9rem; font-weight: 600; color: var(--ink-500);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.legal__tabs a:hover { color: var(--ink); }
.legal__tabs a.is-current { color: var(--accent); border-bottom-color: var(--accent); }

.legal__date { font-size: .85rem; color: var(--ink-500); margin: .4rem 0 0; }

.legal__body { line-height: 1.75; }
.legal__body h2 {
    font-size: 1.12rem; margin: 2.4rem 0 .7rem;
    padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body h3 { font-size: .97rem; margin: 1.5rem 0 .45rem; color: var(--ink-700); }
.legal__body p { margin: 0 0 .95rem; }
.legal__body ul { margin: 0 0 1.1rem 1.1rem; padding: 0; }
.legal__body li { margin-bottom: .45rem; }
.legal__body code {
    font-size: .88em; background: var(--shell);
    padding: .1em .35em; border-radius: 3px;
}
.legal__body a { color: var(--accent); }

.legal__back { margin-top: 2.6rem; font-size: .9rem; }
.legal__back a { color: var(--ink-500); text-decoration: none; }
.legal__back a:hover { color: var(--accent); }

.foot--slim { padding: 1.8rem 0; }
.foot--slim p { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }

/* The notice at the point of collection. Small, but not hidden: it sits
 * directly above the button, which is the last thing read before submitting. */
.form__privacy {
    font-size: .82rem; line-height: 1.6; color: var(--ink-500);
    margin: 0 0 1.1rem; max-width: 62ch;
}
.form__privacy a { color: var(--accent); }

/* ---------------------------------------------------------------------------
 * The page header.
 *
 * Every page but the home page opens with one. It is quieter than the hero
 * on purpose — a reader who followed a link to "How we work" has already
 * chosen, and does not need to be sold to again before they can read.
 * ------------------------------------------------------------------------ */
.pagehead {
    background: linear-gradient(180deg, var(--shell) 0%, var(--white) 100%);
    border-bottom: 1px solid var(--line);
    padding: 3rem 0 2.4rem;
}
.pagehead h1 {
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    line-height: 1.15; margin: .4rem 0 0; max-width: 20ch;
}
.pagehead__lede {
    margin: .9rem 0 0; max-width: 60ch;
    font-size: 1.02rem; line-height: 1.65; color: var(--ink-700);
}

/* The current page in the masthead. A link back to where you already are is
   a link that does nothing, so it is marked rather than left clickable. */
.masthead__on {
    font-weight: 700; color: var(--ink);
    border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}

@media (max-width: 720px) {
    .pagehead { padding: 2rem 0 1.6rem; }
}

/* ---------------------------------------------------------------------------
 * Case studies and guides.
 * ------------------------------------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.chip {
    padding: .45rem .95rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--white);
    font-size: .85rem; font-weight: 600; color: var(--ink-700); text-decoration: none;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip--on { background: var(--accent); border-color: var(--accent); color: #fff; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.card--article { display: flex; flex-direction: column; gap: .55rem; }
.card--article h2 { font-size: 1.15rem; line-height: 1.3; margin: 0; }
.card--article h2 a { color: var(--ink); text-decoration: none; }
.card--article h2 a:hover { color: var(--accent); }
.card__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin: 0; font-size: .78rem; color: var(--ink-500);
}
.card__standfirst { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-700); }
.card__more { margin: auto 0 0; font-size: .87rem; font-weight: 600; }
.card__more a { text-decoration: none; }

.empty-note {
    padding: 2.5rem 1.5rem; text-align: center;
    border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-500);
}

.insights__other {
    margin: 2.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line);
    font-size: .9rem; color: var(--ink-500);
}

/* --- One article --------------------------------------------------------- */

.pagehead--article .eyebrow a { color: var(--accent); text-decoration: none; }
.article__byline {
    margin: 1.1rem 0 0; font-size: .84rem; color: var(--ink-500);
    display: flex; flex-wrap: wrap; gap: 1rem;
}
.article__figures { padding: 2.4rem 0; }

/* The measure is narrower than the site's default wrap. A research write-up
   is read, not scanned, and 90 characters a line is where people start losing
   their place returning to the left edge. */
.article__body { font-size: 1.03rem; line-height: 1.75; }
.article__body h2 { font-size: 1.3rem; margin: 2.4rem 0 .8rem; }
.article__body h3 { font-size: 1.05rem; margin: 1.8rem 0 .5rem; color: var(--ink-700); }
.article__body p { margin: 0 0 1.15rem; max-width: 68ch; }
.article__body ul, .article__body ol { margin: 0 0 1.3rem 1.3rem; max-width: 66ch; }
.article__body li { margin-bottom: .5rem; }
.article__body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.article__body blockquote {
    margin: 1.6rem 0; padding: .3rem 0 .3rem 1.2rem;
    border-left: 3px solid var(--accent);
    font-size: 1.1rem; line-height: 1.6; color: var(--ink);
}

.article__sources {
    margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.article__sources h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
.article__sources ol { margin: 0 0 0 1.2rem; padding: 0; font-size: .89rem; line-height: 1.6; }
.article__sources li { margin-bottom: .6rem; }
.article__sources .cell-sub { display: block; color: var(--ink-500); font-size: .84rem; }

.article__limits { margin-top: 2.4rem; }
.case__more { margin: 1.6rem 0 0; }

/* The kind badge on a note. `.badge` is defined in the admin stylesheet,
   which the public site does not load — so these rendered as bare text until
   somebody looked at the page rather than at the markup. */
.card__meta .badge {
    display: inline-block; padding: .18rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.card__meta .badge--ok   { background: var(--green-soft); color: var(--green); }
.card__meta .badge--info { background: var(--accent-soft); color: var(--accent); }

/* --- The source register -------------------------------------------------

   A register is genuinely tabular — grade, origin, country, refresh — and a
   <table> was the first attempt. It was abandoned rather than styled: five
   columns at 390px either scroll sideways (the one thing `body` above works
   to prevent) or collapse into a stack of unlabelled cells, and this page
   exists to be read by somebody who is checking up on us. That reader is on
   a phone as often as not.

   So each entry is a row that becomes a card, and the facts carry their own
   labels at every width. The labels are visible on desktop too, because
   "Quarterly" with no header above it is not a fact anybody can use. */

.register { margin-bottom: 3rem; }
.register:last-child { margin-bottom: 0; }

.register__head { margin-bottom: 1.2rem; padding-bottom: .9rem; border-bottom: 2px solid var(--accent); }
.register__head h2 { font-size: 1.1rem; margin: 0 0 .35rem; }
.register__head p  { font-size: .88rem; color: var(--ink-500); margin: 0; max-width: 68ch; }

.register__row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 1.2rem;
    padding: 1.2rem 0; border-bottom: 1px solid var(--line-soft);
}
.register__row:last-child { border-bottom: 0; }
.register__main h3 { font-size: 1rem; margin: 0 0 .35rem; }
.register__main p  { font-size: .9rem; color: var(--ink-700); margin: 0 0 .4rem; }
.register__main p:last-child { margin-bottom: 0; }

/* Two facts per line on desktop, so a four-fact entry does not become a
   column taller than the description beside it. */
.register__facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem 1rem; margin: 0;
}
.register__facts dt {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-500); margin: 0 0 .15rem;
}
.register__facts dd { font-size: .88rem; font-weight: 600; color: var(--ink); margin: 0; }

@media (max-width: 760px) {
    /* One column, and the facts move under the description rather than
       beside it — at this width a 320px sidebar is the whole screen. */
    .register__row { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
    .register__facts { padding-top: .9rem; border-top: 1px solid var(--line-soft); }
}