/* Experimental live sales sections. Scoped `.lx-` so nothing leaks into the
 * production page, whose stylesheet loads alongside and owns the schedule.
 *
 * NO new tokens. Colour, radius, shadow and easing come from the live page's
 * :root (--ink, --rule, --card-bg, --squircle-*, --shadow-*, --ease-settle).
 * Every card carries .event-squircle, the same superellipse the schedule uses.
 */

.lx { font-family: 'Poppins', system-ui, -apple-system, sans-serif; }

/* Baseline icon size. Inline SVG with no width falls back to its intrinsic or
   the replaced-element default, which renders a 200px arrow — that has now
   shipped twice (.lx-seeall, then .lx-book-cta). Every specific rule below
   overrides this; the point is that forgetting one can no longer be dramatic. */
.lx svg { width: 16px; height: 16px; flex: none; }
.lx-shell { width: min(1240px, calc(100vw - 40px)); margin: 0 auto; }
.lx-narrow { width: min(880px, calc(100vw - 40px)); margin: 0 auto; }

/* The dashed identifier pill — the .chip primitive with a dashed rule. */
.lx-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px 13px;
  border-radius: var(--squircle-sm); border: 1px dashed var(--rule);
  background: transparent;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-light);
}

.lx-section { padding: 92px 0; }
.lx-h2 { text-wrap: balance; margin: 0; font-size: clamp(26px, 3.4vw, 36px); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; color: var(--ink); }
.lx-lede { margin: 12px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

/* ── SECTION 0 · brand hero ─────────────────────────────────────────────── */
/* 62svh. The job is one emotional beat, not a screen to get through — and the
   question below has to be visibly cut off so the first scroll is obvious. */
/* 54svh. Its whole job is one emotional beat and a button; anything more is
   screen the visitor has to get past. */
.lx-brand {
  min-height: 54svh; display: flex; align-items: center;
  padding: 112px 0 32px;
}
/* Its own container: the page-wide one runs to 20px of the edge, which put the
   headline almost against it. */
.lx-brand-grid {
  width: min(1160px, calc(100vw - 96px)); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}
/* The laptop breaks the container and runs off the left edge — it reads as a
   real object the page is cropping, not a picture placed on it. overflow-x on
   the section keeps it from creating a horizontal scrollbar. */
.lx-brand { overflow-x: clip; }
.lx-brand-visual { margin-left: calc(-1 * min(210px, 14vw)); }
.lx-brand-h1 {
  text-wrap: balance; margin: 0;
  font-size: clamp(32px, 4.2vw, 50px); font-weight: 600;
  letter-spacing: -.035em; line-height: 1.04; color: var(--ink);
}
/* The word cycles; the sentence around it must not move. The span is sized to
   the widest of the five in JS, so the full stop stays put. */
.lx-rot { display: inline-block; text-align: left; }
.lx-rot-w {
  display: inline-block;
  transition: opacity var(--dur-quick, 200ms) var(--ease-settle),
              transform var(--dur-quick, 200ms) var(--ease-settle),
              filter var(--dur-quick, 200ms) var(--ease-settle);
}
.lx-rot-w.is-out { opacity: 0; filter: blur(6px); transform: translateY(calc(-1 * var(--rise, 9px))); }

.lx-brand-sub { text-wrap: balance; margin: 15px 0 0; max-width: 34ch; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.5; color: var(--ink-soft); }

/* Both actions share a width so they read as one stack. The second is an
   outline, and shorter, so it cannot compete with the first. */
.lx-brand-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 28px; width: 244px; max-width: 100%; }
.lx-brand-cta, .lx-brand-alt {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; border-radius: var(--squircle-action); text-decoration: none;
  font-family: inherit; font-weight: 600;
  transition: transform var(--dur-standard, 320ms) var(--ease-settle),
              box-shadow var(--dur-standard, 320ms) var(--ease-settle),
              border-color var(--dur-standard, 320ms) var(--ease-settle),
              color var(--dur-standard, 320ms) var(--ease-settle);
}
.lx-brand-cta {
  padding: 17px 26px; border: 0;
  background: var(--ink); color: #fff; font-size: 15px;
  box-shadow: var(--shadow-md);
}
.lx-brand-cta:hover { transform: translateY(var(--lift-sm, -2px)); box-shadow: var(--shadow-lg); }
.lx-brand-cta svg { width: 17px; height: 17px; }
.lx-brand-alt {
  padding: 11px 20px; border: 1px solid var(--border);
  background: transparent; color: var(--ink-light); font-size: 12.5px;
}
.lx-brand-alt:hover { color: var(--ink); border-color: var(--ink-faint); }

