/* ==========================================================================
   Rosanne home, below the hero. Loads after site.css, on the home page only.
   The same keynote stage as the hero, carried down the page: hairlines, quiet
   two-tone headlines, drawings in the site's line-and-dot language, and motion
   that means something (work moving, steps lighting, numbers arriving).
   Two header patterns only: centred for the stage sections (Products, Demo,
   Platforms), the 12-column split for the editorial ones (How, Why, Vision,
   Events, FAQ). One title size. No content cards. Everything is visible without
   JS; motion waits for home.js.
   Layers: tokens, section frame, products, demo window, how it works, devices,
   why now, vision, event, FAQ, end card, reveal, print.
   ========================================================================== */

/* ---------- Tokens: light ---------- */
:root {
  --hm-gap: clamp(112px, 6.4vw + 76px, 208px);
  --hm-quiet: #8A8A8A;           /* the hero's second tone; 3.4:1, used only at large sizes */
  --hm-dim: #8A8A8A;             /* vision words before the reading line reaches them (large text) */
  --hm-wait: #767676;            /* a step the how-it-works line has not reached yet: 4.5:1, AA at any size */

  --pv-line: rgba(0, 0, 0, 0.17);
  --pv-line-soft: rgba(0, 0, 0, 0.09);
  --pv-sk: rgba(0, 0, 0, 0.055);
  --pv-sk-mid: rgba(0, 0, 0, 0.1);
  --pv-sk-head: rgba(0, 0, 0, 0.15);
  --pv-ink: rgba(13, 13, 13, 0.34);
  --pv-fill: #FFFFFF;
  --pv-tab-on: #F6F6F6;
  --pv-dot: rgba(0, 0, 0, 0.2);
  --pv-a: #5A22D0;
  --pv-b: #C0169F;
  --pv-hl: 0.3;
  --pv-hl-rest: 0.1;             /* a line the agent has read keeps a faint mark */
  --pv-wash: rgba(147, 39, 143, 0.07);

  --win-bg: #FFFFFF;
  --win-chrome: #F6F6F6;
  --win-side: #FAFAFA;
  --win-line: rgba(0, 0, 0, 0.08);
  --win-divider: rgba(0, 0, 0, 0.12);
  --win-addr: rgba(0, 0, 0, 0.045);
  --win-tab: #FFFFFF;
  --win-muted: #686868;         /* small muted text on the window's grey surfaces, 4.9:1 on #F6F6F6 */
  --win-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 36px -18px rgba(0, 0, 0, 0.14), 0 50px 90px -48px rgba(0, 0, 0, 0.16);
  --stage-shadow: rgba(0, 0, 0, 0.2);      /* contact shadow under a product on the stage */
  --stage-reflect: rgba(0, 0, 0, 0.1);     /* the hairline the stage floor draws under it */

  --dv-line: rgba(0, 0, 0, 0.42);
  --dv-line-soft: rgba(0, 0, 0, 0.12);
  --dv-screen: #FBFBFB;
  --dv-island: #0D0D0D;
  --dv-soon: rgba(0, 0, 0, 0.34);

  --bar-made: #0D0D0D;
  --bar-lost: #C9C9C9;

  --pool: rgba(147, 39, 143, 0.09);
  --contact: rgba(20, 8, 32, 0.2);
  --mono-ink: #0D0D0D;
}

/* ---------- Tokens: dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hm-quiet: #7C7C7C;
    --hm-dim: #616161;
    --hm-wait: #7C7C7C;
    --pv-line: rgba(255, 255, 255, 0.24);
    --pv-line-soft: rgba(255, 255, 255, 0.12);
    --pv-sk: rgba(255, 255, 255, 0.07);
    --pv-sk-mid: rgba(255, 255, 255, 0.13);
    --pv-sk-head: rgba(255, 255, 255, 0.2);
    --pv-ink: rgba(255, 255, 255, 0.46);
    --pv-fill: #000000;
    --pv-tab-on: #1A1A1A;
    --pv-dot: rgba(255, 255, 255, 0.28);
    --pv-a: #8C5CFF;
    --pv-b: #D23CC4;
    --pv-hl: 0.5;
    --pv-hl-rest: 0.16;
    --pv-wash: rgba(192, 76, 187, 0.14);
    --win-bg: #151515;
    --win-chrome: #1D1D1D;
    --win-side: #111111;
    --win-line: rgba(255, 255, 255, 0.08);
    --win-divider: rgba(255, 255, 255, 0.14);
    --win-addr: rgba(255, 255, 255, 0.06);
    --win-tab: #2A2A2A;
    --win-muted: #A8A8A8;
    --win-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 80px -30px rgba(0, 0, 0, 0.9);
    --stage-shadow: rgba(0, 0, 0, 0.35);
    --stage-reflect: rgba(255, 255, 255, 0.16);
    --dv-line: rgba(255, 255, 255, 0.55);
    --dv-line-soft: rgba(255, 255, 255, 0.14);
    --dv-screen: #0B0B0B;
    --dv-island: #000000;
    --dv-soon: rgba(255, 255, 255, 0.42);
    --bar-made: #FFFFFF;
    --bar-lost: #444444;
    --pool: rgba(192, 76, 187, 0.12);
    --contact: rgba(255, 255, 255, 0.07);
    --mono-ink: #FFFFFF;
  }
}
:root[data-theme="dark"] {
  --hm-quiet: #7C7C7C;
  --hm-dim: #616161;
  --hm-wait: #7C7C7C;
  --pv-line: rgba(255, 255, 255, 0.24);
  --pv-line-soft: rgba(255, 255, 255, 0.12);
  --pv-sk: rgba(255, 255, 255, 0.07);
  --pv-sk-mid: rgba(255, 255, 255, 0.13);
  --pv-sk-head: rgba(255, 255, 255, 0.2);
  --pv-ink: rgba(255, 255, 255, 0.46);
  --pv-fill: #000000;
  --pv-tab-on: #1A1A1A;
  --pv-dot: rgba(255, 255, 255, 0.28);
  --pv-a: #8C5CFF;
  --pv-b: #D23CC4;
  --pv-hl: 0.5;
  --pv-hl-rest: 0.16;
  --pv-wash: rgba(192, 76, 187, 0.14);
  --win-bg: #151515;
  --win-chrome: #1D1D1D;
  --win-side: #111111;
  --win-line: rgba(255, 255, 255, 0.08);
  --win-divider: rgba(255, 255, 255, 0.14);
  --win-addr: rgba(255, 255, 255, 0.06);
  --win-tab: #2A2A2A;
  --win-muted: #A8A8A8;
  --win-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  --stage-shadow: rgba(0, 0, 0, 0.35);
  --stage-reflect: rgba(255, 255, 255, 0.16);
  --dv-line: rgba(255, 255, 255, 0.55);
  --dv-line-soft: rgba(255, 255, 255, 0.14);
  --dv-screen: #0B0B0B;
  --dv-island: #000000;
  --dv-soon: rgba(255, 255, 255, 0.42);
  --bar-made: #FFFFFF;
  --bar-lost: #444444;
  --pool: rgba(192, 76, 187, 0.12);
  --contact: rgba(255, 255, 255, 0.07);
  --mono-ink: #FFFFFF;
}

/* ---------- Section frame: generous rhythm, a hairline kicker, a two-tone headline ---------- */
.hm-sec { margin-top: var(--hm-gap); scroll-margin-top: 56px; }
.hm-products { margin-top: clamp(96px, 5vw + 64px, 168px); }

