/* ==========================================================================
   Nubiss v2 — components layered on the existing site theme
   --------------------------------------------------------------------------
   The v2 pages are meant to look like the rest of nubiss.com, so this file
   deliberately does NOT restyle type, colour or buttons. Those come from the
   theme (css/main.css and assets/css/*): DM Serif Display headings in #2a1454,
   DM Sans body, pill buttons in Nubiss pink, 16px cards with a soft shadow.

   What this file adds is the handful of components the theme has no equivalent
   for — the status chip, the capability list, the record strip, the numbered
   workflow — each drawn in the theme's own language.

   Written mobile-first: base rules are the phone layout, min-width queries add
   tablet and desktop on top. Sections are full-bleed, so a wide desktop is used
   rather than boxed in.

   Everything is scoped to `body.v2`, which only the v2 base template sets, so
   none of this can reach the existing pages.

   Signature: every published capability wears its real status — live, limited
   or roadmap. The design is honest by construction.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

body.v2 {
    /* Pulled from the theme so the components track it if it ever changes. */
    --v2-purple: var(--tj-theme-primary, #8750f7);
    --v2-heading: var(--tj-theme-secondary, #2a1454);
    --v2-lavender: #e6e6fa;
    /* The theme's purple on its lavender pill measures 3.77:1, below the 4.5:1
       WCAG AA needs for text this size. This darker purple keeps the same hue
       and reaches 5.5:1, and is used wherever purple text sits on lavender or
       white. */
    --v2-purple-ink: #6d3bc4;
    --v2-pink: #bd0068;
    --v2-pink-deep: #99004f;
    --v2-pink-wash: #fdeef5;
    --v2-navy: #004282;
    --v2-navy-wash: #eef3fa;
    /* The deep navy the brand's gradient bars start and end on. */
    --v2-navy-deep: #17205e;

    /* That bar's grading, run down the margin rather than across it. What is
       actually on screen either side of a picture is a tall, narrow strip, so the
       sweep follows its length: navy at the top, berry through the middle, navy
       again at the foot. Across the strip there is nothing to grade — it is
       forty-odd pixels wide. */
    --v2-brand-mat: linear-gradient(180deg,
        var(--v2-navy-deep) 0%, var(--v2-pink) 50%, var(--v2-navy-deep) 100%);

    --v2-text: #4a4356;
    --v2-muted: #6b6478;
    --v2-line: rgba(0, 0, 0, .08);
    --v2-line-soft: rgba(0, 0, 0, .05);
    --v2-wash: #f7f6fb;
    --v2-white: #fff;

    /* Status */
    --v2-live: #0f6f4c;
    --v2-live-wash: #e8f5ef;
    --v2-limited: #8a5a00;
    --v2-limited-wash: #fdf3e2;
    --v2-roadmap: #5c5668;
    --v2-roadmap-wash: #f0eef5;

    --v2-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Theme geometry */
    --v2-radius: 16px;
    --v2-radius-sm: 10px;
    --v2-shadow: 0 10px 30px rgba(0, 0, 0, .06);

    /* Rhythm — mobile values; desktop step-up is in the media queries below */
    --v2-pad: 20px;
    --v2-section: 56px;
}

@media (min-width: 768px)  { body.v2 { --v2-pad: 40px; --v2-section: 80px; } }
@media (min-width: 1200px) { body.v2 { --v2-pad: 64px; --v2-section: 100px; } }
@media (min-width: 1600px) { body.v2 { --v2-pad: 90px; } }

/* ----------------------------------------------------------- 2. Essentials */

/* overflow-x has to hold a stray wide child in, but `hidden` makes the element
   a scroll container — and an ancestor that is a scroll container is what a
   position: sticky descendant sticks to. Since neither of these actually
   scrolls, everything sticky inside them simply scrolled away instead: the
   header (section 14) on body, and every .split--sticky column (section 3) on
   the theme's `.site-content { overflow: hidden }`.

   `clip` does the same containing job without creating a scroll container, so
   sticky resolves against the viewport as intended. Older browsers keep the
   previous behaviour, which is the layout as it has been all along. */
body.v2 { overflow-x: hidden; }
body.v2 .site-content { overflow: hidden; }
@supports (overflow-x: clip) {
    body.v2 { overflow-x: clip; }
    body.v2 .site-content { overflow: clip visible; }
}
body.v2 img, body.v2 svg { max-width: 100%; height: auto; }
/* Inline icons from v2/partials/icon.html — sized by their own attributes. */
body.v2 .icon { display: block; flex: none; }

/* Links in running copy. Without this they fall through to Bootstrap's
   `a { color: #0d6efd }` and render browser-blue in the middle of a purple and
   pink palette — and the theme's `a:hover { text-decoration: none }` then takes
   the underline away on hover, which is backwards. The underline belongs to the
   link; hover changes the colour and firms the rule up.

   --v2-purple-ink rather than --v2-purple: the theme purple measures 3.77:1 on
   white, below the 4.5:1 AA needs at body size (see the token block above).
   Focus rings come from the global :focus-visible rule below.

   Wrapped in :where() so the selector carries no specificity of its own. This
   is a default for links that nothing else claims — breadcrumbs, card titles,
   the dark panels and the capability directory all style their own links, and
   :where() lets every one of them win without needing an override. */
body.v2 .site-content :where(a:not(.btn):not(.chip):not(.brand):not(.cap-link)) {
    color: var(--v2-purple-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(109, 59, 196, .4);
    text-decoration-color: color-mix(in srgb, var(--v2-purple-ink) 40%, transparent);
    transition: color .18s ease, text-decoration-color .18s ease;
}
body.v2 .site-content :where(a:not(.btn):not(.chip):not(.brand):not(.cap-link)):hover {
    color: var(--v2-pink);
    text-decoration-color: currentColor;
}

/* Visible focus everywhere, including on the dark panels. */
body.v2 :focus-visible {
    outline: 3px solid var(--v2-pink);
    outline-offset: 2px;
    border-radius: 4px;
}
body.v2 .v2-panel--dark :focus-visible,
body.v2 .site-footer :focus-visible { outline-color: #fff; }

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

body.v2 .skip-link {
    position: absolute; left: 12px; top: -100px; z-index: 300;
    background: var(--v2-heading); color: #fff;
    padding: 12px 18px; border-radius: 50px;
    font-weight: 700; text-decoration: none;
    transition: top .15s ease;
}
body.v2 .skip-link:focus { top: 12px; color: #fff; }

/* --------------------------------------------------------------- 3. Layout */

/* Full-bleed: sections span the viewport and only the inner padding grows,
   so nothing is boxed in on a wide desktop. */
body.v2 .shell { width: 100%; padding-inline: var(--v2-pad); }
/* The exception: long-form reading columns, which stay measured. */
body.v2 .shell--narrow { max-width: 860px; margin-inline: auto; }

body.v2 .section { padding-block: var(--v2-section); }
body.v2 .section--tight { padding-block: calc(var(--v2-section) * .65); }
/* For a section that follows a .hero--tight: a full section's head plus a full
   hero's tail reads as a screen of missing content. */
body.v2 .section--snug { padding-top: calc(var(--v2-section) * .35); }
body.v2 .section--wash { background: var(--v2-wash); }
body.v2 .section--edge { border-top: 1px solid var(--v2-line-soft); }

body.v2 .grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
    body.v2 .grid { gap: 24px; }
    body.v2 .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    body.v2 .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    body.v2 .grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/* On wide screens the column count locks to the grid's name, so six cards land
   as 3+3 rather than a ragged 4+2. */
@media (min-width: 1100px) {
    body.v2 .grid--3 { grid-template-columns: repeat(3, 1fr); }
    body.v2 .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

body.v2 .split { display: grid; gap: 32px; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 960px) {
    body.v2 .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
    body.v2 .split--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
@media (min-width: 1400px) { body.v2 .split { gap: 72px; } }

/* The headline column is capped at a readable measure and the record card takes
   whatever is left, so the card still reaches the right edge like every other row
   on the page. Giving the headline the 1fr instead left 540px of hole in the middle
   of the hero on a 1920 screen: the copy simply ran out before the card began. */
@media (min-width: 960px) {
    body.v2 .hero .split--lead {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }
}
/* Only once there is room to spare does the headline stop growing and hand the
   rest of the row to the card. Below this the halves stay even, because a record
   card squeezed under ~400px starts wrapping its own rows. */
@media (min-width: 1400px) {
    body.v2 .hero .split--lead { grid-template-columns: minmax(0, 820px) minmax(0, 1fr); }
}

/* Long flow beside a shorter figure: the figure stays in view while the steps
   scroll past it. */
@media (min-width: 960px) {
    body.v2 .split--sticky > :last-child { position: sticky; top: 92px; }
    /* A shorter column beside a long one sits centred, so the whitespace is
       shared above and below instead of pooling underneath. */
    body.v2 .split--center { align-items: center; }
    /* Section heading pinned while a long right-hand column (FAQ answers)
       scrolls past. */
    body.v2 .split--stickyfirst > :first-child { position: sticky; top: 92px; }
}

/* An illustration beside its text. Two things separate this from a plain
   .split:

   Equal halves. .split--lead's 5fr/6fr is shaped for text beside a list — put
   a picture in it and the two sides read as unequal rather than as a pair.

   The media centres in its own track, not the whole row. .split--center
   centres both columns, which on a tall text column leaves the same pooled
   whitespace it was meant to fix; here the text still starts at the top and
   only the shorter media column floats to the middle of it. */
@media (min-width: 960px) {
    body.v2 .split--media {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        /* The picture is capped at 460px, so neither column can run away from
           the other the way a capability list can. Whichever is shorter sits in
           the middle of the taller one and the slack is shared. */
        align-items: center;
    }
    /* Pushed to the outer edge of its half rather than centred in it, so its
       edge lines up with the section heading above and the slack falls in the
       gutter between the columns, where it reads as breathing room. */
    body.v2 .split--media > .split__media { margin-inline: auto 0; }
    body.v2 .split--media.split--flip > .split__media { margin-inline: 0 auto; }

    /* Consecutive media sections alternate sides, so a page of them does not
       read as the same layout four times. Visual only, and desktop only: the
       DOM keeps the text first, which is both the tab order and what a narrow
       screen stacks. */
    body.v2 .split--flip > :first-child { order: 2; }
    body.v2 .split--flip > :last-child { order: 1; }
}

/* 460px is the cap, not a target width: the illustrations are rendered at
   1024px, so past this the browser is stretching them again. */
body.v2 .split__media { margin: 0 auto; max-width: 460px; }
body.v2 .split__media > img,
body.v2 .split__media > picture > img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--v2-radius);
    border: 1px solid var(--v2-line);
    box-shadow: var(--v2-shadow);
}
body.v2 .split__media figcaption {
    margin-top: 14px;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--v2-muted);
}

body.v2 .stack > * + * { margin-top: 18px; }
body.v2 .stack--lg > * + * { margin-top: 28px; }
@media (min-width: 768px) { body.v2 .stack--lg > * + * { margin-top: 36px; } }

/* ---------------------------------------------------- 4. Heads and labels */

/* Every heading is a sentence, so every heading can strand its last word on a
   line of its own — "Three commitments we hold ourselves / to." Balancing
   evens the lines out instead. Headings only: `balance` stops working past a
   handful of lines, and body copy wants `pretty`, which leaves the line
   lengths alone and only prevents the final short line. */
body.v2 h1, body.v2 h2, body.v2 h3, body.v2 h4 { text-wrap: balance; }
body.v2 p, body.v2 li, body.v2 dd, body.v2 figcaption { text-wrap: pretty; }

/* The theme sizes h2 at a fixed 45px and h3 at 30px, which is a wide sentence
   on a laptop and an overflowing one on a tablet. The hero h1 was already
   given a clamp; these give the rest of the page the same treatment. */
body.v2 .section h2,
body.v2 .section-head h2,
body.v2 .panel h2 { font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.6rem); line-height: 1.15; }
body.v2 .card h3,
body.v2 .panel h3,
body.v2 .section h3 { font-size: clamp(1.25rem, 1.1rem + .55vw, 1.6rem); line-height: 1.25; }

/* The theme's lavender pill label. The theme only defines it under
   `.section-header.style-4`, so the same values are restated here to avoid
   wrapping every heading in extra markup. */
body.v2 .eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    background: var(--v2-lavender);
    color: var(--v2-purple-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    border: 1px solid rgba(129, 76, 236, .2);
    border-radius: 50px;
    padding: 5px 12px;
    line-height: 1.8;
}

/* A display heading reads comfortably out to about fifty characters, which at
   this size is roughly 1000px. At 820px one-line headlines were being broken in
   half — "Data cleaning is where trial budgets go to die." needs 834px and was
   missing it by fourteen. The lede underneath is body copy, so it keeps the
   shorter measure that 820 was really protecting. */
body.v2 .section-head { max-width: 1000px; margin-bottom: 34px; }
@media (min-width: 768px) { body.v2 .section-head { margin-bottom: 48px; } }
body.v2 .section-head > p { max-width: 66ch; }
body.v2 .section-head > p:last-child { margin-bottom: 0; }

/* The second head in a problem-then-solution section, which used to carry these
   two values as an inline style on all five solution pages. */
body.v2 .section-head--mid { margin-top: 72px; }

body.v2 .lede { font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem); line-height: 1.6; }
body.v2 .note { font-size: .89rem; line-height: 1.6; color: var(--v2-muted); }

/* ------------------------------------------------------ 5. Status chips —
   the signature element. Every published capability carries its real status. */

body.v2 .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--v2-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 50px;
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: 2px;
    line-height: 1.5;
}
body.v2 .chip::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: none;
}
body.v2 .chip--live    { color: var(--v2-live);    background: var(--v2-live-wash);    border-color: #bfe0d1; }
body.v2 .chip--limited { color: var(--v2-limited); background: var(--v2-limited-wash); border-color: #ecd7ab; }
body.v2 .chip--roadmap { color: var(--v2-roadmap); background: var(--v2-roadmap-wash); border-color: var(--v2-line); }
body.v2 .chip--region  { color: var(--v2-purple-ink);  background: var(--v2-lavender);     border-color: rgba(129, 76, 236, .2); }
body.v2 .chip--region::before { display: none; }

body.v2 .chip-key {
    display: flex; flex-wrap: wrap; gap: 10px 22px;
    padding: 16px 20px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-white);
    box-shadow: var(--v2-shadow);
}
body.v2 .chip-key div { display: flex; align-items: center; gap: 9px; font-size: .87rem; color: var(--v2-muted); }

/* -------------------------------------------------- 6. Capability listings */

/* A capability is a claim plus its status. The two are never separated, which
   is what keeps the site honest as copy is edited later. */
body.v2 .caps { list-style: none; margin: 0; padding: 0; }
body.v2 .caps > li { padding: 16px 0; border-top: 1px solid var(--v2-line-soft); }
body.v2 .caps > li:first-child { border-top: 0; padding-top: 0; }
body.v2 .caps > li:last-child { padding-bottom: 0; }
body.v2 .cap-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 5px;
}
body.v2 .cap-head strong { font-size: 1.02rem; font-weight: 700; color: var(--v2-heading); }
body.v2 .caps p { margin: 0; font-size: .95rem; }