/* One flat image — the class scene is part of the artwork. Width and height
   are on the tag so the box is reserved before it loads and nothing reflows
   when it arrives. */
.lx-brand-visual { position: relative; }
.lx-laptop-img { display: block; width: 100%; height: auto; }

/* ── SECTION 1 · hero, one full screen ──────────────────────────────────── */
/* svh, not vh: on iOS the address bar makes vh taller than what is visible,
   which would push the five choices below the fold on the exact device this
   page is designed for first. */
.lx-hero {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 118px 0 48px;
}
/* Words arrive in sequence, blurring into focus. Short and staggered — it
   should read as the sentence settling, not as a performance. */
.lx-ask { display: block; }
.lx-word { display: inline-block; animation: lx-focus var(--dur-emphasis, 460ms) var(--ease-enter) both; animation-delay: calc(var(--i) * var(--stagger, 81ms)); }
.lx-word em { font-style: italic; }
@keyframes lx-focus {
  from { opacity: 0; filter: blur(10px); transform: translateY(var(--rise, 9px)); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}

/* A pencil stroke, drawn on after the words land. Two passes with slightly
   different wobble is what stops it looking like a border-bottom. */
.lx-underline { position: relative; white-space: nowrap; }
.lx-underline svg {
  position: absolute; left: -2%; bottom: -0.62em; width: 104%; height: .58em;
  overflow: visible; pointer-events: none;
}
.lx-underline path {
  fill: none; stroke: var(--ink); stroke-width: 2.1; stroke-linecap: round; opacity: .5;
  stroke-dasharray: 220; stroke-dashoffset: 220;
  animation: lx-draw var(--dur-slow, 720ms) var(--ease-enter) forwards;
}
.lx-underline path:nth-child(2) { stroke-width: 1.4; opacity: .3; animation-delay: var(--dur-quick, 200ms); }
@keyframes lx-draw { to { stroke-dashoffset: 0; } }

.lx-hero h1 {
  text-wrap: balance; margin: 20px 0 0;
  font-size: clamp(32px, 5.6vw, 60px); font-weight: 600;
  letter-spacing: -.035em; line-height: 1.04; color: var(--ink);
}
.lx-hero-sub { text-wrap: balance; margin: 14px auto 0; max-width: 30ch; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }

/* Two by two. Held to 560px so the row never stretches across a desktop —
   these are controls, not a layout. */
.lx-feels {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin: 40px auto 0; width: 100%; max-width: 560px;
}
.lx-feel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 104px; padding: 16px 8px;
  /* Plain white at rest — no tint at all. The colour is entirely a hover
     reward, because somebody may well be picking by colour rather than by
     word, and that only works if the colour is a change they cause. */
  border: 1px solid var(--border);
  border-radius: var(--squircle-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); cursor: pointer;
  /* Only the border answers a hover — it darkens to ink over 460ms. The shadow
     is deliberately NOT in this list: the card should not appear to rise, just
     to become the one you are pointing at. */
  transition: border-color var(--dur-emphasis, 460ms) var(--ease-settle),
              background var(--dur-emphasis, 460ms) var(--ease-settle),
              color var(--dur-emphasis, 460ms) var(--ease-settle);
}
/* The icon does not answer the hover at all — the border and the fill say it,
   and a mark that changes as well made the whole control busy. */
.lx-feel svg { width: 24px; height: 24px; color: var(--ink-soft); }
/* Hover is where the class colour actually shows — the rule takes the tint at
   full strength, which on a 1px border is a hint rather than a shout. */
.lx-feel:hover { border-color: var(--tint); background: color-mix(in srgb, var(--tint) 8%, var(--card-bg)); }
.lx-feel.is-on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--shadow-md); }
.lx-feel.is-on svg { color: #fff; }
.lx-hero-note { margin: 26px 0 0; font-size: 12.5px; color: var(--ink-light); }

/* ── SECTION 2 · explorer ───────────────────────────────────────────────── */
/* The left column is a selector and nothing else: icon + name. Everything the
   visitor has to read lives in one place on the right. */
.lx-explorer { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; margin-top: 40px; align-items: start; }
.lx-picks { display: flex; flex-direction: column; gap: 4px; }
.lx-pick {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 12px 14px; text-align: left;
  border: 1px solid transparent; border-radius: var(--squircle-sm);
  background: transparent; font-family: inherit;
  font-size: 13.5px; font-weight: 500; color: var(--ink-light); cursor: pointer;
  transition: color var(--dur-quick, 200ms) var(--ease-settle),
              background var(--dur-quick, 200ms) var(--ease-settle),
              border-color var(--dur-quick, 200ms) var(--ease-settle);
}
.lx-pick svg { width: 19px; height: 19px; flex: none; }
.lx-pick:hover { color: var(--ink); background: var(--bg-subtle); }
.lx-pick.is-on {
  color: var(--ink); font-weight: 600;
  background: var(--card-bg); border-color: var(--border); box-shadow: var(--shadow-sm);
}

/* Ethan's own card for the class — square as authored, since it already
   carries the class colour, its icon and its subtitle. */
.lx-detail-head { display: flex; align-items: center; gap: 18px; }
.lx-detail-art { flex: none; width: 96px; aspect-ratio: 1; overflow: hidden; border-radius: var(--squircle-sm); background: var(--bg-subtle); box-shadow: var(--shadow-sm); }
.lx-detail-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-detail-title { min-width: 0; }
.lx-detail-meta { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-faint); }

