/* ═══════════════════════════════════════════════════════════════════════════
 * Entangled Text — homepage, studio skin.
 *
 * Components only. The palette and the flattening live in et-public-studio.css,
 * which loads first; everything here reads its tokens.
 *
 * Two rules run through all of it:
 *   - A panel is #09090b on #000. That difference IS the edge. Nothing draws a
 *     border unless the edge carries meaning, and then it is an inset hairline
 *     rather than a border, so it cannot change layout.
 *   - Nothing is rounded.
 * ═══════════════════════════════════════════════════════════════════════════ */

.et-hs {
    --hs-gap: 1px;              /* the black seam between panels */
    --hs-pad: clamp(1.1rem, 2vw, 1.6rem);
    background: transparent;
    color: var(--et-text-primary);
}

body.et-home-page #main-content {
    overflow: visible;
}

body.et-home-page.et-public-site footer.et-site-footer {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45) 55%);
    border-top: 0;
    overflow: visible;
}

.et-hs-wrap {
    width: min(1240px, 100% - 2.5rem);
    margin-inline: auto;
}

/* ── Type ─────────────────────────────────────────────────────────────── */
.et-hs-kicker {
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--et-accent-primary);
    margin: 0 0 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.et-hs-kicker__mark {
    width: 6px;
    height: 6px;
    background: var(--et-accent-primary);
    flex: none;
}

/* Two squares on a thread. They flash in the same frame — measuring one
   is measuring both, which is the same idea the field behind the hero draws. */
.et-hs-kicker__pair {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 8px;
    flex: none;
}

.et-hs-kicker__dot {
    position: absolute;
    top: 1px;
    width: 6px;
    height: 6px;
    background: var(--et-accent-primary);
    animation: et-hs-pair-flash 2.8s ease-in-out infinite;
}

.et-hs-kicker__dot:first-child { left: 0; }
.et-hs-kicker__dot:last-of-type { right: 0; }

.et-hs-kicker__thread {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 3.5px;
    height: 1px;
    background: color-mix(in srgb, var(--et-accent-primary) 70%, transparent);
    transform-origin: center;
    animation: et-hs-pair-thread 2.8s ease-in-out infinite;
}

@keyframes et-hs-pair-flash {
    0%, 72%, 100% { opacity: 0.85; box-shadow: none; }
    78%, 86% { opacity: 1; box-shadow: 0 0 8px var(--et-accent-primary); }
}

@keyframes et-hs-pair-thread {
    0%, 72%, 100% { opacity: 0.4; transform: scaleX(1); }
    78%, 86% { opacity: 1; transform: scaleX(1.04); }
}

