/* ============================================================================
 * DRAFT SITE v3 (port 8125): draft2's design system, repositioned from a
 * research lab to an enterprise workflow automation product. Forked from
 * static/draft2/draft2.css; the tokens, type, hero geometry and every
 * accessibility fix carry over untouched. Sibling of static/draft/ (8123) and
 * static/draft2/ (8124); none of the three is linked from production.
 *
 * What v3 changes in this file:
 *   - --ic-accent-t / --ic-accent-d: the accent is 3.48:1 on the paper, so
 *     every mono label painted in it was failing AA. v2 fixed the INK labels
 *     (0.42 -> 0.65) and never re-checked the accent ones. Two text-only
 *     variants now carry the small type; fills and strokes keep --ic-accent.
 *   - .cards placement moved off :nth-of-type onto explicit .card-r2a/.card-r2b,
 *     so adding or reordering a card no longer scrambles the grid, and
 *     .card-wide is .cards-scoped like its own mobile reset already was.
 *   - .join gained the scroll-margin-top every other section had, so the #join
 *     anchor stops landing under the sticky nav.
 *   - .hero-mid h1 measure 20ch -> 24ch for the longer product headline.
 *   - New components, all in the existing idiom: .rows (one hairline table
 *     serving both the workflow list and the comparison), .sec-fig, .trace,
 *     .surface, .controls, .note-line.
 *
 * ORIGINAL v2 HEADER FOLLOWS.
 * ---------------------------------------------------------------------------
 * DRAFT SITE v2 (port 8124): the centred-manifesto hero, with the fix board
 * applied.
 *
 * Hero follows "Option B - Centred manifesto" from the Icarus Hero Directions
 * canvas: sun, headline, form and bird share one centre axis, and the bordered
 * hero card is gone, which is what ended the overlap problem for good.
 *
 * Fix-board items that live in this file are marked FIX 01..14 in place.
 * Contrast: every mono label was at opacity 0.42 (2.5:1 on #F5EDE0) or 0.50
 * (3.1:1), both under the 4.5:1 AA floor for 12px text. They are at 0.65
 * (4.75:1) here. Body copy at 0.78 (7.2:1) was already fine and is unchanged.
 *
 * ORIGINAL HEADER FOLLOWS.
 * ---------------------------------------------------------------------------
 * DRAFT SITE: served at draft.icarus-ai.co (and /draft locally).
 * Self-contained: the production homepage (static/index.html) does not link
 * this file, and this page does not use static/css/style.css.
 *
 * Departures from the production homepage, all deliberate:
 *   - fixed 16px root instead of a viewport-derived one, so rem is stable and
 *     the four-breakpoint !important cascade is unnecessary
 *   - no scroll-snap; the page is a normal long-form scroll
 *   - one accent token; no second hard-coded orange
 *   - component styles live here as classes, not as style="" attributes
 * ==========================================================================*/

/* --- self-hosted faces, lifted verbatim from the production page --- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibmplexsans-400-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibmplexsans-400-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibmplexsans-400-greek.woff2?v=1) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibmplexsans-400-cyrillic.woff2?v=1) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibmplexsans-400-cyrillic-ext.woff2?v=1) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibmplexsans-400-vietnamese.woff2?v=1) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/jetbrainsmono-400-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/jetbrainsmono-400-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/jetbrainsmono-400-greek.woff2?v=1) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/jetbrainsmono-400-cyrillic.woff2?v=1) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/jetbrainsmono-400-cyrillic-ext.woff2?v=1) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/jetbrainsmono-400-vietnamese.woff2?v=1) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrainsmono-500-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrainsmono-500-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrainsmono-500-greek.woff2?v=1) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrainsmono-500-cyrillic.woff2?v=1) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrainsmono-500-cyrillic-ext.woff2?v=1) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/jetbrainsmono-500-vietnamese.woff2?v=1) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/newsreader-400i-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/newsreader-400i-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/newsreader-400i-vietnamese.woff2?v=1) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/newsreader-400-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/newsreader-400-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/newsreader-400-vietnamese.woff2?v=1) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}

/* ============================ TOKENS ============================ */
:root {
  --ic-paper:  #F5EDE0;
  --ic-ink:    #2A1F17;
  --ic-accent: #D15A1B;
  /* Derived once, here. Production retypes rgba(194,65,12,…) (= #C2410C) per
     element, which is why two brand oranges currently ship side by side. */
  --ic-rule:   rgba(42, 31, 23, 0.16);
  --ic-tint:   rgba(209, 90, 27, 0.055);
  --ic-tint-2: rgba(209, 90, 27, 0.10);
  --ic-avatar: rgba(42, 31, 23, 0.07);
  /* From the console's theme.css, which already ships this page's tokens. */
  --paper-raised: #FBF6EC;
  --paper-sunken: #EDE3D4;
  /* The one blue on the page: the hero's link out to the demo. */
  --ic-link:   #1F5C8B;
  /* --ic-accent is 3.48:1 on the paper -- fine as a fill, a rule or a stroke,
     and fine for display type, but under the 4.5:1 AA floor for the 11-13px
     mono labels this page is built out of. draft2 raised every INK label to
     0.65 for exactly this reason and never re-checked the accent ones, so the
     tags, eyebrows, arrows and roles all shipped failing. Two text-only
     variants, one per ground:
       --ic-accent-t  #B04510  4.88:1 on #F5EDE0 (paper sections)
       --ic-accent-d  #E0742F  5.13:1 on #2A1F17 (join + footer)
     Fills, borders, SVG strokes and headline type keep --ic-accent. */
  --ic-accent-t: #B04510;
  --ic-accent-d: #E0742F;

  --serif: 'Newsreader', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* cursor.com: 1300px container behind a 20px hard gutter. The width
     contrast on that page does NOT come from visuals bleeding -- nothing
     bleeds -- it comes from the copy being narrow (8 of 24 columns) while the
     visual runs 16. So the container grows and the copy gets a measure. */
  --gutter: 1.25rem;
  --measure: 1300px;
  --g: 0.625rem;    /* 10px  horizontal unit -- the 24-col gutter */
  --v: 1.4rem;      /* 22.4px vertical unit -- every gap is a multiple */
  --demo-pad: 2rem; /* 32px  stage inset, per cursor */
  --nav-h: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Fixed root. Production derives this from 100vw, which makes every rem
     viewport-dependent and forced a 75/64/48/30rem override cascade. */
  font-size: 16px;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ic-paper);
  color: var(--ic-ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--ic-accent); color: var(--ic-paper); }

:focus-visible {
  outline: 2px solid var(--ic-accent);
  outline-offset: 3px;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }

.mono { font-family: var(--mono); }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.band { border-bottom: 1px solid var(--ic-rule); }
/* The nav is in normal flow, so the hero starts 69px down and #home landed
   there -- scrolling the fold up by exactly that much and showing a sliver of
   the section below. A margin larger than the offset clamps the landing to the
   top of the document, which is what returning home should mean. */
.hero { scroll-margin-top: calc(var(--nav-h) + 2rem); }
.section { padding: var(--v) 0 calc(var(--v) * 3); scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.section + .section { padding-top: calc(var(--v) * 3); }

.tag {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.125rem;
  text-transform: uppercase; color: var(--ic-accent-t); margin-bottom: 0.875rem;
}
/* FIX 12: was clamp(1.75rem, 3.4vw, 2.5rem) = 40px against a 42px h1, so
   every section head competed with the headline. 32px resolves it. */
.sec-h { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.18; }
.lede { font-size: 1.0625rem; line-height: 1.6; opacity: 0.78; margin: 0.875rem 0 0; max-width: 62ch; text-wrap: pretty; }
.fig {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.075rem;
  opacity: 0.65; text-align: right; line-height: 1.7; flex-shrink: 0;
}
.sec-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 4rem; margin-bottom: 3rem; }

/* ============================ NAV ============================ */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(245, 237, 224, 0.92);
  border-bottom: 1px solid var(--ic-rule);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 0.625rem; }
.brand-name { font-family: var(--mono); font-size: 0.9375rem; letter-spacing: 0.1875rem; font-weight: 500; }
.brand-sub { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.075rem; opacity: 0.45; }
.nav-links { display: flex; align-items: center; gap: 1.875rem; }
.nav-links a {
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.075rem;
  text-transform: uppercase; opacity: 0.72; transition: opacity 0.15s, color 0.15s;
}
.nav-links a:hover { opacity: 1; color: var(--ic-accent-t); }
.nav-cta {
  border: 1px solid var(--ic-ink); padding: 0.5625rem 1.125rem; opacity: 1 !important;
  transition: background 0.15s, color 0.15s;
}
.nav-cta:hover { background: var(--ic-ink); color: var(--ic-paper) !important; }
.nav-burger { display: none; width: 2.75rem; height: 2.75rem; flex-direction: column; justify-content: center; align-items: flex-end; gap: 0.3125rem; background: none; border: 0; cursor: pointer; padding: 0; }
.nav-burger span { width: 1.25rem; height: 1px; background: var(--ic-ink); display: block; }
.nav-burger span:last-child { width: 0.8125rem; }

/* ============================ HERO ============================
   Centred: one axis carries the sun, the headline, the form and the bird.
   Nothing is absolutely positioned over anything it can collide with, which
   is the whole reason this direction exists.
   ============================================================== */
.hero {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  /* vh first, svh second: a browser without svh keeps the vh line, a browser
     with it overwrites. Without the fallback the declaration is dropped whole
     and the hero collapses to its copy -- which is why it filled the screen on
     one phone and stopped short on another. */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
}
/* FIX 10 (bird half): the bird used to be a full-fold layer, which is how it
   ended up crossing the FIG. 01 caption at 1440 wide. Here it gets its own
   band in flow, low on the centre axis and directly under the form, so the
   ascent toward the sun reads and nothing lands on top of anything.

   dots.js sizes the canvas to window.innerWidth x window.innerHeight and never
   consults its container, so the canvas stays viewport-sized and this strip is
   only the crop. The bird occupies the middle of that buffer, centred at ~57%
   of its height, hence the 7vh lift: it puts the band in the middle of the
   strip at any window height. */
/* No z-index here on purpose: position alone keeps #sky out of the stacking
   contexts, so the canvas inside it can blend with the copy above rather than
   only with this box. */
/* overflow is visible on purpose. The bird flaps, so its wings leave the band
   they occupy at rest, and any fixed crop cuts them on the high frames. Since
   the canvas blends with `darken` below and its paper is the page's own, there
   is nothing to crop: the empty parts of the buffer composite away and only
   the dots paint. The height here just reserves the band's room in the column
   between the copy and the line under it. */
#sky { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: clamp(9rem, 26vh, 17rem); overflow: visible; flex-shrink: 0; pointer-events: none; }
/* dots.js runs the context with alpha: false, so the canvas arrives as an
   opaque sheet of paper with dark dots on it: behind the strip, the sun and
   anything else simply stopped at the rectangle's edges, and the band had to
   be cropped to keep the seam off the copy. `darken` takes the per-channel
   minimum instead, and the canvas paper is the same #F5EDE0 as the page, so
   everything except the dots composites away. The strip has no edges any more,
   which is what lets it be tall enough to hold the whole wingspan and to run
   up under the copy above without hiding a word of it. */
#dotCanvas {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% - 7vh)); display: block;
  mix-blend-mode: darken;
}
.hero-in { position: relative; z-index: 4; display: flex; flex-direction: column; flex: 1; width: 100%; }

/* FIX 10: the sun used to sit at top: clamp(-26rem, -32vw, -17rem), which put
   its edge under the nav's bottom rule on any viewport around 900px tall, so
   it read as clipped rather than rising. Here it is a halo on the centre axis
   that starts below the rule and sits behind the headline, and the bird
   crosses low on the same axis, ascending toward it. */
/* The copy block is the sun's containing block, not the hero column, so the
   halo stays centred on the headline whatever the column does with its spare
   height: 5.5rem below the copy's top edge is the headline's own centre line,
   and translate(-50%, -50%) keeps that true at every size the sun takes. */
.hero-copy { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.sun { position: absolute; top: 5.5rem; left: 50%; transform: translate(-50%, -50%); width: clamp(24rem, 43vw, 38rem); aspect-ratio: 1; pointer-events: none; z-index: 1; }

.hero-mid {
  position: relative; z-index: 4; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3.5rem 0 2.5rem;
}
/* draft2 paints this --ic-accent. v3's own header documents raising small mono
   labels to --ic-accent-t (4.88:1, against 3.48:1) and every other label on the
   page already uses it, so the eyebrow does too: same font, same size, same
   tracking, same orange one step darker. */
.hero-eyebrow { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.11rem; color: var(--ic-accent-t); margin-bottom: 1.625rem; }

/* ==================== HERO TICKER ====================
   No box: the hero is a centred column of loose type and a bordered chip read
   as a control rather than a line of copy. The eyebrow and the score share one
   slow scrolling line instead, split by a rule. Two identical copies sit in a
   flex row and the track travels exactly -50%, which lands the second copy
   where the first began, so the loop has no seam. Hovering stops it, since the
   line is a link and a moving target is a bad one. */
/* The window is wider than one copy of the line on purpose. The pattern
   repeats every segment, so a window at least that wide always contains one
   complete copy of every word: the score is on screen at all times and the
   motion is decoration, not a thing you have to wait through. Narrower and a
   visitor could sit looking at "neurosymbolic agent automation" for fifteen
   seconds before the number came round. */
.hero-ticker {
  width: min(100%, 40rem); overflow: hidden; margin-bottom: 1.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hero-ticker-track {
  display: flex; width: max-content; color: inherit;
  animation: hero-tick 24s linear infinite;
}
.hero-ticker:hover .hero-ticker-track,
.hero-ticker-track:focus-visible { animation-play-state: paused; }
@keyframes hero-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero-tick {
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.11rem;
  text-transform: uppercase; color: var(--ic-accent-t);
}
/* The rule is the break, not a character to read: it gets the spacing and none
   of the weight. */
.hero-tick i { font-style: normal; opacity: 0.34; margin: 0 1.15rem; }
.hero-tick b { font-weight: 500; color: var(--ic-accent); margin-left: 0.6rem; }
@media (max-width: 40rem) {
  .hero-ticker { width: min(100%, 21rem); margin-bottom: 1rem; }
  .hero-tick { font-size: 0.625rem; letter-spacing: 0.09rem; }
  .hero-ticker-track { animation-duration: 14s; }
  .hero-tick i { margin: 0 0.85rem; }
}
/* v3 shrank this to clamp(1.75rem, 3.7vw, 3.5rem) over 30ch to fit an 89-char
   declarative headline. The headline is the 32-char phrase again, and at that
   scale it read as a subhead, so the display size comes back with it. */
.hero-mid h1 { font-size: clamp(2.125rem, 4.9vw, 4.25rem); line-height: 1.04; letter-spacing: -0.018em; margin: 0 0 1.625rem; max-width: 20ch; }
.hero-mid h1 em { font-style: italic; color: var(--ic-accent); }
/* FIX 08: one sentence saying what the thing is. Dropped when v3 moved the
   copy onto .hero-copy-c; the three height-keyed tiers below never stopped
   sizing it, so it comes back with them. */
.hero-lede { font-size: 1.125rem; line-height: 1.6; opacity: 0.78; margin: 0; max-width: 40rem; text-wrap: pretty; }
.hero-form { width: min(28.75rem, 100%); margin-top: 2.5rem; }
/* Opaque, so the halo does not wash through the field. */
.hero-form .wl { background: var(--ic-paper); }
/* Same size as the sentence it ends. Only the linked word is coloured, and it
   is the one thing on the page that is not the brand orange: 6.1:1 on the
   paper, so it clears AA where the accent (3.5:1) would not. */
.hero-see { white-space: nowrap; }
.hero-see a { color: var(--ic-link); border-bottom: 1px solid rgba(31, 92, 139, 0.45); transition: border-color 0.15s; }
.hero-see a em { font-family: var(--serif); font-style: italic; font-size: 1.08em; }
.hero-see a:hover { border-bottom-color: var(--ic-link); }
.hero-alt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.0375rem; opacity: 0.65; margin-top: 0.875rem; }
.hero-alt a { color: var(--ic-accent-t); border-bottom: 1px solid rgba(209, 90, 27, 0.5); }
.hero-sep { opacity: 0.4; margin: 0 0.625rem; border: 0; }
/* The demo route out of the fold. Blue, not accent: it is the one link on the
   page that is not the brand orange, and at 6.1:1 it clears AA where the
   accent would not. */
.hero-alt a.hero-see { color: var(--ic-link); border-bottom-color: rgba(31, 92, 139, 0.45); }

/* FIX 06: the proof was four screens down. One rule-flanked line, in the fold. */
.proof {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.625rem 1.125rem; padding: 1.75rem var(--gutter) 2.25rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.07rem;
  opacity: 0.72; text-align: center;
}
.proof b { font-weight: 400; color: var(--ic-accent-t); }
.proof-rule { width: 4rem; height: 1px; background: var(--ic-ink); opacity: 0.38; flex-shrink: 0; }

/* The team line, in the proof line's clothes: same rules, same mono, one step
   quieter so the awards above it still lead. */
.proof-cred { padding-top: 1.25rem; padding-bottom: 2.25rem; gap: 0.625rem 0.875rem; opacity: 0.7; }
.proof-cred svg { flex-shrink: 0; }

/* ============================ FORM ============================ */
.wl { display: flex; border: 1px solid var(--ic-ink); }
.wl input {
  flex: 1; min-width: 0; padding: 0.875rem 1rem; border: 0; background: transparent;
  font-family: var(--mono); font-size: 0.9375rem; line-height: 1.25rem;
  color: var(--ic-ink); outline: none;
}
.wl input::placeholder { color: var(--ic-ink); opacity: 0.38; }
.wl button {
  padding: 0.875rem 1.375rem; background: var(--ic-ink); color: var(--ic-paper);
  border: 0; border-left: 1px solid var(--ic-ink); font-family: var(--mono);
  font-size: 0.8125rem; letter-spacing: 0.09rem; text-transform: uppercase;
  line-height: 1.25rem; cursor: pointer; display: flex; align-items: center;
  gap: 0.5rem; white-space: nowrap; transition: background 0.15s;
}
.wl button:hover { background: var(--ic-accent); }
.wl button[disabled] { opacity: 0.6; cursor: default; }
.wl-done {
  display: none; padding: 0.875rem 1rem; border: 1px solid var(--ic-accent);
  color: var(--ic-accent-t); font-family: var(--mono); font-size: 0.9375rem;
  letter-spacing: 0.0625rem; align-items: center; gap: 0.625rem;
}
.wl-done.on { display: flex; }
.wl-err { margin-top: 0.625rem; font-family: var(--mono); font-size: 0.75rem; color: var(--ic-accent-t); display: none; }
.wl-err.on { display: block; }

/* ============================ APPROACH ============================ */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ic-ink); }
.stage { padding: 2rem 2.25rem 2.25rem; border-left: 1px solid var(--ic-rule); }
.stage:first-child { border-left: 0; }
.stage-h { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.5rem; }
.stage-n { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.09rem; color: var(--ic-accent-t); }
.stage-l { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.125rem; text-transform: uppercase; }
.stage svg { width: 100%; display: block; margin-bottom: 1.625rem; }
.stage p { font-size: 0.9375rem; line-height: 1.6; opacity: 0.75; margin: 0; text-wrap: pretty; }

/* ============================ CARDS ============================ */
/* Four equal cards in one row. The old grid ranked them by size -- a
   quarter-width spine, a three-quarter banner, two halves under it -- which
   meant three different card shapes and a layout that had to be re-thought
   every time a paper was added. Four of the same card, in publication order,
   and the band behind them does the separating instead of the sizes.

   The band is sunken and the cards are paper, so they lift off it; on the
   plain paper of the old section they needed a full ink border to read as
   objects at all, and four ink rectangles in a row was heavy. */
.research { background: var(--paper-sunken); }
/* The four cards share ROWS, not just a row. "Daedalus plays real-time Tetris"
   is one line where the other three headings take two, so with each card
   packing its own column the copy under it started ~21px higher than its
   neighbours and the row read as ragged. The grid owns the four rows -- badge,
   heading, copy, link -- and each card is a subgrid spanning them, so every
   heading block is as tall as the tallest heading and the copy starts on one
   line across all four. */
.cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto; gap: 0.875rem; align-items: stretch;
}
.card {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0.5rem;
  border: 1px solid var(--ic-rule); border-radius: 4px; background: var(--ic-paper);
  padding: 1.125rem 1.125rem 1.25rem; transition: background 0.18s, border-color 0.18s;
}
/* Without subgrid each card packs its own column again; a two-line floor on
   the heading gets the same alignment for the headings this page has. */
@supports not (grid-template-rows: subgrid) {
  .cards { grid-template-rows: none; }
  .card { display: flex; flex-direction: column; }
  .card h3 { min-height: 2.5em; }
}
.card:hover, .card:focus-visible { background: var(--paper-raised); border-color: rgba(42, 31, 23, 0.3); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.card h3 { font-size: 1.0625rem; line-height: 1.25; margin: 0; }
.card p { font-size: 0.8125rem; line-height: 1.5; opacity: 0.7; margin: 0; }
/* The copy row is the 1fr, so the link already sits on the bottom edge of
   every card; align-self stops it stretching to the column width. */
.card .arrow { align-self: flex-start; padding-top: 0.375rem; }
/* Inline links inside card copy. Only the CoRNStack card needs these -- it is
   a <div> rather than an <a> precisely so it can carry them -- but the rule is
   written for any card that grows a second destination. */
.card p a { color: var(--ic-accent-t); border-bottom: 1px solid rgba(209, 90, 27, 0.45); }
.card p a:hover { border-bottom-color: var(--ic-accent-t); }
/* .arrow is a real anchor on that card and a plain span on the other three;
   neither should pick up an underline from the rule above. */
.card a.arrow { border-bottom: 1px solid var(--ic-accent); }

.badge { font-family: var(--mono); font-size: 0.59375rem; letter-spacing: 0.07rem; border: 1px solid var(--ic-accent); color: var(--ic-accent-t); padding: 0.1875rem 0.375rem; }
.meta { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.0375rem; opacity: 0.6; }
.arrow { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.0625rem; color: var(--ic-accent-t); border-bottom: 1px solid var(--ic-accent); padding-bottom: 0.125rem; display: inline-block; }

/* ============================ TEAM ============================ */
/* FIX 11: Approach, Demo, Research, Team and Join all ran tag -> serif h2 ->
   lede -> 1200px bordered box, in that order. Team breathes instead: no rules
   top or bottom, no column dividers, just a gap. It is the change of pace. */
/* The 47rem measure belongs to the paragraph, not to the heading above it.
   Held on the wrapper, it broke "Built by top researchers in formal methods
   and machine learning." across two lines at every desktop width while the
   heading itself had 1260px of room. */
.sec-intro { margin-bottom: 2.75rem; }
.sec-intro .lede { max-width: 47rem; }

/* Four across: the advisor is the fourth column rather than a block of his
   own under the founders. Same card, his role says what he is. */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2.25rem; margin-bottom: 0; }
.person { padding: 0; }
.person img, .person .av, .advisor img { width: 3.875rem; height: 3.875rem; border-radius: 50%; object-fit: cover; background: var(--ic-avatar); border: 1px solid var(--ic-rule); margin-bottom: 1.125rem; }
.person-name { font-family: var(--serif); font-size: 1.5625rem; line-height: 1.2; margin-bottom: 0.375rem; }
.person-role { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1rem; color: var(--ic-accent-t); text-transform: uppercase; margin-bottom: 0.875rem; }
.person-bio { font-size: 0.9375rem; line-height: 1.6; opacity: 0.72; margin-bottom: 1rem; }
.person-links { display: flex; gap: 1.125rem; flex-wrap: wrap; }
.person-links a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.03rem; color: var(--ic-accent-t); opacity: 0.85; padding: 0.375rem 0; transition: opacity 0.15s; }
.person-links a:hover { opacity: 1; }

/* ============================ JOIN + FOOTER ============================ */
.join { background: var(--ic-ink); color: var(--ic-paper); position: relative; overflow: hidden;
        scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.join .wrap { position: relative; }
.join-glyph { position: absolute; top: -11rem; right: -4rem; width: 28rem; height: 28rem; pointer-events: none; opacity: 0.9; }
.join-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2.5rem 4rem; padding: 4.75rem 0 5rem; }
.join-copy { max-width: 34ch; }
.join-copy p { font-size: 1.0625rem; line-height: 1.6; opacity: 0.66; margin: 0.875rem 0 0; }
.join-form { width: min(27.5rem, 100%); }
.join .wl { border-color: var(--ic-paper); }
.join .wl input { color: var(--ic-paper); }
.join .wl input::placeholder { color: var(--ic-paper); opacity: 0.4; }
.join .wl button { background: var(--ic-accent); border-left-color: var(--ic-accent); }
.join .wl button:hover { background: var(--ic-paper); color: var(--ic-ink); }
.join-alt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.03rem; opacity: 0.62; margin-top: 0.875rem; }
/* Accent small text sits on ink here, not paper: 3.97:1 for --ic-accent
   against #2A1F17, so these take the lighter variant instead. */
.join .tag { color: var(--ic-accent-d); }
.join .wl-done { color: var(--ic-accent-d); border-color: var(--ic-accent-d); }
.join .wl-err { color: var(--ic-accent-d); }
.join-alt a { border-bottom: 1px solid rgba(245, 237, 224, 0.4); }

.foot { background: var(--ic-ink); color: var(--ic-paper); border-top: 1px solid rgba(245, 237, 224, 0.14); }
/* var(--gutter), not 0: this shorthand overrides .wrap's own padding, and
   with a 0 there the footer ignored the page gutter at every width. */
.foot-in { padding: 2.875rem var(--gutter) 1.25rem; }
.foot-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem 4.5rem; margin-bottom: 2.5rem; }
.foot-brand { max-width: 19rem; }
.foot-brand p { font-size: 0.875rem; line-height: 1.6; opacity: 0.55; margin: 0.875rem 0 0; }
.foot-col h4 { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.11rem; opacity: 0.6; margin: 0 0 1rem; font-weight: 400; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.foot-col a, .foot-col span { font-family: var(--mono); font-size: 0.8125rem; opacity: 0.75; display: block; padding: 0.375rem 0; transition: opacity 0.15s, color 0.15s; }
.foot-col a:hover { opacity: 1; color: var(--ic-accent-d); }
.foot-base { border-top: 1px solid rgba(245, 237, 224, 0.14); padding-top: 1.125rem; display: flex; flex-wrap: wrap; gap: 0.625rem 1.5rem; justify-content: space-between; }
.foot-base div { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.0625rem; opacity: 0.55; }

/* ============================ SECOND PAGE ============================
   research.html has no hero, so its first section sits directly under the
   sticky nav and needs the clearance the hero normally provides.
   ==================================================================== */
.page-head { padding-top: 3.5rem; padding-bottom: 2.25rem; }
/* .section's own 5.5rem on top of the head's padding left ~130px of dead air
   between the page title and its content. */
.page-head + .band.section { padding-top: 3rem; }
.page-head .sec-h { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
.nav-links a.here { opacity: 1; color: var(--ic-accent-t); }

/* Fixed, so the page under review has exactly the geometry it will ship with. */
.draft-flag {
  /* Top right: at the foot it covered the hero's FIG. 01 caption, and the
     feedback widget owns the bottom-left corner. */
  position: fixed; right: 1rem; top: calc(var(--nav-h) + 1rem); z-index: 60;
  background: var(--ic-accent); color: var(--ic-paper);
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.11rem;
  text-transform: uppercase; padding: 0.4375rem 0.75rem;
  pointer-events: none; opacity: 0.9;
}


/* ============================ NOTE LINE ============================
   Ported from static/draft/draft.css:112-116, which sets it at opacity 0.42
   -- 2.5:1 on the paper, the exact sub-AA contrast this file's header
   documents having fixed for every other mono label. 0.65 here.
   ================================================================== */
.note-line {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.0625rem;
  opacity: 0.65; margin-top: 1.5rem; display: flex; align-items: baseline; gap: 0.625rem;
}
.note-line::before { content: ""; width: 1.75rem; height: 1px; background: var(--ic-ink); opacity: 0.35; flex-shrink: 0; transform: translateY(-0.3em); }

/* ============================ INTRO + WORKBENCH =============================
   The opening is one centred editorial plate. The halo and animated dot-bird
   stay behind/in flow with the copy; the product begins as the next distinct
   object, so the statement and Workbench never compete for the same pixels. */
/* The console is its own section now, under the fold rather than sharing it,
   so it needs the top clearance .hero-intro + .stage-hero used to give it. */

/* Benchmark proof: the Icarus result set against the sourced published
   leaderboard, with provenance kept in the visual rather than hidden in copy. */
.osworld-proof { display: flex; flex-direction: column; }
/* The chart IS the scene body now: the dark score panel and the axis are gone,
   so it sits on the scene's own ground rather than a raised card inside it. */
.osworld-chart { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 0.5rem 1.6rem 1.6rem; }
.osworld-row > div b, .osworld-row > div small { display: block; }
.osworld-row > div b { font-size: 0.78rem; font-weight: 500; }
.osworld-row > div small { margin-top: 0.12rem; font: 0.5rem/1.2 var(--mono); opacity: 0.48; }
.osworld-row > span { height: 1rem; overflow: hidden; border-radius: 2px; background: var(--paper-sunken); }
.osworld-row > span i { display: block; width: calc(var(--score) * 1%); height: 100%; background: #BEB5A6; transform: scaleX(0); transform-origin: left; }
.osworld-row > strong { text-align: right; font: 400 1rem/1 var(--serif); }
/* Four near-identical bars between 85 and 90 made a five-point lead read as a
   rounding difference. Icarus takes a heavier row over an accent rule and the
   other three sit quiet under it, so the ranking carries the comparison. */
.osworld-row {
  display: grid; grid-template-columns: minmax(9.5rem, 0.8fr) minmax(10rem, 1.55fr) 3.9rem;
  gap: 1rem; align-items: center;
  padding: 0.875rem 0; border-top: 1px solid rgba(42, 31, 23, 0.09);
}
.osworld-row.is-icarus { padding: 0.25rem 0 1.125rem; border-top: 0; border-bottom: 1px solid var(--ic-accent); }
.osworld-row.is-icarus > div b { color: var(--ic-accent-t); font: 400 1.4rem/1 var(--serif); }
.osworld-row.is-icarus > div small { color: var(--ic-accent-t); opacity: 0.72; }
.osworld-row.is-icarus > strong { color: var(--ic-accent-t); font-size: 1.65rem; }
.osworld-row.is-icarus > span { height: 2.1rem; background: rgba(209,90,27,0.12); }
.osworld-row.is-icarus > span i { background: linear-gradient(90deg,#C94F0B,var(--ic-accent)); }
.osworld-proof.is-visible .osworld-row > span i { animation: osworld-fill 0.9s cubic-bezier(.2,.75,.25,1) forwards; }
.osworld-proof.is-visible .osworld-row:nth-child(2) > span i { animation-delay: 0.12s; }
.osworld-proof.is-visible .osworld-row:nth-child(3) > span i { animation-delay: 0.24s; }
.osworld-proof.is-visible .osworld-row:nth-child(4) > span i { animation-delay: 0.36s; }
@keyframes osworld-fill { to { transform: scaleX(1); } }
/* the cards answer to the pointer, which a static page never does */
/* No :hover background here. These were three separate cards in a column when
   that was written, where a lift on hover read as "this is one object". As
   carousel slides they are the full width of the section, so crossing the
   region with the pointer repainted the entire block and looked like a bug. */

/* Three feature cards, unbroken, with the same vertical rhythm. */
.feat .card-block + .card-block { margin-top: calc(var(--v) * 4); }

/* ============================ THE CONSOLE MOCKUP ============================
   Live DOM, not a screenshot -- which is what cursor.com does: its homepage
   ships zero product images and rebuilds its IDE in markup, so every pane is
   real, selectable, themeable and sharp at any resolution.

   Built from the console's own tokens (its theme.css says it copied them from
   this stylesheet), so the two cannot drift.
   ========================================================================== */
.mock {
  background: var(--paper-raised); border-radius: 10px; overflow: hidden;
  font-family: var(--sans); font-size: 0.8125rem; line-height: 1.45; color: var(--ic-ink);
  box-shadow: 0 28px 70px rgba(42, 31, 23, 0.14),
              0 14px 32px rgba(42, 31, 23, 0.10),
              0 0 0 1px rgba(42, 31, 23, 0.10);
  display: flex; flex-direction: column; height: 100%;
}
.mock-bar { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; }
.mock-mark { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid rgba(42,31,23,0.5); position: relative; flex-shrink: 0; }
.mock-mark::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--ic-accent); }
.mock-word { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.19rem; font-weight: 500; }
.mock-pill {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.5rem;
  border: 1px solid var(--ic-rule); border-radius: 999px;
  font-family: var(--mono); font-size: 0.625rem; opacity: 0.8;
}
.mock-dot { width: 6px; height: 6px; border-radius: 50%; background: #41703F; }
.mock-seg { margin-left: auto; display: flex; border: 1px solid var(--ic-rule); border-radius: 5px; overflow: hidden; }
.mock-seg button {
  border: 0; background: none; cursor: pointer; padding: 0.25rem 0.5rem;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06rem; color: var(--ic-ink); opacity: 0.6;
}
.mock-seg button[aria-pressed="true"] { background: var(--ic-accent); color: var(--ic-paper); opacity: 1; }

.mock-nav { display: flex; gap: 1.125rem; padding: 0 0.875rem; border-bottom: 1px solid var(--ic-rule); }
.mock-nav button {
  border: 0; background: none; cursor: pointer; padding: 0.5rem 0 0.5625rem;
  font-size: 0.8125rem; color: var(--ic-ink); opacity: 0.6;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mock-nav button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--ic-accent); }

.mock-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(13rem, 26%, 19rem); flex: 1; min-height: 0; }
.mock-main { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--ic-rule); }
.mock-rail { display: flex; flex-direction: column; min-width: 0; }

/* the machine's screen: drawn, never captured */
.mock-screen { flex: 1 1 0; min-height: 5rem; background: #141110; position: relative; overflow: hidden; padding: 0.5rem; }
.appwin { position: absolute; border-radius: 5px; overflow: hidden; background: var(--paper-raised);
          box-shadow: 0 10px 26px rgba(0,0,0,0.34), 0 0 0 1px rgba(0,0,0,0.22); }
.appwin-a { left: 4%; top: 7%; width: 74%; height: 82%; }
.appwin-b { right: 4%; bottom: 8%; width: 44%; height: 56%; }
.appwin-bar { display: flex; align-items: center; gap: 0.3125rem; padding: 0.3125rem 0.4375rem; border-bottom: 1px solid var(--ic-rule); }
.appwin-bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(42,31,23,0.22); display: block; }
.appwin-name { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.07rem; opacity: 0.6; margin-left: 0.25rem; }
.appwin-body { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.3125rem; }
.appwin-tools { display: flex; align-items: center; gap: 0.25rem; padding: 0.3125rem 0.4375rem;
                border-bottom: 1px solid var(--ic-rule); }
.appwin-tools span { height: 7px; width: 18px; border-radius: 2px; background: rgba(42,31,23,0.08); }
.appwin-tools .grow { flex: 1; background: none; }
/* Real content inside the drawn windows rather than grey bars. Cursor's fake
   UI carries plausible work -- a Rust todo!(), a real diff stat -- because a
   wireframe reads as a mockup and work reads as a product. Kept generic: no
   named vendor, no invented figure. */
.appwin-body { font-size: 0.5625rem; line-height: 1.5; }
.appwin-table .tr { display: grid; grid-template-columns: 2.4fr 1fr 1fr 0.7fr; gap: 0.5rem;
                    padding: 0.1875rem 0; border-bottom: 1px solid rgba(42,31,23,0.06); }
.appwin-table .tr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appwin-table .th { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.05rem;
                    text-transform: uppercase; opacity: 0.45; }
.appwin-table .sel { background: rgba(209,90,27,0.07); }
.ok   { color: #41703F; }
.hold { color: var(--ic-accent-t); }
.appwin-code, .appwin-shell { font-family: var(--mono); font-size: 0.5625rem; line-height: 1.7; }
.appwin-code code b, .appwin-shell code b { color: var(--ic-accent-t); font-weight: 400; }
.appwin-code code em { color: #41703F; font-style: normal; }
.appwin-out { display: flex; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.375rem;
              border-top: 1px solid rgba(42,31,23,0.08); font-family: var(--mono); font-size: 0.5rem; opacity: 0.8; }
.appwin-doc p { margin: 0 0 0.3125rem; opacity: 0.75; }
.appwin-doc .h { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.06rem;
                 text-transform: uppercase; opacity: 0.5; margin-top: 0.4375rem; }
.caret { display: inline-block; width: 4px; height: 8px; background: var(--ic-accent);
         vertical-align: -1px; animation: mock-caret 1.1s step-end infinite; }

/* ============================ MOTION ============================
   The only animation on the page, and it is product simulation rather than
   decoration -- which is what cursor spends its motion budget on. A console
   that says "running" and never moves reads as a diagram.
   =============================================================== */
@keyframes mock-caret { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }
@keyframes mock-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(209,90,27,0.34); }
  70%  { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(209,90,27,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(209,90,27,0); }
}
@keyframes mock-sweep { from { transform: translateX(-100%) } to { transform: translateX(320%) } }
@keyframes mock-in { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: none } }

/* the step still running breathes */
.tick:not(.done):not(.wait) { animation: mock-pulse 2.4s ease-in-out infinite; }
/* the active row shows work moving through it */
.steps li:has(.tick:not(.done):not(.wait)) { position: relative; overflow: hidden; }
.steps li:has(.tick:not(.done):not(.wait))::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(209,90,27,0.09), transparent);
  animation: mock-sweep 2.6s ease-in-out infinite; pointer-events: none;
}
/* the newest activity entry arrives rather than being there all along */
.rail-feed li:last-child { animation: mock-in 0.5s ease-out both; animation-delay: 0.5s; }
/* the status dot is a heartbeat */
.mock-dot { animation: mock-pulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .caret, .tick, .mock-dot, .rail-feed li:last-child,
  .steps li:has(.tick:not(.done):not(.wait))::after { animation: none !important; }
}
.ln.acc { background: rgba(209,90,27,0.34); }