/* .caps--links — the same list used as a directory, where each row is a link
   to the product rather than a claim about it. A row of underlined product
   names reads as footnotes; the whole row becomes the target instead, with an
   icon to anchor it and an arrow to say where it goes. */
body.v2 .caps--links > li { padding: 8px 0; }
body.v2 .caps--links > li:first-child { padding-top: 0; }
body.v2 .caps--links > li:last-child { padding-bottom: 0; }
body.v2 .site-content .cap-link {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px;
    margin: 0 -12px;
    border-radius: var(--v2-radius-sm);
    color: var(--v2-heading);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}
body.v2 .site-content .cap-link:hover { background: var(--v2-wash); color: var(--v2-pink); }
body.v2 .panel--wash .cap-link:hover { background: var(--v2-white); }
body.v2 .cap-icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--v2-lavender);
    color: var(--v2-purple-ink);
    transition: background-color .18s ease, color .18s ease;
}
body.v2 .cap-link:hover .cap-icon { background: var(--v2-pink-wash); color: var(--v2-pink-deep); }
/* Inline, so a status chip can sit on the same line as the name; .cap-note is
   what puts the description on the next one. */
body.v2 .cap-link strong { font-size: 1.02rem; font-weight: 700; color: inherit; }
body.v2 .cap-link .cap-note {
    display: block;
    margin-top: 2px;
    font-size: .93rem; line-height: 1.5;
    color: var(--v2-muted);
}
body.v2 .cap-link .chip { margin-left: 8px; vertical-align: 2px; }
body.v2 .cap-link .arrow { color: var(--v2-purple-ink); transition: transform .18s ease, color .18s ease; }
body.v2 .cap-link:hover .arrow { color: var(--v2-pink); transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
    body.v2 .cap-link, body.v2 .cap-icon, body.v2 .cap-link .arrow { transition: none; }
    body.v2 .cap-link:hover .arrow { transform: none; }
}

body.v2 .ticks { list-style: none; margin: 0; padding: 0; }
body.v2 .ticks li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: .96rem; }
body.v2 .ticks li:last-child { margin-bottom: 0; }
body.v2 .ticks li::before {
    content: "";
    position: absolute; left: 2px; top: .5em;
    width: 11px; height: 6px;
    border-left: 2px solid var(--v2-pink);
    border-bottom: 2px solid var(--v2-pink);
    transform: rotate(-45deg);
}

/* Explicit "we do not do this" list. Being able to say so is a feature. */
body.v2 .nots { list-style: none; margin: 0; padding: 0; }
body.v2 .nots li {
    position: relative; padding-left: 26px; margin-bottom: 10px;
    font-size: .93rem; color: var(--v2-muted);
}
body.v2 .nots li:last-child { margin-bottom: 0; }
body.v2 .nots li::before {
    content: ""; position: absolute; left: 3px; top: .68em;
    width: 12px; height: 2px; background: rgba(0, 0, 0, .18);
}

/* ------------------------------------------------------------- 7. Surfaces */