.et-hs-h2 {
    font-family: var(--et-font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.9rem;
    color: var(--et-text-primary);
}

.et-hs-lead {
    color: var(--et-text-secondary);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 62ch;
    margin: 0;
}

.et-hs-head {
    margin-bottom: 2rem;
    max-width: 70ch;
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.et-hs-section {
    padding: clamp(2.5rem, 5.5vw, 4.5rem) 0;
}

/* The only tonal shift on the page: a band of panel-grey behind a section,
   used to group rather than to decorate. */
.et-hs-section--inset {
    background: transparent;
    box-shadow: inset 0 1px 0 var(--et-hairline), inset 0 -1px 0 var(--et-hairline);
}

/* ── Buttons ──────────────────────────────────────────────────────────────
 * Square, DM Sans, weight 700 — .btn-et-primary from the studio. */
.et-hs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.72rem 1.35rem;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    border: 0;
    border-radius: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.et-hs-btn--primary {
    background: var(--et-accent-primary);
    color: var(--et-accent-ink);
}

.et-hs-btn--primary:hover {
    background: var(--et-accent-primary-hover);
    color: var(--et-accent-ink);
}

.et-hs-btn--ghost {
    background: var(--et-bg-secondary);
    color: var(--et-text-primary);
    box-shadow: inset 0 0 0 1px var(--et-hairline);
}

.et-hs-btn--ghost:hover {
    background: var(--et-bg-hover);
    color: var(--et-accent-primary);
}

.et-hs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem 0 0;
}

.et-hs-actions--centre {
    justify-content: center;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.et-hs-hero {
    position: relative;
    /* The header is a painting that hangs into this field. Pull the hero
       (and the entanglement canvas) up behind the nav so there is one black,
       not a boxed strip sitting on a second one. --hh-h is the masthead's
       live height. */
    margin-top: calc(-1 * var(--hh-h, 7.75rem));
    padding: calc(var(--hh-h, 7.75rem) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(2rem, 4vw, 3rem);
    overflow: hidden;
    background:
        radial-gradient(90% 70% at 18% -20%, rgba(45, 212, 191, 0.14), transparent 58%),
        radial-gradient(80% 60% at 82% -10%, rgba(20, 184, 166, 0.10), transparent 55%);
}

.et-hs-field {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    /* Behind in-flow homepage content, above the body's black. Fixed to the
       viewport so every section sits in the same field. */
    z-index: -1;
    opacity: 0.64;
}

.et-hs-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.et-hs-hero__copy {
    position: relative;
    isolation: isolate;
    padding: 0.85rem 1rem 1rem 1.1rem;
}

.et-hs-hero__bracket,
.et-hs-hero__scan {
    position: absolute;
    pointer-events: none;
}

.et-hs-hero__bracket {
    inset: 0;
    z-index: 0;
}

.et-hs-hero__bracket::before,
.et-hs-hero__bracket::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
}

.et-hs-hero__bracket::before {
    top: 0;
    left: 0;
    border-top: 1px solid color-mix(in srgb, var(--et-accent-primary) 72%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--et-accent-primary) 72%, transparent);
}

.et-hs-hero__bracket::after {
    right: 0;
    bottom: 0;
    border-right: 1px solid color-mix(in srgb, var(--et-accent-primary) 72%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--et-accent-primary) 72%, transparent);
}

.et-hs-hero__scan {
    left: 0;
    right: 0;
    height: 1px;
    top: 8%;
    z-index: 4;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--et-accent-primary) 55%, transparent),
        transparent
    );
    opacity: 0;
    animation: et-hs-copy-scan 9.5s ease-in-out infinite;
}

@keyframes et-hs-copy-scan {
    0% { top: 4%; opacity: 0; }
    12% { opacity: 0.4; }
    88% { opacity: 0.18; }
    100% { top: 96%; opacity: 0; }
}

.et-hs-hero__title-stage {
    position: relative;
    margin: 0 0 1.1rem;
    font-family: var(--et-font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.et-hs-hero__title {
    position: relative;
    z-index: 2;
    font: inherit;
    letter-spacing: inherit;
    margin: 0;
    text-shadow: 0 0 22px color-mix(in srgb, var(--et-accent-primary) 22%, transparent);
    animation: et-hs-title-breathe 8.5s ease-in-out infinite;
}

@keyframes et-hs-title-breathe {
    0%, 100% {
        text-shadow: 0 0 16px color-mix(in srgb, var(--et-accent-primary) 14%, transparent);
    }
    50% {
        text-shadow: 0 0 34px color-mix(in srgb, var(--et-accent-primary) 36%, transparent);
    }
}

.et-hs-hero__title-accent {
    display: block;
    color: var(--et-accent-primary);
}

.et-hs-hero__corr {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.et-hs-hero__corr path {
    fill: none;
    stroke: var(--et-accent-primary);
    stroke-width: 1;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.et-hs-hero__corr.is-on path {
    opacity: 0.45;
}

.et-hs-hero__word {
    white-space: nowrap;
}

.et-hs-hero__letter {
    display: inline-block;
    animation: et-hs-letter-drift 7.6s ease-in-out infinite;
    will-change: transform;
}

@keyframes et-hs-letter-drift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    40% { transform: translate3d(0, -2px, 0); }
    70% { transform: translate3d(0, 1px, 0); }
}

.et-hs-hero__letter.is-hit {
    color: var(--et-accent-primary);
    text-shadow: 0 0 16px color-mix(in srgb, var(--et-accent-primary) 70%, transparent);
}

.et-hs-hero__lead {
    position: relative;
    color: var(--et-text-secondary);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 52ch;
    margin: 0;
    padding-left: 0.85rem;
}

.et-hs-hero__lead::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25em;
    bottom: 0.25em;
    width: 1px;
    background: linear-gradient(
        180deg,
        var(--et-accent-primary),
        color-mix(in srgb, var(--et-accent-primary) 12%, transparent)
    );
    opacity: 0.55;
}

.et-hs-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.35rem 0 0;
}

.et-hs-hero__signin {
    margin: 0.7rem 0 0;
    font-size: 0.875rem;
    color: var(--et-text-muted);
}

.et-hs-hero__signin a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--et-acc-teal, #2dd4bf);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.et-hs-hero .et-hs-btn--primary {
    position: relative;
    overflow: hidden;
}

