/* ============================================================
   home-hero.css — the home page hero: the "About Lexy" player rail
   down the left edge, the copy, and the overlay demo.

   Namespaced .lxhr-* so it never collides with .mk-* (marketing),
   .new-* (app chrome) or .lxov-* (the demo inside it). Loaded by
   index.cfm only. 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;
    padding: 30px 0 20px;
    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;
}
.lxhr-segs { display: flex; flex-direction: column; gap: 8px; align-self: stretch; padding: 2px 0; }
.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;
}
.lxhr-run .lxhr-clock::after { content: "\00A0\00B7\00A0"; }
/* 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; }
.lxhr-rail[data-state="off"] .lxhr-clock { display: none; }
.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; }

/* ---------- 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 { padding: 22px 0 34px; }
    .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; }
}