/* ============================================================
   yuzutrace.css — YuzuTrace design system

   CONCEPT — "The marked-up document".
   YuzuTrace sells the act of going through an interface and marking
   what is broken. The site is therefore built as a document that has
   already been marked up, using the two inks of anyone who reviews on
   paper: the navy house ink and the cyan highlighter, both taken
   straight from the logo.

   STRUCTURE — a reading column with an annotation gutter to its left,
   carrying numbered pins and true marginalia. Navigation lives in the
   masthead; a persistent table of contents would only duplicate it.

   Single theme by intent: a cool near-white sheet, marked up in two
   inks. Not a light "mode" — there is no dark counterpart.

   Self-contained. Does not depend on index.css (legacy YuzuTrace shell).
   ============================================================ */

/* ---------- Tokens ---------- */

:root {
    /* Ground — cool near-white, never pure #fff */
    --void:   #f5f6f7;
    --panel:  #ebedef;
    --panel-2:#e0e3e6;

    /* Text — true black, for maximum contrast against the ground */
    --bone:   #0f1113;
    --bone-2: #4a5057;
    --bone-3: #858c93;

    /* The two inks come from the logo, itself a two-colour wordmark: navy
       "Focus", cyan "UX". A brand takes its colours from its mark, never
       the reverse — which is why this is navy and cyan, not green.

       Ink 1 — the house colour. Marks the brand, not the alarm. */
    --pen:      #16365c;
    --pen-wash: rgba(22,54,92,.08);

    /* Ink 2 — the highlighter. Bright by design: it sits behind black text,
       so legibility comes from the text, not from dimming the stroke. */
    --chalk:      #02d1f1;
    --chalk-wash: rgba(2,209,241,.30);
    /* The highlighter is a FILL, never an ink: as text on this ground it
       fails contrast. Where the second colour must be READ, use this. */
    --chalk-ink:  #0a6f83;

    /* Masthead ground — deliberately its own token, independent of --pen. */
    --bar: #007a4d;

    /* Verified */
    --sage: #16365c;

    /* Severity ladder — deliberately INDEPENDENT of --pen. The house
       colour is green; if Critical inherited it, the most alarming rung
       would render in the colour that universally reads as "fine".
       Severity must always run warm-to-hot regardless of branding. */
    /* Measured on --panel, the ground the report sits on: the old amber was
       3.16:1 and the old olive 3.81:1, both below AA — on the three labels the
       whole deliverable is organised around. These clear it while keeping the
       ladder warm-to-hot. */
    --sev-1: #c1272d;   /* 4.98:1 */
    --sev-2: #96550a;   /* 4.97:1 */
    --sev-3: #6b6820;   /* 4.93:1 */
    --sev-4: #5f666c;   /* 4.97:1 — grey, because cosmetic is not an alarm */

    /* Structure */
    --hair:      rgba(15,17,19,.16);
    --hair-firm: rgba(15,17,19,.32);

    /* Measure */
    --frame:  1080px;
    --margin: 88px;
    --column: 720px;
    --gutter: clamp(1.25rem, 4vw, 2.75rem);

    --display: 'Instrument Serif', 'Times New Roman', serif;
    --sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}


/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0; background: var(--void); color: var(--bone);
    font-family: var(--sans); font-size: 17px; line-height: 1.62;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--pen); color: #fff; padding: .75rem 1.25rem; z-index: 300; text-decoration: none; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }
::selection { background: var(--chalk); color: var(--bone); }

/* ============================================================
   THE THREE-COLUMN FRAME
   ============================================================ */

/* Two columns now: the annotation gutter and the reading column, centred
   as a pair. The gutter keeps the composition off-axis without needing a
   third column to lean against. */
.sheet {
    display: grid; grid-template-columns: 1fr;
    padding-inline: var(--gutter);
    max-width: var(--frame);
    margin-inline: auto;
}
@media (min-width: 1180px) {
    .sheet { grid-template-columns: var(--margin) minmax(0, 1fr); column-gap: 0; }
}

/* The hero adds a third column for the collage, and widens past --frame to
   pay for it. Deliberate: the opening spread is allowed to break the grid
   the rest of the page keeps. */
@media (min-width: 1180px) {
    .sheet--hero {
        max-width: 1280px;
        grid-template-columns: var(--margin) minmax(0, 1fr) minmax(0, .82fr);
        column-gap: 2.5rem;
    }
    .sheet--hero .col { max-width: none; }
}

/* Column 1 of .sheet — the annotation gutter */
.gutter { display: none; }
@media (min-width: 1180px) { .gutter { display: block; grid-column: 1; padding-right: 1.5rem; } }

/* Column 2 of .sheet — the content, deliberately off-axis */
.col { grid-column: 1; min-width: 0; }
@media (min-width: 1180px) { .col { grid-column: 2; max-width: var(--column); } }

/* ---------- Marginalia: a pin plus a handwritten-feeling note ---------- */