/* Matches the card treatment used on the current homepage. */
body.v2 .card {
    background: var(--v2-white);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
@media (min-width: 768px) { body.v2 .card { padding: 28px; } }
body.v2 .card > :last-child { margin-top: auto; }

body.v2 .card--solution {
    border-top: 3px solid var(--v2-purple);
    transition: transform .2s ease, box-shadow .2s ease;
}
body.v2 .card--solution.is-pink { border-top-color: var(--v2-pink); }
body.v2 .card--solution:hover,
body.v2 .card--solution:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .1);
}

body.v2 .panel {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow);
    padding: 24px;
    background: var(--v2-white);
}
@media (min-width: 768px) { body.v2 .panel { padding: 32px; } }
body.v2 .panel--wash { background: var(--v2-wash); box-shadow: none; }

body.v2 .panel--dark, body.v2 .v2-panel--dark {
    background: linear-gradient(120deg, #2a1454 0%, #3d1d6b 100%);
    border-color: transparent;
    box-shadow: var(--v2-shadow);
}
body.v2 .panel--dark h2,
body.v2 .panel--dark h3,
body.v2 .panel--dark strong { color: #fff; }
body.v2 .panel--dark p { color: #dcd4ea; }
body.v2 .panel--dark a:not(.btn) { color: #fff; }

body.v2 .panel--flag {
    border-left: 4px solid var(--v2-pink);
    background: var(--v2-pink-wash);
    border-color: #f0cfe0;
    box-shadow: none;
}
body.v2 .panel--flag h3 { color: var(--v2-pink-deep); }

body.v2 .panel--quiet {
    border-style: dashed;
    background: var(--v2-wash);
    box-shadow: none;
}

/* -------------------------------------------------------------- 8. Buttons */

/* CTAs use the theme's own .btn.tj-btn-primary. These are the extra variants
   the theme does not provide, drawn to the same pill geometry. */
body.v2 .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 419px) {
    body.v2 .btn-row > .btn:not(.btn--quiet) { width: 100%; justify-content: center; }
}

body.v2 .btn--ghost {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 16px 33px;
    border: 2px solid rgba(42, 20, 84, .18);
    border-radius: 50px;
    background: transparent;
    color: var(--v2-heading);
    font-size: 15px; font-weight: 700; line-height: 1.2;
    text-decoration: none; text-transform: capitalize;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
body.v2 .btn--ghost:hover {
    border-color: var(--v2-purple); background: var(--v2-lavender); color: var(--v2-purple-ink);
}

body.v2 .btn--onDark {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 17px 35px; border: 0; border-radius: 50px;
    background: #fff; color: var(--v2-heading);
    font-size: 15px; font-weight: 700; line-height: 1.2;
    text-decoration: none; text-transform: capitalize;
    transition: background-color .18s ease, color .18s ease;
}
body.v2 .btn--onDark:hover { background: var(--v2-lavender); color: var(--v2-purple-ink); }

body.v2 .btn--quiet {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 0; background: none; border: 0;
    color: var(--v2-purple-ink);
    font-size: .96rem; font-weight: 700; text-decoration: none;
}
body.v2 .btn--quiet:hover { color: var(--v2-pink); }

body.v2 .arrow { transition: transform .18s ease; display: inline-block; }
body.v2 .btn:hover .arrow, body.v2 a:hover > .arrow { transform: translateX(4px); }

/* ---------------------------------------------------- 9. The record strip
   The hero device: a synthetic clinical record. It illustrates the data model
   and is never a screenshot of the product. */

body.v2 .record {
    font-family: var(--v2-mono);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-white);
    overflow: hidden;
    box-shadow: var(--v2-shadow);
}
body.v2 .record__bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px 12px;
    padding: 13px 18px;
    background: linear-gradient(120deg, #2a1454 0%, #3d1d6b 100%);
    color: #cdc2e2;
    font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
}
body.v2 .record__bar b { color: #fff; font-weight: 500; }
body.v2 .record__rows { display: grid; }

/* On a phone the tag drops under the value rather than squeezing the row. */
body.v2 .record__row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 3px 12px;
    align-items: baseline;
    padding: 12px 18px;
    border-top: 1px solid var(--v2-line-soft);
    font-size: .78rem;
}
body.v2 .record__row:first-child { border-top: 0; }
body.v2 .record__t { color: var(--v2-muted); font-size: .72rem; }
body.v2 .record__v { color: var(--v2-heading); overflow-wrap: anywhere; }
body.v2 .record__v em { font-style: normal; color: var(--v2-pink); }
body.v2 .record__tag {
    grid-column: 2;
    font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--v2-muted);
}
@media (min-width: 480px) {
    body.v2 .record__row { grid-template-columns: 90px minmax(0, 1fr) auto; font-size: .81rem; }
    body.v2 .record__tag { grid-column: auto; white-space: nowrap; }
}
body.v2 .record__foot {
    padding: 13px 18px; margin: 0;
    border-top: 1px solid var(--v2-line);
    background: var(--v2-wash);
    font-size: .72rem; color: var(--v2-muted);
}

/* --------------------------------------------------- 10. Numbered workflow
   Numbering appears ONLY where the content is genuinely ordered — a clinical
   or study workflow that has to happen in sequence. */

body.v2 .flow { counter-reset: step; list-style: none; margin: 0; padding: 0; }
body.v2 .flow > li { counter-increment: step; position: relative; padding: 0 0 26px 56px; }
body.v2 .flow > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; left: 0; top: -1px;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    font-family: var(--v2-mono); font-size: .78rem; font-weight: 500;
    color: var(--v2-purple-ink);
    background: var(--v2-lavender);
    border-radius: 50%;
}
body.v2 .flow > li::after {
    content: ""; position: absolute; left: 19px; top: 45px; bottom: 4px;
    width: 2px; background: var(--v2-line-soft);
}
body.v2 .flow > li:last-child { padding-bottom: 0; }
body.v2 .flow > li:last-child::after { display: none; }
body.v2 .flow h3 { font-size: 1.15rem; margin-bottom: .3em; }
body.v2 .flow p { margin: 0; font-size: .96rem; }
@media (min-width: 768px) { body.v2 .flow > li { padding-left: 64px; padding-bottom: 32px; } }

/* The same steps read left to right when they have the full width and nothing to
   sit beside — which is what the workflow sections became once their record card
   moved up into the hero. Below 960px it falls back to the vertical list, where a
   stepper would be unreadable.

   Each step is a card rather than a naked column. Across a full-bleed row the
   bare version had nothing holding a step together: five ragged blocks of small
   text, uneven in height, with the last lines of the tallest one landing on
   whatever the section put underneath. The card gives the step an edge, makes
   every step the same height, and lets the rail read as a rail — it now runs in
   the gutter between cards instead of underlining the copy. */
@media (min-width: 960px) {
    body.v2 .flow--row {
        display: grid;
        grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr));
        gap: 16px;
        align-items: stretch;
    }
    body.v2 .flow--row > li {
        padding: 50px 18px 20px;
        background: var(--v2-white);
        border: 1px solid var(--v2-line);
        border-radius: var(--v2-radius);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    body.v2 .flow--row > li:hover {
        transform: translateY(-3px);
        border-color: rgba(129, 76, 236, .22);
        box-shadow: var(--v2-shadow);
    }
    body.v2 .flow--row > li::before {
        left: 18px; top: 16px;
        width: 34px; height: 34px;
    }
    /* The rail crosses the gutter at the markers' midline and stops at the last
       card — the join between steps, not a line under the text. */
    body.v2 .flow--row > li::after {
        left: 100%; right: auto; top: 32px;
        bottom: auto; width: 16px; height: 2px;
        background: var(--v2-line);
    }
    body.v2 .flow--row h3 { font-size: 1.02rem; }
    body.v2 .flow--row p { font-size: .92rem; }
}
@media (min-width: 1200px) {
    body.v2 .flow--row { gap: 20px; }
    body.v2 .flow--row > li { padding: 54px 22px 24px; }
    body.v2 .flow--row > li::before { left: 22px; }
    body.v2 .flow--row > li::after { width: 20px; }
    body.v2 .flow--row h3 { font-size: 1.05rem; }
    body.v2 .flow--row p { font-size: .94rem; }
}

/* A stepper is a figure, not a paragraph — whatever follows it needs room. */
body.v2 .flow + .panel,
body.v2 .flow + .chip-key,
body.v2 .flow + .note { margin-top: 40px; }

/* ------------------------------------------------------------- 11. Tables */