/* Held to roughly the height of the five names beside it. The booking sits
   ALONGSIDE the class rather than under it — stacked, the card pushed the
   panel to nearly twice the height of the list it is supposed to match. */
.lx-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 28px; align-items: start;
  border: 1px solid var(--border); border-radius: var(--squircle-lg);
  background: var(--card-bg); box-shadow: var(--shadow-md); padding: 26px;
}
.lx-detail-main { min-width: 0; }
.lx-detail h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.lx-detail-body { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* Ethan's own copy from the event row. Collapsed to three lines, because a
   sales page should not open with a wall of text; the chevron only appears
   when there is actually more to see. */
.lx-desc { margin: 18px 0 0; }
.lx-desc-body { font-size: 14px; line-height: 1.62; color: var(--ink-soft); }
.lx-desc-body p, .lx-desc-body ul, .lx-desc-body ol { margin: 0 0 10px; }
.lx-desc-body p:last-child { margin-bottom: 0; }
.lx-desc-body h2, .lx-desc-body h3, .lx-desc-body h4 {
  margin: 16px 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
/* One paragraph showing, fading out at the bottom so it is obvious the text
   continues. Height is animated from JS, which is why this is a height cap and
   not a line-clamp — you cannot spring a clamp. */
.lx-desc.is-long .lx-desc-body {
  height: 5.4em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 52%, transparent 96%);
  mask-image: linear-gradient(#000 52%, transparent 96%);
  transition: height var(--dur-emphasis, 460ms) var(--ease-spring, cubic-bezier(.18,1.16,.3,1));
}
.lx-desc.is-long.is-open .lx-desc-body {
  height: auto; overflow: hidden;
  -webkit-mask-image: none; mask-image: none;
}
.lx-desc-more {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.lx-desc-more svg { width: 15px; height: 15px; transition: transform var(--dur-standard, 320ms) var(--ease-settle); }
.lx-desc.is-open .lx-desc-more svg { transform: rotate(180deg); }

/* The booking IS the class card. A button underneath it names the amount and
   nothing else — "Ruby", "credits" and "$27/month" are vocabulary a stranger
   does not have yet, and none of it is needed to press this. */
.lx-book { padding-left: 28px; border-left: 1px solid var(--rule); }
.lx-mini { margin: 0; border: 1px solid var(--border); border-radius: var(--squircle-md); background: var(--bg); }
.lx-mini .mini-cover { width: 66px; height: 66px; flex: none; overflow: hidden; border-radius: var(--squircle-sm); background: var(--bg-subtle); }
.lx-mini .mini-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-mini { display: block; text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color var(--dur-standard, 320ms) var(--ease-settle),
              box-shadow var(--dur-standard, 320ms) var(--ease-settle); }
.lx-mini:hover { border-color: var(--ink-faint); box-shadow: var(--shadow-sm); }
.lx-mini .mini-primary { cursor: pointer; padding: 12px; gap: 13px; }
/* This is the thing being sold, so it is allowed to be the loudest object in
   the panel: the date is a heading, not a caption. */
.lx-mini .mini-name { white-space: normal; font-size: 14px; font-weight: 600; color: var(--ink); }
.lx-mini .mini-time { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.lx-mini .mini-foot { font-size: 11.5px; gap: 8px; flex-wrap: wrap; margin-top: 5px; color: var(--ink-soft); }
.lx-mini .mini-pill { font-size: 11px; padding: 3px 9px; }
.lx-mini .mini-meta svg { width: 14px; height: 14px; }
/* The visitor's zone, small and out of the way — the time itself is the point. */
.lx-tz {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 7px;
  padding: 2px 7px; border-radius: var(--squircle-sm);
  border: 1px solid var(--border); background: var(--bg);
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-faint); vertical-align: middle;
}
.lx-tz svg { width: 11px; height: 11px; }

.lx-book-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* Capped: when the panel collapses to one column the button was running the
     entire width of the card, which read as a banner rather than a button. */
  width: 100%; max-width: 300px; margin: 12px auto 0; padding: 14px 20px;
  background: var(--ink); color: #fff; border: 0; border-radius: var(--squircle-action);
  font-family: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-standard, 320ms) var(--ease-settle), box-shadow var(--dur-standard, 320ms) var(--ease-settle);
}
.lx-book-cta:hover { transform: translateY(var(--lift-sm, -2px)); box-shadow: var(--shadow-md); }
.lx-book-cta svg { width: 17px; height: 17px; }
.lx-book-cta.is-quiet { background: transparent; color: var(--ink-soft); border: 1px solid var(--border); box-shadow: none; }
.lx-book-cta.is-quiet:hover { color: var(--ink); border-color: var(--ink-faint); }
.lx-book-note { margin: 9px 0 0; font-size: 11.5px; color: var(--ink-faint); text-align: center; }
.lx-book-more { margin: 9px 0 0; font-size: 11.5px; color: var(--ink-faint); text-align: center; }
.lx-book-when { margin: 0 0 12px; font-size: 13px; color: var(--ink-light); }

/* Solid ink, white text — it is the one navigational action in this section
   and was reading as decoration when it matched the identifier pills. */
.lx-seealls { display: flex; justify-content: center; margin: 40px 0 0; }
.lx-seeall {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 10px 22px;
  border: 0; border-radius: var(--squircle-action);
  background: var(--ink); color: #fff; text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-standard, 320ms) var(--ease-settle),
              box-shadow var(--dur-standard, 320ms) var(--ease-settle);
}
.lx-seeall:hover { transform: translateY(var(--lift-sm, -2px)); box-shadow: var(--shadow-md); }
.lx-seeall svg { width: 14px; height: 14px; flex: none; }

/* ── SECTION 3 · proof, three drifting rows ─────────────────────────────── */
/* Parchment, like the production testimonial section directly below it — the
   quotes are the colour on this page, not a red panel. */
.lx-proof { padding: 92px 0; overflow: hidden; }
.lx-proof-head { text-align: center; margin-bottom: 40px; }
/* The gap between rails is the same 14px as the gap between cards, so the
   wall reads as one field rather than three bands. Clipping and the edge fade
   live on the GROUP: a row that clipped its own box also cropped the cards'
   shadows top and bottom, and the padding added to fix that is what pushed the
   rows apart. .lx-proof already hides the horizontal overflow. */
/* The mask clips to this box, so the bottom row's shadow needs room INSIDE it
   or it gets sliced off. */
.lx-rows {
  display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lx-row { display: flex; }
.lx-track { display: flex; gap: 14px; flex: none; will-change: transform; }
/* Position is set by rAF in live-experiment.js — see startRails(). Slowing a
   CSS animation by rewriting its duration makes it jump, because CSS re-derives
   elapsed progress from the new duration. */

.lx-quote {
  flex: none; width: 300px; margin: 0;
  padding: 22px; border-radius: var(--squircle-md);
  border: 1px solid var(--border); background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}
.lx-quote p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.lx-quote cite { display: block; margin-top: 12px; font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--ink-light); }
.lx-quote cite span { font-weight: 400; color: var(--ink-faint); }
.lx-quote.is-short { width: 216px; }
/* Width varies so the rails do not look like a table; WEIGHT does not, which
   made a handful of quotes look like pull-quotes for no reason. */
.lx-quote.is-short { }
.lx-quote.is-long { width: 372px; }

/* ── SECTION 4 · why ────────────────────────────────────────────────────── */
.lx-why-top, .lx-section .lx-narrow { width: min(1000px, calc(100vw - 40px)); margin: 0 auto; }
.lx-why-top { text-align: center; }
.lx-why-open { text-wrap: balance; margin: 0 0 8px; font-size: clamp(24px, 3.6vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
/* Stacked one per line, and the border goes round the WHOLE line — icon and
   words together — rather than framing the icon on its own. */
.lx-needs { margin: 30px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lx-need {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 12px 20px 12px 15px;
  border: 1px solid color-mix(in srgb, var(--tint) 26%, var(--border));
  border-radius: var(--squircle-sm);
  background: var(--card-bg); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-standard, 320ms) var(--ease-settle);
}
/* A small step to the right on hover — enough to feel answered, not enough to
   read as a control, because these are statements and not buttons. */
.lx-need:hover { transform: translateX(2px); }
.lx-need-ico { flex: none; display: inline-flex; color: var(--tint); }
.lx-need-ico svg { width: 21px; height: 21px; }
.lx-need-t { font-size: clamp(15px, 1.9vw, 19px); font-weight: 600; letter-spacing: -.015em; color: var(--ink); line-height: 1.35; }
.lx-need-t i { font-style: normal; font-weight: 400; color: var(--ink-faint); }
.lx-turn { text-wrap: balance; margin: 32px auto 0; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.45; font-weight: 500; color: var(--ink-soft); max-width: 34ch; }
.lx-why-body { margin: 32px auto 0; max-width: 58ch; }
.lx-why-body p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: var(--ink-soft); }

/* Five across, full width, all readable at once — no 4 + 1 grid with a hole
   in the corner. On a phone the same five become a scroll rail. */
/* Small — the art is a 1:1 card, so five of them at full width stay modest. */
.lx-jobs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 56px auto 0; width: min(1000px, 100%); }
.lx-job { margin: 0; }
.lx-job-art { aspect-ratio: 1; overflow: hidden; border-radius: var(--squircle-md); background: var(--bg-subtle); box-shadow: var(--shadow-sm); }
.lx-job-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-job b {
  display: block; margin: 14px 0 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  /* Yellow at 10px on parchment is ~1.9:1 — the hue survives the mix, the
     legibility does not survive without it. */
  color: color-mix(in srgb, var(--tint) 58%, var(--ink));
}
.lx-job span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
/* ── free guides ────────────────────────────────────────────────────────── */
/* Four covers, upright and aligned, each lifting under the cursor. On a phone
   the row becomes a full-bleed scroll rail, the same move the schedule makes. */
.lx-guides { margin: 56px auto 0; width: min(1000px, 100%); text-align: center; }
.lx-guides-kicker { margin: 0 auto; max-width: 24ch; }
.lx-guides-sub { text-wrap: balance; margin: 10px auto 34px; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.5; color: var(--ink-soft); }
.lx-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start; }
.lx-guide { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lx-guide-cover { display: block; width: 100%; max-width: 196px; aspect-ratio: 17 / 22; border-radius: 3px; overflow: hidden; background: var(--bg-subtle);
  box-shadow: 0 18px 28px -16px rgba(20, 14, 6, .5), 0 4px 10px -6px rgba(20, 14, 6, .3);
  transition: transform var(--dur-emphasis, 460ms) var(--ease-settle), box-shadow var(--dur-emphasis, 460ms) var(--ease-settle); }
.lx-guide:hover .lx-guide-cover, .lx-guide:focus-visible .lx-guide-cover {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 36px 44px -20px rgba(20, 14, 6, .55), 0 12px 18px -10px rgba(20, 14, 6, .3); }
.lx-guide-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-guide-name { margin-top: 20px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--tint) 58%, var(--ink)); }
.lx-guide-sub { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.lx-guide-dl { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12px; font-weight: 600;
  background: var(--ink); color: #fff; border-radius: var(--squircle-sm); transition: transform var(--dur-quick, 200ms) var(--ease-settle); }
.lx-guide-dl svg { width: 12px; height: 12px; }
.lx-guide:hover .lx-guide-dl { transform: translateY(-1px); }

/* The ask, as a dialog over the page rather than a frame pushed into it. */
.lx-guide-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lx-guide-modal[hidden] { display: none; }
.lx-guide-scrim { position: absolute; inset: 0; background: rgba(28, 22, 14, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: lx-fade-in var(--dur-standard, 320ms) var(--ease-settle); }
.lx-guide-card { position: relative; width: min(420px, 100%); padding: 28px 24px 24px; background: var(--card-bg); border-radius: var(--squircle-lg); corner-shape: squircle;
  box-shadow: var(--shadow-lg); text-align: center; animation: lx-card-in var(--dur-emphasis, 460ms) var(--ease-settle); }
@keyframes lx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lx-card-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.lx-guide-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink-light); border-radius: 50%; cursor: pointer; }
.lx-guide-x:hover { background: var(--bg-subtle); color: var(--ink); }
.lx-guide-x svg { width: 16px; height: 16px; }
.lx-guide-card-cover { width: 86px; aspect-ratio: 17 / 22; margin: 0 auto 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 10px 18px -10px rgba(20, 14, 6, .5); }
.lx-guide-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-guide-card-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.lx-guide-card-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.lx-guide-tg { width: 100%; margin-top: 20px; gap: 10px; }
.lx-guide-tg svg { width: 18px; height: 18px; }
.lx-guide-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.lx-guide-or::before, .lx-guide-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.lx-guide-form { display: flex; gap: 8px; }
.lx-guide-form input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--squircle-action); corner-shape: squircle;
  transition: border-color var(--dur-quick, 200ms) var(--ease-settle), box-shadow var(--dur-quick, 200ms) var(--ease-settle); }