.note { position: relative; padding-top: .35rem; }
/* Two notes stacked in the same gutter had no gap at all: only order.css set
   one, scoped to its own page, so every other page ran them together into an
   unreadable block. Defined here, it applies everywhere at once. */
.note + .note { margin-top: 2.25rem; }
.note .pin { margin-bottom: .7rem; }
.note p {
    margin: 0; font-family: var(--mono); font-size: .66rem; line-height: 1.75;
    letter-spacing: .04em; color: var(--bone-2); text-transform: uppercase;
}
.note--chalk p { color: var(--chalk-ink); opacity: .8; }

.pin {
    display: inline-grid; place-items: center; flex: none;
    width: 1.55rem; height: 1.55rem; border-radius: 50%;
    border: 1px solid var(--pen); color: var(--pen);
    font-family: var(--mono); font-size: .64rem;
}
.pin--chalk { border-color: var(--chalk-ink); color: var(--chalk-ink); }
.pin--solid { background: var(--pen); border-color: var(--pen); color: #fff; }

/* ============================================================
   TYPE
   ============================================================ */

.display { font-family: var(--display); font-size: clamp(2.9rem, 7.5vw, 5.4rem); line-height: .97; letter-spacing: -.02em; }
.title   { font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.15rem); line-height: 1.05; letter-spacing: -.015em; margin-bottom: 1.5rem; }

/* Ink 1 — struck through / flagged */
.pen { color: var(--pen); }

/* Ink 2 — the highlighter stroke. Sits BEHIND the text, slightly skewed
   so it reads as a hand-drawn pass rather than a CSS rectangle. */
.mark { position: relative; display: inline-block; }
.mark::before {
    content: ""; position: absolute; z-index: -1;
    left: -.05em; right: -.07em; bottom: .04em; height: .42em;
    background: var(--chalk); opacity: .85;
    transform: skewX(-12deg) rotate(-.6deg);
}

.standfirst { font-size: clamp(1.02rem, 1.9vw, 1.15rem); line-height: 1.62; color: var(--bone-2); max-width: 56ch; margin: 0 0 3rem; }

/* Section heading block */
.sectionmark { display: flex; align-items: center; gap: .85rem; font-family: var(--mono); font-size: .67rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-2); margin-bottom: 1.75rem; }
.sectionmark b { color: var(--pen); font-weight: 400; }
.sectionmark::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* Holds a hyphenated compound together so it never breaks across lines. */
.nowrap { white-space: nowrap; }

.meta { font-family: var(--mono); font-size: .67rem; letter-spacing: .13em; text-transform: uppercase; color: var(--bone-2); }

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

.btn {
    display: inline-flex; align-items: center; gap: .7rem;
    font-family: var(--mono); font-size: .75rem; letter-spacing: .13em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; padding: 1rem 1.6rem;
    border: 1px solid var(--pen); background: var(--pen); color: #fff;
    transition: background .16s ease, color .16s ease;
}
.btn:hover { background: transparent; color: var(--pen); }
.btn--quiet { background: transparent; color: var(--bone); border-color: var(--hair-firm); }
.btn--quiet:hover { border-color: var(--chalk-ink); color: var(--chalk-ink); }
.btn--sm { padding: .68rem 1.1rem; font-size: .68rem; }

.textlink {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
    text-decoration: none; color: var(--bone-2); border-bottom: 1px solid var(--hair-firm); padding-bottom: 4px;
    transition: color .16s, border-color .16s;
}
.textlink:hover { color: var(--chalk-ink); border-color: var(--chalk-ink); }

/* ============================================================
   MASTHEAD
   ============================================================ */

/* The masthead re-declares the tokens rather than restating colours: every
   descendant rule already speaks in tokens, so inverting them here flips the
   whole bar to ink in one place. Same trick powers .act--ink below. */
.masthead {
    /* Tokens are re-declared rather than colours restated, so every
       descendant rule flips with the bar in one place.
       NOTE: the logo is a navy/cyan raster — its navy half loses contrast
       on this ground. A reversed (white) logo file would resolve it. */
    --void:   var(--bar);
    --panel:  var(--bar);
    --panel-2:var(--bar);
    --bone:   #ffffff;
    /* Measured against --bar, not guessed: .74 gave 3.68:1 on this green and
       .82 gave 4.15:1 — both below AA, on the navigation of every page. .90
       reaches 4.7:1 and keeps a visible step below --bone at full white. */
    --bone-2: rgba(255,255,255,.94);
    --bone-3: rgba(255,255,255,.90);
    --hair:      rgba(255,255,255,.22);
    --hair-firm: rgba(255,255,255,.38);

    position: sticky; top: 0; z-index: 120;
    background: var(--bar);
    border-bottom: 0;
    color: var(--bone);
}