.et-hs-hero .et-hs-btn--primary::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(6, 17, 15, 0.72), transparent);
    background-size: 42% 100%;
    background-repeat: no-repeat;
    animation: et-hs-edge-run 2.6s linear infinite;
}

@keyframes et-hs-edge-run {
    0% { background-position: -50% 0; }
    100% { background-position: 150% 0; }
}

.et-hs-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.35rem;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--et-text-muted);
    margin: 1.1rem 0 0;
}

.et-hs-hero__tick {
    width: 6px;
    height: 6px;
    margin-right: 0.55rem;
    background: var(--et-accent-primary);
    flex: none;
    animation: et-hs-pair-flash 2.8s ease-in-out infinite;
}

.et-hs-hero__meta > span:not(.et-hs-hero__tick) + span::before {
    content: '·';
    margin: 0 0.55rem;
    color: color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
}

/* ── The studio reproduction in the hero ─────────────────────────────────
 * Laid out against the running Write page, not from its partials. The earlier
 * version put Write/Ship top left, made Chapter polish a 136px rail with a
 * single column of bundles, and invented a Story health panel — none of which
 * is what the page does. It reads as the product now because it is copied
 * from it: wide sidebar, two-column Quick bundles, the Kestrel composer at
 * the foot,
 * Kestrel as an editor-toolbar action, and the issue count in a bottom bar.
 * The preview itself floats in the same space as the field — slow wobble,
 * a little 3D tilt, catching teal the way a nearby pair would. */
.et-hs-hero__preview {
    position: relative;
    perspective: 1400px;
    padding: 1.1rem 0.4rem 1.8rem;
    transform-style: preserve-3d;
}

.et-hs-hero__preview::before {
    content: '';
    position: absolute;
    inset: 12% 8% -6% 8%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        55% 50% at 50% 100%,
        rgba(45, 212, 191, 0.16),
        transparent 72%
    );
    filter: blur(18px);
    animation: et-hs-preview-glow 16s ease-in-out infinite;
}

.et-hs-frame {
    position: relative;
    z-index: 1;
    background: var(--et-bg-secondary);
    box-shadow:
        inset 0 0 0 1px var(--et-hairline),
        0 18px 50px -20px rgba(0, 0, 0, 0.7),
        0 0 40px -18px rgba(45, 212, 191, 0.28);
    font-size: 0.72rem;
    user-select: none;
    line-height: 1.45;
    transform-origin: 50% 58%;
    animation: et-hs-frame-float 18s ease-in-out infinite;
    will-change: transform;
}

@keyframes et-hs-frame-float {
    0% {
        transform: translate3d(0, 0, 0) rotateX(1.6deg) rotateY(-3.4deg) rotateZ(-0.45deg);
    }
    22% {
        transform: translate3d(12px, -18px, 10px) rotateX(2.6deg) rotateY(2.2deg) rotateZ(0.55deg);
    }
    44% {
        transform: translate3d(-8px, -9px, 4px) rotateX(0.5deg) rotateY(-2.8deg) rotateZ(0.7deg);
    }
    66% {
        transform: translate3d(7px, -24px, 14px) rotateX(3deg) rotateY(1.4deg) rotateZ(-0.65deg);
    }
    82% {
        transform: translate3d(-5px, -13px, 6px) rotateX(1.2deg) rotateY(-1.8deg) rotateZ(0.3deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotateX(1.6deg) rotateY(-3.4deg) rotateZ(-0.45deg);
    }
}

@keyframes et-hs-preview-glow {
    0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); }
    50% { opacity: 0.95; transform: translate3d(4px, 6px, 0) scale(1.06); }
}

.et-hs-frame__bar-spacer { flex: 1; }