.lx-guide-form input::placeholder { color: var(--ink-faint); }
.lx-guide-form input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
.lx-guide-send { flex: none; height: 46px; padding: 0 18px; font: inherit; font-size: 14.5px; font-weight: 600; border: 0; background: var(--ink); color: #fff;
  border-radius: var(--squircle-action); corner-shape: squircle; cursor: pointer; }
.lx-guide-send:disabled { opacity: .55; cursor: default; }
.lx-guide-note { margin: 12px 0 0; min-height: 1.2em; font-size: 13px; color: var(--ink-soft); }
.lx-guide-note.is-err { color: #b3261e; }
.lx-guide-note.is-ok { color: var(--ink); font-weight: 500; }
@media (max-width: 700px) {
  .lx-guides { margin-top: 40px; }
  .lx-guides-sub { margin-bottom: 24px; }
  /* Full-bleed rail: first cover starts at the page margin, the rest scroll. */
  .lx-shelf { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; margin-left: -16px; margin-right: -16px; padding: 14px 0 8px 16px; scroll-padding-left: 16px; }
  .lx-shelf::after { content: ''; flex: none; width: 16px; margin-left: -18px; }
  .lx-shelf::-webkit-scrollbar { display: none; }
  .lx-guide { flex: none; width: 168px; scroll-snap-align: start; }
  .lx-guide-cover { max-width: 168px; }
  .lx-guide-name { margin-top: 16px; }
  .lx-guide-modal { align-items: flex-end; padding: 0; }
  .lx-guide-card { width: 100%; border-radius: var(--squircle-lg) var(--squircle-lg) 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .lx-guide-cover, .lx-guide-scrim, .lx-guide-card { transition: none; animation: none; } }

.lx-closer { text-wrap: balance; margin: 56px 0 0; font-size: clamp(22px, 3.2vw, 32px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }

/* ── SECTION 5 · guide ──────────────────────────────────────────────────── */
/* One object, centred: the pill, the title, and Ethan saying it himself. */
.lx-guide { display: flex; justify-content: center; margin-top: 34px; }
.lx-video {
  position: relative; display: block; width: min(760px, 100%);
  aspect-ratio: 16 / 9; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--squircle-lg);
  background: var(--bg-subtle); box-shadow: var(--shadow-md);
  transition: transform var(--dur-standard, 320ms) var(--ease-settle),
              box-shadow var(--dur-standard, 320ms) var(--ease-settle);
}
.lx-video img, .lx-video iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.lx-video:hover { transform: translateY(var(--lift-sm, -2px)); box-shadow: var(--shadow-lg); }
.lx-video.is-live, .lx-video.is-empty { cursor: default; }
.lx-video.is-live:hover, .lx-video.is-empty:hover { transform: none; box-shadow: var(--shadow-md); }
/* The play mark sits over the thumbnail; on the placeholder it is the only
   thing in the box, so it centres with the caption instead. */
.lx-video-play {
  position: absolute; inset: 0; margin: auto;
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 23, 18, .82); color: #fff;
  transition: background var(--dur-standard, 320ms) var(--ease-settle);
}
.lx-video-play svg { width: 26px; height: 26px; }
.lx-video:hover .lx-video-play { background: var(--ink); }
.lx-video.is-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  border-style: dashed; background: transparent; box-shadow: none;
}
.lx-video.is-empty .lx-video-play { position: static; background: var(--border); color: var(--ink-faint); }
.lx-video.is-empty p { margin: 0; font-size: 13px; color: var(--ink-light); }
/* No thumbnail came back — the video is private, or not published yet. Keep
   the frame and the play mark; lose the broken image. */
