/* MEW EDIT sales page: reference reconstruction (docs/website/REFERENCE_RECONSTRUCTION_SPEC_20261024.md).
   Geometry from the measured reference (56px gutters, full-bleed, 9:16 media, 44px fixed chapter bar); colours and
   type from MEW tokens (mew-ui.css): dark page on --mx-ink, coral/violet accents, MEW Thai type stack. */
.es-body { background: #141414; }
.es-body .site-noise { display: none; }
.es-body .site-footer { background: #0f0f10; border-top: 1px solid rgba(var(--es-fg-rgb), .1); }
.es-body .site-footer, .es-body .site-footer a, .es-body .site-footer p, .es-body .footer-bottom { color: #bdb6aa; }
.es-body .site-footer .brand span, .es-body .site-footer a:hover { color: #faf8f5; }
.es-body .skip-link:focus { z-index: 70; }

/* Dark theme. --es-fg-rgb is the ink the alpha hairlines are drawn in, --es-bg-rgb the paper the scrims are
   drawn in; every alpha in this file refers to one of them, so the page flips by editing this block alone. */
.es-page { --es-fg-rgb: 250, 248, 245; --es-bg-rgb: 0, 0, 0;
  --es-bg: #141414; --es-bg-2: #1b1b1f; --es-band: #1e1630; --es-ink: #faf8f5; --es-ink-2: #bdb6aa; --es-muted: #8d877d; --es-line: rgba(var(--es-fg-rgb), .12); --es-line-2: rgba(var(--es-fg-rgb), .22); --es-accent: #ff6a4d; --es-accent-2: #a78bfa; --es-open: #5fd18d; --es-target: #b9a7ff; --es-gutter: 20px;
  background: var(--es-bg); color: var(--es-ink-2); font-size: 15px; line-height: 24px; padding-bottom: 44px; }
@media (min-width: 900px) { .es-page { --es-gutter: 56px; } }
.es-wrap { padding: 0 var(--es-gutter); }
.es-page a { color: inherit; }
.es-section { padding: 64px 0; }
@media (min-width: 900px) { .es-section { padding: 96px 0; } }
.es-band2 { background: var(--es-bg-2); }
.es-band { background: var(--es-band); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* type */
.es-h1 { margin: 0 0 24px; color: var(--es-ink); font-size: clamp(3rem, .75rem + 5.37vw, 5.58rem); font-weight: 700; line-height: 1.06; letter-spacing: -.022em; }
.es-h2 { margin: 0 0 20px; color: var(--es-ink); font-size: clamp(2.25rem, 1.05rem + 3vw, 3.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.es-h3 { margin: 0 0 6px; color: var(--es-ink); font-size: 1.5rem; font-weight: 750; line-height: 1.3; }
.es-eyebrow { margin: 0 0 20px; color: var(--es-accent); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.es-lead { margin: 0 0 18px; max-width: 34em; color: var(--es-ink-2); font-size: 1.06rem; line-height: 1.7; }
.es-lead--2 { font-size: .98rem; color: var(--es-muted); }
.es-italic { margin: 0 0 20px; max-width: 30em; color: var(--es-ink-2); font-size: 1.1rem; line-height: 1.75; }
.es-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; letter-spacing: .02em; color: var(--es-muted); }
.es-note { margin: 18px 0 0; max-width: 60ch; color: var(--es-muted); font-size: .84rem; line-height: 1.6; }
.es-note b { color: var(--es-ink-2); }
.es-link { color: var(--es-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.es-page .mx-target-note { margin: 0 0 20px; color: var(--es-ink-2); line-height: 1.7; }
.es-page .mx-status--target { background: rgba(116, 88, 240, .25); color: var(--es-target); }
.es-tag, .es-chip-state { display: inline-block; padding: .3em .75em; border-radius: 3px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }
.es-tag--open, .es-chip--open { background: rgba(29, 111, 56, .3); color: var(--es-open); }
.es-tag--target, .es-chip--target { background: rgba(116, 88, 240, .25); color: var(--es-target); }
.es-target-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 0 0 20px; }

/* buttons, chips */
.es-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: 4px; background: var(--es-accent); color: #fff; font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: filter .15s, transform .15s; }
.es-btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.es-page a.es-btn, .es-page a.es-btn:hover, .es-page button.es-btn { color: #fff; }
.es-page a.es-btn--ghost, .es-page a.es-btn--ghost:hover { color: var(--es-ink); }
.es-btn--sm { min-height: 38px; padding: 0 16px; font-size: .86rem; }
.es-btn--block { width: 100%; }
.es-chip { display: inline-flex; align-items: center; gap: .4em; min-height: 30px; padding: 0 14px; border: 1px solid var(--es-line-2); border-radius: 999px; background: transparent; color: var(--es-ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.es-chip[aria-pressed="true"] { background: var(--es-ink); color: #141414; border-color: var(--es-ink); }
.es-chip[disabled] { opacity: .45; cursor: not-allowed; }
.es-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.es-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 28px 0 0; }

/* header (static, 64px, like the reference) */
.es-head { display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 var(--es-gutter); border-bottom: 1px solid var(--es-line); background: var(--es-bg); }
.es-brand { display: inline-flex; align-items: baseline; gap: 6px; color: var(--es-ink); font-weight: 900; font-size: 1.2rem; letter-spacing: .02em; text-decoration: none; }
.es-brand small { font-size: .62rem; font-weight: 800; letter-spacing: .18em; color: var(--es-accent); }
.es-head-nav { display: none; margin-left: auto; gap: 26px; }
.es-head-nav a { color: var(--es-ink-2); font-size: .92rem; font-weight: 650; text-decoration: none; }
.es-head-nav a:hover { color: var(--es-ink); }
.es-head .es-btn { margin-left: auto; }
@media (min-width: 900px) { .es-head-nav { display: flex; } .es-head .es-btn { margin-left: 0; } }

/* 01 hero */
.es-hero { padding: 46px 0 56px; }
.es-hero-grid { display: grid; gap: 40px; }
@media (min-width: 1100px) { .es-hero-grid { grid-template-columns: minmax(0, 680fr) minmax(0, 557fr); gap: 64px; align-items: start; } .es-hero { padding-bottom: 70px; } }
.es-hero-secondary { margin: 20px 0 0; }
/* A standalone link, not inline text: at least a 24px tap target (WCAG 2.5.8; P5 QA 26 Oct measured 20px at 390). */
/* Padding grows the tap area to 44px; the equal negative margin keeps the hero layout unchanged. */
.es-hero-secondary .es-link { display: inline-block; padding: 12px 0; margin: -12px 0; }
.es-hero-media { display: grid; justify-items: center; }
@media (min-width: 1100px) { .es-hero-media { padding-top: 40px; } }
.es-hero-media .vs { width: 100%; max-width: 352px; padding: 8px; border: 1px solid var(--es-line-2); border-radius: 8px; background: var(--es-bg-2); box-sizing: border-box; }
@media (min-width: 1100px) { .es-hero-media .vs { max-width: 348px; } }
.es-hero-media .vs-cap { padding: 0 4px; }
.es-offer { margin: 28px 0 0; padding: 24px; border: 1px solid var(--es-line); border-radius: 6px; background: var(--es-bg-2); }
.es-offer .es-eyebrow { margin-bottom: 10px; }
.es-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 6px 0 10px; }
.es-price b { color: var(--es-ink); font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.es-price--inline { margin: 22px 0 14px; }
.es-price--inline b { font-size: 40px; }
.es-price--pending b { color: var(--es-target); font-size: 1.4rem; }
.es-offer-line { margin: 0 0 18px; color: var(--es-ink-2); }
.es-offer-note { margin: 14px 0 0; }
.es-offer-note a { color: var(--es-ink); }
.es-ticks { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.es-ticks--2 { grid-template-columns: 1fr 1fr; }
.es-ticks li { position: relative; padding-left: 22px; font-size: .86rem; line-height: 1.5; }
.es-ticks li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--es-open); font-weight: 800; }

/* video system */
/* Media chrome keeps its own ink: it is drawn over video, so it does not follow the page theme. */
.vs { margin: 0; --vs-scrim: 0, 0, 0; --vs-ink: 255, 255, 255; }
.vs-frame { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border: 1px solid var(--es-line); border-radius: 4px; background: #0d0d0f; }
.vs--16x9 .vs-frame { aspect-ratio: 16 / 9; }
.vs-video, .vs-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-video--under { z-index: 0; }
.vs--wipe .vs-video:not(.vs-video--under) { z-index: 1; clip-path: inset(0 0 0 var(--wipe, 50%)); }
.vs-wipe-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.vs-wipe-line { position: absolute; top: 0; bottom: 0; left: var(--wipe, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(var(--vs-scrim), .35); }
.vs-wipe-handle { position: absolute; top: 50%; left: var(--wipe, 50%); transform: translate(-50%, -50%); display: flex; overflow: hidden; border-radius: 999px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1; box-shadow: 0 4px 16px rgba(var(--vs-scrim), .35); }
.vs-wipe-handle b { padding: 9px 11px; background: rgba(var(--vs-ink), .94); color: #141414; }
.vs-wipe-handle i { padding: 9px 11px; background: #141414; color: #fff; font-style: normal; }
.vs-drag { position: absolute; top: 66%; left: var(--wipe, 50%); transform: translateX(-50%); padding: 5px 10px; border-radius: 999px; background: var(--es-accent); color: #fff; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .62rem; font-weight: 700; letter-spacing: .14em; }
.vs-wipe-label { position: absolute; inset: 0; z-index: 3; display: block; margin: 0; }
.vs-wipe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.vs-badge { position: absolute; left: 10px; top: 10px; z-index: 4; max-width: calc(100% - 20px); padding: 5px 9px; border-radius: 3px; background: rgba(var(--vs-scrim), .74); color: #fff; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; }
.vs-tap { position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 36px; height: 36px; border: 1px solid rgba(var(--vs-ink), .5); border-radius: 50%; background: rgba(var(--vs-scrim), .62); color: #fff; font-size: .8rem; cursor: pointer; }
.vs-state { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; background: rgba(13, 13, 15, .72); color: #fff; text-align: center; }
.vs-state[hidden] { display: none; }
.vs-state p { margin: 0; max-width: 20em; font-size: .85rem; font-weight: 650; line-height: 1.5; }
.vs-state .es-chip { color: #fff; border-color: rgba(var(--vs-ink), .5); }
.vs-spinner { width: 30px; height: 30px; border: 3px solid rgba(var(--vs-ink), .25); border-top-color: #fff; border-radius: 50%; animation: vs-spin .9s linear infinite; }
.vs-state:not([data-kind="loading"]) .vs-spinner { display: none; }
@keyframes vs-spin { to { transform: rotate(360deg); } }
.vs--pending .vs-frame { opacity: .55; }
.vs-pending { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; padding: 8px 10px; border-radius: 3px; background: rgba(var(--vs-scrim), .82); color: #fff; font-size: .74rem; line-height: 1.4; }
.vs-pending b { display: block; }
.vs-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; }
.es-chip--sound[aria-pressed="true"] { background: var(--es-ink); color: #141414; }
.vs--thumb .vs-tap { width: 26px; height: 26px; right: auto; left: 8px; bottom: 8px; font-size: .55rem; }
.vs--thumb .vs-frame { cursor: pointer; }
.vs--card { padding: 8px; border: 1px solid var(--es-line-2); border-radius: 8px; background: var(--es-bg-2); }
.vs--card .vs-cap { padding: 0 4px; }
/* illustration (no approved footage): a drawn take, raw → cut + captions; same frame, badge and wipe as a player */
.vs--illus .vs-frame { background: #141216; }
/* The before/after illustration is drawn inside the video frame, so it keeps the media ink too. */
.vs-illus { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; gap: 7%; padding: 14% 10% 22%; container-type: inline-size; }
.vs-illus--after { background: radial-gradient(120% 70% at 30% 18%, rgba(255, 107, 87, .55), transparent 60%), radial-gradient(110% 80% at 85% 90%, rgba(116, 88, 240, .6), transparent 62%), linear-gradient(160deg, #2a1f2b, #17141c); }
.vs-illus--before { background: linear-gradient(160deg, #3a3733, #232120); filter: saturate(.2); }
.vs-illus-brand { align-self: center; font-weight: 800; font-size: clamp(.9rem, 13cqi, 2.6rem); letter-spacing: .14em; color: rgba(var(--vs-ink), .9); }
.vs-illus-brand small { display: block; margin-top: .2em; font-size: .38em; letter-spacing: .5em; text-align: center; color: rgba(var(--vs-ink), .6); }
.vs-illus-wave { display: flex; align-items: center; gap: 3%; width: 100%; height: 14cqi; }
.vs-illus-wave i { flex: 1; height: calc(var(--h) * 10%); min-height: 2px; border-radius: 2px; background: rgba(var(--vs-ink), .78); }
.vs-illus--after .vs-illus-wave i.is-gap { flex: 0 0 0; margin: 0 -1.5%; opacity: 0; }
.vs-illus--before .vs-illus-wave i.is-gap { background: rgba(var(--vs-ink), .25); }
.vs-illus-cap { padding: .45em .8em; border-radius: 3px; background: rgba(var(--vs-ink), .94); color: #141414; font-size: clamp(.55rem, 6.4cqi, .95rem); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.vs-illus--before .vs-illus-cap { background: rgba(var(--vs-ink), .16); color: #fff; }
.vs-illus-under, .vs-illus-over { position: absolute; inset: 0; }
.vs-illus-over { z-index: 1; clip-path: inset(0 0 0 var(--wipe, 50%)); }
.vs--thumb .vs-illus, .vs--cell .vs-illus { padding: 12% 10% 26%; }
.vs--thumb .vs-illus-cap { display: none; }
.vs--16x9 .vs-illus { padding: 7% 18% 12%; gap: 5%; }
.vs--16x9 .vs-illus-brand { font-size: clamp(.9rem, 7cqi, 2.6rem); }
.vs--16x9 .vs-illus-wave { height: 7cqi; }
.vs--16x9 .vs-illus-cap { font-size: clamp(.55rem, 3cqi, .95rem); }

/* 02 proof */
.es-split { display: grid; gap: 40px; }
.es-split > *, .es-hero-grid > *, .es-panel > *, .es-head-row > *, .es-apply > * { min-width: 0; }
@media (min-width: 1100px) {
  .es-split--proof { grid-template-columns: minmax(0, 498fr) minmax(0, 747fr); gap: 56px; align-items: start; }
  .es-split--layers { grid-template-columns: minmax(0, 564fr) minmax(0, 689fr); gap: 48px; align-items: start; }
  .es-split--modes { grid-template-columns: minmax(0, 742fr) minmax(0, 495fr); gap: 64px; align-items: start; }
  .es-split--style { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .es-split--works { grid-template-columns: minmax(0, 526fr) minmax(0, 775fr); gap: 48px; align-items: start; }
  .es-split--faq { grid-template-columns: minmax(0, 495fr) minmax(0, 928fr); gap: 48px; align-items: start; }
}
.es-shots { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; max-width: 748px; }
.es-shots .vs-cap { flex-direction: column; align-items: flex-start; gap: 6px; }
.es-rule { height: 1px; margin: 72px 0; background: var(--es-line); }

/* 03 layers */
.es-flow { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.es-status-list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px; min-width: 0; }
.es-status-item { min-width: 0; max-width: 100%; overflow-wrap: anywhere; padding: 8px 0 8px 14px; border-left: 2px solid var(--es-accent); }
.es-flow-step { padding: 16px 0 16px 22px; border-left: 2px solid transparent; opacity: .45; transition: opacity .3s, border-color .3s; }
.es-flow-step .es-h3 { font-size: 1.3rem; margin-bottom: 2px; }
.es-flow-step > p { margin: 0 0 6px; font-size: .95rem; line-height: 1.55; }
.es-flow-step.is-on { opacity: 1; border-left-color: var(--es-accent); }
.es-flow-step .es-flow-today, .es-state-card .es-flow-today { margin: 6px 0 0; color: var(--es-muted); font-size: .82rem; line-height: 1.5; }
.es-flow-today span { display: block; color: var(--es-accent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.es-layers-head { grid-column: 1 / -1; max-width: 600px; }
.es-layers-head .es-h2 { margin-bottom: 8px; }
.es-sticky { display: grid; justify-items: center; }
.es-sticky .vs { width: 100%; max-width: 240px; margin: 0; }
.es-layers .vs-frame { border-color: transparent; box-shadow: 0 30px 80px rgba(var(--es-bg-rgb), .35); }
@media (min-width: 1100px) { .es-sticky { position: sticky; top: 120px; } }
@media (max-width: 1099px) { .es-split--layers .es-layers-head { order: -2; } .es-split--layers .es-sticky { order: -1; } .es-split--layers .es-sticky .vs { max-width: 262px; } }

/* 04 modes */
.es-modes { display: grid; margin: 28px 0 24px; }
.es-mode { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 24px; align-items: start; padding: 24px 0 24px 22px; border: 0; border-left: 2.4px solid transparent; border-bottom: 1px solid var(--es-line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; opacity: .5; transition: opacity .2s; }
.es-mode:first-child { border-top: 1px solid var(--es-line); }
.es-mode[aria-pressed="true"] { opacity: 1; border-left-color: var(--es-accent); }
.es-mode-main { display: grid; gap: 6px; }
.es-mode-main b { font-size: 2rem; }
.es-mode[aria-pressed="false"] .es-mode-main span { display: none; }
.es-mode-media { display: grid; justify-items: center; }
.es-mode-media .vs { width: 100%; max-width: 352px; }
@media (min-width: 1100px) { .es-mode-media { justify-items: start; padding-left: 60px; } }

/* 05 looks */
.es-head-row { display: grid; gap: 24px; align-items: end; margin-bottom: 36px; }
@media (min-width: 1100px) { .es-head-row { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } .es-storyboard .es-head-row { grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); } }
.es-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1100px) { .es-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1102px; } }
.es-cell { margin: 0; }
.es-cell figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; margin-top: 12px; }
.es-cell figcaption b { font-size: 1.4rem; }
.es-cell figcaption em { grid-column: 1 / -1; color: var(--es-muted); font-size: .9rem; font-style: normal; }
.es-cell--target { opacity: .78; }
.es-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; }

/* 06 effects */
.es-bignum { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.es-bignum b { color: var(--es-ink); font-size: 88px; font-weight: 800; line-height: .9; letter-spacing: -.03em; }
.es-bignum span { padding-top: 8px; color: var(--es-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.es-wall { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
@media (min-width: 900px) { .es-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .es-wall { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px 14px; } }
.es-wall-label { display: flex; gap: 8px; margin-top: 8px; color: var(--es-ink); font-size: .84rem; font-weight: 650; line-height: 1.4; }
.es-wall-label i { color: var(--es-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; font-style: normal; font-weight: 600; line-height: 1.7; }
.es-wall-target { opacity: .6; }

/* 07 style */
.es-rise { margin: 28px 0; padding: 0; list-style: none; }
.es-rise li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 22px 0; border-bottom: 1px solid var(--es-line); }
.es-rise li:first-child { border-top: 1px solid var(--es-line); }
.es-rise b { color: var(--es-accent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.4rem; font-weight: 800; line-height: 1; }
.es-rise p { margin: 0; }
.es-rise--sm li { padding: 14px 0; }
.es-rise--sm h4 { margin: 0 0 4px; color: var(--es-ink); font-size: 1rem; }
.es-style-media { display: grid; gap: 14px; justify-items: center; }
@media (min-width: 1100px) { .es-style-media { justify-items: end; } }
.es-style-media .vs { width: 100%; max-width: 352px; }

/* 08 storyboard */
.es-scrub { width: 100%; max-width: 420px; align-self: end; }
.es-scrub { position: relative; }
.es-scrub-bar { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; height: 8px; }
.es-scrub-bar i { border-radius: 1px; background: rgba(var(--es-fg-rgb), .14); }
.es-scrub-bar i.is-on { background: var(--es-accent); }
.es-scrub input { position: absolute; left: 0; top: -12px; width: 100%; height: 32px; margin: 0; opacity: 0; cursor: pointer; }
.es-scrub:has(input:focus-visible) .es-scrub-bar { outline: 2px solid #fff; outline-offset: 6px; }
.es-scrub-time { margin-top: 8px; }
.es-scrub-time { display: flex; justify-content: space-between; }
.es-beats { display: grid; gap: 14px; margin: 0; padding: 4px 0 8px; overflow: visible; }
.es-beats::-webkit-scrollbar { display: none; }
/* stacked fallback: every beat readable at full width, nothing dimmed, nothing to drag */
.es-beats > .es-beat { flex: none; width: auto; opacity: 1; scroll-snap-align: none; }
/* the scrub stays for keyboard and screen readers, but nothing about it is shown: the page scrolls, that is all */
.es-scrub { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.es-beat { flex: 0 0 min(545px, 86vw); padding: 16px; border: 1px solid var(--es-line); border-radius: 6px; background: var(--es-bg); scroll-snap-align: start; opacity: .6; transition: opacity .3s; }
.es-beat.is-on { opacity: 1; }
.es-beat-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.es-beat-frames img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 3px; }
.es-sb-intro { padding-bottom: 8px; }
.es-sb-stagehead { opacity: .7; margin: 2px 0 0; }
/* The pinned stage must fit the viewport or the engine falls back to a stack, so inside it the board stays compact:
   the explanation lives above the pin, and the frames are capped rather than left to grow with the card. */
.es-storyboard.is-pinned .es-head-row { align-items: end; }
.es-storyboard.is-pinned .es-beat-frames img { aspect-ratio: 3 / 4; max-height: 190px; }
.es-storyboard.is-pinned .es-beat { padding: 14px; }
.es-beat-meta { display: flex; gap: 14px; margin: 14px 0 6px; }
.es-beat-state--keep { color: var(--es-open); }
.es-beat-state--cut { color: #ff9f8f; }
.es-beat p { margin: 0; }
.es-beat--then { display: grid; align-content: center; gap: 12px; padding: 40px 32px; background: var(--es-band); }
.es-beat--then .es-h2 { margin: 0; }
.es-fake-btn { display: inline-block; justify-self: start; padding: 12px 18px; border-radius: 4px; background: var(--es-ink); color: #141414; font-weight: 700; }

/* 09 inside */
.es-inside { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--es-line); }
.es-inside li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--es-line); }
@media (min-width: 900px) { .es-inside li { grid-template-columns: 110px minmax(0, 1fr) auto; } }
.es-idx { color: var(--es-accent-2); }
.es-inside h3 { font-size: 2rem; }
.es-inside p { margin: 0; }
.es-inside-meta.is-target, .es-works .is-target { color: var(--es-target); }
.es-facts { margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
@media (min-width: 900px) { .es-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.es-facts .mx-card { background: var(--es-bg); border-color: var(--es-line); box-shadow: none; }
.es-facts .mx-card h4 { margin: 0 0 6px; color: var(--es-ink); font-size: 1rem; }
.es-facts .mx-card p { margin: 0; color: var(--es-ink-2); font-size: .9rem; line-height: 1.6; }

/* 10 pilot / works */
.es-panel { display: grid; gap: 32px; }
@media (min-width: 1100px) { .es-panel { grid-template-columns: minmax(0, 618fr) minmax(0, 683fr); gap: 64px; } }
.es-panel .es-ticks li { font-size: 1rem; }
.es-panel .es-ticks li b { color: var(--es-ink); }
.es-draft { display: inline-block; margin: 0 0 20px; padding: .45em .9em; border: 1px dashed var(--es-target); border-radius: 3px; color: var(--es-target); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .74rem; font-weight: 700; line-height: 1.4; }
.es-pilot-terms { display: grid; gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--es-line); }
@media (min-width: 900px) { .es-pilot-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.es-pilot-terms ul { margin: 0; padding-left: 1.1em; }
.es-pilot-terms p { margin: 0 0 6px; }
.es-pilot-terms .es-h3 { font-size: 1.1rem; }
.es-works { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--es-line); }
.es-works li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--es-line); }
.es-works li > span:first-of-type { grid-column: 1 / -1; }
@media (min-width: 900px) { .es-works li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .es-works li > span:first-of-type { grid-column: auto; } }
.es-works b { margin: 0; font-size: 1.5rem; }
.es-facts-line { margin-top: 20px; }

/* 11 faq */
.es-faq details { border-top: 1px solid var(--es-line); }
.es-faq details:last-child { border-bottom: 1px solid var(--es-line); }
.es-faq summary { position: relative; padding: 26px 40px 26px 0; color: var(--es-ink); font-size: 1.5rem; font-weight: 700; line-height: 1.3; list-style: none; cursor: pointer; }
.es-faq summary::-webkit-details-marker { display: none; }
.es-faq summary::after { content: '+'; position: absolute; right: 0; top: 20px; color: var(--es-ink-2); font-size: 1.8rem; font-weight: 300; }
.es-faq details[open] summary::after { content: '–'; }
.es-faq p { margin: 0 0 28px; max-width: 60ch; line-height: 1.75; }
.es-faq a { color: var(--es-ink); }

/* 12 final + application */
.es-final { padding: 110px 0 96px; text-align: center; }
.es-final-copy { max-width: 640px; margin: 0 auto 72px; }
.es-final .es-h1 { font-size: clamp(2.75rem, .75rem + 5.37vw, 5.58rem); }
.es-final .es-lead { margin-inline: auto; }
.es-apply { display: grid; gap: 32px; text-align: left; }
@media (min-width: 980px) { .es-apply { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.es-apply-copy .es-rise { margin-top: 12px; }
.es-intent { margin: 0 0 12px; padding: 10px 14px; border-radius: 4px; background: rgba(116, 88, 240, .25); color: var(--es-target); font-size: .9rem; font-weight: 700; line-height: 1.5; }
.es-intent[hidden] { display: none; }

/* 13 fixed chapter bar */
.es-tl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; height: 44px; padding: 0 14px 0 var(--es-gutter); border-top: 1px solid var(--es-line); background: var(--es-band); color: var(--es-ink); }
.es-tl[hidden] { display: none; }
/* A parked chapter ships but never renders (founder 4 Nov). */
.es-section[hidden] { display: none; }
.es-tc { min-width: 9ch; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
.es-tl-segs { display: flex; gap: 4px; margin: 0; padding: 0; min-width: 0; list-style: none; overflow: hidden; }
.es-tl-segs li { position: relative; flex: var(--w, 1) 1 0; min-width: 0; }
.es-tl-segs a { display: block; height: 22px; padding: 0 8px; border-radius: 2px; background: rgba(var(--es-fg-rgb), .08); color: var(--es-ink-2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; line-height: 22px; text-transform: uppercase; text-decoration: none; white-space: nowrap; overflow: hidden; }
.es-tl-segs a[aria-current] { background: rgba(var(--es-fg-rgb), .18); color: var(--es-ink); }
.es-tl-segs li::before { content: ''; position: absolute; top: -7px; left: calc(var(--ph, 0) * 100%); width: 2px; height: 36px; background: var(--es-accent); opacity: 0; }
.es-tl-segs li.is-on::before { opacity: 1; }
.es-tl .es-btn--sm { min-height: 30px; padding: 0 14px; font-size: .84rem; }
.es-tl-progress { position: absolute; left: 0; top: -1px; width: 100%; height: 2px; transform-origin: left; background: var(--es-accent); }
@media (max-width: 899px) {
  .es-page { padding-bottom: 40px; }
  .es-tl { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; height: 40px; padding: 0 10px; }
  .es-tc { display: none; }
  .es-tl-segs li { flex: 0 0 auto; }
  /* 24px-tall targets drawing a 6px bar, so the strip stays tappable on mobile */
  .es-tl-segs a { width: 14px; height: 24px; padding: 0; border-radius: 0; background: transparent; font-size: 0; line-height: 0; }
  .es-tl-segs a::before { content: ''; display: block; height: 6px; margin-top: 9px; border-radius: 1px; background: rgba(var(--es-fg-rgb), .08); }
  .es-tl-segs a[aria-current]::before { background: rgba(var(--es-fg-rgb), .18); }
  .es-tl-segs a[aria-current] { background: transparent; }
  .es-tl-segs li::before { top: 0; height: 24px; }
  .es-chip--sound [data-vs-sound-label] { display: none; }
  .es-tl .es-chip--sound { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) { .vs-spinner { animation: none; } .es-flow-step, .es-beat, .es-mode, .es-btn { transition: none; } }

/* strip under the hero (reference: 4 columns 434/289/289/289) */
/* The comparison table that replaced the four-up strip. It scrolls sideways on a phone rather than
   wrapping into something unreadable, and the MEW column is tinted so the eye lands on it. */
.es-cmp-scroll { margin: 24px 0 0; overflow-x: auto; }
.es-cmp { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: .9rem; }
.es-cmp th, .es-cmp td { padding: 14px 16px; border-bottom: 1px solid var(--es-line); text-align: left; vertical-align: top; line-height: 1.5; }
.es-cmp thead th { color: var(--es-ink); font-size: 1rem; border-bottom: 1px solid var(--es-line-2); }
.es-cmp tbody th { width: 15rem; color: var(--es-ink-2); font-weight: 500; }
.es-cmp td { color: var(--es-muted); }
.es-cmp .is-mew { background: rgba(var(--es-fg-rgb), .05); color: var(--es-ink); }
.es-cmp thead .is-mew { color: var(--es-accent); }
.es-cmp tbody tr:last-child th, .es-cmp tbody tr:last-child td { border-bottom: 0; }

.es-strip { display: grid; gap: 14px 24px; padding-top: 28px; padding-bottom: 8px; border-top: 1px solid var(--es-line); }
@media (min-width: 900px) { .es-strip { grid-template-columns: minmax(0, 434fr) repeat(3, minmax(0, 289fr)); padding-top: 32px; } }
.es-strip > div { display: grid; gap: 4px; }
.es-strip b { color: var(--es-ink); font-size: 1rem; }
.es-strip span { color: var(--es-muted); font-size: .9rem; line-height: 1.55; }
.es-h2--sm { font-size: clamp(1.75rem, 1rem + 1.9vw, 2.6rem); }

/* every synthetic-fixture player says so, including thumbnails and dated proof shots */
/* bottom-left, clear of the play button (bottom-right); thumbnails have the button bottom-left, so there it flips */
.vs-badge--syn { top: auto; left: 10px; right: auto; bottom: 10px; max-width: calc(100% - 60px); background: rgba(116, 88, 240, .85); font-size: .56rem; padding: 4px 6px; }
.vs--thumb .vs-badge--syn { left: auto; right: 6px; bottom: 6px; max-width: calc(100% - 44px); font-size: .5rem; padding: 3px 5px; letter-spacing: .04em; }
.vs--thumb .vs-tap:focus-visible, .vs-tap:focus-visible, .es-chip:focus-visible, .es-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Private Alpha vs Founder Pilot comparison (pilot chapter) */
.es-compare { margin-top: 40px; border-top: 1px solid var(--es-line); }
.es-compare [role="row"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--es-line); }
@media (min-width: 700px) { .es-compare [role="row"] { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.es-compare [role="rowheader"], .es-compare [role="columnheader"] { color: var(--es-ink); font-weight: 750; }
.es-compare [role="cell"] { color: var(--es-ink-2); line-height: 1.6; }
.es-compare-head { color: var(--es-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 699px) { .es-compare-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .es-compare [role="cell"]::before { display: block; color: var(--es-muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } .es-compare [role="cell"]:nth-child(2)::before { content: 'Private Alpha · ฟรี'; } .es-compare [role="cell"]:nth-child(3)::before { content: 'Founder Pilot · บริการ'; } }

/* 10 included grid (plain) + add-on panel (band) */
.es-included { display: grid; gap: 0; margin: 36px 0 8px; border-top: 1px solid var(--es-line); }
.es-included > div { padding: 28px 0; border-bottom: 1px solid var(--es-line); }
.es-included p { margin: 0; color: var(--es-ink-2); line-height: 1.65; }
.es-eyebrow--sm { font-size: .66rem; margin-bottom: 10px; }
.es-h3--lg { font-size: 1.9rem; margin-bottom: 8px; }
@media (min-width: 900px) { .es-included { grid-template-columns: 1fr 1fr; column-gap: 56px; } .es-included > div:nth-child(odd) { padding-right: 56px; border-right: 1px solid var(--es-line); } }
.es-addon { margin: 72px calc(-1 * var(--es-gutter)) 0; padding: 72px var(--es-gutter); background: var(--es-band); }
.es-addon .es-panel { margin: 0; }
.es-pilot .es-compare { margin-top: 56px; }
/* scroll reveal (the reference fades chapters in); off with reduced motion */
.es-reveal { opacity: 0; transform: translateY(14px); }
.es-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce), print { .es-reveal { opacity: 1; transform: none; transition: none; } }

/* LAYERS pacing: each step owns a stretch of scroll while the reel + state card stay pinned (reference pattern) */
@media (min-width: 1100px) {
  .es-flow { gap: 0; }
  .es-flow-step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding-top: 24px; padding-bottom: 24px; }
  .es-flow-step:first-child { min-height: 32vh; }
  .es-sticky-inner { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 280px); gap: 28px; align-items: end; justify-content: center; width: 100%; }
  .es-sticky-inner .vs { max-width: 250px; }
  .es-flow-step { align-items: flex-start; }
}
.es-state-card { width: 100%; max-width: 320px; padding: 16px 18px; border: 1px solid var(--es-line); border-radius: 6px; background: var(--es-bg-2); }
.es-state-card .es-h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.es-state-card [data-layer-card-chip] { margin: 0 0 10px; }
.es-state-card-feel { margin: 0 0 10px; color: var(--es-ink); font-size: .98rem; line-height: 1.6; }
.es-state-card .es-flow-today { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--es-line); }
.es-state-card .es-flow-today em { font-style: normal; }
@media (max-width: 1099px) { .es-state-card { display: none; } }

/* STORYBOARD pin: vertical scroll drives the horizontal strip on desktop; the snap scroller is the fallback */
@media (min-width: 1100px) {
  .es-storyboard.is-pinned { padding: 0; }
  .es-storyboard.is-pinned .es-pin { height: calc(100vh * 3.2); }
  /* minmax(0,1fr) + min-width:0: the non-shrinking cards must overflow the wrap, not widen it */
  .es-storyboard.is-pinned .es-pin-stage { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding-bottom: 60px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; overflow: hidden; overflow: clip; }
  .es-storyboard.is-pinned .es-pin-stage > .es-wrap { min-width: 0; width: 100%; }
  .es-storyboard.is-pinned .es-beats { display: flex; gap: 20px; overflow: visible; scroll-snap-type: none; will-change: transform; transition: none; }
  .es-storyboard.is-pinned .es-beats > .es-beat { flex: 0 0 440px; width: auto; opacity: .6; }
  .es-storyboard.is-pinned .es-beats > .es-beat.is-on { opacity: 1; }
  .es-storyboard.is-pinned .es-head-row { margin-bottom: 24px; }
  .es-storyboard.is-pinned .es-beats { padding-bottom: 4px; }
  .es-storyboard.is-pinned .es-note { margin-top: 10px; max-width: none; }
}
/* reveal: a focused element inside an un-revealed block reveals it (keyboard users never focus invisible content) */
.es-reveal:focus-within { opacity: 1; transform: none; }

/* FEEL line per step: visible on mobile; on desktop the pinned state card shows it, so it stays for screen readers only */
.es-flow-step .es-flow-feel { margin: 4px 0 6px; color: var(--es-ink); font-style: normal; }
@media (min-width: 1100px) { .es-flow-step .es-flow-feel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } }

/* Reference-Plus r1: availability vocabulary, hero truth line, two choices, two brains, looks, MEW PLAY */
:root { --es-lab: #f2b84b; }
.es-tag--lab { background: rgba(242, 184, 75, .18); color: var(--es-lab); }
.es-hero-truth { margin: 14px 0 0; max-width: 560px; color: var(--es-ink-2); font-size: .95rem; line-height: 1.6; }
.es-hero-truth .es-tag { margin-right: 6px; vertical-align: 1px; }
.es-hero-truth a { color: var(--es-ink); }
.es-legend { list-style: none; display: grid; gap: 6px; margin: 18px 0 22px; padding: 0; font-size: .82rem; color: var(--es-muted); }
.es-legend li { display: flex; gap: 10px; align-items: baseline; }
.es-legend .es-tag { flex: 0 0 auto; min-width: 104px; text-align: center; }
.es-mode-kind { display: block; margin: 2px 0 6px; color: var(--es-muted); font-size: .72rem; letter-spacing: .08em; }
.es-story { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--es-line); display: grid; gap: 32px; }
@media (min-width: 1100px) { .es-story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; } }
.es-story-opts { display: grid; gap: 12px; margin-top: 20px; }
.es-story-opt { display: grid; gap: 6px; padding: 18px 20px; text-align: left; color: var(--es-ink-2); background: transparent; border: 1px solid var(--es-line); border-radius: 6px; cursor: pointer; font: inherit; line-height: 1.6; }
.es-story-opt[aria-pressed="true"] { border-color: var(--es-accent); background: rgba(var(--es-fg-rgb), .03); }
.es-story-opt:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.es-story-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.es-story-top .es-h3 { margin: 0; color: var(--es-ink); }
.es-take-title { margin: 0 0 10px; color: var(--es-muted); }
.es-take { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--es-line); }
.es-take li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--es-line); }
.es-take .es-mono { color: var(--es-muted); font-size: .76rem; padding-top: 3px; }
.es-take-line { color: var(--es-ink); }
.es-take-mark { grid-column: 2; color: var(--es-muted); font-size: .84rem; }
.es-take li.is-cut .es-take-line { color: var(--es-muted); text-decoration: line-through; text-decoration-color: var(--es-accent); }
.es-take li.is-cut .es-take-mark { color: var(--es-accent); }
.es-take--growth li .es-mono { color: var(--es-target); }
.es-take-foot { margin: 10px 0 0; color: var(--es-muted); font-size: .84rem; }
[data-intent-view][hidden] { display: none; }
.es-brains { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--es-line); }
.es-brains-head { max-width: 720px; }
.es-brains-track { position: relative; height: 44px; margin: 28px 0 8px; border-bottom: 1px solid var(--es-line-2, rgba(var(--es-fg-rgb),.2)); }
.es-brains-dot { position: absolute; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; padding: 0; border-radius: 50%; border: 2px solid var(--es-bg); cursor: pointer; }
.es-brains-dot::after { content: ''; position: absolute; inset: -5px; }
.es-brains-t0, .es-brains-t1 { pointer-events: none; }
.es-brains-truth { margin: 0 0 10px; color: var(--es-ink); font-weight: 600; }
.es-tag--inline { vertical-align: middle; font-size: .62rem; position: relative; top: -.4em; }
/* Sales page feature list: one card per feature, grouped by status. */
.es-feat-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; }
.es-feat-status--available { background: rgba(29, 111, 56, .3); color: var(--es-open); }
.es-feat-status--beta { background: rgba(242, 184, 75, .18); color: var(--es-lab); }
.es-feat-status--coming_soon { background: rgba(116, 88, 240, .25); color: var(--es-target); }
.es-feat-status--planned { background: transparent; border: 1px dashed var(--es-line); color: var(--es-muted); }
.es-feat-group { margin-top: 36px; }
.es-feat-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .es-feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.es-feat { padding: 20px; border: 1px solid var(--es-line); overflow-wrap: anywhere; }
.es-feat h4 { margin: 0 0 8px; font-size: 1.1rem; }
.es-feat p { margin: 0 0 8px; }
.es-feat-en { color: var(--es-muted); font-size: .9rem; }
.es-feat[data-sales-status="coming_soon"] { border-style: dashed; opacity: .85; }
.es-take-cut { color: var(--es-muted); text-decoration: line-through; text-decoration-color: var(--es-accent); }
.es-brains-dot--creative { background: var(--es-accent); bottom: 14px; }
.es-brains-dot--marketing { background: var(--es-target); }
.es-brains-dot.is-on { box-shadow: 0 0 0 4px rgba(var(--es-fg-rgb), .35); }
.es-brains-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.es-brains-t0, .es-brains-t1 { position: absolute; bottom: -24px; color: var(--es-muted); font-size: .7rem; }
.es-brains-t1 { right: 0; }
.es-brains-lanes { display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 900px) { .es-brains-lanes { grid-template-columns: 1fr 1fr; gap: 48px; } }
.es-brains-name { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px; }
.es-brains-name b { font-size: 1.15rem; }
.es-brains-lane--creative .es-brains-name b { color: var(--es-accent); }
.es-brains-lane--marketing .es-brains-name b { color: var(--es-target); }
.es-brains-name span { color: var(--es-muted); font-size: .86rem; }
.es-brains-lane ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--es-line); }
.es-brains-lane li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--es-line); transition: background .25s; }
.es-brains-lane li .es-mono { color: var(--es-muted); font-size: .76rem; padding-top: 3px; }
.es-brains-lane li p { margin: 4px 0 0; color: var(--es-ink-2); font-size: .92rem; line-height: 1.6; }
.es-brains-lane li .es-tag { margin-left: 6px; }
.es-brains-lane li.is-on { background: rgba(var(--es-fg-rgb), .04); }
.es-looks4 { margin: 28px 0 8px; }
.es-looks4 ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--es-line); }
.es-looks4 li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--es-line); }
.es-looks4 li span:not(.es-tag) { grid-column: 1 / -1; color: var(--es-ink-2); font-size: .9rem; }
.es-looks4 li .es-tag { justify-self: start; }
.es-play { margin: 56px 0 24px; padding: 40px clamp(20px, 4vw, 48px); border: 1px solid var(--es-line); border-radius: 8px; background: var(--es-bg-2); display: grid; gap: 24px; }
.es-play-scenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.es-play-scenes li { display: grid; gap: 6px; padding: 16px; border: 1px dashed var(--es-line-2, rgba(var(--es-fg-rgb),.2)); border-radius: 6px; }
.es-play-scenes b { font-size: 1.05rem; }
.es-play-scenes span:not(.es-mono) { color: var(--es-ink-2); font-size: .9rem; line-height: 1.6; }
.es-play-scenes .es-mono { color: var(--es-muted); font-size: .72rem; }
.es-play .es-note .es-tag { margin-right: 6px; }
.es-hero-truth a { white-space: nowrap; }

/* Commerce draft (preview-only until approved): offer stack + purchase page */
.es-offers { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--es-line); }
.es-commerce-draft { display: inline-block; margin: 8px 0 20px; padding: 8px 12px; border: 1px dashed var(--es-lab); border-radius: 4px; color: var(--es-lab); font-size: .86rem; }
.es-ocards, .es-checkout-offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.es-ocard, .es-checkout-offers > li { display: grid; gap: 10px; align-content: start; padding: 24px; border: 1px solid var(--es-line); border-radius: 8px; background: var(--es-bg-2); }
.es-ocard > p, .es-checkout-offers > li > p { margin: 0; color: var(--es-ink-2); line-height: 1.6; }
.es-ocard .es-btn { justify-self: start; margin-top: 6px; }
.es-terms { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 6px 0; font-size: .9rem; }
.es-terms dt { color: var(--es-muted); }
.es-terms dd { margin: 0; color: var(--es-ink); }
.es-pending { color: var(--es-lab); }
.es-checkout .es-head { position: static; }
.es-checkout-steps { margin-top: 40px; max-width: 720px; }
.es-checkout-steps button[disabled] { opacity: .5; cursor: not-allowed; }
.es-status-list { list-style: none; margin: 20px 0; padding: 0; border-top: 1px solid var(--es-line); }
.es-status-list li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 160px) minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--es-line); }
.es-status-list .es-mono { color: var(--es-muted); font-size: .76rem; padding-top: 3px; }
.es-status-list span:not(.es-mono) { color: var(--es-ink-2); }
@media (max-width: 720px) { .es-status-list li { grid-template-columns: 1fr; } }

/* JTBD shift (TAKE): now → with MEW EDIT, each row with today's status */
.es-shift { margin-top: 96px; }
.es-shift-rows { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--es-line); }
.es-shift-rows li { display: grid; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--es-line); }
@media (min-width: 900px) { .es-shift-rows li { grid-template-columns: minmax(0, 5fr) 40px minmax(0, 6fr); align-items: start; gap: 16px; } }
.es-shift-rows p { margin: 0; line-height: 1.6; }
.es-shift-rows .es-mono { display: block; margin-bottom: 4px; color: var(--es-muted); font-size: .7rem; letter-spacing: .08em; }
.es-shift-now { color: var(--es-muted); font-size: 1.05rem; }
.es-shift-goal > p:first-child { color: var(--es-ink); font-size: 1.15rem; font-weight: 600; }
.es-shift-arrow { color: var(--es-accent); font-size: 1.4rem; line-height: 1.6; padding-top: 18px; }
@media (max-width: 899px) { .es-shift-arrow { display: none; } }
.es-shift-today { margin-top: 8px !important; color: var(--es-ink-2); font-size: .9rem; }
.es-shift-today .es-tag { margin-right: 6px; }
.es-nobr { white-space: nowrap; }

/* Basic Assisted Cut: what the installed build does, named, under the three development-build modes */
.es-basic { margin: 22px 0 6px; padding: 16px 18px; border: 1px solid var(--es-line); border-left: 3px solid var(--es-open); border-radius: 6px; }
.es-basic p { margin: 0; color: var(--es-ink-2); line-height: 1.6; }
.es-basic-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px !important; color: var(--es-ink) !important; }
.es-basic-not { margin-top: 6px !important; color: var(--es-muted) !important; font-size: .88rem; }

/* Purchase page: unapproved-offer state, who can buy, return/cancel notices, internal sandbox test panel */
.es-offer-off { margin: 4px 0 0 !important; padding: 10px 12px; border-radius: 4px; background: rgba(242, 184, 75, .1); color: var(--es-lab) !important; font-size: .88rem; }
.es-checkout-who { margin-top: 40px; max-width: 720px; }
.es-checkout-who p { color: var(--es-ink-2); line-height: 1.6; }
.es-checkout-notice:focus { outline: 2px solid #fff; outline-offset: 3px; }
.es-checkout-notice { margin: 8px 0 24px; padding: 16px 18px; border: 1px solid var(--es-line); border-left: 3px solid var(--es-accent); border-radius: 6px; max-width: 720px; }
.es-checkout-notice p { margin: 6px 0 0; color: var(--es-ink-2); }
.es-sandbox { margin-top: 48px; padding: 20px; border: 1px dashed var(--es-line-2, rgba(var(--es-fg-rgb),.2)); border-radius: 8px; max-width: 720px; }
.es-sandbox p { color: var(--es-ink-2); }
.es-sandbox-field { display: grid; gap: 6px; margin: 12px 0; font-size: .88rem; color: var(--es-muted); }
.es-sandbox-field input { padding: 10px 12px; border: 1px solid rgba(var(--es-fg-rgb), .45); border-radius: 4px; background: var(--es-bg); color: var(--es-ink); font: inherit; }
.es-sandbox-status { min-height: 1.6em; }
.es-sandbox[data-state="error"] .es-sandbox-status { color: #ff8a7a; }
.es-sandbox[data-state="created"] .es-sandbox-status { color: var(--es-ink); }
.es-sandbox [data-sandbox-start][aria-busy="true"] { opacity: .6; cursor: progress; }

/* real-media slots */
.es-basic-media { margin-top: 14px; }
.es-basic-media .vs { max-width: 560px; }
[data-intent-view] .vs { margin: 0 0 14px; max-width: 560px; }
.es-play-scenes .vs { margin-bottom: 8px; }

/* Mobile length: swipe rows (the reference's mobile rhythm) and one brain lane at a time */
.es-brains-tabs { display: none; gap: 8px; margin: 28px 0 0; }
.es-brains-tabs button { padding: 8px 14px; border: 1px solid var(--es-line); border-radius: 999px; background: transparent; color: var(--es-ink-2); font: inherit; font-size: .9rem; cursor: pointer; }
.es-brains-tabs button[aria-pressed="true"] { border-color: var(--es-ink); color: var(--es-ink); }
.es-brains-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 899px) {
  .es-swipe { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(-1 * var(--es-gutter)); margin-right: calc(-1 * var(--es-gutter)); padding: 4px var(--es-gutter) 14px; border-top: 0 !important; }
  .es-swipe > li { flex: 0 0 84%; scroll-snap-align: start; }
  .es-shift-rows.es-swipe > li { border: 1px solid var(--es-line); border-radius: 8px; padding: 16px; }
  .es-brains-tabs:not([hidden]) { display: flex; }
  .es-brains-lanes[data-active="creative"] .es-brains-lane--marketing, .es-brains-lanes[data-active="marketing"] .es-brains-lane--creative { display: none; }
  .es-brains-lanes { margin-top: 18px; }
}
.es-swipe::-webkit-scrollbar { display: none; }
/* the style strip is a horizontal shelf by design, but it shows no track: founder, 5 Nov 2026 */
.es-looks-strip { overflow-x: auto; scrollbar-width: none; }
.es-looks-strip::-webkit-scrollbar { display: none; }
.es-looks-after { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--es-line); }
.es-looks-after > ul { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.es-looks-after > ul > li { display: grid; gap: 2px; }
.es-looks-after > ul > li > b { font-weight: 600; }
.es-looks-after > ul > li > span { opacity: .78; }
@media (min-width: 860px) { .es-looks-after > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.es-swipe:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* PROOF results chooser (approved result-* slots only) */
.es-results { margin: 48px 0 8px; }
.es-results-grid { display: grid; gap: 20px; margin-top: 16px; }
@media (min-width: 900px) { .es-results-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 40px; align-items: start; } }
.es-results-list { display: grid; gap: 8px; }
.es-results-list button { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--es-line); border-radius: 6px; background: transparent; color: var(--es-ink-2); font: inherit; text-align: left; cursor: pointer; }
.es-results-list button[aria-pressed="true"] { border-color: var(--es-ink); color: var(--es-ink); background: rgba(var(--es-fg-rgb), .04); }
.es-results-list button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.es-results-panel .vs { max-width: 420px; }

/* Purchase page: trust row, after-you-buy timeline, purchase FAQ */
.es-trust { list-style: none; margin: 40px 0 0; padding: 20px 0; display: grid; gap: 16px; border-top: 1px solid var(--es-line); border-bottom: 1px solid var(--es-line); }
@media (min-width: 900px) { .es-trust { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.es-trust li { display: grid; gap: 4px; }
.es-trust span { color: var(--es-ink-2); font-size: .92rem; line-height: 1.6; }
.es-after { margin-top: 40px; max-width: 760px; }
.es-after-steps { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--es-line); }
.es-after-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--es-line); }
.es-after-steps p { margin: 4px 0 0; color: var(--es-ink-2); }
.es-after-steps .es-mono { color: var(--es-muted); padding-top: 3px; }
.es-after-wait { color: var(--es-lab) !important; font-size: .88rem; }
.es-buy-faq { margin-top: 40px; max-width: 760px; }
.es-buy-faq details { border-bottom: 1px solid var(--es-line); padding: 14px 0; }
.es-buy-faq summary { cursor: pointer; color: var(--es-ink); font-weight: 600; }
.es-buy-faq summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.es-buy-faq details p { margin: 8px 0 0; color: var(--es-ink-2); line-height: 1.6; }

/* ---- cinematic upgrade (founder 24 Oct): product-film slot, journey stage, layer stack, story arc ---------------
   Motion explains the product: transform/opacity only, paused off screen, a static end state for reduced motion.
   Every visual is labelled as a poster or a diagram until EDIT's verified footage is approved. */
.es-film { margin-top: 56px; }
.es-film-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; margin-bottom: 14px; }
.es-film-top .es-eyebrow { margin: 0; }
.es-film-poster { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--es-line-2); border-radius: 10px; background: #0b0b0d; isolation: isolate; contain: paint; }
.es-film { --film-w: min(100%, calc(76vh * 16 / 9)); }
.es-film > * { max-width: var(--film-w); }
.es-film-glow { position: absolute; inset: -20%; z-index: -1; background: radial-gradient(38% 48% at 30% 42%, rgba(217, 81, 47, .38), transparent 70%), radial-gradient(42% 52% at 72% 58%, rgba(116, 88, 240, .38), transparent 70%); animation: es-film-drift 18s ease-in-out infinite alternate; animation-play-state: paused; }
.es-film-poster.is-live .es-film-glow { animation-play-state: running; }
.es-film-poster.is-paused .es-film-glow { animation-play-state: paused; }
@keyframes es-film-drift { to { transform: translate3d(4%, -3%, 0) scale(1.08) rotate(4deg); } }
.es-film-poster::before { content: ''; position: absolute; inset: 7% 0; border-top: 1px solid rgba(var(--es-fg-rgb), .08); border-bottom: 1px solid rgba(var(--es-fg-rgb), .08); pointer-events: none; }
.es-film-poster::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(var(--es-bg-rgb), .55)); pointer-events: none; }
.es-film-brand { position: absolute; left: 4%; top: 5.5%; color: var(--es-ink); font-size: clamp(.8rem, .55rem + .7vw, 1.1rem); font-weight: 800; letter-spacing: .08em; }
.es-film-brand small { margin-left: .45em; color: var(--es-accent); font-size: .72em; }
.es-film-badge { position: absolute; right: 4%; top: 4.5%; z-index: 1; padding: .3em .8em; border: 1px solid var(--es-line-2); border-radius: 999px; background: rgba(var(--es-bg-rgb), .6); color: var(--es-ink); font-size: clamp(.75rem, .6rem + .3vw, .82rem); font-weight: 700; }
.es-film-beats { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 6%; text-align: center; }
.es-film-beats b { grid-area: 1 / 1; color: var(--es-ink); font-size: clamp(1.9rem, .8rem + 5vw, 5.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.es-film-beats b.is-on { opacity: 1; transform: none; background: linear-gradient(92deg, #faf8f5 0%, #f2c3b7 55%, #c9bdfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.es-film-ruler { position: absolute; left: 4%; right: 4%; bottom: 10%; display: flex; gap: 4px; height: 4px; }
.es-film-ruler i { position: relative; flex-basis: 0; height: 4px; border-radius: 2px; background: rgba(var(--es-fg-rgb), .16); transition: background .4s; }
.es-film-ruler i.is-on { background: rgba(var(--es-fg-rgb), .42); }
.es-film-ruler i span { position: absolute; left: 0; bottom: 9px; font-size: .6rem; color: var(--es-ink-2); }
.es-film-fill { position: absolute; left: 0; top: 0; width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--es-accent), var(--es-accent-2)); transform: scaleX(0); transform-origin: left; mix-blend-mode: screen; animation: es-film-run var(--film, 30s) linear infinite; animation-play-state: paused; }
.es-film-poster.is-live .es-film-fill { animation-play-state: running; }
/* While the reader is holding a beat the clock sets the bar directly, so it lands on the step they picked
   instead of wherever the animation had got to. */
.es-film-poster.is-seek .es-film-fill { animation: none; }

/* The six steps are buttons now: picking one moves the film's playhead to that beat. */
.es-flow-go { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; width: 100%; padding: 0 0 6px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.es-flow-go .es-h3 { margin: 0; }
.es-flow-at { color: var(--es-muted); font-size: .78rem; }
.es-flow-go:hover .es-h3, .es-flow-go:focus-visible .es-h3 { color: var(--es-accent); }
.es-flow-step.is-on .es-flow-go .es-h3, .es-flow-go[aria-pressed="true"] .es-h3 { color: var(--es-accent); }
.es-flow-step.is-on { border-color: var(--es-accent); }
.es-flow-step.is-on .es-flow-at, .es-flow-go[aria-pressed="true"] .es-flow-at { color: var(--es-accent); }
@keyframes es-film-run { to { transform: scaleX(1); } }
.es-film-tc { position: absolute; left: 4%; bottom: 3%; color: var(--es-ink-2); font-size: .64rem; }
.es-film-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; margin-top: 12px; }
.es-film-foot .es-film-pause { order: 2; margin-left: auto; }
.es-film-foot .es-film-pause[hidden] { display: inline-flex; visibility: hidden; }
.es-film-wait { flex: 1 1 320px; margin: 0; max-width: 64ch; color: var(--es-muted); font-size: .86rem; line-height: 1.6; }
.es-film-brief { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--es-line); }
.es-film-brief summary { color: var(--es-ink); font-weight: 700; cursor: pointer; }
.es-film-brief summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.es-film-brief ol { margin: 12px 0 0; padding: 0; list-style: none; }
.es-film-brief li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--es-line); font-size: .9rem; line-height: 1.5; }
.es-film-brief li > :not(.es-mono) { grid-column: 2; }
.es-film-brief li .es-mono { grid-row: 1 / span 3; padding-top: 3px; }
.es-film-brief li b { color: var(--es-ink); }
.es-film-brief li em { color: var(--es-muted); font-size: .82rem; font-style: normal; }
@media (min-width: 900px) { .es-film-brief li { grid-template-columns: 110px 150px minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; } .es-film-brief li > :not(.es-mono) { grid-column: auto; } .es-film-brief li .es-mono { grid-row: auto; } }
@media (max-width: 599px) { .es-film-ruler i span { display: none; } .es-film-ruler { bottom: 12%; } }

/* journey stage (replaces the fixture player beside the steps; a real Development Demo recording still wins) */
.es-journey { width: 100%; max-width: 440px; overflow: hidden; border: 1px solid var(--es-line-2); border-radius: 10px; background: #0f0f12; box-shadow: 0 30px 60px rgba(var(--es-bg-rgb), .35); }
.es-jy-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--es-line); }
.es-jy-bar .es-mono { font-size: .66rem; }
.es-jy-lights { display: inline-flex; gap: 5px; }
.es-jy-lights i { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--es-fg-rgb), .18); }
.es-jy-view { position: relative; height: 304px; }
.es-jy-scene { position: absolute; inset: 0; display: grid; align-content: start; gap: 14px; padding: 16px 18px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1), visibility 0s .55s; }
.es-jy-scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.es-jy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.es-jy-head b { color: var(--es-ink); font-size: 1.15rem; }
.es-jy-prompt { min-height: 92px; padding: 16px; border: 1px solid var(--es-line-2); border-radius: 12px; background: #1d1d22; color: var(--es-ink); font-size: 1.05rem; line-height: 1.55; }
.es-jy-prompt span, .es-jy-words span { display: inline-block; }
.es-jy-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -3px; background: var(--es-accent); }
.es-jy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.es-jy-chips span { padding: .25em .75em; border: 1px solid var(--es-line-2); border-radius: 999px; color: var(--es-ink-2); font-size: .74rem; }
.es-jy-drop { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border: 1.5px dashed var(--es-line-2); border-radius: 12px; }
.es-jy-drop img, .es-jy-phone img { display: block; width: 90px; height: 160px; object-fit: cover; border-radius: 8px; }
.es-jy-drop .es-mono, .es-jy-out .es-mono { margin: 0; color: var(--es-ink-2); }
.es-jy-progress { display: block; height: 6px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: rgba(var(--es-fg-rgb), .12); }
.es-jy-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--es-accent), var(--es-accent-2)); transform-origin: left; }
.es-jy-wave { position: relative; display: flex; align-items: center; gap: 3px; height: 112px; padding: 24px 6px 4px; border-radius: 10px; background: #17171b; }
.es-jy-wave i { flex: 1; height: calc(var(--h) * 8%); border-radius: 2px; background: var(--es-ink-2); transform-origin: center; }
.es-jy-wave i.is-quiet { background: var(--es-accent); opacity: .55; }
.es-jy-region { position: absolute; top: 4px; bottom: 4px; padding: 1px 4px; border: 1px solid var(--es-accent); border-radius: 6px; background: rgba(217, 81, 47, .12); color: #ff9c86; font-size: .62rem; white-space: nowrap; }
.es-jy-region--repeat { left: 6px; width: 12%; }
.es-jy-region--quiet { left: 21%; width: 8%; }
.es-jy-words { margin: 0; color: var(--es-ink); font-size: 1rem; }
.es-jy-track { display: flex; gap: 4px; height: 58px; }
.es-jy-track i, .es-plane-cuts i { min-width: 0; border: 1px solid var(--es-line-2); border-radius: 6px; background: #2a2a31; }
.es-jy-track i.is-cut, .es-jy-track i.is-trim, .es-plane-cuts i.is-cut, .es-plane-cuts i.is-trim { border-color: var(--es-accent); background: repeating-linear-gradient(45deg, rgba(217, 81, 47, .45) 0 6px, transparent 6px 12px); }
.es-jy-note { margin: 0; color: var(--es-ink-2); }
.es-jy-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.es-jy-checks li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--es-line); border-radius: 8px; background: #17171b; color: var(--es-ink); font-size: .92rem; }
.es-jy-checks b { padding: .2em .6em; border-radius: 999px; background: rgba(29, 111, 56, .35); color: var(--es-open); font-size: .7rem; }
.es-jy-out { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; align-items: center; }
.es-jy-phone { position: relative; }
.es-jy-phone span { position: absolute; left: 5px; right: 5px; bottom: 16px; padding: 3px 4px; border-radius: 4px; background: rgba(var(--es-bg-rgb), .72); color: #fff; font-size: .52rem; font-weight: 700; line-height: 1.35; text-align: center; }
.es-jy-rail { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--es-line); }
.es-jy-rail button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--es-line); border-radius: 999px; background: transparent; color: var(--es-muted); font: inherit; font-size: .78rem; cursor: pointer; }
.es-jy-rail button[aria-pressed="true"] { border-color: var(--es-accent); color: var(--es-ink); }
.es-jy-rail button:focus-visible, .es-stack-list button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.es-jy-rail .es-jy-next { margin-left: auto; border-color: var(--es-line-2); color: var(--es-ink); }
.es-jy-tick { width: 7px; height: 7px; border-radius: 50%; }
.es-jy-tick--open { background: var(--es-open); }
.es-jy-tick--target { background: var(--es-target); }
.es-flow-step .es-flow-future { margin: 6px 0 0; color: var(--es-ink-2); font-size: .82rem; line-height: 1.5; }
.es-flow-future span { display: block; color: var(--es-target); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 1100px) { .es-sticky-inner { grid-template-columns: minmax(0, 400px) minmax(0, 260px); gap: 24px; } }
@media (max-width: 1099px) { .es-split--layers .es-sticky .es-journey { margin: 0 auto; } }