/* Title row — Write / Ship sit at the right, as on the page. */
.et-hs-frame__top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
    box-shadow: inset 0 -1px 0 var(--et-hairline);
}

.et-hs-frame__book {
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--et-text-primary);
}

.et-hs-frame__tab {
    padding: 0.24rem 0.55rem;
    color: var(--et-text-muted);
    font-weight: 600;
}

.et-hs-frame__tab.is-on {
    color: var(--et-accent-primary);
    box-shadow: inset 0 -2px 0 var(--et-accent-primary);
}

/* Status row. */
.et-hs-frame__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.64rem;
    color: var(--et-text-muted);
    box-shadow: inset 0 -1px 0 var(--et-hairline);
}

.et-hs-frame__link { color: var(--et-accent-primary); }

.et-hs-frame__genre,
.et-hs-frame__chip {
    padding: 0.14rem 0.4rem;
    color: var(--et-text-secondary);
    box-shadow: inset 0 0 0 1px var(--et-hairline);
}

.et-hs-frame__save { color: var(--et-text-secondary); }
.et-hs-frame__save b { color: var(--et-text-primary); font-weight: 600; }

/* Body: wide sidebar + editor, the proportions the page uses. */
.et-hs-frame__body {
    position: relative;
    display: grid;
    grid-template-columns: 43% minmax(0, 1fr);
    min-height: 15rem;
}

.et-hs-frame__side {
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    box-shadow: inset -1px 0 0 var(--et-hairline);
}

.et-hs-frame__fold {
    margin: 0;
    font-weight: 600;
    color: var(--et-text-secondary);
    font-size: 0.7rem;
}

.et-hs-frame__fold--open { color: var(--et-text-primary); }