.hm-head { margin-bottom: clamp(48px, 3.2vw + 24px, 88px); }
/* Stage sections: centred */
.hm-head--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Editorial sections: the 12-column split, title on the left, the lede on the right on the same baseline */
.hm-head:not(.hm-head--center) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.hm-head__main { grid-column: 1 / span 7; }
.hm-head:not(.hm-head--center) > .hm-lede { grid-column: 8 / -1; justify-self: end; width: 100%; max-width: 440px; margin-top: 0; padding-bottom: 5px; }

.hm-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.hm-kicker::before { content: ""; width: 16px; height: 1px; background: var(--accent); flex: none; }
.hm-head--center .hm-kicker::after { content: ""; width: 16px; height: 1px; background: var(--accent); flex: none; }

/* One title size for every section */
.hm-title {
  margin-top: 14px;
  font-size: clamp(30px, 1.55vw + 18px, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.035em;
  text-wrap: balance;
}
.hm-quiet { color: var(--hm-quiet); }
.hm-lede { margin-top: 18px; max-width: 600px; font-size: 17px; line-height: 26px; color: var(--text-2); text-wrap: pretty; }
.hm-head--center .hm-lede { max-width: 620px; text-wrap: balance; }

/* A quiet link: text, an underline that draws on hover, an arrow that nods */
.hm-link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--text); }
.hm-link::after { content: ""; position: absolute; inset: -6px -4px; }
.hm-link > span { padding-block: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 350ms var(--ease); }
.hm-link:hover > span, .hm-link:focus-visible > span { background-size: 100% 1px; }
.hm-link .ico { width: 16px; height: 16px; transition: transform 300ms var(--ease); }
.hm-link:hover .ico { transform: translateX(3px); }
.hm-link--sm { font-size: 14px; }

@media (max-width: 1023px) {
  .hm-head:not(.hm-head--center) { display: block; }
  .hm-head:not(.hm-head--center) > .hm-lede { max-width: 600px; margin-top: 16px; padding: 0; }
}

/* ---------- Products: two stages, a hairline between them ---------- */
.pstages { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gap) * 2); }
.pstages::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 14%, var(--line) 86%, transparent);
}
.pstage { display: flex; flex-direction: column; min-width: 0; }
.pstage__art { position: relative; aspect-ratio: 640 / 440; }
.pv { display: block; width: 100%; height: 100%; overflow: visible; }
/* Text lines up with the drawn window's left edge (20 of 640 units) */
.pstage__body { display: flex; flex-direction: column; align-items: flex-start; margin-top: clamp(28px, 2vw + 8px, 44px); padding-inline: 3.125%; }
.pstage__mark { margin-bottom: 18px; }
.pstage__mark img { width: 32px; height: 32px; }
.pstage__kind { font-size: 13px; line-height: 18px; color: var(--text-3); }
.pstage__kind span { margin-inline: 3px; }
.pstage__name { margin-top: 10px; font-size: clamp(28px, 1.2vw + 16px, 38px); line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; }
.pstage__promise { margin-top: 6px; font-size: clamp(18px, 0.45vw + 13.5px, 21px); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; color: var(--text-2); }
.pstage__text { margin-top: 14px; max-width: 520px; font-size: 15px; line-height: 24px; color: var(--text-2); }
.pfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; width: 100%; max-width: 600px; margin-top: 28px; }
.pfacts li { padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--text); }
.pfacts .ico { display: block; width: 20px; height: 20px; margin-bottom: 10px; color: var(--text-2); }
.pstage .hm-link { margin-top: 26px; }

@media (max-width: 899px) {
  .pstages { grid-template-columns: minmax(0, 1fr); row-gap: 88px; }
  .pstages::before { display: none; }
  .pstage + .pstage { padding-top: 72px; border-top: 1px solid var(--line); margin-top: -16px; }
}
@media (max-width: 599px) {
  .pfacts { grid-template-columns: minmax(0, 1fr); }
  .pfacts li { display: flex; align-items: flex-start; gap: 12px; padding-block: 12px; }
  .pfacts li:last-child { border-bottom: 1px solid var(--line); }
  .pfacts .ico { margin: 0; }
  .pstage__body { padding-inline: 0; }
}

/* Drawings: strokes stay hairline at any size */
.pv-frame, .pv-ring, .pv-rule, .pv-tab rect:first-child, .pv-img, .pv-img-glow, .pv-pill, .pv-src__ring,
.pv-wire, .pv-hub, .pv-agent rect,
.dv-body, .dv-screen, .dv-line, .dv-card, .dv-no { vector-effect: non-scaling-stroke; }