.lx-video.is-thumbless { background: var(--bg-subtle); }

/* No frame, no card, no rule. The video is the section; this sits under it as
   a caption would — the same thought at a lower volume. */
.lx-guide-quote { margin: 26px auto 0; padding: 0; border: 0; background: none; max-width: 58ch; text-align: center; }
.lx-guide-quote p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); font-weight: 400; letter-spacing: 0; }
.lx-guide-quote em { font-style: italic; color: var(--ink); }
.lx-guide-quote cite { display: block; margin-top: 8px; font-size: 12px; font-style: normal; font-weight: 600; color: var(--ink-faint); }

/* ── SECTION 6 heading ──────────────────────────────────────────────────── */
/* Pill, then title, then the section — the same rhythm the proof wall uses. */
.lx-guide-head { text-align: center; }
.lx-guide-title { margin: 16px 0 0; }
.lx-sec-head { text-align: center; margin-bottom: 4px; }
.lx-sec-head .lx-h2 { margin-top: 16px; }
.lx-schedule-head { padding: 78px 0 0; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .lx-explorer { grid-template-columns: 1fr; gap: 14px; }
  .lx-detail { grid-template-columns: 1fr; gap: 22px; }
  .lx-book { padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid var(--rule); }
  .lx-guide { margin-top: 26px; }
  .lx-detail { padding: 22px; }
}