.et-hs-frame__std {
    padding: 0.3rem 0.45rem;
    background: color-mix(in srgb, var(--et-accent-primary) 10%, #000);
    color: var(--et-text-primary);
    box-shadow: inset 2px 0 0 var(--et-accent-primary);
    font-size: 0.68rem;
}

.et-hs-frame__std i {
    font-style: normal;
    color: var(--et-text-muted);
    font-size: 0.6rem;
    margin-left: 0.25rem;
}

.et-hs-frame__polish {
    padding: 0.3rem 0.45rem;
    background: color-mix(in srgb, var(--et-accent-primary) 16%, #000);
    color: var(--et-accent-primary);
    font-weight: 600;
    font-size: 0.68rem;
}

.et-hs-frame__rail-head {
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--et-text-muted);
    margin: 0.25rem 0 0.1rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.et-hs-frame__rail-head i {
    font-style: normal;
    color: var(--et-accent-primary);
    text-transform: none;
    letter-spacing: 0;
}

.et-hs-frame__rail-head--gap { margin-top: 0.5rem; }

/* Quick bundles — two columns, as on the page. */
.et-hs-frame__bundles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
}

.et-hs-frame__bundle {
    padding: 0.28rem 0.4rem;
    background: #000;
    color: var(--et-text-secondary);
    font-size: 0.64rem;
    box-shadow: inset 0 0 0 1px var(--et-hairline);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.et-hs-frame__bundle.is-firing {
    color: var(--et-accent-primary);
    background: color-mix(in srgb, var(--et-accent-primary) 12%, #000);
    box-shadow: inset 2px 0 0 var(--et-accent-primary);
}

.et-hs-frame__prompt {
    display: block;
    min-height: 2.1rem;
    padding: 0.35rem 0.45rem;
    background: #000;
    color: var(--et-text-secondary);
    font-size: 0.64rem;
    box-shadow: inset 0 0 0 1px var(--et-hairline);
}

.et-hs-frame__apply {
    align-self: flex-end;
    min-width: 4.5rem;
    padding: 0.3rem;
    text-align: center;
    background: var(--et-accent-primary);
    color: var(--et-accent-ink);
    font-weight: 700;
    font-size: 0.66rem;
    transition: background 0.16s ease, transform 0.16s ease;
}

/* Editor side. */
.et-hs-frame__main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.et-hs-frame__tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.6rem;
    color: var(--et-text-secondary);
    box-shadow: inset 0 -1px 0 var(--et-hairline);
    /* The row carries four controls in a 350px column. Left to wrap it broke
       "Book tools" and "Brainstorm with Kestrel" across two lines each, which
       the real toolbar never does. Everything stays on one line and the
       chapter name is the part allowed to give. */
    white-space: nowrap;
}

.et-hs-frame__tools > span { flex: none; }

.et-hs-frame__kestrel {
    color: var(--et-accent-primary);
    font-weight: 600;
    transition: background 0.2s ease;
    padding: 0.1rem 0.25rem;
}

.et-hs-frame__kestrel.is-pressed {
    background: color-mix(in srgb, var(--et-accent-primary) 18%, transparent);
}

/* The chapter name is the part that gives, as the toolbar's comment says —
   `.et-hs-frame__tools > span { flex: none; }` outranked `min-width: 0` here,
   so it never shrank and ran past the frame's edge whenever the preview was
   narrower than its four controls (27 Sep 2026, with Support docked). It
   gives first (the large shrink factor); "Brainstorm with Kestrel" only once
   the chapter is down to its padding. */
.et-hs-frame__tools > .et-hs-frame__chnav {
    flex: 0 1000 auto;
}

.et-hs-frame__tools > .et-hs-frame__kestrel {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.et-hs-frame__chnav {
    padding: 0.12rem 0.4rem;
    color: var(--et-text-primary);
    box-shadow: inset 0 0 0 1px var(--et-hairline);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.et-hs-frame__page {
    padding: 0.7rem 0.8rem;
    color: var(--et-text-secondary);
    line-height: 1.6;
    flex: 1;
}

.et-hs-frame__page p { margin: 0 0 0.5rem; }

.et-hs-frame__ch {
    color: var(--et-text-primary);
    font-weight: 700;
    font-size: 0.86rem;
    margin-bottom: 0.45rem !important;
}

/* Kestrel opens over the editor. */
.et-hs-frame__kchat {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.55rem 0.6rem;
    background: #050506;
    box-shadow: inset 0 1px 0 var(--et-hairline);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.et-hs-frame__kchat.is-on {
    transform: none;
    opacity: 1;
}

/* Bottom bar — where the issue count actually lives. */
.et-hs-frame__foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    box-shadow: inset 0 1px 0 var(--et-hairline);
}

.et-hs-frame__fix {
    padding: 0.24rem 0.5rem;
    color: var(--et-text-primary);
    font-weight: 600;
    font-size: 0.66rem;
    box-shadow: inset 0 0 0 1px var(--et-hairline);
    transition: background 0.16s ease, color 0.16s ease;
}

.et-hs-frame__fix b { color: var(--et-accent-primary); }

.et-hs-frame__fix.is-pressed {
    background: color-mix(in srgb, var(--et-accent-primary) 16%, #000);
    color: var(--et-accent-primary);
}

.et-hs-frame__fix.is-clear b { color: var(--et-accent-primary); }

.et-hs-frame__continue {
    padding: 0.26rem 0.6rem;
    background: var(--et-accent-primary);
    color: var(--et-accent-ink);
    font-weight: 700;
    font-size: 0.66rem;
}

/* ── Panels ───────────────────────────────────────────────────────────────
 * The grid gap used to be 1px of hairline so the panels read as one
 * instrument. They float in the field now, so the seam opens and the
 * perspective is what lets them recede. */
.et-hs-grid {
    display: grid;
    gap: clamp(0.9rem, 2vw, 1.4rem);
    background: transparent;
    perspective: 1600px;
}

.et-hs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.et-hs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/*
 * A panel is an instrument cell, not a card.
 *
 * Corner ticks rather than a frame: two short teal rules at the top-left,
 * drawn with a conic gradient so they cost no extra element and no border.
 * They are the register marks you get on a HUD or a print crop, which reads as
 * built rather than decorated — and unlike a glow they survive being square.
 *
 * Idle they recede into the field (home-space-cards.js). Hovering calls one
 * forward toward the cursor; the ticks still mark the live surface.
 */
.et-hs-panel {
    position: relative;
    background: var(--et-bg-secondary);
    padding: var(--hs-pad);
    display: block;
    text-decoration: none;
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow:
        inset 0 0 0 1px var(--et-hairline),
        0 16px 36px -22px rgba(0, 0, 0, 0.75),
        0 0 28px -16px rgba(45, 212, 191, 0.16);
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

/* Corner ticks: an 11px L at the top-left, and its mirror bottom-right. */
.et-hs-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border-top: 1px solid color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
    opacity: 0.5;
    transition: opacity 0.18s ease, width 0.18s ease, height 0.18s ease;
    pointer-events: none;
}

.et-hs-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
    opacity: 0.5;
    transition: opacity 0.18s ease, width 0.18s ease, height 0.18s ease;
    pointer-events: none;
}

.et-hs-panel:hover::before,
.et-hs-panel:hover::after {
    opacity: 1;
    width: 16px;
    height: 16px;
}

.et-hs-panel.is-near {
    z-index: 4;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 42%, transparent),
        0 28px 55px -16px rgba(0, 0, 0, 0.72),
        0 0 48px -10px rgba(45, 212, 191, 0.42);
}

.et-hs-panel--link:hover {
    background: var(--et-bg-hover);
}

/* Icon cell — a fixed square keeps every glyph on the same optical baseline,
   whatever its own bounding box does. */
.et-hs-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    flex: none;
    background: #000;
    box-shadow: inset 0 0 0 1px var(--et-hairline);
    color: var(--et-accent-primary);
    font-size: 0.9rem;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.et-hs-panel:hover .et-hs-panel__icon {
    background: color-mix(in srgb, var(--et-accent-primary) 12%, #000);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 40%, transparent);
}

.et-hs-panel__index {
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--et-accent-primary);
    display: inline-block;
    margin-bottom: 0.75rem;
    padding-bottom: 0.28rem;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--et-accent-primary) 45%, transparent);
}

.et-hs-panel__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--et-font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--et-text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.et-hs-panel__title > i {
    color: var(--et-accent-primary);
    font-size: 0.95rem;
    flex: none;
}

.et-hs-panel__body {
    color: var(--et-text-secondary);
    font-size: 0.87rem;
    line-height: 1.6;
    margin: 0;
}

.et-hs-panel__meta {
    display: block;
    margin-top: 0.7rem;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--et-text-muted);
}