/* The call to action would vanish if it kept --pen on this ground. */
.masthead .btn { background: #ffffff; border-color: #ffffff; color: var(--bar); }
.masthead .btn:hover { background: transparent; color: #ffffff; }

.masthead .langpick__menu { background: var(--bar); border-color: rgba(255,255,255,.38); }
.masthead .langpick__menu a:hover { background: rgba(255,255,255,.14); color: #fff; }
.masthead .langpick__menu a[aria-current="true"] { color: #fff; font-weight: 600; }


/* The logo is a raster wordmark: give it an explicit height and let the
   width follow, so it never reflows the bar while the image loads. */
.wordmark img { height: 26px; width: auto; }
@media (min-width: 700px) { .wordmark img { height: 30px; } }

/* Auth state. nav-auth-state.js flips html.plx-authed; these two rules used
   to live in index.css, which this sheet replaced — without them both
   labels render at once ("Sign inDashboard"). */
.nav-lbl-in { display: none; }
html.plx-authed .nav-lbl-out { display: none; }
html.plx-authed .nav-lbl-in  { display: inline; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 68px; padding-inline: var(--gutter); max-width: var(--frame); margin-inline: auto; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; font-family: var(--mono); font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; }
.mainnav { display: none; }
@media (min-width: 1020px) { .mainnav { display: flex; gap: 2.1rem; } }
.mainnav a { text-decoration: none; font-family: var(--mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--bone-3); padding-block: .3rem; border-bottom: 1px solid transparent; transition: color .16s, border-color .16s; }
.mainnav a:hover { color: var(--bone); border-color: var(--chalk-ink); }
.masthead__actions { display: flex; align-items: center; gap: 1rem; flex: none; }

/* Manual language switch only. Never auto-redirect on navigator.language
   or IP — Googlebot crawls from the US and would be ejected from FR/ES. */
.langpick { position: relative; }
.langpick__btn { font-family: var(--mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; background: none; border: 0; cursor: pointer; color: var(--bone-3); padding: .4rem .2rem; }
.langpick__btn:hover { color: var(--bone); }
.langpick__menu { position: absolute; right: 0; top: calc(100% + .5rem); display: none; background: var(--panel-2); border: 1px solid var(--hair-firm); min-width: 138px; padding: .3rem; }
.langpick:hover .langpick__menu, .langpick:focus-within .langpick__menu { display: block; }
.langpick__menu a { display: block; padding: .5rem .7rem; font-size: .85rem; text-decoration: none; color: var(--bone-2); }
.langpick__menu a:hover { background: var(--panel); color: var(--bone); }
.langpick__menu a[aria-current="true"] { color: var(--chalk-ink); }

.signin { font-family: var(--mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; color: var(--bone-3); }
.signin:hover { color: var(--bone); }
.burger { display: inline-flex; background: none; border: 1px solid var(--hair-firm); padding: .52rem .8rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; color: var(--bone); }
@media (min-width: 1020px) { .burger { display: none; } }

/* ---------- The masthead on a phone ----------
   .wordmark and .masthead__actions are both flex: none, so neither may
   shrink: at 320px their contents ask for roughly 500px and the bar runs off
   the screen, taking the whole page with it.

   Everything hidden below is already inside the drawer the burger opens, so
   nothing becomes unreachable. The language switch stays — it is the only
   way to change language on this site, by design. */
@media (max-width: 619px) {
    .masthead__inner { gap: .75rem; padding-inline: 1rem; }
    .masthead__actions { gap: .65rem; }
    .masthead__actions .signin,
    .masthead__actions .btn { display: none; }
}
@media (max-width: 380px) {
    .wordmark img { height: 22px; }
    .burger { padding: .5rem .6rem; font-size: .62rem; }
    .langpick__btn { font-size: .62rem; }
}
.drawer { display: none; border-top: 1px solid var(--hair); background: var(--panel); }
.drawer[data-open="true"] { display: block; }
@media (min-width: 1020px) { .drawer { display: none !important; } }
.drawer > div { padding-inline: var(--gutter); }
.drawer a { display: block; padding: 1rem 0; text-decoration: none; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone); border-bottom: 1px solid var(--hair); }
.drawer a:last-child { border-bottom: 0; }

/* ============================================================
   SECTIONS
   ============================================================ */

.act { padding-block: clamp(4rem, 9vw, 7.5rem); }
.act + .act { border-top: 1px solid var(--hair); }

/* Tighter rhythm for pages that stack same-kind blocks — an FAQ is not a
   narrative. At full spacing the gap between groups reads as the end of the
   page, and visitors stop scrolling with half the answers still below. */
.act--tight { padding-block: clamp(2.5rem, 5vw, 3.75rem); }

/* Group index: tells the reader up front how much there is, so no gap can be
   mistaken for an ending. */
.groupindex { list-style: none; margin: 2.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--hair); display: grid; gap: 0; }
@media (min-width: 620px) { .groupindex { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.groupindex a {
    display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .5rem; align-items: baseline;
    padding: .8rem 0; border-bottom: 1px solid var(--hair); text-decoration: none;
    font-size: .95rem; color: var(--bone-2); transition: color .16s ease;
}
.groupindex a:hover { color: var(--bone); }
.groupindex .num { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--pen); }
.groupindex .count { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--bone-2); }

/* Paper panel — pure white against the cool grey sheet. The two grounds
   must differ enough to read as separate surfaces; #f5f6f7 against
   #ebedef was a 4% step and registered as flat. */
.act--panel { background: #ffffff; }

/* Ink chapter — same token-swap trick as the masthead. Used sparingly
   (twice) to give the descent a rhythm instead of one long pale scroll. */
.act--ink {
    --void:   #0f1113;
    --panel:  #191c1f;
    --panel-2:#22262a;
    --bone:   #f2f3f4;
    --bone-2: #aab2b9;
    --bone-3: #7c848b;
    --chalk-ink: #02d1f1;   /* the logo cyan: 10.26:1 here, and already ours */
    --sev-2:  #e8933a;
    --sev-3:  #b9b45a;   /* 8.77:1, and distinct from the accent */
    --hair:      rgba(242,243,244,.14);
    --hair-firm: rgba(242,243,244,.28);

    background: var(--void); color: var(--bone);
    border-top: 0 !important;
}
.act--ink + .act { border-top: 0; }

/* ---------- Overture ---------- */

.overture { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5rem); }

/* On the pricing page the opening and the first card were separated by 200px
   of padding — 80px closing the overture, 120px opening the section. A page
   whose whole promise is "rates published openly" must not make anyone scroll
   to find one. Paired with .act--tight on the section below. */
.overture--flush { padding-bottom: clamp(1rem, 2vw, 1.75rem); }
.overture--flush .assurances { margin-top: 2.25rem; }
@media (min-width: 1024px) {
    .overture--flush .display { font-size: clamp(2.6rem, 5.2vw, 4rem); }
}
.overture__lede { font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.58; color: var(--bone-2); margin: 2rem 0 2.5rem; max-width: 46ch; }
.overture__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; }

.assurances { list-style: none; margin: 3.25rem 0 0; padding: 0; }
/* The label column must clear the longest word (DELIVERY) at the tracking
   used below, or the two columns collide. */
.assurances li { display: grid; grid-template-columns: 6.2rem 1fr; gap: 1rem; align-items: baseline; padding: .9rem 0; border-top: 1px solid var(--hair); font-size: .92rem; color: var(--bone-2); }
.assurances li:last-child { border-bottom: 1px solid var(--hair); }
.assurances .meta { font-size: .62rem; }

/* ---------- Hero collage ----------
   Offset composition rather than a grid: two stacked frames on the left,
   a taller one on the right that overlaps them and sits centred against
   the pair. The overlap is what stops it reading as a photo grid. */

.hero-gallery { display: none; }

@media (min-width: 1180px) {
    .hero-gallery {
        display: grid;
        grid-column: 3;
        grid-template-columns: 1fr .82fr;
        column-gap: 1rem;
        align-content: center;
        padding-top: 2.5rem;
    }

    .hero-gallery__item {
        margin: 0; overflow: hidden;
        border-radius: 14px;
        /* Two layers: a tight contact shadow plus a wide diffuse one, so the
           frames lift off the sheet without a hard drop-shadow edge. */
        box-shadow:
            0 1px 2px rgba(15,17,19,.06),
            0 18px 40px -12px rgba(15,17,19,.22);
    }
    .hero-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

    /* Left column, upper frame */
    .hero-gallery__item:nth-child(1) { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; }

    /* Left column, lower frame — pulled up so the pair reads as one stack */
    .hero-gallery__item:nth-child(2) { grid-column: 1; grid-row: 2; aspect-ratio: 5 / 4; margin-top: 1rem; }

    /* Right frame — laps over the left column, centred against the pair.

       Square, not portrait, and this is the whole point: the sources are
       16:9, so a 3/4 frame would only show ~42% of the original width and
       has to enlarge to fill — which is what made this close-up subject's
       head tower over the two wider shots. A 1/1 frame shows ~56%, so the
       image sits back at roughly the scale of its neighbours. Match the
       frame to the source, then adjust size — never the reverse. */
    .hero-gallery__item:nth-child(3) {
        grid-column: 2; grid-row: 1 / 3;
        aspect-ratio: 1 / 1;
        align-self: center;
        margin-left: -2.25rem;
        position: relative; z-index: 2;
    }
    /* Keep his eyes near the upper third rather than dead centre. */
    .hero-gallery__item:nth-child(3) img { object-position: 50% 42%; }
}

/* Below the three-column breakpoint the collage becomes a native horizontal
   scroller. Stacking three photos here would push the call to action off
   the first screen, which is the one thing this block must not do. */
@media (max-width: 1179px) {
    .hero-gallery {
        display: flex; gap: .85rem;
        margin-top: 2.75rem;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Bleed to both screen edges so the strip reads as scrollable. */
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-bottom: .5rem;
    }
    .hero-gallery::-webkit-scrollbar { display: none; }

    .hero-gallery__item {
        margin: 0; flex: 0 0 auto;
        width: min(74vw, 320px); aspect-ratio: 4 / 3;
        overflow: hidden; border-radius: 14px;
        scroll-snap-align: center;
        box-shadow: 0 1px 2px rgba(15,17,19,.06), 0 14px 30px -12px rgba(15,17,19,.20);
    }
    .hero-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- The marked-up artefact ---------- */

.artefact { border: 1px solid var(--hair-firm); background: var(--panel); position: relative; margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 1180px) {
    /* Breaks the reading measure on purpose: this is the only place the site
       shows the thing it sells, and it was reading as a sidebar. */
    .artefact { width: calc(100% + 190px); max-width: none; }
}
.artefact::after {
    /* registration corners — the mark of a measured document */
    content: ""; position: absolute; inset: -1px; pointer-events: none;
    background:
        linear-gradient(var(--pen),var(--pen)) 0 0/16px 1px no-repeat,
        linear-gradient(var(--pen),var(--pen)) 0 0/1px 16px no-repeat,
        linear-gradient(var(--pen),var(--pen)) 100% 0/16px 1px no-repeat,
        linear-gradient(var(--pen),var(--pen)) 100% 0/1px 16px no-repeat,
        linear-gradient(var(--pen),var(--pen)) 0 100%/16px 1px no-repeat,
        linear-gradient(var(--pen),var(--pen)) 0 100%/1px 16px no-repeat,
        linear-gradient(var(--pen),var(--pen)) 100% 100%/16px 1px no-repeat,
        linear-gradient(var(--pen),var(--pen)) 100% 100%/1px 16px no-repeat;
}
.artefact__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--hair); }
.artefact__body { padding: .35rem 1.5rem 1.4rem; }

.finding { padding: 1.3rem 0; border-bottom: 1px solid var(--hair); }
.finding:last-child { border-bottom: 0; padding-bottom: .4rem; }
.finding__row { display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; align-items: start; }
.finding__title { font-size: .99rem; line-height: 1.4; }
.finding__meta { display: flex; flex-wrap: wrap; gap: 1.15rem; margin: .55rem 0 0 3rem; }
.sev { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.sev--1 { color: var(--sev-1); } .sev--2 { color: var(--sev-2); } .sev--3 { color: var(--sev-3); } .sev--4 { color: var(--sev-4); }
.finding__quote { position: relative; margin: .8rem 0 0 3rem; padding-left: 1.05rem; font-family: var(--display); font-size: 1.15rem; line-height: 1.38; }
.finding__quote::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 2px; background: var(--pen); }

/* "What to change" — without it the excerpt is a list of complaints, and the
   page promises concrete fixes three sections earlier. */
.finding__fix { display: flex; gap: .6rem; margin: .75rem 0 0 3rem; align-items: baseline; }
.finding__fix .meta { color: var(--chalk-ink); flex: none; }
.finding__fix span:last-child { font-size: .92rem; line-height: 1.5; color: var(--bone); }

/* ---------- Figures ---------- */

.figures { display: grid; gap: 0; }
@media (min-width: 700px) { .figures { grid-template-columns: 1fr 1fr; } }
.figure { padding: 1.9rem 1.5rem 1.9rem 0; border-top: 1px solid var(--hair); }
@media (min-width: 700px) { .figure:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--hair); } }
.figure__value { font-family: var(--display); font-size: clamp(2.2rem, 4.5vw, 3.1rem); line-height: .95; margin: .7rem 0 .8rem; }
.figure__note { font-size: .89rem; line-height: 1.55; color: var(--bone-2); }