/* ROS drawing. Its resting state (no script, reduced motion, and between replays) is the finished page. */
.pv-frame { fill: var(--pv-fill); stroke: var(--pv-line); stroke-width: 1; }
.pv-ring { fill: none; stroke: var(--pv-line); stroke-width: 1; }
.pv-rule { fill: none; stroke: var(--pv-line-soft); stroke-width: 1; }
.pv-tab rect:first-child { fill: none; stroke: var(--pv-line-soft); stroke-width: 1; }
.pv-tab--on rect:first-child { fill: var(--pv-tab-on); stroke: var(--pv-line); }
.pv-tabglyph { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-label { font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: 0; fill: var(--text-2); }
.pv-label--on, .pv-label--head { fill: var(--text); }
.pv-label--head { font-weight: 600; }
.pv-sk { fill: var(--pv-sk); }
.pv-sk--mid { fill: var(--pv-sk-mid); }
.pv-sk--head { fill: var(--pv-sk-head); }
.pv-img { fill: url(#pv-dots); stroke: var(--pv-line-soft); stroke-width: 1; }
.pv-dot { fill: var(--pv-dot); }
.pv-img-glow { fill: url(#pv-read); stroke: none; opacity: 0.05; }
.pv-pill { fill: none; stroke: var(--pv-line); stroke-width: 1; }
.pv-stop-a { stop-color: var(--pv-a); }
.pv-stop-b { stop-color: var(--pv-b); }
.pv-glyph { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pv-src__ring { fill: var(--pv-fill); stroke: var(--pv-line); stroke-width: 1; }
.pv-src__check { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pv-ink { fill: var(--pv-ink); transform-box: fill-box; transform-origin: 0 50%; }
.pv-hl { fill: url(#pv-read); opacity: var(--pv-hl-rest); transform-box: fill-box; transform-origin: 0 50%; }

/* Replaying (home.js steps through data-at / data-off). Going back to the start is a 400ms cross-fade. */
.pv.is-seq .pv-hl { opacity: 0; transform: scaleX(0); transition: opacity 400ms var(--ease), transform 0s linear 400ms; }
.pv.is-seq .pv-hl.on { opacity: var(--pv-hl); transform: scaleX(1); transition: opacity 150ms linear, transform 560ms cubic-bezier(0.3, 0.7, 0.2, 1); }
.pv.is-seq .pv-hl.read { opacity: var(--pv-hl-rest); transform: scaleX(1); transition: opacity 700ms var(--ease); }
.pv.is-seq .pv-img-glow { opacity: 0; transition: opacity 400ms var(--ease); }
.pv.is-seq .pv-img-glow.on { opacity: 0.14; transition-duration: 700ms; }
.pv.is-seq .pv-img-glow.read { opacity: 0.05; transition-duration: 700ms; }
.pv.is-seq .pv-pop { opacity: 0; transform: translateX(-10px); transition: opacity 400ms var(--ease), transform 600ms var(--ease); }
.pv.is-seq .pv-pop.on { opacity: 1; transform: none; }
.pv.is-seq .pv-src { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 600ms var(--ease); }
.pv.is-seq .pv-src .pv-src__check { stroke-dashoffset: 1; transition: stroke-dashoffset 450ms var(--ease) 250ms; }
.pv.is-seq .pv-src.on { opacity: 1; transform: none; }
.pv.is-seq .pv-src.on .pv-src__check { stroke-dashoffset: 0; }
.pv.is-seq .pv-ink { opacity: 0; transform: scaleX(0); transition: opacity 400ms var(--ease), transform 0s linear 400ms; }
.pv.is-seq .pv-ink.on { opacity: 1; transform: scaleX(1); transition: opacity 120ms linear, transform 700ms cubic-bezier(0.3, 0.7, 0.2, 1); }

/* Agentic OS drawing: you at the centre, four agents with clear roles on a dotted orbit */
.pv-orbit { fill: none; stroke: var(--pv-line); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 0.01 7.5; }
.pv-wire { fill: none; stroke: var(--pv-line-soft); stroke-width: 1; }
.pv-sig { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.14 2; stroke-dashoffset: 0.14; opacity: 0; }
.pv-halo { fill: none; stroke: var(--pv-line); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 0.01 5.2; }
.pv-hub { fill: var(--pv-fill); stroke: var(--pv-line); stroke-width: 1; }
.pv-hub__glyph { fill: none; stroke: var(--text); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.pv-agent rect { fill: var(--pv-fill); stroke: var(--pv-line); stroke-width: 1; }
.pv-agent use { fill: none; stroke: var(--text-3); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pv-role { font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: 0; fill: var(--text-3); text-anchor: middle; }

@media (prefers-reduced-motion: no-preference) {
  .pv-orbit { animation: pv-orbit 7s linear infinite; }
  .pv-agent rect { animation: pv-tile 8s var(--ease) infinite; }
  .pv-agent use { animation: pv-glyph 8s var(--ease) infinite; }
  .pv-role { animation: pv-role 8s var(--ease) infinite; }
  .pv-sig { animation: pv-sig 8s linear infinite; }
  .pv-hub { animation: pv-hub 2s var(--ease) infinite; }
  .pv-agent--2 rect, .pv-agent--2 use, .pv-agent--2 .pv-role, .pv-sig--2 { animation-delay: -6s; }
  .pv-agent--3 rect, .pv-agent--3 use, .pv-agent--3 .pv-role, .pv-sig--3 { animation-delay: -4s; }
  .pv-agent--4 rect, .pv-agent--4 use, .pv-agent--4 .pv-role, .pv-sig--4 { animation-delay: -2s; }
  /* Off screen, the drawing holds still (home.js marks it playing while in view) */
  .hm-live [data-hm-play]:not(.is-playing) .pv-orbit,
  .hm-live [data-hm-play]:not(.is-playing) .pv-agent rect,
  .hm-live [data-hm-play]:not(.is-playing) .pv-agent use,
  .hm-live [data-hm-play]:not(.is-playing) .pv-role,
  .hm-live [data-hm-play]:not(.is-playing) .pv-sig,
  .hm-live [data-hm-play]:not(.is-playing) .pv-hub { animation-play-state: paused; }
}
/* Reduced motion: one agent shown at work, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .pv-agent--1 rect { stroke: var(--accent); fill: var(--pv-wash); }
  .pv-agent--1 use { stroke: var(--text); }
  .pv-agent--1 .pv-role { fill: var(--text); }
}
@keyframes pv-orbit { to { stroke-dashoffset: -75; } }
/* Each agent has a quarter of the 8s loop: the task goes out, the tile lights while it works, the report comes back */
@keyframes pv-tile {
  0%, 4% { stroke: var(--pv-line); fill: var(--pv-fill); }
  8%, 20% { stroke: var(--accent); fill: var(--pv-wash); }
  26%, 100% { stroke: var(--pv-line); fill: var(--pv-fill); }
}
@keyframes pv-glyph { 0%, 4% { stroke: var(--text-3); } 8%, 20% { stroke: var(--text); } 26%, 100% { stroke: var(--text-3); } }
@keyframes pv-role { 0%, 4% { fill: var(--text-3); } 8%, 20% { fill: var(--text); } 26%, 100% { fill: var(--text-3); } }
@keyframes pv-sig {
  0% { stroke-dashoffset: 0.14; opacity: 1; }
  7% { stroke-dashoffset: -1; opacity: 1; }
  7.1%, 17.9% { stroke-dashoffset: -1; opacity: 0; }
  18% { stroke-dashoffset: -1; opacity: 1; }
  25% { stroke-dashoffset: 0.14; opacity: 1; }
  25.1%, 100% { stroke-dashoffset: 0.14; opacity: 0; }
}
@keyframes pv-hub { 0% { stroke: var(--accent); } 30%, 100% { stroke: var(--pv-line); } }

/* ---------- Demo: a ROS window as a product shot, with keynote callouts ---------- */
.dstage { position: relative; outline: none; --ww: min(1040px, 100%); }
.dstage:focus-visible { outline: none; }
.win {
  position: relative; z-index: 1; width: var(--ww); margin-inline: auto;
  border-radius: 14px; background: var(--win-bg); box-shadow: var(--win-shadow); overflow: hidden; text-align: left;
}
.win__chrome { display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 12px 0 16px; background: var(--win-chrome); }
.win__lights { display: flex; gap: 8px; flex: none; }
.win__lights span { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-heavy); }
.win__tabs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
.win__tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: 190px; height: 30px; padding: 0 14px 0 10px;
  border-radius: 9px; font-size: 12.5px; line-height: 16px; color: var(--win-muted); white-space: nowrap;
}
.win__tab .ico { width: 14px; height: 14px; flex: none; }
.win__tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.win__tab.is-active { flex: none; background: var(--win-tab); color: var(--text); box-shadow: 0 0 0 1px var(--win-line), 0 1px 2px rgba(0, 0, 0, 0.05); }
.win__tab.is-active .ico { color: var(--accent); }
/* Background tabs: a shape of their own, divided by a hairline */
.win__tab:not(.is-active) { min-width: 96px; border-radius: 0; }
.win__tab:not(.is-active)::after { content: ""; position: absolute; right: 0; top: 8px; bottom: 8px; width: 1px; background: var(--win-divider); }
/* A new tab grows open, then its icon and label fade in; nothing is ever clipped mid-glyph */
.win__tab.is-new { overflow: hidden; animation: tab-open 420ms var(--ease) both; }
.win__tab.is-new > * { animation: tab-label 320ms var(--ease) 180ms both; }
@keyframes tab-open { from { max-width: 0; min-width: 0; padding-left: 0; padding-right: 0; } }
@keyframes tab-label { from { opacity: 0; transform: translateX(-4px); } }
.win__tag { flex: none; margin-left: auto; padding: 2px 9px; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; line-height: 16px; color: var(--text-2); }
.win__bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-top: 1px solid var(--win-line); border-bottom: 1px solid var(--win-line); color: var(--text-3); background: var(--win-bg); }
.win__bar > .ico { width: 18px; height: 18px; }
.win__fwd { opacity: 0.45; }
.win__addr {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 1 460px; min-width: 0; height: 30px; margin-inline: auto; padding: 0 14px;
  border-radius: 9999px; background: var(--win-addr); font-size: 13px; line-height: 18px; color: var(--text-2); white-space: nowrap; overflow: hidden;
  transform: translateX(-24px);
}
.win__addr .ico { width: 13px; height: 13px; color: var(--text-3); flex: none; }
.win__addr-app { color: var(--text); font-weight: 500; }
.win__addr-sep { color: var(--text-3); }
.win__addr [data-demo-addr] { overflow: hidden; text-overflow: ellipsis; }

/* The body sizes to its content: the status line follows the plan, 24px below the last row */
.win__body { display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.win__side { display: flex; flex-direction: column; gap: 22px; padding: 18px 12px; background: var(--win-side); border-right: 1px solid var(--win-line); }
.wex { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.wex__legend { padding: 0 10px; margin-bottom: 8px; font-size: 12px; line-height: 16px; color: var(--win-muted); }
.wex__row {
  position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; margin-bottom: 2px;
  border-radius: 10px; font-size: 14px; line-height: 20px; color: var(--text-2); cursor: pointer; user-select: none;
  transition: background-color 150ms, color 150ms;
}
.wex__row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wex__row .ico { width: 18px; height: 18px; color: var(--icon-3); transition: color 150ms; }
.wex__row:hover { background: var(--hover); color: var(--text); }
.wex__row.is-on, .wex__row:has(input:checked) { background: var(--hover); color: var(--text); }
.wex__row.is-on .ico, .wex__row:has(input:checked) .ico { color: var(--text); }
.wex__row:has(input:focus-visible) { outline: 1.5px solid var(--focus); outline-offset: 2px; }
/* Projects: the sidebar's quiet second group */
.wproj__row { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; margin-bottom: 2px; border-radius: 10px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.wproj__row .ico { width: 18px; height: 18px; color: var(--icon-3); }

.win__main { display: flex; flex-direction: column; min-width: 0; padding: 28px clamp(20px, 3vw, 44px) 22px; }
.composer--win { max-width: none; }
.composer--win .composer__text { white-space: normal; overflow: visible; text-overflow: clip; padding-left: 2px; }
.composer--win .composer__send:disabled { opacity: 0.35; cursor: default; }
.composer--win .composer__send:not(:disabled):hover { background: var(--solid-hover); }
.dstage.is-idle .composer--win .composer__send:not(:disabled) { box-shadow: 0 0 0 4px var(--pin-glow); }

.dplan__head { display: flex; justify-content: space-between; margin-top: 28px; padding: 0 2px 10px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.dplan { border-top: 1px solid var(--win-line); }
.drow { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; padding: 13px 2px; border-bottom: 1px solid var(--win-line); }
.drow__icon { display: grid; place-items: center; width: 20px; height: 22px; color: var(--icon-3); }
.drow__icon .ico { width: 18px; height: 18px; }
.drow__text { font-size: 15px; line-height: 22px; color: var(--text-2); transition: color 250ms; }
.drow__agent { font-size: 12.5px; line-height: 22px; color: var(--text-3); white-space: nowrap; transition: color 250ms; }
.drow__flag { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.drow.is-running .drow__text, .drow.is-waiting .drow__text, .drow.is-done .drow__text { color: var(--text); }
.drow.is-running .drow__icon, .drow.is-done .drow__icon { color: var(--text); }
.drow.is-running .drow__agent, .drow.is-waiting .drow__agent { color: var(--text-2); }
.drow.is-waiting .drow__icon { color: var(--accent); }
.drow.is-skipped .drow__text { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-heavy); }
.drow.is-running .drow__icon .ico { animation: spin 900ms linear infinite; }
/* A signal runs along the row while its agent works */
.drow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--pv-a), var(--pv-b)); transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
.drow.is-running::after { opacity: 1; animation: drow-run var(--run, 1100ms) cubic-bezier(0.45, 0, 0.2, 1) both; }
.drow.is-done::after { transform: scaleX(1); transition: opacity 700ms var(--ease); }
@keyframes drow-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dask-in { from { clip-path: inset(0 0 100% 0 round 12px); transform: translateY(-6px); } to { clip-path: inset(0 0 0 0 round 12px); transform: none; } }

.dask { grid-column: 2 / -1; margin-top: 12px; padding: 14px 16px 16px; border-radius: 12px; background: var(--pv-wash); box-shadow: inset 0 0 0 1px var(--accent-line); animation: dask-in 520ms var(--ease) both; }
.dask__title { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text); }
.dask__detail { margin-top: 2px; max-width: 520px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.dask__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.dfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-top: 24px; }
.dfoot__status { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text); }
.dfoot__status .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); flex: none; }
.dfoot__status.is-hint { color: var(--text-3); }
.dfoot__replay {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px 0 10px;
  border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--line-heavy); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text);
  transition: background-color 150ms;
}
.dfoot__replay::after { content: ""; position: absolute; inset: -6px -2px; }
.dfoot__replay:hover { background: var(--hover); }
.dfoot__replay .ico { width: 16px; height: 16px; }

/* The window stands on the stage the way the hero's orb does: a neutral contact shadow right under it and one
   hairline of reflected light on the floor, fading at both ends. No coloured haze. */
.dstage__floor { position: absolute; left: 50%; top: 100%; z-index: 0; width: calc(var(--ww) * 0.92); height: 40px; transform: translateX(-50%); pointer-events: none; }
.dstage__floor::before { content: ""; position: absolute; left: 7%; right: 7%; top: -12px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, var(--stage-shadow), transparent); }
.dstage__floor::after { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--stage-reflect) 28%, var(--stage-reflect) 72%, transparent); }

/* Callouts: the hero's annotation language and verbs. Each pin sits on its target inside the window (demo.js sets
   --x, --y and the wire length); the wire runs out past the frame to the label. They light with the run. */
.dco { display: none; }
@media (min-width: 1280px) {
  .dstage { --ww: min(1000px, 100% - 420px); }
  .dco { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .dco__item {
    position: absolute; top: var(--y, 50%); display: flex; align-items: center;
    transform: translateY(-50%); color: var(--text-3); transition: color 500ms var(--ease), top 500ms var(--ease);
  }
  .dco__item--r { left: var(--x, calc(50% + var(--ww) / 2 - 4px)); }
  .dco__item--l { right: var(--x, calc(50% + var(--ww) / 2 - 4px)); }
  .dco__item[data-co="ask"] { --y: 150px; } .dco__item[data-co="act"] { --y: 330px; }
  .dco__item[data-co="approve"] { --y: 380px; } .dco__item[data-co="report"] { --y: calc(100% - 50px); }
  .dco__pin {
    position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: var(--win-bg); box-shadow: inset 0 0 0 1.5px var(--pin-line), 0 0 0 2px var(--win-bg);
    transition: background-color 500ms var(--ease), box-shadow 500ms var(--ease);
  }
  .dco__wire { position: relative; flex: none; width: var(--len, 64px); height: 1px; background: var(--line); overflow: hidden; transition: width 500ms var(--ease); }
  .dco__wire::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; }
  .dco__text { display: grid; padding-inline: 12px; white-space: nowrap; }
  .dco__item--l .dco__text { text-align: right; }
  .dco__name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-3); transition: color 500ms var(--ease); }
  .dco__note { font-size: 12px; line-height: 16px; color: var(--text-3); }
  .dstage[data-phase="ask"] [data-co="ask"],
  .dstage[data-phase="act"] [data-co="act"],
  .dstage[data-phase="approve"] [data-co="approve"],
  .dstage[data-phase="report"] [data-co="report"] { color: var(--text); }
  .dstage[data-phase="ask"] [data-co="ask"] .dco__name,
  .dstage[data-phase="act"] [data-co="act"] .dco__name,
  .dstage[data-phase="approve"] [data-co="approve"] .dco__name,
  .dstage[data-phase="report"] [data-co="report"] .dco__name { color: var(--text); }
  .dstage[data-phase="ask"] [data-co="ask"] .dco__note,
  .dstage[data-phase="act"] [data-co="act"] .dco__note,
  .dstage[data-phase="approve"] [data-co="approve"] .dco__note,
  .dstage[data-phase="report"] [data-co="report"] .dco__note { color: var(--text-2); }
  .dstage[data-phase="ask"] [data-co="ask"] .dco__pin,
  .dstage[data-phase="act"] [data-co="act"] .dco__pin,
  .dstage[data-phase="approve"] [data-co="approve"] .dco__pin,
  .dstage[data-phase="report"] [data-co="report"] .dco__pin { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 2px var(--win-bg), 0 0 0 5px var(--pin-glow); }
}
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
  /* The signal runs from the label into the window, toward the thing it names */
  .dstage[data-phase="ask"] [data-co="ask"] .dco__wire::after,
  .dstage[data-phase="act"] [data-co="act"] .dco__wire::after { animation: dco-rev 1500ms cubic-bezier(0.45, 0, 0.2, 1) 150ms both; }
  .dstage[data-phase="approve"] [data-co="approve"] .dco__wire::after,
  .dstage[data-phase="report"] [data-co="report"] .dco__wire::after { animation: dco-fwd 1500ms cubic-bezier(0.45, 0, 0.2, 1) 150ms both; }
}
@keyframes dco-fwd { 0% { transform: translateX(-100%); opacity: 1; } 100% { transform: translateX(230%); opacity: 1; } }
@keyframes dco-rev { 0% { transform: translateX(230%); opacity: 1; } 100% { transform: translateX(-100%); opacity: 1; } }

