/* ============================================================
   page-hero.css — the marketing hero shared by every public page:
   a brief player rail down the left edge, the copy, and whatever
   the page puts beside it (the overlay demo on home, hero art
   elsewhere).

   Namespaced .lxhr-* so it never collides with .mk-* (marketing),
   .new-* (app chrome) or .lxov-* (the demo inside it). Markup comes
   from includes/brief_rail.cfm; behaviour from js/brief-rail.js.
   Colours follow marketing.css in light and
   dark.css's palette in dark (#0F1629 page, #1A2240 card,
   rgba(255,255,255,.1) borders).
   ============================================================ */

.lxhr {
    --lxhr-ink:   #231E41;
    --lxhr-muted: #6F6F87;
    --lxhr-dim:   #8A84A6;
    --lxhr-line:  rgba(35, 30, 65, .12);
    --lxhr-track: #DDD3EE;
    --lxhr-accent:#8D75E6;
    background: var(--mk-bg, #F3ECF7);
    color: var(--lxhr-ink);
}
[data-theme="dark"] .lxhr {
    --lxhr-ink:   #FFFFFF;
    --lxhr-muted: rgba(255, 255, 255, .7);
    --lxhr-dim:   rgba(255, 255, 255, .6);
    --lxhr-line:  rgba(255, 255, 255, .12);
    --lxhr-track: rgba(255, 255, 255, .18);
    --lxhr-accent:#8D75E6;
    background: #0F1629;
}

/* The public header sits ON the hero rather than in a bar of its own.
   It already carries the mark alone (an <img class="new-logo">, no wordmark),
   so this only has to strip the surface. Scoped to the home page. */
/* :not(.pubnav-solid) — marketing-header.css gives the header a solid
   ground while a mega panel is open so it stays crisp over the blur, and
   this selector outranks it. */
.lxhr-page .new-header.new-header-public:not(.pubnav-solid) {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}

.lxhr-grid {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: stretch;
    border-top: 1px solid var(--lxhr-line);
    border-bottom: 1px solid var(--lxhr-line);
}

/* ---------- the rail ---------- */
.lxhr-rail {
    border-right: 1px solid var(--lxhr-line);
    display: flex;
    justify-content: center;
}
/* The rail scrolls with the hero. Sticky was tried and did nothing useful:
   the hero is shorter than a desktop viewport, so there is no travel to
   stick through, and pinning it forced a fixed height that stopped the
   track spanning the section. Stretched, the segments run the full height
   of the hero, which is what makes it read as a spine. */
.lxhr-rail-in {
    align-self: stretch;
    /* Full rail width, not content width. As a flex item it sized to its
       widest child, so the quiz chip's rule stopped short of both edges
       instead of spanning the spine. */
    width: 100%;
    /* the rail's foot, shared with the quiz chip so its hover fill can
       reach the bottom edge instead of stopping short of it */
    --lxhr-foot: 20px;
    padding: 30px 0 var(--lxhr-foot);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lxhr-play {
    width: 40px; height: 40px; border-radius: 50%;
    border: 0; padding: 0; flex-shrink: 0; cursor: pointer;
    background: var(--lxhr-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 5px rgba(141, 117, 230, .14);
    transition: transform .15s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.lxhr-play:hover { transform: scale(1.06); }
/* The browser's default ring paints in the OS accent colour and sticks
   after the click — that was the green outline. Keyboard focus still gets
   an indicator, in our own violet. */
.lxhr-play:focus { outline: none; }
.lxhr-play:focus-visible { outline: 2px solid var(--lxhr-accent); outline-offset: 3px; }
.lxhr-play::-moz-focus-inner { border: 0; }
.lxhr-play svg { display: none; }
.lxhr-play .i-play  { display: block; }
.is-playing .lxhr-play .i-play,
.is-done    .lxhr-play .i-play  { display: none; }
.is-playing .lxhr-play .i-pause { display: block; }
.is-done    .lxhr-play .i-replay{ display: block; }
.is-done .lxhr-play {
    background: transparent; color: var(--lxhr-accent);
    border: 2px solid #D9CCF2; box-shadow: none;
}
[data-theme="dark"] .is-done .lxhr-play { border-color: rgba(255, 255, 255, .28); }
.is-playing .lxhr-play { box-shadow: 0 0 0 5px rgba(141, 117, 230, .2); }

/* the news brief player's own mini spectrum, drawn by home-hero.js:
   3 bars, 2px gaps, bottom-anchored — see .lxn-cap-spec */
.lxhr-eq {
    display: block; width: 19px; height: 16px; flex-shrink: 0;
    margin-top: 13px; color: var(--lxhr-accent); opacity: .45;
    transition: opacity .25s ease;
}
.is-playing .lxhr-eq { opacity: 1; }

.lxhr-track {
    flex: 1; min-height: 0; width: 100%;
    display: flex; gap: 11px; margin-top: 20px;
    align-items: center; justify-content: center;
}
/* The column is the scrub target, not the 5px bars inside it — the pointer
   handler ignores X entirely, so the padding here is real hit area.
   touch-action: none so a vertical drag scrubs instead of scrolling. */
.lxhr-segs {
    display: flex; flex-direction: column; gap: 8px; align-self: stretch;
    padding: 2px 9px; margin: 0 -9px;
    cursor: pointer; touch-action: none;
}
.lxhr-segs:hover .lxhr-seg { background: var(--lxhr-line); }
.lxhr-seg {
    flex: 1; width: 5px; border-radius: 99px;
    background: var(--lxhr-track); overflow: hidden;
}
.lxhr-seg > i {
    display: block; width: 100%; height: 0;
    background: var(--lxhr-accent); border-radius: 99px;
}
/* the clock and the title are ONE run set on its side */
.lxhr-run {
    writing-mode: vertical-rl;
    font-family: var(--font-sans);
    font-size: 10px; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; white-space: nowrap;
    color: var(--lxhr-muted);
}
.lxhr-run .lxhr-clock {
    color: var(--lxhr-dim); font-weight: 500; font-variant-numeric: tabular-nums;
    opacity: .8;
}
/* The separator belongs to the TITLE, not the clock. Inside the clock it
   would sit inside the reserved box below and drift with the digits. */
.lxhr-run .lxhr-clock + span::before { content: "\00A0\00B7\00A0"; }
/* Reserve the counter's length so it can never push the title.

   The run is vertical, so its LENGTH is the INLINE axis, not the block
   one. And the reservation is not belt-and-braces: font-variant-numeric
   reports as tabular-nums here but does not take effect, so the same
   thirteen characters measure 89.2px as "08:88 / 08:88" and 64.7px as
   "11:11 / 11:11". Measured max is 89.2; 9.4em at this size is 94. */
.lxhr-run .lxhr-clock { display: inline-block; min-inline-size: 9.4em; }
/* ---------- the quiz, at the foot of the rail ----------
   The rail's argument in one column: hear the page, then play it. It sits
   across the foot of the spine as a chip, separated from the track by a
   hairline, and reads horizontally — QUIZ is short enough that turning it
   on its side only made it harder to read.

   Resting state is quiet so it does not compete with the pills in the
   copy. Hover fills the whole chip with the accent, which is the moment
   it should look like the invitation it is. */
.lxhr-quiz {
    margin-top: 16px; flex-shrink: 0; width: 100%;
    /* eat the rail's bottom padding so the hover fills the foot of the
       spine corner to corner, rather than floating above a gap */
    margin-bottom: calc(-1 * var(--lxhr-foot));
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border: 0; border-top: 1px solid var(--lxhr-track);
    /* Slim and even. The chip's BOTTOM is pinned to the rail's bottom by
       the negative margin whatever its height, so this padding does not
       have to make up the foot — it only sets how tight the band is.
       Small and equal on both sides. */
    padding: 8px 0; background: none; cursor: pointer;
    color: var(--lxhr-dim); font-family: inherit;
    transition: background .15s ease, color .15s ease;
}
.lxhr-quiz svg { width: 15px; height: 15px; flex-shrink: 0; }
.lxhr-quiz span {
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; white-space: nowrap;
}
/* White, so the chip lifts off the rail rather than joining the purple
   already in the copy's primary pill. The mark takes the accent. */
.lxhr-quiz:hover { background: #fff; color: var(--lxhr-accent); }
.lxhr-quiz:focus { outline: none; }
.lxhr-quiz:focus-visible { outline: 2px solid var(--lxhr-accent); outline-offset: -2px; }
.lxhr-quiz::-moz-focus-inner { border: 0; }

/* no generated audio for this language: a quiet graphic, not a dead button */
.lxhr-rail[data-state="off"] .lxhr-play { pointer-events: none; opacity: .5; }
/* The clock STAYS. Hiding it was why a rail with no audio showed no
   timecode at all rather than the resting 00:00 the home page shows —
   the pattern is the timestamp and the section name, in every state. */
.lxhr-rail[data-state="off"] .lxhr-clock { opacity: .55; }
.lxhr-rail[data-state="off"] .lxhr-eq { opacity: .3; }

/* ---------- the hero body ---------- */
.lxhr-body {
    display: grid; grid-template-columns: .78fr 1fr; gap: 40px;
    padding: 40px 50px 54px 40px; align-items: start;
}
.lxhr-copy .mk-h1 { font-size: 44px; line-height: 1.06; letter-spacing: -.032em; }
.lxhr-copy .mk-lead { font-size: 16px; margin: 18px 0 0; max-width: 42ch; }
/* marketing.css centres .mk-actions and only .mk-hero-split undoes it —
   this section is not that, so the pills came out centred under a
   ranged-left headline */
.lxhr-copy .mk-actions { margin-top: 26px; gap: 10px; justify-content: flex-start; }
/* The copy column here is much narrower than on a full-bleed marketing hero
   (472px at 1280, 306px at 901), and the two pills at their site-wide size
   need 500px — so they wrapped to two rows on every desktop under 1366.
   Trim the pill down to fit, and below the width where even the trimmed
   pair will not fit, drop the descriptor rather than break the row. */
.lxhr-copy .mk-pill { padding: 13px 16px; }
/* measured with DM Sans actually loaded: the trimmed pair needs 450px and
   the column reaches that at a 1240px viewport. Below it the descriptor
   goes rather than the row. */
@media (min-width: 901px) and (max-width: 1259px) {
    .lxhr-copy .mk-pill-sep,
    .lxhr-copy .mk-pill-desc { display: none; }
}
/* a 2 x 2 block: at this column width the four checks wrapped 3 + 1 */
.lxhr-page .mk-hero-feats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 11px 16px; margin-top: 20px; max-width: 40ch;
}
.lxhr-page .mk-hero-invite { margin-top: 32px; }
.lxhr-demo { min-width: 0; }
/* ---------- pages that carry hero art instead of home's live demo ----------
   Home's slot holds a running product demo and earns its width. A static
   800x450 illustration does not: at the same size it left the copy column
   short and opened a gap under the subtitle that the rail then had to span.
   So the art is capped and the copy takes the larger share. */
.lxhr-art {
    display: block; width: 100%; height: auto; border-radius: 16px;
    max-width: 500px; margin-left: auto;
}
/* :has() rebalances the columns where it is supported; the max-width above
   does the essential job everywhere, so nothing depends on it. */
.lxhr-body:has(.lxhr-art) {
    grid-template-columns: 1fr .74fr;
    align-items: center;            /* art centred on the copy, not top-aligned */
    padding: 34px 50px 40px 40px;
}
@media (max-width: 900px) {
    .lxhr-art { max-width: none; margin-left: 0; }
    .lxhr-body:has(.lxhr-art) { grid-template-columns: 1fr; padding: 24px 20px 30px 16px; }
}

/* ---------- phones: the rail stays vertical ----------
   There is no hero image beside the copy here — the demo stacks below
   it — so the 64px the rail costs is width the layout was not using,
   and the hero comes out ~100px SHORTER than laying the rail flat. */
@media (max-width: 900px) {
    .lxhr-grid { grid-template-columns: 64px 1fr; }
    .lxhr-rail-in { --lxhr-foot: 34px; padding: 22px 0 var(--lxhr-foot); }
    .lxhr-body { grid-template-columns: 1fr; gap: 26px; padding: 24px 20px 30px 16px; }
    .lxhr-copy .mk-h1 { font-size: 29px; line-height: 1.1; }
    .lxhr-copy .mk-lead { font-size: 14.5px; margin: 13px 0 0; }
    .lxhr-copy .mk-actions { flex-direction: column; }
    .lxhr-copy .mk-actions .mk-pill { justify-content: center; }
    .lxhr-page .mk-hero-feats { gap: 10px 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lxhr-play { transition: none; }
    .lxhr-play:hover { transform: none; }
}