/* scene motion: plays once each time a scene becomes current (the end state is the static state) */
@keyframes es-jy-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes es-jy-drop { from { opacity: 0; transform: translateY(-34px) rotate(-7deg); } }
@keyframes es-jy-fill { from { transform: scaleX(0); } }
@keyframes es-jy-grow { from { transform: scaleY(.05); } }
@keyframes es-jy-blink { 50% { opacity: 0; } }
@keyframes es-jy-collapse { to { flex-grow: .001; opacity: .25; } }
@keyframes es-jy-trim { to { flex-grow: 4; } }
@keyframes es-jy-pop { from { opacity: 0; transform: scale(.6); } }
.es-jy-scene.is-on .es-jy-prompt span { animation: es-jy-in .45s calc(.2s + var(--d) * .35s) both; }
.es-jy-scene.is-on .es-jy-caret { animation: es-jy-blink 1s steps(1) 4; }
.es-jy-scene.is-on .es-jy-chips { animation: es-jy-in .5s 1.7s both; }
.es-jy-scene.is-on .es-jy-drop img { animation: es-jy-drop .7s .1s cubic-bezier(.2, .7, .2, 1) both; }
.es-jy-scene.is-on .es-jy-progress i { animation: es-jy-fill 1.6s .5s ease both; }
.es-jy-scene.is-on .es-jy-wave i { animation: es-jy-grow .35s calc(var(--d) * 22ms) ease-out both; }
.es-jy-scene.is-on .es-jy-region { animation: es-jy-in .4s 1.1s both; }
.es-jy-scene.is-on .es-jy-words span { animation: es-jy-in .4s calc(.3s + var(--d) * .25s) both; }
.es-jy-scene.is-on .es-jy-track i.is-cut { animation: es-jy-collapse .8s 1.3s cubic-bezier(.2, .7, .2, 1) forwards; }
.es-jy-scene.is-on .es-jy-track i.is-trim { animation: es-jy-trim .8s 1.3s cubic-bezier(.2, .7, .2, 1) forwards; }
.es-jy-scene.is-on .es-jy-checks li { animation: es-jy-in .4s calc(.15s + var(--d) * .3s) both; }
.es-jy-scene.is-on .es-jy-checks b { animation: es-jy-pop .35s calc(.6s + var(--d) * .3s) both; }