body.v2 .table-scroll {
    overflow-x: auto;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow);
    background: var(--v2-white);
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
body.v2 table.data { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem; margin: 0; }
body.v2 table.data caption {
    caption-side: top; text-align: left;
    padding: 18px 20px; font-size: .88rem; color: var(--v2-muted);
    border-bottom: 1px solid var(--v2-line-soft);
}
body.v2 table.data th, body.v2 table.data td {
    padding: 14px 20px; text-align: left; vertical-align: top;
    border-top: 1px solid var(--v2-line-soft);
}
body.v2 table.data thead th {
    border-top: 0; background: var(--v2-wash); color: var(--v2-heading);
    font-family: var(--v2-mono); font-size: .72rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
body.v2 table.data tbody th { font-weight: 700; color: var(--v2-heading); }
body.v2 table.data tr.rowgroup th {
    background: var(--v2-lavender); color: var(--v2-purple-ink);
    font-family: var(--v2-mono); font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase;
}
body.v2 .yes { color: var(--v2-live); font-weight: 700; }
body.v2 .no { color: var(--v2-muted); }

/* Evidence-level badges, carried over from the Nubiss HBOT one-pager. */
body.v2 .grade {
    display: inline-block; font-family: var(--v2-mono);
    font-size: .68rem; font-weight: 500; letter-spacing: .06em;
    padding: 3px 9px; border-radius: 50px; white-space: nowrap;
}
body.v2 .grade--b { background: var(--v2-heading); color: #fff; }
body.v2 .grade--c { background: var(--v2-lavender); color: var(--v2-purple-ink); border: 1px solid rgba(129, 76, 236, .2); }

/* ------------------------------------------------------------ 12. Metrics */

body.v2 .stats {
    display: grid; gap: 1px; margin: 0;
    background: var(--v2-line);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    overflow: hidden;
    grid-template-columns: 1fr;
}
@media (min-width: 560px) { body.v2 .stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
body.v2 .stats div { background: var(--v2-white); padding: 20px; }
body.v2 .stats dt {
    font-family: var(--v2-mono); font-size: .7rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--v2-muted); margin-bottom: 8px;
}
body.v2 .stats dd { margin: 0; font-size: .97rem; color: var(--v2-heading); font-weight: 500; line-height: 1.45; }
/* When the pair sits above a capability list rather than under a lede. */
body.v2 .stats + .caps { margin-top: 26px; }

body.v2 .pillars { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
body.v2 .pillar {
    border: 1px solid var(--v2-line); border-radius: var(--v2-radius-sm);
    padding: 15px 17px; background: var(--v2-white);
}
body.v2 .pillar b { display: block; font-size: .96rem; color: var(--v2-heading); }
body.v2 .pillar span { font-family: var(--v2-mono); font-size: .7rem; color: var(--v2-muted); letter-spacing: .05em; }

/* --------------------------------------------------------------- 13. Hero */

body.v2 .hero {
    padding-top: 36px;
    padding-bottom: var(--v2-section);
    background: linear-gradient(180deg, #f3effc 0%, rgba(243, 239, 252, 0) 70%), #fff;
}
@media (min-width: 768px) { body.v2 .hero { padding-top: 60px; } }
body.v2 .hero .lede { max-width: 640px; }
body.v2 .hero .btn-row { margin-top: 28px; }
body.v2 .hero--page { padding-bottom: calc(var(--v2-section) * .8); }

/* The theme sets h1 at 65px, which suits a four-word headline. These pages
   lead with a full sentence, so the hero headline is capped lower and allowed
   to scale down on small screens. */
body.v2 .hero h1 {
    font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: .3em;
}
body.v2 .hero--page h1 { font-size: clamp(1.95rem, 1.3rem + 2.2vw, 3rem); }

/* Heroes with no second column. Without this the text hugs the left edge of a
   wide screen with nothing opposite it, which reads as a broken layout rather
   than a deliberate one. */
body.v2 .hero--simple .shell { max-width: 1200px; margin-inline: auto; }
body.v2 .hero--simple h1 { max-width: none; text-wrap: balance; }
body.v2 .hero--simple .lede { max-width: 62ch; }
/* 22ch measured 459px, but most of these headings sit in split columns 613-674px
   wide — so the cap was not protecting the measure, it was adding a third line.
   Where a heading has a column, the column is the measure. */
body.v2 .section h2 { max-width: 34ch; }
body.v2 .split h2 { max-width: none; }
body.v2 .section-head h2, body.v2 .panel h2, body.v2 .card h3 { max-width: none; }

body.v2 .crumbs {
    font-family: var(--v2-mono); font-size: .74rem;
    letter-spacing: .05em; color: var(--v2-muted); margin-bottom: 16px;
}
body.v2 .crumbs a { color: var(--v2-muted); text-decoration: none; }
body.v2 .crumbs a:hover { color: var(--v2-pink); text-decoration: underline; }
body.v2 .crumbs span { padding: 0 7px; opacity: .5; }

/* -------------------------------------------------------------- 14. Header */

body.v2 .site-header {
    position: sticky; top: 0; z-index: 200;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--v2-line-soft);
}
body.v2 .site-header__inner { display: flex; align-items: center; gap: 14px; min-height: 58px; }
@media (min-width: 1100px) { body.v2 .site-header__inner { min-height: 66px; gap: 20px; } }

/* The wordmark is a wide lockup — mark plus tagline, better than 5:1 — so it
   reads far larger than its height suggests. Sized against the bar rather than
   against the other logos on the site. */
body.v2 .brand { display: flex; align-items: center; flex: none; color: var(--v2-heading); text-decoration: none; }
body.v2 .brand img { height: 22px; width: auto; }
@media (min-width: 768px)  { body.v2 .brand img { height: 26px; } }
@media (min-width: 1400px) { body.v2 .brand img { height: 28px; } }

/* Mobile first: the menu drops from the header bar. */
body.v2 .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--v2-line);
    box-shadow: var(--v2-shadow);
    padding: 8px var(--v2-pad) 22px;
    max-height: calc(100vh - 58px);
    overflow-y: auto;
}
body.v2 .nav.is-open { display: block; }
body.v2 .nav ul { list-style: none; margin: 0; padding: 0; }
body.v2 .nav > ul > li { border-top: 1px solid var(--v2-line-soft); }
body.v2 .nav > ul > li:first-child { border-top: 0; }
body.v2 .nav a {
    display: block; padding: 13px 4px;
    font-size: 1rem; font-weight: 700;
    color: var(--v2-heading); text-decoration: none;
}
body.v2 .nav a:hover { color: var(--v2-purple-ink); }
body.v2 .nav a[aria-current] { color: var(--v2-purple-ink); }

/* The submenu is simply always open on a phone — no tap traps. */
body.v2 .nav .menu { padding: 0 0 8px 14px; margin-left: 4px; border-left: 2px solid var(--v2-line-soft); }
body.v2 .nav .menu a { padding: 10px 10px; font-size: .94rem; font-weight: 700; }
body.v2 .nav .menu a span {
    display: block; font-weight: 400; font-size: .84rem;
    color: var(--v2-muted); margin-top: 2px;
}
body.v2 .nav .mobile-cta { display: block; margin-top: 16px; }
body.v2 .nav .mobile-cta .btn { width: 100%; justify-content: center; }

body.v2 .nav-toggle {
    display: flex; margin-left: auto; flex: none;
    width: 46px; height: 46px;
    align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--v2-line);
    border-radius: 50px; cursor: pointer;
}
body.v2 .nav-toggle span { display: block; position: relative; width: 19px; height: 2px; background: var(--v2-pink); }
body.v2 .nav-toggle span::before, body.v2 .nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: var(--v2-pink);
}
body.v2 .nav-toggle span::before { top: -6px; }
body.v2 .nav-toggle span::after { top: 6px; }

body.v2 .header-cta { display: none; }