/* ---------- Method ---------- */

.method { display: grid; }
.step { display: grid; grid-template-columns: 2.5rem 1fr; gap: .6rem; padding: 1.9rem 0; border-top: 1px solid var(--hair); }
.step:last-child { border-bottom: 1px solid var(--hair); }
.step__name { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; margin-bottom: .5rem; }
.step__text { font-size: .95rem; line-height: 1.62; color: var(--bone-2); max-width: 50ch; }

/* ---------- Contents of the report ---------- */

.contents { list-style: none; margin: 0; padding: 0; }
.contents li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid var(--hair); }
.contents li:last-child { border-bottom: 1px solid var(--hair); }
.contents h3 { font-family: var(--display); font-size: 1.28rem; line-height: 1.2; margin: 0; }
.contents p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--bone-2); max-width: 52ch; }

/* ---------- Engagements ---------- */

.plans { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
/* Three tiers need a wider breakpoint than two: at 760px, three columns leave
   about 20 characters a line and the feature lists turn to confetti. Below it,
   they stack — and the middle card keeps its emphasis through its background,
   not its position. */
@media (min-width: 760px) and (max-width: 1023px) {
    .plans--three { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) { .plans--three { grid-template-columns: 1fr 1fr 1fr; } }

/* Past 1180px the reading column is capped at --column (720px) — right for
   prose, far too narrow for three cards, which would get 240px each. The
   sheet's second track is wider than that cap, so the plans reclaim the space
   the text deliberately leaves empty. The figure is derived, not guessed:
   frame − both page gutters − the annotation margin − the column cap. */
@media (min-width: 1180px) {
    .plans--three {
        margin-right: calc(-1 * (var(--frame) - 2 * var(--gutter) - var(--margin) - var(--column)));
    }
}

/* Room to breathe inside each card. A price and a six-line feature list read
   as a table when they are packed; the space is what makes them a choice. */
/* ---------- The card we recommend ----------
   --void against --panel is a contrast ratio of 1.08:1 — the eye cannot see
   it, so the middle card carried no more weight than its neighbours. It takes
   the ink ground instead: 10.42:1 against the section behind it, and white
   text on it reads at 12.24:1. The same inversion the ink chapters use. */

.plans--three .plan.plan--lead {
    background: var(--pen);
    color: #fff;
    /* The 1px grid gap is the border between cards; a lead card that only
       changed colour would still sit flush. This lifts it out of the row. */
    box-shadow: 0 0 0 1px var(--pen);
    z-index: 1;
}
.plans--three .plan.plan--lead h3,
.plans--three .plan.plan--lead .plan__price,
.plans--three .plan.plan--lead .plan__amount { color: #fff; }

.plans--three .plan.plan--lead .meta { color: var(--chalk); }
.plans--three .plan.plan--lead .plan__cur { color: rgba(255, 255, 255, .62); }
.plans--three .plan.plan--lead .plan__for {
    color: rgba(255, 255, 255, .78);
    border-bottom-color: rgba(255, 255, 255, .22);
}
.plans--three .plan.plan--lead li { color: rgba(255, 255, 255, .88); }
.plans--three .plan.plan--lead li::before { color: var(--chalk); }

/* The filled navy button would vanish on a navy card. */
.plans--three .plan.plan--lead .btn {
    background: #fff;
    border-color: #fff;
    color: var(--pen);
}
.plans--three .plan.plan--lead .btn:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.plans--three .plan { padding: 2.3rem 1.9rem 2.1rem; }
.plans--three .plan h3 { margin: .9rem 0 .45rem; }
.plans--three .plan__price { margin: .5rem 0 .85rem; }
.plans--three .plan__amount { font-size: clamp(2.2rem, 3.2vw, 2.9rem); }
.plans--three .plan__for { margin-bottom: 1.6rem; padding-bottom: 1.4rem; }
.plans--three .plan ul { gap: .95rem; margin-bottom: 2.2rem; }
.plans--three .plan li { line-height: 1.55; }

/* The band below inherits the same width, or it would sit visibly narrower
   than the cards it belongs to. */
@media (min-width: 1180px) {
    .plans--three + .addon {
        margin-right: calc(-1 * (var(--frame) - 2 * var(--gutter) - var(--margin) - var(--column)));
        margin-top: 2.25rem;
        padding: 2rem 1.9rem 2.1rem;
    }
}
.plan { background: var(--void); padding: 1.9rem 1.6rem; display: flex; flex-direction: column; position: relative; }
.plan--lead { background: var(--panel); }
.act--panel .plan { background: var(--panel); }
.act--panel .plan--lead { background: var(--panel-2); }
.plan h3 { font-family: var(--display); font-size: 1.75rem; margin: .8rem 0 .35rem; }
@media (min-width: 820px) { .plan h3 { min-height: 4.2rem; } }
.plan__for { font-size: .89rem; color: var(--bone-2); margin: 0 0 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--hair); }
.plan ul { list-style: none; margin: 0 0 1.9rem; padding: 0; display: grid; gap: .8rem; }
.plan li { font-size: .91rem; line-height: 1.5; color: var(--bone-2); display: grid; grid-template-columns: 1rem 1fr; gap: .5rem; }
.plan li::before { content: "+"; color: var(--chalk-ink); font-family: var(--mono); font-size: .78rem; }
.plan .btn, .plan .textlink { margin-top: auto; align-self: flex-start; }

/* The figure carries the weight; the currency stays quiet beside it. */
.plan__price { margin: .35rem 0 .5rem; display: flex; align-items: baseline; gap: .5rem; }
.plan__amount { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; }
.plan__cur { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-2); }

/* Add-on sits below the pair, visibly a supplement rather than a third plan. */
.addon { margin-top: 1.75rem; padding: 1.6rem 1.6rem 1.75rem; border: 1px solid var(--hair); border-left: 3px solid var(--chalk-ink); background: var(--void); }
.addon__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.addon__price { font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.addon h3 { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; margin-bottom: .6rem; }
.addon p { margin: 0; font-size: .94rem; line-height: 1.62; color: var(--bone-2); max-width: 56ch; }

/* ---------- Comparison ---------- */

.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hair); background: var(--void); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { padding: 1.1rem 1.3rem; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: top; }
.compare thead th { font-family: var(--mono); font-size: .65rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2); }
.compare thead th:last-child { color: var(--chalk-ink); }
.compare tbody td { font-size: .92rem; color: var(--bone-2); }
.compare tbody td:first-child { color: var(--bone); width: 28%; }
.compare tbody td:last-child { color: var(--bone); }
.compare tbody tr:last-child td { border-bottom: 0; }