/* layer stack: one finished clip as five planes (Reference A layers, original MEW content) */
.es-stack { --gap: 44px; display: grid; gap: 32px; margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--es-line); }
.es-stack.is-armed:not(.is-open) { --gap: 3px; }
@media (min-width: 1100px) { .es-stack { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; } }
.es-stack-list { display: grid; gap: 2px; margin: 24px 0 0; padding: 0; list-style: none; }
.es-stack-list li { padding: 10px 0 10px 18px; border-left: 2px solid transparent; opacity: .5; transition: opacity .3s, border-color .3s; }
.es-stack-list li.is-on { opacity: 1; border-left-color: var(--es-accent); }
.es-stack-list button { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0; border: 0; background: none; color: var(--es-ink); font: inherit; text-align: left; cursor: pointer; }
.es-stack-list button b { font-size: 1.15rem; }
.es-stack-list p { margin: 4px 0 0; color: var(--es-ink-2); font-size: .92rem; line-height: 1.55; }
.es-stack-stage { position: relative; display: grid; place-items: center; height: 460px; perspective: 1500px; }
.es-stack-3d { position: relative; width: 230px; aspect-ratio: 9 / 16; transform: rotateX(56deg) rotateZ(-36deg) translateY(-30px); transform-style: preserve-3d; }
.es-plane { position: absolute; inset: 0; border: 1px solid rgba(var(--es-fg-rgb), .26); border-radius: 10px; background: rgba(20, 20, 24, .28); transform: translateZ(calc(var(--z) * var(--gap))); transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .5s, border-color .4s, box-shadow .4s; }
.es-plane--base { --z: 0; overflow: hidden; background: #1b1b1f; }
.es-plane--cut { --z: 1; } .es-plane--captions { --z: 2; } .es-plane--visuals { --z: 3; } .es-plane--overlays { --z: 4; } .es-plane--sound { --z: 5; }
.es-plane--later { border-style: dashed; border-color: rgba(185, 168, 255, .5); background: rgba(116, 88, 240, .05); }
.es-plane.is-on { border-color: var(--es-accent); box-shadow: 0 0 0 1px var(--es-accent), 0 20px 50px rgba(217, 81, 47, .2); transform: translateZ(calc(var(--z) * var(--gap) + 26px)); }
.es-stack-3d.has-on .es-plane:not(.is-on):not(.es-plane--base) { opacity: .42; }
.es-plane--base img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.es-plane-tag { position: absolute; left: 6px; top: 6px; padding: 2px 6px; border-radius: 3px; background: rgba(116, 88, 240, .85); color: #fff; font-size: .5rem; font-weight: 700; }
.es-plane-cuts { position: absolute; left: 8%; right: 8%; bottom: 7%; display: flex; gap: 3px; height: 18px; }
.es-plane-caption { position: absolute; left: 8%; right: 8%; bottom: 22%; padding: 6px 8px; border-radius: 6px; background: rgba(var(--es-bg-rgb), .72); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.4; text-align: center; }
.es-plane-caption b { color: #ff9c86; }
.es-plane-box { position: absolute; left: 12%; top: 12%; display: grid; place-items: center; width: 50%; aspect-ratio: 4 / 3; border: 1px dashed var(--es-target); border-radius: 6px; color: var(--es-target); font-size: .62rem; }
.es-plane-quote { position: absolute; right: 8%; top: 40%; padding: 6px 9px; border: 1px dashed var(--es-target); border-radius: 4px; color: var(--es-ink); font-family: Georgia, serif; font-size: .9rem; }
.es-plane-wave { position: absolute; left: 8%; right: 8%; top: 8%; display: flex; align-items: center; gap: 2px; height: 30px; }
.es-plane-wave i { flex: 1; height: calc(var(--h) * 10%); border-radius: 1px; background: var(--es-target); opacity: .85; }
.es-stack-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; }
@media (min-width: 1100px) {
  .es-stack { align-items: start; }
  .es-stack-stage { position: sticky; top: calc(50vh - 230px); }
  .es-stack-list li { display: flex; flex-direction: column; justify-content: center; min-height: 22vh; }
}
@media (max-width: 1099px) {
  .es-stack { --gap: 28px; }
  .es-stack-copy { display: contents; }
  .es-stack-stage { order: 1; height: 400px; } .es-stack-list { order: 2; margin-top: 0; }
  .es-stack-3d { width: 170px; transform: rotateX(56deg) rotateZ(-36deg) translateY(30px); }
  .es-stack .es-italic { margin-bottom: 0; }
}

/* story arc: Faithful vs Growth on one timeline (positions precomputed; the transition does the reordering) */
.es-arc { margin: 14px 0 24px; }
.es-arc-row { position: relative; height: 62px; }
.es-arc-seg { position: absolute; top: 0; bottom: 0; left: var(--xf); width: var(--wf); overflow: hidden; transition: left .8s cubic-bezier(.2, .7, .2, 1), width .8s cubic-bezier(.2, .7, .2, 1), opacity .5s; }
.es-arc[data-mode="growth"] .es-arc-seg { left: var(--xg); width: var(--wg); }
.es-arc[data-mode="faithful"] .is-gone-f, .es-arc[data-mode="growth"] .is-gone-g { opacity: 0; }
.es-arc-seg::before { content: ''; position: absolute; inset: 0 2px; border: 1px solid var(--es-line-2); border-radius: 6px; background: #26262c; transition: background .6s, border-color .6s; }
.es-arc[data-mode="faithful"] .is-trim::before { border-left: 3px solid var(--es-accent); }
.es-arc[data-mode="growth"] .es-arc-seg--hook::before { border-color: var(--es-accent); background: linear-gradient(135deg, rgba(217, 81, 47, .5), rgba(116, 88, 240, .4)); }
.es-arc-seg b, .es-arc-seg > span { position: relative; display: block; padding: 8px 9px 0; overflow: hidden; color: var(--es-ink); font-size: .8rem; white-space: nowrap; text-overflow: ellipsis; }
.es-arc-seg > span { padding-top: 2px; font-size: .64rem; color: var(--es-ink-2); }
.es-arc-seg em { display: none; color: #ff9c86; font-style: normal; font-weight: 700; }
.es-arc[data-mode="growth"] .es-arc-seg em { display: inline; }
.es-arc-cap { margin: 8px 0 0; }
@media (max-width: 599px) { .es-arc-seg b { padding: 7px 5px 0; font-size: .68rem; text-overflow: clip; } .es-arc-seg > span { padding-left: 5px; padding-right: 5px; } }
.es-arc[data-mode="faithful"] .es-arc-cap--growth, .es-arc[data-mode="growth"] .es-arc-cap--faithful { display: none; }

@media (prefers-reduced-motion: reduce) {
  .es-film-glow, .es-jy-scene, .es-jy-scene *, .es-plane, .es-arc-seg, .es-film-beats b { animation: none !important; transition: none !important; }
  .es-film-beats { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: .2em .7em; padding: 0 9%; }
  .es-film-beats b { grid-area: auto; font-size: clamp(1rem, .6rem + 1.8vw, 2.1rem); opacity: 1; transform: none; }
  .es-film-fill { display: none; }
  .es-film-foot .es-film-pause[hidden] { display: none; }
}
@media print { .es-film-poster, .es-journey, .es-stack-stage { display: none; } }

/* ---- commerce (founder 25 Oct): offer components, value equation, JTBD, purchase steps, order confirmation ---------- */
.es-comp { display: grid; gap: 6px; margin: 12px 0; padding: 0; list-style: none; font-size: .9rem; line-height: 1.5; }
.es-comp li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.es-comp .es-tag { flex: none; }
.es-value { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--es-line); border-radius: 8px; background: rgba(var(--es-fg-rgb), .02); font-size: .88rem; line-height: 1.55; }
.es-value dt { color: var(--es-accent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.es-value dd { margin: 0 0 8px; color: var(--es-ink-2); }
.es-value dd:last-child { margin-bottom: 0; }
.es-offer-blocker { margin: 10px 0; color: #ffc58f; font-size: .86rem; line-height: 1.5; }
.es-jtbd { margin: 20px 0; padding: 16px 18px; border: 1px solid var(--es-line); border-radius: 8px; }
.es-jtbd dl { display: grid; gap: 10px; margin: 0; }
@media (min-width: 900px) { .es-jtbd dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.es-jtbd dt { color: var(--es-ink); font-weight: 700; }
.es-jtbd dd { margin: 4px 0 0; color: var(--es-ink-2); font-size: .92rem; line-height: 1.55; }
.es-jtbd dd .es-mono { display: block; margin-top: 4px; font-size: .7rem; }
.es-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 28px; padding: 0; list-style: none; }
.es-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--es-line-2); border-radius: 999px; color: var(--es-ink-2); font-size: .86rem; }
.es-steps .es-mono { color: var(--es-accent); }
.es-checkout h2.es-h3 { margin-top: 36px; }
.es-checkout-offers > li.is-picked { border-color: var(--es-accent); }
.es-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--es-line-2); border-radius: 8px; color: var(--es-ink); font-weight: 700; cursor: pointer; }
.es-pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--es-accent); }
.es-pick .es-mono { flex-basis: 100%; font-weight: 400; }
.es-pick:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.es-checkout-other { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--es-ink-2); font-size: .92rem; }
.es-checkout-other a { color: var(--es-ink); }
.es-paybox, .es-order { margin: 12px 0; padding: 18px; border: 1px solid var(--es-line-2); border-radius: 10px; background: var(--es-bg-2); }
.es-paybox .es-btn[disabled], .es-order .es-btn[disabled] { opacity: .45; cursor: not-allowed; }
.es-order-status { margin: 12px 0 0; color: var(--es-ink); font-size: 1.02rem; line-height: 1.6; }
.es-order-status:empty { display: none; }
.es-order[data-order-state="confirmed"] .es-order-status { color: var(--es-open); font-weight: 700; }
.es-order[data-order-state="grace"] .es-order-status, .es-order[data-order-state="unconfirmed"] .es-order-status, .es-order[data-order-state="unverified"] .es-order-status { color: #ffc58f; }
.es-order[data-order-state="revoked"] .es-order-status, .es-order[data-order-state="ended"] .es-order-status { color: #ff9c86; }
.es-order-ref { margin: 0 0 12px; word-break: break-all; }
.es-receipt, .es-delivery { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--es-line); }
.es-receipt dl { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .92rem; }
.es-receipt dt { color: var(--es-muted); }
.es-receipt dd { margin: 0; color: var(--es-ink); word-break: break-word; }
@media (max-width: 420px) { .es-receipt dl { grid-template-columns: minmax(0, 1fr); } .es-receipt dd { margin-bottom: 6px; } }
.es-sandbox-field input { box-sizing: border-box; max-width: 100%; }

/* WCAG 2.5.8: the timeline dots stay 14px to the eye but take a 24px hit area. */
.es-brains-dot::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }

/* MEW BOT mark beside the brand (only when the brand set is on: scripts/lib/brand.mjs). */
.es-brand { display: inline-flex; align-items: center; gap: 8px; }
.es-brand-mark { width: 28px; height: 28px; flex: none; }

/* Hero: the product visual follows the headline in the DOM (phones see it first, keyboard order matches); on desktop a
   grid puts it back in the right column, spanning every copy row, with a last flexible row taking any extra height. */
.es-hero-copy { display: contents; }
.es-hero-grid { row-gap: 0; }
.es-hero-copy > * { min-width: 0; }
@media (max-width: 1099px) { .es-hero-media { margin: 22px 0 26px; } }
@media (min-width: 1100px) {
  /* No row template: .es-hero-copy is a block column again (see the hero override below), so the grid holds
     two items and sizes its own rows. The old eight-row template left a 1fr row of dead space under the hero. */
  .es-hero-grid { column-gap: 64px; }
  .es-hero-copy > * { grid-column: 1; }
  .es-hero-copy > .es-hero-media { grid-column: 2; grid-row: 1 / span 8; }
}
.es-hero-copy > .es-hero-truth { margin-top: 0; }
.es-hero-copy > .es-offer { margin-top: 10px; }

/* Customer experience (src/templates/customer.mjs, preview/sandbox only): packages, order summary, post-purchase,
   account, onboarding. Same dark MEW tokens; states are written by customer.js from Platform's answers. */