@media (max-width: 899px) {
  .win__body { grid-template-columns: minmax(0, 1fr); }
  .win__side { padding: 14px 16px 0; background: var(--win-bg); border-right: 0; }
  .wex { display: flex; flex-wrap: wrap; gap: 8px; }
  .wex__legend { float: none; width: 100%; padding: 0; margin-bottom: 8px; }
  .wex__row { height: 32px; padding: 0 12px; margin: 0; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
  .wex__row .ico { display: none; }
  .wproj { display: none; }
  .win__main { padding: 18px 16px 16px; }
}
@media (max-width: 599px) {
  .win { border-radius: 12px; }
  .win__chrome { gap: 12px; height: 42px; padding: 0 10px 0 14px; }
  .win__lights { gap: 6px; }
  .win__lights span { width: 10px; height: 10px; }
  .win__tab:not(.is-active) { display: none; }
  .win__bar > .ico { display: none; }
  .win__addr { transform: none; }
  .drow { grid-template-columns: 20px minmax(0, 1fr); padding: 12px 0; }
  .drow__agent { grid-column: 2; line-height: 18px; }
  .dask { grid-column: 1 / -1; }
  .dfoot { align-items: flex-start; margin-top: 18px; }
  .dstage__floor { width: 96%; }
  .dstage__floor::after { top: 22px; }
}

/* ---------- How it works: one hairline, four ticks ---------- */
.track { --p: 1; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.track::before, .track::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; }
.track::before { background: var(--line); }
.track::after { background: linear-gradient(90deg, var(--pv-a), var(--pv-b) 55%, var(--accent)); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.track__step { position: relative; padding-top: 44px; }
/* Each step is marked by a 1px tick that crosses the line: quiet grey until the line reaches it, then accent */
.track__pin { position: absolute; left: 0; top: -1px; width: 1px; height: 14px; background: var(--accent); transition: background-color 500ms var(--ease); }
.track__n { display: block; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: var(--text-3); transition: color 500ms var(--ease); }
.track__name { margin-top: 10px; font-size: clamp(22px, 0.5vw + 17px, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; color: var(--text); transition: color 500ms var(--ease); }
.track__text { margin-top: 10px; max-width: 320px; font-size: 15px; line-height: 23px; color: var(--text-2); }
/* Under home.js, the line draws with the scroll; a step goes from quiet grey to ink as the line reaches it */
.hm-live .track__step:not(.is-lit) .track__pin { background: var(--line-heavy); }
.hm-live .track__step:not(.is-lit) .track__name { color: var(--hm-wait); }
.hm-live .track__step.is-lit .track__n { color: var(--text); }
@media (max-width: 767px) {
  .track { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-left: 36px; }
  .track::before, .track::after { left: 4px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .track::after { background: linear-gradient(180deg, var(--pv-a), var(--pv-b) 55%, var(--accent)); transform-origin: 50% 0; transform: scaleY(var(--p)); }
  .track__step { padding-top: 0; }
  .track__pin { left: -39px; top: 8px; width: 14px; height: 1px; }
  .track__name { margin-top: 6px; }
}

/* ---------- Everywhere you work: four devices on one shelf ---------- */
/* Each drawing's viewBox ends exactly at the device's lowest edge, so every device stands on the shelf line. The
   devices on the way are drawn about 10% smaller than the ones available now. */
.lineup {
  --lg: clamp(28px, 4.4vw, 88px);
  --u: min(1.25px, (100vw - 2 * var(--gutter) - 3 * var(--lg)) / 920);
  display: flex; justify-content: center; align-items: flex-end; gap: var(--lg);
}
.dev { position: relative; display: flex; flex-direction: column; align-items: center; width: calc(var(--w) * var(--u)); text-align: center; }
.dev--mac { --w: 380; }
.dev--iphone { --w: 104; }
.dev--pc { --w: 342; }
.dev--android { --w: 94; }
.dev__art { display: block; width: 100%; height: auto; overflow: visible; }
/* The shelf: one hairline under every device, continuous through the gaps (drawn from the name, which sits
   directly under the art), and a soft contact shadow where each device stands */
.dev__name { position: relative; align-self: stretch; margin-top: 26px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.dev__name::before { content: ""; position: absolute; left: calc(var(--lg) / -2); right: calc(var(--lg) / -2); top: -26px; height: 1px; background: var(--line); }
.dev:first-child .dev__name::before { left: 0; background: linear-gradient(90deg, transparent, var(--line) 40%); }
.dev:last-child .dev__name::before { right: 0; background: linear-gradient(90deg, var(--line) 60%, transparent); }
.dev__name::after {
  content: ""; position: absolute; left: 50%; top: -33px; z-index: -1; width: min(84%, calc(var(--w) * var(--u) * 0.84)); height: 14px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--contact), transparent); pointer-events: none;
}
.dev.is-soon .dev__name::after { opacity: 0.4; }
.dev__status { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--text-2); white-space: nowrap; }
.dev.is-soon .dev__status { color: var(--text-3); }
.dev .hm-link { margin-top: 8px; white-space: nowrap; }

.dv-body { fill: var(--bg); stroke: var(--dv-line); stroke-width: 1.25; stroke-linejoin: round; }
.dv-screen { fill: var(--dv-screen); stroke: var(--dv-line-soft); stroke-width: 1; }
.dv-line { fill: none; stroke: var(--dv-line); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.dv-cam { fill: var(--dv-line); }
.is-soon .dv-cam { fill: var(--dv-soon); }
.dv-island { fill: var(--dv-island); stroke: var(--dv-line-soft); stroke-width: 0.8; }
.dv-sk { fill: var(--pv-sk-mid); }
.dv-sk--mid { fill: var(--pv-sk-head); }
.dv-ok { fill: none; stroke: var(--accent); stroke-width: 1.1; }
.dv-tick { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.dv-wait { fill: none; stroke: var(--dv-line); stroke-width: 1.1; stroke-dasharray: 2 2.3; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 50%; }
.dv-card { fill: var(--bg); stroke: var(--dv-line-soft); stroke-width: 1; }
.dv-yes { fill: var(--text); }
.dv-no { fill: none; stroke: var(--dv-line-soft); stroke-width: 1; }
/* On the way: the same outline, drawn in dots */
.is-soon .dv-body, .is-soon .dv-screen { vector-effect: none; fill: none; stroke: var(--dv-soon); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 0.01 4.6; }
.is-soon .dv-screen { stroke: var(--pv-line-soft); stroke-dasharray: 0.01 6; }
.dv-soon { fill: none; stroke: var(--text-3); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .dv-wait { animation: spin 3.2s linear infinite; }
  .hm-live .lineup:not(.is-in) .dv-wait { animation-play-state: paused; }
}

/* Small screens: two rows of two, each row on its own shelf line */
@media (max-width: 899px) {
  .lineup {
    --lg: 24px; --u: min(1.1px, (100vw - 2 * var(--gutter) - var(--lg)) / 560);
    display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); column-gap: var(--lg); row-gap: 56px; align-items: end;
  }
  .dev { width: auto; min-width: 0; }
  .dev__art { width: min(100%, calc(var(--w) * var(--u))); }
  .dev__name { margin-top: 20px; font-size: 15px; }
  .dev__name::after { top: -27px; }
  .dev .dev__name::before, .dev:first-child .dev__name::before, .dev:last-child .dev__name::before { top: -20px; }
  .dev:nth-child(odd) .dev__name::before { left: 0; right: calc(var(--lg) / -2); background: linear-gradient(90deg, transparent, var(--line) 30%); }
  .dev:nth-child(even) .dev__name::before { left: calc(var(--lg) / -2); right: 0; background: linear-gradient(90deg, var(--line) 70%, transparent); }
  /* Drawn smaller here, so the dotted outlines get slightly larger dots to stay legible */
  .is-soon .dv-body { stroke-width: 2.5; stroke-dasharray: 0.01 5.4; }
  .is-soon .dv-screen { stroke-width: 2.2; stroke-dasharray: 0.01 6.6; }
}

/* ---------- Why now: a true-to-scale comparison ---------- */
.jobs {
  --fs: clamp(48px, 3.6vw + 12px, 104px);
  --tipw: calc(var(--fs) * 2.74 + 20px);
  --rg: clamp(28px, 2vw + 12px, 44px);
  display: grid; row-gap: var(--rg);
}
.jobs__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.jobs__label { grid-column: 1 / span 3; padding-bottom: 6px; max-width: 220px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.jobs__track { position: relative; grid-column: 4 / -1; display: flex; align-items: flex-end; gap: 20px; min-width: 0; margin: 0; }
.jobs__row--made .jobs__track::before, .jobs__row--lost .jobs__track::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: calc(var(--fs) * 0.1 - 10px); width: 1px; background: var(--line-heavy); }
.jobs__row--made .jobs__track::before { bottom: calc(var(--rg) * -1); }
.jobs__row--lost .jobs__track::before { top: 0; }
.jobs__bar {
  flex: none; width: calc((100% - var(--tipw)) * var(--v) * var(--p, 1)); height: 12px; margin-bottom: calc(var(--fs) * 0.1);
  border-radius: 0 6px 6px 0; background: var(--bar);
}
.jobs__value { font-size: var(--fs); line-height: 0.82; font-weight: 600; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jobs__row--made { --v: 1; --bar: var(--bar-made); }
.jobs__row--lost { --v: 0.5412; --bar: var(--bar-lost); }
.jobs__row--lost .jobs__value { color: var(--text-2); }
/* Net: a bracket from where displacement ends to where creation ends */
.jobs__row--net { margin-top: calc(var(--fs) * -0.2); }
.jobs__row--net .jobs__label { padding-bottom: 2px; }
.jobs__row--net .jobs__track { display: block; position: relative; padding-top: 22px; }
.jobs__brace {
  position: absolute; top: 0; left: calc((100% - var(--tipw)) * 0.5412); width: calc((100% - var(--tipw)) * 0.4588); height: 12px;
  border: 1px solid var(--accent); border-top: 0; border-radius: 0 0 5px 5px; transform-origin: 0 0;
}
.jobs__net {
  display: block; margin-left: calc((100% - var(--tipw)) * 0.5412); width: calc((100% - var(--tipw)) * 0.4588); text-align: center;
  font-size: clamp(26px, 1vw + 16px, 36px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.hm-live .jobs:not(.is-counted) { --p: 0; }
.hm-live .jobs:not(.is-done) .jobs__brace, .hm-live .jobs:not(.is-done) .jobs__net { opacity: 0; transform: translateY(-4px); }
.jobs__brace, .jobs__net { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }

.minis {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  margin-top: clamp(56px, 3vw + 32px, 88px); padding-top: clamp(28px, 1.6vw + 12px, 40px); border-top: 1px solid var(--line);
}
.minis__list { grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin: 0; }
.mini { display: flex; flex-direction: column; }
.mini__value { order: 1; margin: 0; font-size: clamp(40px, 1.6vw + 24px, 60px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.mini__label { order: 2; margin-top: 12px; max-width: 300px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.mini__meter { order: 3; position: relative; max-width: 320px; height: 2px; margin: 18px 0 0; border-radius: 1px; background: var(--line); }
.mini__meter span { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * var(--p, 1) * 100%); border-radius: 1px; background: var(--bar-made); }
.mini--churn { --v: 0.22; }
.mini--skills { --v: 0.39; }
.hm-live .minis:not(.is-counted) { --p: 0; }
.minis .source { grid-column: 9 / -1; justify-self: end; margin: 0; text-align: right; }

.answer2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(96px, 5vw + 56px, 168px); }
.answer2__head { grid-column: 1 / span 4; }
.answer2__title { margin-top: 14px; font-size: clamp(24px, 0.7vw + 16px, 32px); line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.answer2__list { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--gap); }
.answer2__list li { padding-top: 20px; border-top: 1px solid var(--line); }
.answer2__list .ico { width: 22px; height: 22px; color: var(--accent); }
.answer2__list h4 { margin-top: 18px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em; }
.answer2__list p { margin-top: 6px; max-width: 420px; font-size: 15px; line-height: 23px; color: var(--text-2); }

@media (max-width: 1023px) {
  .jobs__label { grid-column: 1 / span 4; }
  .jobs__track { grid-column: 5 / -1; }
  .minis__list { grid-column: 1 / -1; }
  .minis .source { grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: 32px; }
  .answer2 { display: block; }
  .answer2__head { margin-bottom: 36px; }
}
@media (max-width: 767px) {
  .jobs { --fs: clamp(40px, 9vw + 8px, 56px); --tipw: calc(var(--fs) * 2.74 + 14px); }
  .jobs__row { display: block; }
  .jobs__label { max-width: none; padding: 0 0 10px; }
  .jobs__track { gap: 14px; }
  .jobs__bar { height: 10px; }
  .jobs__row--net { margin-top: 0; }
  .answer2__list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
/* Phones: each value sits above its bar and the bars use the full width, so the scale reads at a glance */
@media (max-width: 599px) {
  .jobs { --tipw: 0px; }
  .jobs__track { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .jobs__bar { width: calc(100% * var(--v) * var(--p, 1)); margin-bottom: 0; }
  .jobs__value { line-height: 0.9; }
  .jobs__row--made .jobs__track::before, .jobs__row--lost .jobs__track::before { display: none; }
  .jobs__row--net .jobs__track { padding-top: 20px; }
  .jobs__net { font-size: 28px; }
}
@media (max-width: 479px) {
  .minis__list { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
}

/* ---------- Vision: large statements in the content column, their source on the left rail ---------- */
.vq-list { display: grid; gap: clamp(48px, 2.6vw + 28px, 88px); }
.vq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding-top: clamp(24px, 1.2vw + 14px, 36px); border-top: 1px solid var(--line); }
.vq blockquote { grid-column: 5 / -1; grid-row: 1; min-width: 0; }
.vq blockquote p { max-width: 21em; font-size: clamp(26px, 1.45vw + 16px, 44px); line-height: 1.22; font-weight: 500; letter-spacing: -0.025em; text-wrap: pretty; }
.vq figcaption { grid-column: 1 / span 4; grid-row: 1; display: flex; align-items: center; gap: 12px; padding-top: clamp(6px, 0.5vw + 2px, 14px); font-size: 13px; line-height: 18px; color: var(--text-3); }
.vq figcaption::before { content: ""; order: 1; width: 24px; height: 1px; background: var(--line-heavy); }
.vq__n { order: 0; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: var(--text-3); }
.vq__by { order: 2; }
.vw { color: var(--hm-dim); transition: color 400ms var(--ease); }
.vw.is-lit { color: var(--text); }
@media (max-width: 1023px) {
  .vq { display: block; }
  .vq figcaption { margin-top: 20px; padding-top: 0; }
}

/* ---------- Event: the date set as type, one row between hairlines ---------- */
.ev { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-block: clamp(32px, 2vw + 16px, 52px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ev__date { grid-column: 1 / span 3; display: grid; grid-template-columns: auto auto; column-gap: 16px; align-items: end; justify-content: start; }
.ev__d { grid-row: 1 / span 2; grid-column: 1; font-size: clamp(64px, 3vw + 34px, 112px); line-height: 0.78; font-weight: 600; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.ev__m { grid-column: 2; grid-row: 1; font-size: 15px; line-height: 20px; font-weight: 600; }
.ev__y { grid-column: 2; grid-row: 2; font-size: 15px; line-height: 20px; color: var(--text-3); }
.ev__main { grid-column: 4 / span 7; min-width: 0; }
.ev__meta { font-size: 13px; line-height: 18px; color: var(--text-3); }
.ev__meta span { margin-inline: 3px; }
.ev__title { margin-top: 8px; font-size: clamp(24px, 0.8vw + 16px, 32px); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.ev__theme { margin-top: 10px; max-width: 640px; font-size: 16px; line-height: 25px; color: var(--text-2); text-wrap: pretty; }
.ev__link { grid-column: 11 / -1; justify-self: end; }
@media (max-width: 1023px) {
  .ev { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 40px; }
  .ev__main { flex: 1 1 360px; }
  .ev__link { flex-basis: 100%; }
}

/* ---------- FAQ: the questions in the content column (cols 5-12, as the vision statements) ---------- */
.hm-faq__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.qa-list { grid-column: 5 / -1; min-width: 0; border-bottom: 1px solid var(--line); }
.qa2 { border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
.qa2 summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none; border-radius: 8px;
  font-size: 17px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em;
}
.qa2 summary::-webkit-details-marker { display: none; }
.qa2__icon { color: var(--text-2); transition: transform 350ms var(--ease), color 150ms; }
.qa2 summary:hover .qa2__icon { color: var(--text); }
.qa2__v { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 350ms var(--ease); }
.qa2[open] .qa2__icon { transform: rotate(180deg); }
.qa2[open] .qa2__v { transform: scaleY(0); }
.qa2__a { padding: 0 56px 26px 0; }
.qa2__a p { max-width: 680px; font-size: 16px; line-height: 26px; color: var(--text-2); }
.qa2__a .inline-link { color: var(--text); }
.qa2::details-content { block-size: 0; overflow: hidden; transition: block-size 420ms var(--ease), content-visibility 420ms allow-discrete; }
.qa2[open]::details-content { block-size: auto; }
@media (max-width: 1023px) {
  .hm-faq__body { display: block; }
}
@media (max-width: 599px) {
  .qa2 summary { padding: 18px 0; font-size: 16px; line-height: 24px; }
  .qa2__a { padding-right: 0; }
}

/* ---------- End card: one statement, a quiet way on, and the RO monogram standing on the keynote floor ----------
   The stage runs to the footer's hairline. Its floor and the monogram are drawn by home.js on a canvas (the floor's
   dots rise and gather into the mark, which then breathes). Without script, the same monogram stands in SVG dots on
   a CSS plane of dots; either way a faint pool (at most 360px wide) and a contact shadow sit under it. */
.hm-finale { position: relative; isolation: isolate; margin-top: var(--hm-gap); overflow: clip; }
@supports not (overflow: clip) { .hm-finale { overflow: hidden; } }
.hm-finale__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hm-finale__title { font-size: clamp(38px, 3vw + 17px, 72px); line-height: 1.02; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.hm-finale__sub { margin-top: 18px; max-width: 560px; font-size: 17px; line-height: 26px; color: var(--text-2); text-wrap: balance; }
.hm-finale__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 32px; }

.hm-finale__stage {
  --mw: clamp(150px, 9vw + 90px, 280px);
  position: relative; height: clamp(300px, 16vw + 150px, 470px); margin-top: clamp(8px, 2vw, 40px); pointer-events: none;
}
.hm-finale__mark { position: absolute; left: 50%; bottom: 45%; z-index: 1; width: var(--mw); transform: translateX(-50%); }
.hm-finale__mono { display: block; width: 100%; height: auto; overflow: visible; }
.fm-ink { fill: var(--mono-ink); }
.fm-leg { fill: var(--accent); }
.hm-finale__pool {
  position: absolute; left: 50%; top: 100%; width: min(360px, 150%); height: calc(var(--mw) * 0.3); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--pool), transparent); pointer-events: none;
}
.hm-finale__shadow {
  position: absolute; left: 50%; top: 100%; width: 82%; height: 12px; transform: translate(-50%, -45%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--contact), transparent); pointer-events: none;
}
/* The floor: the horizon runs just above the mark's middle; the plane comes forward to the footer line */
.hm-finale__floor {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(55% - var(--mw) * 0.354); z-index: 0; overflow: hidden;
  perspective: 520px; perspective-origin: 50% 0;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%);
  mask: linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%);
}
.hm-finale__plane {
  position: absolute; left: -40%; right: -40%; top: 0; height: 160%;
  background: radial-gradient(circle, var(--floor-dot) 1.2px, transparent 1.7px) 50% 0 / 26px 26px;
  transform-origin: 50% 0; transform: rotateX(64deg);
  -webkit-mask: radial-gradient(ellipse 50% 90% at 50% 0, #000 20%, transparent 72%);
  mask: radial-gradient(ellipse 50% 90% at 50% 0, #000 20%, transparent 72%);
}
.hm-finale__canvas {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  -webkit-mask: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
  mask: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
}
.hm-finale__stage.is-live .hm-finale__plane { display: none; }
.hm-finale__stage.is-live .hm-finale__mono { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hm-finale__pool, .hm-finale__shadow { animation: fm-breathe 5.5s ease-in-out infinite alternate; }
}
@keyframes fm-breathe { from { opacity: 0.75; } to { opacity: 1; } }
@media (max-width: 599px) {
  .hm-finale__title { font-size: 36px; line-height: 40px; letter-spacing: -0.03em; }
  .hm-finale__sub { font-size: 16px; line-height: 24px; }
}

/* ---------- Reveal: rise and settle, once, only under home.js with motion allowed ----------
   home.js sweeps: every block above 92% of the viewport is revealed, including ones already scrolled past.
   The demo window is never hidden (it holds the page's one input). */
.hm-live.motion [data-hr] { opacity: 0; transform: translateY(24px); transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); }
.hm-live.motion .hm-head[data-hr], .hm-live.motion .pstage__body[data-hr] { filter: blur(6px); transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.hm-live.motion [data-hr].is-in { opacity: 1; transform: none; filter: none; }
.hm-live.motion .pstage + .pstage [data-hr] { transition-delay: 120ms; }
/* The lineup: devices rise onto the shelf one after another */
.hm-live.motion .lineup[data-hr] { opacity: 1; transform: none; }
.hm-live.motion .lineup .dev { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1); }
.hm-live.motion .lineup.is-in .dev { opacity: 1; transform: none; }
.hm-live.motion .lineup .dev:nth-child(2) { transition-delay: 90ms; }
.hm-live.motion .lineup .dev:nth-child(3) { transition-delay: 180ms; }
.hm-live.motion .lineup .dev:nth-child(4) { transition-delay: 270ms; }
.hm-live.motion .lineup .dv-row, .hm-live.motion .lineup .dv-sheet { opacity: 0; transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
.hm-live.motion .lineup .dv-sheet { transform: translateY(14px); }
.hm-live.motion .lineup.is-in .dv-row, .hm-live.motion .lineup.is-in .dv-sheet { opacity: 1; transform: none; }
.hm-live.motion .lineup.is-in .dv-row:nth-of-type(1) { transition-delay: 700ms; }
.hm-live.motion .lineup.is-in .dv-row:nth-of-type(2) { transition-delay: 900ms; }
.hm-live.motion .lineup.is-in .dv-row:nth-of-type(3) { transition-delay: 1100ms; }
.hm-live.motion .lineup.is-in .dv-row:nth-of-type(4) { transition-delay: 1300ms; }
.hm-live.motion .lineup.is-in .dv-sheet { transition-delay: 1200ms; }

/* ---------- Print: every block in its finished state ---------- */
@media print {
  [data-hr], .lineup .dev, .lineup .dv-row, .lineup .dv-sheet { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .vw { color: inherit !important; }
  .hm-finale__stage.is-live .hm-finale__mono { visibility: visible; }
  .hm-finale__canvas { display: none; }
}