/* Desktop: horizontal nav with a hover/focus dropdown. */
@media (min-width: 1100px) {
    body.v2 .nav-toggle { display: none; }
    body.v2 .header-cta { display: block; flex: none; }
    body.v2 .nav {
        display: block; position: static; margin-left: auto;
        padding: 0; border: 0; box-shadow: none;
        max-height: none; overflow: visible; background: none;
    }
    body.v2 .nav > ul { display: flex; align-items: center; gap: 4px; }
    body.v2 .nav > ul > li { border-top: 0; position: relative; }
    body.v2 .nav > ul > li > a { padding: 8px 13px; font-size: .94rem; border-radius: 50px; }
    body.v2 .nav > ul > li > a:hover { background: var(--v2-wash); }
    body.v2 .nav .mobile-cta { display: none; }

    /* The theme's pill button is sized for a hero, not a header bar. */
    body.v2 .header-cta .btn { padding: 12px 26px; font-size: 14px; }

    body.v2 .nav .menu {
        position: absolute; top: calc(100% + 8px); left: 0;
        min-width: 310px; padding: 10px; margin: 0;
        background: #fff;
        border: 1px solid var(--v2-line); border-radius: var(--v2-radius);
        box-shadow: 0 18px 44px rgba(0, 0, 0, .1);
        opacity: 0; visibility: hidden; transform: translateY(-4px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
    }
    body.v2 .nav li.has-menu:hover .menu,
    body.v2 .nav li.has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
    body.v2 .nav .menu a { border-radius: var(--v2-radius-sm); }
    body.v2 .nav .menu a:hover { background: var(--v2-lavender); }
}

/* -------------------------------------------------------------- 15. Footer */

body.v2 .site-footer {
    background: #140c1c;
    color: #a99fb8;
    padding-block: 48px 30px;
    font-size: .93rem;
}
@media (min-width: 768px) { body.v2 .site-footer { padding-block: 70px 36px; } }
body.v2 .site-footer h2 {
    font-family: var(--v2-mono); font-size: .72rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: #8177949c; color: #877994;
    margin-bottom: 14px;
}
body.v2 .site-footer ul { list-style: none; margin: 0; padding: 0; }
body.v2 .site-footer li { margin-bottom: 10px; }
body.v2 .site-footer p { color: #a99fb8; }
body.v2 .site-footer a { color: #ddd5e6; text-decoration: none; }
body.v2 .site-footer a:hover { color: #fff; text-decoration: underline; }
body.v2 .site-footer img { height: 32px; width: auto; margin-bottom: 16px; }
body.v2 .footer-grid {
    display: grid; gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
body.v2 .footer-brand { max-width: 260px; }
body.v2 .footer-brand p { margin: 0 0 12px; }
body.v2 .footer-line {
    font-family: var(--tj-ff-heading, serif);
    font-size: 1.12rem; line-height: 1.35;
    color: #efe9f5;
    text-wrap: balance;
}
body.v2 .footer-story { display: inline-block; font-weight: 600; }
body.v2 .footer-story .arrow { display: inline-block; transition: transform .18s ease; }
body.v2 .footer-story:hover .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
    body.v2 .footer-story .arrow { transition: none; }
    body.v2 .footer-story:hover .arrow { transform: none; }
}

body.v2 .footer-base {
    display: flex; flex-wrap: wrap; gap: 12px 28px;
    justify-content: space-between; align-items: center;
    padding-top: 24px; font-size: .85rem; color: #877994;
}
body.v2 .footer-base p { margin: 0; color: #877994; }

/* ------------------------------------------------------- 16. Consent banner
   The slide-up banner v2 originally used has been replaced by the site's own
   cookie dialog; it is drawn in section 27. */

/* ---------------------------------------------------------- 17. Form panel */

body.v2 .form-panel {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow);
    padding: 24px; background: #fff;
}
@media (min-width: 768px) { body.v2 .form-panel { padding: 32px; } }

/* The HubSpot embed brings its own markup. These make it legible and keep its
   controls large enough to hit, without fighting its internals. */
body.v2 .form-panel input[type="text"],
body.v2 .form-panel input[type="email"],
body.v2 .form-panel input[type="tel"],
body.v2 .form-panel select,
body.v2 .form-panel textarea {
    width: 100% !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    padding: 13px 16px !important;
    color: var(--v2-heading) !important;
    background: #fff !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-radius-sm) !important;
}
body.v2 .form-panel label {
    font-size: .92rem !important; font-weight: 700 !important; color: var(--v2-heading) !important;
}
body.v2 .form-panel .hs-button {
    background: var(--v2-pink) !important; border: 0 !important; color: #fff !important;
    font-family: inherit !important; font-weight: 700 !important;
    padding: 17px 35px !important; border-radius: 50px !important; cursor: pointer;
}
body.v2 .form-panel .hs-error-msg,
body.v2 .form-panel .hs-error-msgs label { color: #b3261e !important; font-weight: 500 !important; }

/* -------------------------------------------------------------- 18. People

   The tile is 2:3 because the photographs are. All four leadership portraits sit
   between 0.667 and 0.702 — two of them exactly 2:3 — so a portrait tile crops
   essentially nothing, and what little `cover` does trim comes off the sides.

   It used to be 1 / 1. Squaring a 2:3 portrait throws away a third of its height
   from the middle outwards, which took about 16% off the top of every frame and
   cut the crown of every head. `object-position: center top` is the guard against
   that returning: a photograph taller than the tile now loses its feet instead.

   The pill is deliberate, and the one place on the site that departs from the 16px
   --v2-radius every card and panel uses. It is the treatment the current site
   already gives these same four photographs, and team portraits are the
   conventional place for a radius system to make an exception. */

/* Four equal columns — a quarter each, the col-3 of a twelve-column grid — so
   the row spans the full width instead of stopping short and leaving a hole
   after the last person.

   The photograph inside is capped rather than filling its column. A portrait
   tile is half as tall again as the square it replaced, and at a full quarter of
   a wide shell it came out 337x506, which had the pictures dominating the
   section they illustrate. Capping keeps them near the 205x300 the current site
   uses, and because every column is the same width the leftover is shared
   evenly down the row rather than pooling at one end. */
body.v2 .people {
    display: grid;
    gap: 26px 28px;
    /* Two across until there is room for four. auto-fit would keep four in a
       row down to about 150px each, which is too narrow for a portrait. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
    body.v2 .people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body.v2 .person { max-width: 240px; }
body.v2 .person img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center top;
    border-radius: 999px;
    background: var(--v2-wash);
    margin-bottom: 14px;
}
body.v2 .person b { display: block; color: var(--v2-heading); font-size: 1.02rem; }
body.v2 .person span {
    font-family: var(--v2-mono); font-size: .74rem; letter-spacing: .05em;
    color: var(--v2-muted); text-transform: uppercase;
}

/* ------------------------------------------------------------- 19. Figures */

body.v2 .figure { margin: 0; }
body.v2 .figure figcaption { margin-top: 14px; font-size: .86rem; color: var(--v2-muted); line-height: 1.55; }

/* Storyboard panel as the hero visual. The radius clips the illustration's own
   frame corners, so the tiles need no further cropping. */
body.v2 .hero-figure { margin: 0; }
body.v2 .hero-figure img {
    width: 100%;
    border-radius: var(--v2-radius);
    border: 1px solid var(--v2-line);
    box-shadow: var(--v2-shadow);
    display: block;
}
body.v2 .hero-figure figcaption {
    margin-top: 12px;
    font-size: .85rem;
    color: var(--v2-muted);
}
/* Capped at 440px, not 520. The storyboard tiles are rendered at 1024px and
   each panel holds about 460px of drawn detail, so past this the browser is
   stretching the illustration rather than showing it. */
@media (min-width: 960px) {
    body.v2 .hero-figure { max-width: 440px; justify-self: end; width: 100%; }
}

/* ------------------------------------------------- 19b. Story strips
   The problem told as a three-panel comic: image, mono step number, one-line
   caption. Replaces the prose paragraphs it stands in for. */

body.v2 .story {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    body.v2 .story { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}
/* The strip spans the row, flush with every other block on the page — a strip that
   stopped even 20px short read as a misalignment against the card grids beside it.
   The guard is set high enough never to engage on a normal desktop; it exists only
   so an ultra-wide monitor does not stretch the 1024px tiles past what they carry. */
@media (min-width: 2200px) { body.v2 .story { max-width: 2000px; } }
/* Each panel is a card, matching the solution cards on the home page: picture
   flush to the top edge, words in a padded body underneath. */
body.v2 .story figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--v2-white);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow);
    overflow: hidden;
}
/* `contain`, not `cover`. The tiles are square and the home cards crop them to
   16:10, which cuts a third off an illustration drawn as a whole scene. Letting
   the picture sit whole inside a shorter box shows all of it and takes less of
   the card, leaving the words the room to be read. The wash behind it is close
   to the artwork's own cream ground, so the box reads as one surface. */
body.v2 .story img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: contain;
    background: var(--v2-brand-mat);
    border-bottom: 1px solid var(--v2-line-soft);
}
/* Step number and title on one line, the explanation under it. A picture with a
   single line beneath it states a fact; the sentence is what tells the story. */
body.v2 .story figcaption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    padding: 20px;
    color: var(--v2-text);
}
@media (min-width: 768px) { body.v2 .story figcaption { padding: 24px; } }
body.v2 .story figcaption b {
    font-family: var(--v2-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--v2-purple-ink);
    line-height: 1.75;
}
body.v2 .story figcaption strong {
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--v2-pink);
}
body.v2 .story figcaption p {
    grid-column: 2;
    margin: 0;
    font-size: .91rem;
    line-height: 1.55;
    color: var(--v2-muted);
}
/* On a phone the strip is a vertical comic, one card per row. */
@media (max-width: 639px) {
    body.v2 .story figure { max-width: 420px; margin-inline: auto; }
}

/* ------------------------------------------------- 19c. Card cover images
   The old site's card-media pattern: an image bleeding to the card's top
   edges, content below. */

body.v2 .card--media { padding: 0; overflow: hidden; }
body.v2 .card--media > picture { display: block; }
/* `contain` on a 5:4 box, not `cover` on 16:10. The tiles are square scenes drawn
   whole; cropping them to 16:10 threw away a third of each one, usually the part
   that carried the point. The wash behind fills what the picture does not, and the
   shorter box leaves the card's words more of the room. */
body.v2 .card--media > img,
body.v2 .card--media > picture > img {
    width: 100%;
    display: block;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--v2-line-soft);
    aspect-ratio: 5 / 4;
    object-fit: contain;
    background: var(--v2-brand-mat);
    transform: scale(1);
    transition: transform 300ms ease;
}
body.v2 .card--media:hover img,
body.v2 .card--media:focus-within img { transform: scale(1.04); }
body.v2 .card--media > .card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
@media (min-width: 768px) { body.v2 .card--media > .card__body { padding: 28px; } }
body.v2 .card--media > .card__body > :last-child { margin-top: auto; }
/* The card's top accent rule sits above the image. */
body.v2 .card--media.card--solution { padding-top: 0; }

/* Small panel beside text in an overview block. */
body.v2 .figure--inline img {
    width: 100%;
    max-width: 380px;
    border-radius: var(--v2-radius);
    border: 1px solid var(--v2-line);
    box-shadow: var(--v2-shadow);
    display: block;
}

/* ------------------------------------------------- 19d. FAQ accordions
   Native details/summary: keyboard accessible, no JS, and the honest answers
   stay in the page — just not all open at once. */

