/* ============================================================
   The execution-layer frame.
   ------------------------------------------------------------
   Three bands, held constant while only the last one swaps:

       Claude           centred card, pinned, never rebuilds
       - - seam - -     the membrane: what crosses, what stops
       Askpilot         the tab's own panel, unchanged

   The seam is the working part. A dashed line runs the full
   width, with the layer's nameplate centred ON it, breaking it
   the way a floor label breaks a section drawing: everything
   below this line is Askpilot. Per tab the line carries an
   instruction going down, a result coming up, something rising
   and being turned back at the boundary, or an event arriving
   at its right end — never through Claude.

   Built by js/hx-layer.js, which carries the per-tab copy.
   ============================================================ */

/* The rhythm is the sequence: a long beat after the tabs, a short one
   between the heading and the Claude card. Evenly spaced, the three rows
   read as a list of equals; grouped, they read as chooser → then a titled
   demonstration. */
.hxl { position: relative; margin-top: 16px; }

/* ---------- the tab's headline ---------- */

/* js/hx-layer.js lifts each panel's .pl-head up here, so these repeat what
   css/how-it-works.css does for `.hx-panel .pl-head` — the selector no longer
   matches once the heading leaves its panel. Keep the two in step. */
.hxl-head { margin-bottom: 18px; }
.hxl-head .pl-head { display: none; margin: 0; }
.hxl-head .pl-head.is-on { display: block; }
.hxl-head .pl-head > div:first-child { display: block; }
.hxl-head .hiw-step-eyebrow { display: none; }
.hxl-head .pl-lede { display: none; }
.hxl-head .pl-title {
    margin: 0 auto;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 780; line-height: 1.12; letter-spacing: -0.024em; color: #16121A;
    max-width: none; text-wrap: balance; text-align: center;
}

/* ---------- band 1: Claude, centred and pinned ---------- */