.mock-dock { border-top: 1px solid var(--ic-rule); }
.mock-tabs { display: flex; gap: 1rem; padding: 0 0.875rem; border-bottom: 1px solid var(--ic-rule); }
.mock-tabs button {
  border: 0; background: none; cursor: pointer; padding: 0.5rem 0 0.5625rem;
  font-size: 0.75rem; color: var(--ic-ink); opacity: 0.6;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mock-tabs button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--ic-accent); }
.mock-pane { padding: 0.75rem 0.875rem; display: none; }
.mock-pane[data-on] { display: block; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4375rem; }
.steps li { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: 0 0.625rem; align-items: baseline; }
.tick { width: 11px; height: 11px; border-radius: 50%; border: 1.4px solid var(--ic-accent); position: relative; align-self: center; }
.tick.done { background: var(--ic-accent); }
.tick.done::after { content: ""; position: absolute; left: 2.4px; top: 3.4px; width: 4px; height: 2px;
                    border-left: 1.4px solid var(--ic-paper); border-bottom: 1.4px solid var(--ic-paper);
                    transform: rotate(-45deg); }
.tick.wait { border-color: rgba(42,31,23,0.3); border-style: dashed; }
.stat { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06rem; color: var(--ic-accent-t); }
.stat.muted { color: var(--ic-ink); opacity: 0.45; }

.rail-card { margin: 0.75rem 0.875rem 0; padding: 0.625rem 0.6875rem; border: 1px solid var(--ic-rule); border-radius: 6px; }
.rail-k { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1rem; opacity: 0.55; padding: 0.75rem 0.875rem 0; }
.rail-feed { list-style: none; margin: 0; padding: 0.5rem 0.875rem; display: flex; flex-direction: column; gap: 0.4375rem; overflow: hidden; }
.rail-feed li { border: 1px solid var(--ic-rule); border-radius: 6px; padding: 0.5rem 0.5625rem; }
.rail-feed b { display: block; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; }
.rail-feed span { opacity: 0.65; font-size: 0.75rem; }
.mock-composer { margin-top: auto; padding: 0.75rem 0.875rem; display: flex; gap: 0.375rem; }
.mock-composer input {
  flex: 1; min-width: 0; padding: 0.4375rem 0.5rem; border: 1px solid var(--ic-rule);
  border-radius: 5px; background: var(--ic-paper); font-family: var(--sans);
  font-size: 0.75rem; color: var(--ic-ink); outline: none;
}
.mock-composer input:focus { border-color: var(--ic-accent); }
.mock-composer button {
  border: 0; border-radius: 5px; padding: 0.4375rem 0.75rem; cursor: pointer;
  background: var(--ic-accent); color: var(--ic-paper);
  font-family: var(--mono); font-size: 0.6875rem;
}

/* ============================ 24-COLUMN GRID ============================
   cursor.com's feature blocks: copy 8 of 24 columns, visual 16, sides
   alternating down the page. The narrow copy is what makes the visual read as
   wide -- neither ever leaves the container.
   ====================================================================== */
.grid24 { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: var(--g); align-items: center; }
.g-copy { grid-column: span 8; }
.g-media { grid-column: span 16; }
.flip .g-copy { order: 2; }
.flip .g-media { order: 1; }
.g-copy .sec-h { margin-bottom: 0.5rem; }
.g-copy .lede { margin-top: 0; max-width: 34ch; }

/* ============================ CARD ============================ */
.card-block { background: var(--paper-raised); border-radius: 4px; padding: 1.09375rem; }

/* ============================ STAGE ============================
   Not an image box -- a stage. Fixed height, a 32px inset, a backdrop, and
   windows placed absolutely on top of it with clamp() so they re-anchor
   rather than reflow. Windows are allowed to be larger than the stage and get
   clipped, which is what stops a screenshot reading as a screenshot.
   ============================================================== */
.stage {
  position: relative; overflow: hidden; border-radius: 4px;
  background: var(--paper-sunken);
  /* tall enough that the dock's list is readable rather than clipped to one
     row -- cursor clips its windows on purpose, but never the part that
     carries the point of the section. */
  height: clamp(23rem, 52vw, 35rem);
}
.stage-hero { height: min(45rem, 70vh); min-height: 34rem; }
/* The one hairline frame, painted OVER the content so it stays crisp
   regardless of what sits inside. Cursor's ::after trick. */
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none;
  border: 1px solid var(--ic-rule); border-radius: 4px;
}

/* A window on the stage. Radius and shadow live ONLY here -- the rest of the
   page keeps its square hairline language. The third shadow layer is the
   border, per cursor; the tint is our ink rather than black so it stays warm. */
.win {
  position: absolute; border-radius: 10px; overflow: hidden;
  box-shadow: 0 28px 70px rgba(42, 31, 23, 0.14),
              0 14px 32px rgba(42, 31, 23, 0.10),
              0 0 0 1px rgba(42, 31, 23, 0.10);
  transition: box-shadow 0.18s;
}
.win img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
/* primary: centred, and deliberately wider than the stage so it clips */
.win-a {
  left: 50%; top: var(--demo-pad); transform: translateX(-50%);
  width: min(104%, 66rem); aspect-ratio: 16 / 9;
}
/* secondary: pinned low-right, overhanging the primary */
.win-b {
  right: var(--demo-pad); bottom: var(--demo-pad);
  width: min(46%, 30rem); aspect-ratio: 16 / 10; z-index: 12;
}
.win-c {
  left: var(--demo-pad); top: var(--demo-pad);
  width: min(38%, 24rem); aspect-ratio: 16 / 10; z-index: 11;
}

/* ============================ STAGE TABS ============================
   Real buttons in a tablist. Each swaps the primary window to a different
   real run, and the systems row under it.
   =================================================================== */
.tabs { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-bottom: 0.875rem; border-bottom: 1px solid var(--ic-rule); }
.tab {
  background: none; border: 0; padding: 0.625rem 0 0.75rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08rem;
  text-transform: uppercase; color: var(--ic-ink); opacity: 0.55;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.tab:hover { opacity: 0.85; }
.tab[aria-selected="true"] { opacity: 1; color: var(--ic-accent-t); border-bottom-color: var(--ic-accent); }
.systems {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.875rem; margin-top: 1rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.07rem; opacity: 0.7;
}
.systems-k { color: var(--ic-accent-t); letter-spacing: 0.1rem; }
.systems-sep { opacity: 0.4; }

/* The composer, overlaid where the console's own "What should it do?" box
   sits. It is a real input; submitting focuses the waitlist rather than
   pretending to run something. */
.composer {
  position: absolute; left: var(--demo-pad); right: var(--demo-pad); bottom: var(--demo-pad);
  z-index: 20; display: flex; gap: 0.5rem;
}
.composer input {
  flex: 1; min-width: 0; padding: 0.75rem 0.875rem; border: 1px solid rgba(42, 31, 23, 0.18);
  border-radius: 6px; background: rgba(251, 246, 236, 0.96); font-family: var(--mono);
  font-size: 0.8125rem; color: var(--ic-ink); outline: none;
}
.composer input::placeholder { color: var(--ic-ink); opacity: 0.45; }
.composer input:focus { border-color: var(--ic-accent); }
.composer button {
  padding: 0.75rem 1.125rem; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--ic-accent); color: var(--ic-paper); font-family: var(--mono);
  font-size: 0.75rem; letter-spacing: 0.08rem; text-transform: uppercase;
}
.composer button:hover { background: var(--ic-accent-t); }

/* ============================ PLATE ============================
   A framed figure: a still of the product, or the player. The frame is the
   page's own hairline, so a screenshot of the console sits inside the same
   1px rule as everything else -- which works because the console ships the
   same tokens (its theme.css says "copied verbatim from icarus-ai.co").
   =============================================================== */
.plate { border: 1px solid var(--ic-ink); padding: 0.5rem 0.5rem 0; margin: 0; }
.plate img { width: 100%; height: auto; display: block; }
.plate figcaption {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.09rem;
  opacity: 0.65; padding: 0.875rem 0.625rem 0.75rem; text-align: right;
}

/* ============================ PLAYER ============================
   Click-to-load. The poster is the video's own first frame, so the section
   costs 30KB until someone actually asks for the 2.1MB file.
   =============================================================== */
.vid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ic-paper); }
/* contain, not cover: the poster is a caption-cropped frame and so is slightly
   wider than 16:9. Cover would shave the dock off one edge and the rail off the
   other; the letterbox is the paper colour, so it reads as margin. */
.vid-poster { object-fit: contain !important; }
.vid img, .vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; background: none; border: 0; padding: 0; cursor: pointer;
  width: clamp(3.5rem, 7vw, 5rem);
}
.vid-play svg { width: 100%; display: block; transition: transform 0.18s; }
.vid-play:hover svg { transform: scale(1.06); }
.vid-meta {
  position: absolute; left: 1rem; bottom: 0.875rem; z-index: 2;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.09rem;
  color: var(--ic-ink); opacity: 0.65;
}
.vid.is-playing .vid-play, .vid.is-playing .vid-meta, .vid.is-playing .vid-poster { display: none; }

/* ============================ HAIRLINE ROWS ============================
   One component, two sections: the role/workflow table and the "bound by"
   comparison. Deliberately not .stages -- that grid is repeat(3,1fr) with
   :first-child clearing only the first cell of the first row, so a 5-item
   list lands item 4 in column 1 of row 2 with a stray left border.
   ====================================================================== */
.rows { border: 1px solid var(--ic-ink); }
.row {
  display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 0 2.5rem;
  padding: 1.125rem 1.5rem; border-top: 1px solid var(--ic-rule); align-items: baseline;
}
.row:first-child { border-top: 0; }
.row-k { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1rem; text-transform: uppercase; opacity: 0.85; }
.row-v { font-size: 0.9375rem; line-height: 1.6; opacity: 0.75; text-wrap: pretty; }
.row-v b { font-weight: 400; color: var(--ic-accent-t); }
/* The one row that is the point of the table, in .card-feat's clothes. */
.row-feat { background: var(--ic-tint); }
.row-feat .row-k { color: var(--ic-accent-t); opacity: 1; }
.row-feat .row-v { opacity: 0.88; }

/* ============================ CLAIM BLOCK ============================
   Heading + one sentence, sitting above a drawn panel. Four of these carry
   the page, which is cursor.com's claim-then-demo rhythm; the measure is
   short on purpose so the sentence never runs past the figure below it.
   ==================================================================== */
.block-h { max-width: 46rem; margin-bottom: 2.25rem; }
.block-h .sec-h { margin-bottom: 0.625rem; }
.block-h .lede { margin-top: 0; }

/* ============================ RESPONSIVE ============================
   Three breakpoints, each doing one job. No !important, because nothing
   here is fighting an inline style. 48rem matches dots.js MOBILE_MQ.
   ==================================================================== */
@media (max-width: 64rem) {
  /* Copy over media, both full width. Cursor collapses the same way. */
  .g-copy, .g-media { grid-column: 1 / -1; }
  .flip .g-copy { order: 0; }
  .flip .g-media { order: 0; }
  .g-copy .lede { max-width: none; }
  .g-copy { margin-bottom: var(--v); }
  .stage { height: clamp(15rem, 52vw, 24rem); }
  .stage-hero { height: clamp(17rem, 56vw, 28rem); min-height: 0; }
  .win-a { width: min(122%, 60rem); }
  .win-b { width: min(52%, 20rem); }

  .stages { grid-template-columns: minmax(0, 1fr); }
  .stage { border-left: 0; border-top: 1px solid var(--ic-rule); }
  .stage:first-child { border-top: 0; }
  /* Two up between 48 and 64rem: four people in one column is a very long
     scroll on a tablet, and the cards are narrow enough to pair. */
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2rem; }
  /* Two up on a tablet; a phone gets one. At 390 two columns is 168px a card,
     which broke "CoRNStack: Better contrastive data for code retrieval and
     reranking." over five lines. */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-rule { display: none; }
  .row { grid-template-columns: 11rem minmax(0, 1fr); gap: 0 1.75rem; }
  /* sec-top has already wrapped by here, so the figure takes the full column
     rather than staying a 20rem sidebar with the copy squeezed beside it. */
  .sec-fig { width: 100%; }
}