body.v2 details.faq {
    border-top: 1px solid var(--v2-line-soft);
}
body.v2 details.faq:last-of-type { border-bottom: 1px solid var(--v2-line-soft); }
body.v2 details.faq summary {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 4px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--v2-heading);
}
body.v2 details.faq summary::-webkit-details-marker { display: none; }
body.v2 details.faq summary::before {
    content: "";
    flex: none;
    width: 9px; height: 9px;
    margin-top: 2px;
    border-right: 2px solid var(--v2-purple-ink);
    border-bottom: 2px solid var(--v2-purple-ink);
    transform: rotate(-45deg);
    transition: transform .18s ease;
    align-self: center;
}
body.v2 details.faq[open] summary::before { transform: rotate(45deg); }
body.v2 details.faq summary:hover { color: var(--v2-purple-ink); }
body.v2 details.faq > div {
    padding: 0 4px 20px 27px;
}
body.v2 details.faq > div p { margin: 0 0 .8em; font-size: .96rem; }
body.v2 details.faq > div p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    body.v2 details.faq summary::before { transition: none; }
}

/* ------------------------------------------------------- 20. Reduced motion */

@media (prefers-reduced-motion: reduce) {
    body.v2 *, body.v2 *::before, body.v2 *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    body.v2 .card:hover { transform: none; }
    body.v2 .card::after { transition: none; }
    body.v2 .card--media:hover > img { transform: none; }
    /* animate.css hides .wow elements until WOW runs; keep them visible even
       if the reveal never fires. */
    body.v2 .wow { visibility: visible !important; animation-name: none !important; }
}

/* ------------------------------------------------------------- 21. Printing */

@media print {
    body.v2 .site-header, body.v2 .site-footer, body.v2 .preloader,
    body.v2 .consent-modal, body.v2 .consent-overlay,
    body.v2 .btn-row, body.v2 .skip-link, body.v2 .progress-wrap { display: none !important; }
    body.v2 .section { padding-block: 18px; }
    body.v2 .wow { visibility: visible !important; animation: none !important; }
    body.v2 .card, body.v2 .panel, body.v2 .record, body.v2 .table-scroll { box-shadow: none !important; }
}

/* ---------------------------------------------- 22. Old-site card treatment
   The current site's product-card look, applied on top of the base card:
   pink gradient accent bar, radial glow and lift on hover, pink titles,
   image zoom on media cards. */

body.v2 .card { position: relative; overflow: hidden; }
body.v2 .card h3 { color: var(--v2-pink); }
/* The heading is the card's own link: no rule underneath it, and the whole
   card lifts on hover, so the underline is saved for the hover state. */
body.v2 .card h3 a { color: inherit; text-decoration: none; }
body.v2 .card h3 a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
body.v2 .card::before {
    content: "";
    position: absolute; left: 0; top: 0; z-index: 1;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, rgba(189, 0, 104, 1), rgba(189, 0, 104, .2));
    opacity: .9;
}
body.v2 .card::after {
    content: "";
    position: absolute; inset: -80px; z-index: 0;
    background: radial-gradient(circle at 30% 20%, rgba(189, 0, 104, .14), transparent 45%);
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}
body.v2 .card > * { position: relative; z-index: 2; }
body.v2 .card {
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
body.v2 .card:hover,
body.v2 .card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .12);
    border-color: rgba(189, 0, 104, .25);
}
body.v2 .card:hover::after,
body.v2 .card:focus-within::after { opacity: 1; }
body.v2 .card--solution { border-top: 0; }
body.v2 .card--media:hover > img,
body.v2 .card--media:focus-within > img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    body.v2 .card, body.v2 .card::after, body.v2 .card--media img { transition: none !important; }
    body.v2 .card:hover { transform: none; }
    body.v2 .card--media:hover > img { transform: none; }
}

/* ------------------------------------------------- 23. Balance & lean pass */

/* Single-column heroes read centred, so wide screens have no empty half. */
body.v2 .hero--simple .shell { text-align: center; }
body.v2 .hero--simple h1,
body.v2 .hero--simple .lede { margin-inline: auto; }
body.v2 .hero--simple .btn-row,
body.v2 .hero--simple dl { justify-content: center; }

/* Leaner cards. */
body.v2 .card { padding: 22px; }
@media (min-width: 768px) { body.v2 .card { padding: 26px; } }
body.v2 .card h3 { transition: transform 220ms ease; }
body.v2 .card:hover h3,
body.v2 .card:focus-within h3 { transform: translateY(-2px); }

/* Compact collapsible capability item — the space-saving cousin of the FAQ
   accordion, used inside panels so a list of points reads as just the points
   until one is opened. */
body.v2 details.fold { border-top: 1px solid var(--v2-line-soft); }
body.v2 details.fold:first-of-type { border-top: 0; }
body.v2 details.fold summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 1rem;
    color: var(--v2-heading);
}
body.v2 details.fold summary::-webkit-details-marker { display: none; }
body.v2 details.fold summary::before {
    content: "";
    flex: none;
    width: 8px; height: 8px;
    border-right: 2px solid var(--v2-pink);
    border-bottom: 2px solid var(--v2-pink);
    transform: rotate(-45deg);
    transition: transform .18s ease;
}
body.v2 details.fold[open] summary::before { transform: rotate(45deg); }
body.v2 details.fold summary:hover { color: var(--v2-pink); }
body.v2 details.fold > div { padding: 0 2px 14px 22px; }
body.v2 details.fold > div p { margin: 0; font-size: .94rem; color: var(--v2-muted); }
@media (prefers-reduced-motion: reduce) {
    body.v2 details.fold summary::before { transition: none; }
}

/* Pillar tiles beside a record strip: two tidy columns, matching heights. */
body.v2 .split .pillars { grid-template-columns: repeat(2, 1fr); }

/* Eyebrow pills inside flex cards must hug their text, not stretch. */
body.v2 .card .eyebrow, body.v2 .panel .eyebrow { align-self: flex-start; }

/* ------------------------------------------------------ 24. Media cards fixed
   A cover image has to reach the card's own edges. The leaner padding added in
   section 23 landed on every .card, media cards included, which inset the
   image by the padding on three sides and left it floating in a white margin
   with the accent bar showing around it. The padding belongs on the body. */

body.v2 .card.card--media { padding: 0; }
body.v2 .card.card--media > .card__body { padding: 22px; }
@media (min-width: 768px) { body.v2 .card.card--media > .card__body { padding: 26px; } }

/* The accent bar reads as the card's own top edge, so it sits over the image
   rather than under it — .card > * puts the image on z-index 2. */
body.v2 .card::before { z-index: 3; }

/* -------------------------------------------------------------- 25. Preloader
   The theme supplies the panel, the wordmark and the pulse (css/main.css); what
   it does not supply without GSAP is the exit. js/v2-preloader.js tweens the
   path and adds these two classes. */

body.v2.is-preloading { overflow: hidden; }

body.v2 .preloader { transition: transform 620ms cubic-bezier(.6, 0, .2, 1); }
body.v2 .preloader .preloader-heading .load-text {
    color: #fff;
    transition: transform 380ms ease, opacity 380ms ease;
}
body.v2 .preloader.is-leaving .preloader-heading .load-text {
    transform: translateY(-100px);
    opacity: 0;
}
body.v2 .preloader.is-gone { transform: translateY(-105vh); }

@media (prefers-reduced-motion: reduce) {
    body.v2 .preloader { display: none !important; }
}

/* ------------------------------------------------------------ 26. Back to top
   Geometry comes from the theme's assets/css/backToTop.css. These only make the
   element a button rather than a div, and keep it clear of the consent dialog
   and of a phone's own bottom furniture. */

body.v2 .progress-wrap {
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(160%) blur(6px);
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) { body.v2 .progress-wrap { right: 40px; bottom: 40px; } }
body.v2 .progress-wrap:hover { box-shadow: inset 0 0 0 2px rgba(189, 0, 104, .5); }
body.v2 .progress-wrap:hover::after { color: var(--v2-pink); }

/* ------------------------------------------------------- 27. Consent dialog
   The site's own cookie dialog — same copy, same three buttons, same switches
   behind Customize — drawn without Magnific Popup, which v2 does not load. */

body.v2 .consent-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(20, 12, 28, .55);
    backdrop-filter: blur(2px);
}
body.v2 .consent-overlay[hidden] { display: none; }

body.v2 .consent-modal {
    position: fixed; z-index: 401;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 24px);
    max-width: 620px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 26px;
    background: var(--v2-white);
    border-radius: var(--v2-radius);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .3);
}
@media (min-width: 768px) { body.v2 .consent-modal { padding: 36px; } }
body.v2 .consent-modal[hidden] { display: none; }
/* The dialog takes focus when it opens so no button is left looking chosen;
   the ring belongs on whatever the visitor tabs to next, not on the panel. */
body.v2 .consent-modal:focus { outline: none; }
body.v2.has-modal { overflow: hidden; }

/* The close control, in the theme's own popup treatment: gradient disc, white
   cross, half-turn on hover. Magnific Popup hangs it outside the panel's
   top-right corner; this dialog scrolls its own content, which would clip
   anything outside it, so it sits just inside the corner instead. */