/* Our column, tinted the way the recommended price card is: the ink difference
   alone was too slight to steer the eye across six rows. */
.compare th:last-child, .compare td:last-child { background: var(--pen-wash); }
/* The row that carries the whole argument. Weighted, not coloured — six rows of
   equal weight told the reader nothing about which one decides. */
.compare__key td { font-weight: 500; }
.compare__key td:first-child { box-shadow: inset 3px 0 0 var(--chalk-ink); }
/* The row we lose. Set apart so it reads as a concession, not an oversight. */
.compare__concede td { color: var(--bone-2); font-style: italic; }
.compare__concede td:last-child { color: var(--bone-2); }

/* ---------- Markets ---------- */

.markets { display: grid; }
.market { padding: 1.9rem 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; }
.market:last-child { border-bottom: 1px solid var(--hair); }
.market h3 { font-family: var(--display); font-size: 1.42rem; line-height: 1.15; margin-bottom: .5rem; }
.market p { margin: 0; font-size: .92rem; line-height: 1.58; color: var(--bone-2); max-width: 50ch; }
.market__tongue { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-ink); margin-bottom: .5rem; }
/* Deliberately not a circle: EN/FR/ES in a round badge is the exact shape of
   the language switcher in the masthead, and readers clicked it expecting the
   site to change language. A plain index number cannot be mistaken for a
   control. */