.et-hs-tag {
    display: inline-block;
    margin-bottom: 0.7rem;
    padding: 0.16rem 0.45rem;
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--et-accent-primary);
    box-shadow: inset 0 0 0 1px var(--et-hairline);
}

/* ── Pipeline ─────────────────────────────────────────────────────────── */
.et-hs-pipe {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.9rem, 2vw, 1.4rem);
    background: transparent;
    perspective: 1600px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.et-hs-pipe__step {
    position: relative;
    background: var(--et-bg-secondary);
    padding: var(--hs-pad);
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow:
        inset 0 0 0 1px var(--et-hairline),
        0 16px 36px -22px rgba(0, 0, 0, 0.75),
        0 0 28px -16px rgba(45, 212, 191, 0.16);
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.et-hs-pipe__step.is-near {
    z-index: 4;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--et-accent-primary) 42%, transparent),
        0 28px 55px -16px rgba(0, 0, 0, 0.72),
        0 0 48px -10px rgba(45, 212, 191, 0.42);
}

.et-hs-pipe__step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border-top: 1px solid color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--et-accent-primary) 55%, transparent);
    opacity: 0.45;
    pointer-events: none;
}

.et-hs-pipe__num {
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--et-accent-primary);
    display: block;
    margin-bottom: 0.8rem;
}

.et-hs-pipe__title {
    font-family: var(--et-font-display);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.45rem;
    color: var(--et-text-primary);
}

.et-hs-pipe__body {
    color: var(--et-text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Split ────────────────────────────────────────────────────────────── */
.et-hs-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.et-hs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(0.7rem, 1.5vw, 1rem);
    background: transparent;
    perspective: 1200px;
}

.et-hs-list li {
    background: var(--et-bg-secondary);
    padding: var(--hs-pad);
    color: var(--et-text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow:
        inset 0 0 0 1px var(--et-hairline),
        0 16px 36px -22px rgba(0, 0, 0, 0.75);
}

/* ── Chips ────────────────────────────────────────────────────────────── */
.et-hs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}

.et-hs-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    background: var(--et-bg-secondary);
    color: var(--et-text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--et-hairline);
    transition: background 0.15s ease, color 0.15s ease;
}