body.v2 .consent-modal .mfp-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v2-purple) 16.35%, #140c1c 91.35%);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    opacity: 1;
    transition: transform .3s ease;
}
body.v2 .consent-modal .mfp-close:hover { transform: rotate(180deg); }
body.v2 .consent-modal .mfp-close span { display: block; margin-top: -4px; }
@media (max-width: 767px) {
    body.v2 .consent-modal .mfp-close { top: 10px; right: 10px; width: 36px; height: 36px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    body.v2 .consent-modal .mfp-close { transition: none; }
    body.v2 .consent-modal .mfp-close:hover { transform: none; }
}

/* Room for the disc, so the heading never runs under it. */
body.v2 .consent-modal .title {
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
    margin-bottom: .4em;
    padding-right: 54px;
}
body.v2 .consent-modal p { font-size: .95rem; color: var(--v2-text); margin-bottom: 0; }
body.v2 .consent-modal .cookie-options { border-top: 1px solid var(--v2-line-soft); padding-top: 18px; }
body.v2 .consent-modal .form-check-label { font-size: .95rem; color: var(--v2-heading); }
body.v2 .consent-modal .cookie-buttons[hidden],
body.v2 .consent-modal .cookie-options[hidden],
body.v2 .consent-modal #confirm-customization[hidden] { display: none; }
/* line-height as well as padding: the theme sets it on the primary button but
   not the secondary, which otherwise leaves Accept All three pixels short of
   the two beside it. */
body.v2 .consent-modal .btn {
    padding: 13px 20px;
    font-size: .92rem;
    line-height: 1.2;
    justify-content: center;
}

/* The theme has no .tj-btn-secondary in light mode, so it is drawn here to the
   same pill geometry as the ghost button. */
body.v2 .consent-modal .tj-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid rgba(42, 20, 84, .18);
    border-radius: 50px;
    background: transparent;
    color: var(--v2-heading);
    font-weight: 700; line-height: 1.2;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
body.v2 .consent-modal .tj-btn-secondary:hover {
    border-color: var(--v2-purple); background: var(--v2-lavender); color: var(--v2-purple-ink);
}

/* --------------------------------------------------- 28. Contact solution picker
   The chosen description stays marked, so the click has a visible result on the
   page as well as in the form. */

body.v2 #solution-picker > li {
    padding-left: 14px;
    border-left: 3px solid transparent;
    transition: border-color .18s ease, background-color .18s ease;
}
body.v2 #solution-picker > li.is-chosen {
    border-left-color: var(--v2-pink);
    background: var(--v2-pink-wash);
    border-radius: 0 var(--v2-radius-sm) var(--v2-radius-sm) 0;
    padding-right: 14px;
}
body.v2 #solution-picker > li.is-chosen .cap-head strong { color: var(--v2-pink-deep); }

body.v2 #solution-banner[hidden] { display: none; }

/* ------------------------------------------------- 29. Solutions panels
   The tile used to be stacked under the heading, lede and stats strip inside
   the left column, which made that column half as tall again as the capability
   list beside it and left a hole under the buttons. It was cropped to 16:10 to
   claw some of that back — which threw away a third of an already small
   illustration.

   It now sits in its own half of a .split--media instead (section 3), square
   and uncropped, centred against the list. .figure--wide is gone with it. */

/* ------------------------------------------------- 30. The contact router
   Seven descriptions in a flat list asked the visitor to diagnose themselves
   against our product names, and gave every option the same weight. Two
   questions do the same work with less reading: the first sorts, the second
   names the product.

   Every question, every answer and the full seven-item list are in the page as
   markup — this section only decides which one is on screen. The script never
   writes copy; it moves a `hidden` attribute and fills the result card from
   data attributes the view rendered.

   The no-match card is drawn as plainly as a match, in the neutral wash rather
   than an alarm colour. Two answers genuinely have no product behind them, and
   saying so is the same feature as the "we do not do this" lists elsewhere —
   not an error state.

   Every fragment target here carries scroll-margin-top: the header is sticky at
   58–66px, so without it an anchor jump parks its target underneath. */

/* The hero standfirst on this page runs the full measure rather than the 62ch
   column .hero--simple gives it, and drops a step in size — it is orientation,
   not a headline, and at 3.5rem-adjacent sizes a three-line sentence competes
   with the h1 above it. */
body.v2 .hero .lede--wide {
    max-width: none;
    font-size: clamp(.98rem, .94rem + .2vw, 1.08rem);
    line-height: 1.65;
    color: var(--v2-muted);
}

/* Pairs with .section--snug in section 3: where the next section starts right
   under the hero, both ends are trimmed rather than one. */
body.v2 .hero--tight { padding-top: 26px; padding-bottom: 24px; }
@media (min-width: 768px) { body.v2 .hero--tight { padding-top: 40px; padding-bottom: 32px; } }

/* Eight columns of form, four of everything else — the same proportion as a
   Bootstrap col-8/col-4, kept in the grid the rest of the site uses. Capped so
   the inputs stay a sane width on a very wide screen; the aside is sticky, so
   the router stays offered the whole way down a long form. */
@media (min-width: 960px) {
    body.v2 .split--form {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        gap: 40px;
        max-width: 1240px;
        margin-inline: auto;
    }
}
@media (min-width: 1400px) { body.v2 .split--form { gap: 56px; } }

body.v2 .contact-aside { display: grid; gap: 20px; align-content: start; }

/* The patient-data warning, as one line rather than a panel of prose. It sits
   directly above the message box, and a five-line paragraph in that position
   is one nobody reads — which is the opposite of what a warning is for. */
body.v2 .flag-line {
    margin: 0 0 16px;
    padding: 13px 16px;
    border-left: 3px solid var(--v2-pink);
    border-radius: 0 var(--v2-radius-sm) var(--v2-radius-sm) 0;
    background: var(--v2-pink-wash);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--v2-text);
}
body.v2 .flag-line strong { color: var(--v2-pink-deep); }

/* The invitation to the router. In its own column it stacks. */
body.v2 .guide-invite {
    padding: 20px 22px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-wash);
}
body.v2 .guide-invite .eyebrow { margin-bottom: 10px; }
body.v2 .guide-invite__lead { margin: 0 0 16px; font-size: .93rem; }
body.v2 .guide-invite .btn {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 14px;
}

/* ---------------------------------------------------------- The dialog
   Same furniture as the cookie dialog in section 27 — overlay, centred panel,
   the theme's close disc — so the site has one way of putting something in
   front of you rather than two that almost match. */

body.v2 .guide-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(20, 12, 28, .55);
    backdrop-filter: blur(2px);
}
body.v2 .guide-overlay[hidden] { display: none; }

body.v2 .guide-modal {
    position: fixed; z-index: 401;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 24px);
    max-width: 680px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 26px;
    background: var(--v2-white);
    border-radius: var(--v2-radius);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .3);
}
@media (min-width: 768px) { body.v2 .guide-modal { padding: 34px; } }
body.v2 .guide-modal[hidden] { display: none; }
body.v2 .guide-modal:focus { outline: none; }

body.v2 .guide-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v2-purple) 16.35%, #140c1c 91.35%);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    transition: transform .3s ease;
}
body.v2 .guide-close:hover { transform: rotate(180deg); }
body.v2 .guide-close span { display: block; margin-top: -4px; }
@media (max-width: 767px) {
    body.v2 .guide-close { top: 10px; right: 10px; width: 36px; height: 36px; font-size: 24px; }
}

/* Only the two rows that sit level with the close disc need to clear it. The
   answer cards run the full width of the dialog, or the panel reads as though
   it has been indented for no reason. */
body.v2 .guide-modal .guide__step > .guide__count,
body.v2 .guide-modal .guide__step > .guide__q { padding-right: 54px; }
@media (max-width: 767px) {
    body.v2 .guide-modal .guide__step > .guide__count,
    body.v2 .guide-modal .guide__step > .guide__q { padding-right: 44px; }
}

/* The step counter, in the same mono voice the record strip and the status
   chips use for small metadata. */
body.v2 .guide__count {
    font-family: var(--v2-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-muted);
    margin: 0 0 10px;
}
body.v2 .guide__count b { color: var(--v2-purple-ink); font-weight: 500; }
body.v2 .guide__count--done { color: var(--v2-pink-deep); }

body.v2 .guide__q { font-size: 1.3rem; margin: 0 0 20px; max-width: none; }
body.v2 .guide__q:focus { outline: none; }

body.v2 .guide__answers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

/* Answers borrow the card treatment from section 22 — white ground, hairline
   border, lift on hover — so a component that exists nowhere else on the site
   still reads as part of the set. */
body.v2 .guide__answer {
    display: block;
    width: 100%;
    text-align: left;
    padding: 15px 18px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-white);
    color: var(--v2-heading);
    font-family: inherit;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease,
                background-color .18s ease, box-shadow .18s ease;
}
body.v2 .guide__answer b {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}
body.v2 .guide__answer span {
    display: block;
    margin-top: 3px;
    font-size: .89rem;
    line-height: 1.5;
    color: var(--v2-muted);
}
body.v2 .guide__answer:hover,
body.v2 .guide__answer:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(189, 0, 104, .35);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
}
body.v2 .guide__answer:hover b { color: var(--v2-pink-deep); }

/* Back, and the two quiet controls under a result. */
body.v2 .guide__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 16px 0 0;
}
body.v2 .arrow--back { transition: transform .18s ease; display: inline-block; }
body.v2 .btn:hover .arrow--back { transform: translateX(-4px); }