@media (max-width: 1000px) {
  /* Copy first, laptop beneath it — the words have to land before the picture
     on a screen this narrow. */
  /* Stacked, so the bleed has nowhere to go — cancel the negative margin the
     two-column layout uses, centre it, and let it fill the width. */
  .lx-brand-grid { grid-template-columns: 1fr; gap: 30px; width: min(92vw, 900px); text-align: center; }
  .lx-brand-visual { grid-row: 2; margin-left: 0; max-width: 100%; justify-self: center; width: 90%; }
  .lx-brand-copy { grid-row: 1; }
  .lx-brand-sub, .lx-brand-actions { margin-left: auto; margin-right: auto; }
  .lx-brand-actions { align-items: center; }
}

/* On a phone the rotating word wraps onto its own line, and a short word sat
   left inside a box reserved for the longest — "powerful." with a gap after
   it. Centred in that box, every word lands under the line above. Desktop
   keeps it left: there the word runs on after "more", and the stop stays put. */
@media (max-width: 700px) {
  /* Its own line, always. Left inline, "to be more" and the word shared a line
     for short words and split for long ones, so the layout changed with every
     tick. The width reservation exists to hold a full stop still after an
     inline word; on its own centred line there is nothing to hold. */
  .lx-rot { display: block; text-align: center; min-width: 0 !important; }
}