@media (max-width: 48rem) {
  .tabs { gap: 0 1rem; overflow-x: auto; flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
  /* The composer would cover the window on a phone; it is an affordance, not
     load-bearing, so it steps out of the stage rather than shrinking. */
  .composer { display: none; }
  .card-block { padding: 0.75rem; }

  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-links.open {
    display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--ic-paper); border-bottom: 1px solid var(--ic-rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem var(--gutter) 1rem;
  }
  .nav-links.open a { padding: 0.9375rem 0; font-size: 0.9375rem; }
  .nav-links.open .nav-cta { text-align: center; margin-top: 0.5rem; }

  /* The fold is exactly the screen on phones too. min-height (not height) so a
     short window still grows rather than clipping, and svh rather than vh or
     dvh: svh is the viewport with the browser's chrome showing, which is what
     a first load looks like, so nothing of the next section peeks under the
     hero and nothing jumps when the URL bar retracts on the first scroll.
     .hero-mid is the flex: 1 child, so the slack lands in the centre stack and
     the type just sits further from the edges on a tall phone. */
  .hero { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }
  /* On phones dots.js trims the buffer height to the grid band itself (and
     overscans the width by MOBILE_ZOOM), so the band is already centred in the
     canvas: no lift here, and the strip is sized off the width instead. */
  /* Anchored to the top of the band and then lifted clear of it: the bird
     flies under the prose, behind the form, rather than trailing along the
     bottom of whatever spare height the screen turned out to have. */
  #dotCanvas { top: 0; transform: translate(-50%, calc(-50% - 13.75rem)); }
  /* Transparent, so the bird passes behind the field instead of being cut in
     half by an opaque box. The 1px border still holds the form together. */
  .hero-form .wl { background: transparent; }
  /* Four proof items do not fit a phone line; the separators go with them. */
  .proof { flex-direction: column; gap: 0.5rem; padding: 1.5rem var(--gutter) 1.25rem; }
  .proof-dot { display: none; }
  /* Keep the check on the first line of the credential rather than centred
     above it, and give the widget's corner a little room. */
  .proof-cred { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; text-align: left; gap: 0.625rem; padding-bottom: 2.25rem; }
  .proof-cred svg { margin-top: 0.1875rem; }
  /* FIX 13: the old mobile sun was 18rem at top: -3rem *in flow*, which put it
     behind the hero card as an orange blur with no shape. It is on the centre
     axis behind the headline here, the same as on desktop, so it reads as a
     halo again rather than a smudge. */
  .sun { width: min(20rem, 84vw); top: 5.75rem; }
  /* Same order as desktop: the copy centred in the fold, the bird's band under
     it, the credential at the foot. The copy takes the spare space (flex-grow)
     and centres in it, so a tall phone reads as the hero sitting in the middle
     of the screen rather than pinned to the top. The band keeps its 34vw
     whenever the screen can pay for it and is the only thing allowed to shrink
     when it cannot, which is what keeps the fold exactly one screen without
     ever squashing the type. overflow stays visible, so a squeezed band lets
     the wings pass over the copy rather than cutting them.
     Lighter here too: see __dotsAlpha in the page head. */
  .hero-mid { flex: 1 1 auto; justify-content: flex-end; }
  #sky { height: auto; flex: 1 1 0; min-height: 0; }
  /* Top padding clears the fixed draft flag. */
  .hero-mid { padding: 3.5rem 0 2rem; }
  .hero-mid h1 { max-width: none; }
  .hero-alt { margin-bottom: 0.5rem; }
  .hero-form { margin-top: 2rem; }
  .proof { padding-bottom: 2rem; }
  .section { padding: 3.5rem 0 4rem; }
  /* The figure captions are desk furniture: they annotate a wide layout and
     have nothing to sit beside on a phone. */
  .fig { display: none; }
  .card-feat { padding: 1.375rem 1.25rem 1.375rem; }
  .card { padding: 1.375rem 1.25rem 1.375rem; }
  /* Key over value, one column. */
  .row { grid-template-columns: minmax(0, 1fr); gap: 0.4375rem 0; padding: 1.125rem 1.25rem; }
  .controls { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2.25rem; }
  .props { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .prop p { max-width: none; }
  /* The verification marker drops under the step it belongs to rather than
     fighting it for the line. */
  .trace li { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 0.875rem; }
  .trace-sys, .trace-v { grid-column: 2; }
  .trace-v { margin-top: 0.125rem; }
  .trace { padding: 1.125rem 1.25rem 1.25rem; }
  .join-in { padding: 3.25rem 0 3.5rem; }
  .join-glyph { display: none; }
  /* space-between across four columns left SITE/WORK/CONTACT crammed into a
     ragged row with the email running off the edge. Two even columns, brand
     across the top. */
  .foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
}

/* The hero holds inside one screen at 900px tall and above. Below that the
   credential line is allowed to fall past the fold rather than the type being
   compressed any further -- a declarative headline needs its measure more than
   the fold needs that last line. Do not "fix" this by shrinking the stack.

   Short windows (the fix board reads the page at 1280x720 as well as
   1440x900). The centre stack, the bird's band and the proof line all have to
   share one fold, so trim each of them rather than letting the hero outgrow
   the viewport. Height-keyed, not width-keyed: a wide 720px-tall window is
   the case that runs out of room. */
@media (min-width: 48rem) and (max-height: 51rem) {
  .hero-mid { padding: 1.75rem 0 1.25rem; }
  .hero-mid h1 { font-size: clamp(2rem, 3.6vw, 3.25rem); margin-bottom: 1.25rem; }
  .hero-eyebrow { margin-bottom: 1.125rem; }
  .hero-lede { font-size: 1.0625rem; }
  .hero-form { margin-top: 1.75rem; }
  #sky { height: 26vh; }
  .sun { width: clamp(19rem, 33vw, 30rem); }
  .proof { padding: 1rem var(--gutter) 1.25rem; }
  .proof-cred { padding-bottom: 1.5rem; }
}

/* Short phones (an SE is 667px tall, and the centre stack alone runs 712 at
   the default sizes). Same trick as the short-desktop block above: trim the
   stack rather than let it push the next section into the fold. The top
   padding is left alone because it is what clears the fixed draft flag. */
@media (max-width: 48rem) and (max-height: 44rem) {
  .hero-mid { padding: 3.25rem 0 1rem; }
  .hero-mid h1 { font-size: 1.875rem; margin-bottom: 1rem; }
  .hero-eyebrow { font-size: 0.625rem; margin-bottom: 0.875rem; }
  .hero-lede { font-size: 1rem; }
  .hero-form { margin-top: 1.5rem; }
  .hero-alt { margin-top: 0.75rem; }
  .wl input, .wl button { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .proof-cred { padding-bottom: 1.5rem; }
}

/* Very short phones (a 2016-era SE is 320x568). One more notch down on the
   type so the fold still holds everything; nothing is hidden, it is only set
   smaller. */
@media (max-width: 48rem) and (max-height: 38rem) {
  .hero-mid { padding: 3rem 0 0.5rem; }
  .hero-mid h1 { font-size: 1.625rem; margin-bottom: 0.75rem; }
  .hero-eyebrow { margin-bottom: 0.625rem; }
  .hero-lede { font-size: 0.875rem; line-height: 1.5; }
  .hero-form { margin-top: 1.125rem; }
  .hero-alt { margin-top: 0.5rem; font-size: 0.6875rem; }
  .wl input, .wl button { padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 0.8125rem; }
  .proof-cred { padding-bottom: 1rem; font-size: 0.6875rem; }
}

/* Touch targets. Measured at 390px: person links were 31px, footer links 33px,
   the brand lockup 24px, all under the 44px minimum. Padding is added only
   here so desktop density is unchanged. */
@media (hover: none), (max-width: 48rem) {
  .person-links a { padding: 0.8125rem 0; }
  /* Only the CoRNStack card renders .arrow as a real anchor (it is a <div>
     card carrying several links); on the other three it is a span and picks
     up nothing from this. A standalone link, so unlike the in-prose ones it
     gets the full target size. */
  .card a.arrow { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .foot-col a, .foot-col span { padding: 0.75rem 0; }
  .brand { min-height: 2.75rem; }
  .join-alt a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  /* .hero-alt a deliberately does NOT get the same treatment. It is a link
     inside a sentence ("Or email hello@..."), which WCAG 2.5.8 exempts from
     the target-size minimum, and padding it to 44px pushes the hero past one
     screen at 375x667 and 320x568 -- the two sizes the height-keyed blocks
     above exist to protect. Same reasoning for "demo" in the hero lede and
     the three artifact links in the credential line. */
  .draft-long { display: none; }
  .nav-links.open a { padding: 0.9375rem 0; }
}

@media (max-width: 30rem) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: minmax(0, 1fr); }
  .wl { flex-direction: column; }
  .wl button { border-left: 0; border-top: 1px solid var(--ic-ink); justify-content: center; }
  .wl input { border-bottom: 1px solid transparent; }
  .join .wl button { border-top-color: var(--ic-accent); }
  .foot-cols { gap: 1.75rem; }
}

/* Mobile research is a swipeable, one-row carousel. */
@media (max-width: 48rem) {
  .research-cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 22rem);
    grid-template-columns: none;
    grid-template-rows: none;
    gap: .75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: .05rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .research-cards::-webkit-scrollbar { display: none; }
  .research-cards > .card {
    grid-row: auto;
    grid-template-rows: auto auto 1fr auto;
    min-height: 15rem;
    scroll-snap-align: start;
  }
  .research-scroll-indicator {
    display: flex; justify-content: center; align-items: center; gap: .38rem;
    margin-top: .85rem;
  }
  .research-scroll-indicator button {
    width: .42rem; height: .42rem; padding: 0; border: 0; border-radius: 999px;
    background: var(--ic-ink); opacity: .2; transition: width .2s ease, opacity .2s ease, background .2s ease;
  }
  .research-scroll-indicator button[aria-current="true"] {
    width: 1.25rem; opacity: 1; background: var(--ic-accent);
  }
}
@media (min-width: 48.001rem) {
  .research-scroll-indicator { display: none; }
}

/* hero column: .wrap is the positioning context for the sun and the centre stack */
.hero-in > .wrap { position: relative; display: flex; flex-direction: column; flex: 1; width: 100%; }

/* ============================ PRODUCT STORIES (v5) =========================
   The homepage visuals are a coded product narrative, not captures from the
   workbench. Each panel names a workflow, its records, its execution method
   and its review state so the visual carries product information at a glance.
   ========================================================================== */
.hero-deck {
  max-width: 55rem; margin: 0 0 var(--v);
  font-size: clamp(1rem, 1.55vw, 1.3rem); line-height: 1.45; opacity: 0.72; text-wrap: pretty;
}

.hero-demo .mock-bar { min-height: 2.75rem; }
.demo-shell {
  min-height: 0; flex: 1; display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr) 15.5rem;
}
.demo-rail { min-width: 0; background: var(--paper-raised); }
.demo-rail { border-left: 1px solid var(--ic-rule); display: flex; flex-direction: column; }
.demo-k {
  padding: 0 0.75rem 0.5rem; font-family: var(--mono); font-size: 0.5625rem;
  letter-spacing: 0.09rem; opacity: 0.52;
}
.demo-ready { margin-top: 1.1rem; }
.demo-task {
  width: 100%; display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.55rem;
  padding: 0.65rem 0.75rem; border: 0; border-left: 2px solid transparent;
  background: transparent; color: var(--ic-ink); text-align: left; cursor: pointer;
}
.demo-task:hover, .demo-task.is-active { background: var(--paper-sunken); }
.demo-task.is-active { border-left-color: var(--ic-accent); }
.demo-task b { display: block; font-size: 0.6875rem; line-height: 1.35; font-weight: 400; }
.demo-task small { display: block; margin-top: 0.12rem; font-size: 0.6rem; line-height: 1.35; opacity: 0.55; }
.demo-spinner {
  width: 0.7rem; height: 0.7rem; margin-top: 0.16rem; border-radius: 50%;
  border: 1.5px solid rgba(42,31,23,0.22); border-top-color: var(--ic-accent);
  animation: demo-spin 1.2s linear infinite;
}
.demo-check { font-family: var(--mono); font-size: 0.65rem; color: #41703F; }
.hero-demo.is-complete .mock-dot { animation: none; background: #41703F; }

.demo-work { min-width: 0; display: flex; flex-direction: column; background: var(--paper-sunken); }
.demo-work-head {
  min-height: 4.3rem; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--ic-rule);
  background: var(--paper-raised);
}
.demo-work-head h2 { margin-top: 0.22rem; font-family: var(--sans); font-size: 0.8rem; line-height: 1.35; letter-spacing: 0; }
.demo-controls { display: flex; gap: 0.35rem; flex-shrink: 0; }
.demo-controls button {
  border: 1px solid var(--ic-rule); border-radius: 4px; padding: 0.3rem 0.5rem;
  background: transparent; color: var(--ic-ink); font: 0.5625rem/1.2 var(--mono); cursor: pointer;
}
.demo-controls button:hover { border-color: var(--ic-accent); color: var(--ic-accent-t); }

.demo-canvas {
  position: relative; flex: 1 1 auto; min-height: 13rem; overflow: hidden;
  background:
    radial-gradient(circle at 18% 15%, rgba(46,118,165,0.18), transparent 29%),
    linear-gradient(145deg,#18212A 0%,#11171C 62%,#171412 100%);
}
.demo-canvas::before {
  content: ""; position: absolute; inset: 0; opacity: 0.18; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);
  background-size: 1.5rem 1.5rem;
}
.demo-app {
  position: absolute; overflow: hidden; border-radius: 6px; background: var(--paper-raised);
  box-shadow: 0 13px 32px rgba(0,0,0,0.44), 0 0 0 1px rgba(0,0,0,0.34);
  transition: filter 0.42s ease, transform 0.42s ease, box-shadow 0.42s ease;
}
.demo-crm { z-index: 2; left: 3%; top: 5%; width: 78%; height: 84%; }
.demo-brief { z-index: 4; right: 3%; bottom: 4%; width: 54%; height: 76%; }
.demo-browserchrome { border-bottom: 1px solid #C8CDD2; background: #E9EBEE; color: #515A64; }
.demo-browsertabs { min-height: 0.86rem; display: flex; align-items: flex-end; gap: 0.3rem; padding: 0.12rem 0.32rem 0; background: #D9DDE1; }
.browser-dots { display: flex; gap: 0.16rem; flex-shrink: 0; }
.browser-dots i { display: block; width: 0.28rem; height: 0.28rem; border-radius: 50%; background: #AAB0B6; }
.browser-dots i:first-child { background: #F06A5F; }
.browser-dots i:nth-child(2) { background: #EAB94E; }
.browser-dots i:last-child { background: #63B66C; }
.browser-tab {
  min-width: 5rem; max-width: 58%; height: 0.7rem; display: flex; align-items: center; gap: 0.22rem;
  padding: 0 0.3rem; border-radius: 4px 4px 0 0; background: #F5F6F7; color: #515A64;
}
.browser-tab > i { position: relative; width: 0.38rem; height: 0.38rem; border-radius: 50%; flex-shrink: 0; }
.sf-browser-tab > i { background: #0877C9; }
.sf-browser-tab > i::after { content: ""; position: absolute; left: 0.08rem; right: 0.08rem; top: 0.16rem; height: 0.12rem; border-radius: 999px; background: #fff; }
.wd-browser-tab > i { border: 1px solid #F6A01A; border-bottom-color: transparent; }
.browser-tab b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.29rem; font-weight: 500; }
.browser-tab em { margin-left: auto; font-style: normal; font-size: 0.38rem; opacity: 0.62; }
.browser-new { align-self: center; font-size: 0.5rem; line-height: 1; opacity: 0.62; }
.demo-browserbar {
  min-height: 0.94rem; display: flex; align-items: center; gap: 0.3rem; padding: 0.16rem 0.34rem;
  background: #F3F4F5; font: 0.35rem/1.2 var(--sans);
}
.browser-nav { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; color: #69727A; }
.browser-nav i { font-style: normal; font-size: 0.58rem; line-height: 0.5; }
.browser-nav i:last-child { font-size: 0.4rem; }
.browser-address {
  min-width: 0; flex: 1; overflow: hidden; padding: 0.11rem 0.35rem; border-radius: 3px;
  background: #F8F9FA; color: #737A82; white-space: nowrap; text-overflow: ellipsis;
}
.browser-address i { margin-right: 0.12rem; font-style: normal; font-size: 0.27rem; filter: grayscale(1); }
.browser-menu { font-size: 0.56rem; line-height: 0.5; }

/* A compact Salesforce Lightning workspace, drawn entirely in markup. */
.sf-global { display: flex; align-items: center; gap: 0.28rem; min-height: 1.45rem; padding: 0.22rem 0.38rem; background: #0877C9; color: #fff; }
.sf-global > b { font-size: 0.47rem; font-weight: 600; letter-spacing: 0.01rem; }
.sf-cloud { position: relative; width: 1.12rem; height: 0.48rem; border-radius: 999px; background: #fff; flex-shrink: 0; }
.sf-cloud::before, .sf-cloud::after { content: ""; position: absolute; bottom: 0.1rem; border-radius: 50%; background: #fff; }
.sf-cloud::before { left: 0.16rem; width: 0.48rem; height: 0.48rem; }
.sf-cloud::after { right: 0.13rem; width: 0.37rem; height: 0.37rem; }
.sf-search {
  position: relative; flex: 1; min-width: 3rem; margin-left: 0.2rem; padding: 0.2rem 0.35rem 0.2rem 1rem;
  border-radius: 3px; background: #fff; color: #66717B; font-size: 0.4rem;
}
.sf-search i { position: absolute; left: 0.4rem; top: 0.23rem; width: 0.28rem; height: 0.28rem; border: 1px solid #87919A; border-radius: 50%; }
.sf-search i::after { content: ""; position: absolute; left: 0.24rem; top: 0.24rem; width: 0.18rem; height: 1px; background: #87919A; transform: rotate(45deg); transform-origin: left; }
.sf-global-icon, .sf-avatar { display: grid; place-items: center; flex-shrink: 0; width: 0.78rem; height: 0.78rem; border-radius: 50%; font-size: 0.38rem; }
.sf-global-icon { background: rgba(255,255,255,0.17); }
.sf-avatar { background: #E6F3FA; color: #075C94; font-weight: 600; }
.sf-tabs { display: flex; align-items: stretch; gap: 0.6rem; min-height: 1.25rem; padding: 0 0.42rem; border-bottom: 1px solid #D9DEE3; background: #fff; color: #3C4650; }
.sf-tabs b, .sf-tabs span { display: flex; align-items: center; position: relative; font-size: 0.4rem; white-space: nowrap; }
.sf-tabs b { margin-right: 0.2rem; font-size: 0.47rem; }
.sf-tabs .is-current { color: #075C94; font-weight: 600; }
.sf-tabs .is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #0B74B9; }
.sf-view-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.28rem 0.44rem 0.24rem; background: #F7F9FB; }
.sf-view-head > div:first-child span, .sf-view-head > div:first-child b, .sf-view-head > div:first-child small { display: block; }
.sf-view-head > div:first-child span { font: 0.31rem/1.2 var(--mono); letter-spacing: 0.05rem; color: #687580; }
.sf-view-head > div:first-child b { margin: 0.06rem 0; font-size: 0.58rem; font-weight: 500; }
.sf-view-head > div:first-child small { font-size: 0.34rem; color: #75808A; }
.sf-view-actions { display: flex; border: 1px solid #B9C1C9; border-radius: 3px; overflow: hidden; background: #fff; }
.sf-view-actions span { padding: 0.19rem 0.32rem; border-left: 1px solid #D4D9DE; font-size: 0.35rem; color: #075C94; }
.sf-view-actions span:first-child { border-left: 0; }
.sf-view-actions .sf-export { background: #0877C9; color: #fff; }
.demo-table { background: #fff; }
.demo-tr {
  display: grid; grid-template-columns: 0.28rem 1.55fr 1.1fr 0.75fr 0.72fr; gap: 0.34rem; align-items: center;
  padding: 0.19rem 0.42rem; border-bottom: 1px solid #E3E6E9;
  font-size: 0.38rem; color: #34414C; transition: background 0.24s, color 0.24s, box-shadow 0.24s;
}
.demo-tr span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-tr b, .demo-tr small { display: block; overflow: hidden; text-overflow: ellipsis; }
.demo-tr b { font-size: 0.39rem; font-weight: 550; color: #0B5CAB; }
.demo-tr small { margin-top: 0.03rem; font-size: 0.3rem; color: #7A858E; }
.demo-tr em { display: inline-block; padding: 0.1rem 0.2rem; border-radius: 999px; background: #E5F3EA; color: #2E6A43; font-style: normal; font-size: 0.31rem; }
.demo-th { min-height: 0.75rem; font-family: var(--sans); font-size: 0.31rem; font-weight: 600; color: #5A6570; background: #F3F5F7; }
.sf-box { position: relative; width: 0.34rem; height: 0.34rem; border: 1px solid #9AA4AD; border-radius: 1px; }
.demo-tr.is-active { color: #164F73; background: #EAF5FC; box-shadow: inset 3px 0 #0877C9; }
.demo-tr.is-active .sf-box { border-color: #0877C9; background: #0877C9; }
.demo-tr.is-active .sf-box::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 0.27rem/1 var(--sans); }

/* Workday compensation close: app navigation, batch controls and result state. */
.wd-window { background: #F4F6F8; }
.wd-global { display: flex; align-items: center; gap: 0.32rem; min-height: 1.55rem; padding: 0.22rem 0.42rem; background: #163B50; color: #fff; }
.wd-brand { position: relative; display: flex; align-items: center; padding-top: 0.18rem; margin-right: 0.2rem; }
.wd-brand i { position: absolute; left: 0.15rem; top: 0; width: 1.18rem; height: 0.42rem; border-top: 2px solid #F6A01A; border-radius: 50%; transform: rotate(-2deg); }
.wd-brand b { font-size: 0.58rem; font-weight: 550; letter-spacing: -0.02rem; }
.wd-search { flex: 1; min-width: 2rem; padding: 0.19rem 0.35rem; border: 1px solid rgba(255,255,255,0.22); border-radius: 3px; background: rgba(255,255,255,0.11); font-size: 0.36rem; opacity: 0.85; }
.wd-icon, .wd-avatar { display: grid; place-items: center; width: 0.72rem; height: 0.72rem; border-radius: 50%; font-size: 0.35rem; }
.wd-icon { background: rgba(255,255,255,0.1); }
.wd-avatar { background: #F6A01A; color: #163B50; font-weight: 650; }
.wd-crumb { display: flex; align-items: center; gap: 0.24rem; padding: 0.2rem 0.45rem; border-bottom: 1px solid #DDE2E6; background: #fff; color: #67737D; font-size: 0.32rem; }
.wd-crumb i { font-style: normal; opacity: 0.55; }
.wd-crumb b { color: #34414C; font-weight: 550; }
.wd-content { padding: 0.34rem 0.45rem 0.38rem; }
.wd-title { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.wd-title > div span, .wd-title > div b { display: block; }
.wd-title > div span { font: 0.28rem/1.2 var(--mono); letter-spacing: 0.045rem; color: #69757E; }
.wd-title > div b { margin-top: 0.06rem; font-size: 0.51rem; font-weight: 550; color: #263A48; }
.wd-title > em { padding: 0.12rem 0.28rem; border-radius: 999px; background: #FFF0D3; color: #83570D; font-style: normal; font-size: 0.3rem; text-transform: uppercase; }
.wd-kpis { display: grid; grid-template-columns: 0.72fr 0.9fr 1.25fr; gap: 0.22rem; margin-top: 0.27rem; }
.wd-kpis > div { padding: 0.22rem 0.28rem; border: 1px solid #DEE3E7; border-radius: 3px; background: #fff; }
.wd-kpis span, .wd-kpis b { display: block; }
.wd-kpis span { font: 0.25rem/1.2 var(--mono); letter-spacing: 0.035rem; color: #78838C; }
.wd-kpis b { margin-top: 0.07rem; font-size: 0.42rem; font-weight: 600; color: #243A48; }
.brief-copy { margin-top: 0.25rem; border: 1px solid #DEE3E7; border-radius: 3px; background: #fff; padding: 0 0.32rem; font-size: 0.35rem; line-height: 1.35; }
.brief-row, .brief-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.19rem 0;
  border-top: 1px solid #E5E8EB; opacity: 0.18; transform: translateY(3px);
  transition: opacity 0.28s, transform 0.28s;
}
.brief-row:first-child { border-top: 0; }
.brief-row.is-visible, .brief-foot.is-visible { opacity: 1; transform: none; }
.brief-row span, .brief-foot span { display: flex; align-items: center; gap: 0.22rem; min-width: 0; }
.brief-row span i, .brief-foot span i { width: 0.34rem; height: 0.34rem; border-radius: 50%; border: 1px solid #AAB3BA; flex-shrink: 0; }
.brief-row.is-visible span i, .brief-foot.is-visible span i { position: relative; border-color: #3C7A52; background: #3C7A52; }
.brief-row.is-visible span i::after, .brief-foot.is-visible span i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 0.25rem/1 var(--sans); }
.brief-row em { font-style: normal; color: #285C74; white-space: nowrap; }
.brief-foot { font-family: var(--mono); }
.brief-foot strong { color: #315E30; font-weight: 500; white-space: nowrap; }
.wd-actions { display: flex; justify-content: flex-end; gap: 0.25rem; margin-top: 0.28rem; }
.wd-actions span, .wd-actions b { padding: 0.18rem 0.32rem; border: 1px solid #AEB8C0; border-radius: 3px; background: #fff; font-size: 0.31rem; font-weight: 500; }
.wd-actions b { border-color: #0F6C8D; background: #0F6C8D; color: #fff; }

/* The visible pointer makes the app-to-app work legible as computer use. */
.demo-pointer {
  position: absolute; z-index: 9; left: 69%; top: 36%; width: 0.9rem; height: 1.05rem;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.62)); pointer-events: none;
  transition: left 0.8s cubic-bezier(.2,.75,.25,1), top 0.8s cubic-bezier(.2,.75,.25,1), transform 0.35s ease;
}
.demo-pointer::before { content: ""; position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0,100% 70%,58% 75%,42% 100%); }
.demo-pointer::after { content: ""; position: absolute; left: -0.33rem; top: -0.33rem; width: 1.25rem; height: 1.25rem; border: 1px solid rgba(229,106,29,0.72); border-radius: 50%; animation: demo-click 1.75s ease-out infinite; }
.hero-demo[data-demo-frame="1"] .demo-pointer { left: 58%; top: 56%; }
.hero-demo[data-demo-frame="2"] .demo-pointer { left: 73%; top: 67%; }
.hero-demo[data-demo-frame="3"] .demo-pointer { left: 79%; top: 75%; }
.hero-demo[data-demo-frame="4"] .demo-pointer { left: 88%; top: 82%; transform: scale(0.9); }
.hero-demo[data-demo-frame="1"] .demo-crm { box-shadow: 0 15px 36px rgba(0,0,0,0.48),0 0 0 2px rgba(8,119,201,0.72); }
.hero-demo[data-demo-frame="2"] .demo-brief,.hero-demo[data-demo-frame="4"] .demo-brief { box-shadow: 0 16px 38px rgba(0,0,0,0.5),0 0 0 2px rgba(246,160,26,0.52); }
.hero-demo.is-complete .wd-title > em { background: #E3F2E7; color: #315E30; }
@keyframes demo-click { 0% { opacity: 0; transform: scale(0.4); } 18% { opacity: 0.8; } 65%,100% { opacity: 0; transform: scale(1.35); } }

/* One real browser surface, not a pile of miniature app cards. The workflow
   changes tabs as the run advances, giving each application the full canvas. */
.demo-browser-frame {
  position: absolute; z-index: 2; inset: 4% 3% 5%; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 7px; background: #fff; box-shadow: 0 18px 42px rgba(0,0,0,0.52),0 0 0 1px rgba(0,0,0,0.48);
}
.demo-browser-frame .demo-browsertabs { flex-shrink: 0; align-items: flex-end; padding-top: 0.18rem; }
.demo-browser-frame .browser-tab { min-width: 8.4rem; max-width: 30%; background: rgba(245,246,247,0.54); opacity: 0.68; }
.demo-browser-frame .browser-tab > i { filter: grayscale(0.7); }
.demo-browser-frame .browser-address > span { display: none; }
.hero-demo[data-demo-frame="0"] [data-browser-address="salesforce"],
.hero-demo[data-demo-frame="1"] [data-browser-address="workday"],
.hero-demo[data-demo-frame="2"] [data-browser-address="workday"],
.hero-demo[data-demo-frame="3"] [data-browser-address="snowflake"],
.hero-demo[data-demo-frame="4"] [data-browser-address="workday"] { display: inline; }
.hero-demo[data-demo-frame="0"] .sf-browser-tab,
.hero-demo[data-demo-frame="1"] .wd-browser-tab,
.hero-demo[data-demo-frame="2"] .wd-browser-tab,
.hero-demo[data-demo-frame="3"] .snow-browser-tab,
.hero-demo[data-demo-frame="4"] .wd-browser-tab { background: #fff; opacity: 1; }
.hero-demo[data-demo-frame="0"] .sf-browser-tab > i,
.hero-demo[data-demo-frame="1"] .wd-browser-tab > i,
.hero-demo[data-demo-frame="2"] .wd-browser-tab > i,
.hero-demo[data-demo-frame="3"] .snow-browser-tab > i,
.hero-demo[data-demo-frame="4"] .wd-browser-tab > i { filter: none; }
.snow-browser-tab > i { display: grid; place-items: center; background: #29B5E8; }
.snow-browser-tab > i::after { content: "✣"; color: #fff; font: 0.25rem/1 var(--sans); }
.demo-browser-body { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.hero-demo .demo-browser-body .demo-app {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: auto; scrollbar-width: thin; border-radius: 0;
  opacity: 0; visibility: hidden; filter: none; transform: none; box-shadow: none !important;
  transition: none;
}
.hero-demo[data-demo-frame="0"] [data-demo-app="salesforce"],
.hero-demo[data-demo-frame="1"] [data-demo-app="workday"],
.hero-demo[data-demo-frame="2"] [data-demo-app="workday"],
.hero-demo[data-demo-frame="3"] [data-demo-app="snowflake"],
.hero-demo[data-demo-frame="4"] [data-demo-app="workday"] {
  z-index: 2; opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}

/* Full Salesforce list view. */
.sf-window { display: flex; flex-direction: column; background: #F4F6F9; }
.sf-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 7.8rem minmax(0,1fr); }
.sf-sidebar { padding: 0.65rem 0.55rem; border-right: 1px solid #DDE2E6; background: #F7F9FB; color: #4A5660; }
.sf-sidebar b { display: block; margin: 0 0 0.38rem; font-size: 0.46rem; font-weight: 600; color: #243746; }
.sf-sidebar b:nth-of-type(2) { margin-top: 0.8rem; }
.sf-sidebar span, .sf-sidebar small { display: block; padding: 0.22rem 0.35rem; border-radius: 3px; font-size: 0.39rem; }
.sf-sidebar span.is-current { background: #E3F3FB; color: #075C94; font-weight: 600; }
.sf-sidebar small { padding-left: 0; color: #65727C; }
.sf-main { min-width: 0; overflow: hidden; background: #fff; }
.sf-main .sf-view-head { min-height: 3.25rem; padding: 0.52rem 0.65rem 0.45rem; }
.sf-main .sf-view-head > div:first-child span { font-size: 0.36rem; }
.sf-main .sf-view-head > div:first-child b { font-size: 0.73rem; }
.sf-main .sf-view-head > div:first-child small { font-size: 0.39rem; }
.sf-main .sf-view-actions span { padding: 0.28rem 0.45rem; font-size: 0.4rem; }
.sf-list-tools { min-height: 1.55rem; display: flex; justify-content: flex-end; align-items: center; gap: 0.22rem; padding: 0.22rem 0.6rem; border-top: 1px solid #E2E6EA; border-bottom: 1px solid #D9DEE3; background: #fff; }
.sf-list-tools .sf-list-search { width: 7.6rem; margin-right: 0.1rem; padding: 0.22rem 0.4rem; border: 1px solid #B9C3CA; border-radius: 3px; color: #65737D; font-size: 0.36rem; }
.sf-list-tools > i { display: grid; place-items: center; width: 0.82rem; height: 0.82rem; border: 1px solid #C2CBD1; border-radius: 3px; background: #fff; color: #54636E; font-style: normal; font-size: 0.36rem; }
.sf-table .demo-tr { grid-template-columns: 0.3rem 1.55fr 1.1fr 0.65fr 0.72fr 0.8fr; gap: 0.45rem; min-height: 1.7rem; padding: 0.28rem 0.6rem; font-size: 0.43rem; }
.sf-table .demo-tr b { font-size: 0.45rem; }
.sf-table .demo-tr small { font-size: 0.33rem; }
.sf-table .demo-th { min-height: 1.25rem; font-size: 0.34rem; }

/* Full Workday task with navigation and actual payee records. */
.wd-window { display: flex; flex-direction: column; background: #fff; }
.wd-window .wd-global { min-height: 1.9rem; padding: 0.3rem 0.65rem; border-bottom: 1px solid #D9DFE4; background: #fff; color: #344A59; }
.wd-window .wd-brand { padding-top: 0.2rem; margin-right: 0.4rem; color: #005CB9; }
.wd-window .wd-brand i { width: 1.3rem; border-top-color: #F38B00; }
.wd-window .wd-brand b { color: #005CB9; font-size: 0.72rem; letter-spacing: 0.045rem; }
.wd-window .wd-search { max-width: 17rem; padding: 0.25rem 0.55rem; border: 1px solid #D3DADF; background: #F4F6F7; color: #697782; }
.wd-window .wd-icon { border: 1px solid #DFE4E7; background: #F4F6F7; color: #526571; }
.wd-window .wd-avatar { background: #F38B00; color: #fff; }
.wd-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1fr); background: #fff; }
.wd-layout > .wd-side { display: none; }
.wd-side { padding: 0.62rem 0.58rem; border-right: 1px solid #D9DFE4; background: #fff; color: #52616C; }
.wd-side b { display: block; margin: 0 0 0.36rem; font-size: 0.43rem; color: #203A4A; }
.wd-side b:nth-of-type(2) { margin-top: 0.72rem; }
.wd-side span, .wd-side small { display: block; padding: 0.21rem 0.36rem; border-radius: 3px; font-size: 0.39rem; }
.wd-side span { position: relative; }
.wd-side span em { position: absolute; right: 0.3rem; padding: 0.02rem 0.18rem; border-radius: 99px; background: #E8EFF3; font-style: normal; }
.wd-side span.is-current { background: #E8F2F6; color: #0F607D; font-weight: 600; }
.wd-side small { padding-left: 0; color: #667782; }
.wd-main { min-width: 0; overflow: hidden; }
.wd-main .wd-crumb { min-height: 1.75rem; padding: 0.34rem 0.7rem; border: 0; background: #0875D1; color: #fff; }
.wd-main .wd-crumb b { color: #fff; font-size: 0.52rem; }
.wd-main .wd-crumb span { color: #fff; opacity: 0.82; }
.wd-main .wd-crumb i { flex: 1; }
.wd-main .wd-content { padding: 0.48rem 0.8rem 0.42rem; }
.wd-main .wd-title > div span { font-size: 0.32rem; }
.wd-main .wd-title > div b { font-size: 0.68rem; }
.wd-main .wd-title > em { font-size: 0.34rem; }
.wd-main .wd-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.65rem; margin-top: 0.36rem; }
.wd-main .wd-kpis > div { position: relative; min-height: 2.3rem; display: flex; flex-direction: column; justify-content: center; padding: 0.32rem 0.45rem 0.32rem 2.8rem; border: 0; background: #fff; }
.wd-main .wd-kpis > div::before { content: ""; position: absolute; left: 0.28rem; top: 50%; width: 1.85rem; height: 1.85rem; border-radius: 50%; transform: translateY(-50%); background: conic-gradient(#22B6C7 0 92%,#E7EEF1 92% 100%); box-shadow: inset 0 0 0 0.34rem #fff; }
.wd-main .wd-kpis > div:nth-child(2)::before { background: conic-gradient(#5B93E8 0 100%,#E7EEF1 100%); }
.wd-main .wd-kpis > div:nth-child(3)::before { background: conic-gradient(#F38B00 0 97%,#E7EEF1 97% 100%); }
.wd-main .wd-kpis span { font-size: 0.29rem; }
.wd-main .wd-kpis b { font-size: 0.52rem; }
.wd-grid-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.22rem; padding: 0.24rem 0.1rem; border-top: 1px solid #E1E6E9; }
.wd-grid-toolbar b { font-size: 0.43rem; font-weight: 600; color: #263E4D; }
.wd-grid-toolbar span { color: #64747E; font-size: 0.34rem; }
.wd-grid-toolbar em { margin-left: auto; padding: 0.19rem 0.42rem; border: 1px solid #AEBCC5; border-radius: 999px; background: #F4F6F7; color: #344B59; font-style: normal; font-size: 0.32rem; }
.wd-payees { margin-top: 0.4rem; border: 1px solid #DDE3E7; border-radius: 3px; overflow: hidden; background: #fff; }
.wd-payees > div { display: grid; grid-template-columns: 1.45fr 0.72fr 0.72fr 0.8fr 0.55fr; gap: 0.4rem; align-items: center; min-height: 1.42rem; padding: 0.22rem 0.42rem; border-top: 1px solid #E6EAED; font-size: 0.38rem; }
.wd-payees > div:first-child { border-top: 0; }
.wd-payees .wd-payee-head { min-height: 1rem; background: #F1F4F6; color: #687680; font: 0.3rem/1.2 var(--mono); letter-spacing: 0.025rem; }
.wd-payees b, .wd-payees small { display: block; }
.wd-payees b { font-size: 0.39rem; font-weight: 550; color: #244254; }
.wd-payees small { margin-top: 0.03rem; font-size: 0.3rem; color: #7B8790; }
.wd-payees em { justify-self: start; padding: 0.1rem 0.2rem; border-radius: 99px; background: #E5F3EA; color: #2E6A43; font-style: normal; font-size: 0.3rem; }
.wd-main .brief-copy { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0.35rem; margin-top: 0.4rem; border: 0; background: transparent; padding: 0; }
.wd-main .brief-row, .wd-main .brief-foot { display: block; min-width: 0; padding: 0.32rem; border: 1px solid #DDE3E7; border-radius: 3px; background: #fff; }
.wd-main .brief-row span, .wd-main .brief-foot span { margin-bottom: 0.18rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wd-main .brief-row em, .wd-main .brief-foot strong { display: block; padding-left: 0.56rem; font-size: 0.32rem; }
.wd-main .wd-actions { margin-top: 0.38rem; }

/* Snowflake worksheet and execution result. */
.snow-window { display: flex; flex-direction: column; background: #F7F9FA; color: #172B35; }
.snow-global { min-height: 1.7rem; display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.6rem; border-bottom: 1px solid #DDE4E8; background: #fff; }
.snow-global .snow-mark { color: #29B5E8; font-size: 0.9rem; }
.snow-global b { margin-right: 0.35rem; font-size: 0.58rem; font-weight: 650; }
.snow-global span { font-size: 0.39rem; color: #4E626D; }
.snow-global > i { flex: 1; }
.snow-global > em { padding: 0.19rem 0.35rem; border: 1px solid #D5DDE1; border-radius: 3px; font-style: normal; font-size: 0.33rem; }
.snow-global .snow-user { display: grid; place-items: center; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #243F4D; color: #fff; font-size: 0.32rem; }
.snow-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 9rem minmax(0,1fr); }
.snow-side { padding: 0.58rem 0.5rem; border-right: 1px solid #DDE4E8; background: #F1F4F6; }
.snow-side b, .snow-side span, .snow-side small, .snow-side em { display: block; padding: 0.19rem 0.25rem; font-size: 0.36rem; font-style: normal; }
.snow-side b { margin-bottom: 0.25rem; font: 0.3rem/1.2 var(--mono); letter-spacing: 0.05rem; color: #6C7B84; }
.snow-side b:nth-of-type(2) { margin-top: 0.55rem; padding-top: 0.42rem; border-top: 1px solid #D6DEE2; }
.snow-side span.is-open { background: #E3EFF4; color: #145E78; font-weight: 600; }
.snow-side small { padding-left: 0.7rem; }
.snow-side em { padding-left: 1.2rem; color: #52646E; }
.snow-side em.is-file { border-radius: 2px; background: #fff; color: #155F79; box-shadow: inset 2px 0 #29B5E8; }
.snow-work { min-width: 0; display: grid; grid-template-rows: auto auto minmax(6rem,1fr) auto; }
.snow-tabs { display: flex; align-items: center; gap: 0.3rem; min-height: 1.45rem; padding: 0 0.45rem; border-bottom: 1px solid #DDE4E8; background: #fff; }
.snow-tabs span { padding: 0.32rem 0.42rem; font-size: 0.38rem; }
.snow-tabs span.is-current { border-bottom: 2px solid #29B5E8; font-weight: 600; }
.snow-tabs b { margin-left: auto; padding: 0.22rem 0.48rem; border-radius: 3px; background: #1B728F; color: #fff; font-size: 0.36rem; }
.snow-context { display: flex; gap: 0.3rem; padding: 0.24rem 0.5rem; border-bottom: 1px solid #E2E7EA; }
.snow-context span { padding: 0.14rem 0.3rem; border: 1px solid #D4DDE1; border-radius: 3px; background: #fff; font: 0.3rem/1.2 var(--mono); }
.snow-editor { overflow: hidden; padding: 0.4rem 0.55rem; background: #17232B; color: #D9E4EA; }
.snow-editor ol { margin: 0; padding-left: 1.7rem; font: 0.42rem/1.75 var(--mono); }
.snow-editor li::marker { color: #6E818C; }
.snow-editor b { color: #59D0F5; font-weight: 500; }
.snow-editor em { color: #A8DB7B; font-style: normal; }
.snow-result { background: #fff; }
.snow-result-tabs { display: flex; align-items: center; gap: 0.65rem; padding: 0.3rem 0.55rem; border-bottom: 1px solid #E0E6E9; }
.snow-result-tabs b, .snow-result-tabs span { font-size: 0.36rem; }
.snow-result-tabs em { margin-left: auto; color: #3E7450; font-style: normal; font-size: 0.32rem; }
.snow-result-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 0.65fr 0.7fr; gap: 0.4rem; padding: 0.28rem 0.55rem; border-bottom: 1px solid #E5E9EB; font-size: 0.36rem; }
.snow-result-head { background: #F1F4F6; font: 0.29rem/1.2 var(--mono); color: #667782; }
.snow-result-row strong { color: #34744A; font-weight: 600; }

.hero-demo[data-demo-frame="0"] .demo-pointer { left: 87%; top: 36%; }
.hero-demo[data-demo-frame="1"] .demo-pointer { left: 66%; top: 48%; }
.hero-demo[data-demo-frame="2"] .demo-pointer { left: 77%; top: 70%; }
.hero-demo[data-demo-frame="3"] .demo-pointer { left: 83%; top: 28%; }
.hero-demo[data-demo-frame="4"] .demo-pointer { left: 88%; top: 82%; }

/* The terminal state reads as a visual event even with the type ignored: five
   connected execution nodes resolve into one large green check. */
.demo-complete-signal {
  position: absolute; z-index: 8; top: 0.8rem; right: 0.8rem; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.48rem 0.42rem 0.65rem; border: 1px solid rgba(65,112,63,0.48); border-radius: 999px;
  background: rgba(249,245,237,0.96); box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  opacity: 0; transform: translateY(-0.45rem) scale(0.92); transition: opacity 0.32s ease, transform 0.32s ease;
}
.demo-complete-track { display: flex; align-items: center; }
.demo-complete-track i { position: relative; width: 0.46rem; height: 0.46rem; border-radius: 50%; background: #41703F; }
.demo-complete-track i + i { margin-left: 0.72rem; }
.demo-complete-track i + i::before { content: ""; position: absolute; right: 100%; top: 50%; width: 0.72rem; height: 1px; background: #41703F; }
.demo-complete-signal > span { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: #41703F; color: var(--paper-raised); font: 0.8rem/1 var(--mono); }
.hero-demo.is-complete .demo-complete-signal { opacity: 1; transform: none; }
.hero-demo.is-complete .demo-progress span { background: #41703F; }
.hero-demo.is-complete .demo-plan { background: rgba(65,112,63,0.07); }
.hero-demo.is-complete .demo-plan li.is-done { color: #315E30; opacity: 0.94; }
.hero-demo.is-complete .demo-plan li.is-done .demo-step-mark { position: relative; border-color: #41703F; background: #41703F; box-shadow: none; }
.hero-demo.is-complete .demo-plan li.is-done .demo-step-mark::after { content: "✓"; position: absolute; left: 50%; top: 50%; color: var(--paper-raised); font: 0.35rem/1 var(--mono); transform: translate(-50%,-52%); }
.hero-demo.is-complete .demo-brief { box-shadow: 0 10px 28px rgba(0,0,0,0.38), 0 0 0 2px #41703F; }
.hero-demo.is-complete .brief-foot strong { color: #315E30; }
.hero-demo.is-complete .demo-feed li.is-current { border-color: #41703F; background: rgba(65,112,63,0.05); }

.demo-plan { flex: 0 0 auto; padding: 0.62rem 0.85rem 0.7rem; background: var(--paper-raised); }
.demo-progress { height: 2px; overflow: hidden; background: var(--paper-sunken); margin-bottom: 0.48rem; }
.demo-progress span { display: block; width: 8%; height: 100%; background: var(--ic-accent); transition: width 0.38s ease; }
.demo-plan ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.18rem; }
.demo-plan li {
  display: grid; grid-template-columns: 0.75rem minmax(0,1fr) auto; gap: 0.48rem; align-items: center;
  font-size: 0.61rem; opacity: 0.42; transition: opacity 0.24s, color 0.24s;
}
.demo-plan li b { font: 0.48rem/1.2 var(--mono); letter-spacing: 0.05rem; font-weight: 400; }
.demo-step-mark { width: 0.48rem; height: 0.48rem; border: 1px solid rgba(42,31,23,0.35); border-radius: 50%; }
.demo-plan li.is-active { opacity: 1; color: var(--ic-accent-t); }
.demo-plan li.is-active .demo-step-mark { border-color: var(--ic-accent); animation: mock-pulse 1.5s ease-in-out infinite; }
.demo-plan li.is-done { opacity: 0.78; }
.demo-plan li.is-done .demo-step-mark { border-color: var(--ic-accent); background: var(--ic-accent); box-shadow: inset 0 0 0 1.5px var(--paper-raised); }

.demo-rail .mock-tabs { margin-top: 0; }
.demo-rail .mock-pane { padding: 0; overflow: hidden; }
.demo-feed, .demo-checks { list-style: none; margin: 0; padding: 0.65rem 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
.demo-feed li {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0.1rem 0.5rem;
  padding: 0.48rem 0.5rem; border: 1px solid var(--ic-rule); border-radius: 5px;
  opacity: 0.18; transform: translateY(4px); transition: opacity 0.28s, transform 0.28s, border-color 0.28s;
}
.demo-feed li.is-visible { opacity: 1; transform: none; }
.demo-feed li.is-current { border-color: rgba(209,90,27,0.58); }
.demo-feed time { grid-row: span 2; font: 0.48rem/1.3 var(--mono); opacity: 0.45; }
.demo-feed b { font: 0.58rem/1.3 var(--mono); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.demo-feed span { font-size: 0.6rem; opacity: 0.62; }
.demo-checks li { display: grid; grid-template-columns: 0.7rem 1fr; gap: 0.45rem; font-size: 0.63rem; opacity: 0.43; }
.demo-checks li span { width: 0.55rem; height: 0.55rem; margin-top: 0.2rem; border: 1px solid var(--ic-rule); border-radius: 50%; }
.demo-checks li.is-checked { opacity: 0.85; }
.demo-checks li.is-checked span { background: #41703F; border-color: #41703F; box-shadow: inset 0 0 0 1.5px var(--paper-raised); }
.demo-rail .mock-composer { padding: 0.65rem 0.7rem; }

@keyframes demo-spin { to { transform: rotate(360deg); } }

/* Shared frame for the three feature stories. */
.product-scene {
  min-height: 30rem; overflow: hidden; border: 1px solid var(--ic-rule); border-radius: 4px;
  background: var(--paper-sunken); color: var(--ic-ink);
}
.scene-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.65rem; padding: 0.68rem 0.85rem; border-bottom: 1px solid var(--ic-rule);
  background: var(--paper-raised); font: 0.65rem/1.25 var(--mono); letter-spacing: 0.045rem;
}
.scene-top span:last-child { opacity: 0.58; }
.scene-top .scene-state { color: var(--ic-accent-t); opacity: 1 !important; }
.product-scene[data-motion="active"] .scene-top span:last-child::before {
  content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; margin-right: 0.42rem;
  border-radius: 50%; background: #41703F; vertical-align: 0.02rem; animation: scene-live-pulse 1s ease-in-out infinite;
}
@keyframes scene-live-pulse { 0%,100% { opacity: 0.35; box-shadow: 0 0 0 0 rgba(65,112,63,0.18); } 50% { opacity: 1; box-shadow: 0 0 0 0.28rem rgba(65,112,63,0.08); } }
.scene-label { font: 0.56rem/1.3 var(--mono); letter-spacing: 0.085rem; opacity: 0.5; }

/* Role library. */
.role-layout { min-height: 27.35rem; display: grid; grid-template-columns: 9.75rem minmax(0,1fr); }
.role-tabs { padding: 0.7rem 0; border-right: 1px solid var(--ic-rule); background: var(--paper-raised); }
.role-tabs button {
  width: 100%; padding: 0.72rem 0.75rem; border: 0; border-left: 2px solid transparent;
  background: transparent; color: var(--ic-ink); text-align: left; font: 0.66rem/1.35 var(--sans); cursor: pointer; opacity: 0.56;
}
.role-tabs button:hover { opacity: 0.86; }
.role-tabs button[aria-selected="true"] { opacity: 1; border-left-color: var(--ic-accent); background: var(--paper-sunken); }
/* ============================ FEATURE CAROUSEL ============================
   Four slides in ONE grid cell rather than four rows: the track is always as
   tall as its tallest slide, so advancing never changes the page height and
   nothing below it moves. Taking turns in flow would jump the whole page by
   the difference between the OSWorld chart and the shortest product block.

   visibility (not just opacity) is what takes an inactive slide out of the
   tab order and off the accessibility tree; the delayed transition on it lets
   the fade finish before the slide stops being hittable.
   ========================================================================= */
/* One bordered panel: the tab strip on top, one stage under it. The slides no
   longer sit in a raised card of their own -- that was a card inside a card,
   the scene's hairline repeating the block's edge a few pixels in, and it is
   most of what made this section look muddy. The panel owns the one border and
   the stage sits on plain paper inside it.
   --feat-h is the mobile height; on desktop it comes from the fold. */
/* No outer box. Each scene carries its own frame where it needs one; a border
   around the whole panel just fenced the section in. overflow stays -- it is
   what clips the stacked slides. */
.feat-carousel {
  position: relative; --feat-h: min(36rem, 68vh); --feat-h: min(36rem, 68svh);
  overflow: hidden;
}
.feat-slide .product-scene,
.feat-slide .stage-hero { height: var(--feat-h); min-height: 0; }
/* Each scene was built to be exactly as tall as its contents. Pinned to a
   shared height they left a dead band under the last row, so the scene is a
   column and its main body takes the slack: the chart, the comparison and the
   condition list all stretch, while the top bar and the footnote row keep
   their own height. */
.feat-slide .product-scene { display: flex; flex-direction: column; }
.feat-slide .gain-body,
.feat-slide .verify-layout,
.feat-slide .osworld-chart { flex: 1; min-height: 0; }
/* The copy column is short next to that, so it centres against it rather than
   sitting at the top of a 640px column. */
.feat-slide .card-block { background: none; border-radius: 0; padding: 1.625rem; }
/* The tab above says which section this is, so the copy does not repeat it;
   the heading is the first thing in the column now. */
.feat-slide .g-copy .sec-h { margin-top: 0; }
/* All four slides share one grid cell. Without JS that alone is the whole
   mechanism: the cell takes the tallest slide, the one marked data-on in the
   markup shows, and nothing collapses. With JS the track is given an explicit
   height instead and animates between slides, so a short slide no longer
   carries the OSWorld chart's empty space underneath it -- 253px of it at
   390px wide. overflow is what lets that height be smaller than the stack. */
.feat-track { display: grid; overflow: hidden; transition: height 0.38s ease; }
/* The outgoing slide clears before the incoming one arrives. Cross-fading
   both over the same 0.38s put two slides on screen at once at half opacity,
   and since they stack in one cell that read as a double exposure rather than
   a transition. Out in 0.2s, in over 0.3s starting when the old one is gone. */
.feat-slide {
  grid-area: 1 / 1; align-self: start; min-width: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.feat-slide[data-on] { opacity: 1; visibility: visible; transition: opacity 0.3s ease 0.2s, visibility 0s; }
/* visibility is inherited, so a descendant can undo the hiding above -- the
   Domains slide's active mock sets visibility:visible on itself and stays
   hit-testable while its slide is off. Since the slides share one grid cell,
   that invisible mock sat on top of the Icarus slide and ate its clicks.
   pointer-events doesn't inherit-and-override the same way, so it settles it. */
.feat-slide { pointer-events: none; }
.feat-slide[data-on] { pointer-events: auto; }
/* The dots sit under the whole block here, so they take the page's ground
   rather than the console's raised bar. */
.feat-head { margin-bottom: calc(var(--v) * 1.25); }
@media (prefers-reduced-motion: reduce) {
  .feat-slide, .feat-track { transition: none; }
}

/* The tab rail. Four NAMED tabs over one stage, not a row of dots: the strip
   carries all four claims in text, so a visitor reads what is in the section
   without clicking anything, and the section costs no scrolling beyond its own
   height. Each tab is a full-height hit area, comfortably past 44px on touch
   without the labels having to grow to get there. */
/* The strip's rule sits above it, with each tab's selection marker pulled up
   a pixel so the accent segment lands on the rule rather than under it. */
.feat-tabs { display: flex; border-top: 1px solid var(--ic-rule); }
.feat-tabs button { margin-top: -1px; }
.feat-tabs button {
  flex: 1; min-width: 0; text-align: left; cursor: pointer;
  padding: 0.9375rem 1.125rem; background: transparent;
  border: 0; border-right: 1px solid var(--ic-rule);
  border-top: 2px solid transparent;
  transition: background 0.16s, border-color 0.16s;
  -webkit-tap-highlight-color: transparent;
}
.feat-tabs button:last-child { border-right: 0; }
.feat-tabs button b {
  display: block; font-family: var(--mono); font-weight: 400;
  font-size: 0.78125rem; letter-spacing: 0.09rem; text-transform: uppercase;
  color: var(--ic-ink); opacity: 0.62; transition: opacity 0.16s, color 0.16s;
}
.feat-tabs button small {
  display: block; margin-top: 0.1875rem;
  font-size: 0.78125rem; line-height: 1.35; opacity: 0.5;
}
.feat-tabs button:hover b { opacity: 0.9; }
.feat-tabs button[aria-selected="true"] { background: var(--paper-raised); border-top-color: var(--ic-accent); }
.feat-tabs button[aria-selected="true"] b { color: var(--ic-accent-t); opacity: 1; }
.feat-tabs button:focus-visible { outline: 2px solid var(--ic-link); outline-offset: -2px; }
/* Four tabs across a phone is 87px each, which wrapped every label onto three
   lines and made the strip 153px tall. Two by two, labels only: the summaries
   are what wrap, and on a phone the panel right below already says the same
   thing, so the strip keeps the four names and drops the gloss. */
/* On a phone the strip moves above the panel and runs as one line. Five labels
   across 358px only fit because the four resting ones step down to 9px while
   the selected one takes 12px, which is also how the selection reads without a
   fill: size carries it, and the accent rule under the active tab points at the
   panel it belongs to rather than sitting on top of it as it does on desktop.
   Natural widths with space-between, not equal columns, so the long labels get
   the room and the short ones do not hoard it; ellipsis is a backstop for
   narrower phones rather than something that should ever show. */
@media (max-width: 48rem) {
  .feat-carousel { display: flex; flex-direction: column; }
  .feat-foot { order: -1; margin-top: 0; margin-bottom: 0.95rem; }
  .feat-tabs {
    display: flex; justify-content: space-between; align-items: stretch;
    border-top: 0; border-bottom: 1px solid var(--ic-rule);
  }
  .feat-tabs button {
    flex: 0 1 auto; min-width: 0; min-height: 0; text-align: center;
    margin-top: 0; margin-bottom: -1px;
    padding: 0.65rem 0.28rem 0.7rem;
    border-right: 0; border-top: 0; border-bottom: 2px solid transparent;
  }
  .feat-tabs button small { display: none; }
  .feat-tabs button b {
    font-size: 0.625rem; letter-spacing: 0.03em; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: font-size 0.18s ease, opacity 0.16s, color 0.16s;
  }
  .feat-tabs button[aria-selected="true"] {
    background: none; border-top-color: transparent; border-bottom-color: var(--ic-accent);
  }
  .feat-tabs button[aria-selected="true"] b { font-size: 0.8125rem; }
}
/* Below 380px the two longest labels clip once they are the selected one, so
   the whole strip steps down a notch rather than letting a name go to an
   ellipsis. */
@media (max-width: 23.75rem) {
  .feat-tabs button { padding: 0.65rem 0.18rem 0.7rem; }
  .feat-tabs button b { font-size: 0.5625rem; }
  .feat-tabs button[aria-selected="true"] b { font-size: 0.75rem; }
}

.role-pane { display: none; padding: 1.05rem; }
.role-pane[data-on] { display: block; animation: scene-pane-in 0.42s ease both; }
.role-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 1rem; }
.role-head span { font: 0.56rem/1.2 var(--mono); letter-spacing: 0.08rem; color: var(--ic-accent-t); }
.role-head b { font-size: 0.68rem; font-weight: 400; opacity: 0.55; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.65rem; }
.workflow-grid article { min-height: 11.85rem; display: flex; flex-direction: column; padding: 0.85rem; border: 1px solid var(--ic-rule); border-radius: 4px; background: var(--paper-raised); }
.role-pane[data-on] .workflow-grid article { animation: scene-card-in 0.42s ease both; }
.role-pane[data-on] .workflow-grid article:nth-child(2) { animation-delay: 0.07s; }
.role-pane[data-on] .workflow-grid article:nth-child(3) { animation-delay: 0.14s; }
.wf-icon { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-bottom: 1rem; border: 1px solid var(--ic-rule); border-radius: 50%; font: 0.5rem/1 var(--mono); color: var(--ic-accent-t); }
.workflow-grid h3 { font-family: var(--sans); font-size: 0.82rem; line-height: 1.3; letter-spacing: 0; }
.workflow-grid p { margin: 0.45rem 0 0.65rem; font-size: 0.61rem; line-height: 1.42; opacity: 0.62; }
.workflow-grid small { margin-top: auto; font: 0.5rem/1.45 var(--mono); letter-spacing: 0.025rem; opacity: 0.5; }
.specialization-strip {
  display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: 0.7rem; align-items: center;
  margin-top: 0.75rem; padding: 0.68rem 0.8rem; border: 1px solid rgba(209,90,27,0.32);
  border-radius: 4px; background: linear-gradient(90deg, rgba(209,90,27,0.08), rgba(209,90,27,0.025));
}
.specialization-strip > span { font: 0.49rem/1.2 var(--mono); letter-spacing: 0.065rem; color: var(--ic-accent-t); }
.specialization-strip > span::after { content: "············"; display: block; margin-top: 0.22rem; font-size: 0.7rem; line-height: 0.6; letter-spacing: 0.08rem; color: #41703F; }
.specialization-strip > i { font-style: normal; color: var(--ic-accent-t); }
.specialization-strip b, .specialization-strip small { display: block; }
.specialization-strip b { font-size: 0.65rem; font-weight: 500; }
.specialization-strip small { margin-top: 0.16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 0.48rem/1.3 var(--mono); opacity: 0.57; }
.role-pane[data-on] .specialization-strip { animation: scene-card-in 0.42s 0.2s ease both; }

@keyframes scene-pane-in { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes scene-card-in { from { opacity: 0; transform: translateY(0.45rem); } to { opacity: 1; transform: none; } }

/* Cost curve: the result, the learning mechanism and the resulting execution
   mix are visible together. It deliberately uses bars rather than the console
   tab's curve so the same claim is reinforced without repeating a screen. */
.gain-row { width: 100%; display: grid; grid-template-columns: 2.7rem minmax(0,1fr) 3.7rem; gap: 0.6rem; align-items: center; margin-top: 0.85rem; padding: 0; border: 0; background: transparent; color: var(--ic-ink); text-align: left; cursor: pointer; opacity: 0.52; transition: opacity 0.25s, transform 0.25s; }
.gain-row:hover { opacity: 0.8; }
.gain-row:focus-visible { outline: 2px solid var(--ic-accent); outline-offset: 3px; }
.gain-row > span, .gain-row > b { font: 0.48rem/1.2 var(--mono); font-weight: 400; }
.gain-row > b { text-align: right; }
.gain-row > div { height: 1rem; background: var(--paper-sunken); border-radius: 2px; overflow: hidden; }
.gain-row > div i { display: block; width: calc(var(--w) * 1%); height: 100%; background: #BEB5A6; transform-origin: left; transition: width 0.48s ease, background 0.25s; }
.gain-row.is-current > div i { min-width: 0.8rem; background: var(--ic-accent); }
.gain-row.is-current > b { color: var(--ic-accent-t); }
.gain-row.is-current { opacity: 1; transform: translateX(0.15rem); }
.gain-mix { display: flex; height: 1.25rem; overflow: hidden; border-radius: 3px; background: var(--paper-sunken); }
.gain-mix > i { display: block; width: calc(var(--w) * 1%); height: 100%; transition: width 0.52s ease; }
.gain-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.42rem; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--ic-rule); }
.gain-legend span { display: flex; align-items: center; gap: 0.38rem; font-size: 0.48rem; opacity: 0.6; }
.gain-legend i { width: 0.5rem; height: 0.5rem; border-radius: 1px; }
.gain-primitives { display: flex; align-items: center; gap: 0.45rem; margin: 0 0.9rem 0.9rem; padding: 0.7rem 0.8rem; border: 1px solid var(--ic-rule); background: rgba(65,112,63,0.045); overflow: hidden; }
.gain-primitives > span { margin-right: 0.25rem; font: 0.48rem/1.2 var(--mono); letter-spacing: 0.06rem; color: #41703F; white-space: nowrap; }
.gain-primitives code { padding: 0.25rem 0.38rem; border: 1px solid var(--ic-rule); border-radius: 3px; background: var(--paper-raised); font: 0.46rem/1.2 var(--mono); white-space: nowrap; }
.gain-primitives > i { font-style: normal; opacity: 0.42; }
.gain-scene.is-animated .gain-primitives code { opacity: 0.24; transition: opacity 0.32s, border-color 0.32s, background 0.32s; }
.gain-scene.is-animated .gain-primitives code.is-reused { opacity: 1; border-color: rgba(65,112,63,0.42); background: rgba(65,112,63,0.08); }
/* Verification report. */
.verify-layout { min-height: 27.35rem; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(12rem,0.85fr); }
.criteria { padding: 0.9rem 1rem; }
.verify-origin { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto minmax(0,0.95fr); gap: 0.45rem; align-items: stretch; margin-bottom: 0.8rem; }
.verify-origin > div, .verify-origin > strong { padding: 0.6rem; border: 1px solid var(--ic-rule); border-radius: 3px; background: var(--paper-raised); }
.verify-origin > strong { border-color: rgba(209,90,27,0.35); background: var(--ic-tint); }
.verify-origin > i { align-self: center; font-style: normal; color: var(--ic-accent-t); }
.verify-origin span { display: block; font: 0.43rem/1.25 var(--mono); letter-spacing: 0.045rem; color: var(--ic-accent-t); }
.verify-origin b { display: block; margin-top: 0.28rem; font-size: 0.51rem; line-height: 1.35; font-weight: 400; }
.criterion { display: grid; grid-template-columns: 1.25rem minmax(0,1fr) auto; gap: 0.65rem; padding: 0.7rem 0; border-bottom: 1px solid var(--ic-rule); }
.criterion-mark { display: grid; place-items: center; width: 1rem; height: 1rem; margin-top: 0.08rem; border: 1px solid var(--ic-accent); border-radius: 50%; color: var(--ic-accent-t); font: 0.58rem/1 var(--mono); }
.criterion-mark.ok { color: #41703F; border-color: #41703F; }
.criterion b { display: block; font-size: 0.72rem; font-weight: 400; line-height: 1.35; }
.criterion small { display: block; margin-top: 0.2rem; font-size: 0.6rem; line-height: 1.45; opacity: 0.57; }
.criterion em { font: 0.53rem/1.2 var(--mono); font-style: normal; color: #41703F; }
/* The held row is the interesting one: a page that shows its agent being
   stopped argues better than one showing four green ticks. It gets the tint
   pulled out to the row's full width, a rule of its own, and a mark that is
   not a tick rather than a tick in a different colour. */
.criterion.is-held { background: rgba(176, 105, 27, 0.06); margin: 0 -0.65rem; padding: 0.7rem 0.65rem; border-bottom-color: rgba(176, 105, 27, 0.3); }
.criterion.is-held .criterion-mark { border-color: #B0691B; color: #B0691B; font-weight: 700; }
.criterion.is-held em { color: #B0691B; }
.evidence { padding: 1.15rem 1rem; border-left: 1px solid var(--ic-rule); background: var(--paper-raised); }
/* The three-box derivation strip was the busiest thing in this frame for the
   least information. One line says the same and gives the conditions the room. */
.verify-caption { margin: 0 0 0.85rem; font-size: 0.6rem; line-height: 1.45; opacity: 0.62; }
/* The held action leads the column now, so it loses its stacking margin. */
.evidence > .approval-card:first-child { margin-top: 0; margin-bottom: 1.05rem; }
/* Evidence rows lost their href -- they never went anywhere -- so they stop
   advertising a click they cannot honour. */
.evidence > a { cursor: default; }
.evidence > a { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.65rem 0; border-bottom: 1px solid var(--ic-rule); font-size: 0.65rem; }
.evidence > a b { font: 0.53rem/1.3 var(--mono); font-weight: 400; opacity: 0.58; }
.approval-card { margin-top: 1.15rem; padding: 0.85rem; border: 1px solid rgba(209,90,27,0.38); border-radius: 4px; background: var(--ic-tint); }
.approval-card span { display: block; font: 0.5rem/1.2 var(--mono); letter-spacing: 0.075rem; color: var(--ic-accent-t); }
.approval-card b { display: block; margin: 0.36rem 0 0.25rem; font-size: 0.67rem; font-weight: 500; }
.approval-card small { display: block; font-size: 0.58rem; line-height: 1.45; opacity: 0.62; }
.approval-card > strong { display: inline-block; margin-top: 0.7rem; border-radius: 3px; padding: 0.4rem 0.55rem; background: var(--ic-accent); color: var(--ic-paper); font: 400 0.52rem/1.2 var(--mono); }

/* Verification plays like a real evaluation pass: intent and traces resolve,
   conditions check in sequence, evidence lights up, then the unsafe write is
   visibly held. Without JS the report remains fully visible. */
.verify-scene.is-animated [data-verify-source],
.verify-scene.is-animated [data-verify-criterion],
.verify-scene.is-animated [data-verify-evidence] { opacity: 0.22; transition: opacity 0.34s, transform 0.34s, border-color 0.34s, background 0.34s; }
.verify-scene.is-animated [data-verify-source] { transform: translateY(0.3rem); }
.verify-scene.is-animated [data-verify-source].is-visible,
.verify-scene.is-animated [data-verify-criterion].is-evaluated,
.verify-scene.is-animated [data-verify-evidence].is-visible { opacity: 1; transform: none; }
.verify-scene.is-animated [data-verify-criterion] .criterion-mark,
.verify-scene.is-animated [data-verify-criterion] em { opacity: 0; transform: scale(0.72); transition: opacity 0.26s, transform 0.26s; }
.verify-scene.is-animated [data-verify-criterion].is-evaluated .criterion-mark,
.verify-scene.is-animated [data-verify-criterion].is-evaluated em { opacity: 1; transform: none; }
.verify-scene.is-animated [data-verify-evidence].is-visible { background: rgba(65,112,63,0.045); }
.verify-scene.is-animated [data-verify-held] { opacity: 0; transform: translateY(0.5rem); transition: opacity 0.36s, transform 0.36s; }
.verify-scene.is-animated [data-verify-held].is-visible { opacity: 1; transform: none; }

/* Execution path. */

/* Learning / execution evolution. */
.learn-grid { min-height: 22rem; display: grid; grid-template-columns: minmax(0,1fr) 7rem minmax(0,1fr); gap: 0.8rem; align-items: center; padding: 1.1rem; }
.learn-run { border: 1px solid var(--ic-rule); border-radius: 4px; background: var(--paper-raised); overflow: hidden; }
.run-title { padding: 0.82rem; border-bottom: 1px solid var(--ic-rule); }
.run-title span { display: block; font: 0.5rem/1.2 var(--mono); letter-spacing: 0.07rem; color: var(--ic-accent-t); }
.run-title b { display: block; margin-top: 0.25rem; font-size: 0.72rem; font-weight: 400; }
.mode-row { display: flex; justify-content: space-between; gap: 0.7rem; padding: 0.72rem 0.8rem; border-bottom: 1px solid rgba(42,31,23,0.08); font-size: 0.62rem; }
.mode-row:last-child { border-bottom: 0; }
.mode-row em { font: 0.5rem/1.3 var(--mono); font-style: normal; color: var(--ic-accent-t); text-align: right; }
.repeat .mode-row:not(.is-new) { background: rgba(65,112,63,0.05); }
.learn-arrow { text-align: center; color: var(--ic-accent-t); }
.learn-arrow span { display: block; font: 1.2rem/1 var(--mono); }
.learn-arrow small { display: block; margin-top: 0.45rem; font: 0.48rem/1.45 var(--mono); opacity: 0.68; }
.learn-note { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 1.1rem 1.1rem; padding: 0.78rem 0.9rem; border: 1px solid var(--ic-rule); background: var(--paper-raised); }
.learn-note .mock-dot { margin-top: 0.32rem; flex-shrink: 0; }
.learn-note p { margin: 0; font-size: 0.65rem; line-height: 1.45; opacity: 0.68; }
.learn-note b { font-weight: 500; opacity: 1; }

/* The top navigation changes the console, rather than moving an underline over
   the same screen. These views use the same information architecture as the
   workbench source (runs, automations and learned primitives) but are written as
   an illustrative, standalone demo. */
.demo-shell.console-pane, .console-view { display: none; }
.demo-shell.console-pane[data-on] { display: grid; }
.console-view[data-on] { display: flex; }
.console-view { min-height: 0; flex: 1; flex-direction: column; background: var(--paper-sunken); }
.console-view-head {
  min-height: 5rem; padding: 1rem 1.15rem; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ic-rule); background: var(--paper-raised);
}
.console-view-head .demo-k { padding: 0; }
.console-view-head h2 { margin-top: 0.3rem; font-family: var(--sans); font-size: 0.92rem; line-height: 1.35; letter-spacing: 0; }
.console-filter { display: flex; border: 1px solid var(--ic-rule); border-radius: 4px; overflow: hidden; }
.console-filter button, .console-primary {
  border: 0; border-left: 1px solid var(--ic-rule); padding: 0.45rem 0.65rem;
  background: transparent; color: var(--ic-ink); font: 0.56rem/1.2 var(--mono); cursor: pointer;
}
.console-filter button:first-child { border-left: 0; }
.console-filter button.is-selected { background: var(--ic-ink); color: var(--ic-paper); }
.console-primary { border: 1px solid var(--ic-ink); border-radius: 3px; }
.console-primary:hover { background: var(--ic-ink); color: var(--ic-paper); }

.history-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.65rem; padding: 0.9rem 1rem; }
.history-summary > div { padding: 0.7rem 0.8rem; border: 1px solid var(--ic-rule); background: var(--paper-raised); }
.history-summary span { display: block; font: 0.5rem/1.2 var(--mono); letter-spacing: 0.06rem; opacity: 0.5; }
.history-summary b { display: block; margin-top: 0.38rem; font: 400 1rem/1.2 var(--serif); }
.history-summary small { display: block; margin-top: 0.15rem; font-size: 0.56rem; opacity: 0.55; }
.history-table { margin: 0 1rem 1rem; border: 1px solid var(--ic-rule); background: var(--paper-raised); }
.history-row {
  width: 100%; display: grid; grid-template-columns: minmax(13rem,2fr) minmax(6rem,0.8fr) minmax(7rem,0.9fr) minmax(5rem,0.65fr);
  gap: 0.8rem; align-items: center; padding: 0.72rem 0.8rem; border: 0; border-top: 1px solid var(--ic-rule);
  background: transparent; color: var(--ic-ink); text-align: left; font-size: 0.62rem;
}
.history-row[hidden] { display: none; }
.history-row > span { overflow: hidden; text-overflow: ellipsis; }
.history-row b { display: block; font-size: 0.66rem; font-weight: 500; }
.history-row small { display: block; margin-top: 0.12rem; opacity: 0.52; }
.history-th { border-top: 0; cursor: default; font: 0.5rem/1.2 var(--mono); letter-spacing: 0.06rem; text-transform: uppercase; opacity: 0.5; }

.automation-grid { min-height: 0; flex: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.8rem; padding: 1rem; }
.automation-card { padding: 0.95rem; border: 1px solid var(--ic-rule); background: var(--paper-raised); }
.automation-title { display: grid; grid-template-columns: 0.6rem minmax(0,1fr) auto; gap: 0.55rem; align-items: center; }
.automation-title b { font-size: 0.7rem; font-weight: 500; }
.automation-title em { font: 0.5rem/1.2 var(--mono); font-style: normal; color: var(--ic-accent-t); }
.live-dot { width: 0.48rem; height: 0.48rem; border: 1px solid rgba(42,31,23,0.3); border-radius: 50%; }
.is-live .live-dot { border-color: #41703F; background: #41703F; box-shadow: 0 0 0 3px rgba(65,112,63,0.11); }
.automation-card p { min-height: 2.3rem; margin: 0.8rem 0 0.75rem; font: 0.53rem/1.45 var(--mono); color: var(--ic-accent-t); opacity: 0.7; }
.automation-card dl { margin: 0; }
.automation-card dl div { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--ic-rule); }
.automation-card dt, .automation-card dd { margin: 0; font-size: 0.55rem; }
.automation-card dt { font-family: var(--mono); opacity: 0.48; }
.automation-card dd { text-align: right; }

.learning-count { display: flex; align-items: baseline; gap: 0.45rem; }
.learning-count b { font: 400 1.4rem/1 var(--serif); }
.learning-count span { font: 0.52rem/1.2 var(--mono); opacity: 0.55; }
.learning-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 15.5rem minmax(0,1fr); }
.learning-list { padding: 0.8rem 0; border-right: 1px solid var(--ic-rule); background: var(--paper-raised); }
.learning-list button { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0.2rem 0.5rem; padding: 0.72rem 0.8rem; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--ic-ink); text-align: left; cursor: pointer; }
.learning-list button:hover, .learning-list button.is-selected { background: var(--paper-sunken); }
.learning-list button.is-selected { border-left-color: var(--ic-accent); }
.learning-list button > span { font-size: 0.64rem; }
.learning-list button > b { font: 0.48rem/1.3 var(--mono); font-weight: 400; color: var(--ic-accent-t); }
.learning-list button > small { grid-column: 1 / -1; font-size: 0.52rem; opacity: 0.5; }
.learning-detail { padding: 1.15rem; }
.learning-detail h3 { margin-top: 0.5rem; font-family: var(--sans); font-size: 0.88rem; letter-spacing: 0; }
.learning-detail > p { max-width: 58ch; margin: 0.55rem 0 1rem; font-size: 0.64rem; line-height: 1.55; opacity: 0.65; }
.learning-path { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 0.7rem; align-items: center; }
.learning-path > div { min-height: 7rem; padding: 0.75rem; border: 1px solid var(--ic-rule); background: var(--paper-raised); }
.learning-path span { display: block; font: 0.48rem/1.2 var(--mono); color: var(--ic-accent-t); }
.learning-path b { display: block; margin: 0.55rem 0; font-size: 0.61rem; line-height: 1.45; font-weight: 400; }
.learning-path em { font: 0.5rem/1.2 var(--mono); font-style: normal; opacity: 0.52; }
.learning-path > i { font-style: normal; color: var(--ic-accent-t); }
.learning-evidence { display: flex; gap: 0.65rem; align-items: flex-start; margin-top: 0.9rem; padding: 0.72rem 0.8rem; border: 1px solid var(--ic-rule); background: rgba(65,112,63,0.045); }
.learning-evidence p { margin: 0; font-size: 0.6rem; line-height: 1.45; }
.learning-evidence b, .learning-evidence small { display: block; }
.learning-evidence b { font-weight: 500; }
.learning-evidence small { margin-top: 0.15rem; opacity: 0.55; }

/* Learning tab: the reference screenshot's idea, rebuilt as a compact slope
   and execution-mix dashboard. The curve makes the improvement legible before
   any number is read; selecting a run links its point to the corresponding
   execution profile. */
.eff-head-stat { display: flex; align-items: baseline; gap: 0.5rem; color: var(--ic-accent-t); }
.eff-head-stat b { font: 400 1.75rem/1 var(--serif); }
.eff-head-stat span { font: 0.52rem/1.2 var(--mono); letter-spacing: 0.035rem; }
.eff-dashboard {
  min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(18rem,0.9fr);
  grid-template-rows: minmax(0,1fr) auto; gap: 0.7rem; padding: 0.8rem; overflow: hidden;
}
.eff-runtime, .eff-profile, .eff-primitives, .eff-verified {
  border: 1px solid var(--ic-rule); border-radius: 4px; background: var(--paper-raised);
}
.eff-runtime, .eff-profile { min-height: 0; padding: 0.8rem; }
.eff-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.7rem; }
.eff-section-head span { font: 0.5rem/1.2 var(--mono); letter-spacing: 0.075rem; opacity: 0.54; }
.eff-section-head b { font: 0.5rem/1.2 var(--mono); font-weight: 400; color: var(--ic-accent-t); }
.eff-curve { height: 8.75rem; margin: 0.15rem 0 -0.55rem; }
.eff-curve svg { display: block; width: 100%; height: 100%; overflow: visible; }
.eff-curve line { stroke: rgba(42,31,23,0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.eff-curve path { fill: none; stroke: var(--ic-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.eff-curve circle { fill: var(--paper-raised); stroke: var(--ic-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.eff-curve circle:last-child { fill: var(--ic-accent); }
.eff-run-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.45rem; }
.eff-run-picker button {
  min-width: 0; padding: 0.52rem 0.55rem; border: 1px solid var(--ic-rule); border-radius: 3px;
  background: transparent; color: var(--ic-ink); text-align: left; cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}
.eff-run-picker button:hover { border-color: rgba(209,90,27,0.55); }
.eff-run-picker button.is-selected { border-color: var(--ic-accent); background: var(--ic-tint); }
.eff-run-picker span { display: block; font: 0.46rem/1.2 var(--mono); letter-spacing: 0.06rem; color: var(--ic-accent-t); }
.eff-run-picker b { display: block; margin: 0.18rem 0 0.06rem; font: 400 0.83rem/1.15 var(--serif); }
.eff-run-picker small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.48rem; opacity: 0.5; }
.eff-profile { display: flex; flex-direction: column; }
.eff-mix-row { display: grid; grid-template-columns: 1rem minmax(0,1fr); gap: 0.55rem; align-items: center; padding: 0.63rem 0; opacity: 0.48; transition: opacity 0.18s; }
.eff-mix-row:first-of-type { margin-top: 0.65rem; }
.eff-mix-row.is-selected { opacity: 1; }
.eff-mix-row > span { font: 0.49rem/1 var(--mono); color: var(--ic-accent-t); }
.eff-mix { height: 1.05rem; display: flex; overflow: hidden; border-radius: 3px; background: var(--paper-sunken); }
.eff-mix > i { width: calc(var(--w) * 1%); height: 100%; display: block; }
.mix-agent { background: #B9470B; }
.mix-small { background: #E56A1D; }
.mix-qwen { background: #D99962; }
.mix-screen { background: #94620A; }
.mix-code { background: #BEB5A6; }
.eff-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.42rem 0.65rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--ic-rule); }
.eff-legend span { display: flex; align-items: center; gap: 0.42rem; font-size: 0.5rem; opacity: 0.64; }
.eff-legend i { width: 0.55rem; height: 0.55rem; border-radius: 2px; flex-shrink: 0; }
.eff-primitives { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding: 0.65rem 0.75rem; }
.eff-primitives > div { margin-right: 0.25rem; }
.eff-primitives > div b { display: block; margin-top: 0.12rem; font: 400 0.72rem/1.2 var(--serif); }
.eff-primitives code { padding: 0.28rem 0.42rem; border: 1px solid var(--ic-rule); border-radius: 3px; background: var(--paper-sunken); font: 0.46rem/1.2 var(--mono); }
.eff-verified { display: flex; gap: 0.55rem; align-items: center; padding: 0.65rem 0.75rem; background: rgba(65,112,63,0.05); }
.eff-verified > span { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #41703F; color: var(--paper-raised); font-size: 0.62rem; flex-shrink: 0; }
.eff-verified p { margin: 0; font-size: 0.57rem; line-height: 1.4; }
.eff-verified b, .eff-verified small { display: block; }
.eff-verified b { font-weight: 500; }
.eff-verified small { margin-top: 0.12rem; opacity: 0.55; }

@media (max-width: 64rem) {
  .stage-hero { height: 32rem; min-height: 32rem; }
  .demo-shell { grid-template-columns: 10rem minmax(0,1fr) 12rem; }
  .demo-task { padding-left: 0.55rem; padding-right: 0.55rem; }
  .demo-plan li { font-size: 0.55rem; }
  .product-scene { min-height: 27rem; }
  .role-layout, .verify-layout { min-height: 24.35rem; }
  .workflow-grid article { min-height: 10.95rem; }
  .specialization-strip small { max-width: 25rem; }
  .gain-primitives code:nth-of-type(3) { display: none; }
  .automation-grid { gap: 0.55rem; padding: 0.75rem; }
  .automation-card { padding: 0.7rem; }
  .learning-layout { grid-template-columns: 12rem minmax(0,1fr); }
  .eff-dashboard { grid-template-columns: minmax(0,1.15fr) minmax(15rem,0.85fr); }
  .eff-curve { height: 7.25rem; }
}

@media (max-width: 48rem) {
  .hero-deck { font-size: 0.98rem; }
  .osworld-chart { min-height: 21rem; }
  .stage-hero { height: 34rem; min-height: 34rem; }
  .demo-shell { grid-template-columns: minmax(0,1fr) 10.5rem; }
  .demo-work-head h2 { font-size: 0.68rem; }
  .demo-controls { display: none; }
  .demo-rail { font-size: 0.7rem; }
  .demo-feed li { padding: 0.4rem; }
  .demo-feed time { display: none; }
  .demo-feed b { font-size: 0.5rem; }
  .demo-feed span { font-size: 0.54rem; }
  .demo-brief { width: 58%; }
  .demo-plan { padding-left: 0.6rem; padding-right: 0.6rem; }
  .demo-plan li { grid-template-columns: 0.7rem minmax(0,1fr); }
  .demo-plan li b { display: none; }
  .console-view-head { min-height: 4.2rem; padding: 0.75rem; }
  .console-filter { display: none; }
  .history-summary { padding: 0.65rem; gap: 0.4rem; }
  .history-summary > div { padding: 0.55rem; }
  .history-table { margin: 0 0.65rem 0.65rem; overflow-x: auto; }
  .history-row { min-width: 38rem; }
  .automation-grid { grid-template-columns: minmax(0,1fr); overflow-y: auto; }
  .automation-card p { min-height: 0; }
  .learning-layout { grid-template-columns: 11rem minmax(0,1fr); }
  .learning-path { grid-template-columns: minmax(0,1fr); }
  .learning-path > i { transform: rotate(90deg); text-align: center; }
  .eff-dashboard { padding: 0.55rem; gap: 0.5rem; }
  .eff-runtime, .eff-profile { padding: 0.6rem; }
  .eff-curve { height: 6.25rem; }
  .eff-primitives code:nth-of-type(n+4) { display: none; }

  .product-scene { min-height: 0; }
  .role-layout { display: block; min-height: 0; }
  .role-tabs { display: flex; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--ic-rule); }
  .role-tabs button { min-width: max-content; padding: 0.7rem; border-left: 0; border-bottom: 2px solid transparent; }
  .role-tabs button[aria-selected="true"] { border-bottom-color: var(--ic-accent); }
  .workflow-grid { grid-template-columns: minmax(0,1fr); }
  .workflow-grid article { min-height: 0; }
  .wf-icon { margin-bottom: 0.8rem; }
  .workflow-grid p { min-height: 0; }
  .specialization-strip { grid-template-columns: auto auto minmax(0,1fr); }
  .gain-primitives code:nth-of-type(n+3), .gain-primitives code:nth-of-type(n+3) + i { display: none; }
  .verify-layout { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .verify-origin { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .verify-origin > i { display: none; }
  .verify-origin > strong { grid-column: 1 / -1; }
  .evidence { border-left: 0; border-top: 1px solid var(--ic-rule); }
  .learn-grid { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .learn-arrow span { transform: rotate(90deg); }
}

@media (max-width: 36rem) {
  .stage-hero { height: 36rem; min-height: 36rem; }
  .demo-shell.console-pane[data-on] { display: flex; min-height: 0; }
  .demo-work { flex: 1; min-height: 0; }
  .demo-rail { display: none; }
  .demo-canvas { min-height: 11.5rem; }
  .demo-browser-frame { inset: 3% 2% 4%; }
  .demo-browser-frame .browser-tab { display: none; min-width: 7.5rem; max-width: calc(100% - 4.5rem); }
  .hero-demo[data-demo-frame="0"] .sf-browser-tab,
  .hero-demo[data-demo-frame="1"] .wd-browser-tab,
  .hero-demo[data-demo-frame="2"] .wd-browser-tab,
  .hero-demo[data-demo-frame="3"] .snow-browser-tab,
  .hero-demo[data-demo-frame="4"] .wd-browser-tab { display: flex; }
  .demo-browser-frame .browser-new { display: none; }
  .demo-browser-frame .browser-nav i:nth-child(2) { display: none; }
  .sf-layout, .wd-layout, .snow-layout { grid-template-columns: minmax(0,1fr); }
  .sf-sidebar, .wd-side, .snow-side { display: none; }
  .sf-main .sf-view-head { min-height: 2.6rem; padding: 0.3rem 0.4rem; }
  .sf-main .sf-view-actions span { display: none; }
  .sf-main .sf-view-actions .sf-export { display: block; }
  .sf-table .demo-tr { grid-template-columns: 0.25rem 1.45fr 0.75fr 0.82fr; gap: 0.25rem; min-height: 1.35rem; padding: 0.19rem 0.35rem; }
  .sf-table .demo-tr > span:nth-child(3), .sf-table .demo-tr > span:nth-child(4) { display: none; }
  .sf-table .demo-tr:nth-child(n+6) { display: none; }
  .wd-main .wd-content { padding: 0.3rem 0.4rem; }
  .wd-main .wd-kpis { margin-top: 0.22rem; gap: 0.2rem; }
  .wd-main .wd-kpis > div { padding: 0.2rem 0.25rem; }
  .wd-payees { display: none; }
  .wd-main .brief-copy { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.2rem; margin-top: 0.25rem; }
  .wd-main .brief-row, .wd-main .brief-foot { padding: 0.21rem; }
  .wd-main .wd-actions { display: none; }
  .snow-global > span:not(.snow-mark):not(.snow-user), .snow-global > em { display: none; }
  .snow-global > i { display: block; }
  .snow-work { grid-template-rows: auto auto minmax(5.2rem,1fr) auto; }
  .snow-editor { padding: 0.3rem; }
  .snow-editor ol { padding-left: 1.35rem; font-size: 0.32rem; }
  .snow-result-tabs span { display: none; }
  .snow-result-row { grid-template-columns: 1fr 0.9fr 0.9fr 0.65fr; font-size: 0.3rem; }
  .snow-result-row > :nth-child(4) { display: none; }
  .hero-demo .mock-seg button:last-child { display: none; }
  .sf-tabs span:nth-of-type(n+4) { display: none; }
  .sf-global-icon { display: none; }
  .demo-plan li { font-size: 0.53rem; }
  .history-summary { grid-template-columns: minmax(0,1fr); overflow-y: auto; }
  .history-summary > div:nth-child(n+3) { display: none; }
  .learning-layout { grid-template-columns: minmax(0,1fr); overflow-y: auto; }
  .learning-list { display: none; }
  .eff-head-stat { display: none; }
  .eff-dashboard { display: block; overflow: hidden; }
  .eff-runtime { height: 100%; }
  .eff-profile, .eff-primitives, .eff-verified { display: none; }
  .eff-curve { height: 7.5rem; }
  .role-pane { padding: 0.75rem; }
  .specialization-strip { grid-template-columns: minmax(0,1fr); gap: 0.3rem; }
  .specialization-strip > i { display: none; }
  .gain-primitives { margin: 0 0.65rem 0.65rem; }
  .gain-primitives code:nth-of-type(n+2), .gain-primitives code:nth-of-type(n+2) + i { display: none; }
  .verify-origin { grid-template-columns: minmax(0,1fr); }
  .verify-origin > strong { grid-column: auto; }
  .osworld-proof { margin-top: 2rem; }
  .osworld-chart { min-height: 0; gap: 1.15rem; padding: 1.1rem; }
  .osworld-row { grid-template-columns: minmax(0,1fr) 3.3rem; gap: 0.45rem 0.7rem; }
  .osworld-row > div { grid-column: 1 / -1; }
  .osworld-row > span { grid-column: 1; }
  .osworld-row > strong { grid-column: 2; }
  .demo-complete-signal { top: 0.55rem; right: 0.55rem; padding: 0.3rem; }
  .demo-complete-track { display: none; }
  .demo-complete-signal > span { width: 1.5rem; height: 1.5rem; }
}

/* The 320px case loses too much usable console width to the stage's desktop
   inset. Preserve the frame, but spend the space on the navigation and work
   surface so all four console tabs remain reachable. */
@media (max-width: 22rem) {
  .stage-hero { padding: 1rem; }
  .hero-demo .mock-bar { gap: 0.25rem; padding-left: 0.4rem; padding-right: 0.4rem; }
  .hero-demo .mock-word { display: none; }
  .hero-demo .mock-seg button { padding-left: 0.18rem; padding-right: 0.18rem; font-size: 0.5rem; letter-spacing: 0.025rem; }
  .hero-demo .mock-nav { gap: 0.58rem; padding-left: 0.55rem; padding-right: 0.55rem; overflow-x: auto; scrollbar-width: none; }
  .hero-demo .mock-nav::-webkit-scrollbar { display: none; }
  .hero-demo .mock-nav button { font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-spinner, .demo-plan li.is-active .demo-step-mark,
  .role-pane[data-on], .role-pane[data-on] .workflow-grid article,
  .role-pane[data-on] .specialization-strip { animation: none !important; }
  .demo-pointer { transition: none !important; }
  .demo-pointer::after { animation: none !important; opacity: 0; }
  .gain-row, .gain-row > div i, .gain-mix > i,
  .verify-scene [data-verify-source], .verify-scene [data-verify-criterion],
  .verify-scene [data-verify-evidence], .verify-scene [data-verify-held] { transition: none !important; }
  .osworld-proof.is-visible .osworld-row > span i,
  .osworld-proof .osworld-row > span i { transform: scaleX(1); }
}

/* ====================== CODED APPLICATION FIDELITY PASS ======================
   These are intentionally three separate interface systems. The shared browser
   is only the host; every product below keeps the hierarchy, density, controls,
   and visual language of the application Icarus is operating. */

.demo-browser-frame { border-radius: 8px 8px 6px 6px; }
.demo-browser-frame .demo-browserchrome { background: #dfe3e7; color: #30353a; }
.demo-browser-frame .demo-browsertabs { min-height: 1.48rem; padding: .2rem .35rem 0; gap: .18rem; }
.demo-browser-frame .browser-dots { margin: 0 .2rem 0 .12rem; }
.demo-browser-frame .browser-tab { height: 1.22rem; border-radius: 6px 6px 0 0; }
.demo-browser-frame .browser-tab b { font: 500 .37rem/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.demo-browser-frame .demo-browserbar { min-height: 1.35rem; padding: .23rem .45rem; border-top: 1px solid rgba(0,0,0,.04); background: #fff; }
.demo-browser-frame .browser-address { border: 1px solid #d9dde1; background: #f1f3f4; box-shadow: inset 0 1px 1px rgba(0,0,0,.025); }

/* Salesforce Lightning */
.sf-window { font-family: Arial,"Salesforce Sans",sans-serif; background: #f3f3f3; color: #181818; }
.sf-window .sf-global { min-height: 1.92rem; display: flex; align-items: center; gap: .48rem; padding: .26rem .55rem; border: 0; border-bottom: 1px solid #c9c9c9; background: #fff; color: #181818; }
.sf-waffle { width: .83rem; height: .83rem; display: grid; grid-template-columns: repeat(3,1fr); gap: .095rem; padding: .12rem; border: 1px solid #c9c9c9; border-radius: 3px; }
.sf-waffle i { width: .095rem; height: .095rem; border-radius: 50%; background: #0176d3; }
.sf-cloud { position: relative; width: 1.25rem; height: .72rem; margin-right: .05rem; }
.sf-cloud::before,.sf-cloud::after,.sf-cloud i { content:""; position:absolute; background:#fff; }
.sf-cloud::before { left:.13rem; bottom:.08rem; width:1.02rem; height:.42rem; border-radius:99px; background:#0176d3; }
.sf-cloud::after { left:.35rem; top:.03rem; width:.54rem; height:.54rem; border-radius:50%; background:#0176d3; }
.sf-cloud i { left:.67rem; top:.16rem; width:.39rem; height:.39rem; border-radius:50%; background:#0176d3; }
.sf-window .sf-search { position: relative; flex: 0 1 18rem; height: 1.08rem; display: flex; align-items:center; margin: 0 auto; padding: 0 .58rem 0 1.5rem; border: 1px solid #c9c9c9; border-radius: 4px; background: #f3f3f3; color: #5c5c5c; font-size: .38rem; }
.sf-window .sf-search i { position:absolute; left:.62rem; width:.42rem; height:.42rem; border:1px solid #706e6b; border-radius:50%; }
.sf-window .sf-search i::after { content:""; position:absolute; right:-.16rem; bottom:-.08rem; width:.2rem; height:1px; transform:rotate(45deg); background:#706e6b; }
.sf-global-icon { min-width: .72rem; height: .72rem; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:#706e6b; font-size:.47rem; }
.sf-global-icon.sf-bell { font-size:.29rem; }
.sf-avatar { width:.86rem; height:.86rem; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; background:#7f8de1; color:#fff; box-shadow:0 0 0 1px #c9c9c9; font-size:.3rem; }
.sf-tabs { min-height: 1.55rem; display:flex; align-items:stretch; gap:0; padding:0 .45rem; border-bottom:1px solid #c9c9c9; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.sf-tabs > b { display:flex; align-items:center; min-width:3.75rem; padding:0 .58rem; border-right:1px solid #e5e5e5; font-size:.56rem; font-weight:500; }
.sf-tabs > span { position:relative; display:flex; align-items:center; padding:0 .52rem; color:#181818; font-size:.38rem; white-space:nowrap; }
.sf-tabs > span i { margin-left:.2rem; color:#747474; font-size:.27rem; font-style:normal; }
.sf-tabs > span.is-current::after { content:""; position:absolute; left:.4rem; right:.4rem; bottom:0; height:2px; background:#0b5cab; }
.sf-tabs > em { flex:1; }
.sf-tabs .sf-edit { display:grid; place-items:center; width:1.15rem; color:#0b5cab; font-style:normal; }
.sf-main { min-height:0; flex:1; overflow:hidden; display:flex; flex-direction:column; margin:.55rem .62rem .62rem; border:1px solid #c9c9c9; border-radius:4px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.sf-object-head { min-height:2.72rem; display:flex; align-items:center; padding:.42rem .62rem .3rem; }
.sf-object-icon { width:1.55rem; height:1.55rem; display:grid; place-items:center; margin-right:.48rem; border-radius:3px; background:#fcb95b; color:#fff; font-size:.66rem; }
.sf-object-head > div:nth-child(2) { display:flex; flex-direction:column; line-height:1.12; }
.sf-object-head > div:nth-child(2) > span { color:#444; font-size:.34rem; }
.sf-object-head > div:nth-child(2) > b { margin-top:.12rem; font-size:.67rem; font-weight:400; }
.sf-object-head > div:nth-child(2) > b i { color:#706e6b; font-size:.28rem; font-style:normal; }
.sf-pin { width:.8rem; height:.8rem; display:grid; place-items:center; margin-left:.42rem; border:1px solid #c9c9c9; border-radius:3px; color:#0b5cab; font-size:.35rem; }
.sf-view-actions { display:flex; margin-left:auto; border:1px solid #c9c9c9; border-radius:4px; overflow:hidden; }
.sf-view-actions span { padding:.3rem .47rem; border:0; border-left:1px solid #c9c9c9; border-radius:0; background:#fff; color:#0b5cab; font-size:.35rem; }
.sf-view-actions span:first-child { border-left:0; }
.sf-list-meta { min-height:1.65rem; display:flex; align-items:center; gap:.5rem; padding:.18rem .6rem .28rem; border-bottom:1px solid #c9c9c9; }
.sf-list-meta > span { color:#706e6b; font-size:.32rem; white-space:nowrap; }
.sf-list-tools { min-height:0; margin-left:auto; padding:0; border:0; gap:.14rem; }
.sf-list-tools .sf-list-search { width:6.3rem; height:.88rem; display:flex; align-items:center; margin:0 .1rem 0 0; padding:0 .35rem 0 1.08rem; border:1px solid #747474; border-radius:3px; color:#706e6b; font-size:.32rem; }
.sf-list-tools .sf-list-search i { position:absolute; margin-left:-.65rem; width:.3rem; height:.3rem; border:1px solid #706e6b; border-radius:50%; }
.sf-list-tools > i { width:.82rem; height:.82rem; border-color:#c9c9c9; border-radius:3px; color:#0b5cab; font-size:.34rem; }
.sf-table { min-height:0; overflow:hidden; }
.sf-table .demo-tr { grid-template-columns:.34rem 1.35fr 1.08fr .75fr .72fr .72fr .88fr .25rem; gap:.42rem; min-height:1.56rem; align-items:center; padding:.24rem .52rem; border-bottom:1px solid #e5e5e5; color:#181818; font-size:.36rem; }
.sf-table .demo-tr:hover { background:#f3f3f3; }
.sf-table .demo-th { min-height:1.08rem; background:#f3f3f3; color:#444; font-size:.3rem; font-weight:700; }
.sf-table .demo-tr b,.sf-table .demo-tr a { color:#0176d3; font-size:.37rem; font-weight:400; text-decoration:none; }
.sf-table .demo-tr > i { color:#706e6b; font-style:normal; font-size:.3rem; }
.sf-table .sf-box { width:.39rem; height:.39rem; border:1px solid #747474; border-radius:2px; background:#fff; }
.sf-table .demo-tr.is-selected { background:#eef4ff; box-shadow:inset 3px 0 #0176d3; }
.sf-table .demo-tr.is-selected .sf-box { position:relative; border-color:#0176d3; background:#0176d3; }
.sf-table .demo-tr.is-selected .sf-box::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:.25rem; }

/* Workday compensation review */
.wd-window { font-family:Arial,"Segoe UI",sans-serif; color:#233746; background:#fff; }
.wd-window .wd-global { min-height:2.02rem; display:flex; align-items:center; gap:.42rem; padding:.24rem .78rem; border:0; background:#fff; box-shadow:0 1px 4px rgba(26,52,70,.22); z-index:2; }
.wd-window .wd-brand { position:relative; min-width:4.1rem; height:1.35rem; display:flex; align-items:flex-end; justify-content:center; padding-bottom:.02rem; margin-right:.28rem; }
.wd-window .wd-brand i { position:absolute; top:.02rem; left:50%; width:1.5rem; height:.52rem; margin-left:-.75rem; border:0; border-top:3px solid #f5a623; border-radius:50% 50% 0 0; }
.wd-window .wd-brand i::before,.wd-window .wd-brand i::after { content:""; position:absolute; top:-.15rem; width:.17rem; height:.17rem; border-radius:50%; background:#f5a623; }
.wd-window .wd-brand i::before { left:-.02rem; }.wd-window .wd-brand i::after { right:-.02rem; }
.wd-window .wd-brand b { color:#0875c1; font-size:.69rem; font-weight:700; letter-spacing:-.02rem; }
.wd-window .wd-search { position:relative; width:18rem; max-width:45%; height:1.05rem; display:flex; align-items:center; padding:0 .55rem 0 1.45rem; border:1px solid #a9b8c2; border-radius:99px; background:#f4f7f9; color:#5f7280; font-size:.36rem; }
.wd-window .wd-search i { position:absolute; left:.62rem; width:.38rem; height:.38rem; border:1px solid #526b7a; border-radius:50%; }
.wd-window .wd-search i::after { content:""; position:absolute; right:-.14rem; bottom:-.08rem; width:.18rem; height:1px; transform:rotate(45deg); background:#526b7a; }
.wd-window .wd-icon { width:.8rem; height:.8rem; display:grid; place-items:center; margin-left:.08rem; border:0; background:transparent; color:#506d7d; font-size:.42rem; }
.wd-window .wd-search + .wd-icon { margin-left:auto; }
.wd-window .wd-avatar { width:.88rem; height:.88rem; display:grid; place-items:center; margin-left:.18rem; border-radius:50%; background:#f59a23; color:#fff; font-size:.3rem; }
.wd-main { min-height:0; flex:1; display:flex; flex-direction:column; overflow:hidden; }
.wd-bluebar { min-height:1.66rem; display:flex; align-items:center; gap:.48rem; padding:.3rem .72rem; background:#0875c1; color:#fff; }
.wd-bluebar .wd-back { font-size:.9rem; line-height:.5; }.wd-bluebar b { font-size:.48rem; }.wd-bluebar > span:not(.wd-back):not(.wd-related) { opacity:.76; font-size:.34rem; }.wd-bluebar i { flex:1; }.wd-bluebar .wd-related { padding:.19rem .4rem; border:1px solid rgba(255,255,255,.6); border-radius:3px; font-size:.32rem; }
.wd-content { min-height:0; flex:1; overflow:hidden; padding:.5rem .8rem .42rem; background:#f7f9fa; }
.wd-title { display:flex; align-items:center; }
.wd-title > div { display:flex; flex-direction:column; }.wd-title > div > span { color:#687e8d; font-size:.28rem; font-weight:700; letter-spacing:.035rem; }.wd-title > div > b { margin-top:.07rem; color:#183b50; font-size:.68rem; font-weight:500; }.wd-title > div > small { margin-top:.07rem; color:#70828e; font-size:.3rem; }
.wd-title > em { margin-left:auto; padding:.17rem .38rem; border-radius:99px; background:#fff2d6; color:#7a5100; font-size:.3rem; font-style:normal; font-weight:600; }
.wd-subtabs { display:flex; gap:1rem; margin-top:.35rem; border-bottom:1px solid #cfd8de; }.wd-subtabs b,.wd-subtabs span { position:relative; padding:.22rem .03rem .32rem; color:#58707f; font-size:.32rem; font-weight:400; }.wd-subtabs b { color:#0875c1; font-weight:600; }.wd-subtabs b::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#0875c1; }
.wd-main .wd-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; margin-top:.38rem; }
.wd-main .wd-kpis > div { min-height:2.45rem; display:grid; grid-template-columns:2.05rem minmax(0,1fr); grid-template-rows:auto auto auto; align-content:center; padding:.24rem .4rem; border:1px solid #d7dfe4; border-radius:3px; background:#fff; }
.wd-main .wd-kpis > div::before { display:none; }
.wd-kpis > div > i { grid-row:1/4; position:relative; width:1.65rem; height:1.65rem; display:grid; place-items:center; align-self:center; border-radius:50%; background:conic-gradient(#00a3b4 calc(var(--wd-fill)*1%),#e2e9ed 0); font-style:normal; }
.wd-kpis > div > i::after { content:""; position:absolute; inset:.23rem; border-radius:50%; background:#fff; }.wd-kpis > div > i b { position:relative; z-index:1; color:#243f4f; font-size:.38rem; }
.wd-kpis > div:nth-child(2) > i { background:conic-gradient(#3e8ed0 calc(var(--wd-fill)*1%),#e2e9ed 0); }.wd-kpis > div:nth-child(3) > i { background:conic-gradient(#f5a623 calc(var(--wd-fill)*1%),#e2e9ed 0); }
.wd-main .wd-kpis span { color:#6b7f8b; font-size:.25rem; font-weight:700; letter-spacing:.025rem; }.wd-main .wd-kpis strong { color:#1f4053; font-size:.38rem; font-weight:600; }.wd-main .wd-kpis small { color:#758691; font-size:.27rem; }
.wd-grid-toolbar { min-height:1.25rem; display:flex; align-items:center; gap:.25rem; margin-top:.4rem; padding:.18rem .05rem; border-top:0; }.wd-grid-toolbar > div { display:flex; align-items:baseline; gap:.42rem; }.wd-grid-toolbar b { color:#213e50; font-size:.41rem; }.wd-grid-toolbar div span { color:#6e808c; font-size:.3rem; }.wd-grid-toolbar .wd-grid-search { width:5.5rem; margin-left:auto; padding:.2rem .35rem; border:1px solid #b7c2c9; border-radius:3px; background:#fff; color:#6f7f89; font-size:.29rem; }.wd-grid-toolbar > i { width:.72rem; height:.72rem; display:grid; place-items:center; border:1px solid #b7c2c9; border-radius:3px; background:#fff; color:#436477; font-size:.3rem; font-style:normal; }.wd-grid-toolbar em { margin-left:.1rem; border-color:#0875c1; border-radius:3px; background:#0875c1; color:#fff; }
.wd-payees { margin-top:0; border:1px solid #cfd8de; border-radius:2px; box-shadow:0 1px 2px rgba(28,55,72,.05); }
.wd-payees > div { grid-template-columns:1.35fr 1fr .8fr .62fr .8fr .57fr .12fr; gap:.28rem; min-height:1.45rem; padding:.19rem .32rem; border-top-color:#e0e6e9; font-size:.32rem; }
.wd-payees .wd-payee-head { min-height:.92rem; background:#e9eef1; color:#536b7a; font:700 .27rem/1.2 Arial,sans-serif; }
.wd-payees > div > span:first-child { position:relative; padding-left:1.05rem; }.wd-payees .wd-payee-head > span:first-child { padding-left:0; }.wd-payees b { color:#0875c1; font-size:.33rem; font-weight:500; }.wd-payees small { color:#73848e; font-size:.25rem; }.wd-payees em { padding:.1rem .18rem; border:0; background:transparent; color:#277645; font-size:.27rem; font-weight:600; }.wd-payees > div > i:last-child { color:#607784; font-style:normal; }
.wd-photo { position:absolute; left:0; top:50%; width:.75rem; height:.75rem; display:grid; place-items:center; border-radius:50%; transform:translateY(-50%); background:#507f9d; color:#fff; font-size:.23rem; font-style:normal; }.wd-p2{background:#7b6fa6}.wd-p3{background:#a56955}
.wd-main .brief-copy { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.25rem; margin-top:.3rem; }.wd-main .brief-row,.wd-main .brief-foot { padding:.25rem .28rem; border-color:#d7dfe4; }.wd-main .brief-row span,.wd-main .brief-foot span { font-size:.29rem; }.wd-main .brief-row em,.wd-main .brief-foot strong { font-size:.27rem; }.wd-main .wd-actions { margin-top:.25rem; }

/* Snowflake Workspaces */
.snow-window { font-family:Inter,Arial,sans-serif; color:#172b35; background:#fff; }
.snow-shell { min-height:0; flex:1; display:grid; grid-template-columns:2rem minmax(0,1fr); }
.snow-rail { min-height:0; display:flex; flex-direction:column; align-items:center; gap:.28rem; padding:.35rem .24rem; background:#172b35; color:#d9e7ec; }
.snow-rail .snow-mark { display:grid; place-items:center; width:1.15rem; height:1.15rem; margin-bottom:.22rem; color:#29b5e8; font-size:.8rem; }.snow-rail > i { width:1.15rem; height:1.15rem; display:grid; place-items:center; border-radius:4px; color:#b9cbd2; font-size:.42rem; font-style:normal; }.snow-rail > i.is-current { background:#284653; color:#fff; box-shadow:inset 2px 0 #29b5e8; }.snow-rail > em { flex:1; }.snow-rail .snow-user { width:.82rem; height:.82rem; display:grid; place-items:center; border-radius:50%; background:#29b5e8; color:#102d38; font-size:.26rem; }
.snow-app { min-width:0; min-height:0; display:flex; flex-direction:column; }
.snow-window .snow-global { min-height:1.55rem; display:flex; align-items:center; gap:.7rem; padding:.2rem .48rem; border-bottom:1px solid #d9e2e6; background:#fff; }.snow-window .snow-global b { color:#172b35; font-size:.43rem; }.snow-window .snow-global > span { color:#536975; font-size:.34rem; }.snow-window .snow-global > i { display:block; flex:1; }.snow-window .snow-global .snow-role { padding:.19rem .34rem; border:1px solid #ced9de; border-radius:3px; font-size:.29rem; }.snow-window .snow-global .snow-help { width:.7rem;height:.7rem;display:grid;place-items:center;border:1px solid #b8c7ce;border-radius:50%; }
.snow-title { min-height:1.55rem; display:flex; align-items:center; gap:.28rem; padding:.2rem .42rem; border-bottom:1px solid #dbe3e7; background:#f7f9fa; }.snow-title > div { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:.3rem; }.snow-title .snow-back { grid-row:1/3; color:#536c79; font-size:.75rem; }.snow-title b { font-size:.43rem; }.snow-title small { color:#70828c; font-size:.27rem; }.snow-title > span:not(.snow-back) { padding:.2rem .36rem; border:1px solid #c8d4da; border-radius:3px; background:#fff; color:#3b5c6b; font-size:.3rem; }.snow-title > div + span { margin-left:auto; }
.snow-layout { min-height:0; flex:1; display:grid; grid-template-columns:8.5rem minmax(0,1fr); }
.snow-side { min-height:0; overflow:hidden; padding:0; border-right:1px solid #dbe3e7; background:#f7f9fa; }.snow-side-tabs { height:1.25rem; display:flex; align-items:end; gap:.75rem; padding:0 .5rem; border-bottom:1px solid #dbe3e7; }.snow-side-tabs b,.snow-side-tabs span { position:relative; padding:.28rem .02rem; color:#59707c; font-size:.31rem; }.snow-side-tabs b { color:#172b35; }.snow-side-tabs b::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#29b5e8; }.snow-side-actions { display:flex; align-items:center; gap:.2rem; padding:.35rem .45rem .2rem; }.snow-side-actions small { overflow:hidden; flex:1; color:#667b86; font-size:.25rem; font-weight:700; text-overflow:ellipsis; }.snow-side-actions i { width:.55rem;height:.55rem;display:grid;place-items:center;color:#4d6976;font-size:.3rem;font-style:normal; }
.snow-side > span,.snow-side > em { display:block; padding:.19rem .42rem; color:#4f6570; font-size:.3rem; font-style:normal; white-space:nowrap; }.snow-side > em { padding-left:.78rem; }.snow-side > em b { margin-right:.22rem; color:#29a2ce; font-size:.23rem; }.snow-side > em.is-file { background:#e5f3f8; color:#155d78; box-shadow:inset 2px 0 #29b5e8; }.snow-db-title { margin:.5rem .42rem .15rem; padding-top:.35rem; border-top:1px solid #dbe3e7; color:#6a7d87; font-size:.24rem; font-weight:700; letter-spacing:.025rem; }
.snow-work { min-width:0; min-height:0; display:grid; grid-template-rows:1.3rem 1.25rem minmax(5rem,1fr) auto; }
.snow-tabs { min-height:0; padding:0 .35rem; gap:.2rem; background:#fff; }.snow-tabs span { height:100%; display:flex; align-items:center; gap:.25rem; padding:0 .35rem; font-size:.31rem; }.snow-tabs span.is-current { border-bottom-color:#29b5e8; }.snow-tabs span i { color:#29a8d4;font-size:.24rem;font-style:normal;font-weight:700; }.snow-tabs span b { margin-left:.15rem;color:#7b8b93;font-size:.28rem; }.snow-tabs > em { flex:1; }.snow-tabs button { padding:.22rem .48rem; border:0; border-radius:3px; background:#155e75; color:#fff; font-size:.3rem;font-weight:600; }
.snow-context { min-height:0; display:flex; align-items:center; gap:.22rem; padding:.18rem .42rem; background:#f7f9fa; }.snow-context span { padding:.15rem .27rem; border-color:#cdd8dd; font-size:.26rem; }.snow-context i { flex:1; }.snow-context small { color:#71838c; font-size:.25rem; }
.snow-editor { padding:.38rem .5rem; border-bottom:1px solid #314752; background:#13232b; }.snow-editor ol { margin:0; padding-left:1.55rem; font:.35rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }.snow-editor li::marker { color:#627985; }.snow-editor b { color:#58c7e8; }.snow-editor em { color:#b8d982; }
.snow-result { min-height:3.4rem; }.snow-result-tabs { padding:.25rem .48rem; }.snow-result-tabs b,.snow-result-tabs span { font-size:.3rem; }.snow-result-tabs b { color:#155f78; }.snow-result-tabs em { display:flex;align-items:center;gap:.2rem;color:#36724c;font-size:.27rem; }.snow-result-tabs em i { width:.31rem;height:.31rem;border-radius:50%;background:#42a562; }.snow-result-row { grid-template-columns:1.1fr 1fr 1fr .65fr .7fr; padding:.24rem .48rem; font-size:.3rem; }.snow-result-head { font-size:.25rem; }.snow-result-row strong { color:#287044; }.snow-result-foot { display:flex;align-items:center;gap:.5rem;padding:.18rem .48rem;border-top:1px solid #e4e9eb;color:#71818a;font-size:.24rem; }.snow-result-foot i { flex:1; }

/* ====================== OFFICIAL-REFERENCE APPLICATION PASS ====================== */
.sf-logo { width:1.42rem; height:.98rem; flex:0 0 auto; fill:#0d9dda; }
.sf-window .sf-global { min-height:1.72rem; padding:.18rem .52rem; gap:.42rem; }
.sf-window .sf-search { height:1.02rem; max-width:18.5rem; }
.sf-tabs { min-height:1.48rem; padding:0; border-bottom:2px solid #0176d3; }
.sf-tabs > b { min-width:3.4rem; padding:0 .5rem; border-left:1px solid #d8dde6; font-size:.52rem; }
.sf-tabs > span { padding:0 .48rem; color:#16325c; }
.sf-tabs > span.is-current { background:#f4f6f9; }
.sf-main { margin:0; border:0; border-radius:0; box-shadow:none; background:#f4f6f9; }
.sf-object-head { min-height:2.75rem; padding:.42rem .65rem .24rem; background:#f4f6f9; }
.sf-object-icon svg { width:1.1rem; height:1.1rem; fill:#fff; }
.sf-object-head > div:nth-child(2) > span { color:#54698d; font-size:.31rem; letter-spacing:.04rem; text-transform:uppercase; }
.sf-object-head > div:nth-child(2) > b { color:#16325c; }
.sf-pin { position:relative; font-size:0; }.sf-pin::before{content:"";width:.23rem;height:.23rem;border-radius:50%;background:#0070d2}.sf-pin::after{content:"";position:absolute;left:50%;top:.38rem;width:1px;height:.28rem;background:#0070d2;transform:rotate(35deg)}
.sf-view-actions { border:0; overflow:visible; gap:.2rem; }
.sf-view-actions span { border:1px solid #d8dde6!important; border-radius:3px; color:#0070d2; }
.sf-view-actions span:nth-child(2),.sf-view-actions span:nth-child(3) { display:none; }
.sf-list-meta { background:#f4f6f9; }
.sf-table { background:#fff; border-top:1px solid #d8dde6; }
.sf-table .demo-th { background:#fff; color:#54698d; letter-spacing:.035rem; text-transform:uppercase; }
.sf-table .demo-tr { color:#16325c; border-bottom-color:#d8dde6; }
.sf-table .demo-tr b,.sf-table .demo-tr a { color:#0070d2; }

.wd-window { background:#fff; color:#202020; }
.wd-window .wd-global { min-height:1.3rem; padding:.14rem .55rem; gap:.45rem; box-shadow:none; border-bottom:1px solid #e5e8ea; }
.wd-menu { display:flex; align-items:center; gap:.18rem; color:#46525a; font-size:.23rem; }
.wd-menu i,.wd-menu i::before,.wd-menu i::after { width:.42rem; height:1px; display:block; background:#53636d; }
.wd-menu i { position:relative; }.wd-menu i::before,.wd-menu i::after { content:""; position:absolute; left:0; }.wd-menu i::before{top:-.14rem}.wd-menu i::after{top:.14rem}
.wd-window .wd-brand { min-width:1.2rem; width:1.2rem; height:.92rem; margin:0; padding:0; align-items:center; }
.wd-window .wd-brand i { top:.04rem; width:.8rem; height:.35rem; margin-left:-.4rem; border-top-width:2px; }
.wd-window .wd-brand i::before,.wd-window .wd-brand i::after { width:.1rem; height:.1rem; top:-.09rem; }
.wd-window .wd-brand b { padding-top:.2rem; color:#147bc1; font-size:.32rem; }
.wd-window .wd-search { width:13.5rem; height:.78rem; margin:0 auto; border:0; background:#f0f2f3; font-size:.27rem; }
.wd-window .wd-search i { left:.52rem; width:.29rem; height:.29rem; }
.wd-window .wd-icon { position:relative; width:.55rem; height:.55rem; margin:0; }
.wd-chat::before { content:""; width:.28rem;height:.22rem;border:1px solid #52636d;border-radius:50%; }
.wd-alert::before { content:""; width:.23rem;height:.27rem;border:1px solid #52636d;border-radius:.18rem .18rem .08rem .08rem; }
.wd-inbox::before { content:""; width:.29rem;height:.22rem;border:1px solid #52636d;border-radius:1px; }
.wd-inbox i { position:absolute; right:-.1rem; top:-.08rem; width:.3rem;height:.3rem;display:grid;place-items:center;border-radius:50%;background:#e5483e;color:#fff;font-size:.18rem;font-style:normal; }
.wd-window .wd-avatar { width:.62rem;height:.62rem;font-size:.22rem; }
.wd-bluebar { min-height:1.35rem; padding:.22rem .62rem; gap:.35rem; background:linear-gradient(90deg,#2167d5,#357de4); }
.wd-bluebar b { font-size:.36rem; }.wd-bluebar > span { color:#eaf2ff!important; opacity:1!important; font-size:.27rem!important; }.wd-bluebar i { flex:1; }
.wd-sheet-icon,.wd-expand-icon { position:relative; width:.5rem;height:.5rem;flex:0 0 auto!important; }
.wd-sheet-icon::before { content:""; position:absolute; inset:.05rem .1rem; border:1px solid #fff; }.wd-expand-icon::before,.wd-expand-icon::after{content:"";position:absolute;width:.22rem;height:.22rem;border-color:#fff;border-style:solid}.wd-expand-icon::before{left:0;top:0;border-width:1px 0 0 1px}.wd-expand-icon::after{right:0;bottom:0;border-width:0 1px 1px 0}
.wd-content { padding:.42rem .72rem .28rem; overflow:hidden; background:#fff; }
.wd-review-head { display:flex; align-items:center; min-height:.7rem; }.wd-review-head b{font-size:.31rem;font-weight:600}.wd-review-head span{margin-left:auto;padding:.1rem .28rem;border-radius:99px;background:#e8f1fb;color:#155ea8;font-size:.24rem;font-weight:600;text-transform:uppercase}
.wd-main .wd-kpis { display:flex; gap:1rem; margin-top:.12rem; }
.wd-main .wd-kpis > div { min-width:7.6rem; min-height:2.45rem; display:grid; grid-template-columns:1.72rem 2.2rem minmax(0,1fr); grid-template-rows:1fr; align-items:center; align-content:center; gap:.22rem; padding:.15rem 0; border:0; background:#fff; }
.wd-kpis > div > i { grid-row:auto; width:1.42rem;height:1.42rem; }
.wd-kpis > div > i::after { inset:.18rem; }.wd-kpis > div > i b { font-size:.26rem; color:#6aa93b; }
.wd-kpis > div:nth-child(1) > i { background:conic-gradient(#ff671f calc(var(--wd-fill)*1%),#e3e7e9 0); }.wd-kpis > div:nth-child(1) > i b{color:#ff671f}.wd-kpis > div:nth-child(2) > i,.wd-kpis > div:nth-child(3) > i { background:conic-gradient(#79bd43 calc(var(--wd-fill)*1%),#e3e7e9 0); }
.wd-main .wd-kpis span { color:#323c42; font-size:.28rem; font-weight:500; text-transform:none; letter-spacing:0; }
.wd-main .wd-kpis strong { color:#64727a; font-size:.23rem; line-height:1.35; }.wd-main .wd-kpis strong em { color:#76b83d; font-style:normal; }.wd-main .wd-kpis small { align-self:end; color:#8a969d; font-size:.2rem; }
.wd-review-actions { display:flex; flex-direction:column; align-items:flex-start; gap:.28rem; margin:.3rem 0 .32rem; }.wd-review-actions button{min-width:2.7rem;padding:.16rem .45rem;border:1px solid #95a2aa;border-radius:99px;background:#fff;color:#26343c;font-size:.23rem}.wd-review-actions button i{display:inline-block;margin-left:.2rem;border:3px solid transparent;border-top-color:#596a74;transform:translateY(.15rem)}
.wd-events-title { display:flex; align-items:center; gap:.25rem; min-height:.7rem; border-bottom:1px solid #d6dce0; }.wd-events-title b{font-size:.27rem}.wd-events-title a{color:#147bc1;font-size:.24rem}.wd-events-title>i{flex:1}.wd-table-actions,.wd-filter-icon{width:.5rem;height:.5rem;position:relative}.wd-table-actions::before{content:"▦";color:#607680;font-size:.32rem}.wd-filter-icon::before{content:"";position:absolute;left:.08rem;top:.09rem;border:4px solid transparent;border-top:0;border-bottom:6px solid #667780;transform:rotate(180deg)}
.wd-event-tabs { min-height:.86rem; display:grid; grid-template-columns:1.15fr .8fr .75fr .75fr .75fr .8fr; align-items:end; border-bottom:1px solid #cbd3d8; }.wd-event-tabs b,.wd-event-tabs span{padding:.25rem .22rem;color:#4b5c66;font-size:.22rem;font-weight:400}.wd-event-tabs b{border-bottom:2px solid #2f7ddd;color:#1d66b3;font-weight:600}
.wd-payees { margin:0; border:0; border-radius:0; box-shadow:none; overflow:hidden; }
.wd-payees > div { grid-template-columns:1.12fr 1.05fr .38fr 1.15fr .82fr .83fr .9fr; gap:.18rem; min-height:1.42rem; padding:.16rem .2rem; border:0; border-bottom:1px solid #dce2e5; font-size:.22rem; }
.wd-payees .wd-payee-head { min-height:.82rem; background:#edf1f3; color:#44555e; font:500 .2rem/1.15 Arial,sans-serif; }
.wd-payees > div > span:first-child { padding-left:.82rem; }.wd-payees .wd-payee-head > span:first-child { padding-left:0; }
.wd-photo { width:.62rem;height:.62rem;font-size:.18rem}.wd-payees b{font-size:.23rem}.wd-payees small{font-size:.18rem;line-height:1.25}.wd-payees .wd-warning{width:.32rem;height:.32rem;display:grid;place-items:center;border-radius:2px;background:#ffc928;color:#6d5300;font-weight:700}.wd-payees .wd-entry{padding:.13rem .18rem;border:1px solid #9db5c3;background:#fff;text-align:right}
.wd-main .brief-copy,.wd-main .wd-actions { display:none; }
.hero-demo[data-demo-frame="2"] .wd-payees [data-wd-worker],.hero-demo[data-demo-frame="4"] .wd-payees [data-wd-worker] { background:#eef8fc; box-shadow:inset 2px 0 #2a8dcb; }
.hero-demo[data-demo-frame="4"] .wd-review-head span { background:#e5f5e9;color:#28713e; }

.snow-window { background:#fff; color:#303b43; font-family:Arial,sans-serif; }
.snow-window .snow-layout { min-height:0; flex:1; display:grid; grid-template-columns:9.7rem minmax(0,1fr); }
.snow-window .snow-side { display:block; min-height:0; overflow:hidden; padding:0 .38rem; border-right:1px solid #dfe4e8; background:#f7f8fa; }
.snow-workspace-title { min-height:1.3rem;display:flex;align-items:center;gap:.25rem;border-bottom:1px solid #e0e5e8}.snow-workspace-title b{font-size:.31rem}.snow-workspace-title i{margin-left:auto;font-style:normal}.snow-workspace-title span{color:#74828b;font-size:.35rem}
.snow-side-tabs { height:1.12rem; padding:0; gap:.3rem; align-items:center; border:0 }.snow-side-tabs b,.snow-side-tabs span{padding:.15rem .35rem;border-radius:3px;background:#e7ebee;color:#35454e;font-size:.26rem}.snow-side-tabs span{background:#fff;border:1px solid #d7dde1}.snow-side-tabs span i{display:inline-block;width:.24rem;height:.24rem;margin-left:.18rem;border-radius:50%;background:#2676e8}
.snow-file-search { position:relative;height:.78rem;display:flex;align-items:center;margin:.05rem 0;padding-left:1.1rem;border-radius:3px;background:#e9ecef;color:#77848c;font-size:.24rem}.snow-file-search i{position:absolute;left:.43rem;width:.28rem;height:.28rem;border:1px solid #6b7981;border-radius:50%}.snow-file-search i::after{content:"";position:absolute;right:-.12rem;bottom:-.06rem;width:.14rem;height:1px;background:#6b7981;transform:rotate(45deg)}
.snow-add { width:100%;height:.78rem;margin:.1rem 0 .18rem;border:1px solid #c9d2d7;border-radius:3px;background:#fff;color:#35454e;font-size:.25rem }
.snow-side > span,.snow-side > em,.snow-side > small { display:block;padding:.13rem .18rem;color:#53636c;font-size:.23rem;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.snow-side > em{padding-left:.52rem}.snow-side > em.is-file{background:#cfe3ff;color:#14539a;box-shadow:none}.snow-side > em b{margin-right:.18rem;color:#2777d9;font-size:.19rem}.snow-side > em i{float:right;color:#2871cf;font-style:normal}.snow-folder{display:inline-block;width:.32rem;height:.23rem;margin-right:.2rem;border:1px solid #82929a;border-radius:1px;vertical-align:-.03rem}
.snow-pane-title{height:.82rem;display:flex;align-items:center;margin-top:.18rem;border-top:1px solid #dfe4e7}.snow-pane-title b{font-size:.25rem}.snow-pane-title i{margin-left:auto;font-style:normal}.snow-pane-title span{margin-left:.2rem;color:#6d7b83;font-size:.24rem}
.snow-window .snow-work { min-width:0;min-height:0;display:grid;grid-template-rows:1.38rem 1.15rem minmax(5rem,1fr) 5.65rem 2.25rem;background:#fff }
.snow-window .snow-tabs { min-height:0;height:1.38rem;padding:0;border-bottom:1px solid #dce2e5;gap:0}.snow-tabs>span{height:100%;padding:0 .55rem;border-right:1px solid #e1e5e8;font-size:.26rem}.snow-tabs>span.is-current{border-top:2px solid #2778ec;border-bottom:0;background:#fff}.snow-tabs>span.is-current b{padding:.05rem .15rem;border-radius:2px;background:#e8f1ff;color:#2472d7;font-size:.18rem}.snow-tabs .snow-home-tab i{width:.28rem;height:.25rem;margin-right:.2rem;border:1px solid #71818a;border-radius:2px}.snow-tabs>i{flex:1}.snow-tabs>small{align-self:center;margin-right:.45rem;color:#75828a}
.snow-window .snow-context { min-height:0;height:1.15rem;padding:.16rem .5rem;gap:.18rem;border-bottom:1px solid #e0e5e8;background:#fff}.snow-context>b,.snow-context>span{padding:0;border:0;background:transparent;color:#4c5d66;font-size:.22rem;font-weight:500}.snow-context>span small{color:#859097}.snow-context>i{width:.18rem;height:.18rem;border-radius:50%;background:#e6d4d4;flex:0 0 auto}.snow-context>em{flex:1}.snow-context button{width:.66rem;height:.66rem;border:0;border-radius:3px;background:#4089e9}.snow-context button>i{display:block;width:.24rem;height:.24rem;margin:auto;border:1px solid #fff;border-radius:50%}.snow-context .snow-run{width:1.55rem;color:#fff;font-size:.28rem}.snow-context .snow-run i{display:inline-block;width:0;height:0;margin-left:.2rem;border:3px solid transparent;border-top-color:#fff;transform:translateY(.15rem)}.snow-lock{width:.25rem!important;height:.27rem!important;border:1px solid #71818a!important;border-radius:1px!important;background:transparent!important}.snow-db{width:.25rem!important;height:.25rem!important;border:1px solid #71818a!important;background:transparent!important}.snow-link{width:.28rem!important;height:.12rem!important;border:1px solid #71818a!important;border-radius:99px!important;background:transparent!important}
.snow-window .snow-editor { min-height:0;overflow:hidden;padding:.35rem .55rem;border:0;background:#fff;color:#4a535a}.snow-editor ol{padding-left:1.55rem;font:.32rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.snow-editor li::marker{color:#9ba6ac}.snow-editor b{color:#2476e8}.snow-editor em{color:#7f8a91}.snow-editor strong{color:#4ba36f;font-weight:400}
.snow-window .snow-result { min-height:0;border:1px solid #dce2e6;border-bottom:0;background:#fff}.snow-window .snow-result-tabs{height:.86rem;padding:0 .4rem;border-bottom:1px solid #e0e5e8}.snow-result-tabs b{color:#2576e5;font-size:.24rem}.snow-result-tabs b span{font-weight:400}.snow-result-tabs>i{margin-left:auto;color:#8b969c;font-style:normal}.snow-result-tools{height:.9rem;display:flex;align-items:center;gap:.32rem;padding:0 .38rem}.snow-result-tools b,.snow-result-tools>span{padding:.13rem .28rem;border:1px solid #d3dade;border-radius:3px;font-size:.21rem}.snow-result-tools b{background:#e9ecee}.snow-result-tools>i{flex:1}.snow-result-tools small{color:#66757d;font-size:.2rem}.snow-result-tools>em{width:1.2rem;height:.24rem;background:linear-gradient(90deg,#397ee5 70%,#e1e6ea 70%)}
.snow-window .snow-result-row{grid-template-columns:1.05fr 1fr 1fr .7fr .7fr;gap:0;padding:0;font-size:.22rem}.snow-window .snow-result-row>span,.snow-window .snow-result-row>strong{position:relative;min-height:.7rem;padding:.18rem .28rem;border-right:1px solid #dfe4e7}.snow-window .snow-result-head{height:1.35rem;background:#fff;color:#3e4c54;font-size:.19rem}.snow-hist{position:absolute;left:.28rem;right:.28rem;bottom:.14rem;height:.38rem;background:repeating-linear-gradient(90deg,#3781eb 0 .18rem,transparent .18rem .23rem);clip-path:polygon(0 50%,15% 30%,30% 65%,45% 20%,60% 45%,75% 10%,90% 60%,100% 35%,100% 100%,0 100%)}.snow-hist.h2{clip-path:polygon(0 70%,20% 30%,40% 40%,60% 10%,80% 45%,100% 25%,100% 100%,0 100%)}.snow-hist.h3{clip-path:polygon(0 20%,20% 55%,40% 15%,60% 60%,80% 30%,100% 45%,100% 100%,0 100%)}.snow-hist.h4{clip-path:none;background:#dbe4ed}.snow-hist.h5{clip-path:none;background:linear-gradient(90deg,#55aa6d 80%,#dbe4ed 80%)}
.snow-history{min-height:0;border-top:1px solid #dce2e6;background:#fff}.snow-history>b{display:inline-block;padding:.25rem .45rem;border-top:2px solid #327bea;color:#2d72d3;font-size:.23rem}.snow-history>div{display:grid;grid-template-columns:.3rem .75rem .55rem minmax(0,1fr) 4.2rem;gap:.28rem;align-items:center;padding:.18rem .45rem;background:#d9e8ff;color:#40515b;font-size:.2rem}.snow-green{width:.23rem;height:.23rem;border-radius:50%;background:#19a964}.snow-history code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snow-history a{text-decoration:underline;color:#486276}
.hero-demo[data-demo-frame="1"] .demo-pointer{left:84%;top:68%}.hero-demo[data-demo-frame="2"] .demo-pointer{left:84%;top:75%}.hero-demo[data-demo-frame="3"] .demo-pointer{left:91%;top:30%}.hero-demo[data-demo-frame="4"] .demo-pointer{left:84%;top:78%}

/* Native-size Workbench viewport. Its hierarchy and tokens mirror the actual
   Daedalus console: topbar, horizontal workspace tabs, live stage and dock,
   plus the pinned Activity / Queue rail and composer. */
.stage-hero { height:clamp(52rem,72vw,58rem); min-height:52rem; padding:clamp(.65rem,1.25vw,1rem); }
.hero-demo {
  --wb-paper:#F5EDE0;
  --wb-raised:#FBF6EC;
  --wb-sunken:#EDE3D4;
  --wb-ink:#2A1F17;
  --wb-muted:rgba(42,31,23,.70);
  --wb-rule:rgba(42,31,23,.14);
  --wb-accent:#D15A1B;
  --wb-accent-deep:#A8410F;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(17.5rem,26vw,20.5rem);
  grid-template-rows:3rem minmax(0,1fr);
  color:var(--wb-ink);
  background:var(--wb-paper);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.hero-demo .mock-bar {
  grid-column:1 / -1;
  grid-row:1;
  min-height:3rem;
  padding:.55rem .85rem;
  gap:.65rem;
  border-bottom:1px solid var(--wb-rule);
  background:var(--wb-raised);
  color:var(--wb-ink);
}
.hero-demo .mock-mark {
  width:1rem;
  height:1rem;
  display:grid;
  place-items:center;
  padding:0;
  border:1.5px solid rgba(42,31,23,.5);
  border-radius:50%;
  background:radial-gradient(circle,var(--wb-accent) 0 43%,transparent 45%);
}
.hero-demo .mock-mark::after,.hero-demo .mock-mark i { display:none; }
.hero-demo .mock-word {
  color:var(--wb-ink);
  font:500 .74rem/1 var(--mono);
  letter-spacing:.15rem;
  text-transform:uppercase;
}
.mock-bar-spacer { flex:1; }
.hero-demo .mock-pill {
  margin:0;
  padding:.25rem .5rem;
  border-color:var(--wb-rule);
  background:var(--wb-paper);
  color:var(--wb-muted);
  font:500 .55rem/1.2 var(--sans);
  text-transform:lowercase;
}
.hero-demo .mock-instance { margin-left:.2rem; font:400 .48rem/1 var(--mono); color:var(--wb-muted); }
.hero-demo .mock-seg { margin:0; overflow:hidden; border-color:var(--wb-rule); background:var(--wb-paper); }
.hero-demo .mock-seg button {
  min-height:1.45rem;
  padding:.25rem .48rem;
  color:var(--wb-muted);
  font:500 .5rem/1 var(--sans);
  letter-spacing:.025rem;
}
.hero-demo .mock-seg button[aria-pressed="true"] { background:var(--wb-sunken); color:var(--wb-ink); }
.hero-demo .wb-settings {
  display:grid;
  place-items:center;
  width:1.5rem;
  height:1.5rem;
  padding:0;
  border:0;
  background:transparent;
  color:var(--wb-muted);
  font-size:.8rem;
  cursor:pointer;
}
.workbench-main {
  grid-column:1;
  grid-row:2;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--wb-paper);
}
.hero-demo .mock-nav {
  flex:0 0 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:.12rem;
  padding:.25rem .5rem;
  overflow-x:auto;
  border:0;
  border-bottom:1px solid var(--wb-rule);
  background:var(--wb-paper);
}
.hero-demo .mock-nav button {
  flex:0 0 auto;
  min-height:2.05rem;
  margin:0;
  padding:.42rem .72rem;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:5px 5px 0 0;
  background:transparent;
  color:var(--wb-muted);
  opacity:1;
  font:500 .62rem/1 var(--sans);
}
.hero-demo .mock-nav button:hover { color:var(--wb-ink); }
.hero-demo .mock-nav button[aria-selected="true"] {
  color:var(--wb-ink);
  border-bottom-color:var(--wb-accent);
  background:transparent;
}
.hero-demo .console-pane { min-width:0; min-height:0; flex:1; }
.hero-demo .demo-shell.console-pane[data-on] { display:flex; }
.hero-demo .console-view[data-on] { display:flex; }
.hero-demo .demo-work { flex:1; min-height:0; background:var(--wb-paper); }
.hero-demo .demo-work-head { display:none; }
.hero-demo .demo-canvas {
  min-height:0;
  background:#141110;
  border-top:1px solid var(--wb-rule);
}
.hero-demo .demo-browser-frame { inset:1.6% 1.35% 1.8%; }
.hero-demo .demo-browser-body .demo-app {
  inset:0 auto auto 0;
  width:52.632%;
  height:52.632%;
  transform:scale(1.9)!important;
  transform-origin:0 0;
  transition:left .72s cubic-bezier(.22,.7,.2,1),top .72s cubic-bezier(.22,.7,.2,1),opacity .16s ease!important;
}
.hero-demo .demo-plan {
  flex:0 0 9.3rem;
  min-height:9.3rem;
  padding:0 .85rem .65rem;
  border-top:1px solid var(--wb-rule);
  background:var(--wb-paper);
}
.hero-demo .dock-tabs {
  display:flex;
  gap:.12rem;
  margin:0 -.85rem .48rem;
  padding:.25rem .5rem 0;
  border-bottom:1px solid var(--wb-rule);
}
.hero-demo .dock-tabs button {
  min-height:1.85rem;
  padding:.38rem .65rem;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--wb-muted);
  font:500 .56rem/1 var(--sans);
}
.hero-demo .dock-tabs button[aria-selected="true"] { color:var(--wb-ink); border-bottom-color:var(--wb-accent); }
.hero-demo .demo-progress { margin-bottom:.5rem; background:var(--wb-sunken); }
.hero-demo .demo-plan ol { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.65rem; }
.hero-demo .demo-plan li {
  grid-template-columns:.65rem minmax(0,1fr);
  gap:.24rem;
  align-content:start;
  font-size:.56rem;
  line-height:1.25;
}
.hero-demo .demo-plan li b { grid-column:2; font-size:.4rem; }
.hero-demo .demo-step-mark { grid-row:1 / span 2; margin-top:.07rem; }
.hero-demo .demo-complete-signal { top:1rem; right:1rem; }

.hero-demo > .demo-rail {
  grid-column:2;
  grid-row:2;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-left:1px solid var(--wb-rule);
  background:var(--wb-raised);
}
.demo-rail-focus {
  flex:0 0 auto;
  padding:.72rem .82rem;
  border-bottom:1px solid var(--wb-rule);
}
.demo-rail-focus .rail-heading { display:flex; align-items:center; gap:.45rem; margin-bottom:.34rem; }
.demo-rail-focus .rail-heading b {
  color:var(--wb-muted);
  font:500 .52rem/1 var(--mono);
  letter-spacing:.07rem;
}
.demo-rail-focus .demo-spinner { width:.58rem; height:.58rem; margin:0; }
.demo-rail-focus .rail-elapsed { margin-left:auto; color:var(--wb-muted); font:.48rem/1 var(--mono); }
.demo-rail-focus p { margin:0 0 .16rem; font-size:.68rem; font-weight:500; }
.demo-rail-focus small { display:block; color:var(--wb-muted); font-size:.54rem; }
.hero-demo.is-complete .demo-rail-focus { background:rgba(65,112,63,.06); }
.hero-demo.is-complete .demo-rail-focus .rail-heading b { color:#315e30; }
.hero-demo .rail-tabs {
  flex:0 0 auto;
  margin:0;
  padding:.25rem .5rem;
  background:var(--wb-paper);
}
.hero-demo .rail-tabs button span {
  display:inline-grid;
  place-items:center;
  min-width:.9rem;
  height:.9rem;
  margin-left:.2rem;
  padding:0 .2rem;
  border-radius:99px;
  background:var(--wb-sunken);
  font:.43rem/1 var(--mono);
}
.hero-demo .rail-body { flex:1; min-height:0; overflow-y:auto; }
.hero-demo .demo-rail .mock-pane { padding:0; overflow:hidden; }
.hero-demo .demo-feed { padding:.65rem .72rem; gap:.42rem; }
.hero-demo .demo-feed li {
  border-color:var(--wb-rule);
  background:var(--wb-paper);
}
.hero-demo .demo-feed time { color:var(--wb-muted); }
.hero-demo .demo-feed b { font-size:.53rem; }
.hero-demo .demo-feed span { font-size:.55rem; }
.queue-list { display:flex; flex-direction:column; gap:.5rem; padding:.7rem .75rem; }
.queue-list article {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.14rem;
  padding:.58rem 2rem .58rem .6rem;
  border:1px solid var(--wb-rule);
  border-radius:5px;
  background:var(--wb-paper);
}
.queue-list b { font-size:.6rem; font-weight:500; }
.queue-list small { color:var(--wb-muted); font-size:.5rem; }
.queue-list span {
  position:absolute;
  top:.5rem;
  right:.55rem;
  font:.48rem/1 var(--mono);
  color:var(--wb-muted);
}
.hero-demo .mock-composer {
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:.28rem;
  padding:.68rem .75rem .55rem;
  border-top:1px solid var(--wb-rule);
  background:var(--wb-raised);
}
.hero-demo .mock-composer > div { display:flex; align-items:flex-end; gap:.4rem; }
.hero-demo .mock-composer textarea {
  flex:1;
  min-width:0;
  height:2.2rem;
  min-height:2.2rem;
  resize:none;
  padding:.48rem .55rem;
  border:1px solid var(--wb-rule);
  border-radius:5px;
  outline:0;
  background:var(--wb-sunken);
  color:var(--wb-ink);
  font:400 .6rem/1.25 var(--sans);
}
.hero-demo .mock-composer textarea::placeholder { color:var(--wb-muted); }
.hero-demo .mock-composer textarea:focus { border-color:var(--wb-accent); box-shadow:inset 0 0 0 1px var(--wb-accent); }
.hero-demo .mock-composer button {
  height:2.2rem;
  padding:0 .72rem;
  border:1px solid var(--wb-accent-deep);
  border-radius:5px;
  background:var(--wb-accent-deep);
  color:var(--wb-raised);
  font:500 .56rem/1 var(--sans);
}
.hero-demo .mock-composer > small { text-align:right; color:var(--wb-muted); font-size:.48rem; }

.memory-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
  padding:.85rem;
}
.memory-grid article {
  min-height:7rem;
  display:flex;
  flex-direction:column;
  padding:.85rem;
  border:1px solid var(--wb-rule);
  border-radius:6px;
  background:var(--wb-raised);
}
.memory-grid article > span { margin-bottom:auto; color:var(--wb-accent-deep); font:.48rem/1 var(--mono); letter-spacing:.08rem; }
.memory-grid b { margin-top:1rem; font-size:.72rem; font-weight:500; }
.memory-grid small { margin-top:.25rem; color:var(--wb-muted); font-size:.55rem; }
.system-grid { display:flex; flex-direction:column; gap:.55rem; padding:.85rem; }
.system-grid article {
  display:grid;
  grid-template-columns:.55rem minmax(0,1fr) auto;
  gap:.6rem;
  align-items:center;
  padding:.72rem;
  border:1px solid var(--wb-rule);
  border-radius:6px;
  background:var(--wb-raised);
}
.system-dot { width:.5rem; height:.5rem; border-radius:50%; background:#41703F; }
.system-grid p { margin:0; }
.system-grid b,.system-grid small { display:block; }
.system-grid b { font-size:.65rem; font-weight:500; }
.system-grid small { color:var(--wb-muted); font-size:.52rem; }
.system-grid code { color:var(--wb-muted); font:.5rem/1 var(--mono); }

.hero-demo[data-demo-frame="0"] [data-demo-app="salesforce"],
.hero-demo[data-demo-frame="1"] [data-demo-app="workday"],
.hero-demo[data-demo-frame="2"] [data-demo-app="workday"],
.hero-demo[data-demo-frame="3"] [data-demo-app="snowflake"],
.hero-demo[data-demo-frame="4"] [data-demo-app="workday"] {
  z-index:2;
  opacity:1;
  visibility:visible;
}
.hero-demo[data-demo-frame="0"] [data-browser-address="salesforce"],
.hero-demo[data-demo-frame="1"] [data-browser-address="workday"],
.hero-demo[data-demo-frame="2"] [data-browser-address="workday"],
.hero-demo[data-demo-frame="3"] [data-browser-address="snowflake"],
.hero-demo[data-demo-frame="4"] [data-browser-address="workday"] { display:inline; }
.hero-demo[data-demo-frame="0"] .sf-browser-tab,
.hero-demo[data-demo-frame="1"] .wd-browser-tab,
.hero-demo[data-demo-frame="2"] .wd-browser-tab,
.hero-demo[data-demo-frame="3"] .snow-browser-tab,
.hero-demo[data-demo-frame="4"] .wd-browser-tab { background:#fff; opacity:1; }
.hero-demo[data-demo-frame="0"] .sf-browser-tab > i,
.hero-demo[data-demo-frame="1"] .wd-browser-tab > i,
.hero-demo[data-demo-frame="2"] .wd-browser-tab > i,
.hero-demo[data-demo-frame="3"] .snow-browser-tab > i,
.hero-demo[data-demo-frame="4"] .wd-browser-tab > i { filter:none; }
.hero-demo[data-demo-frame="0"] .demo-pointer{left:84%;top:34%}
.hero-demo[data-demo-frame="1"] .demo-pointer{left:84%;top:68%}
.hero-demo[data-demo-frame="2"] .demo-pointer{left:84%;top:75%}
.hero-demo[data-demo-frame="3"] .demo-pointer{left:91%;top:30%}
.hero-demo[data-demo-frame="4"] .demo-pointer{left:84%;top:78%}

@media (max-width:64rem) {
  .stage-hero { height:53rem; min-height:53rem; }
  .hero-demo { grid-template-columns:minmax(0,1fr) 17.5rem; }
  .hero-demo .demo-browser-body .demo-app { width:58.824%; height:58.824%; transform:scale(1.7)!important; }
  .hero-demo .demo-plan ol { gap:.3rem; }
  .hero-demo .demo-plan li { font-size:.5rem; }
}
@media (max-width:52rem) {
  .stage-hero { height:50rem; min-height:50rem; }
  .hero-demo { grid-template-columns:minmax(0,1fr); }
  .hero-demo > .demo-rail { display:none; }
  .workbench-main { grid-column:1; }
  .hero-demo .demo-browser-body .demo-app { width:55.556%; height:55.556%; transform:scale(1.8)!important; }
}
@media (max-width:36rem) {
  .stage-hero { height:42rem; min-height:42rem; }
  .hero-demo .mock-bar { padding:.5rem .58rem; }
  .hero-demo .mock-instance { display:none; }
  .hero-demo .mock-pill { display:none; }
  .hero-demo .mock-seg { margin-left:auto; }
  .hero-demo .mock-nav button { padding:.4rem .55rem; font-size:.56rem; }
  .hero-demo .mock-nav button:nth-last-child(-n+2) { display:none; }
  .hero-demo .demo-plan { flex-basis:6.6rem; min-height:6.6rem; padding:0 .55rem .4rem; }
  .hero-demo .dock-tabs { margin-left:-.55rem; margin-right:-.55rem; }
  .hero-demo .demo-plan ol { grid-template-columns:repeat(5,1fr); gap:.12rem; }
  .hero-demo .demo-plan li { display:grid; grid-template-columns:1fr; place-items:center; }
  .hero-demo .demo-plan li > span:nth-child(2),.hero-demo .demo-plan li b { display:none; }
  .hero-demo .demo-step-mark { grid-row:auto; margin:0; width:.58rem; height:.58rem; }
  .hero-demo .demo-browser-frame { inset:1.2% 1.5% 1.5%; }
  .hero-demo .demo-browser-body .demo-app { width:43.75rem; height:25rem; transform:scale(1.9)!important; }
  .hero-demo .sf-tabs span:nth-of-type(n+4){display:flex}
  .hero-demo .sf-table .demo-tr>span:nth-child(3),.hero-demo .sf-table .demo-tr>span:nth-child(4){display:block}
  .hero-demo .sf-table .demo-tr:nth-child(n+6){display:grid}
  .hero-demo .wd-payees{display:block}
  .hero-demo .snow-result-tabs span{display:inline}
  .hero-demo .snow-result-row>:nth-child(4){display:block}
  .hero-demo[data-demo-frame="0"] [data-demo-app="salesforce"]{left:-60rem;top:0}
  .hero-demo[data-demo-frame="1"] [data-demo-app="workday"]{left:-20rem;top:-4rem}
  .hero-demo[data-demo-frame="2"] [data-demo-app="workday"]{left:-20rem;top:-7rem}
  .hero-demo[data-demo-frame="3"] [data-demo-app="snowflake"]{left:-58rem;top:-1rem}
  .hero-demo[data-demo-frame="4"] [data-demo-app="workday"]{left:-58rem;top:-10rem}
}

/* ==================== THE FEATURE FOLD ====================
   One screen, the same treatment the hero gets, so scrolling here lands on
   the section and nothing else. It no longer buys that with scroll: the tab
   strip switches the stage in place, so the section is one fold rather than
   the four it took as a pinned track.

   Height flows down the column rather than being arithmetic on svh, so the
   title can grow to two lines or the dots can change size without a magic
   number going stale: the section takes the fold, the track takes what is
   left after the title and the dots, and the slide's scene fills the track.
   The JS clears its inline track height at this width for the same reason
   (see fit() in the page).

   Width-keyed at 48rem to match every other desktop rule in this file. Below
   it the copy stacks over the visual and a one-screen fold would mean a
   console two inches tall.
   ========================================================= */
@media (min-width: 48rem) {
  /* height, not min-height. The scene inside resolves its own height as a
     percentage of this column, and a percentage against an indefinite height
     falls back to auto -- which is what left a 1280x720 window 116px past the
     fold: the stage sized itself naturally and everything above it grew to
     match. A definite height makes the whole chain resolve in one pass.
     min-height is the floor for a window too short to be worth the fold. */
  /* height, not min-height. The scene inside resolves its own height as a
     percentage of this column, and a percentage against an indefinite height
     falls back to auto -- which is what left a 1280x720 window 116px past the
     fold: the stage sized itself naturally and everything above it grew to
     match. A definite height makes the whole chain resolve in one pass.
     min-height is the floor for a window too short to be worth the fold. */
  .feat {
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
    min-height: 34rem; display: flex; flex-direction: column;
  }
  .feat > .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .feat-carousel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  /* min-height alone does not let a grid shrink past its tallest child; the
     row has to be told it may. Without this a 1280x720 window pushed the
     section 116px past the fold, which is the case this whole block exists
     to stop. */
  .feat-track { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .feat-slide { align-self: stretch; min-height: 0; }
  /* card-block IS the grid24 element; the copy still centres against the
     visual, and only the visual stretches. */
  .feat-slide .card-block { height: 100%; }
  .feat-slide .g-media { align-self: stretch; min-height: 0; }
  .feat-slide .product-scene,
  .feat-slide .stage-hero { height: 100%; }
}

/* ==================== RESEARCH + TEAM: ONE FOLD ====================
   The third screen. Hero, the feature panel and this each take exactly one
   fold, so the page reads as three full screens and then the sign-up rather
   than as two set-pieces followed by a long tail.

   Together these two ran 1237px at every window size -- 406px past the fold
   at 1440x900 and 586px past it at 1280x720 -- so the compression here is
   real, not a rounding: the paddings come in, the portraits drop a size, and
   the bios are clamped to the two lines they were already using. Nothing is
   hidden; it is all still on the screen, set tighter.

   Research is sized by its contents and Team takes the rest, because the four
   cards are one row that should not stretch while the team block has slack it
   can absorb.
   ================================================================= */
/* 64.0625rem, not 48: between 48 and 64 the cards drop to two columns and the
   founders to one, so the pair is four card-rows and three stacked people --
   two folds of content with no honest way into one. Above it the four-up row
   and the three-up team both hold, which is exactly where this works. The
   tablet range keeps the ordinary scrolling sections. */
@media (min-width: 64.0625rem) {
  .fold-pair {
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h)); min-height: 42rem;
    display: flex; flex-direction: column;
  }
  .fold-pair > .research { flex: 0 0 auto; padding: 1.75rem 0 2rem; }
  .fold-pair > .team-block {
    flex: 1; min-height: 0; padding: 1.75rem 0 1.5rem;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* .section + .section adds a third padding on top of the two above. */
  .fold-pair > .section + .section { padding-top: 1.75rem; }

  /* The heading block sat 3rem clear of its cards, which is the right measure
     for a section with a screen to itself and too much for two sharing one. */
  .fold-pair .sec-top { margin-bottom: 1.25rem; }
  .fold-pair .sec-intro { margin-bottom: 1.5rem; }

  .fold-pair .person img, .fold-pair .person .av {
    width: 3.25rem; height: 3.25rem; margin-bottom: 0.875rem;
  }
  .fold-pair .person-name { font-size: 1.4375rem; }
  .fold-pair .person-role { margin-bottom: 0.625rem; }
  /* Four lines. Four columns are narrower than three, so a two-line clamp cut
     every bio mid-phrase ("Ex-MIT Lincoln Lab, Intern @..."); four sets all of
     them in full at 1280 and up, and the clamp still stops a longer one added
     later from pushing the fold open. */
  .fold-pair .person-bio {
    margin-bottom: 0.75rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  }
}

/* Short windows: 1280x720 is the tightest desktop case on the board and the
   pair does not fit it at the sizes above. Same approach as the hero's own
   short-window tier -- trim the spacing and the portraits, never the copy. */
/* The tight tier. Short windows need it, and so do narrow desktops: at 1100
   wide the four cards and three founders wrap more, which costs height the
   same way a short window does. Either condition turns it on. */
@media (min-width: 64.0625rem) and (max-height: 51rem),
       (min-width: 64.0625rem) and (max-width: 79.9375rem) {
  /* The 42rem floor is taller than a 720px window's fold, so it was itself
     pushing the pair past the screen. 34rem here: below that a window is too
     short to hold this honestly and scrolling is the right answer. */
  .fold-pair { min-height: 34rem; }
  .fold-pair > .research { padding: 1rem 0 1.125rem; }
  .fold-pair > .team-block, .fold-pair > .section + .section { padding-top: 1rem; }
  .fold-pair > .team-block { padding-bottom: 0.25rem; }
  .fold-pair .sec-top, .fold-pair .sec-intro { margin-bottom: 0.75rem; }
  .fold-pair .sec-intro .lede { font-size: 1rem; }
  .fold-pair .card { padding: 0.8125rem 0.875rem 0.9375rem; }
  .fold-pair .card p { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .fold-pair .sec-intro .lede { margin-top: 0.375rem; }
  .fold-pair .person img, .fold-pair .person .av {
    width: 2.25rem; height: 2.25rem; margin-bottom: 0.4375rem;
  }
  .fold-pair .person-name { font-size: 1.25rem; }
  .fold-pair .person-role { margin-bottom: 0.3125rem; }
  .fold-pair .person-bio { -webkit-line-clamp: 4; margin-bottom: 0.25rem; }
  .fold-pair .person-links a { padding: 0; }
  .fold-pair .sec-intro { margin-bottom: 0.5rem; }
}


/* Narrow AND short -- a 1280x720-class laptop at less than 1200 CSS px. Both
   pressures at once, and the tight tier alone leaves the pair ~20px long. The
   research copy drops to two lines here, which is what buys the team the room:
   Research is the fixed-height half, so a line off a card is a line the people
   below get back. */
@media (min-width: 64.0625rem) and (max-width: 79.9375rem) and (max-height: 45rem) {
  .fold-pair .card p { -webkit-line-clamp: 2; }
  .fold-pair .person-links a { padding: 0; }
  .fold-pair > .team-block, .fold-pair > .section + .section { padding-top: 0.75rem; }
  .fold-pair .sec-intro { margin-bottom: 0.375rem; }
  /* Guarantees at these sizes: the origin row and the four criteria together
     need ~360px where the layout has ~330, so both ends come in. */
  .feat-slide .criteria { padding: 0.5rem 0.75rem; }
  .feat-slide .verify-origin { margin-bottom: 0.5rem; }
  .feat-slide .verify-origin > div, .feat-slide .verify-origin > strong { padding: 0.4rem; }
  .feat-slide .criterion { padding: 0.3rem 0; }
  .feat-slide .criterion small { margin-top: 0.12rem; }
  .feat-slide .evidence { padding: 0.6rem 0.75rem; }
  .feat-slide .evidence > a { padding: 0.4rem 0; }
  /* Learning's legend is a two-column grid, so five entries take three rows and
     the band grows to 192px -- which squeezes the run rows above it until they
     draw over it. Inline and wrapping, it takes two. */
  .feat-slide .gain-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.5rem; padding-top: 0.5rem; }
  .feat-slide .gain-foot .gain-mix { height: 0.5625rem; margin: 0.3125rem 0 0.375rem; }
  .feat-slide .gain-foot { padding: 0.5rem 1.125rem 0.625rem; }
}

/* ============ SCENES INSIDE THE FEATURE PANEL ============
   Each of these was drawn for a stage 830px tall and now runs in ~550. They
   were told to stretch to the new height, which they did by leaving the slack
   at the bottom of whichever panel held the content: a chart sitting in the
   top half of a tall white box. Distribute it instead -- the content centres
   in the space it has, and where a panel is a list of rows the rows take the
   room between them.
   ======================================================== */
@media (min-width: 64.0625rem) {
  /* Learning: the run rows take the height between them. The body is a
     flex:1 child with min-height 0, so when the band below it grows -- the
     legend wraps to three lines at these widths -- the body is squeezed below
     its own content and the last run row drew straight over the band. Both
     ends come in so the content fits the space rather than spilling out of
     it, and the body clips as a last resort rather than overlapping. */
  .feat-slide .gain-body { justify-content: space-evenly; overflow: hidden; }
  .feat-slide .gain-body { padding: 0.375rem 1.125rem; }
  .feat-slide .gain-row { padding: 0.5rem 0; }
  .feat-slide .gain-foot { padding: 0.625rem 1.125rem 0.75rem; }
  .feat-slide .gain-foot .gain-mix { height: 0.6875rem; margin: 0.375rem 0 0.5rem; }
  .feat-slide .gain-legend { gap: 0.5rem 0.875rem; }
  .feat-slide .gain-legend span { font-size: 0.5rem; }
  .feat-slide .gain-primitives code { font-size: 0.4375rem; padding: 0.1875rem 0.3125rem; }

  /* Guarantees: the criteria spread into the room rather than stacking at the
     top of it. The spreading belongs to the LIST -- setting flex-direction on
     the criterion itself overrode its own grid and stacked the mark above the
     text instead of beside it.
     Both columns clip rather than spill: verify-layout is a flex:1 child with
     min-height 0, so on a short window it is squeezed under its own content
     and the last criterion drew past the scene's bottom edge, 29px at 720. */
  .feat-slide .criteria { display: flex; flex-direction: column; }
  /* The derivation strip used to take the top third of this column, so the
     conditions were squeezed and the list spread itself evenly to look full.
     With the strip gone the conditions take that room back directly: they
     grow into it and centre their own content, instead of space-evenly
     opening a 37px hole above the first one and below the last. */
  .feat-slide .criteria { justify-content: flex-start; gap: 0.45rem; }
  /* Stretched rows separated by hairlines read as a half-empty list. The rest
     of the page states things in bordered blocks -- research cards, the held
     action, the reusable primitives -- so the conditions say it the same way,
     and the column fills because the cards are cards, not because the gaps
     were opened up to fill it. */
  .feat-slide .criterion {
    flex: 1 1 auto; align-content: center; min-height: 3.4rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ic-rule); border-bottom: 1px solid var(--ic-rule);
    border-radius: 4px; background: var(--paper-raised);
  }
  .feat-slide .criterion b { font-size: 0.76rem; }
  .feat-slide .criterion small { font-size: 0.64rem; }
  .feat-slide .criterion.is-held {
    margin: 0; padding: 0.55rem 0.7rem;
    border-color: rgba(176,105,27,0.42); background: rgba(176,105,27,0.07);
  }
  .feat-slide .verify-layout { overflow: hidden; }
  .feat-slide .criteria, .feat-slide .evidence { min-height: 0; overflow: hidden; }
  /* The origin row stretches its children to a shared height, so a box whose
     copy needs one line more grows past the row instead of the row growing.
     align-self: start plus its own min-height keeps them level. */
  .feat-slide .verify-origin { align-items: start; }
  .feat-slide .verify-origin > div, .feat-slide .verify-origin > strong { align-self: stretch; }
  .feat-slide .verify-origin > i { line-height: 1; align-self: center; }
  .feat-slide .evidence { display: flex; flex-direction: column; }
  .feat-slide .evidence > a { flex: 1; display: flex; align-items: center; }

  /* Performance: the bar rows take the height the same way. */
  /* center, not space-evenly: with the dark panel and the axis gone the rows
     are the only children, and spreading them left a hand's width between
     each. Padding sets the rhythm now. */
  .feat-slide .osworld-chart { justify-content: center; }

  /* Domains: no magnification at all. The app inside the browser is laid out
     small and then scaled up -- 1.7x on the full-bleed stage it was drawn for,
     which in this frame left a quarter of the app filling the window and the
     crop landing mid-column-header. At 1x the app is laid out at the frame's
     own size, so the same window shows the whole view and the crop falls past
     the last column. It still overflows by ~180px whatever the scale, which is
     the deliberate part: a window larger than its stage is what stops this
     reading as a screenshot. */
  .feat-slide .hero-demo .demo-browser-body .demo-app {
    width: 100% !important; height: 100% !important; transform: none !important;
  }
}

/* The score rows were tracked at minmax(9.5rem,·) minmax(10rem,·) 3.6rem, which
   needs ~400px. In the 16-column media slot of a 1025-1280 window the chart
   gets ~330, so the row overflowed its own box and the scene's overflow:hidden
   cut the percentage off. Narrower minimums; the bars take the squeeze. */
@media (min-width: 64.0625rem) and (max-width: 79.9375rem) {
  .feat-slide .osworld-row { grid-template-columns: minmax(5.5rem, 0.8fr) minmax(4rem, 1.55fr) 3.1rem; gap: 0.6rem; }
  .feat-slide .osworld-row > div b { font-size: 0.8rem; }
  .feat-slide .osworld-row > strong { font-size: 1.05rem; }
  .feat-slide .osworld-chart { padding: 1.1rem; }
}

/* A single figure beside the copy, under a rule: the one number a reader should
   leave the tab with, at a size the scene cannot compete with. */
.stat-block { margin-top: 1.625rem; padding-top: 1.125rem; border-top: 1px solid var(--ic-rule); }
.stat-label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1rem; opacity: 0.5; }
.stat-figure { font-family: var(--serif); font-size: 2.875rem; line-height: 1; color: var(--ic-accent-t); margin-top: 0.5rem; }
.stat-figure span { font-size: 1.25rem; }
.stat-row { display: flex; gap: 2.125rem; }
.stat-row .stat-figure { font-size: 2.5rem; }
.stat-note { font-size: 0.71875rem; opacity: 0.6; margin-top: 0.125rem; }

/* ============ LEARNING, REBUILT ============
   The scene was five boxes: a KPI strip, two bordered panels and a path row.
   The two figures moved to the copy, where they read at display size instead
   of 20px, leaving two objects -- the runs, and a band under them. Cost per
   run joins the time, because cost is what the copy promises and the panel
   never showed it.
   =========================================== */
.gain-body { display: flex; flex-direction: column; justify-content: center; padding: 0.75rem 1.25rem; }
.gain-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 0.59375rem; letter-spacing: 0.08rem;
  text-transform: uppercase; opacity: 0.5; padding-bottom: 0.25rem;
}
.gain-head b { font-weight: 400; opacity: 1; }
.gain-body .gain-head b { color: #2F5C2E; }
.gain-row {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 4.25rem 3.5rem;
  gap: 0.875rem; align-items: center; width: 100%;
  padding: 0.8125rem 0; border: 0; border-top: 1px solid rgba(42, 31, 23, 0.09);
  background: none; text-align: left; cursor: pointer; color: inherit;
}
.gain-row > span { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06rem; opacity: 0.5; }
.gain-row > div { height: 0.6875rem; background: rgba(42, 31, 23, 0.07); overflow: hidden; }
.gain-row > div i { display: block; height: 100%; width: calc(var(--w) * 1%); background: rgba(42, 31, 23, 0.2); transition: width 0.5s cubic-bezier(.2,.75,.25,1), background 0.3s; }
.gain-row > b { font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; text-align: right; opacity: 0.55; }
.gain-row > em { font-family: var(--serif); font-style: normal; font-size: 0.875rem; text-align: right; opacity: 0.7; }
.gain-row.is-current > span { opacity: 0.95; color: var(--ic-accent-t); }
.gain-row.is-current > div { height: 0.9375rem; }
.gain-row.is-current > div i { background: var(--ic-accent); }
.gain-row.is-current > b { opacity: 1; }
.gain-row.is-current > em { font-size: 1.1875rem; opacity: 1; color: var(--ic-accent-t); }
.gain-foot { padding: 0.875rem 1.25rem 1rem; border-top: 1px solid var(--ic-rule); background: var(--paper-raised); }
.gain-foot .gain-mix { display: flex; height: 0.8125rem; overflow: hidden; margin: 0.4375rem 0 0.625rem; }
.gain-foot-b { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.gain-primitives { display: flex; align-items: center; gap: 0.3125rem; padding: 0; border: 0; background: none; margin: 0; overflow: hidden; }

/* The console arrived wrapped in a stage: a sunken panel with its own hairline
   and 32px of inset, drawn for when it was a full-bleed object on the page.
   Inside the tab panel that is a box around a box around a box -- the panel's
   border, the stage's, then the mock's own. The stage keeps its job of
   clipping the oversized window and loses the frame. */
.feat-slide .stage-hero { padding: 0; }
.feat-slide .stage-hero::after { display: none; }
/* The stage keeps its sunken ground: the mock is rounded 10px and the ground
   is what shows in the four corners under that radius. With the ground taken
   away those corners fell back to the panel's paper, which is why they read as
   the wrong colour.
   And the console's own working surface was --wb-paper: #F5EDE0, byte-identical
   to the page it sits on, so the interface dissolved into the section behind
   it. It takes the sunken shade here, which is the ground the mockup used. */
.feat-slide .hero-demo { --wb-paper: #EDE3D4; }
/* The dark wedge in each corner was the mock's drop shadow, pooling in the gap
   between its own 10px rounding and the stage's 4px clip. The two radii match
   now, so the mock fills the stage's rounded box exactly and there is no gap
   to pool in; the shadow goes with it, since a slab sitting in a panel has
   nothing to cast onto. Its edge against the paper is the definition. */
.feat-slide .stage-hero .mock { border-radius: 4px; box-shadow: none; }

/* ============ CONSOLE PANES IN THE COMPRESSED STAGE ============
   The Learning and Automation panes were drawn for the 830px stage the console
   had to itself. In the tab panel it runs at ~460px, and these two were the
   ones that could not take it:

   .eff-curve is a fixed 8.75rem with overflow:visible on its svg, so once its
   card is shorter than that the line simply drew outside the card and across
   the primitives listed underneath -- the stray digits over the chips were its
   own axis labels. It flexes now, and the card clips.

   The runtime head is a space-between row of a label and a long readout; in a
   ~300px column the readout wrapped to four lines and squeezed everything
   below it. Stacked, each gets its own line.
   ============================================================== */
.feat-slide .eff-runtime { display: flex; flex-direction: column; overflow: hidden; }
.feat-slide .eff-runtime .eff-section-head { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.feat-slide .eff-curve { flex: 1; min-height: 2.25rem; height: auto; margin: 0.3rem 0 0; }
.feat-slide .eff-profile, .feat-slide .eff-primitives, .feat-slide .eff-verified { overflow: hidden; }

/* Row one of the learning dashboard gets 154px and its two cards need 176 and
   207: the auto-sized second row takes what it wants first and the 1fr row
   lives on the remainder. Rather than re-proportion the grid and squeeze the
   primitives instead, both rows give up the pieces that carry least: the run
   picker's third line (already ellipsed to "fir..."), a tighter mix legend,
   and smaller chips. */
.feat-slide .eff-run-picker button { padding: 0.35rem 0.4rem; }
.feat-slide .eff-run-picker b { margin: 0.1rem 0 0; font-size: 0.75rem; }
.feat-slide .eff-run-picker small { display: none; }
.feat-slide .eff-mix-row { padding: 0.42rem 0; }
.feat-slide .eff-mix-row:first-of-type { margin-top: 0.4rem; }
.feat-slide .eff-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.7rem; padding-top: 0.5rem; }
.feat-slide .eff-legend span { font-size: 0.44rem; }
.feat-slide .eff-primitives { gap: 0.3rem; padding: 0.5rem 0.65rem; }
.feat-slide .eff-primitives code { padding: 0.2rem 0.35rem; font-size: 0.42rem; }
.feat-slide .eff-verified { padding: 0.5rem 0.65rem; }

/* On a short or narrow window the console stage is ~373px and the learning
   dashboard's four cards need ~400 between them, so no amount of trimming
   fits all four. The second row goes instead of everything being squeezed:
   the runtime curve and the execution mix are what the pane is about, and the
   primitives it drops are listed on the Home pane's plan strip anyway. */
@media (min-width: 64.0625rem) and (max-height: 51rem),
       (min-width: 64.0625rem) and (max-width: 79.9375rem) {
  .feat-slide .eff-dashboard { grid-template-rows: minmax(0, 1fr); }
  .feat-slide .eff-primitives, .feat-slide .eff-verified { display: none; }
}

/* Every console pane crops at its own edge. These are lists and card grids
   drawn for the tall stage -- a run history, automation cards, a memory grid --
   and on a short stage they were taller than the pane with nothing clipping
   them, so they drew straight over the composer and the rail beneath. Cropping
   is what a real app list does when it runs past the window; spilling over the
   chrome is what nothing does. */
.feat-slide .hero-demo .console-view { overflow: hidden; }
.feat-slide .hero-demo .console-view > * { min-height: 0; }

/* The console's card grids were fixed at three columns for the full-bleed
   stage. In the tab panel the pane is ~520px wide, so three columns is 138px
   a card -- and a 31-character automation title then wraps inside a 49px
   column, which is what made these panes look mangled. auto-fit with a real
   minimum gives two readable cards instead of three unreadable ones. */
.feat-slide .automation-grid { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.feat-slide .memory-grid { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.feat-slide .system-grid { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }

/* ==================== THE PANEL ON A PHONE ====================
   Everything in this section is a two-column desktop object: copy beside a
   scene, and inside the scene a chart beside a legend, a criteria list beside
   an evidence column, a console beside an activity rail. At 390px all of that
   was being squeezed into columns 60px wide rather than being allowed to
   stack, which is why it read as compressed rather than small.

   So: the panel stops trying to be one screen, every pair stacks, and each
   scene is sized by its contents instead of by a fold it no longer has.
   ============================================================== */
@media (max-width: 48rem) {
  .feat-carousel { --feat-h: auto; }
  .feat-slide .card-block { padding: 1rem 0.875rem 1.25rem; }
  .feat-slide .product-scene, .feat-slide .stage-hero { height: auto; }
  .feat-slide .g-copy .sec-h { font-size: 1.375rem; }
  .feat-slide .g-copy .lede { font-size: 0.9375rem; }

  /* Two figures side by side is right; three lines of label each is not. */
  .stat-row { gap: 1.25rem; }
  .stat-row .stat-figure { font-size: 2rem; }
  .stat-label { font-size: 0.5625rem; letter-spacing: 0.06rem; }

  /* Performance: the name goes above its own bar rather than into a 60px
     column beside it, and the score stays on the name's line. */
  .feat-slide .osworld-chart { padding: 0.75rem 0.875rem 1rem; }
  .feat-slide .osworld-row { grid-template-columns: minmax(0, 1fr) 3.25rem; gap: 0.375rem 0.625rem; padding: 0.625rem 0; }
  .feat-slide .osworld-row > span { grid-column: 1 / -1; grid-row: 2; }
  .feat-slide .osworld-row.is-icarus > div b { font-size: 1rem; }
  .feat-slide .osworld-row.is-icarus > strong { font-size: 1.25rem; }

  /* Learning: both heads stack, and the run row keeps label, time and cost on
     one line with the bar under them at full width. */
  .feat-slide .gain-head { flex-direction: column; align-items: flex-start; gap: 0.125rem; }
  .feat-slide .gain-body, .feat-slide .gain-foot { padding-left: 0.875rem; padding-right: 0.875rem; }
  .feat-slide .gain-row { grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem; gap: 0.5rem 0.625rem; }
  .feat-slide .gain-row > div { grid-column: 1 / -1; grid-row: 2; }
  .feat-slide .gain-row > b { grid-column: 2; grid-row: 1; text-align: left; }
  .feat-slide .gain-row > em { grid-column: 3; grid-row: 1; }
  .feat-slide .gain-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
  .feat-slide .gain-foot-b { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
  .feat-slide .gain-primitives { flex-wrap: wrap; }

  /* Guarantees: the evidence column goes under the criteria, not beside them. */
  .feat-slide .verify-layout { grid-template-columns: minmax(0, 1fr); }
  .feat-slide .evidence { border-left: 0; border-top: 1px solid var(--ic-rule); }
  .feat-slide .verify-origin { grid-template-columns: minmax(0, 1fr); }
  .feat-slide .verify-origin > i { display: none; }
  .feat-slide .criterion { grid-template-columns: 1.25rem minmax(0, 1fr); }
  .feat-slide .criterion em { grid-column: 2; }
}

/* The console on a phone. It is a wide desktop workbench: three columns, an
   activity rail, and inside it a browser showing a spreadsheet app. Cropping
   that app to a phone-shaped window gives a random middle of a table -- half
   a ring and two clipped column heads -- and scaling it to fit makes it
   unreadable. So the browser comes out on phones and what stays is the part
   of this console that is already vertical: the workspace tabs, the plan with
   its five steps, and the activity feed. It still says an agent is working
   across Salesforce, Workday and Snowflake, which is the claim; it just stops
   pretending a 1300px app fits in 296. */
@media (max-width: 48rem) {
  /* Explicit rows: both children were told grid-column 1 and landed in the
     same cell, so the plan's step markers drew over the activity feed. */
  /* THREE rows: the title bar is a grid child too, so pinning the workbench to
     row 1 collided it with the bar and put the DAEDALUS mark on top of the
     workspace tabs. Bar, workbench, rail. */
  .feat-slide .hero-demo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .feat-slide .hero-demo > .mock-bar { grid-column: 1; grid-row: 1; }
  .feat-slide .hero-demo > .workbench-main { grid-column: 1; grid-row: 2; }
  .feat-slide .hero-demo > .demo-rail {
    display: flex; grid-column: 1; grid-row: 3; border-left: 0; border-top: 1px solid var(--wb-rule);
  }
  .feat-slide .hero-demo .demo-canvas { display: none; }
  /* The plan lists the same five steps the feed below does, in less room. */
  .feat-slide .hero-demo .demo-plan, .feat-slide .hero-demo .dock-tabs { display: none; }
  .feat-slide .hero-demo .rail-body { max-height: 13rem; }
  /* Six workspace tabs do not fit; the strip scrolls rather than dropping any. */
  .feat-slide .hero-demo .mock-nav { overflow-x: auto; flex-wrap: nowrap; }
  .feat-slide .hero-demo .mock-nav button { white-space: nowrap; }
  .feat-slide .hero-demo .mock-composer { display: none; }
  .feat-slide .hero-demo .demo-plan ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
}

/* These sections are sized to the fold exactly, so the 1.5rem of breathing
   room .section adds above an anchor target is 1.5rem the section then loses
   off the bottom: clicking "see it run" landed the panel 92px down and cut
   24px off its foot. Flush under the nav, and the screen holds the whole
   thing. */
.feat, .fold-pair, .fold-pair > .section { scroll-margin-top: var(--nav-h); }

/* The recorded console. Desktop runs the live mock and never loads this;
   phones show the clip and never render the mock. */
.console-clip { display: none; }
@media (max-width: 48rem) {
  .console-clip {
    display: block; width: 100%; height: auto; border-radius: 4px;
    background: var(--paper-sunken); border: 1px solid var(--ic-rule);
  }
  .feat-slide .g-media > .stage-hero { display: none; }
}

/* ============ ONE SCREEN PER TAB ON A PHONE ============
   Domains fits because its visual is a 221px clip. The other three carry
   scenes of 558 to 895, so fitting them in the same screen is compression plus
   some triage: what survives is the claim each tab is making, and what goes is
   the supporting apparatus around it.
   ====================================================== */
@media (max-width: 48rem) {
  .feat-slide .g-copy .sec-h { font-size: 1.25rem; }
  .feat-slide .g-copy .lede { font-size: 0.875rem; line-height: 1.5; margin-top: 0.5rem; }
  .feat-slide .stat-block { margin-top: 0.75rem; padding-top: 0.625rem; }
  .feat-slide .stat-row .stat-figure { font-size: 1.625rem; }
  .feat-slide .stat-note { font-size: 0.6875rem; }
  .feat-slide .card-block { padding: 0.875rem 0.75rem 1rem; }

  /* Performance: the ranking is the claim. Vendor sub-labels go; Icarus keeps
     its model name because that line is the point of the row. */
  .feat-slide .osworld-chart { padding: 0.375rem 0.75rem 0.5rem; }
  .feat-slide .osworld-row { padding: 0.4375rem 0; gap: 0.25rem 0.5rem; }
  .feat-slide .osworld-row > span { height: 0.5rem; }
  .feat-slide .osworld-row.is-icarus > span { height: 0.6875rem; }
  .feat-slide .osworld-row > div small { display: none; }
  .feat-slide .osworld-row.is-icarus > div small { display: block; }
  .feat-slide .osworld-row > div b { font-size: 0.8125rem; }
  .feat-slide .osworld-row.is-icarus > div b { font-size: 0.9375rem; }
  .feat-slide .osworld-row > strong { font-size: 0.9375rem; }
  .feat-slide .osworld-row.is-icarus > strong { font-size: 1.125rem; }

  /* Learning: the three runs getting cheaper is the claim. The execution mix
     and the reusable path are the explanation, and they go. */
  .feat-slide .gain-row { padding: 0.4375rem 0; }
  .feat-slide .gain-foot { display: none; }

  /* Guarantees: the four conditions are the claim. The origin row explains
     where they came from and the evidence column cites them; both go. */
  .feat-slide .verify-origin { display: none; }
  .feat-slide .evidence { display: none; }
  .feat-slide .criterion { padding: 0.4375rem 0; }
  .feat-slide .criteria { padding: 0.5rem 0.75rem; }
}

/* With the vendor sub-labels gone the names are one line each, so both row
   types go back to a single inline row instead of stacking name over bar --
   which is where the last of the height was: four score rows at 85px and
   three run rows at 60. */
@media (max-width: 48rem) {
  .feat-slide .osworld-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 2.9rem;
    gap: 0.5rem; padding: 0.375rem 0;
  }
  /* The page's own phone rule spans the name across all columns, which forced
     a three-row grid and an 83px row. One row, three columns. */
  .feat-slide .osworld-row > div { grid-column: 1; grid-row: 1; }
  .feat-slide .osworld-row > span { grid-column: 2; grid-row: 1; }
  .feat-slide .osworld-row > strong { grid-column: 3; grid-row: 1; }
  .feat-slide .osworld-row.is-icarus > div small { font-size: 0.5rem; margin-top: 0; }

  .feat-slide .gain-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) 3rem 2.75rem;
    gap: 0.5rem; padding: 0.375rem 0;
  }
  .feat-slide .gain-row > div { grid-column: 2; grid-row: 1; }
  .feat-slide .gain-row > b { grid-column: 3; grid-row: 1; text-align: right; }
  .feat-slide .gain-row > em { grid-column: 4; grid-row: 1; font-size: 0.8125rem; }
  .feat-slide .gain-row.is-current > em { font-size: 0.9375rem; }

  .feat-slide .criterion { padding: 0.3125rem 0; }
  .feat-slide .criterion small { font-size: 0.625rem; }
}

/* The last 50px at 390 come out of the section's own chrome rather than the
   scenes: the fold pays 89px in section padding, 28 under the heading and 90
   for the tab strip before a slide gets a pixel. */
@media (max-width: 48rem) {
  .feat.section { padding-top: 0.75rem; padding-bottom: 1.25rem; }
  .feat-head { margin-bottom: 0.625rem; }
  /* The strip sets its own padding now that it is one row; the value that used
     to live here was sized for the two-by-two grid and, being later in the
     file, quietly won over it. */
}

/* ==================== Domains console, quieted ====================
   Placed last on purpose: the app mocks set their chrome inside later media
   tiers, so these have to come after them to win.

   The mocks carried each vendor's whole account bar -- waffle grid, global
   search, notification bells, avatar, side rail. None of it carries any part
   of the argument, and at the size this frame renders it is just noise. The
   browser address bar already says which app is being driven. */
.feat-slide .sf-global,
.feat-slide .wd-global,
.feat-slide .snow-side,
.feat-slide .browser-menu { display: none !important; }
.feat-slide .sf-tabs > span:not(.is-current),
.feat-slide .snow-side-tabs { display: none !important; }
/* snow-layout is a two-track grid. Hiding the side rail without collapsing the
   grid left the workspace stuck in its old track and the right half of the
   window blank. */
.feat-slide .snow-layout { grid-template-columns: minmax(0,1fr) !important; }
/* The editor track held the slack, so six lines of SQL sat in a 500px pane
   while the results it produced were squeezed at the bottom. The results are
   the part that carries the point, so they take the room. */
.feat-slide .snow-work { grid-template-rows: auto auto auto minmax(0,1fr) !important; }
.feat-slide .snow-result { min-height: 0; overflow: hidden; }

/* The plan dock used to take 9.3rem under the canvas. With it gone the browser
   frame grew, and the app -- whose page content is a fixed height -- answered by
   showing more empty page.

   Scaling the app up does not fix it: the tables have fixed column widths and
   do not reflow into a narrower box, so a harder scale just clips the right
   hand columns. Shortening the window is the honest fix -- the app crops its
   own empty bottom, and the dark desk shows below it the way a real window on
   a real screen does. */


/* ==================== Guarantees, evidence column ====================
   Last, for the same cascade reason as the block above: the stretch rule for
   these rows is set in a later tier than the one the rest of this pass edits.

   The rows used to stretch to fill the column because the held card sat at the
   bottom and there was nothing else to take up the slack. The card lands last
   in the animation, so it belongs at the foot -- and once it anchors the foot,
   the rows can be the size they actually are. */
/* The rows fill whatever the column has left above the card. A fixed padding
   big enough to look right at 900px tall clipped the last row at 768. */
.feat-slide .evidence > a { flex: 1 1 auto !important; align-items: center; }
.feat-slide .evidence > .approval-card { margin-top: auto; flex: 0 0 auto; }

/* ==================== Domains console, the window ====================
   The dark surround was the canvas showing through the frame's inset, plus a
   1px black ring and a heavy drop shadow. None of it was doing any work, and
   at this size it read as a thick black border around the page. The window
   fills the canvas now and the app fills the window. */
.feat-slide .hero-demo .demo-browser-frame {
  inset: 0; border-radius: 0;
  box-shadow: none;
}
.feat-slide .hero-demo .demo-browser-body .demo-app { box-shadow: none; }
.feat-slide .hero-demo .demo-canvas { background: #fff; }

/* .stage carries a left divider rule, switched off by :first-child when it is
   the leftmost of several stages side by side. In this slide the stage is the
   only one in its column, but the mobile <video> sits before it, so it is not
   the first child and the divider drew a dark hairline down the left of the
   visualisation with no matching edge anywhere else. */
.feat-slide .g-media > .stage { border-left: 0; }

/* ==================== Domains console, simpler tables ====================
   Two of Workday's seven columns (Warnings, Skills) and two of Salesforce's
   eight (Stage, which is "Closed Won" on every row, and the row caret) carry
   nothing. Dropping them narrows the layout, which is what makes the larger
   scale below possible: these tables have fixed column widths and do not
   reflow, so before this a harder zoom just clipped the right-hand columns. */
.feat-slide .wd-payees > div > span:nth-child(3),
.feat-slide .wd-payees > div > span:nth-child(4) { display: none; }
.feat-slide .wd-payees > div { grid-template-columns: 1.35fr 1.1fr 1fr 1fr 1fr; }

.feat-slide .sf-table .demo-tr > span:nth-child(6),
.feat-slide .sf-table .demo-tr > i:last-child { display: none; }
.feat-slide .sf-table .demo-tr { grid-template-columns: .34rem 1.5fr 1.2fr .85fr .85fr 1fr; }

/* The app is laid out small and magnified 1.9x to fill the window. Do NOT try
   to enlarge it by shrinking that box and scaling harder: the width percentage
   does not resolve against the window, so the app renders wider than the frame
   and the right-hand columns disappear behind overflow:hidden -- taking the
   cursor's target with them. The columns above are what buy the room; the type
   below is what spends it. */
.feat-slide .wd-payees > div { font-size: 0.34rem; }
.feat-slide .wd-payees b { font-size: 0.44rem; }
.feat-slide .wd-payees small { font-size: 0.32rem; }
.feat-slide .wd-payee-head { font-size: 0.3rem; }
.feat-slide .sf-table .demo-tr { font-size: 0.5rem; }
.feat-slide .snow-window .snow-result-row { font-size: 0.32rem; }
.feat-slide .snow-window .snow-result-head { font-size: 0.27rem; }

/* ==================== Guarantees, evidence column ====================
   Four hairline rows huddled at the top of a tall column read as cramped
   above and empty below. They are the run's receipts, so they get the size
   that says so. */
.feat-slide .evidence > a { padding: 0.5rem 0 !important; font-size: 0.78rem; }
.feat-slide .evidence > a b { font-size: 0.62rem; }
.feat-slide .evidence > .scene-label { margin-bottom: 0.3rem; }

/* ==================== BUILD ONCE ====================
   The animation is a faithful port of the Design composition and lives in a
   1920x1080 coordinate space that JS scales to the column width, so every
   inline px in bridge.js is authored at that size. The ledger sits outside
   the frame, in its own column. */
.bo { background: var(--ic-paper); }
/* The title is page markup, not part of the drawing, so it stays at .sec-h size
   instead of shrinking with the stage. The second clause arrives at the turn. */
.bo-title { margin: 0 0 1rem; }
.bo-title em { font-style: italic; color: var(--ic-accent-t); }
/* The title states what the whole panel is about, so it is whole from the
   start. It used to arrive with the run, its second half fading in when the
   primitives were found, which left the heading reading as a fragment for the
   first twelve seconds. */
.bo-t2 { opacity: 1; }
/* Inside the measure, like every other section. The composition was re-laid
   from 1920x1080 to 1220x840 so it fits the column and still renders around
   0.8 -- narrower and taller, using the vertical room instead of the width. */
.bo-grid {
  display: grid; gap: 0 2rem;
  grid-template-columns: minmax(0, 1fr) 15rem; align-items: center;
}
.bo-frame { position: relative; width: 100%; aspect-ratio: 1140 / 742; overflow: hidden; }
.bo-1920 { position: absolute; }
.bo-scene { background: var(--paper-raised); }
.bo-scene .scene-top { justify-content: space-between; }
.bo-scene-state { color: rgba(42,31,23,0.62); }
.bo-scene-state.is-alert { color: var(--ic-accent-t); }

.bo-ledger { border-left: 1px solid var(--ic-rule); padding-left: 1.35rem; }
.bo-ledger ol { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.bo-ledger li {
  position: relative; padding: 0 0 0 2rem; margin-bottom: 1.05rem;
  opacity: 0.26; transition: opacity 0.4s ease;
}
/* A CSS counter only counts rendered items, and the phone view shows one at a
   time -- so the number is data, not a counter. */
.bo-ledger li::before {
  content: attr(data-n); position: absolute; left: 0; top: 0.08rem;
  font: 0.68rem/1 var(--mono); letter-spacing: 0.08em; color: var(--ic-ink); opacity: 0.55;
}
.bo-ledger li.is-past { opacity: 0.42; }
.bo-ledger li.is-on { opacity: 1; }
.bo-ledger li.is-on::before { color: var(--ic-accent-t); opacity: 1; }
.bo-ledger b { display: block; font-weight: 500; font-size: 0.95rem; line-height: 1.32; }
.bo-ledger span {
  display: block; margin-top: 0.3rem; font-size: 0.85rem; line-height: 1.5;
  opacity: 0.68; max-height: 0; overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.35s ease;
}
.bo-ledger li.is-on span { max-height: 10rem; }

@media (max-width: 64rem) {
  .bo-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .bo-ledger { border-left: 0; border-top: 1px solid var(--ic-rule); padding: 0.9rem 0 0; }
  .bo-ledger .scene-label { display: none; }
  .bo-ledger ol { margin-top: 0; }
  .bo-ledger li { display: none; margin-bottom: 0; }
  .bo-ledger li.is-on { display: block; }
}

/* One fold, the way .feat and the research/team pair take one each. Same
   recipe: a definite height so the chain inside resolves in a single pass,
   min-height as the floor for a window too short to be worth it.

   The frame sizes by HEIGHT here rather than width -- it has a fixed aspect,
   so in a fold the height is the constraint and the width follows. */
@media (min-width: 48rem) {
  .bo {
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
    min-height: 34rem; display: flex; flex-direction: column;
  }
  /* .wrap centres with margin:0 auto, and an auto cross-axis margin cancels
     flex stretch -- without an explicit width the grid shrank to its content
     and the 1fr column collapsed to zero. */
  .bo > .wrap { flex: 0 0 auto; width: 100%; }
  /* minmax(0,1fr), not just min-height: a grid row is auto by default, so a
     child asking for height:100% of it resolves to zero. Same reason
     .feat-track carries it. */
  .bo > .bo-grid { flex: 1; min-height: 0; width: 100%; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  /* the frame is just the row's box; bridge.js fits and centres the stage */
  .bo-frame { height: 100%; width: 100%; aspect-ratio: auto; }
  .bo-ledger { align-self: center; }
}

/* ==================== PANEL FOOT ====================
   The tab strip sits under the panel. Three states: dim while the opening run
   plays, ready once it lands, engaged for good as soon as the reader picks
   anything. */
.feat { position: relative; }
.feat-carousel { position: relative; }
.feat-foot { margin-top: 0.9rem; }
/* The strip is legible from the start. It used to open at 10% and lift when
   the run landed, which read as the panel being disabled rather than as an
   invitation to watch first; the right-hand arrow still shimmers once the run
   lands, and that carries the invitation on its own. */

/* One title slot, fed by whichever slide is showing. The heading itself lives
   next to its slide in the markup; the panel moves it up here. */
.feat-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.16; letter-spacing: -0.01em; margin: 0; min-height: 1.16em; }
.feat-title em, .feat-slide .sec-h em { font-style: italic; color: var(--ic-accent-t); }
.bo-t2 { opacity: 1; }

/* ---- the arrows: lines at the panel's edges, not boxes in the strip ---- */
.feat-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 0.5rem 0.35rem; cursor: pointer; line-height: 0;
  color: rgba(42, 31, 23, 0.3); opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease, color 0.18s ease;
}
.feat-arrow svg { width: 0.85rem; height: 1.5rem; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feat-arrow.is-prev { left: 0.1rem; }
.feat-arrow.is-next { right: 0.1rem; }
.feat-arrow:hover, .feat-arrow:focus-visible { color: var(--ic-accent-t); }

/* Waiting to be explored: the right arrow alone, in the one blue, nudging
   rightwards until it is taken or a tab is picked. The keyframes have to carry
   the -50% themselves -- an animation on transform replaces the whole property,
   so leaving it out drops the arrow to the bottom of its own box. */
.feat.is-ready .feat-arrow.is-next {
  opacity: 1; pointer-events: auto; color: var(--ic-link);
  animation: feat-nudge 1.3s ease-in-out infinite;
}
.feat.is-ready .feat-arrow.is-next:hover { color: var(--ic-accent-t); animation-play-state: paused; }
@keyframes feat-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(0.3rem); }
}

/* Explored: both arrows, grey, highlighting on hover. */
.feat.is-engaged .feat-arrow { opacity: 1; pointer-events: auto; }

.

/* ---- the opening slide ---- */
/* No bounding box here: the drawing carries its own frame lines, and an outer
   border around the whole area just fenced it in. */
.bo-slide .product-scene { border: 0; background: transparent; min-height: 0; }
.bo-slide .scene-top { border-bottom: 1px solid var(--ic-rule); background: transparent; }
.bo-slide .bo-ledger { border: 0; padding: 0; margin: 0; list-style: none; }
.bo-slide .bo-ledger li { cursor: pointer; }
.bo-slide .bo-ledger li:hover { opacity: 0.7; }
.bo-slide .bo-ledger li.is-on:hover { opacity: 1; }
.bo-slide .bo-ledger li:focus-visible { outline: 1px solid var(--ic-accent); outline-offset: 3px; }
.bo-replay {
  /* Aligned to the ledger's text column, not centred on the copy column: the
     copy is ragged right, so its optical centre is left of the geometric one
     and a centred control reads as pushed right. */
  display: block; margin: 1.2rem 0 0 2rem; padding: 0.3rem 0; cursor: pointer;
  border: 0; background: none;
  font: 0.66rem/1 var(--mono); letter-spacing: 0.09rem; text-transform: uppercase;
  color: var(--ic-accent-t); opacity: 0; transition: opacity 0.5s ease, color 0.15s;
}
.bo-replay.is-in { opacity: 1; }
.bo-replay:hover { color: var(--ic-accent); }
.bo-slide .bo-frame { position: relative; width: 100%; height: 100%; aspect-ratio: auto; }
/* ==================== the phone's clip ====================
   Desktop never sees this element and never fetches its source; the stage is
   the real thing there. Below 48rem it is the other way round: the stage is
   taken out of the flow entirely rather than hidden, because height:100% in an
   auto-height grid row resolves to 0 and it was silently collapsing to nothing
   anyway. aspect-ratio gives the clip its own intrinsic height so the row does
   not need one. */
.bo-clip { display: none; }
@media (max-width: 48rem) {
  .bo-slide .bo-frame { display: none; }
  .bo-clip {
    display: block; width: 100%; height: auto;
    aspect-ratio: 1140 / 742; background: var(--ic-paper);
  }
  /* Watch, then read. Stacked, the copy column would otherwise come first and
     put the thing being described below the description. */
  .bo-slide .g-media { order: 0; }
  .bo-slide .g-copy { order: 1; margin-top: 1rem; }
}

/* The play caret: faint, centred on the drawing, offered only when a seek has
   parked the run part-way. */
.bo-slide .g-media { position: relative; }
.bo-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3.4rem; height: 3.4rem; padding: 0; cursor: pointer;
  border: 1px solid var(--ic-rule); border-radius: 50%;
  background: rgba(251, 246, 236, 0.82); color: var(--ic-ink);
  display: grid; place-items: center;
  opacity: 0; transition: opacity 0.3s ease, color 0.15s, border-color 0.15s;
}
.bo-play.is-in { opacity: 0.4; }
.bo-play:hover, .bo-play:focus-visible { opacity: 0.95; color: var(--ic-accent-t); border-color: var(--ic-accent); }
.bo-play svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }


/* ======================= DRAFT 5 FEATURE PANEL =======================
   One pinned component: visual on the left, horizontal expanding tabs and
   active copy on the right. This is the only draft override for this section.
   ==================================================================== */
@media (min-width: 48.001rem) {
  .feat {
    display: block; height: 500vh; min-height: 0; padding: 0;
    scroll-margin-top: var(--nav-h);
  }
  .feat > .wrap {
    position: sticky; top: var(--nav-h); flex: none;
    width: 100%; height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h));
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 1.25rem; padding-bottom: 1.25rem;
  }
  .feat-head { flex: 0 0 auto; margin-bottom: 1.25rem; }
  .feat-carousel {
    --side-width: clamp(23rem, 29.1vw, 26.25rem);
    position: relative; flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) var(--side-width);
    grid-template-rows: minmax(0, 1fr); overflow: hidden;
    border: 1px solid var(--ic-rule); background: var(--paper-raised);
  }
  .feat-track {
    grid-column: 1; grid-row: 1; min-height: 0; height: 100% !important;
    display: grid; grid-template-rows: minmax(0, 1fr); overflow: visible;
    padding: 1.15rem; border-right: 1px solid var(--ic-rule);
    background: var(--ic-paper);
  }
  .feat-slide { height: 100%; min-height: 0; align-self: stretch; }
  .feat-slide .card-block {
    position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 0;
  }
  .feat-slide .g-media { width: 100%; height: 100%; min-height: 0; align-self: stretch; }
  .feat-slide .product-scene,
  .feat-slide .stage-hero { width: 100%; height: 100%; min-height: 0; }
  .feat-foot {
    grid-column: 2; grid-row: 1; align-self: stretch;
    width: 100%; height: 100%; margin: 0; padding: 1.15rem 1.35rem;
    background: var(--paper-raised);
  }
  .feat-tabs {
    display: flex; flex-direction: row; align-items: stretch;
    width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--ic-rule);
  }
  .feat-tabs button,
  .feat-tabs button:last-child {
    position: relative; flex: .72 1 0; min-width: 0; min-height: 0;
    margin: 0 0 -1px; padding: .8rem .35rem .9rem;
    border: 0; border-bottom: 2px solid transparent; background: transparent;
    text-align: left; transition: flex .28s ease, padding .28s ease, border-color .18s ease;
  }
  .feat-tabs button::before { display: none; }
  .feat-tabs button[aria-selected="true"] {
    flex: 2.35 1 0; padding-left: .7rem; padding-right: .7rem;
    border-bottom-color: var(--ic-accent); background: transparent;
  }
  .feat-tabs button b {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 400 .58rem/1.25 var(--mono); letter-spacing: .025em; color: var(--ic-ink); opacity: .55;
  }
  .feat-tabs button[aria-selected="true"] b { font-size: .68rem; color: var(--ic-accent-t); opacity: 1; }
  .feat-tabs button small { display: none; margin-top: .35rem; font-size: .68rem; line-height: 1.35; opacity: .58; }
  .feat-tabs button[aria-selected="true"] small { display: block; }
  .feat-tab-note { display: none !important; }
  .feat-slide .g-copy {
    position: absolute; left: calc(100% + 1.15rem + 1px); top: 6.75rem;
    width: var(--side-width); max-height: calc(100% - 7.25rem); overflow: auto;
    padding: 0 1.35rem; align-self: auto;
  }
  .feat-slide .g-copy .sec-h { margin-top: 0; font-size: clamp(1.45rem, 2.2vw, 2rem); }
  .feat-slide .g-copy .lede { font-size: .95rem; line-height: 1.55; }
  .feat-slide .stat-block { margin-top: 1.5rem; }
  .feat-arrow { display: none !important; }
  .compiler-slide { display: flex; align-items: flex-start; }
}
.compiler-panel { width: 100%; border: 0; background: transparent; }
.compiler-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ic-paper); }
.compiler-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--ic-paper); pointer-events: none; }
@media (max-width: 48rem) {
  .compiler-panel { margin-bottom: 1rem; }
}
@media (min-width: 48.001rem) {
  .feat-tabs button small { display: none !important; }
  .feat-tabs button[aria-selected="true"] small { display: block !important; }
}
@media (min-width: 48.001rem) {
  .feat { height: 600vh; }
}

/* Visual cleanup: labels-only tabs and one quiet presentation language across
   all five states. Detail remains inside the actual charts and evidence. */
@media (min-width: 48.001rem) {
  .feat-tabs button { flex: .9 1 0; text-align: center; padding: .85rem .35rem .9rem; }
  .feat-tabs button[aria-selected="true"] { flex: 1.55 1 0; padding-left: .5rem; padding-right: .5rem; }
  .feat-tabs button small,
  .feat-tabs button[aria-selected="true"] small,
  .feat-tab-note { display: none !important; }
  .feat-slide .g-copy { top: 4.75rem; max-height: calc(100% - 5.25rem); }
}
.feat-slide .product-scene,
.feat-slide .stage-hero,
.feat-slide .g-media > .stage,
.feat-slide .g-media > .mock {
  border: 0; border-radius: 0; box-shadow: none; background: var(--ic-paper);
}
.feat-slide .scene-top { display: none; }
.feat-slide .mock-bar { display: none; }
.feat-slide .card-block { background: var(--ic-paper); }
.feat-slide .g-copy .sec-h { margin-bottom: .9rem; }
.feat-slide .g-copy .lede { margin-bottom: 0; color: rgba(42,31,23,.7); }
.compiler-slide { position: relative; }
.compiler-copy-detail {
  margin: 1rem 0 0; max-width: 36ch;
  font-size: .9rem; line-height: 1.6; color: rgba(42,31,23,.58); text-wrap: pretty;
}
@media (min-width: 48.001rem) {
  .compiler-slide { align-items: center; }
}
@media (min-width: 48.001rem) {
  .feat-foot { padding-top: 2rem; padding-bottom: 2rem; }
  .feat-tabs button,
  .feat-tabs button:last-child { padding-top: 1.1rem; padding-bottom: 1.15rem; }
  .feat-slide .g-copy { top: 6.25rem; max-height: calc(100% - 6.75rem); }
}
@media (min-width: 48.001rem) {
  .feat-carousel {
    flex: 0 0 auto;
    width: 100%;
    height: clamp(26rem, 66vh, 38rem);
    height: clamp(26rem, 66svh, 38rem);
  }
}
@media (min-width: 48.001rem) {
  .feat > .wrap { justify-content: flex-start; }
}
@media (min-width: 48.001rem) {
  .feat-head { margin-bottom: 0; }
  .feat-carousel { margin-top: auto; margin-bottom: auto; }
}


/* Tab redesign: three concise claims, one visual grammar. */
[data-feature-obsolete] { display: none !important; }
.feat-kicker {
  display: block; margin-bottom: 1rem;
  font: 500 .625rem/1.2 var(--mono); letter-spacing: .12em;
  color: var(--ic-accent-t);
}
.feat-stats { display: flex; gap: 2rem; margin-top: auto; padding-top: 1.35rem; border-top: 1px solid var(--ic-rule); }
.feat-stats span { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.feat-stats small { font: 500 .5625rem/1.2 var(--mono); letter-spacing: .1em; opacity: .52; }
.feat-stats b { font: 400 1.7rem/1 var(--serif); color: var(--ic-ink); }
.feat-stats span:last-child b { color: var(--ic-accent-t); }
.feat-stats em { font: 400 .625rem/1.3 var(--mono); font-style: normal; opacity: .48; }
.cost-runs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .72rem; padding: 1.1rem 1.25rem; border-top: 1px solid var(--ic-rule); }
.cost-row { display: grid; grid-template-columns: 9rem minmax(0,1fr) 4rem 3.5rem; gap: .8rem; align-items: center; font-size: .72rem; }
.cost-row span small { margin-left: .3rem; font: .55rem/1 var(--mono); opacity: .45; }
.cost-row > i { height: .55rem; background: rgba(42,31,23,.07); }
.cost-row > i b { display: block; width: calc(var(--cost) * 1%); height: 100%; background: rgba(42,31,23,.28); }
.cost-row em, .cost-row strong { font: 400 .62rem/1 var(--mono); font-style: normal; text-align: right; }
.cost-row.is-current { color: var(--ic-accent-t); }
.cost-row.is-current > i b { min-width: .65rem; background: var(--ic-accent); }
.verify-layout-simple { display: block; min-height: 0; }
.verify-layout-simple .criteria { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 1.25rem 1.5rem; }
.verify-layout-simple .criterion { grid-template-columns: 1rem minmax(0,1fr) 8.5rem; }
.verify-layout-simple .criterion em { text-align: right; }
.verify-layout-simple .criterion:nth-of-type(2) em::before { content: "SALESFORCE · 4 ROWS"; }
.verify-layout-simple .criterion:nth-of-type(3) em::before { content: "SNOWFLAKE · 90 DAYS"; }
.verify-layout-simple .criterion:nth-of-type(4) em::before { content: "ZENDESK · 2 LINKED"; }
.verify-layout-simple .criterion:nth-of-type(5) em::before { content: "POLICY v3.2 · § 4.1"; }
.verify-layout-simple .criterion em { font-size: 0; }
.verify-layout-simple .criterion em::before { font: 400 .55rem/1.3 var(--mono); letter-spacing: .04em; }
.verify-layout-simple .criterion.is-held div::after {
  content: "Write blocked — the 18% discount was not applied.";
  display: block; margin-top: .35rem; font: 400 .65rem/1.4 var(--sans); color: var(--ic-accent-t);
}

@media (min-width: 48.001rem) {
  .feat { height: 400vh; }
  .feat-carousel {
    display: flex; flex-direction: column;
    height: clamp(27rem, 68svh, 39rem);
    border: 1px solid var(--ic-rule); background: var(--ic-paper);
  }
  .feat-foot {
    order: -1; flex: 0 0 auto; width: 100%; height: auto;
    padding: 0; border-bottom: 1px solid var(--ic-rule); background: var(--ic-paper);
  }
  .feat-tabs { width: 100%; border: 0; }
  .feat-tabs button,
  .feat-tabs button:last-child {
    flex: 1 1 0; margin: 0 0 -1px; padding: .85rem 1.1rem .75rem;
    border-right: 1px solid var(--ic-rule); border-bottom: 2px solid transparent;
    text-align: left;
  }
  .feat-tabs button:last-child { border-right: 0; }
  .feat-tabs button[aria-selected="true"] { flex: 1 1 0; padding: .85rem 1.1rem .75rem; border-bottom-color: var(--ic-accent); }
  .feat-tabs button b,
  .feat-tabs button[aria-selected="true"] b { font-size: .6875rem; letter-spacing: .1em; }
  .feat-tabs button small,
  .feat-tabs button[aria-selected="true"] small {
    display: block !important; margin-top: .3rem; font: 400 .625rem/1.3 var(--mono);
    color: var(--ic-ink); opacity: .35;
  }
  .feat-tabs button[aria-selected="true"] small { color: var(--ic-accent-t); opacity: .8; }
  .feat-track {
    flex: 1; width: 100%; height: auto !important; padding: 0; overflow: hidden;
    border: 0; background: var(--ic-paper);
  }
  .feat-slide,
  .compiler-slide { display: grid; grid-template-columns: minmax(18rem, 32.6%) minmax(0,1fr); align-items: stretch; }
  .feat-slide .card-block {
    display: grid; grid-template-columns: minmax(18rem, 32.6%) minmax(0,1fr);
    padding: 0; background: var(--ic-paper);
  }
  .feat-slide .g-copy {
    position: static; grid-column: 1; grid-row: 1; width: auto; max-height: none;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 1.75rem 1.75rem 1.6rem; overflow: visible;
    border-right: 1px solid var(--ic-rule);
  }
  .feat-slide .g-copy .sec-h { font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.18; }
  .feat-slide .g-copy .lede,
  .compiler-copy-detail { max-width: none; font-size: .8rem; line-height: 1.55; }
  .feat-slide .g-media,
  .compiler-panel {
    grid-column: 2; grid-row: 1; width: auto; height: auto;
    padding: 1.35rem; background: var(--paper-sunken);
  }
  .compiler-copy { grid-column: 1; grid-row: 1; }
  .compiler-stage { height: 100%; aspect-ratio: auto; border: 1px solid var(--ic-rule); }
  .feat-slide .product-scene {
    height: 100%; border: 1px solid var(--ic-rule) !important; background: var(--ic-paper);
  }
  .feat-slide .scene-top { display: flex; }
  .osworld-chart { min-height: 0; padding: 1rem 1.25rem; }
}

@media (max-width: 48rem) {
  .feat-stats { margin-top: 1.2rem; }
  .cost-row { grid-template-columns: 6.5rem minmax(0,1fr) 3.2rem; }
  .cost-row em { display: none; }
  .feat-slide .scene-top { display: flex; }
  .osworld-chart { min-height: 16rem; }
}

/* Stable tab geometry: selection is communicated by color and rule only. */
.feat-tabs button,
.feat-tabs button[aria-selected="true"] {
  flex: 1 1 0;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
@media (max-width: 48rem) {
  .feat-tabs button,
  .feat-tabs button[aria-selected="true"] {
    flex: 1 1 0; padding: .65rem .28rem .7rem;
  }
  .feat-tabs button b,
  .feat-tabs button[aria-selected="true"] b {
    font-size: .625rem; letter-spacing: .03em;
  }
}
@media (max-width: 23.75rem) {
  .feat-tabs button,
  .feat-tabs button[aria-selected="true"] { padding: .65rem .18rem .7rem; }
  .feat-tabs button b,
  .feat-tabs button[aria-selected="true"] b { font-size: .5625rem; }
}

/* Final feature composition: visual left, tabs and copy right. */
@media (min-width: 48.001rem) {
  .feat-carousel {
    --side-width: clamp(23rem, 29.1vw, 26.25rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-width);
    grid-template-rows: minmax(0, 1fr);
  }
  .feat-track {
    grid-column: 1; grid-row: 1;
    width: auto; height: 100% !important;
    padding: 1.15rem; overflow: visible;
    border-right: 1px solid var(--ic-rule);
  }
  .feat-foot {
    order: initial;
    grid-column: 2; grid-row: 1;
    align-self: stretch;
    width: 100%; height: 100%;
    padding: 1.15rem 1.35rem;
    border-bottom: 0;
    background: var(--paper-raised);
  }
  .feat-tabs {
    display: flex; width: 100%;
    border-bottom: 1px solid var(--ic-rule);
  }
  .feat-tabs button,
  .feat-tabs button:last-child,
  .feat-tabs button[aria-selected="true"] {
    flex: 1 1 0;
    padding: .8rem .35rem .9rem;
    border-right: 0;
    border-bottom: 2px solid transparent;
    text-align: left;
  }
  .feat-tabs button[aria-selected="true"] { border-bottom-color: var(--ic-accent); }
  .feat-slide,
  .compiler-slide {
    display: block;
    height: 100%;
  }
  .feat-slide .card-block {
    position: relative;
    display: block;
    width: 100%; height: 100%;
    padding: 0;
  }
  .feat-slide .g-media,
  .compiler-panel {
    position: static;
    width: 100%; height: 100%;
    padding: 0;
    background: var(--ic-paper);
  }
  .feat-slide .g-copy {
    position: absolute;
    left: calc(100% + 1.15rem + 1px);
    top: 6.5rem;
    width: var(--side-width);
    max-height: calc(100% - 7rem);
    padding: 0 1.35rem;
    border-right: 0;
    overflow: auto;
  }
  .compiler-copy { grid-column: auto; grid-row: auto; }
  .compiler-stage { width: 100%; height: 100%; }
}


/* Tabs span the component; active copy remains beside the visual. */
@media (min-width: 48.001rem) {
  .feat-carousel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-width);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .feat-foot {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: auto;
    padding: 0;
    border-bottom: 1px solid var(--ic-rule);
    background: var(--ic-paper);
  }
  .feat-tabs button,
  .feat-tabs button:last-child,
  .feat-tabs button[aria-selected="true"] {
    padding: .85rem 1.1rem .75rem;
    border-right: 1px solid var(--ic-rule);
  }
  .feat-tabs button:last-child { border-right: 0; }
  .feat-track {
    grid-column: 1;
    grid-row: 2;
    padding: 1.15rem;
  }
  .feat-slide .g-copy {
    left: calc(100% + 1.15rem + 1px);
    top: 0;
    max-height: 100%;
    padding-top: 1.75rem;
    padding-bottom: 1.6rem;
  }
}


/* Align the content split to the second divider in the three-column tab rail. */
@media (min-width: 48.001rem) {
  .feat-carousel { --side-width: 33.333333%; }
}


/* Use the same explicit thirds for both tab and content grid lines. */
@media (min-width: 48.001rem) {
  .feat-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feat-tabs button,
  .feat-tabs button:last-child,
  .feat-tabs button[aria-selected="true"] {
    width: 100%;
    min-width: 0;
    flex: none;
    box-sizing: border-box;
  }
}


/* Recess the visual side; keep the copy side on the primary paper. */
@media (min-width: 48.001rem) {
  .feat-track { background: var(--paper-sunken); }
  .feat-foot,
  .feat-slide .g-copy { background: var(--ic-paper); }
  .compiler-stage,
  .feat-slide .product-scene { background: var(--ic-paper); }
}


/* Mockup-aligned verification report and balanced cost proof. */
.verify-intro,
.cost-head,
.verify-foot,
.cost-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--mono);
}
.verify-intro { padding-bottom: .75rem; }
.verify-intro span,
.cost-head span { font-size: .5625rem; letter-spacing: .12em; color: rgba(42,31,23,.55); }
.verify-intro small,
.cost-head small { font-size: .5625rem; color: rgba(42,31,23,.44); }
.verify-layout-simple .criteria { justify-content: flex-start; }
.verify-layout-simple .criterion {
  grid-template-columns: 1rem minmax(0,1fr) 8.5rem;
  align-items: baseline; padding: .8rem 0;
  border-top: 1px solid var(--ic-rule); border-bottom: 0;
}
.verify-layout-simple .criterion-mark {
  display: block; width: auto; height: auto; margin: 0;
  border: 0; border-radius: 0; font-size: .7rem;
}
.verify-layout-simple .criterion.is-held {
  margin: 0 -.75rem; padding: .85rem .75rem;
  border-top: 1px solid var(--ic-accent);
  border-bottom: 1px solid var(--ic-accent);
  background: var(--ic-tint);
}
.verify-foot,
.cost-foot {
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid var(--ic-rule);
  font-size: .5rem; letter-spacing: .05em; color: rgba(42,31,23,.45);
}
.cost-head { padding-bottom: .15rem; }
.cost-head span { color: var(--ic-ink); }
.cost-head small { text-align: right; color: var(--ic-accent-t); }
.cost-runs { gap: .58rem; padding: .95rem 1.25rem .8rem; }
.cost-runs > .scene-label { margin-top: .15rem; }
.cost-row { padding: .08rem 0; }
.cost-foot { padding-top: .65rem; }
.osworld-chart { flex: 1.12; justify-content: center; }
.cost-runs { flex: .88; }

/* Score and workflow-cost bars share one continuous, restrained sequence. */
.cost-row > i b {
  transform: scaleX(0); transform-origin: left;
}
.osworld-proof.is-visible .cost-row > i b {
  animation: cost-fill .8s cubic-bezier(.2,.75,.25,1) forwards;
}
.osworld-proof.is-visible .osworld-row:nth-of-type(2) > span i { animation-delay: .08s; }
.osworld-proof.is-visible .osworld-row:nth-of-type(3) > span i { animation-delay: .18s; }
.osworld-proof.is-visible .osworld-row:nth-of-type(4) > span i { animation-delay: .28s; }
.osworld-proof.is-visible .osworld-row:nth-of-type(5) > span i { animation-delay: .38s; }
.osworld-proof.is-visible .cost-row:nth-of-type(3) > i b { animation-delay: .5s; }
.osworld-proof.is-visible .cost-row:nth-of-type(4) > i b { animation-delay: .62s; }
.osworld-proof.is-visible .cost-row:nth-of-type(5) > i b { animation-delay: .74s; }
@keyframes cost-fill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .cost-row > i b { transform: scaleX(1); animation: none !important; }
}
@media (max-width: 64rem) and (min-width: 48.001rem) {
  .osworld-chart { padding: .7rem 1rem; }
  .osworld-row { padding: .5rem 0; }
  .osworld-row.is-icarus { padding-bottom: .7rem; }
  .cost-runs { padding: .7rem 1rem .65rem; gap: .4rem; }
  .cost-head small { max-width: 13rem; }
}
@media (max-width: 48rem) {
  .cost-head { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .cost-head small { text-align: left; }
  .verify-intro { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .verify-layout-simple .criterion { grid-template-columns: 1rem minmax(0,1fr); }
  .verify-layout-simple .criterion em { grid-column: 2; text-align: left; }
}


/* Cleaner copy rhythm across all three right-hand narratives. */
@media (min-width: 48.001rem) {
  .feat-slide .g-copy {
    padding: 2rem clamp(1.75rem, 2.4vw, 2.35rem) 1.8rem;
  }
  .feat-slide .g-copy .feat-kicker { margin: 0 0 1.15rem; }
  .feat-slide .g-copy .sec-h { margin: 0 0 1rem; }
  .feat-slide .g-copy .lede { margin: 0; line-height: 1.62; }
  .feat-slide .g-copy .compiler-copy-detail { margin: .9rem 0 0; }
  .feat-slide .g-copy .feat-stats { margin-top: auto; }
}

/* OSWorld score: one dominant Icarus ring with quiet comparison figures. */
.score-proof {
  flex: 1.05; min-height: 0; display: flex; flex-direction: column;
  padding: 1rem 1.25rem 1.1rem;
}
.score-head {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--ic-rule);
  font-family: var(--mono);
}
.score-head span { font-size: .5625rem; letter-spacing: .12em; color: rgba(42,31,23,.55); }
.score-head small { font-size: .5625rem; color: rgba(42,31,23,.44); }
.score-body {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(8rem, .82fr) minmax(11rem, 1.18fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  padding-top: .9rem;
}
.score-ring {
  --score-angle: 0deg;
  position: relative; justify-self: center;
  width: clamp(7.5rem, 13vw, 10.5rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--ic-accent) var(--score-angle), rgba(42,31,23,.09) 0);
}
.score-ring::after {
  content: ""; position: absolute; inset: .7rem; border-radius: 50%;
  background: var(--ic-paper);
}
.score-ring > div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.score-ring small { font: 500 .55rem/1 var(--mono); letter-spacing: .12em; color: var(--ic-accent-t); }
.score-ring strong { margin: .35rem 0 .22rem; font: 400 clamp(1.65rem,3vw,2.35rem)/1 var(--serif); color: var(--ic-accent-t); }
.score-ring span { max-width: 8rem; font: .5rem/1.3 var(--mono); opacity: .48; }
.score-comparison { border-top: 1px solid var(--ic-rule); }
.score-comparison > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .72rem 0; border-bottom: 1px solid var(--ic-rule);
}
.score-comparison span { font-size: .7rem; }
.score-comparison span small { margin-left: .35rem; font: .5rem/1 var(--mono); opacity: .4; }
.score-comparison strong { font: 400 .78rem/1 var(--mono); }
.score-comparison p { display: flex; justify-content: space-between; margin: .75rem 0 0; font: .55rem/1.2 var(--mono); opacity: .52; }
.score-comparison p b { color: var(--ic-accent-t); font-weight: 500; }
.osworld-proof.is-visible .score-ring { animation: score-ring-in 1s .08s cubic-bezier(.2,.75,.25,1) forwards; }
.osworld-proof.is-visible .score-comparison > div,
.osworld-proof.is-visible .score-comparison p {
  opacity: 0; transform: translateY(.25rem);
  animation: score-number-in .4s ease forwards;
}
.osworld-proof.is-visible .score-comparison > div:nth-child(1) { animation-delay: .2s; }
.osworld-proof.is-visible .score-comparison > div:nth-child(2) { animation-delay: .3s; }
.osworld-proof.is-visible .score-comparison > div:nth-child(3) { animation-delay: .4s; }
.osworld-proof.is-visible .score-comparison p { animation-delay: .5s; }
@keyframes score-ring-in { to { --score-angle: 324.36deg; } }
@keyframes score-number-in { to { opacity: 1; transform: none; } }

/* Verification follows the mockup's single hairline list—no inherited cards. */
.feat-slide .verify-layout-simple .criteria {
  height: 100%; padding: 1.3rem 1.5rem 1rem;
  justify-content: flex-start; gap: 0; overflow: visible;
}
.feat-slide .verify-layout-simple .verify-intro { flex: 0 0 auto; padding: 0 0 .85rem; }
.feat-slide .verify-layout-simple .criterion {
  flex: 0 0 auto; min-height: 0;
  grid-template-columns: 1rem minmax(0,1fr) 8.5rem;
  gap: .75rem; align-content: initial; align-items: baseline;
  margin: 0; padding: .82rem 0;
  border: 0; border-top: 1px solid var(--ic-rule);
  border-radius: 0; background: transparent;
}
.feat-slide .verify-layout-simple .criterion b { font-size: .75rem; line-height: 1.4; }
.feat-slide .verify-layout-simple .criterion small { margin-top: .18rem; font-size: .61rem; line-height: 1.45; }
.feat-slide .verify-layout-simple .criterion.is-held {
  margin: 0 -.75rem; padding: .86rem .75rem;
  border: 0; border-top: 1px solid var(--ic-accent);
  border-bottom: 1px solid var(--ic-accent);
  border-radius: 0; background: var(--ic-tint);
}
.feat-slide .verify-layout-simple .verify-foot {
  flex: 0 0 auto; margin-top: auto; padding-top: .85rem;
}
@media (prefers-reduced-motion: reduce) {
  .score-ring { --score-angle: 324.36deg; animation: none !important; }
  .score-comparison > div, .score-comparison p { opacity: 1 !important; transform: none !important; animation: none !important; }
}
@media (max-width: 64rem) and (min-width: 48.001rem) {
  .score-proof { padding: .75rem 1rem; }
  .score-body { gap: 1.1rem; padding-top: .6rem; }
  .score-ring { width: clamp(6.5rem, 12vw, 8rem); }
  .score-comparison > div { padding: .5rem 0; }
  .feat-slide .verify-layout-simple .criteria { padding: .8rem 1rem .7rem; }
  .feat-slide .verify-layout-simple .criterion { padding: .55rem 0; }
  .feat-slide .verify-layout-simple .criterion.is-held { margin: 0 -.5rem; padding: .6rem .5rem; }
}
@media (max-width: 48rem) {
  .score-body { grid-template-columns: 1fr; }
  .score-ring { width: 9rem; }
}


@property --score-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}


/* The copy is positioned from the left-stage box, so its width must be half
   that stage plus one gutter to equal the carousel's right-hand third. */
@media (min-width: 48.001rem) {
  .feat-slide .g-copy {
    bottom: 0;
    width: calc(50% + 1.15rem);
    height: 100%;
    max-height: none;
    box-sizing: border-box;
    padding: clamp(1.6rem, 3.6vh, 2.35rem) clamp(2rem, 2.8vw, 2.6rem);
  }
  .feat-slide .g-copy .feat-kicker { margin-bottom: clamp(.9rem, 2vh, 1.3rem); }
  .feat-slide .g-copy .sec-h { max-width: 100%; margin-bottom: clamp(.85rem, 1.8vh, 1.2rem); }
  .feat-slide .g-copy .lede { max-width: 100%; }
  .feat-slide .g-copy .feat-stats {
    width: 100%; margin-top: auto; padding-top: clamp(1rem, 2.4vh, 1.5rem);
  }
}
.score-ring > div { max-width: 82%; }
.score-ring small { line-height: 1.25; }
.score-ring span { max-width: none; }
.score-comparison p { align-items: baseline; }
.score-comparison p span { font: .52rem/1.2 var(--mono); }
@keyframes score-ring-in { to { --score-angle: 324.72deg; } }


/* Larger narratives and evenly distributed proof metrics. */
@media (min-width: 48.001rem) {
  .feat-slide .g-copy .sec-h {
    font-size: clamp(1.65rem, 2.2vw, 2rem);
    line-height: 1.17;
  }
  .feat-slide .g-copy .lede,
  .feat-slide .g-copy .compiler-copy-detail {
    font-size: .9rem;
    line-height: 1.62;
  }
}
.feat-stats { width: 100%; gap: 0; }
.feat-stats span {
  flex: 1 1 0; align-items: center; justify-content: flex-start;
  padding: 0 .75rem; text-align: center;
}
.feat-stats span + span { border-left: 1px solid var(--ic-rule); }
.feat-stats small,
.feat-stats em { width: 100%; }

/* Run-by-run compiler summary. The first two forms resolve and strike through
   before the final reusable workflow settles. */
.compile-progress {
  width: 100%; margin-top: auto; padding-top: 1.35rem;
  border-top: 1px solid var(--ic-rule);
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: .45rem; align-items: center;
}
.compile-progress > i { font: 400 .7rem/1 var(--mono); font-style: normal; opacity: .28; }
.compile-run {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: .38rem; padding: .3rem .15rem; text-align: center;
}
.compile-run small { font: 500 .5rem/1.2 var(--mono); letter-spacing: .09em; opacity: .48; }
.compile-run b { position: relative; white-space: nowrap; font: 400 .76rem/1.2 var(--mono); }
.compile-run-one b::after,
.compile-run-two b::after {
  content: ""; position: absolute; left: -.08rem; right: -.08rem; top: 50%;
  height: 1px; background: var(--ic-accent-t);
  transform: scaleX(0); transform-origin: left;
}
.compile-run-one { animation: compile-run-one 6s ease-in-out infinite; }
.compile-run-two { opacity: .26; animation: compile-run-two 6s ease-in-out infinite; }
.compile-run-three { opacity: .26; animation: compile-run-three 6s ease-in-out infinite; }
.compile-run-one b::after { animation: compile-strike-one 6s ease-in-out infinite; }
.compile-run-two b::after { animation: compile-strike-two 6s ease-in-out infinite; }
@keyframes compile-run-one {
  0%, 25% { opacity: 1; } 36%, 100% { opacity: .38; }
}
@keyframes compile-run-two {
  0%, 30% { opacity: .26; } 38%, 58% { opacity: 1; } 68%, 100% { opacity: .38; }
}
@keyframes compile-run-three {
  0%, 62% { opacity: .26; } 72%, 100% { opacity: 1; }
}
@keyframes compile-strike-one {
  0%, 25% { transform: scaleX(0); } 34%, 100% { transform: scaleX(1); }
}
@keyframes compile-strike-two {
  0%, 57% { transform: scaleX(0); } 66%, 100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .compile-run-one, .compile-run-two { opacity: .38; animation: none; }
  .compile-run-three { opacity: 1; animation: none; }
  .compile-run-one b::after, .compile-run-two b::after { transform: scaleX(1); animation: none; }
}


/* Let the verification report occupy the complete visual height with one
   consistent row track for each condition. */
.feat-slide .verify-layout-simple .criteria {
  display: grid;
  grid-template-rows: auto repeat(4, minmax(0, 1fr)) auto;
  height: 100%;
}
.feat-slide .verify-layout-simple .criterion {
  height: 100%;
  align-content: center;
  padding-top: clamp(.72rem, 1.7vh, 1rem);
  padding-bottom: clamp(.72rem, 1.7vh, 1rem);
}
.feat-slide .verify-layout-simple .verify-foot {
  margin-top: 0;
  padding-bottom: .1rem;
}
@media (max-width: 64rem) and (min-width: 48.001rem) {
  .feat-slide .verify-layout-simple .criteria {
    grid-template-rows: auto repeat(4, minmax(0, 1fr)) auto;
  }
  .feat-slide .verify-layout-simple .criterion {
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
}


/* Resolve the verification body's height explicitly so its four rows stretch. */
.feat-slide .verify-scene {
  display: flex;
  flex-direction: column;
}
.feat-slide .verify-layout-simple {
  flex: 1 1 0;
  width: 100%;
  height: auto;
  min-height: 0;
}
.feat-slide .verify-layout-simple .criteria {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto repeat(4, minmax(4rem, 1fr)) auto;
}
.feat-slide .verify-layout-simple .criterion {
  min-height: 4rem;
  align-content: center;
}
@media (max-width: 64rem) and (min-width: 48.001rem) {
  .feat-slide .verify-layout-simple .criteria {
    grid-template-rows: auto repeat(4, minmax(3.4rem, 1fr)) auto;
  }
  .feat-slide .verify-layout-simple .criterion { min-height: 3.4rem; }
}


/* Collapse the legacy evidence column completely in the single-column report. */
.feat-slide .verify-layout.verify-layout-simple {
  display: block;
  grid-template-columns: minmax(0, 1fr);
}
.feat-slide .verify-layout-simple > .criteria {
  display: grid;
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.feat-slide .verify-layout-simple .criterion {
  width: 100%;
  box-sizing: border-box;
}




/* Briefly hold the combined Research and Team slide before the Join/footer. */
@media (min-width: 64.0625rem) and (prefers-reduced-motion: no-preference) {
  .fold-pair-pin {
    height: calc(175vh - var(--nav-h));
    height: calc(175svh - var(--nav-h));
  }
  .fold-pair-pin > .fold-pair {
    position: sticky;
    top: var(--nav-h);
  }
}


/* ================= MOBILE: ONE PINNED FEATURE SCREEN ================= */
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .feat.section {
    height: 400vh;
    height: 400svh;
    min-height: 0;
    padding: 0;
  }
  .feat > .wrap {
    position: sticky;
    top: var(--nav-h);
    width: 100%;
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: .55rem;
    padding-bottom: .55rem;
    overflow: hidden;
  }
  .feat-head { flex: 0 0 auto; margin: 0 0 .5rem; }
  .feat-title { min-height: 0; font-size: clamp(1.12rem, 5.2vw, 1.35rem); line-height: 1.12; }
  .feat-carousel {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }
  .feat-foot { flex: 0 0 auto; margin: 0 0 .45rem; }
  .feat-tab-note { display: none !important; }
  .feat-tabs button,
  .feat-tabs button[aria-selected="true"] { padding: .52rem .25rem .58rem; }
  .feat-tabs button small { display: none !important; }
  .feat-track {
    flex: 1 1 0;
    min-height: 0;
    height: auto !important;
    overflow: hidden;
  }
  .feat-slide,
  .feat-slide[data-on] {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* Every story is visual first, then its short explanation. */
  .feat-slide .card-block,
  .compiler-slide {
    width: 100%; height: 100%; min-height: 0;
    display: flex; flex-direction: column;
    padding: 0;
  }
  .feat-slide .g-media,
  .compiler-panel {
    order: 0; flex: 0 0 57%; width: 100%; min-height: 0;
    padding: .55rem; overflow: hidden;
    background: var(--paper-sunken);
  }
  .compiler-panel { flex-basis: 48%; }
  .feat-slide .g-copy {
    order: 1; flex: 1 1 0; min-height: 0;
    width: 100%; max-width: none;
    display: flex; flex-direction: column;
    padding: .75rem .8rem .2rem;
    overflow: hidden;
  }
  .feat-slide .g-copy .feat-kicker {
    margin: 0 0 .4rem; font-size: .5rem;
  }
  .feat-slide .g-copy .sec-h {
    margin: 0 0 .42rem; font-size: clamp(1.05rem, 5vw, 1.25rem); line-height: 1.15;
  }
  .feat-slide .g-copy .lede,
  .feat-slide .g-copy .compiler-copy-detail {
    margin: 0; font-size: .75rem; line-height: 1.4;
  }
  .compiler-copy-detail { margin-top: .35rem !important; }
  .feat-slide .g-copy .feat-stats,
  .compile-progress {
    margin-top: auto; padding-top: .5rem;
  }
  .feat-stats b { font-size: 1.25rem; }
  .feat-stats small, .feat-stats em { font-size: .45rem; }
  .compile-run b { font-size: .62rem; }
  .compile-run small { font-size: .42rem; }
  .compiler-stage {
    width: 100%; height: 100%; aspect-ratio: auto;
    border: 1px solid var(--ic-rule);
  }

  /* Costs less: retain the rank, peers, and three-run reduction. */
  .score-proof { flex: 1 1 52%; padding: .5rem .65rem; }
  .score-head { padding-bottom: .38rem; }
  .score-head small,
  .score-comparison span small,
  .score-comparison p { display: none; }
  .score-body {
    grid-template-columns: minmax(5.6rem, .8fr) minmax(8rem, 1.2fr);
    gap: .75rem; padding-top: .35rem;
  }
  .score-ring { width: clamp(5.4rem, 24vw, 6.5rem); }
  .score-ring::after { inset: .45rem; }
  .score-ring small { font-size: .42rem; }
  .score-ring strong { margin: .2rem 0 .1rem; font-size: 1.45rem; }
  .score-ring span { font-size: .42rem; }
  .score-comparison > div { padding: .32rem 0; }
  .score-comparison > div:nth-child(3) { display: none; }
  .score-comparison span { font-size: .58rem; }
  .score-comparison strong { font-size: .62rem; }
  .cost-runs { flex: 1 1 48%; gap: .25rem; padding: .45rem .65rem .4rem; }
  .cost-head { display: block; padding: 0; }
  .cost-head span { font-size: .46rem; }
  .cost-head small,
  .cost-runs > .scene-label,
  .cost-foot { display: none; }
  .cost-row {
    grid-template-columns: 4.3rem minmax(0,1fr) 2.8rem 2.6rem;
    gap: .4rem; padding: .08rem 0;
  }
  .cost-row span { font-size: .58rem; }
  .cost-row span small { display: none; }
  .cost-row em, .cost-row strong { display: block; font-size: .52rem; }

  /* Verifies: condition names and the held write are the mobile proof. */
  .feat-slide .verify-layout-simple .criteria {
    padding: .5rem .65rem;
    grid-template-rows: auto repeat(4, minmax(0,1fr));
  }
  .verify-intro { padding-bottom: .35rem; }
  .verify-intro small,
  .verify-foot,
  .verify-layout-simple .criterion small,
  .verify-layout-simple .criterion em,
  .verify-layout-simple .criterion.is-held div::after { display: none; }
  .feat-slide .verify-layout-simple .criterion,
  .feat-slide .verify-layout-simple .criterion.is-held {
    min-height: 0; padding-top: .4rem; padding-bottom: .4rem;
  }
  .feat-slide .verify-layout-simple .criterion b { font-size: .64rem; line-height: 1.28; }
  .feat-slide .verify-layout-simple .criterion {
    grid-template-columns: .75rem minmax(0,1fr);
    gap: .4rem;
  }
  .criterion-mark { font-size: .58rem !important; }
  .verify-intro span { font-size: .46rem; }
  .scene-top { min-height: 1.65rem; padding: .38rem .55rem; font-size: .43rem; }
}

@media (max-width: 23.75rem) and (prefers-reduced-motion: no-preference) {
  .feat-slide .g-media, .compiler-panel { flex-basis: 55%; }
  .compiler-panel { flex-basis: 46%; }
  .feat-slide .g-copy .compiler-copy-detail { display: none; }
}


/* Mobile readability pass: larger narrative copy and retained proof labels. */
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .feat-tabs button b,
  .feat-tabs button[aria-selected="true"] b {
    font-size: .6875rem;
    letter-spacing: .035em;
  }
  .feat-slide .g-media { flex-basis: 54%; }
  .compiler-panel { flex-basis: 52%; }
  .feat-slide .g-copy {
    padding: .8rem .9rem .3rem;
  }
  .feat-slide .g-copy .feat-kicker {
    margin-bottom: .48rem;
    font-size: .5625rem;
  }
  .feat-slide .g-copy .sec-h {
    margin-bottom: .5rem;
    font-size: clamp(1.2rem, 5.8vw, 1.42rem);
    line-height: 1.16;
  }
  .feat-slide .g-copy .lede {
    font-size: .875rem;
    line-height: 1.48;
  }
  .feat-slide .g-copy .compiler-copy-detail {
    margin-top: .42rem !important;
    font-size: .8125rem;
    line-height: 1.45;
  }
  .feat-stats small,
  .feat-stats em { font-size: .52rem; line-height: 1.3; }
  .feat-stats b { font-size: 1.4rem; }
  .compile-run small { font-size: .48rem; }
  .compile-run b { font-size: .7rem; }

  .score-ring small { font-size: .5rem; }
  .score-ring span { font-size: .5rem; }
  .score-comparison span { font-size: .65rem; }
  .score-comparison strong { font-size: .7rem; }
  .cost-head span { font-size: .52rem; }
  .cost-row span { font-size: .64rem; }
  .cost-row em,
  .cost-row strong { font-size: .58rem; }

  .feat-slide .verify-layout-simple .criterion b {
    font-size: .72rem;
    line-height: 1.32;
  }
  .verify-intro span { font-size: .52rem; }
  .criterion-mark { font-size: .64rem !important; }
  .scene-top { font-size: .5rem; }
}
@media (max-width: 23.75rem) and (prefers-reduced-motion: no-preference) {
  .feat-slide .g-copy .sec-h { font-size: 1.12rem; }
  .feat-slide .g-copy .lede { font-size: .8125rem; }
  .feat-slide .g-copy .compiler-copy-detail { font-size: .75rem; }
}


/* Give flex-driven mobile scenes a definite height inside the fixed visual slot. */
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .feat-slide .g-media > .verify-scene,
  .feat-slide .g-media > .osworld-proof {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .feat-slide .verify-layout.verify-layout-simple {
    display: block;
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .feat-slide .verify-layout-simple > .criteria {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}


/* Mobile Verifies is a full-width flex report, independent of desktop grids. */
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .feat-slide[data-feat-slide="Verifies"] .card-block,
  .feat-slide[data-feat-slide="Verifies"] .g-media,
  .feat-slide[data-feat-slide="Verifies"] .verify-scene,
  .feat-slide[data-feat-slide="Verifies"] .verify-layout-simple,
  .feat-slide[data-feat-slide="Verifies"] .criteria {
    grid-column: 1 / -1;
    align-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
  .feat-slide[data-feat-slide="Verifies"] .g-media {
    display: block;
  }
  .feat-slide[data-feat-slide="Verifies"] .verify-scene {
    display: flex;
  }
  .feat-slide[data-feat-slide="Verifies"] .criterion,
  .feat-slide[data-feat-slide="Verifies"] .criterion.is-held {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .feat-slide[data-feat-slide="Verifies"] .criterion > div {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .feat-slide[data-feat-slide="Verifies"] .criterion-mark {
    flex: 0 0 .75rem;
  }
}


/* Deterministic mobile geometry across short and tall phone viewports. */
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .feat-slide .card-block,
  .compiler-slide {
    --mobile-visual-h: 54%;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .compiler-slide { --mobile-visual-h: 52%; }

  .feat-slide .card-block > .g-media,
  .compiler-slide > .compiler-panel {
    position: absolute;
    inset: 0 0 auto;
    display: block;
    width: 100%;
    height: var(--mobile-visual-h);
    max-width: none;
    margin: 0;
    padding: .5rem;
    transform: none;
  }
  .feat-slide .card-block > .g-copy,
  .compiler-slide > .g-copy {
    position: absolute;
    inset: var(--mobile-visual-h) 0 0;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    padding: .75rem .9rem .3rem;
    overflow: hidden;
  }
  .feat-slide[data-feat-slide="Verifies"] .g-media,
  .feat-slide[data-feat-slide="Verifies"] .verify-scene,
  .feat-slide[data-feat-slide="Verifies"] .verify-layout-simple,
  .feat-slide[data-feat-slide="Verifies"] .criteria {
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
  }
  .feat-slide[data-feat-slide="Verifies"] .g-media {
    position: absolute;
  }
  .feat-slide[data-feat-slide="Verifies"] .verify-scene {
    height: 100%;
  }

  /* Split the cost visual evenly between score and workflow reduction. */
  .osworld-proof .score-proof { flex: 0 0 48%; }
  .osworld-proof .cost-runs { flex: 1 1 52%; }
  .osworld-proof .score-body {
    align-items: center;
    padding-top: .2rem;
  }
}

/* Short phones preserve the proof metrics by trimming secondary prose. */
@media (max-width: 48rem) and (max-height: 45rem) and (prefers-reduced-motion: no-preference) {
  .feat-slide .card-block { --mobile-visual-h: 49%; }
  .compiler-slide { --mobile-visual-h: 48%; }
  .feat > .wrap { padding-top: .35rem; padding-bottom: .35rem; }
  .feat-head { margin-bottom: .32rem; }
  .feat-title { font-size: 1.05rem; }
  .feat-foot { margin-bottom: .28rem; }
  .feat-tabs button,
  .feat-tabs button[aria-selected="true"] { padding-top: .42rem; padding-bottom: .46rem; }
  .feat-slide .card-block > .g-copy,
  .compiler-slide > .g-copy { padding: .55rem .78rem .2rem; }
  .feat-slide .g-copy .feat-kicker { display: none; }
  .feat-slide .g-copy .sec-h {
    margin-bottom: .35rem;
    font-size: 1.12rem;
  }
  .feat-slide .g-copy .lede {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: .8125rem;
    line-height: 1.38;
  }
  .feat-slide .g-copy .compiler-copy-detail { display: none; }
  .feat-slide .g-copy .feat-stats,
  .compile-progress { padding-top: .38rem; }
  .feat-stats b { font-size: 1.25rem; }
  .compile-progress { gap: .25rem; }
  .compile-run b { font-size: .64rem; }

  .score-proof { padding-top: .35rem; padding-bottom: .35rem; }
  .score-head { padding-bottom: .25rem; }
  .score-ring { width: 4.9rem; }
  .score-ring strong { font-size: 1.25rem; }
  .score-comparison > div { padding: .23rem 0; }
  .cost-runs { padding-top: .32rem; padding-bottom: .28rem; gap: .16rem; }
  .cost-row { padding: 0; }

  .feat-slide .verify-layout-simple .criteria { padding-top: .35rem; padding-bottom: .35rem; }
  .feat-slide .verify-layout-simple .criterion,
  .feat-slide .verify-layout-simple .criterion.is-held {
    padding-top: .3rem;
    padding-bottom: .3rem;
  }
}


/* Purpose-built mobile proofs avoid inheriting desktop scene geometry. */
.mobile-proof { display: none; }
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .feat-slide[data-feat-slide="Costs less"] .g-media > .osworld-proof,
  .feat-slide[data-feat-slide="Verifies"] .g-media > .verify-scene {
    display: none !important;
  }
  .feat-slide .g-media > .mobile-proof {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    background: var(--ic-paper);
    border: 1px solid var(--ic-rule);
    overflow: hidden;
  }
  .mobile-proof-head {
    min-width: 0; min-height: 1.8rem;
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .42rem .58rem; border-bottom: 1px solid var(--ic-rule);
    font: 500 .48rem/1.2 var(--mono); letter-spacing: .055em;
  }
  .mobile-proof-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-proof-head b { flex: 0 0 auto; color: var(--ic-accent-t); font-weight: 500; }

  /* Cost proof has explicit rows and cannot overrun its visual slot. */
  .mobile-cost-proof { flex-direction: column; }
  .mobile-score-line {
    flex: 1 1 0; min-height: 0;
    display: grid; grid-template-columns: minmax(5rem,.8fr) minmax(7rem,1.2fr);
    gap: .75rem; align-items: center; padding: .45rem .7rem;
  }
  .mobile-score-ring {
    --mobile-score: 0deg;
    position: relative; justify-self: center;
    width: clamp(4.7rem, 21vw, 5.8rem); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--ic-accent) var(--mobile-score), rgba(42,31,23,.09) 0);
  }
  .mobile-score-ring::before {
    content: ""; position: absolute; inset: .42rem; border-radius: 50%; background: var(--ic-paper);
  }
  .mobile-score-ring > div {
    position: relative; z-index: 1; display: flex; flex-direction: column;
    align-items: center; gap: .14rem; text-align: center;
  }
  .mobile-score-ring span {
    font: 500 .38rem/1.1 var(--mono); letter-spacing: .025em;
  }
  .mobile-score-ring span { color: var(--ic-accent-t); }
  .mobile-score-ring strong { font: 400 1.35rem/1 var(--serif); color: var(--ic-accent-t); }
  .mobile-score-peers { border-top: 1px solid var(--ic-rule); }
  .mobile-score-peers span {
    display: flex; justify-content: space-between; gap: .5rem;
    padding: .42rem 0; border-bottom: 1px solid var(--ic-rule);
    font-size: .62rem;
  }
  .mobile-score-peers b { font: 400 .66rem/1 var(--mono); }
  .mobile-cost-head {
    display: flex; justify-content: space-between; gap: .5rem;
    padding: .38rem .58rem; border-top: 1px solid var(--ic-rule); border-bottom: 1px solid var(--ic-rule);
    font: 500 .44rem/1.2 var(--mono); letter-spacing: .045em;
  }
  .mobile-cost-head b { color: var(--ic-accent-t); font-weight: 500; }
  .mobile-cost-row {
    flex: 0 0 auto;
    display: grid; grid-template-columns: 2.7rem minmax(0,1fr) 3rem 2.7rem;
    gap: .42rem; align-items: center; padding: .28rem .58rem;
    font: 400 .54rem/1.2 var(--mono);
  }
  .mobile-cost-row > i { height: .42rem; background: rgba(42,31,23,.07); overflow: hidden; }
  .mobile-cost-row > i b {
    display: block; width: calc(var(--mobile-cost) * 1%); height: 100%;
    background: rgba(42,31,23,.28); transform: scaleX(0); transform-origin: left;
  }
  .mobile-cost-row em { font-style: normal; text-align: right; }
  .mobile-cost-row strong { text-align: right; font-weight: 400; }
  .mobile-cost-row.is-final { color: var(--ic-accent-t); }
  .mobile-cost-row.is-final > i b { min-width: .45rem; background: var(--ic-accent); }
  .feat-slide[data-on] .mobile-score-ring {
    animation: mobile-score-in .8s ease forwards;
  }
  .feat-slide[data-on] .mobile-cost-row > i b {
    animation: mobile-cost-in .65s .45s ease forwards;
  }
  .feat-slide[data-on] .mobile-cost-row:nth-last-child(2) > i b { animation-delay: .58s; }
  .feat-slide[data-on] .mobile-cost-row:last-child > i b { animation-delay: .71s; }
  @keyframes mobile-score-in { to { --mobile-score: 324.72deg; } }
  @keyframes mobile-cost-in { to { transform: scaleX(1); } }

  /* Verification uses six full-width rows, with no desktop evidence column. */
  .mobile-verify-proof { flex-direction: column; }
  .mobile-verify-intro {
    display: flex; justify-content: space-between; gap: .5rem;
    padding: .38rem .58rem; font: 500 .46rem/1.2 var(--mono); letter-spacing: .05em;
  }
  .mobile-verify-intro small { font-size: .44rem; opacity: .48; }
  .mobile-verify-row {
    flex: 1 1 0; min-height: 0; width: 100%;
    display: grid; grid-template-columns: .8rem minmax(0,1fr);
    gap: .5rem; align-items: center; padding: .34rem .62rem;
    border-top: 1px solid var(--ic-rule);
    font-size: .7rem; line-height: 1.28;
    opacity: .25; transform: translateY(.18rem);
  }
  .mobile-verify-row i { font: 500 .66rem/1 var(--mono); font-style: normal; color: #41703F; }
  .mobile-verify-row small { display: block; margin-top: .18rem; font-size: .56rem; color: var(--ic-accent-t); }
  .mobile-verify-row.is-held {
    border-top-color: var(--ic-accent); border-bottom: 1px solid var(--ic-accent);
    background: var(--ic-tint);
  }
  .mobile-verify-row.is-held i { color: var(--ic-accent-t); }
  .feat-slide[data-on] .mobile-verify-row { animation: mobile-verify-in .9s ease forwards; }
  .feat-slide[data-on] .mobile-verify-row:nth-child(4) { animation-delay: .9s; }
  .feat-slide[data-on] .mobile-verify-row:nth-child(5) { animation-delay: 3s; }
  .feat-slide[data-on] .mobile-verify-row:nth-child(6) { animation-delay: 5.1s; }
  .feat-slide[data-on] .mobile-verify-row:nth-child(7) { animation-delay: 7.2s; }
  @keyframes mobile-verify-in { to { opacity: 1; transform: none; } }

}
@media (max-width: 48rem) and (max-height: 45rem) and (prefers-reduced-motion: no-preference) {
  .mobile-score-line { padding-top: .25rem; padding-bottom: .25rem; }
  .mobile-score-ring { width: 4.3rem; }
  .mobile-score-ring strong { font-size: 1.15rem; }
  .mobile-cost-row { padding-top: .2rem; padding-bottom: .2rem; }
  .mobile-verify-row { padding-top: .24rem; padding-bottom: .24rem; font-size: .66rem; }
  .mobile-verify-row small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-score-ring { --mobile-score: 324.72deg; }
  .mobile-cost-row > i b { transform: none; }
  .mobile-verify-row { opacity: 1; transform: none; }
}


/* Mobile product copy: compact enough to preserve the proof metrics. */
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .feat-title {
    font-size: clamp(.9rem, 4vw, 1rem);
    line-height: 1.12;
  }
  .feat-slide .g-copy .sec-h {
    font-size: clamp(1.12rem, 5.25vw, 1.32rem);
  }
  .feat-slide .g-copy .lede {
    font-size: .8125rem;
    line-height: 1.44;
  }
}

@media (max-width: 48rem) and (max-height: 45rem) and (prefers-reduced-motion: no-preference) {
  .feat-title { font-size: .875rem; }
  .feat-slide .g-copy .sec-h { font-size: 1.05rem; }
  .feat-slide .g-copy .lede {
    -webkit-line-clamp: 4;
    font-size: .75rem;
    line-height: 1.35;
  }
}


/* Desktop Verifies always occupies the complete visual panel. */
@media (min-width: 48.001rem) {
  .feat-slide[data-feat-slide="Verifies"] .card-block > .g-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
  }
  .feat-slide[data-feat-slide="Verifies"] .verify-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
  }
  .feat-slide[data-feat-slide="Verifies"] .verify-layout.verify-layout-simple {
    display: flex;
    width: 100%;
    max-width: none;
  }
  .feat-slide[data-feat-slide="Verifies"] .verify-layout-simple > .criteria {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
  .feat-slide[data-feat-slide="Verifies"] .criterion:not(.is-held) {
    padding-right: .75rem;
    position: relative;
    left: -.75rem;
  }
  .feat-slide[data-feat-slide="Verifies"] .verify-foot {
    border-top: 0;
  }
}


/* Compiles and Verifies keep their summaries on desktop only. */
 (max-width: 48rem) {
  .compiler-slide .compile-progress,
  .feat-slide[data-feat-slide="Verifies"] .feat-stats {
    display: none !important;
  }
}