/* A match is drawn in the pink the site already uses for a chosen thing —
   the same treatment as .panel--flag and the picker's chosen row. */
body.v2 .guide__result {
    border-left: 3px solid var(--v2-pink);
    background: var(--v2-pink-wash);
    border-radius: 0 var(--v2-radius-sm) var(--v2-radius-sm) 0;
    padding: 20px 22px;
}
body.v2 .guide__result .guide__q {
    font-size: 1.35rem;
    margin-bottom: .35em;
    color: var(--v2-pink-deep);
}
body.v2 .guide__summary { margin: 0 0 .7em; }
body.v2 .guide__result .btn-row { margin-top: 18px; }

/* No match is an answer, not a failure, so it loses the pink and sits in the
   neutral wash. */
body.v2 .guide__result--none {
    border-left-color: var(--v2-line);
    background: var(--v2-wash);
}
body.v2 .guide__result--none .guide__q { color: var(--v2-heading); }
body.v2 .guide__result--none .guide__count { color: var(--v2-muted); }

/* The full list, once it has been asked for. */
body.v2 .guide__all {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--v2-line-soft);
}
body.v2 .guide__all-title { font-size: 1.1rem; margin-bottom: 18px; }
body.v2 .guide__all-title:focus { outline: none; }

/* The header is sticky, so an anchor jump needs to clear it. */
body.v2 #contact-form { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
    body.v2 .guide__answer { transition: none; }
    body.v2 .guide__answer:hover,
    body.v2 .guide__answer:focus-visible { transform: none; }
    body.v2 .arrow--back { transition: none; }
    body.v2 .btn:hover .arrow--back { transform: none; }
    body.v2 .guide-close { transition: none; }
    body.v2 .guide-close:hover { transform: none; }
}

/* ------------------------------------------------------ 31. Actor hub (home)

   The "Around one record" section on the homepage. On phones it is the plain
   card stack; from 960px the same six cards take their seats around a central
   record disc, joined by dashed wires. The wires and the disc are decoration —
   the cards carry all the text, so both renderings read the same.

   Positioning lives on the .hub__seat wrappers, never on the cards: the reveal
   animation (fadeInUp) owns the card's transform while it runs, so a transform
   used for layout would be overridden mid-animation and snap on completion. */

body.v2 .hub { display: grid; gap: 20px; grid-template-columns: 1fr; }
body.v2 .hub__seat > .card { height: 100%; }
@media (min-width: 640px) {
    body.v2 .hub { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
body.v2 .hub__wires,
body.v2 .hub__core { display: none; }

@media (min-width: 960px) {
    body.v2 .hub { display: block; position: relative; height: 640px; }
    body.v2 .hub__wires {
        display: block; position: absolute; inset: 0;
        width: 100%; height: 100%; pointer-events: none;
    }
    body.v2 .hub__wires line {
        stroke: var(--v2-purple); opacity: .3;
        stroke-width: 1.5; stroke-dasharray: 6 5;
    }
    body.v2 .hub__seat { position: absolute; width: 30%; }
    body.v2 .hub__seat > .card { height: auto; }
    body.v2 .hub__seat--tl { left: 0; top: 0; }
    body.v2 .hub__seat--tr { right: 0; top: 0; }
    body.v2 .hub__seat--ml { left: 0; top: 50%; transform: translateY(-50%); }
    body.v2 .hub__seat--mr { right: 0; top: 50%; transform: translateY(-50%); }
    body.v2 .hub__seat--bl { left: 0; bottom: 0; }
    body.v2 .hub__seat--br { right: 0; bottom: 0; }
    body.v2 .hub__core {
        position: absolute;
        left: calc(50% - 105px); top: calc(50% - 105px);
        width: 210px; height: 210px; border-radius: 50%;
        background: var(--v2-white);
        border: 1px solid var(--v2-line);
        box-shadow: var(--v2-shadow), 0 0 0 12px var(--v2-wash);
        display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 6px;
        text-align: center; padding: 24px;
    }
    body.v2 .hub__core-eyebrow {
        font-family: var(--v2-mono); font-size: .68rem; font-weight: 500;
        letter-spacing: .12em; text-transform: uppercase;
        color: var(--v2-purple-ink);
    }
    body.v2 .hub__core strong {
        font-family: var(--tj-ff-heading, serif); font-weight: 400;
        font-size: 1.5rem; line-height: 1.15; color: var(--v2-heading);
    }
    body.v2 .hub__core-sub { font-size: .85rem; color: var(--v2-muted); }
}

/* ------------------------------------------- 32. Reading the long lists
   These sections are full-bleed like the rest of the page, and the components
   below are the ones that were suffering for it: a flat definition list and a
   run of caveats, both set the full width of a 1600px screen, which put single
   lines of body copy at 150–180 characters. Nothing here changes what is said;
   it changes how far the eye has to travel to read it.
   ----------------------------------------------------------------------- */

/* The status legend was a strip the width of the page with three items huddled
   at the left end. It only ever needs to be as wide as its own contents. */
body.v2 .chip-key--inline {
    width: fit-content;
    max-width: 100%;
    padding: 12px 18px;
    box-shadow: none;
    gap: 8px 20px;
}
/* One term per row, chips in a column of their own — a key, read down. In this
   shape it can take the half of the section head row that was standing empty. */
body.v2 .chip-key--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 22px 24px;
    box-shadow: none;
    background: var(--v2-wash);
    border-style: dashed;
}
body.v2 .section--wash .chip-key--stack { background: var(--v2-white); }
body.v2 .chip-key--stack div { align-items: baseline; gap: 14px; line-height: 1.5; }
body.v2 .chip-key--stack .chip { flex: none; min-width: 92px; justify-content: center; }

/* Capability tiles.
   `.caps` stacks hairline-separated rows, which is right in a narrow column and
   wrong across a full-bleed section — five rows of one-line paragraphs reading
   as one grey block. The same items as tiles cap the measure at roughly 50
   characters and let the status chip sit where it can be scanned down a column
   rather than hunted for mid-sentence. */
body.v2 .caps--tiles {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}
@media (min-width: 780px)  { body.v2 .caps--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { body.v2 .caps--tiles { gap: 20px; } }

body.v2 .caps--tiles > li {
    padding: 22px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* The hairline-row rules the base list sets for its first and last item have to
   come off — a tile has an edge all the way round. */
body.v2 .caps--tiles > li:first-child { padding-top: 22px; border-top: 1px solid var(--v2-line); }
body.v2 .caps--tiles > li:last-child { padding-bottom: 22px; }
body.v2 .caps--tiles > li:hover {
    transform: translateY(-3px);
    border-color: rgba(129, 76, 236, .22);
    box-shadow: var(--v2-shadow);
}
/* Name on its own line, chip beneath it: at tile width the two together wrapped
   the chip onto a line of its own anyway, and this way the chips line up. */
body.v2 .caps--tiles .cap-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
}
body.v2 .caps--tiles .cap-head strong { font-size: 1.06rem; line-height: 1.3; }
body.v2 .caps--tiles p { font-size: .93rem; color: var(--v2-text); }
/* One item that belongs to the whole set rather than to either column. */
@media (min-width: 780px) {
    body.v2 .caps--tiles > .cap--wide { grid-column: 1 / -1; }
}

/* A band of tiles under a label naming what they have in common.

   The label sits in a rail down the left rather than on a line of its own. A
   full-width rule with the label stranded at its left end was the reason the
   tiles had to be capped to a 1080px column to stay under them — and capping
   them is what left the right half of the section empty. In the rail the label
   costs a fixed 280px and the tiles take everything else, so the band reaches
   the same right edge as every other row on the page, and the three labels
   stack into a column the eye can run down to find the group it wants. */
body.v2 .tier {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    padding-top: 18px;
    border-top: 2px solid var(--v2-lavender);
}
body.v2 .tier + .tier { margin-top: 32px; }
@media (min-width: 1100px) {
    body.v2 .tier {
        grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
        gap: 40px;
        padding-top: 24px;
    }
    body.v2 .tier + .tier { margin-top: 40px; }
}
body.v2 .tier__label b {
    display: block;
    font-family: var(--v2-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-purple-ink);
    margin-bottom: 8px;
}
body.v2 .tier__label span {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--v2-muted);
}

/* Named things pulled out of a sentence. Eight FHIR resource types set in bold
   inside running prose are unreadable as a list, which is what they are. */
body.v2 .tokens {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
}
body.v2 .tokens li {
    font-family: var(--v2-mono);
    font-size: .78rem;
    letter-spacing: .02em;
    color: var(--v2-heading);
    background: var(--v2-white);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-sm);
    padding: 6px 11px;
    white-space: nowrap;
}

/* Caveat lists in a wide panel: two columns rather than one long ladder. */
@media (min-width: 900px) {
    body.v2 .nots--two {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 40px;
    }
    body.v2 .nots--two li { margin-bottom: 8px; }
}

/* A caveat panel wide enough to need the same treatment: its label goes in the
   rail and the list runs beside it in two columns. Capping the panel instead
   just moved the empty space from inside it to the right of it. */
@media (min-width: 1100px) {
    body.v2 .panel--railed {
        display: grid;
        grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }
    body.v2 .panel--railed > .eyebrow { margin-bottom: 0; }
}