/* "Next class", pointed at by the checkout's own hand-drawn arrow. */
.lx-next-head { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 10px; }
.lx-next-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.lx-next-arrow { height: 34px; width: auto; margin-left: -15px; transform: translateY(5px) rotate(4deg); opacity: .85; }

/* The $0 mark on every covered card in the schedule below. */
/* The list price stays, struck through, so the $0 is read as a discount and
   not as a different class. */
.mini-pill.lx-zero s { opacity: .55; font-weight: 500; }
.mini-pill.lx-zero i { font-style: normal; margin: 0 4px; opacity: .5; }

/* Register for $0.00, under the guide: one button, one question, four answers. */
.lx-try { margin: 28px auto 0; max-width: 460px; text-align: center; }
.lx-try-cta { width: 100%; }
/* Four tiles, two by two: the art, the name, the button. The border takes the
   class colour on hover — the same tell the feel buttons use. */
.lx-try-card { width: min(640px, 100%); padding-bottom: 22px; }
.lx-try-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.lx-try-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 14px 16px; margin: 0;
  border: 1.5px solid var(--border); border-radius: var(--squircle-md); corner-shape: squircle; background: var(--bg);
  font: inherit; color: var(--ink); cursor: pointer; text-align: center;
  transition: border-color var(--dur-quick, 200ms) var(--ease-settle), box-shadow var(--dur-quick, 200ms) var(--ease-settle), transform var(--dur-quick, 200ms) var(--ease-settle); }
.lx-try-tile:hover, .lx-try-tile:focus-visible { border-color: var(--tint); box-shadow: var(--shadow-sm); transform: translateY(-2px); outline: none; }
.lx-try-art { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--squircle-sm); background: var(--bg-subtle); }
.lx-try-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-try-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.lx-try-go { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 9px 14px;
  border-radius: var(--squircle-action); background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600;
  transition: transform var(--dur-quick, 200ms) var(--ease-settle); }
.lx-try-go svg { width: 13px; height: 13px; transition: transform var(--dur-quick, 200ms) var(--ease-settle); }
.lx-try-tile:hover .lx-try-go { transform: translateY(-1px); }
.lx-try-tile:hover .lx-try-go svg { transform: translateX(2px); }
@media (max-width: 700px) {
  .lx-try-grid { gap: 10px; margin-top: 14px; }
  .lx-try-tile { padding: 10px 10px 12px; gap: 8px; }
  .lx-try-name { font-size: 13.5px; }
  .lx-try-go { padding: 8px 12px; font-size: 12px; }
}