.es-btn--ghost { background: transparent; border-color: var(--es-line-2); color: var(--es-ink); }
.es-btn--ghost:hover { border-color: var(--es-ink); color: var(--es-ink); }
.cx-head { position: static; justify-content: space-between; }
.cx-nav { display: flex; gap: 4px; overflow-x: auto; }
.cx-nav a { padding: 8px 12px; border-radius: 999px; color: var(--es-ink-2); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cx-nav a[aria-current="page"] { background: rgba(var(--es-fg-rgb), .1); color: var(--es-ink); }
.cx-section { padding-top: 48px; }
.cx .cx-state h1, .cx-onb-head h1 { font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3rem); }
.cx-signin { max-width: 520px; }
.cx-panel--wait { grid-column: 1 / -1; }
.cx-narrow { max-width: 860px; }
.cx-buy { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.cx-account > *, .cx-buy > * { min-width: 0; }
.es-order:is([data-order-state="welcome"], [data-order-state="failure"], [data-order-state="cancelled"], [data-order-state="ended"]) > :is(.cx-signin, p:has([data-order-check])) { display: none; }
@media (min-width: 1100px) { .cx-buy { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .cx-summary { position: sticky; top: 24px; } }
.cx-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.cx-card { position: relative; display: grid; gap: 12px; align-content: start; padding: 22px; border: 1px solid var(--es-line); border-radius: 12px; background: var(--es-bg-2); transition: border-color .15s, box-shadow .15s; }
.cx-card.is-picked { border-color: var(--es-accent); box-shadow: 0 0 0 1px var(--es-accent), 0 18px 40px -24px rgba(255, 107, 87, .6); }
.cx-card--not_purchasable { background: transparent; border-style: dashed; }
.cx-kind { margin: 0; color: var(--es-accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cx-name { margin: 0; color: var(--es-ink); font-size: 1.25rem; font-weight: 750; line-height: 1.3; }
.cx-price { margin: 0; color: var(--es-ink); font-size: 2rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.1; }
.cx-price small { margin-left: 2px; color: var(--es-muted); font-size: .9rem; font-weight: 600; }
.cx-caps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .88rem; line-height: 1.5; color: var(--es-ink-2); }
.cx-cap { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
.cx-cap .es-tag { font-size: .58rem; padding: .15em .55em; }
.cx-dot { width: 6px; height: 6px; margin: 0 4px; border-radius: 50%; background: var(--es-muted); }
.cx-not { margin: 0; color: var(--es-muted); font-size: .82rem; line-height: 1.5; }
.cx-not b { color: var(--es-ink-2); }
.cx-off { margin: 0; color: var(--es-muted); font-size: .86rem; }
.cx-fine { margin: 8px 0 0; color: var(--es-muted); font-size: .8rem; line-height: 1.55; }
.cx-pick { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--es-line-2); border-radius: 8px; color: var(--es-ink); font-weight: 700; cursor: pointer; }
.cx-pick input { width: 20px; height: 20px; accent-color: var(--mx-coral, #ff6b57); }
.cx-pick:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.cx-pick:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.cx-explain { display: grid; gap: 14px; margin: 24px 0 8px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.cx-explain > div { padding: 18px; border-left: 3px solid var(--es-accent-2); background: rgba(116, 88, 240, .08); border-radius: 0 8px 8px 0; }
.cx-explain h3 { margin: 0 0 6px; color: var(--es-ink); font-size: 1rem; }
.cx-explain p { margin: 0; font-size: .9rem; line-height: 1.6; }
.cx-table-wrap { overflow-x: auto; border: 1px solid var(--es-line); border-radius: 10px; }
.cx-table-wrap:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cx-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .86rem; }
.cx-table th, .cx-table td { padding: 12px 14px; border-bottom: 1px solid var(--es-line); text-align: left; vertical-align: top; }
.cx-table thead th { color: var(--es-ink); font-weight: 750; background: var(--es-bg-2); }
.cx-table tbody th { color: var(--es-ink-2); font-weight: 600; }
.cx-table tr:last-child > * { border-bottom: 0; }
.cx-yes { color: var(--es-open); font-weight: 700; }
.cx-no { color: var(--es-muted); }
.cx-summary { padding: 22px; border: 1px solid var(--es-line-2); border-radius: 12px; background: var(--es-bg-2); }
.cx-summary-title { margin: 0 0 12px; color: var(--es-ink); font-size: 1.2rem; }
.cx-summary-empty p { margin: 0; color: var(--es-muted); }
.cx-lines, .cx-panel dl, .es-receipt dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: .9rem; }
.cx-lines dt, .cx-panel dt, .es-receipt dt { color: var(--es-muted); }
.cx-lines dd, .cx-panel dd, .es-receipt dd { margin: 0; color: var(--es-ink); font-weight: 600; overflow-wrap: anywhere; }
.cx-sub { margin: 22px 0 8px; color: var(--es-ink); font-size: .98rem; }
.cx-field { display: grid; gap: 6px; margin: 8px 0; font-size: .86rem; color: var(--es-muted); }
.cx-field select, .cx-field input { min-height: 44px; padding: 8px 12px; border: 1px solid rgba(var(--es-fg-rgb), .45); border-radius: 6px; background: var(--es-bg); color: var(--es-ink); font: inherit; }
.cx-paybox { margin: 8px 0 0; padding: 0; border: 0; background: none; }
.cx-paybox[data-state="error"] .es-sandbox-status { color: #ff8a7a; }
.cx-secure { margin: 14px 0 0; color: var(--es-muted); font-size: .8rem; line-height: 1.55; }
/* post-purchase */
.cx-order { padding: 28px; }
.cx-state > h1:focus { outline: none; }
.cx-spinner { width: 44px; height: 44px; margin: 0 0 20px; border: 3px solid var(--es-line-2); border-top-color: var(--es-accent); border-radius: 50%; animation: cx-spin .9s linear infinite; }
@keyframes cx-spin { to { transform: rotate(360deg); } }
.cx-welcome { position: relative; overflow: hidden; }
.cx-bot { display: block; width: 72px; height: 72px; margin: 0 0 16px; border-radius: 20px; animation: cx-pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.cx-bot--plain { display: grid; place-items: center; background: linear-gradient(135deg, var(--mx-coral, #ff6b57), var(--mx-violet, #7458f0)); color: #fff; font-weight: 800; }
@keyframes cx-pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cx-confetti { position: absolute; inset: 0 0 auto; height: 160px; pointer-events: none; }
.cx-confetti i { position: absolute; top: -10px; left: calc(var(--i) * 7%); width: 8px; height: 14px; border-radius: 2px; background: var(--mx-coral, #ff6b57); opacity: 0; animation: cx-fall 1.8s ease-out calc(var(--i) * 60ms) 1 both; }
.cx-confetti i:nth-child(3n) { background: var(--mx-violet, #7458f0); }
.cx-confetti i:nth-child(4n) { background: #f2b84b; }
@keyframes cx-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(150px) rotate(320deg); } }
.cx-panels { display: grid; gap: 14px; margin: 24px 0; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.cx-panel { padding: 20px; border: 1px solid var(--es-line); border-radius: 12px; background: var(--es-bg); }
.cx-panel h2 { margin: 0 0 12px; color: var(--es-ink); font-size: 1.1rem; }
.cx-panel--ok { border-color: rgba(143, 224, 170, .45); }
.cx-panel--ok h2 { color: var(--es-open); }
.cx-panel--wait { border-style: dashed; }
.cx-panel--wait p { margin: 0; font-size: .9rem; line-height: 1.6; }
.cx-check { display: grid; gap: 8px; margin: 0 0 16px; padding: 0 0 0 1.2em; font-size: .9rem; line-height: 1.55; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.cx-fail h1 { color: #ffb4a6; }
.es-order[data-order-state="welcome"] .es-order-status { color: var(--es-open); font-weight: 700; }
.es-order[data-order-state="failure"] .es-order-status { color: #ff9c86; }
/* account */
.cx-account { display: grid; gap: 28px; }
@media (min-width: 1000px) { .cx-account { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } }
.cx-main { display: grid; gap: 16px; }
.cx-main[hidden] { display: none; }
.cx-orders { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.cx-orow { padding: 14px 16px; border: 1px solid var(--es-line); border-radius: 10px; }
.cx-orow:target { border-color: var(--es-accent); }
.cx-orow-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--es-ink); }
.cx-orow-meta { margin: 6px 0 0; color: var(--es-muted); font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.cx-badge { padding: 2px 10px; border-radius: 999px; background: rgba(var(--es-fg-rgb), .1); color: var(--es-ink-2); font-size: .74rem; font-weight: 700; }
.cx-badge--paid { background: rgba(29, 111, 56, .3); color: var(--es-open); }
.cx-badge--failed, .cx-badge--refunded { background: rgba(255, 107, 87, .18); color: #ffb4a6; }
.cx-badge--past_due, .cx-badge--pending { background: rgba(242, 184, 75, .18); color: #ffd58f; }
.cx-badge--cancelled, .cx-badge--expired { background: rgba(116, 88, 240, .22); color: var(--es-target); }
.cx-sub-row { display: grid; gap: 6px; justify-items: start; padding: 12px 0; border-top: 1px solid var(--es-line); color: var(--es-ink); }
.cx-sub-row:first-child { border-top: 0; }
.cx-confirm { margin: 14px 0 0; padding: 16px; border: 1px solid var(--es-accent); border-radius: 10px; }
.cx-confirm p { margin: 0; color: var(--es-ink-2); }
.cx-doc-kind { margin: 0 0 14px; color: var(--es-ink-2); font-size: .86rem; }
.cx-receipt h2:focus { outline: none; }
.cx-empty { color: var(--es-muted); }
/* onboarding */
.cx-onb-head { display: flex; gap: 20px; align-items: center; }
.cx-onb-head .cx-bot { margin: 0; flex: none; }
.cx-level { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.cx-onb { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.cx-step { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--es-line); border-radius: 12px; }
.cx-step h2 { margin: 0 0 4px; color: var(--es-ink); font-size: 1.02rem; }
.cx-step p { margin: 0; font-size: .88rem; line-height: 1.55; }
.cx-step-note:empty, .cx-pro:empty { display: none; }
.cx-step .cx-step-note { margin-top: 6px; color: var(--es-ink); }
.cx-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--es-line-2); color: var(--es-ink); font-weight: 700; font-size: .86rem; }
.cx-step-state { padding: 3px 10px; border-radius: 999px; background: rgba(var(--es-fg-rgb), .08); color: var(--es-muted); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.cx-step[data-step-state="done"] .cx-num { background: var(--es-open); border-color: var(--es-open); color: #0f2a19; }
.cx-step[data-step-state="done"] .cx-step-state { background: rgba(29, 111, 56, .3); color: var(--es-open); }
.cx-step[data-step-state="you"] { border-color: var(--es-accent); }
.cx-step[data-step-state="you"] .cx-step-state { background: rgba(255, 107, 87, .18); color: #ffb4a6; }
.cx-step[data-step-state="wait"] .cx-step-state { background: rgba(116, 88, 240, .22); color: var(--es-target); }
.cx-step[data-step-state="blocked"] { border-style: dashed; }
@media (max-width: 520px) { .cx-lines, .cx-panel dl, .es-receipt dl { grid-template-columns: 1fr; gap: 2px; } .cx-panel dd, .es-receipt dd, .cx-lines dd { margin-bottom: 10px; } .cx-step { grid-template-columns: 32px 1fr; } .cx-step-state { grid-column: 2; justify-self: start; } .cx-order { padding: 20px; } .cx-head { height: auto; flex-wrap: wrap; padding-block: 10px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .cx-spinner, .cx-bot, .cx-confetti i { animation: none; } .cx-confetti { display: none; } .cx-card { transition: none; } }
@media print { .cx-printing .es-head, .cx-printing .cx-side, .cx-printing .cx-main > section:not(.cx-receipt), .cx-printing .cx-actions, .cx-printing .site-header, .cx-printing .site-footer, .cx-printing .es-commerce-draft { display: none !important; } .cx-printing .cx-receipt { border: 0; } .cx-printing .cx-receipt * { color: #000 !important; } }
.cx-bot-wrap { display: inline-block; animation: cx-bob 3.6s ease-in-out 1s infinite; }
@keyframes cx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cx-order-line { margin: 0 0 6px; }
.cx-warm { margin: 0 0 22px; color: var(--es-ink-2); font-size: 1rem; line-height: 1.7; }
.cx-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 8px; }
.cx-next-btn { min-height: 56px; padding: 0 26px; font-size: 1.05rem; box-shadow: 0 14px 34px -18px rgba(255, 107, 87, .9); }
.cx-next-note { color: var(--es-muted); font-size: .86rem; }
@media (prefers-reduced-motion: reduce) { .cx-bot-wrap { animation: none; } }

/* PROOF preview iteration (MEW_PREVIEW_PROOF, founder 25 Oct): proof visual LEFT, three depths (Reference A layer stack)
   that visibly PROCESS one take (Reference B watch-the-output stage): raw → cut → captions → assembled. Illustration only. */
.es-proof { margin-top: 56px; }
.es-proof-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .es-proof-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 64px; align-items: center; } }
.es-proof-stage { margin: 0; min-width: 0; }
.es-proof-stage .es-film-wait { margin-top: 12px; max-width: none; }
.es-proof-scene { --rx: 12deg; --ry: -26deg; --z: 150px; position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--es-line); border-radius: 20px; overflow: hidden; perspective: 1500px; background: radial-gradient(70% 55% at 22% 18%, rgba(255, 107, 87, .22), transparent 70%), radial-gradient(65% 60% at 85% 80%, rgba(116, 88, 240, .28), transparent 70%), #0e0d12; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1); }
@media (min-width: 960px) { .es-proof-scene { aspect-ratio: 1 / 1; max-height: 720px; } }
.es-proof.is-in .es-proof-scene, .es-proof:not([data-js]) .es-proof-scene { opacity: 1; transform: none; }
.es-proof-badge { position: absolute; z-index: 3; top: 16px; left: 16px; padding: 5px 11px; border-radius: 999px; background: rgba(var(--es-bg-rgb), .78); border: 1px solid var(--es-line-2); color: var(--es-ink); font-size: .74rem; font-weight: 700; backdrop-filter: blur(6px); }
.es-proof-depth { position: absolute; inset: 11% 12% 21%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.es-pl { position: absolute; inset: 0; border-radius: 16px; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .6s ease, box-shadow .6s ease, border-color .6s ease; }
.es-pl--back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .02em; border: 1px dashed rgba(201, 188, 255, .45); background: linear-gradient(160deg, rgba(30, 22, 48, .82), rgba(20, 18, 28, .82)); transform: translateZ(calc(var(--z) * -1)); }
.es-pl--back b { color: rgba(var(--es-fg-rgb), .92); font-size: clamp(2.6rem, 1rem + 6vw, 6.2rem); font-weight: 800; line-height: .98; letter-spacing: -.02em; }
.es-pl--subject { transform: translateZ(0); }
.es-pl-person { position: absolute; left: 50%; bottom: 0; width: 72%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 24px 40px rgba(var(--es-bg-rgb), .45)); transition: transform .25s ease, filter .25s ease; }
.es-pl-cut { position: absolute; top: 14%; right: 6%; padding: 4px 10px; border-radius: 6px; background: var(--es-accent); color: #fff; font-size: .76rem; font-weight: 800; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .35s ease, transform .35s ease; }
.es-pl--front { transform: translateZ(var(--z)); }
.es-pl-cap { position: absolute; left: 6%; right: 6%; bottom: 23%; margin: 0; text-align: center; color: #fff; font-size: clamp(1.15rem, .7rem + 1.6vw, 2rem); font-weight: 800; line-height: 1.3; text-shadow: 0 3px 18px rgba(var(--es-bg-rgb), .7); }
.es-pl-cap span { display: inline-block; transition: opacity .3s ease, transform .3s ease, color .3s ease; }
.es-proof[data-js] .es-pl-cap span { opacity: .14; transform: translateY(6px); }
.es-proof[data-js] .es-pl-cap span.is-on { opacity: 1; transform: none; }
.es-proof[data-js] .es-pl-cap span.is-now { color: #ffd1c9; }
.es-pl-wave { position: absolute; left: 6%; right: 6%; bottom: 5%; height: 13%; display: flex; align-items: center; gap: 3px; }
.es-pl-wave i { flex: 1 1 0; height: var(--h); min-width: 0; border-radius: 3px; background: rgba(var(--es-fg-rgb), .75); transition: flex-grow .7s cubic-bezier(.16, 1, .3, 1), opacity .5s ease, background .4s ease, margin .7s; }
.es-pl-wave i.is-cut { background: var(--es-accent); height: 12%; }
.es-pl-tag { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 4px; background: rgba(var(--es-bg-rgb), .85); color: var(--es-ink-2); font: 700 .66rem/1.4 ui-monospace, Menlo, Consolas, monospace; font-style: normal; letter-spacing: .04em; transition: opacity .5s ease; }
.es-pl--front .es-pl-tag { top: auto; bottom: calc(18% + 4px); }
/* phases */
.es-proof-scene[data-phase="raw"] .es-pl-cap { opacity: 0; }
.es-proof-scene[data-phase="raw"] .es-pl--back b { opacity: .35; }
.es-proof-scene[data-phase="cut"] .es-pl-wave i.is-cut, .es-proof-scene[data-phase="captions"] .es-pl-wave i.is-cut, .es-proof-scene[data-phase="assembled"] .es-pl-wave i.is-cut { flex-grow: 0; opacity: 0; margin: 0 -1.5px; }
.es-proof-scene[data-phase="cut"] .es-pl-cut { opacity: 1; transform: none; }
.es-proof-scene[data-phase="cut"] .es-pl-person { animation: es-pl-jump .45s steps(2) 1; }
@keyframes es-pl-jump { 50% { transform: translateX(-47%) scale(1.03); filter: brightness(1.25) drop-shadow(0 24px 40px rgba(var(--es-bg-rgb), .45)); } }
.es-proof-scene[data-phase="assembled"] .es-proof-depth { transform: rotateX(0) rotateY(0); }
.es-proof-scene[data-phase="assembled"] .es-pl--back { transform: translateZ(-1px); border-color: transparent; }
.es-proof-scene[data-phase="assembled"] .es-pl--front { transform: translateZ(1px); }
.es-proof-scene[data-phase="assembled"] .es-pl-tag { opacity: 0; }
.es-proof-scene[data-phase="assembled"] .es-pl-wave { opacity: 0; transition: opacity .5s ease; }
/* focus one layer from the list */
.es-proof-scene[data-focus="front"] .es-pl:not(.es-pl--front), .es-proof-scene[data-focus="subject"] .es-pl:not(.es-pl--subject), .es-proof-scene[data-focus="back"] .es-pl:not(.es-pl--back) { opacity: .22; }
.es-proof-scene[data-focus="front"] .es-pl--front, .es-proof-scene[data-focus="subject"] .es-pl--subject, .es-proof-scene[data-focus="back"] .es-pl--back { box-shadow: 0 0 0 2px var(--es-accent), 0 30px 60px -20px rgba(255, 107, 87, .55); }
/* stage bar (one take, processed) */
.es-proof-bar { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(var(--es-bg-rgb), .82); border: 1px solid var(--es-line); backdrop-filter: blur(8px); }
.es-proof-bar-l { flex: none; color: var(--es-ink-2); }
.es-proof-steps { display: flex; flex: 1 1 auto; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.es-proof-step { flex: 1 0 auto; min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--es-muted); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .3s ease, color .3s ease; }
.es-proof-step[aria-pressed="true"] { background: rgba(255, 107, 87, .18); color: #ffd1c9; }
.es-proof-step:hover { color: var(--es-ink); }
.es-proof-pause { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--es-line-2); background: transparent; color: var(--es-ink); font-size: .7rem; cursor: pointer; }
.es-proof-step:focus-visible, .es-proof-pause:focus-visible, .es-proof-layer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* copy (right) */
.es-proof-copy .es-eyebrow { margin-bottom: 14px; }
.es-proof-layers { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.es-proof-layer { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; width: 100%; padding: 16px 18px; border: 1px solid var(--es-line); border-radius: 12px; background: rgba(var(--es-fg-rgb), .02); color: var(--es-ink-2); font: inherit; text-align: left; cursor: pointer; transition: border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
.es-proof-layer .es-mono { grid-column: 1 / -1; }
.es-proof-layer b { color: var(--es-ink); font-size: 1.05rem; }
.es-proof-layer .es-tag { align-self: center; }
.es-proof-d { grid-column: 1 / -1; font-size: .9rem; line-height: 1.55; }
.es-proof-layer:hover, .es-proof-layer[aria-pressed="true"] { border-color: var(--es-accent); background: rgba(255, 107, 87, .06); transform: translateX(4px); }
.es-proof.is-in .es-proof-layers li { animation: es-proof-rise .8s cubic-bezier(.16, 1, .3, 1) both; }
.es-proof.is-in .es-proof-layers li:nth-child(2) { animation-delay: .1s; }
.es-proof.is-in .es-proof-layers li:nth-child(3) { animation-delay: .2s; }
@keyframes es-proof-rise { from { opacity: 0; transform: translateY(14px); } }
.es-proof-real .vs { border-radius: 20px; }
@media (max-width: 959px) { .es-proof-scene { --rx: 10deg; --ry: -18deg; --z: 70px; } .es-proof-depth { inset: 13% 9% 24%; } .es-proof-bar-l { display: none; } .es-proof-bar { padding-left: 8px; } .es-proof-layer:hover, .es-proof-layer[aria-pressed="true"] { transform: none; } }
@media (max-width: 380px) { .es-proof-step { padding: 0 7px; font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) {
  .es-proof-scene, .es-proof-depth, .es-pl, .es-pl-wave i, .es-pl-cap span, .es-pl-cut, .es-proof-layer { transition: none; }
  .es-proof-scene { opacity: 1; transform: none; }
  .es-proof-scene[data-phase="cut"] .es-pl-person, .es-proof.is-in .es-proof-layers li { animation: none; }
}
/* proof stack r2: planes fan out diagonally (clear separation, like the reference's exploded stack); glass frames */
.es-proof-scene { --dx: 9%; --dy: 8%; }
.es-pl--back { transform: translate3d(var(--dx), calc(var(--dy) * -1), calc(var(--z) * -1)); }
.es-pl--subject { border: 1px solid rgba(var(--es-fg-rgb), .14); background: linear-gradient(180deg, rgba(var(--es-fg-rgb), .05), rgba(var(--es-fg-rgb), .015)); }
.es-pl--front { transform: translate3d(calc(var(--dx) * -1), var(--dy), var(--z)); border: 1px solid rgba(255, 107, 87, .35); background: linear-gradient(180deg, rgba(255, 107, 87, .04), rgba(var(--es-bg-rgb), .16)); }
.es-proof-scene[data-phase="assembled"] .es-pl--subject, .es-proof-scene[data-phase="assembled"] .es-pl--front { border-color: transparent; background: transparent; }
.es-proof-scene[data-phase="assembled"] .es-pl--back { transform: translate3d(0, 0, -1px); }
.es-proof-scene[data-phase="assembled"] .es-pl--front { transform: translate3d(0, 0, 1px); }
@media (max-width: 959px) { .es-proof-scene { --dx: 6%; --dy: 6%; } }
.es-proof-scene { --dx: 6.5%; --dy: 6.5%; --ry: -22deg; }
.es-proof-depth { inset: 15% 17% 23%; }
@media (max-width: 959px) { .es-proof-scene { --dx: 5%; --dy: 5%; --ry: -16deg; } .es-proof-depth { inset: 15% 13% 25%; } }
@media (max-width: 959px) {
  .es-proof-scene { aspect-ratio: 3 / 4; }
  .es-pl-tag-s { display: none; }
  .es-pl--back b { font-size: clamp(2rem, 1rem + 6vw, 3.4rem); }
  .es-pl-cap { font-size: clamp(.95rem, .7rem + 1.4vw, 1.3rem); bottom: 26%; }
  .es-pl-cut { font-size: .68rem; top: 10%; }
  .es-proof-step { flex: 1 1 0; padding: 0 4px; }
}
.es-pl--subject .es-pl-tag { right: auto; left: 10px; }
/* proof r5: once assembled (waveform folded away) the captions sit in the lower third, like a finished clip */
.es-pl-cap { transition: bottom .9s cubic-bezier(.16, 1, .3, 1), opacity .4s ease; }
.es-proof-scene[data-phase="assembled"] .es-pl-cap { bottom: 7%; }
@media (prefers-reduced-motion: reduce) { .es-pl-cap { transition: none; } }

/* Clean Cut (concept diagram until EDIT's real sample exists): stacked layer cards, top = front-most. */
#clean-cut .es-split { align-items: start; }
@media (min-width: 900px) { #clean-cut .es-split { grid-template-columns: 1.1fr .9fr; } }
.es-before-after { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 20px 0; }
.es-before-after dt { color: var(--es-accent); font-weight: 800; }
.es-before-after dd { margin: 0; }
.es-clean-stack { margin: 0; }
.es-clean-stack ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.es-clean-layer { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--es-line-2); border-radius: 12px; background: var(--es-bg-2); }
.es-clean-layer b { color: var(--es-ink); }
.es-clean-layer--1 { border-color: var(--es-accent); }
.es-clean-layer--2 { border-color: var(--es-accent-2); }
.es-clean-stack figcaption { margin-top: 12px; }/* illustration polish: the wipe's two captions sit on opposite sides; the badge is readable Thai, not micro caps */
.vs-illus-under .vs-illus-cap { justify-self: start; }
.vs-illus-over .vs-illus-cap { justify-self: end; }
.vs--illus .vs-badge--syn { font-family: inherit; font-size: .7rem; letter-spacing: 0; text-transform: none; padding: 5px 8px; }
.vs--thumb.vs--illus .vs-badge--syn { font-size: .56rem; padding: 3px 5px; }
/* the wipe's range input is transparent (it sits over the frame), so any focus on it shows on the visible handle */
.vs-frame:has(.vs-wipe:focus) .vs-wipe-handle { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--es-accent, #ed765b); }
.vs-frame:has(.vs-wipe:focus) .vs-wipe-line { width: 3px; }

/* Sales page plans + post-purchase steps (slice 3): single column at 390 px, two or three columns when wide. */
.es-plans { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .es-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .es-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.es-plan { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--es-line-2); border-radius: 14px; background: var(--es-bg-2); overflow-wrap: anywhere; }
.es-plan-price b { font-size: 1.5rem; }
.es-planned { flex: none; padding: 1px 8px; border: 1px dashed var(--es-line); border-radius: 999px; color: var(--es-muted); font-size: .75rem; }
.es-notinc { margin: 0; padding-left: 18px; }
.es-after { margin-top: 24px; }
.es-after-steps { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 10px; overflow-wrap: anywhere; }
.es-after-steps .es-mono { display: block; }

/* Sales page approved media (slice 4): lazy image/video slots and the plain placeholder (no play button, no output frame). */
.es-media { margin: 0 0 12px; }
.es-media-el { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 10px; background: var(--es-bg-2, #111); }
.es-media figcaption { margin-top: 6px; }
.es-media-empty { margin: 12px 0 0; padding: 10px 14px; border: 1px dashed var(--es-line); border-radius: 10px; color: var(--es-muted); font-size: .9rem; overflow-wrap: anywhere; }

/* Sales page FAQ group + mobile safety (slice 6): long Thai/English strings wrap, grids are single-column under 480px,
   media never exceeds its box, and no sales selector sets a width or min-width above 390px. */
.es-faq-col { display: grid; gap: 24px; min-width: 0; }
.es-faq--sales, .es-faq--sales details, .es-faq--sales p, .es-faq--sales summary { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.es-faq--sales .es-feat-en { margin-top: -16px; }
.es-feat, .es-feat-group, .es-plan, .es-after, .es-after-steps li, .es-media, .es-media-empty { min-width: 0; max-width: 100%; }
.es-feat-en, .es-plan p, .es-after-steps p, .es-media figcaption { overflow-wrap: anywhere; }
.es-media-el, .es-media img, .es-media video { max-width: 100%; height: auto; }
/* results first + looping showcase (website-sales-v2-01): stacked on mobile, side by side from 700px */
.es-result-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 16px 0; }
@media (min-width: 700px) { .es-result-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.es-result-slot, .es-showcase-area { min-width: 0; max-width: 100%; }
.es-showcase-el { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 10px; background: var(--es-bg-2, #111); }
.es-results-empty { margin: 0; padding: 28px 14px; text-align: center; }
/* 390px safety for results, showcase, trial and plans: contained, wrapping, one column under 420px, no fixed width over 390px */
.es-result-slot, .es-showcase-area, .es-plan, .es-results-empty, .es-trial, .es-plan-price { overflow-wrap: anywhere; }
.es-showcase-el, .es-plan, .es-results-empty { max-width: 100%; }
.es-trial { min-width: 0; max-width: 100%; margin: 0 0 16px; }
.es-plan-price { min-width: 0; margin: 0; }
@media (max-width: 419px) {
  .es-result-pair, .es-plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .es-feat-list, .es-plans { grid-template-columns: minmax(0, 1fr); }
  .es-faq summary { font-size: 1.15rem; padding: 18px 32px 18px 0; }
  .es-faq summary::after { top: 12px; }
  .es-after-steps { padding-left: 18px; }
}

/* Feature blocks (content/features/edit-features.th.json): headline, benefit, three steps, needs, limits. */
.es-block-steps { margin: 0 0 8px; padding-left: 1.4em; }
.es-block-steps li { margin: 0 0 4px; }
.es-feat.es-block[data-sales-block-status="planned"] { border-style: dashed; opacity: .85; }

/* ---------------------------------------------------------------------------
   Pre-order hero (4 Nov 2026). Display serif headline with one italic accent
   line, a typing slot that cycles the AI engines, the mascot, a short capture
   form and the launch-price card. Geometry stays on the existing token set. */
.es-page { --es-gold: #d9a441; --es-deep: #0d0d0f; }
.es-hero { position: relative; padding: 24px 0 0; background: radial-gradient(120% 90% at 18% 0%, #1d1a22 0%, var(--es-deep) 62%); overflow: hidden; }
.es-hero-grid { display: grid; gap: 40px; align-items: start; padding-top: 28px; padding-bottom: 48px; }
@media (min-width: 1000px) { .es-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 56px; padding-top: 56px; padding-bottom: 72px; } }

.es-pre-eyebrow { color: var(--es-gold); letter-spacing: .18em; }
.es-h1--pre { font-family: "Noto Serif Thai", "Noto Serif", Georgia, serif; font-weight: 600; font-size: clamp(2.5rem, .9rem + 4.4vw, 4.6rem); line-height: 1.1; letter-spacing: -.015em; margin-bottom: 20px; }
.es-h1-em { display: inline-block; color: var(--es-gold); font-style: normal; }
.es-type { display: inline-flex; align-items: baseline; min-width: 4.5ch; }
.es-type-word { color: var(--es-accent); font-style: normal; }
.es-type-caret { display: inline-block; width: 2px; height: .82em; margin-left: 3px; background: var(--es-gold); animation: es-blink 1s step-end infinite; }
@keyframes es-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .es-type-caret { animation: none; } }

.es-hero-sub { margin: 0 0 12px; max-width: 32em; color: var(--es-ink); font-size: clamp(1.05rem, .95rem + .35vw, 1.35rem); line-height: 1.6; }
.es-hero-sub b { color: var(--es-gold); }
.es-hero-sub2 { margin: 0 0 28px; max-width: 34em; color: var(--es-muted); font-size: .95rem; line-height: 1.7; }
.es-hero-form { max-width: 520px; padding: 20px; border: 1px solid var(--es-line); border-radius: 10px; background: rgba(var(--es-fg-rgb), .03); }
.es-hero-formnote { margin: 12px 0 0; color: var(--es-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; letter-spacing: .02em; }

.es-hero-side { display: grid; gap: 20px; }
.es-mascot { width: 92px; justify-self: start; }
.es-mascot svg { width: 100%; height: auto; display: block; }
@media (min-width: 1000px) { .es-mascot { position: absolute; right: var(--es-gutter); top: 18px; width: 72px; justify-self: end; } }

.es-pre { padding: 22px; border: 1px solid var(--es-line-2); border-radius: 10px; background: linear-gradient(180deg, rgba(217, 164, 65, .09), rgba(var(--es-fg-rgb), .02)); }
.es-pre-tag { margin: 0 0 10px; color: var(--es-gold); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.es-pre-price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.es-pre-price b { color: var(--es-ink); font-size: clamp(2.2rem, 1.4rem + 2vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.es-pre-was { color: var(--es-muted); font-size: 1.1rem; text-decoration-thickness: 2px; }
.es-pre-unit { margin: 0 0 18px; color: var(--es-ink-2); font-size: .9rem; line-height: 1.6; }

.es-statband { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 8px; border-top: 1px solid var(--es-line); background: var(--es-line); }
@media (min-width: 760px) { .es-statband { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.es-statband > div { padding: 26px 20px; background: var(--es-deep); }
.es-statband b { display: block; color: var(--es-ink); font-family: "Noto Serif Thai", "Noto Serif", Georgia, serif; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 600; line-height: 1.1; }
.es-statband span { display: block; margin-top: 6px; color: var(--es-muted); font-size: .8rem; line-height: 1.5; }

/* The hero column is a normal block again: the pre-order hero puts the media and the price card in their own
   column, so the old display:contents layout (which spread every child across the grid) no longer applies. */
.es-hero-copy { display: block; }
.es-hero-copy > * { grid-column: auto; }
.es-h1--pre { font-size: clamp(2.3rem, 1.1rem + 2.4vw, 3.5rem); }

/* Short hero capture form */
.es-cap { display: grid; gap: 14px; }
.es-cap-title { margin: 0; color: var(--es-ink); font-size: .95rem; font-weight: 700; }
.es-cap-row { display: grid; gap: 12px; }
@media (min-width: 560px) { .es-cap-row { grid-template-columns: 1fr 1fr; } }
.es-cap-field { display: grid; gap: 6px; }
.es-cap-field > span { color: var(--es-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.es-cap-field input { min-height: 48px; padding: 0 14px; border: 1px solid var(--es-line-2); border-radius: 6px; background: rgba(var(--es-bg-rgb), .35); color: var(--es-ink); font: inherit; font-size: .95rem; }
.es-cap-field input::placeholder { color: #6b655c; }
.es-cap-field input:focus-visible { outline: 2px solid var(--es-gold); outline-offset: 1px; }
.es-cap-chips { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.es-cap-chips legend { float: left; width: 100%; margin-bottom: 8px; color: var(--es-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.es-cap-chips legend i { font-style: normal; opacity: .7; }
.es-cap-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--es-line-2); border-radius: 999px; color: var(--es-ink-2); font-size: .88rem; cursor: pointer; }
.es-cap-chip input { position: absolute; opacity: 0; pointer-events: none; }
.es-cap-chip:has(input:checked) { border-color: var(--es-gold); background: rgba(217, 164, 65, .14); color: var(--es-ink); }
.es-cap-chip:has(input:focus-visible) { outline: 2px solid var(--es-gold); outline-offset: 2px; }

/* Content OS upsell, after the plans */
.es-cos-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
@media (min-width: 820px) { .es-cos-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.es-cos-list li { padding: 20px; border: 1px solid var(--es-line); border-radius: 8px; background: rgba(var(--es-fg-rgb), .02); }
.es-cos-list b { display: block; margin-bottom: 6px; color: var(--es-ink); font-size: 1.05rem; }
.es-cos-list span { color: var(--es-ink-2); font-size: .9rem; line-height: 1.6; }
.es-btn--ghost { background: transparent; border-color: var(--es-line-2); color: var(--es-ink); }
.es-btn--ghost:hover { background: rgba(var(--es-fg-rgb), .06); color: var(--es-ink); }

/* Hero, second pass: a quieter type scale, the agent name as a slot in the sentence, and the three
   things the customer does not have to do as a single quiet row under the headline. */
.es-h1--pre { font-size: clamp(2.1rem, 1rem + 2.3vw, 3.35rem); line-height: 1.16; letter-spacing: -.01em; margin-bottom: 18px; }
.es-type { position: relative; }
.es-type-word { color: var(--es-ink); font-style: normal; font-weight: 700; border-bottom: 2px solid var(--es-accent); padding-bottom: 2px; }
.es-type-caret { height: .74em; background: var(--es-accent); }
.es-hero-nos { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.es-hero-nos li { position: relative; padding-left: 16px; color: var(--es-ink-2); font-size: .9rem; }
.es-hero-nos li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--es-gold); }
.es-hero-sub { font-size: clamp(1rem, .94rem + .3vw, 1.2rem); color: var(--es-ink-2); max-width: 34em; }
.es-hero-sub2 { font-size: .88rem; max-width: 36em; }
.es-hero-secondary { margin-top: 14px; }
.es-cap-consent { display: flex; gap: 10px; align-items: flex-start; color: var(--es-muted); font-size: .8rem; line-height: 1.5; cursor: pointer; }
.es-cap-consent input { margin-top: .2em; width: 16px; height: 16px; accent-color: var(--es-gold); flex: none; }
.es-cap-consent i { font-style: normal; opacity: .75; }

/* =================================================================================================================
   LAYERS — a finished clip drawn as a stack of decisions (founder order, 4 Nov 2026).
   Thin planes laid almost flat on an oblique surface; the active one lifts out of the stack as the reader scrolls.
   The subject plane carries a cut-out mask so the type plane behind it is genuinely covered by the silhouette.
   Desktop gets the 3D stage; under 900px the same layers stack as flat cards, which is cheaper and still readable. */
.es-ly { background: linear-gradient(180deg, var(--es-deep), #121216 70%); overflow: clip; }
.es-ly-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .es-ly-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; align-items: start; } }

.es-ly-copy .es-italic { margin-bottom: 22px; max-width: 32em; }
.es-ly-modes { display: inline-flex; gap: 4px; margin: 0 0 26px; padding: 4px; border: 1px solid var(--es-line); border-radius: 999px; background: rgba(var(--es-fg-rgb), .03); }
.es-ly-mode { display: inline-flex; align-items: baseline; gap: 7px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--es-ink-2); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; }
.es-ly-mode .es-mono { font-size: .68rem; opacity: .6; }
.es-ly-mode[aria-pressed="true"] { background: var(--es-ink); color: var(--es-deep); }
.es-ly-mode[aria-pressed="true"] .es-mono { opacity: .55; }
.es-ly-mode:focus-visible { outline: 2px solid var(--es-gold); outline-offset: 2px; }

.es-ly-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.es-ly-step { position: relative; padding-left: 16px; }
.es-ly-step::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: transparent; transition: background .2s; }
.es-ly-step[data-ly-on]::before { background: var(--es-gold); }
.es-ly-go { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 12px 0 4px; border: 0; background: none; color: var(--es-muted); font: inherit; text-align: left; cursor: pointer; transition: color .2s; }
.es-ly-step[data-ly-on] .es-ly-go { color: var(--es-ink); }
.es-ly-go:hover { color: var(--es-ink-2); }
.es-ly-go:focus-visible { outline: 2px solid var(--es-gold); outline-offset: 3px; border-radius: 3px; }
.es-ly-num { flex: none; font-size: .68rem; opacity: .55; }
.es-ly-title { font-family: "Noto Serif Thai", "Noto Serif", Georgia, serif; font-size: 1.1rem; font-weight: 600; line-height: 1.35; }
.es-ly-detail { margin: 0 0 12px 28px; max-width: 34em; color: var(--es-muted); font-size: .88rem; line-height: 1.65; opacity: .45; transition: opacity .2s; }
.es-ly-step[data-ly-on] .es-ly-detail { opacity: 1; color: var(--es-ink-2); }

/* stage */
.es-ly-stageholder { min-height: 1px; }
@media (min-width: 1000px) { .es-ly-stageholder { position: sticky; top: 72px; } }
.es-ly-stage { position: relative; border: 0; border-radius: 0; background: none; }
.es-ly-visual { position: relative; height: 480px; display: grid; place-items: center; overflow: visible; }
@media (min-width: 1000px) { .es-ly-visual { height: 600px; } }

.es-ly-space { position: relative; width: 340px; height: 340px; transform-style: preserve-3d; transform: rotateX(62deg) rotateZ(-38deg) translateZ(0); }
.es-ly-plane { position: absolute; inset: 0; margin: auto; width: 250px; height: 330px; border: 1px solid rgba(var(--es-fg-rgb), .14); border-radius: 6px; background: rgba(var(--es-fg-rgb), .015); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .4s, border-color .3s; overflow: hidden; }
/* Real-clip planes (4 Nov): the b-roll plane shows the scenery the founder is sitting in, framed away from his face,
   and the source plane keeps its cut strip readable over the frame underneath it. */
.es-ly-plane img.es-ly-scenery { object-position: left top; opacity: .72; }
.es-ly-plane img.es-ly-under { position: absolute; inset: 0; opacity: .5; }
.es-ly-plane--source { position: relative; }
.es-ly-plane--source .es-ly-strip, .es-ly-plane--source .es-ly-planelabel { position: relative; z-index: 1; }
.es-ly-plane img { width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.es-ly-planelabel { position: absolute; left: 8px; bottom: 8px; color: var(--es-ink-2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

/* resting depth of each plane, back to front */
.es-ly-plane--source   { transform: translateZ(0px); }
.es-ly-plane--broll    { transform: translateZ(26px); }
.es-ly-plane--behind   { transform: translateZ(52px); }
.es-ly-plane--subject  { transform: translateZ(78px); background: none; border-style: dashed; }
.es-ly-plane--front    { transform: translateZ(104px); }
.es-ly-plane--captions { transform: translateZ(130px); }
.es-ly-plane--grade    { transform: translateZ(156px); background: linear-gradient(145deg, rgba(217, 164, 65, .10), rgba(116, 88, 240, .10)); }

/* the active plane lifts clear of the stack and brightens */
.es-ly-plane[data-ly-lift] { border-color: var(--es-accent); box-shadow: 0 0 0 1px var(--es-accent), 0 20px 50px rgba(217, 81, 47, .22); }
.es-ly-plane[data-ly-dim] { opacity: .46; }
/* Not reached yet: gone, not dimmed. Scrolling adds one layer at a time from the footage up to the colour grade,
   so what the reader sees assemble is the real order of the stack (founder, 5 Nov 2026). */
.es-ly-plane[data-ly-wait] { opacity: 0; pointer-events: none; }
.es-ly-plane[data-ly-just] { animation: es-ly-land .5s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes es-ly-land { from { opacity: 0; } to { opacity: 1; } }

/* the subject is cut out of its frame, so the word on the plane below is really covered by the silhouette */
.es-ly-plane--subject img { opacity: 1; }
/* A real alpha cutout (5 Nov), so the plane shows the person and nothing else: no crop, no drawn mask. */
.es-ly-plane img.es-ly-cut { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); }
.es-ly-word { position: absolute; inset: 0; display: grid; place-items: center; color: #efe6d4; font-family: "Noto Serif Thai", "Noto Serif", Georgia, serif; font-size: 3.4rem; font-weight: 700; letter-spacing: .04em; opacity: .92; }
.es-ly-cap { position: absolute; left: 10px; right: 10px; bottom: 26px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.es-ly-cap i, .es-ly-cap b { padding: 2px 6px; border-radius: 3px; background: rgba(var(--es-bg-rgb), .65); color: #fff; font-style: normal; font-size: .62rem; }
.es-ly-cap b { background: var(--es-gold); color: #231a08; }
.es-ly-chipbox { position: absolute; left: 12px; top: 16px; padding: 5px 10px; border: 1px solid rgba(var(--es-fg-rgb), .35); border-radius: 4px; color: #fff; font-size: .6rem; background: rgba(var(--es-bg-rgb), .4); }
.es-ly-strip { position: absolute; left: 10px; right: 10px; top: 50%; display: flex; gap: 2px; height: 26px; transform: translateY(-50%); }
.es-ly-strip i { flex: 1 1 auto; border-radius: 2px; background: rgba(var(--es-fg-rgb), .3); }
.es-ly-strip i.is-cut { background: rgba(226, 84, 70, .75); }
.es-ly-strip i.is-trim { background: rgba(217, 164, 65, .7); }

/* sound view */
.es-ly-sound { position: relative; padding: 22px 18px 10px; }
.es-ly-tracks { display: grid; gap: 8px; }
.es-ly-track { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 12px; align-items: center; opacity: .4; transition: opacity .25s; }
.es-ly-track[data-ly-on] { opacity: 1; }
.es-ly-trackname { margin: 0; color: var(--es-ink-2); font-size: .76rem; line-height: 1.35; }
.es-ly-lane { position: relative; height: 22px; border-radius: 4px; background: rgba(var(--es-fg-rgb), .04); }
.es-ly-lane i { position: absolute; top: 4px; bottom: 4px; border-radius: 3px; background: rgba(var(--es-fg-rgb), .22); }
.es-ly-track[data-ly-on] .es-ly-lane i { background: var(--es-gold); }
.es-ly-head { position: absolute; top: 18px; bottom: 44px; left: 0; width: 1px; background: var(--es-accent); pointer-events: none; }

/* bar */
.es-ly-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--es-line); }
.es-ly-play { min-height: 34px; padding: 0 14px; border: 1px solid var(--es-line-2); border-radius: 999px; background: transparent; color: var(--es-ink); font: inherit; font-size: .82rem; cursor: pointer; }
.es-ly-play:focus-visible { outline: 2px solid var(--es-gold); outline-offset: 2px; }
.es-ly-schem { margin-left: auto; opacity: .7; }

/* Phone keeps the same stack rather than degrading to flat bars: this chapter sits under the hero and the stack IS
   the idea. It only gets smaller, and the stage sticks so the build-up is visible while the steps scroll past. */
@media (max-width: 999px) {
  .es-ly-stageholder { position: sticky; top: 56px; z-index: 1; }
  .es-ly-visual { height: 56vh; min-height: 320px; max-height: 420px; padding: 0; }
  .es-ly-space { transform: rotateX(62deg) rotateZ(-38deg) scale(.68); }
  .es-ly-word { font-size: 1.6rem; }
  .es-ly-track { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); }
  .es-ly-grid { gap: 10px; }
  .es-ly-steps { margin-top: 4px; }
}
@media (max-width: 560px) { .es-ly-space { transform: rotateX(62deg) rotateZ(-38deg) scale(.54); } }
@media (prefers-reduced-motion: reduce) {
  .es-ly-plane, .es-ly-track, .es-ly-detail, .es-ly-go { transition: none; }
}
/* `hidden` must win over the grid/flex display the stage and the step lists set */
.es-ly [hidden] { display: none !important; }
.es-ly-visual { min-height: 320px; }
@media (min-width: 1000px) { .es-ly-visual { height: 560px; } .es-ly-space { width: 420px; height: 420px; } .es-ly-plane { width: 330px; height: 430px; } }
/* the layers section carries its own gutter token so it lays out correctly wherever it sits in the page */
.es-ly { --es-gutter: 20px; }
@media (min-width: 900px) { .es-ly { --es-gutter: 56px; } }

/* Hero, third pass: no price card, no mascot, no italic display type. The hero introduces the product and takes a
   name; the offer is argued at the end of the page. The agent row names what it works with, in type, not logo art. */
.es-h1-em { font-style: normal; color: var(--es-ink); }
.es-type-word { font-style: normal; }
.es-h1--pre { font-family: "Noto Sans Thai", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1.14; font-size: clamp(2.15rem, 1.05rem + 2.4vw, 3.5rem); }
.es-ly-title, .es-statband b { font-family: "Noto Sans Thai", system-ui, sans-serif; font-weight: 750; }
.es-hero-grid { padding-top: 40px; padding-bottom: 64px; }
@media (min-width: 1000px) { .es-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 72px; padding-top: 72px; padding-bottom: 96px; } }
.es-hero-copy > * + * { margin-top: 18px; }
.es-hero-sub { margin-bottom: 0; }
.es-hero-form { margin-top: 28px; }
.es-agents { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--es-line); }
.es-agents-label { margin: 0 0 12px; color: var(--es-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.es-agents ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.es-agents li { color: var(--es-ink-2); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; opacity: .75; }
.es-hero-side { align-content: start; }

/* The typing slot reserves the width of the longest agent name, so the headline does not reflow mid-cycle. */
.es-type { min-width: 7.5ch; }
@media (max-width: 560px) { .es-type { min-width: 0; } }
.es-h1-em .es-type { min-width: 9.5em; }
@media (max-width: 760px) { .es-h1-em .es-type { min-width: 0; } }
/* The changing words in the headline: a colour swash behind them, no underline, never italic. */
.es-h1 .es-type-word {
  background: linear-gradient(rgba(255, 106, 77, .28), rgba(255, 106, 77, .28)) 0 .72em / 100% .34em no-repeat;
  border-bottom: 0; padding-bottom: 0; font-style: normal;
}
.es-h1-em .es-type-word { background-color: transparent; }

/* Each agent gets its own colour behind its name, so the headline reads as that brand without shipping a mark
   that is not ours (founder 4 Nov: "ต้องเปลี่ยนเป็นโลโก้ ... แต่ก็ต้องเอาให้มันดีๆหน่อย"). The swash is set from
   data-word, which the type cycle writes as it types. */
.es-h1 .es-type-word[data-word="gemini"]  { background-image: linear-gradient(rgba(138, 163, 255, .34), rgba(138, 163, 255, .34)); }
.es-h1 .es-type-word[data-word="claude"]  { background-image: linear-gradient(rgba(217, 119, 87, .34), rgba(217, 119, 87, .34)); }
.es-h1 .es-type-word[data-word="codex"]   { background-image: linear-gradient(rgba(180, 180, 180, .3), rgba(180, 180, 180, .3)); }
.es-h1 .es-type-word[data-word="deepseek"]{ background-image: linear-gradient(rgba(104, 141, 255, .34), rgba(104, 141, 255, .34)); }
.es-h1 .es-type-word[data-word="grok"]    { background-image: linear-gradient(rgba(220, 220, 220, .3), rgba(220, 220, 220, .3)); }

/* The band between the hero and the rest of the page. */
.es-band { margin: 34px 0 0; padding: 22px 0 24px; border-top: 1px solid var(--es-line); border-bottom: 1px solid var(--es-line); background: rgba(var(--es-fg-rgb), .04); overflow: hidden; }
.es-band-label { margin: 0 0 14px; color: var(--es-muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.es-mq { overflow: hidden; }
.es-mq-track { display: flex; width: max-content; animation: es-mq-run 38s linear infinite; }
.es-mq-run { display: flex; align-items: center; flex: 0 0 auto; }
.es-mq-item { padding: 0 18px; white-space: nowrap; }
.es-mq-dot { color: var(--es-accent); }
.es-mq--agents .es-mq-item { font-size: 1.3rem; font-weight: 650; color: var(--es-ink); }
.es-mq--ticker { margin-top: 12px; }
.es-mq--ticker .es-mq-track { animation-duration: 54s; animation-direction: reverse; }
.es-mq--ticker .es-mq-item { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--es-muted); }
@keyframes es-mq-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .es-mq-track { animation: none; } }
@media (max-width: 620px) { .es-mq--agents .es-mq-item { font-size: 1.05rem; } .es-band { margin-top: 24px; } }

/* The offer table: what you get on the left, what it costs elsewhere on the right. */
.es-ost { list-style: none; margin: 18px 0 0; padding: 0; border: 1px solid var(--es-line); border-radius: 14px; overflow: hidden; }
.es-ost-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 15px 18px; border-bottom: 1px solid var(--es-line); }
.es-ost-row:last-child { border-bottom: 0; }
.es-ost-row--bonus { background: rgba(255, 106, 77, .1); }
.es-ost-what b { display: block; font-size: 1rem; }
.es-ost-what > span { display: block; margin-top: 2px; color: var(--es-muted); font-size: .86rem; line-height: 1.55; }
.es-ost-tag { display: inline-block; width: fit-content; justify-self: start; margin-bottom: 4px; padding: 1px 9px; border-radius: 99px; background: var(--es-accent); color: #141414; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.es-ost-val { text-align: right; max-width: 11rem; }
.es-ost-val b { display: block; color: var(--es-accent); font-size: 1rem; white-space: nowrap; }
.es-ost-val span { display: block; margin-top: 2px; color: var(--es-muted); font-size: .76rem; line-height: 1.45; }
.es-ost-inc { color: var(--es-muted); font-size: .8rem; letter-spacing: .04em; }
.es-ost-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 0 0; padding: 0 18px; font-size: 1.05rem; }
.es-ost-total span { color: var(--es-muted); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; }
.es-ost-was { color: var(--es-muted); font-weight: 650; }
.es-ost-note { margin: 10px 0 0; padding: 0 18px; color: var(--es-muted); font-size: .78rem; line-height: 1.6; }
@media (max-width: 560px) { .es-ost-row { grid-template-columns: 1fr; gap: 6px; } .es-ost-val { text-align: left; max-width: none; } }

/* What ends, next to the price. */
.es-scarce { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--es-accent); border-radius: 12px; }
.es-scarce-head { margin: 0; font-weight: 700; color: var(--es-accent); letter-spacing: .02em; }
.es-scarce-after { margin: 4px 0 0; color: var(--es-ink-2); font-size: .84rem; line-height: 1.6; }

.es-paths { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 0 0 18px; }
@media (max-width: 620px) { .es-paths { grid-template-columns: 1fr; } }
.es-path { display: block; padding: 14px 16px; border: 1px solid var(--es-line); border-radius: 12px; text-decoration: none; color: inherit; background: rgba(var(--es-fg-rgb), .04); transition: border-color .15s ease, transform .15s ease; }
.es-path:hover { border-color: var(--es-accent); transform: translateY(-1px); }
.es-path b { display: block; font-size: 1rem; margin-bottom: 2px; }
.es-path span { display: block; color: var(--es-muted); font-size: .85rem; line-height: 1.5; }
.es-path--buy { border-color: var(--es-accent); box-shadow: inset 0 0 0 1px var(--es-accent); }
.es-cap-note { margin: -4px 0 14px; color: var(--es-muted); font-size: .85rem; }
.es-hero-kind { margin: 14px 0 18px; color: var(--es-muted); font-size: .9rem; letter-spacing: .01em; }
.es-hero-sub b { color: var(--es-ink); font-weight: 650; }
/* In the hero the caption under the frame already says the picture is an illustration; the dashed notice repeats it. */
.es-hero-media [data-sales-placeholder] { display: none; }
/* Before/after captions sit on their own side of the wipe instead of colliding in the middle. */
.vs-illus-under .vs-illus-cap { justify-self: start; max-width: 46%; }
.vs-illus-over .vs-illus-cap { justify-self: end; max-width: 46%; }

/* The closing offer: what you get on the left, what it costs on the right. */
.es-offer-sec { background: var(--es-bg-2); }
.es-offer-grid { display: grid; gap: 36px; }
@media (min-width: 940px) { .es-offer-grid { grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); gap: 64px; align-items: start; } }
.es-offer-stack { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.es-offer-stack li { display: grid; gap: 3px; padding: 15px 0; border-top: 1px solid var(--es-line); }
.es-offer-stack li:last-child { border-bottom: 1px solid var(--es-line); }
.es-offer-stack b { color: var(--es-ink); font-size: 1.02rem; font-weight: 750; }
.es-offer-stack span { color: var(--es-ink-2); font-size: .9rem; line-height: 1.6; }
.es-offer-card { position: sticky; top: 80px; padding: 26px; border: 1px solid var(--es-line-2); border-radius: 12px; background: var(--es-bg); box-shadow: 0 2px 20px rgba(var(--es-fg-rgb), .05); }
.es-offer-when { margin: 0 0 20px; color: var(--es-ink-2); font-size: .88rem; line-height: 1.6; }
.es-offer-limit { margin: 14px 0 0; color: var(--es-accent); font-size: .88rem; font-weight: 700; text-align: center; }
.es-offer-limit[hidden] { display: none; }
.es-offer-fine { margin: 14px 0 0; color: var(--es-muted); font-size: .78rem; line-height: 1.6; }

/* How it works: six steps, read in order, no status chips. */
.es-how .es-flow { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--es-line); border-block: 1px solid var(--es-line); }
@media (min-width: 760px) { .es-how .es-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .es-how .es-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.es-how .es-flow-step { padding: 22px 18px; background: var(--es-bg); }
/* The scroll-spy min-height belongs to the LAYERS flow, not to these cards. */
.es-how .es-flow-step, .es-how .es-flow-step:first-child { min-height: 0; display: block; opacity: 1; }
.es-how .es-flow-go .es-flow-num { margin-bottom: 0; }
.es-how .es-flow-step .es-flow-feel { font-style: normal; color: var(--es-muted); }
.es-how .es-flow-num { display: block; margin-bottom: 10px; color: var(--es-accent); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.es-how .es-flow-step h3 { margin: 0 0 6px; font-size: 1.1rem; }
.es-how .es-flow-step p { margin: 0 0 8px; color: var(--es-ink-2); font-size: .88rem; line-height: 1.55; }
.es-how .es-flow-feel { color: var(--es-muted); font-style: normal; }
.es-how .es-flow-future { margin: 10px 0 0; color: var(--es-muted); font-size: .8rem; }
.es-how .es-flow-future span { display: block; color: var(--es-accent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
/* Steps align to the top of their cell and keep the "included" line pinned at the bottom. */
.es-how .es-flow-step { display: grid; align-content: start; gap: 0; }
.es-how .es-flow-future { margin-top: auto; padding-top: 12px; }
.es-how .es-flow { align-items: stretch; }
/* The slot reflows with the word instead of reserving a gap: the reference heroes do the same. */
.es-type { min-width: 0; }

/* Pre-purchase onboarding: three questions, then a card that reflects the answers back. */
.es-ob { background: var(--es-bg-2); }
.es-ob-form { margin-top: 32px; max-width: 880px; }
.es-ob-step { margin: 0; padding: 0; border: 0; }
.es-ob-step[hidden] { display: none; }
.es-ob-q { padding: 0; margin: 0 0 18px; color: var(--es-ink); font-family: "Noto Sans Thai", system-ui, sans-serif; font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); font-weight: 750; }
.es-ob-q .es-mono { margin-right: 10px; color: var(--es-accent); font-size: .68rem; letter-spacing: .1em; }
.es-ob-opts { display: grid; gap: 12px; }
@media (min-width: 760px) { .es-ob-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.es-ob-opt { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--es-line-2); border-radius: 10px; background: var(--es-bg); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.es-ob-opt:hover { border-color: var(--es-accent); transform: translateY(-1px); }
.es-ob-opt:focus-visible { outline: 2px solid var(--es-gold); outline-offset: 2px; }
.es-ob-opt[data-ob-on] { border-color: var(--es-accent); box-shadow: inset 0 0 0 1px var(--es-accent); }
.es-ob-opt b { color: var(--es-ink); font-size: 1.02rem; font-weight: 750; }
.es-ob-opt span { color: var(--es-ink-2); font-size: .86rem; line-height: 1.55; }
.es-ob-result[hidden] { display: none; }
.es-ob-sum { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 2px; }
.es-ob-sum li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--es-line); }
.es-ob-sum li:last-child { border-bottom: 1px solid var(--es-line); }
.es-ob-sum b { color: var(--es-ink); font-size: 1rem; }
.es-ob-sum span { color: var(--es-ink-2); font-size: .88rem; }
.es-ob-note { margin: 0 0 20px; color: var(--es-muted); font-size: .85rem; }
.es-ob-again { min-height: 44px; padding: 0 16px; border: 1px solid var(--es-line-2); border-radius: 999px; background: transparent; color: var(--es-ink-2); font: inherit; font-size: .86rem; cursor: pointer; }

/* Mode samples (4 Nov): the row of real clips under the mode player; one row shows at a time. */
.es-mode-clips { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.es-mode-clips[hidden] { display: none; }
.es-mode-clips-label { opacity: .62; margin-right: 2px; }
.es-mode-clips .es-chip { min-width: 2.4rem; justify-content: center; }
.es-mode-clips .es-chip[aria-pressed="true"] { background: var(--es-accent); border-color: var(--es-accent); color: #140b08; }

/* PLAY cards lead with the hook (4 Nov); the scene MEW builds for it sits under the hook, quieter. */
.es-play-scenes b { font-size: 1.02rem; line-height: 1.35; }
.es-play-scenename { display: block; margin: 6px 0 4px; color: var(--es-accent); opacity: .9; }

/* The style library strip (5 Nov): real work on real footage, one card per look, swipeable. */
.es-looks-strip { display: flex; gap: 16px; margin: 28px calc(-1 * var(--es-gutter)) 0; padding: 0 var(--es-gutter) 14px; overflow-x: auto; scroll-snap-type: x proximity; list-style: none; }
.es-looks-strip > li { flex: 0 0 min(232px, 62vw); scroll-snap-align: start; display: grid; gap: 2px; }
.es-looks-strip .vs { margin: 0 0 8px; border-radius: 10px; overflow: hidden; }
.es-looks-n { opacity: .55; }
.es-looks-strip > li b { font-size: 1rem; line-height: 1.3; }
.es-looks-strip > li span:not(.es-looks-n) { font-size: .86rem; line-height: 1.45; opacity: .72; }

/* The agent mark: a terminal prompt in front of the name, in that agent's colour (5 Nov). */
.es-agent-mark { width: 1em; height: .86em; margin-right: .34em; flex: none; vertical-align: -.02em; }
.es-mq--agents .es-mq-item { display: inline-flex; align-items: center; }
.es-type--agent { display: inline-flex; align-items: baseline; }
.es-type--agent .es-agent-mark { color: var(--es-muted); transition: color .4s ease; }
.es-type--agent[data-word="claude"]   .es-agent-mark { color: #d97757; }
.es-type--agent[data-word="chatgpt"]  .es-agent-mark { color: #19c37d; }
.es-type--agent[data-word="gemini"]   .es-agent-mark { color: #8aa3ff; }
.es-type--agent[data-word="codex"]    .es-agent-mark { color: #c8c8c8; }
.es-type--agent[data-word="deepseek"] .es-agent-mark { color: #688dff; }
.es-type--agent[data-word="grok"]     .es-agent-mark { color: #dcdcdc; }

/* How far PLAY actually got (5 Nov): the character's own sheet and four real storyboard beats, then the
   second style named beside it. */
.es-play-craft { display: grid; gap: 34px; margin-top: 40px; }
@media (min-width: 900px) { .es-play-craft { grid-template-columns: 1fr 1fr; gap: 40px; } }
.es-play-craft img { display: block; width: 100%; height: auto; margin-top: 16px; border-radius: 10px; border: 1px solid var(--es-line); }
.es-play-craft h4, .es-play-second h4 { margin: 4px 0 8px; }
.es-play-second { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--es-line); max-width: 62ch; }

/* The stage is a diagram, not a player: it lost its transport bar on 5 Nov, so the planes carry the reading.
   Every plane is a card with a visible edge, the way the removed stack diagram drew them. */
.es-ly-plane { border: 1px solid rgba(var(--es-fg-rgb), .26); border-radius: 10px; background: rgba(20, 20, 24, .3); }
.es-ly-visual { padding-bottom: 18px; }

/* Phone legibility pass (5 Nov): the founder reviews on a phone, and the diagram labels, badges and mono
   captions were sitting at 9-10px, which is under what Thai glyphs stay readable at. */
@media (max-width: 620px) {
  .es-ly-planelabel { font-size: .72rem; }
  .es-ly-chipbox { font-size: .76rem; }
  .vs-badge { font-size: .74rem; }
  .es-mq--ticker .es-mq-item { font-size: .76rem; }
  .es-looks-strip > li span:not(.es-looks-n) { font-size: .9rem; }
  .es-mono { font-size: .78rem; }
}
/* A decorative glow must never widen the page on a phone. */
.es-film-glow { max-width: 100%; }

/* compare chapter: the audience word cycles in the heading, and the shift table reads as before/after */
.es-type--for { color: var(--es-accent); }
.es-cmp--shift th[scope="row"] { font-weight: 400; opacity: .72; }
.es-cmp-note { display: block; margin-top: 4px; font-size: .86em; opacity: .7; }
.es-cmp-h3 { margin-top: 42px; }
#compare .es-cmp-scroll + .es-cmp-h3 { border-top: 1px solid var(--es-line); padding-top: 34px; }
.es-cmp-later { color: var(--es-accent); font-weight: 500; opacity: .95; }

/* Founder, 5 Nov 2026: this chapter sits under the hero, so the stack has to be watched, not glimpsed. Each step
   owns a screenful of scroll, which gives every layer its own moment to land; the stage stays put in the middle of
   the viewport while the steps travel past it. Tall on purpose. */
.es-ly-step { min-height: 42vh; display: flex; flex-direction: column; justify-content: center; }
.es-ly-steps { padding-bottom: 8vh; }
@media (min-width: 1000px) {
  .es-ly-stageholder { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; }
}
@media (max-width: 999px) {
  .es-ly-step { min-height: 34vh; }
  .es-ly-stageholder { top: 0; height: 58vh; display: grid; align-content: center; }
  .es-ly-visual { height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .es-ly-step { min-height: 0; } }
/* and the chapter itself must not clip: the whole point is planes that lift clear of the stack */
.es-section.es-ly { overflow: visible; }

/* Three areas, so the order can differ by viewport: on a wide screen the stage holds the right-hand column beside
   the heading and the steps; on a phone it sits between them and sticks, so the stack is on screen the whole time
   the steps scroll past it. Before this the steps came first in the DOM and the stage was below all seven of them,
   which on a phone meant the stack was never on screen at all (founder, 5 Nov 2026). */
.es-ly-copy { grid-area: copy; }
.es-ly-stageholder { grid-area: stage; }
.es-ly-list { grid-area: list; min-width: 0; }
.es-ly-grid { grid-template-areas: "copy" "stage" "list"; }
@media (min-width: 1000px) {
  .es-ly-grid { grid-template-areas: "copy stage" "list stage"; align-items: start; }
  .es-ly-stageholder { align-self: start; }
}
@media (max-width: 999px) {
  /* the mask behind the sticky stack is full-bleed, so it reads as the page fading out rather than as a panel
     with edges — the boxed look the founder objected to */
  .es-ly-stageholder { position: sticky; top: 52px; z-index: 2; }
  .es-ly-stageholder::before { content: ''; position: absolute; inset: -12px -50vw -2px; background: linear-gradient(#0b0b0e 76%, rgba(11, 11, 14, 0)); pointer-events: none; }
  .es-ly-stageholder > * { position: relative; }
  .es-ly-grid { gap: 0; }
  .es-ly-list { padding-top: 6vh; }
}

/* the oblique projection drifts right of centre, so the stack is nudged back into the middle of its column */
@media (min-width: 1000px) { .es-ly-space { transform: rotateX(62deg) rotateZ(-38deg) translate(70px, -40px) scale(1.12); } }

/* two ways in at the end of the page */
.es-paths { display: grid; gap: 16px; margin: 26px 0 34px; }
@media (min-width: 860px) { .es-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.es-path { padding: 22px; border: 1px solid var(--es-line); border-radius: 10px; background: rgba(var(--es-fg-rgb), .02); }
.es-path--main { border-color: var(--es-accent); background: rgba(217, 81, 47, .06); }
.es-path-tag { margin: 0 0 8px; opacity: .7; }
.es-path h3 { margin: 0 0 8px; }
.es-path > p { margin: 0 0 12px; }
.es-btn--block { display: block; text-align: center; }