.et-hs-chip i {
    color: var(--et-accent-primary);
}

.et-hs-chip:hover {
    background: var(--et-bg-hover);
    color: var(--et-accent-primary);
}

.et-hs-chips--links {
    margin-top: 1.5rem;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.et-hs-faq {
    display: grid;
    gap: var(--hs-gap);
    background: var(--et-hairline);
    box-shadow: 0 0 0 1px var(--et-hairline);
}

.et-hs-faq__item {
    background: var(--et-bg-secondary);
}

.et-hs-faq__q {
    padding: var(--hs-pad);
    cursor: pointer;
    font-weight: 600;
    color: var(--et-text-primary);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.94rem;
}

.et-hs-faq__q::-webkit-details-marker { display: none; }

.et-hs-faq__q::after {
    content: '+';
    color: var(--et-accent-primary);
    font-family: var(--et-font-mono, 'IBM Plex Mono', monospace);
    flex: none;
}

.et-hs-faq__item[open] .et-hs-faq__q::after { content: '−'; }
.et-hs-faq__item[open] .et-hs-faq__q { color: var(--et-accent-primary); }

.et-hs-faq__a {
    margin: 0;
    padding: 0 var(--hs-pad) var(--hs-pad);
    color: var(--et-text-secondary);
    font-size: 0.88rem;
    line-height: 1.7;
    max-width: calc(34em + 2 * var(--hs-pad));
}

.et-hs-faq__link {
    color: var(--et-accent-primary);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

.et-hs-faq__link:hover {
    color: var(--et-text-primary);
}

.et-hs-faq__docs {
    margin: 1.25rem 0 0;
    color: var(--et-text-secondary);
    font-size: 0.9rem;
    line-height: 1.65;
}

/* ── Coda ─────────────────────────────────────────────────────────────── */
.et-hs-coda {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    text-align: center;
    box-shadow: inset 0 1px 0 var(--et-hairline);
}

.et-hs-coda .et-hs-kicker { justify-content: center; }
.et-hs-coda .et-hs-lead { margin-inline: auto; }

.et-hs-h2--coda {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
    .et-hs-hero__inner,
    .et-hs-split { grid-template-columns: minmax(0, 1fr); }
    .et-hs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .et-hs-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .et-hs-hero__preview { padding: 0.6rem 0 1.2rem; }
}

@media (max-width: 720px) {
    .et-hs-wrap { width: min(1240px, 100% - 1.75rem); }
    .et-hs-grid--4,
    .et-hs-grid--3,
    .et-hs-pipe { grid-template-columns: minmax(0, 1fr); }
    .et-hs-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .et-hs-btn,
    .et-hs-panel,
    .et-hs-panel::before,
    .et-hs-panel::after,
    .et-hs-panel__icon,
    .et-hs-pipe__step,
    .et-hs-chip { transition: none; }

    .et-hs-panel,
    .et-hs-pipe__step,
    .et-hs-list li {
        transform: none !important;
        will-change: auto;
    }

    .et-hs-hero__scan,
    .et-hs-kicker__dot,
    .et-hs-kicker__thread,
    .et-hs-hero__tick,
    .et-hs-hero .et-hs-btn--primary::after,
    .et-hs-hero__letter,
    .et-hs-hero__title,
    .et-hs-frame,
    .et-hs-hero__preview::before {
        animation: none !important;
    }

    .et-hs-hero__letter,
    .et-hs-frame {
        transform: none !important;
    }

    .et-hs-hero__title {
        text-shadow: none;
    }

    .et-hs-hero__corr { display: none; }
}

/* ── The hero frame, measured ─────────────────────────────────────────────
 * The animation is the same idea as the field behind it: a bundle is
 * measured, a thread crosses the divider, and its paired phrase resolves when
 * the thread lands. States are driven from home-hero-collapse.js. */
.et-hs-frame__body {
    position: relative;
}

.et-hs-frame__thread {
    position: absolute;
    height: 1px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--et-accent-primary) 30%, transparent),
        color-mix(in srgb, var(--et-accent-primary) 90%, transparent)
    );
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    z-index: 2;
}