.market__code { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--chalk-ink); padding-top: .35rem; }
.reachnote { margin: 2rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--bone-2); max-width: 56ch; }
.reachcta { margin-top: 1.75rem; }

/* ---------- Sectors ---------- */

.sectors { display: grid; gap: 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 700px) { .sectors { grid-template-columns: 1fr 1fr; } }
.sector { padding: 1.8rem 1.5rem 1.8rem 0; border-top: 1px solid var(--hair); }
/* The divider was drawn on the cell, so it ran the full height of the taller
   row and stopped nowhere in particular. Inset shadows keep it inside the
   padding, and the grid closes with a rule of its own. */
@media (min-width: 700px) {
    .sector:nth-child(even) { padding-left: 1.5rem; box-shadow: inset 1px 0 0 var(--hair); border-left: 0; }
}
.sectorcta { margin-top: 2rem; }
.sector h3 { font-family: var(--display); font-size: 1.28rem; margin: .7rem 0 .45rem; }
.sector p { margin: 0; font-size: .9rem; line-height: 1.58; color: var(--bone-2); }

/* ---------- Questions ---------- */

.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 2.5rem 1fr 1.8rem; gap: .5rem; align-items: baseline; padding: 1.5rem 0; font-family: var(--display); font-size: 1.28rem; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .toggle { font-family: var(--mono); font-size: 1rem; color: var(--pen); text-align: right; }
.faq details[open] summary .toggle::after { content: "−"; }
.faq details:not([open]) summary .toggle::after { content: "+"; }
.faq p { margin: -.2rem 0 1.8rem 3rem; font-size: .95rem; line-height: 1.68; color: var(--bone-2); max-width: 62ch; }