.hxl-claude {
    position: relative; z-index: 2;
    max-width: 760px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 11px;
    padding: 14px 18px;
    background: var(--surface);
    /* the site's outline convention, same as .btn-outline and the tab pills */
    border: 1px solid var(--ink); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04),
                0 14px 34px -22px rgba(22, 18, 26, 0.30);
    transition: opacity 0.5s ease, filter 0.5s ease;
}
.hxl-claude-mark { width: 21px; height: 21px; flex: none; display: block; }
.hxl-claude-name { flex: none; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.hxl-claude-line {
    /* shrink-wrap so the group truly centres; still ellipsises when cramped */
    min-width: 0; flex: 0 1 auto;
    font-size: 0.9375rem; font-weight: 560; line-height: 1.45; color: var(--body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hxl-away { display: none; font-size: 0.875rem; font-weight: 560; font-style: italic; color: var(--muted); }

/* An optional aside at the far end of the bar, for anything that qualifies a
   tab without belonging in Claude's line. Nothing sets `note` today; the slot
   stays because the alternative is stuffing caveats into the quoted line,
   where they would read as something Claude said. */
.hxl-note {
    flex: none; margin-left: auto; padding-left: 18px;
    font-size: 0.75rem; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.hxl-claude.is-dark .hxl-note { display: none; }
@media (max-width: 900px) { .hxl-note { display: none; } }

/* The two nobody-is-here tabs. Dimming the card is the whole argument: the
   layer keeps working with the floor above it dark. */
.hxl-claude.is-dark { opacity: 0.62; filter: grayscale(1); }
.hxl-claude.is-dark .hxl-claude-line { display: none; }
.hxl-claude.is-dark .hxl-away { display: block; }

/* ---------- band 2: the seam ---------- */

/* Tall enough to carry the nameplate on the line with the blocked packet
   nested under it. The line sits at the middle, so half of this is clearance
   for the traffic either side of it. */
.hxl-seam { position: relative; z-index: 1; height: 96px; }

/* The membrane. It carries more meaning than anything else in the section,
   so it is drawn rather than defaulted: a gradient instead of `border:
   dashed` because the browser's dash rhythm is fine and arbitrary — this one
   is set to read as a deliberate line, and it stays dashed because the
   boundary is permeable. Things do cross it. */
/* The lid is drawn by the box itself now (see .hxl-layer), so the seam only
   hosts the traffic, the plate and the chips that sit on the line. */

/* A lane is a zero-width line through the membrane. Its packet is centred on
   it and allowed to overhang, so what the reader sees as the channel and the
   path the packet actually travels are the same axis. */
.hxl-lane {
    position: absolute; top: 0; bottom: 0; width: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
.hxl-lane::before {
    content: ""; position: absolute; top: 8px; bottom: 8px; width: 1px;
    background: linear-gradient(180deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
}
/* far enough out that the traffic clears the nameplate at centre, and the
   widest boundary chip nested under it */
/* down sits further out than up: its longest packet ("check if Outlook is
   connected") is wider than anything travelling upward */
.hxl-lane--down  { left: calc(50% - 305px); }
.hxl-lane--up    { left: calc(50% + 285px); }
.hxl-lane--block { left: 50%; }
/* no rail for the blocked lane: it shares the centre with the nameplate and
   its hairline read as a stray border poking out above and below the plate.
   The packet rising and stopping under the plate carries the meaning alone. */
.hxl-lane--block::before { display: none; }

.hxl-pkt {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem; font-weight: 650; white-space: nowrap;
    opacity: 0;
}
.hxl-pkt svg { width: 13px; height: 13px; flex: none; }
/* the direction marker is a hint, not a headline: the words lead */
.hxl-pkt--down svg, .hxl-pkt--up svg { width: 12px; height: 12px; opacity: 0.5; }

/* Claude speaking downward: neutral, because the words are its own */
.hxl-pkt--down {
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 4px 14px -8px rgba(22, 18, 26, 0.4);
}
/* Askpilot answering upward: the brand's own colour */
.hxl-pkt--up {
    background: var(--pink-wash); color: var(--pink-deep);
    border: 1px solid var(--pink-surface);
}
/* what rises, meets the layer and is turned back — it comes to rest with its
   top edge just under the nameplate, so what refuses it is Askpilot itself
   rather than an abstract hairline */
.hxl-block {
    --stop: 27px;
    background: var(--cream); color: var(--muted);
    border: 1px dashed #D9C9C6;
}
.hxl-block svg { color: var(--muted); }
.hxl-seam .hxl-lane--block { display: none; }
.hxl-seam.has-block .hxl-lane--block { display: flex; }

/* The nameplate, centred ON the line, breaking it. The cream matches the
   page behind the seam, so the dashes stop under the plate without the plate
   reading as a box of its own. */
.hxl-label {
    position: absolute; left: 50%; top: 50%; z-index: 3;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px;
    background: var(--cream);
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.hxl-label img { width: 15px; height: 15px; flex: none; }
.hxl-label b { font-weight: 800; color: var(--pink-deep); }
.hxl-label em { font-style: normal; color: var(--ink); }
.hxl-label b + em::before { content: "\00b7"; margin: 0 7px; color: #CFC7C4; }

/* the layer's state, at the left end of the same line */
.hxl-state {
    /* inboard of the lid's solid shoulder, so the corner stays intact */
    position: absolute; left: 34px; top: 50%; z-index: 3;
    transform: translateY(-50%);
    display: none; align-items: center; gap: 6px;
    padding: 0 13px 0 10px;
    background: var(--cream);
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.hxl-seam.has-state .hxl-state { display: inline-flex; }
.hxl-state::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
/* a live layer should look like one; a paused run blinking would say the
   opposite of what it means */
.hxl-state.is-live { color: var(--ok-fg); }
.hxl-state.is-live::before { animation: hxl-beat 1.9s ease-in-out infinite; }
.hxl-state.is-hold { color: #B45C0B; }
@keyframes hxl-beat {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.78); }
}

/* An event arriving from outside enters at the right end of the membrane —
   never through Claude. js/hx-layer.js sets the tint vars per brand; the
   green is the fallback. */
.hxl-side {
    /* inboard of the right shoulder, same reason as the state chip */
    position: absolute; top: 50%; right: 30px; z-index: 3;
    display: none; align-items: center; gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem; font-weight: 650; white-space: nowrap;
    background: var(--tint-bg, var(--ok-bg));
    color: var(--tint-fg, var(--ok-fg));
    border: 1px solid var(--tint-line, #CBEBD7);
    opacity: 0; transform: translateY(-50%);
}
.hxl-seam.has-side .hxl-side { display: inline-flex; }
.hxl-side svg { width: 13px; height: 13px; flex: none; }
.hxl-side-ico { width: 14px; height: 14px; flex: none; display: block; }
/* plays once, when the panel below actually receives the event */
.hxl-side.is-in { animation: hxl-in 4.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes hxl-in {
    0%   { opacity: 0; transform: translateY(-50%) translateX(44px); }
    9%   { opacity: 1; transform: translateY(-50%) translateX(0); }
    82%  { opacity: 1; transform: translateY(-50%) translateX(0); }
    100% { opacity: 0; transform: translateY(-50%) translateX(-14px); }
}

/* ---------- band 3: the layer, boxed ---------- */

/* The membrane is the box's lid. The layer's surface starts exactly at the
   line — the negative margin pulls its top edge up to the seam's midpoint —
   so the side borders drop from the two ends of the dashed line and close
   underneath. That makes the grouping and the metaphor the same drawing:
   the box IS Askpilot, the line everyone crosses is its lid, and Claude sits
   outside it. No top border, because the membrane is the top border.
   Not positioned, deliberately: the seam is a positioned sibling at z-index
   1, so the traffic and the plate keep painting above this surface. */
/* One pen draws the whole box: a full solid border with rounded corners,
   whose top-middle stretch is then masked into dashes by the ::before —
   opaque page-cream painted over the gaps. That is what lets the lid be
   dashed AND the corners be round: a dashed gradient cannot turn a corner,
   but a solid border can, and dashes can be cut into it afterwards. The
   corners and a short shoulder stay solid: the boundary is structure where
   it meets the sides, permeable only where the traffic crosses. */
.hxl-layer {
    position: relative;            /* for the dash mask; carries no z-index,
                                      so the seam still paints above it */
    margin-top: -48px;             /* seam is 96 tall; the line is at 50% */
    padding: 58px 20px 26px;
    /* The layer's own ground, replacing the blueprint grid the hero owns.
       Concentric rings radiate from the top centre — the point on the lid
       where Claude's instruction lands — with a whisper of the brand magenta
       at the source. A surface that listens and broadcasts, drawn as one:
       every ring is a wavefront leaving the point of contact. Both layers
       are a few percent opacity, so the demos always win. */
    background:
        radial-gradient(46% 240px at 50% 0, rgba(213, 59, 213, 0.05), transparent 72%),
        repeating-radial-gradient(circle at 50% 0,
            transparent 0 42px, rgba(22, 18, 26, 0.03) 42px 43px),
        #FEFCFB;
    border: 1px solid #C6BBB6;
    /* nested-radius rule: the demo windows inside run 16-20px with a ~20px
       gutter, so the box needs to be rounder than they are to read as
       concentric. 28 is as far as it can go before the corner arc reaches
       the state chip's seat on the line (left: 34) */
    border-radius: 28px;
    box-shadow: 0 24px 48px -36px rgba(22, 18, 26, 0.18);
}
.hxl-layer::before {
    content: ""; position: absolute; top: -1px; left: 34px; right: 34px;
    height: 1px;
    background: repeating-linear-gradient(90deg,
        transparent 0 7px, var(--cream) 7px 14px);
}

/* --- the traffic, on a 7s round --- */

.hxl-seam.is-running .hxl-pkt--down { animation: hxl-down 7s cubic-bezier(0.33, 0, 0.2, 1) 0.2s infinite; }
.hxl-seam.is-running .hxl-pkt--up   { animation: hxl-up   7s cubic-bezier(0.33, 0, 0.2, 1) 2.2s infinite; }
.hxl-seam.is-running .hxl-block     { animation: hxl-stop 7s cubic-bezier(0.33, 0, 0.2, 1) 4.2s infinite; }

@keyframes hxl-down {
    0%    { opacity: 0; transform: translateY(-30px); }
    4%    { opacity: 1; }
    18%   { opacity: 1; transform: translateY(24px); }
    23%   { opacity: 0; transform: translateY(30px); }
    100%  { opacity: 0; transform: translateY(30px); }
}
@keyframes hxl-up {
    0%    { opacity: 0; transform: translateY(30px); }
    4%    { opacity: 1; }
    18%   { opacity: 1; transform: translateY(-24px); }
    23%   { opacity: 0; transform: translateY(-30px); }
    100%  { opacity: 0; transform: translateY(-30px); }
}
/* rises, meets the line, is held against it, drops back. --stop carries the
   resting point so desktop (under the nameplate) and phone (under the bare
   line) share one set of keyframes. */
@keyframes hxl-stop {
    0%    { opacity: 0; transform: translateY(calc(var(--stop) + 13px)); }
    5%    { opacity: 1; transform: translateY(calc(var(--stop) + 7px)); }
    11%   { opacity: 1; transform: translateY(var(--stop)); }
    13%   { transform: translateY(calc(var(--stop) + 3px)); }
    15%   { transform: translateY(var(--stop)); }
    24%   { opacity: 1; transform: translateY(calc(var(--stop) + 1px)); }
    30%   { opacity: 0; transform: translateY(calc(var(--stop) + 13px)); }
    100%  { opacity: 0; transform: translateY(calc(var(--stop) + 13px)); }
}

/* ---------- responsive ---------- */

/* The nameplate is a fixed width but the column is not, so below this the
   plate and the traffic either side of it cannot both keep their room. The
   plate steps down rather than the traffic closing in over it. */
@media (max-width: 1100px) {
    .hxl-label { font-size: 0.625rem; letter-spacing: 0.08em; padding: 0 10px; gap: 7px; }
    .hxl-label img { width: 13px; height: 13px; }
    .hxl-lane--down { left: calc(50% - 250px); }
    .hxl-lane--up   { left: calc(50% + 250px); }
}

@media (max-width: 767px) {
    .hxl-head { margin-bottom: 22px; }
    .hxl-head .pl-title { font-size: clamp(1.25rem, 5vw, 1.625rem); }

    .hxl-claude { margin: 0 16px; padding: 11px 14px; gap: 9px; border-radius: 12px; }
    .hxl-claude-name { display: none; }
    .hxl-claude-line, .hxl-away { font-size: 0.8125rem; }
    /* wraps rather than truncates: at phone widths nowrap was clipping the
       closing quote off what Claude said */
    .hxl-claude-line { white-space: normal; overflow: visible; text-overflow: clip; }

    /* On a phone every lane runs through the centre, so the nameplate cannot
       stay on the line without the traffic disappearing behind it. It drops
       to the foot of the seam instead and the line stays clear. */
    .hxl-seam { height: 128px; }
    .hxl-pkt, .hxl-side { font-size: 0.6875rem; padding: 4px 10px; }
    .hxl-pkt > span { overflow: hidden; text-overflow: ellipsis; }
    /* no room for three lanes abreast: they collapse into one centre channel
       and the packets, already two seconds apart, take turns */
    .hxl-lane { left: 50%; }
    .hxl-lane--up::before, .hxl-lane--block::before { display: none; }
    .hxl-block { --stop: 17px; }   /* nothing on the line to stop against */
    .hxl-pkt { max-width: calc(100vw - 72px); }
    .hxl-label {
        top: auto; bottom: 0; transform: translate(-50%, 0);
        padding: 0; background: none; letter-spacing: 0.1em;
    }
    .hxl-layer {
        /* Half the seam height, ALWAYS: the state/side chips and the traffic
           all centre on the seam's midpoint, so the line must pass through
           it or they float off the line. Seam 128 → line 64 below the bar,
           plate at the seam foot 64 below the line, demo 30 below the plate. */
        margin-top: -64px;
        padding: 94px 10px 14px;
        border-radius: 18px;
    }
    .hxl-layer::before { left: 26px; right: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .hxl-seam.is-running .hxl-pkt { animation: none; opacity: 1; transform: none; }
    .hxl-seam.is-running .hxl-block { transform: translateY(var(--stop)); }
    /* the panel drivers do not play under reduced motion, so nothing would
       ever fire the inbound pill — it rests visible instead */
    .hxl-seam.has-side .hxl-side {
        animation: none; opacity: 1; transform: translateY(-50%);
    }
    .hxl-state.is-live::before { animation: none; }
    .hxl-claude { transition: none; }
}