.et-hs-frame__thread.is-live {
    opacity: 1;
    transform: scaleX(1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s ease;
}

/* The measured bundle. The left bar is the studio's live-row marker. */
.et-hs-frame__bundle {
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.et-hs-frame__bundle.is-firing {
    color: var(--et-accent-primary);
    background: color-mix(in srgb, var(--et-accent-primary) 12%, #000);
    box-shadow: inset 2px 0 0 var(--et-accent-primary);
}

/* The partner. Collapsing is the brief unresolved state between the thread
   landing and the new wording appearing — blurred and dimmed, never shifted,
   so the paragraph around it does not reflow. */
.et-hs-q {
    color: var(--et-text-primary);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--et-accent-primary) 30%, transparent);
    transition: filter 0.18s ease, opacity 0.18s ease, color 0.35s ease;
}

.et-hs-q.is-collapsing {
    filter: blur(2.5px);
    opacity: 0.35;
}

.et-hs-q.is-resolved {
    color: var(--et-accent-primary);
    box-shadow: inset 0 -1px 0 var(--et-accent-primary);
}

@media (prefers-reduced-motion: reduce) {
    .et-hs-frame__thread { display: none; }
    .et-hs-q,
    .et-hs-frame__bundle { transition: none; }
}


/* ── Demo states ──────────────────────────────────────────────────────────
 * Driven by home-hero-demo.js: write a line, run Fix 5 issues, send a Chapter
 * polish prompt, open Brainstorm with Kestrel. */

.et-hs-frame__prompt.is-typing::after,
.et-hs-frame__msg.is-typing::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.75em;
    margin-left: 1px;
    background: var(--et-accent-primary);
    vertical-align: -0.08em;
}

.et-hs-frame__typed {
    margin: 0 !important;
    min-height: 1.2em;
}

.et-hs-frame__caret {
    display: inline-block;
    width: 1px;
    height: 0.95em;
    margin-left: 1px;
    background: var(--et-accent-primary);
    vertical-align: -0.12em;
    animation: et-hs-caret 1.05s step-end infinite;
}

@keyframes et-hs-caret {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.et-hs-frame__apply.is-pressed {
    background: var(--et-accent-primary-hover);
    transform: translateY(1px);
}

/* Kestrel messages. */
.et-hs-frame__msg {
    padding: 0.32rem 0.42rem;
    font-size: 0.64rem;
    line-height: 1.5;
    background: #000;
    min-height: 1.1rem;
}

.et-hs-frame__msg--you {
    color: var(--et-text-secondary);
    box-shadow: inset 2px 0 0 var(--et-hairline-strong);
}

.et-hs-frame__msg--kes {
    color: var(--et-text-primary);
    box-shadow: inset 2px 0 0 var(--et-accent-primary);
}

/* The measured phrase, as the field behind the hero draws it. */
.et-hs-frame__thread {
    position: absolute;
    height: 1px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--et-accent-primary) 30%, transparent),
        color-mix(in srgb, var(--et-accent-primary) 90%, transparent)
    );
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    z-index: 2;
}

.et-hs-frame__thread.is-live {
    opacity: 1;
    transform: scaleX(1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s ease;
}

.et-hs-q {
    color: var(--et-text-primary);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--et-accent-primary) 30%, transparent);
    transition: filter 0.18s ease, opacity 0.18s ease, color 0.35s ease;
}

.et-hs-q.is-collapsing {
    filter: blur(2.5px);
    opacity: 0.35;
}

.et-hs-q.is-resolved {
    color: var(--et-accent-primary);
    box-shadow: inset 0 -1px 0 var(--et-accent-primary);
}

@media (max-width: 720px) {
    .et-hs-frame__body { grid-template-columns: minmax(0, 1fr); }
    .et-hs-frame__side { box-shadow: inset 0 -1px 0 var(--et-hairline); }
}

@media (prefers-reduced-motion: reduce) {
    .et-hs-frame__caret { animation: none; opacity: 1; }
    .et-hs-frame__thread { display: none; }
    .et-hs-frame,
    .et-hs-hero__preview::before { animation: none !important; }
    .et-hs-frame { transform: none !important; }
    .et-hs-frame__kchat,
    .et-hs-frame__bundle,
    .et-hs-frame__apply,
    .et-hs-frame__fix,
    .et-hs-q { transition: none; }
}