/* The one answer that carries a list: eleven example journeys. Two columns on
   a wide screen, because a single column of eleven reads as a wall — the point
   of the list is that a visitor spots their own case in two seconds. */
.faq-journeys {
    margin: -1.2rem 0 1.9rem 3rem;
    padding: 0;
    list-style: none;
    max-width: 62ch;
}
.faq-journeys li {
    position: relative;
    padding-left: 1.15rem;
    margin-bottom: .55rem;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--bone-2);
    break-inside: avoid;
}
/* A mono dash rather than a bullet: the whole page is set as a marked-up
   document, and a round bullet is the one shape it never uses. */
.faq-journeys li::before {
    content: "—";
    position: absolute;
    left: 0;
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--chalk-ink);
}
@media (min-width: 760px) {
    .faq-journeys { columns: 2; column-gap: 2.4rem; max-width: 68ch; }
}

/* ---------- Closing ---------- */

.closing__text { font-size: 1.05rem; line-height: 1.6; color: var(--bone-2); max-width: 48ch; margin: 1.9rem 0 2.5rem; }
.closing__note { margin-top: 1.6rem; }

/* ============================================================
   COLOPHON
   ============================================================ */

/* The colophon continues the closing ink chapter rather than dropping back
   to grey — the page ends on one dark block, not two mismatched ones. */