@media (max-width: 700px) {
  .lx-shell, .lx-narrow { width: calc(100vw - 32px); }
  /* Everything in the hero is centred on a phone, and the laptop sits in the
     middle of the frame rather than bleeding off an edge it has no room to
     bleed off. 90vw so the words never touch the sides. */
  .lx-brand { min-height: 0; padding: 88px 0 32px; }
  .lx-brand-grid { width: 92vw; max-width: 92vw; gap: 26px; text-align: center; }
  .lx-brand-visual { width: 100%; }
  .lx-brand-visual { margin-left: 0; max-width: 100%; justify-self: center; }
  .lx-laptop-img { margin: 0 auto; }
  .lx-brand-sub { margin-left: auto; margin-right: auto; }
  .lx-brand-actions { width: 100%; align-items: center; }
  .lx-brand-h1 { text-align: center; }

  /* Section headings and the booking column centre too. */
  .lx-h2, .lx-lede { text-align: center; }
  .lx-book { text-align: center; }
  .lx-book-cta { margin-left: auto; margin-right: auto; }
  .lx-detail-head { justify-content: flex-start; }
  .lx-video-play { width: 54px; height: 54px; }
  .lx-video-play svg { width: 21px; height: 21px; }
  .lx-section, .lx-proof { padding: 64px 0; }
  .lx-hero { padding: 92px 0 32px; }
  /* On a phone the controls SHOULD span the width — that is the one place the
     full bleed is right. Still 3 + 2, still never a carousel. */
  .lx-feels { max-width: none; gap: 9px; margin-top: 32px; }
  .lx-feel { min-height: 84px; padding: 12px 4px; font-size: 9px; letter-spacing: .07em; }
  .lx-feel svg { width: 22px; height: 22px; }

  /* Accordion: the detail opens inside the card that was tapped. */
  .lx-explorer { display: block; }
  /* The list gap was still applying between an open tab and its own panel,
     which left a seam through the middle of one card. */
  .lx-picks { gap: 6px; }
  .lx-picks > .lx-pick.is-on { margin-bottom: -6px; }
  .lx-pick { padding: 15px 16px; border-color: var(--border); background: var(--card-bg); font-size: 14px; }
  .lx-pick.is-on { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .lx-detail { display: block; border: 0; border-radius: 0; box-shadow: none; padding: 4px 0 8px; background: transparent; }
  .lx-book { padding-left: 0; border-left: 0; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .lx-detail-mount {
    /* Height is driven from JS so it can spring from 0 to the measured height;
       overflow hidden is what makes that read as a drawer rather than a clip. */
    overflow: hidden;
    transition: height var(--dur-emphasis, 460ms) var(--ease-spring, cubic-bezier(.18,1.16,.3,1));
    border: 1px solid var(--border); border-top: 0;
    border-radius: 0 0 var(--squircle-sm) var(--squircle-sm);
    background: var(--card-bg); box-shadow: var(--shadow-sm);
    margin: -1px 0 0; padding: 6px 16px 20px;
  }
  .lx-detail h3 { font-size: 19px; }
  .lx-detail-body { font-size: 13.5px; margin-top: 14px; }
  .lx-quote { width: 250px; padding: 18px; }
  .lx-quote.is-short { width: 190px; }
  .lx-quote.is-long { width: 290px; }

  /* A scroll rail rather than five stacked cards — the set should still read
     as a set on a phone. Full-bleed so the first card starts at the margin. */
  .lx-jobs {
    display: flex; gap: 12px; margin-top: 40px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* Full-bleed rail, but the first card still starts at the page margin —
       scroll-padding keeps snap honouring it too. */
    margin-left: -16px; margin-right: -16px;
    /* Padding on the LEFT only. A scroll container's trailing padding is not
       honoured at the far end in every engine — which is why the last card sat
       flush while the first had its margin — so the end gap is a real element
       instead. One mechanism per edge; stacking both gave 45px against 16px. */
    padding: 4px 0 4px 16px; scroll-padding-left: 16px;
  }
  /* The spacer is a flex item, so it also inherits the 12px row gap — cancel
     that so the trailing gap is exactly the 16px the leading padding gives. */
  .lx-jobs::after { content: ''; flex: none; width: 16px; margin-left: -12px; }
  .lx-jobs::-webkit-scrollbar { display: none; }
  .lx-job { flex: none; width: 216px; scroll-snap-align: start; }
  .lx-need { gap: 11px; padding: 10px 15px 10px 12px; }
  .lx-need-ico svg { width: 18px; height: 18px; }
  .lx-need-t { font-size: 14.5px; }
  .lx-detail-head { gap: 14px; }
  .lx-detail-art { width: 76px; }
  .lx-closer { margin-top: 40px; }
}

/* The ticker is decoration. Reduced motion stops it and wraps the cards so
   every quote is still reachable. */
@media (prefers-reduced-motion: reduce) {
  .lx-book-cta, .lx-feel, .lx-pick { transition: none; }
  .lx-word { animation: none; }
  .lx-underline path { animation: none; stroke-dashoffset: 0; }
  .lx-row { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .lx-row .lx-track { flex-wrap: wrap; transform: none !important; }
  .lx-track > .is-dupe { display: none; }
}