.colophon {
    --void:   #0f1113;
    --bone:   #f2f3f4;
    --bone-2: #aab2b9;
    --bone-3: #7c848b;
    --chalk-ink: #02d1f1;
    --hair:      rgba(242,243,244,.14);
    --hair-firm: rgba(242,243,244,.28);
    background: var(--void); color: var(--bone);
    border-top: 1px solid rgba(242,243,244,.14);
    padding-block: clamp(3.25rem, 6vw, 4.5rem) 2rem;
}
.colophon__grid { display: grid; gap: 2.5rem; }
@media (min-width: 780px) { .colophon__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.75rem; } }
.colophon__blurb { font-size: .9rem; line-height: 1.6; color: var(--bone-3); max-width: 32ch; margin: 1.1rem 0 0; }
.colophon h4 { font-family: var(--mono); font-size: .63rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); margin: 0 0 1.1rem; }
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.colophon a { font-size: .9rem; text-decoration: none; color: var(--bone-2); }
.colophon a:hover { color: var(--chalk-ink); }
.colophon__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* ---------- Pricing cards, second pass ----------
   Fixes measured, not guessed:

   Contrast — the description ran at 3.15:1 on the light cards, under the 4.5:1
   AA floor. The kicker did too. Both move to --bone-2 (7.53:1 on --void).

   Alignment — .plan__for held a variable number of lines, so the hairline under
   it and every list below started at a different height in each column. A
   min-height pins them to one line.

   The lead card no longer carries a 1px ring: it painted over the container's
   own border and read as a height bug rather than as emphasis. */

.plans--three .plan .meta { color: var(--bone-2); }

.plans--three .plan__for {
    min-height: 5.2em;              /* four lines at this size */
    margin-bottom: 1.3rem;
    padding-bottom: 1.3rem;
}

/* The lead card is marked by its ground, which is already 10.42:1 against the
   section. Anything more was decoration that broke the frame. */
.plans--three .plan.plan--lead { box-shadow: none; }

/* Most chosen is the strongest social signal on the page; it was set as a
   second piece of metadata beside the tier name. */
.plan__badge {
    display: inline-block;
    padding: .3rem .6rem;
    background: var(--chalk);
    color: #06333d;
    border-radius: 2px;
    font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
    text-transform: uppercase; font-weight: 500;
}

/* What the jump from $297 to $797 actually buys, per unit. */
.plan__unit {
    margin: -.35rem 0 .55rem;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--chalk-ink);
}
.plans--three .plan--lead .plan__unit { color: var(--chalk); }

/* Each tier reads as the one before it, plus something. */
.plan__stack {
    margin: 0 0 .8rem;
    font-family: var(--mono); font-size: .6rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--bone-2);
}
.plans--three .plan--lead .plan__stack { color: rgba(255,255,255,.66); }

/* ---------- What all three share ----------
   The margin note already said "same delivery on all three". Repeating those
   lines inside every card made three of five bullets pure comparison noise. */

/* This band applies to all three plans, so it must not look like a fourth row
   of the table. Glued to the cards with three equal columns, it read as one
   item per plan — the label said otherwise, but alignment speaks louder than a
   grey caption. It is now detached, on its own ground, and its items run as a
   single sentence that cannot be read in columns. */
.shared {
    margin-top: 1.75rem;
    padding: 1.3rem 1.6rem 1.4rem;
    border: 1px solid var(--hair);
    background: var(--panel);
}
@media (min-width: 1180px) {
    .shared {
        margin-right: calc(-1 * (var(--frame) - 2 * var(--gutter) - var(--margin) - var(--column)));
    }
}
/* Centred, and readable: a caption sitting left reads as the heading of the
   first column. --bone-3 measured 3.15:1 at this size, which is why the label
   lost the argument against the alignment. */
.shared__title {
    display: block; margin-bottom: .8rem; text-align: center;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bone-2);
}
.shared ul {
    list-style: none; margin: 0 auto; padding: 0; max-width: 62rem;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
    column-gap: .85rem; row-gap: .4rem;
}
.shared li { font-size: .92rem; line-height: 1.5; color: var(--bone); }
/* The separator belongs between items, never after the last one — and it is
   decoration, so it stays out of the accessibility tree. */
.shared li + li::before {
    content: "·"; margin-right: .85rem; color: var(--chalk-ink);
}

.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }


/* ---------- Careers hero facts ---------- */

/* The money, at the top. Mono and spaced, so it reads as a specification
   rather than a sales line. */
/* The amount, alone on its line. Four facts strung together in mono broke into
   three ragged lines with one word stranded on the last, and the number — the
   only thing a candidate is looking for — was buried in the middle of them.
   It was already the darkest ink on the page: what made it read as pale was
   size and letter-spacing, not colour, so both change here. */
.herorate {
    margin: 0 0 .35rem;
    font-family: var(--mono); font-size: .95rem; font-weight: 500; letter-spacing: .02em;
    line-height: 1.4; color: var(--bone);
}
.herofacts {
    margin: 0 0 .55rem;
    font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .05em;
    line-height: 1.6; color: var(--bone-2); max-width: 46ch;
}
.herokit { margin: 0 0 2rem; font-size: .93rem; line-height: 1.6; color: var(--bone-2); max-width: 46ch; }


/* Sign out sits in the masthead as a button, not a link: it performs an action
   rather than going somewhere, and a screen reader should say so. Styled to
   match .signin so the pair reads as one row. */
.signout {
    background: none; border: 0; cursor: pointer; padding: 0;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--bone-3);
}
.signout:hover { color: var(--bone); }
.signout:disabled { opacity: .5; cursor: default; }
.drawer .signout { display: block; padding: .85rem 0; text-align: left; width: 100%; }