/* מחוץ לקופסה · the page. Every value comes from design/tokens.css.
   Breakpoints are in rem because media and container queries cannot read custom properties:
   20rem and 22.5rem small phones, 28.5rem the narrow hero stage, 51.25rem one column, 64rem wide grids. */

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--color-line-strong) transparent}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-sans);font-size:var(--text-body);font-weight:var(--weight-regular);line-height:var(--leading-body)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--color-accent);color:var(--color-on-accent)}
input,textarea{caret-color:var(--color-accent)}
.section--ink input,.section--ink textarea{caret-color:var(--color-on-band)}
:focus-visible{outline:var(--focus-width) solid var(--color-accent);outline-offset:var(--focus-offset)}
[hidden]{display:none !important}

.page{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;top:var(--space-3);inset-inline-start:var(--space-3);z-index:1;padding:var(--space-3) var(--space-4);background:var(--color-ink);color:var(--color-on-ink);border-radius:var(--radius-sm);font-weight:var(--weight-bold);transform:translateY(calc(-100% - var(--space-6)))}
.skip:focus{transform:none}
/* Read by screen readers, not shown */
.sr-only{position:absolute;inline-size:var(--border-hair);block-size:var(--border-hair);margin:calc(var(--border-hair) * -1);padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Header ---------- */
/* The header stays on top, so the action and the section links are always one tap away */
/* The top bar sits on the deep blue band, like the contact block and the footer (the user's pick, 2026-11-10) */
.topbar{position:sticky;top:0;z-index:5;background:var(--color-band);color:var(--color-on-band);border-bottom:var(--border-hair) solid transparent}
.topbar .brand__note,.topbar .nav a{color:var(--color-on-band-muted)}
@media (hover:hover){.topbar .nav a:hover{color:var(--color-on-band)}}
.topbar .btn--quiet{background:var(--color-paper);border-color:var(--color-paper);color:var(--color-accent-strong)}
@media (hover:hover){.topbar .btn--quiet:hover{background:var(--color-surface);border-color:var(--color-surface);color:var(--color-accent-strong)}}
.topbar :focus-visible{outline-color:var(--color-on-band)}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding-block:var(--space-4)}
.nav{display:flex;gap:var(--space-6);margin-inline:auto var(--space-6)}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--size-tap);min-inline-size:var(--size-tap);font-size:var(--text-small);color:var(--color-ink-muted);transition:color var(--dur-fast) var(--ease-out)}
@media (hover:hover){.nav a:hover{color:var(--color-ink)}}
/* Anchors, the skip link and focused fields all land clear of the sticky bar */
html{scroll-padding-top:calc(var(--size-tap) + var(--space-7))}
.site-header__cta{white-space:nowrap}
.brand{display:flex;align-items:center;gap:var(--space-3);min-height:var(--size-tap)}
.brand__mark{flex:none;width:var(--size-logo);height:var(--size-logo);fill:none;stroke:currentColor;stroke-width:var(--stroke-order)}
.brand__name{display:block;font-weight:var(--weight-bold);line-height:var(--leading-snug);white-space:nowrap}
.brand__note{display:block;font-size:var(--text-label);line-height:var(--leading-snug);color:var(--color-ink-muted);white-space:nowrap}

/* ---------- Actions ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--size-tap);padding:var(--space-3) var(--space-5);border:var(--border-hair) solid transparent;border-radius:var(--radius-sm);font:inherit;font-weight:var(--weight-bold);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:active{transform:translateY(var(--press-offset))}
.btn--primary{background:var(--color-accent);color:var(--color-on-accent)}
@media (hover:hover){.btn--primary:hover{background:var(--color-accent-strong)}}
.btn--quiet{padding-inline:var(--space-4);border-color:var(--color-ink);font-size:var(--text-small)}
@media (hover:hover){.btn--quiet:hover{background:var(--color-ink);color:var(--color-on-ink)}}
.icon{flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:var(--stroke-order);stroke-linecap:round;stroke-linejoin:round}
.txtlink{display:inline-flex;align-items:center;min-height:var(--size-tap);text-decoration:underline;text-underline-offset:var(--underline-offset);text-decoration-thickness:var(--border-hair)}
@media (hover:hover){.txtlink:hover{color:var(--color-accent)}}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:var(--grid-hero);align-items:center;gap:clamp(var(--space-5),4vw,var(--space-8));padding-block:var(--space-5) var(--space-8)}
.hero > *{min-width:0}
.hero__title{font-size:var(--text-display);font-weight:var(--weight-bold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);text-wrap:balance}
/* Blue in the text, at the user's request: the brand line, and one marked phrase per section title */
.hero__line{display:block;color:var(--color-accent)}
.hl{color:var(--color-accent)}
/* Every section title runs in two lines: the statement in ink, the marked phrase in blue under it */
.section__title .hl{display:block}
.section--ink .hl{color:color-mix(in srgb,var(--color-accent-soft) 50%,var(--color-on-band))}
/* On the blue band the call button turns white, so it still stands out; lines there use the muted grey (4.85:1) */
.section--ink .btn--primary{background:var(--color-paper);color:var(--color-accent-strong)}
@media (hover:hover){.section--ink .btn--primary:hover{background:var(--color-surface)}}
:is(.section--ink,.site-footer){--color-line-strong:var(--color-on-band-muted)}
/* Small solid marks take --color-mark: each repaints its own ink, so its fill, edge and keyframes follow */
:is(.tag--out,.agent__tab:not(.agent__tab--human),.tick,.status,.slots__pick,.path__node,.path__step,.hub__mark,.chip[aria-pressed="true"]){--color-ink:var(--color-mark)}
.hero__lead{max-width:var(--measure-lead);margin-top:var(--space-5);font-size:var(--text-lead);color:var(--color-ink-muted);text-wrap:pretty}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);margin-top:var(--space-6)}
.cta-note{max-width:var(--measure-lead);margin-top:var(--space-3);font-size:var(--text-small);color:var(--color-ink-muted);text-wrap:pretty}
.cta-after{display:none;flex-direction:column;align-items:center;margin-top:var(--space-5)}
.cta-after .cta-note{text-align:center}

/* The stage: an SVG for the lines and the box, real HTML for every label, so labels never shrink with the drawing */
.stage-wrap{container:stage/inline-size}
.stage{position:relative;aspect-ratio:var(--stage-ratio);max-width:var(--stage-max);margin-inline:auto;--stage-ratio:560/580}
.stage__art{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.stage__art--narrow{display:none}

.tag{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);padding:var(--space-2) var(--space-3);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-sm);color:var(--color-ink);font-size:var(--text-label);line-height:var(--leading-snug);white-space:nowrap}
/* Problems are note scraps: square slips of paper, each tilted a little, like notes scattered over a busy desk.
   They read as the mess itself, never as controls (the user's choice, 2026-11-06). The paper also hides the line
   under the text, so each line seems to start at its note. */
.tag[data-beat]{padding:var(--space-2) var(--space-3);background:var(--color-paper);border-color:var(--color-line-strong);border-radius:0;transform:translate(-50%,-50%) rotate(var(--tilt))}
.tag[data-beat]:nth-child(1){--tilt:-3deg}
.tag[data-beat]:nth-child(2){--tilt:2.5deg}
.tag[data-beat]:nth-child(3){--tilt:-2deg}
.tag[data-beat]:nth-child(4){--tilt:3deg}
.tag[data-beat]:nth-child(5){--tilt:-1.5deg}
/* Outcomes are the only filled shapes */
.tag--out{background:var(--color-ink);border-color:var(--color-ink);border-radius:var(--radius-pill);color:var(--color-on-ink);font-weight:var(--weight-bold)}

/* The box is outlined in ink, so the object reads as order and grey belongs only to the spiral */
.box-flap-a{fill:var(--color-box-flap-a);stroke:var(--color-ink);stroke-width:var(--stroke-hair)}
.box-flap-b{fill:var(--color-box-flap-b);stroke:var(--color-ink);stroke-width:var(--stroke-hair)}
.box-inside{fill:var(--color-box-inside)}
.box-front{fill:var(--color-box-front);stroke:var(--color-ink);stroke-width:var(--stroke-hair)}
.box-side{fill:var(--color-box-side);stroke:var(--color-ink);stroke-width:var(--stroke-hair)}
/* The box, less flat: the cube lights the inside and the flaps blue, a soft shade grounds it, a label sits on the front */
.glow-a{stop-color:color-mix(in srgb,var(--color-accent-soft) 45%,var(--color-box-inside))}
.glow-b{stop-color:var(--color-box-inside)}
.flapA-a{stop-color:color-mix(in srgb,var(--color-accent-soft) 24%,var(--color-box-flap-a))}
.flapA-b{stop-color:var(--color-box-flap-a)}
.flapB-a{stop-color:color-mix(in srgb,var(--color-accent-soft) 18%,var(--color-box-flap-b))}
.flapB-b{stop-color:var(--color-box-flap-b)}
.shade-a{stop-color:var(--color-line-strong);stop-opacity:.4}
.shade-b{stop-color:var(--color-line-strong);stop-opacity:0}
.box-label__card{fill:var(--color-paper);stroke:var(--color-ink);stroke-width:var(--stroke-hair)}
.box-label__line{fill:none;stroke:var(--color-line-strong);stroke-width:var(--stroke-flow);stroke-linecap:round}
.cube-top{fill:var(--color-accent-soft)}
.cube-left{fill:var(--color-accent)}
.cube-right{fill:var(--color-accent-strong)}
.line-tangle{fill:none;stroke:var(--color-line-strong);stroke-width:var(--stroke-flow)}
.line-order{fill:none;stroke:var(--color-ink);stroke-width:var(--stroke-order)}
.pulse{opacity:0;offset-rotate:0deg}
.pulse--in{fill:var(--color-ink-muted)}
.pulse--out{fill:var(--color-accent)}

.cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-1) var(--space-3);margin-top:var(--space-3);font-size:var(--text-small);color:var(--color-ink-muted)}
.stamp{display:inline-block;padding:var(--space-1) var(--space-3);border:var(--border-hair) solid var(--color-ink);border-radius:var(--radius-pill);color:var(--color-ink);font-size:var(--text-small);font-weight:var(--weight-bold);line-height:var(--leading-snug)}
.replay{min-height:var(--size-tap);padding-inline:var(--space-2);background:none;border:0;color:var(--color-ink);font:inherit;font-size:var(--text-small);text-decoration:underline;text-underline-offset:var(--underline-offset);cursor:pointer}
@media (hover:hover){.replay:hover{color:var(--color-accent)}}
/* One pause for the whole page: every "עצירת התנועה" button sets it. The hero freezes where it is.
   The working diagrams show their finished state, as with reduced motion, so a paused page never shows them empty. */
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused !important}
.motion-paused [data-play],.motion-paused [data-play]::before,.motion-paused [data-play]::after,
.motion-paused [data-play] *,.motion-paused [data-play] *::before,.motion-paused [data-play] *::after{animation:none !important}
/* The hero rests while it is off screen. All its parts stop together, so the pairs stay in step. */
.stage.is-away *,.stage.is-away *::before,.stage.is-away *::after{animation-play-state:paused !important}

/* The loops, on one shared cycle. A grey pulse leaves a problem, the cube jumps as it lands,
   a blue pulse runs to that problem's own outcome, and as it lands the problem and the outcome light together. */
.stage .pulse--in{animation:flow-in var(--dur-flow-cycle) linear infinite}
.stage .pulse--out{animation:flow-out var(--dur-flow-cycle) linear infinite}
.stage .tag[data-beat]{animation:tag-pair var(--dur-flow-cycle) linear infinite}
/* !important so the animation shorthands above can't reset the beat offsets */
.stage [data-beat="1"]{animation-delay:calc(var(--dur-flow-step) * -0) !important}
.stage [data-beat="2"]{animation-delay:calc(var(--dur-flow-step) * -1) !important}
.stage [data-beat="3"]{animation-delay:calc(var(--dur-flow-step) * -2) !important}
.stage [data-beat="4"]{animation-delay:calc(var(--dur-flow-step) * -3) !important}
.stage [data-beat="5"]{animation-delay:calc(var(--dur-flow-step) * -4) !important}
@keyframes flow-in{
  0%{offset-distance:0%;opacity:0}
  4%{opacity:1}
  41%{opacity:1}
  45%,100%{offset-distance:100%;opacity:0}
}
@keyframes flow-out{
  0%,45%{offset-distance:0%;opacity:0}
  47%{opacity:1}
  63%{opacity:1}
  65%,100%{offset-distance:100%;opacity:0}
}
/* As its pulse lands, the note lights with its outcome: a blue edge and a blue wash */
@keyframes tag-pair{
  0%,64%,71%,100%{border-color:var(--color-line-strong);background:var(--color-paper)}
  65%{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent-soft) 16%,var(--color-paper))}
}
.stage .cube{animation:cube-hop var(--dur-flow-step) var(--ease-out) var(--dur-flow-first) infinite}
/* The cube stays in the box (the user's choice, 2026-11-09): only the small hop when something lands in it.
   The once-a-cycle rise out of the box (round 5) is retired. */
@keyframes cube-hop{
  0%,100%{transform:translateY(0)}
  22%{transform:translateY(calc(var(--motion-bob) * -1))}
  60%{transform:translateY(0)}
}
/* Each outcome flashes when its own pulses land: a at beats 4 and 1, b at beat 3, c at beats 2 and 5 */
.stage .tag[data-flash="a"]{animation:flash-a var(--dur-flow-cycle) linear infinite}
.stage .tag[data-flash="b"]{animation:flash-b var(--dur-flow-cycle) linear infinite}
.stage .tag[data-flash="c"]{animation:flash-c var(--dur-flow-cycle) linear infinite}
@keyframes flash-a{
  0%,4%,11%,64%,71%,100%{background:var(--color-ink);border-color:var(--color-ink)}
  5%,65%{background:var(--color-accent);border-color:var(--color-accent)}
}
@keyframes flash-b{
  0%,24%,31%,100%{background:var(--color-ink);border-color:var(--color-ink)}
  25%{background:var(--color-accent);border-color:var(--color-accent)}
}
@keyframes flash-c{
  0%,44%,51%,84%,91%,100%{background:var(--color-ink);border-color:var(--color-ink)}
  45%,85%{background:var(--color-accent);border-color:var(--color-accent)}
}

/* Narrow composition, chosen by the width the stage really has */
@container stage (max-width:28.5rem){
  .stage{--stage-ratio:340/400}
  .stage__art--wide{display:none}
  .stage__art--narrow{display:block}
  .tag{left:calc(var(--nx) * 1%);top:calc(var(--ny) * 1%)}
  /* The phone drawing has tighter rows: flatter notes, half the tilt */
  .tag[data-beat]{padding:var(--space-1) var(--space-2);transform:translate(-50%,-50%) rotate(calc(var(--tilt) / 2))}
}
@container stage (max-width:20rem){
  .tag{padding-inline:var(--space-2)}
  .tag[data-beat]{transform:translate(-50%,-50%)}
}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-pad)}
.section--surface{background:var(--color-surface)}
.section--ink{background:var(--color-band);color:var(--color-on-band)}
.section__head{max-width:var(--measure-head);margin-bottom:var(--space-8)}
.section__title{font-size:var(--text-title);font-weight:var(--weight-bold);line-height:var(--leading-title);letter-spacing:var(--tracking-display);text-wrap:balance}
.section__intro{margin-top:var(--space-4);max-width:var(--measure-text);font-size:var(--text-lead);color:var(--color-ink-muted);text-wrap:pretty}
.section--ink .section__intro{color:var(--color-on-band-muted)}
.split{display:grid;grid-template-columns:var(--grid-split);gap:var(--space-7) var(--space-8);align-items:start}

/* Sequences play once, when they scroll into view. Without JS or with reduced motion they show their finished state. */
.js-motion [data-play]:not(.is-playing),
.js-motion [data-play]:not(.is-playing)::before,
.js-motion [data-play]:not(.is-playing)::after,
.js-motion [data-play]:not(.is-playing) *,
.js-motion [data-play]:not(.is-playing) *::before,
.js-motion [data-play]:not(.is-playing) *::after{animation-play-state:paused !important}
/* !important because the animation shorthands below tie on specificity for pseudo-elements and would restart them */
/* Blocks fade up once as they enter the screen. Hidden only when JS can reveal them, so without JS
   or with reduced motion everything is simply there. Second blocks in a section follow the first by a beat. */
/* Sections build up every time they enter the screen, scrolling down or up. The block rises, and its parts follow
   one after another, so it reads as being assembled. The hidden state is applied without a transition, so nothing
   ever fades out in view; JS only hides a block once it is fully off screen. Without JS or with reduced motion all is there.
   The hub is revealed whole: its parts are positioned with transforms of their own. */
.js-motion [data-reveal]:not(.is-in),
.js-motion [data-reveal]:not(.hub):not(.is-in) > *{opacity:0;transform:translateY(var(--motion-reveal))}
.js-motion [data-reveal].is-in,
.js-motion [data-reveal]:not(.hub).is-in > *{transition:opacity var(--dur-reveal-in) var(--ease-out),transform var(--dur-reveal-in) var(--ease-out)}
.js-motion [data-reveal].is-in > *:nth-child(2){transition-delay:calc(var(--dur-reveal-step) * 2)}
.js-motion [data-reveal].is-in > *:nth-child(3){transition-delay:calc(var(--dur-reveal-step) * 3)}
.js-motion [data-reveal].is-in > *:nth-child(4){transition-delay:calc(var(--dur-reveal-step) * 4)}
.js-motion [data-reveal].is-in > *:nth-child(5){transition-delay:calc(var(--dur-reveal-step) * 5)}
.js-motion [data-reveal].is-in > *:nth-child(6){transition-delay:calc(var(--dur-reveal-step) * 6)}
.js-motion [data-reveal].is-in > *:nth-child(n+7){transition-delay:calc(var(--dur-reveal-step) * 7)}
.js-motion [data-reveal="2"].is-in{transition-delay:calc(var(--dur-reveal-step) * 2)}
/* While the page is paused, blocks are simply there: nothing rises or fades in */
.js-motion.motion-paused [data-reveal],
.js-motion.motion-paused [data-reveal]:not(.hub) > *{opacity:1;transform:none;transition:none}
.is-reset,.is-reset *,.is-reset::before,.is-reset::after,.is-reset *::before,.is-reset *::after{animation:none !important}

/* ---------- Agent cards: one language for every working diagram ---------- */
/* After aiagency.so: a white card in a hairline frame, a dark tab that names who is working,
   and real fragments inside that fill in while you watch. Each card starts at --t0. */
.agent{--t0:0s;position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:calc(var(--space-5) + var(--space-2)) var(--space-5) var(--space-5);background:var(--color-paper);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-sm)}
.agent__tab{position:absolute;top:0;inset-inline-start:var(--space-4);transform:translateY(-50%);display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-ink);color:var(--color-on-ink);border-radius:var(--radius-sm);font-size:var(--text-label);font-weight:var(--weight-bold);line-height:var(--leading-snug);white-space:nowrap}
.agent__tab .i{inline-size:var(--space-4);block-size:var(--space-4)}
.agent__tab--human{background:var(--color-paper);color:var(--color-ink);border:var(--border-hair) solid var(--color-ink)}
.agent__dot{flex:none;inline-size:var(--size-dot);block-size:var(--size-dot);border-radius:var(--radius-pill);background:var(--color-on-ink)}
.agent__title{font-weight:var(--weight-bold);line-height:var(--leading-snug)}
.agent__meta,.agent__foot{font-size:var(--text-label);color:var(--color-ink-muted)}
.agent__foot{padding-top:var(--space-3);border-top:var(--border-hair) dashed var(--color-line-strong)}
.agent--done{border-color:var(--color-ink)}
.i{inline-size:1.25em;block-size:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:var(--stroke-order);stroke-linecap:round;stroke-linejoin:round}
.sprite{display:none}

/* Fragments */
.bubble{padding:var(--space-3) var(--space-4);background:var(--color-surface);border-radius:var(--radius-lg);border-start-start-radius:var(--radius-sm);font-size:var(--text-small);text-wrap:pretty}
.type{display:inline-block}
.facts{display:grid;gap:var(--space-1);font-size:var(--text-small)}
.facts div{display:grid;grid-template-columns:var(--space-8) minmax(0,1fr);gap:var(--space-2);padding-block:var(--space-1);border-bottom:var(--border-hair) dashed var(--color-line)}
.facts dt{color:var(--color-ink-muted)}
.facts dd{font-weight:var(--weight-bold)}
.progress{block-size:var(--space-1);background:var(--color-line);border-radius:var(--radius-pill);overflow:hidden}
.progress span{display:block;block-size:100%;background:var(--color-ink);transform-origin:right}
.slots{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.slots li{padding:var(--space-1) var(--space-3);background:var(--color-surface);border-radius:var(--radius-sm);font-size:var(--text-small);font-variant-numeric:tabular-nums}
.slots__pick{background:var(--color-ink) !important;color:var(--color-on-ink);font-weight:var(--weight-bold)}
.checklist{display:grid;gap:var(--space-2);font-size:var(--text-small)}
.checklist li{display:flex;align-items:center;gap:var(--space-3)}
.tick{display:grid;place-items:center;flex:none;inline-size:var(--space-5);block-size:var(--space-5);background:var(--color-ink);color:var(--color-on-ink);border-radius:var(--radius-sm)}
.tick .i{inline-size:var(--space-4);block-size:var(--space-4)}
.status{align-self:flex-start;margin-top:auto;padding:var(--space-1) var(--space-3);background:var(--color-ink);color:var(--color-on-ink);border-radius:var(--radius-pill);font-size:var(--text-small);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.chat{display:grid;gap:var(--space-2)}
.msg{max-inline-size:85%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:var(--text-small);line-height:var(--leading-snug)}
.msg--in{justify-self:start;background:var(--color-surface);border-start-start-radius:var(--radius-sm)}
.msg--out{justify-self:end;background:var(--color-accent);color:var(--color-on-accent);border-start-end-radius:var(--radius-sm)}
.msg--handoff{justify-self:center;display:inline-flex;align-items:center;gap:var(--space-2);max-inline-size:none;padding:var(--space-1) var(--space-3);border:var(--border-hair) solid var(--color-ink);border-radius:var(--radius-pill);font-size:var(--text-label);font-weight:var(--weight-bold)}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.board__col{display:grid;align-content:start;gap:var(--space-2);min-block-size:calc(var(--space-9) + var(--space-5));padding:var(--space-2);background:var(--color-surface);border-radius:var(--radius-sm)}
.board__name{font-size:var(--text-label);font-weight:var(--weight-bold);color:var(--color-ink-muted)}
.ticket{padding:var(--space-2);background:var(--color-paper);border:var(--border-hair) solid var(--color-line);border-radius:var(--radius-sm);font-size:var(--text-label);line-height:var(--leading-snug)}
/* The moving ticket rests in the done column: two steps of one column plus its padding and the gap, leftwards */
.ticket--move{--step:calc(-100% - var(--space-2) * 3);position:relative;z-index:1;border-color:var(--color-ink);font-weight:var(--weight-bold);transform:translateX(calc(var(--step) * 2))}
.idea{font-size:var(--text-body);font-weight:var(--weight-bold);line-height:var(--leading-snug)}

/* Motion: each fragment arrives in turn after its card (--t0), steps of half a reveal (--f) */
.js-motion .facts div,.js-motion .checklist li,.js-motion .msg{animation:row-in var(--dur-reveal) var(--ease-out) both;animation-delay:calc(var(--t0) + var(--dur-reveal) / 2 * var(--f))}
.js-motion .tick{animation:tick-in var(--dur-reveal) var(--ease-out) both;animation-delay:calc(var(--t0) + var(--dur-reveal) / 2 * var(--f) + var(--dur-reveal) / 2)}
.js-motion .type{animation:type var(--dur-demo-step) steps(var(--chars),end) both;animation-delay:var(--t0)}
.js-motion .progress span{animation:link-fill var(--dur-demo-step) var(--ease-in-out) both;animation-delay:var(--t0)}
.js-motion .slots li{animation:node-on var(--dur-reveal) var(--ease-out) both;animation-delay:calc(var(--t0) + var(--dur-reveal))}
.js-motion .slots__pick{animation:slot-pick var(--dur-reveal) var(--ease-out) both;animation-delay:calc(var(--t0) + var(--dur-reveal) * 2)}
.js-motion .status{animation:pop var(--dur-reveal) var(--ease-out) both;animation-delay:calc(var(--t0) + var(--dur-reveal) * 2.5)}
.js-motion .ticket--move{animation:ticket-move calc(var(--dur-demo-step) * 3) var(--ease-in-out) both;animation-delay:var(--dur-reveal)}
.js-motion .agent__foot{animation:node-on var(--dur-reveal) var(--ease-out) both;animation-delay:calc(var(--dur-reveal) * 3)}
@keyframes row-in{from{opacity:0;transform:translateY(var(--space-1))}to{opacity:1;transform:none}}
@keyframes tick-in{
  from{background:var(--color-surface);color:transparent}
  60%{background:var(--color-accent);color:var(--color-on-accent)}
  to{background:var(--color-ink);color:var(--color-on-ink)}
}
/* Typing in reading order: the clip opens from the right edge leftwards */
@keyframes type{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ticket-move{
  0%,15%{transform:translateX(0);border-color:var(--color-line)}
  45%,60%{transform:translateX(var(--step));border-color:var(--color-accent)}
  90%,100%{transform:translateX(calc(var(--step) * 2));border-color:var(--color-ink)}
}
@keyframes node-on{from{opacity:.3}to{opacity:1}}
@keyframes slot-pick{
  from{background:var(--color-surface);color:var(--color-ink);font-weight:var(--weight-regular)}
  to{background:var(--color-ink);color:var(--color-on-ink);font-weight:var(--weight-bold)}
}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes link-fill{
  from{transform:scaleX(0);background:var(--color-accent)}
  70%{background:var(--color-accent)}
  to{transform:scaleX(1);background:var(--color-ink)}
}

/* ---------- How it works: a network of agents ---------- */
/* The user's choice on 2026-11-06, after the aiagency.so recording (design/how-network-v1.html has the comparison).
   One inquiry branches to two agents that work side by side, and both hand over to the booking. The cards never
   leave the screen: the fragments inside them refresh in turn, each at its own moment, on one shared cycle.
   --p is the moment a fragment starts, in --dur-net-unit; a card's --p times its tab dot.
   The resting state, used with reduced motion, without JS and while paused, is the finished one. */
.net{padding:var(--space-7);background:var(--color-surface);border:var(--border-hair) solid var(--color-line);border-radius:var(--radius-sm)}
.net__grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a b d" "a c e";gap:var(--space-7) var(--space-8);align-items:center;padding-top:var(--space-3)}
/* The inquiry sits in the middle of its column; the others line up by their tops, row by row */
.net__grid > [data-node="a"]{grid-area:a}
.net__grid > [data-node="b"]{grid-area:b;align-self:start}
.net__grid > [data-node="c"]{grid-area:c;align-self:start}
.net__grid > [data-node="d"]{grid-area:d;align-self:start}
.net__grid > [data-node="e"]{grid-area:e;align-self:start}
/* Wires: drawn by site.js to follow the cards (--len is the length it measures). A dashed hairline,
   and a short blue pulse that runs along it. */
.net__wires{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;pointer-events:none}
.net__wire{fill:none;stroke:var(--color-line-strong);stroke-width:var(--border-hair);stroke-dasharray:var(--space-1) var(--space-1);shape-rendering:crispEdges}
.net__flow{fill:none;stroke:var(--color-accent);stroke-width:var(--focus-width);stroke-linecap:square;stroke-dasharray:var(--space-4) calc(var(--len, 0) * 1px);stroke-dashoffset:var(--space-4);opacity:0}
/* Card parts the network adds */
.agent__head{display:grid;gap:var(--space-1)}
.agent__stage{font-size:var(--text-label);color:var(--color-ink-muted)}
.net__lines{display:grid;gap:var(--space-1);font-size:var(--text-small)}
.net__lines li{padding-block:var(--space-1);border-bottom:var(--border-hair) dashed var(--color-line)}
.net__work{--pct:100;display:grid;gap:var(--space-2)}
.net__meter{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);font-size:var(--text-label);color:var(--color-ink-muted)}
.net__pct{font-weight:var(--weight-bold);color:var(--color-ink);font-variant-numeric:tabular-nums}
.net__pct::after{counter-reset:pct var(--pct);content:counter(pct) "%"}
.net .progress span{transform:scaleX(calc(var(--pct) / 100))}
.net__note{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--color-paper);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-sm)}
.net__who{font-size:var(--text-label);font-weight:var(--weight-bold);color:var(--color-ink-muted)}
.net__say{font-size:var(--text-small);line-height:var(--leading-snug);text-wrap:pretty}
.net__who + .net__say{margin-top:var(--space-1)}
/* Typing with a caret: the words open from the right edge leftwards, and the caret walks in front of them */
.retype{position:relative;display:inline-block;vertical-align:top}
.retype > span{display:inline-block}
.retype::after{content:"";position:absolute;top:var(--space-1);bottom:var(--space-1);inset-inline-start:100%;inline-size:var(--focus-width);background:var(--color-ink);opacity:0}

/* ---------- Ambient loops: every working diagram that carries data-ambient ---------- */
/* A diagram that is being read never empties: its cards stay, and the fragments inside refresh in turn on one
   shared cycle (--dur-net-cycle). --p is the moment a fragment starts, in --dur-net-unit. It is inherited, so a
   card's --p times its tab dot and a list item's --p times its tick. The page's one-time builds of these
   fragments give way to the loop; the resting state, used with reduced motion, without JS and while paused,
   is the finished one. */
@property --pct{syntax:"<integer>";inherits:true;initial-value:100}
[data-ambient] .slots__pick,[data-ambient] .status,[data-ambient] .msg--handoff,
[data-ambient] .hub__box--out,[data-ambient] .path__node{outline:var(--focus-width) solid transparent;outline-offset:var(--focus-width)}
.msg--out .retype::after{background:var(--color-on-accent)}
.js-motion [data-ambient] .facts div,.js-motion [data-ambient] .checklist li,.js-motion [data-ambient] .slots li:not(.slots__pick),
.js-motion [data-ambient] .progress span,.js-motion [data-ambient] .type,.js-motion [data-ambient] .msg:not(.msg--handoff),
.js-motion [data-ambient] .agent__foot,.js-motion [data-ambient] .path__step:not(:last-child)::after{animation:none}
.js-motion [data-ambient] .retype > span,.js-motion [data-ambient] .retype::after,.js-motion .net__flow,.js-motion .net__work,
.js-motion [data-ambient] .slots__pick,.js-motion [data-ambient] .status,.js-motion [data-ambient] .msg--handoff,
.js-motion [data-ambient] .tick,.js-motion [data-ambient] .agent__dot,.js-motion [data-ambient] .ticket--move,
.js-motion [data-ambient] .hub__flow,.js-motion [data-ambient] .hub__core,.js-motion [data-ambient] .hub__box--out,
.js-motion [data-ambient] .path__node{
  animation-duration:var(--dur-net-cycle);animation-iteration-count:infinite;
  animation-delay:calc(var(--dur-net-unit) * var(--p, 0) - var(--dur-net-cycle))
}
.js-motion [data-ambient] .retype > span{animation-name:net-type;animation-timing-function:steps(var(--chars),end)}
.js-motion [data-ambient] .retype::after{animation-name:net-caret;animation-timing-function:steps(var(--chars),end)}
.js-motion .net__flow{animation-name:net-run;animation-timing-function:linear}
.js-motion .net__work{animation-name:net-pct;animation-timing-function:linear}
.js-motion [data-ambient] .slots__pick,.js-motion [data-ambient] .status,.js-motion [data-ambient] .msg--handoff,
.js-motion [data-ambient] .hub__box--out,.js-motion [data-ambient] .path__node{animation-name:net-ring;animation-timing-function:var(--ease-out)}
.js-motion [data-ambient] .tick{animation-name:net-tick;animation-timing-function:var(--ease-out)}
.js-motion [data-ambient] .agent__dot{animation-name:net-dot;animation-timing-function:linear}
/* The board: a ticket walks to done, rests there, and the next one arrives in new */
.js-motion [data-ambient] .ticket--move{animation-name:ticket-loop;animation-timing-function:var(--ease-in-out)}
/* The hub: pulses run in from every source, the core lights, and the pulses run out to every result */
.js-motion [data-ambient] .hub__flow{animation-name:hub-run;animation-timing-function:linear}
.js-motion [data-ambient] .hub__core{animation-name:core-beat;animation-timing-function:var(--ease-out)}
/* The path: a light walks from step to step */
.js-motion [data-ambient] .path__node{--p:calc(var(--i, 0) * 1.2)}
@keyframes ticket-loop{
  0%{transform:translateX(0);opacity:0;border-color:var(--color-line)}
  6%{transform:translateX(0);opacity:1;border-color:var(--color-line)}
  16%,32%{transform:translateX(var(--step));opacity:1;border-color:var(--color-accent)}
  44%,84%{transform:translateX(calc(var(--step) * 2));opacity:1;border-color:var(--color-ink)}
  92%,100%{transform:translateX(calc(var(--step) * 2));opacity:0;border-color:var(--color-ink)}
}
@keyframes hub-run{
  0%{stroke-dashoffset:60;opacity:1}
  13%{stroke-dashoffset:-1000;opacity:1}
  13.1%,100%{stroke-dashoffset:-1000;opacity:0}
}
@keyframes core-beat{0%{border-color:var(--color-accent)}11%,100%{border-color:var(--color-line-strong)}}
.net__flow--ab,.net__flow--ac{--p:2.4}
.net__flow--bd{--p:6.3}
.net__flow--cd{--p:6.5}
@keyframes net-type{0%{clip-path:inset(0 0 0 100%)}9%,100%{clip-path:inset(0 0 0 0)}}
@keyframes net-caret{
  0%{inset-inline-start:0;opacity:1}
  9%{inset-inline-start:100%;opacity:1}
  12%,100%{inset-inline-start:100%;opacity:0}
}
@keyframes net-run{
  0%{stroke-dashoffset:var(--space-4);opacity:1}
  13%{stroke-dashoffset:calc(var(--len, 0) * -1px);opacity:1}
  13.1%,100%{stroke-dashoffset:calc(var(--len, 0) * -1px);opacity:0}
}
@keyframes net-pct{0%{--pct:0}33%,100%{--pct:100}}
@keyframes net-ring{0%{outline-color:var(--color-accent)}11%,100%{outline-color:transparent}}
@keyframes net-tick{
  0%{background:var(--color-surface);color:transparent}
  4%{background:var(--color-accent);color:var(--color-on-accent)}
  9%,100%{background:var(--color-ink);color:var(--color-on-ink)}
}
@keyframes net-dot{0%,6%,12%,18%,24%,100%{opacity:1}3%,9%,15%,21%{opacity:.2}}

/* ---------- Services: four rows, each with a working agent card ---------- */
.services{border-top:var(--border-hair) solid var(--color-line)}
.service{display:grid;grid-template-columns:var(--grid-split);gap:var(--space-6) var(--space-8);align-items:center;padding-block:var(--space-8);border-bottom:var(--border-hair) solid var(--color-line)}
.service__title{font-size:var(--text-subtitle);line-height:var(--leading-snug);text-wrap:balance}
.service__text p{max-width:var(--measure-lead);margin-top:var(--space-3);color:var(--color-ink-muted);text-wrap:pretty}
.service .ui{inline-size:100%;max-inline-size:var(--ui-max);justify-self:center}
.cap--start{justify-content:flex-start;margin-top:var(--space-5)}

/* ---------- Use cases: a broad list, so every kind of business finds itself ---------- */
/* A list, not a card grid: the icon sits at the start of the line, a hairline separates the rows */
.uses__filter{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.chip{min-block-size:var(--size-tap);padding-inline:var(--space-4);background:none;border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-pill);color:var(--color-ink);font:inherit;font-size:var(--text-small);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
@media (hover:hover){.chip:hover{border-color:var(--color-ink)}}
.chip[aria-pressed="true"]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-on-ink);font-weight:var(--weight-bold)}
.uses__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-6)}
.use{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--space-4);row-gap:var(--space-1);padding-block:var(--space-5);border-top:var(--border-hair) solid var(--color-line)}
/* Blue icons on a see-through blue tile (the user's choice, 2026-11-09) */
.use__icon{grid-row:1 / span 3;inline-size:var(--space-7);block-size:var(--space-7);padding:var(--space-3);color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,transparent);border:var(--border-hair) solid color-mix(in srgb,var(--color-accent) 18%,transparent);border-radius:var(--radius-sm);box-sizing:border-box}
.use__title{font-size:var(--text-body);line-height:var(--leading-snug)}
.use p{font-size:var(--text-small);color:var(--color-ink-muted);text-wrap:pretty}
.use__kind{justify-self:start;align-self:start;margin-top:var(--space-2);padding:0 var(--space-2);border:var(--border-hair) solid var(--color-line);border-radius:var(--radius-pill);font-size:var(--text-label);color:var(--color-ink-muted)}
.uses__more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-6);padding-top:var(--space-5);border-top:var(--border-hair) solid var(--color-line);color:var(--color-ink-muted)}
.uses__more .txtlink{color:var(--color-accent);font-weight:var(--weight-bold)}

/* The lead card: "סוכן מחוץ לקופסה", one agent for every purpose, with a day of very different requests
   (the user's pick from design/agents-compare.html, 2026-11-09) */
.feature{display:grid;grid-template-columns:var(--grid-split);gap:var(--space-6) var(--space-8);align-items:center;margin-bottom:var(--space-8);padding-block:var(--space-7);border-block:var(--border-hair) solid var(--color-line)}
.feature .ui{inline-size:100%;max-inline-size:var(--ui-max);justify-self:center}
.feature__name{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-mark);color:var(--color-on-ink);border-radius:var(--radius-sm);font-size:var(--text-label);font-weight:var(--weight-bold);line-height:var(--leading-snug)}
.feature__title{margin-top:var(--space-4);font-size:var(--text-title-sm);line-height:var(--leading-title);text-wrap:balance}
.feature__text > p:not(.feature__name){max-width:var(--measure-lead);margin-top:var(--space-4);color:var(--color-ink-muted);text-wrap:pretty}
.feature__text .txtlink{display:inline-block;margin-top:var(--space-5);color:var(--color-accent);font-weight:var(--weight-bold)}
@media (max-width:51.25rem){.feature{grid-template-columns:minmax(0,1fr)}}


/* ---------- The thread: one light dashed line from the box to the form (the user's pick, 2026-11-09) ---------- */
/* Drawn by site.js in the side margins; it crosses over only in the quiet space between sections, and passes
   behind the content and its cards. */
main{position:relative}
main > .page,main > .section > .page{position:relative;z-index:1}
.thread{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;pointer-events:none;z-index:0;overflow:visible}
.thread path{fill:none;stroke:var(--color-line-strong);stroke-opacity:.45;stroke-width:var(--border-hair);stroke-dasharray:var(--space-1) var(--space-1)}
.thread circle{fill:var(--color-paper);stroke:var(--color-line-strong);stroke-opacity:.6;stroke-width:var(--border-hair)}

/* ---------- Your systems: what you have goes in, comes out in order ---------- */
/* The lines are one SVG in a fixed 1000x440 frame; the boxes are HTML placed on the same frame, so text never scales */
.hub{position:relative;aspect-ratio:1000/440;margin-bottom:var(--space-8)}
.hub__lines{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.hub__line{fill:none;stroke:var(--color-line-strong);stroke-width:var(--stroke-hair);stroke-dasharray:var(--space-1) var(--space-1);vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
/* A flow is a short accent dash that runs the length of its line once; pathLength is 1000, so 60 is the dash */
.hub__flow{fill:none;stroke:var(--color-accent);stroke-width:var(--focus-width);stroke-linecap:round;stroke-dasharray:60 940;vector-effect:non-scaling-stroke;opacity:0}
.js-motion .hub__flow{animation:flow-run var(--dur-flow-run) linear both;animation-delay:calc(var(--dur-reveal) / 2 * var(--n))}
.js-motion .hub__flow--out{animation-delay:calc(var(--dur-flow-run) + var(--dur-reveal) + var(--dur-reveal) / 2 * var(--n))}
@keyframes flow-run{
  0%{stroke-dashoffset:60;opacity:1}
  95%{opacity:1}
  100%{stroke-dashoffset:-1000;opacity:0}
}
.hub__inputs,.hub__outputs{position:absolute;inset-block:0;inline-size:18%}
.hub__inputs{inset-inline-start:0}
.hub__outputs{inset-inline-end:0}
.hub__box{position:absolute;inset-inline:0;top:calc(var(--y) * 1%);transform:translateY(-50%);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--color-paper);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-sm);font-size:var(--text-small);line-height:var(--leading-snug)}
.hub__box .i{color:var(--color-ink-muted)}
.hub__box--out{border-color:var(--color-ink);font-weight:var(--weight-bold)}
.hub__box--out .i{color:var(--color-ink)}
.hub__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;inline-size:14%;aspect-ratio:1;background:var(--color-paper);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-pill)}
.hub__core::before{content:"";position:absolute;inset:calc(var(--space-4) * -1);border:var(--border-hair) dashed var(--color-line-strong);border-radius:var(--radius-pill)}
.hub__mark{inline-size:44%;padding:9%;background:var(--color-ink);fill:none;stroke:var(--color-on-ink);stroke-width:var(--stroke-order);stroke-linejoin:round;border-radius:var(--radius-sm);box-sizing:content-box}
.js-motion .hub__core{animation:hub-in var(--dur-reveal) var(--ease-out) both;animation-delay:var(--dur-flow-run)}
@keyframes hub-in{
  0%{border-color:var(--color-line-strong)}
  50%{border-color:var(--color-accent);transform:translate(-50%,-50%) scale(1.06)}
  100%{border-color:var(--color-line-strong);transform:translate(-50%,-50%)}
}
.hub .cap{position:absolute;inset-inline:0;bottom:calc(var(--space-7) * -1)}
.hub__wires{display:none;position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;pointer-events:none}

/* ---------- Calculator ---------- */
/* The answer sits under the question, the inputs beside them; on phones the inputs come before the answer */
/* On its surface band the calculator is a paper instrument, so it outweighs the plain sections around it */
.calc{display:grid;grid-template-columns:var(--grid-split);grid-template-areas:"intro form" "out form";gap:var(--space-6) var(--space-8);align-items:start;padding:var(--space-7);background:var(--color-paper);border:var(--border-hair) solid var(--color-line);border-radius:var(--radius-lg)}
.section:not(.section--surface) .calc{background:var(--color-surface)}
.calc__intro{grid-area:intro}
.calc__form{grid-area:form;display:grid;gap:var(--space-5)}
.calc__out{grid-area:out;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.calc__out .calc__result{align-self:stretch}
/* align-content:start keeps side-by-side fields level when one of them shows an error */
.field{display:grid;align-content:start;gap:var(--space-2);min-inline-size:0}
.field label{font-size:var(--text-small);font-weight:var(--weight-bold)}
.range{display:flex;align-items:center;gap:var(--space-4)}
.range output{min-inline-size:var(--space-7);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;text-align:center}
/* The slider is themed from the palette, not left to the browser */
.range input{flex:1;min-block-size:var(--size-tap);margin:0;background:none;appearance:none;-webkit-appearance:none;cursor:pointer}
.range input::-webkit-slider-runnable-track{block-size:var(--space-1);background:var(--color-line-strong);border-radius:var(--radius-pill)}
.range input::-moz-range-track{block-size:var(--space-1);background:var(--color-line-strong);border-radius:var(--radius-pill)}
.range input::-moz-range-progress{block-size:var(--space-1);background:var(--color-accent);border-radius:var(--radius-pill)}
.range input::-webkit-slider-thumb{-webkit-appearance:none;inline-size:var(--space-5);block-size:var(--space-5);margin-top:calc((var(--space-1) - var(--space-5)) / 2);background:var(--color-accent);border:calc(var(--border-hair) * 2) solid var(--color-paper);border-radius:var(--radius-pill)}
.range input::-moz-range-thumb{inline-size:var(--space-5);block-size:var(--space-5);background:var(--color-accent);border:calc(var(--border-hair) * 2) solid var(--color-paper);border-radius:var(--radius-pill)}
.range input:focus-visible{outline-offset:var(--space-1)}
.input{inline-size:100%;min-inline-size:0;min-block-size:var(--size-tap);padding:var(--space-2) var(--space-3);background:var(--color-paper);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-sm);color:inherit;font:inherit}
.calc__result{padding-block:var(--space-5);border-block:var(--border-hair) solid var(--color-line)}
.calc__label,.calc__formula,.calc__note{font-size:var(--text-small);color:var(--color-ink-muted)}
.calc__week{margin-top:var(--space-3);font-size:var(--text-small);color:var(--color-ink-muted)}
.calc__week strong{color:var(--color-accent);font-variant-numeric:tabular-nums}
.calc__sum{font-size:var(--text-figure);font-weight:var(--weight-bold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ---------- Before and after ---------- */
.tabs__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-5)}
.tabs__list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tab{min-block-size:var(--size-tap);padding-inline:var(--space-4);background:none;border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-pill);color:var(--color-ink);font:inherit;font-size:var(--text-small);cursor:pointer}
@media (hover:hover){.tab:hover{border-color:var(--color-ink)}}
.tab[aria-selected="true"]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-on-ink);font-weight:var(--weight-bold)}
.ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-5);align-items:stretch}
.ba + .ba{margin-top:var(--space-6)}
.ba__name{grid-column:1 / -1;font-size:var(--text-subtitle);line-height:var(--leading-snug)}
.js-tabs .ba__name{display:none}
.ba__col{padding:var(--space-6);border:var(--border-hair) solid var(--color-line);border-radius:var(--radius-lg)}
.ba__col--after{background:var(--color-surface);border-color:var(--color-ink)}
.section--surface .ba__col--after{background:var(--color-paper)}
.ba__label{margin-bottom:var(--space-3);font-weight:var(--weight-bold)}
.ba__col li{position:relative;margin-top:var(--space-2);padding-inline-start:var(--space-5);color:var(--color-ink-muted)}
.ba__col--after li{color:var(--color-ink)}
.ba__col li::before{content:"";position:absolute;top:calc(var(--leading-body) * .5em);inset-inline-start:var(--space-1);width:var(--size-dot);height:var(--size-dot);border-radius:var(--radius-pill);background:var(--color-line-strong);transform:translateY(-50%)}
.ba__col--after li::before{background:var(--color-ink)}
.tabs .cap{justify-content:flex-start;margin-top:var(--space-5)}
.ba__arrow{align-self:center;inline-size:var(--space-7);block-size:var(--space-7);fill:none;stroke:var(--color-ink);stroke-width:var(--stroke-order);stroke-linecap:round;stroke-linejoin:round}

/* ---------- The path: six steps, right to left ---------- */
.path{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-5)}
.path__step{position:relative}
.path__step:not(:last-child)::before,
.path__step:not(:last-child)::after{content:"";position:absolute;top:calc(var(--size-node) / 2 - var(--border-hair) / 2);inset-inline-start:calc(var(--size-node) / 2);inline-size:calc(100% + var(--space-5));block-size:var(--border-hair);background:var(--color-line-strong)}
.path__step:not(:last-child)::after{background:var(--color-ink);transform-origin:right}
.path__node{position:relative;z-index:1;display:block;inline-size:var(--size-node);block-size:var(--size-node);border-radius:var(--radius-pill);background:var(--color-ink);border:calc(var(--border-hair) * 2) solid var(--color-ink)}
.path__num{margin-top:var(--space-4);font-size:var(--text-label);color:var(--color-ink-muted)}
.path__title{margin-top:var(--space-1);font-size:var(--text-body);line-height:var(--leading-snug)}
.path__text{margin-top:var(--space-2);font-size:var(--text-small);color:var(--color-ink-muted)}

.js-motion .path__node{animation:node-step var(--dur-reveal) var(--ease-out) both;animation-delay:calc(var(--dur-path) / 5 * var(--i))}
.js-motion .path__step:not(:last-child)::after{animation:link-fill calc(var(--dur-path) / 5) linear both;animation-delay:calc(var(--dur-path) / 5 * var(--i))}
@keyframes node-step{
  0%{background:var(--color-surface);border-color:var(--color-line-strong)}
  40%,60%{background:var(--color-accent);border-color:var(--color-accent)}
  100%{background:var(--color-ink);border-color:var(--color-ink)}
}

/* ---------- About ---------- */
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.principles li{padding-top:var(--space-4);border-top:var(--border-hair) solid var(--color-ink)}
.principles h3{font-size:var(--text-body);line-height:var(--leading-snug)}
.principles p{margin-top:var(--space-2);font-size:var(--text-small);color:var(--color-ink-muted)}

/* ---------- Questions ---------- */
.qa{border-bottom:var(--border-hair) solid var(--color-line)}
.qa:first-child{border-top:var(--border-hair) solid var(--color-line)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-block-size:var(--size-tap);padding-block:var(--space-4);font-weight:var(--weight-bold);cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa__icon{flex:none;inline-size:var(--space-4);block-size:var(--space-4);fill:none;stroke:currentColor;stroke-width:var(--stroke-order);stroke-linecap:round}
.qa__v{transition:opacity var(--dur-base) var(--ease-out)}
.qa[open] .qa__v{opacity:0}
#faq .section__title{font-size:var(--text-title-sm)}
@media (hover:hover){.qa summary:hover{color:var(--color-accent)}}
.qa p{max-width:var(--measure-text);padding-bottom:var(--space-5);color:var(--color-ink-muted)}

/* ---------- Contact ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.field--wide,.form__actions{grid-column:1 / -1}
.form .field label{color:var(--color-on-band)}
.opt{font-weight:var(--weight-regular);color:var(--color-on-band-muted)}
.form .input{background:transparent;border-color:var(--color-line-strong);color:var(--color-on-band)}
.form .input:focus-visible{outline-color:var(--color-on-band)}
.form .input[aria-invalid="true"]{border-color:var(--color-on-band);border-width:calc(var(--border-hair) * 2)}
.form textarea.input{resize:vertical}
.form [dir="ltr"]{text-align:end}
.field__error{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-small);font-weight:var(--weight-bold);color:var(--color-on-band)}
.field__icon{flex:none;inline-size:var(--space-4);block-size:var(--space-4);fill:none;stroke:currentColor;stroke-width:var(--stroke-order);stroke-linecap:round}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5)}
.form__note{grid-column:1 / -1;max-width:var(--measure-text);font-size:var(--text-small);color:var(--color-on-band-muted);text-wrap:pretty}
.form__note a{color:var(--color-on-band);text-decoration:underline;text-underline-offset:var(--underline-offset)}
.btn[disabled]{opacity:.6;cursor:progress}
.form__result{margin-top:var(--space-5);padding:var(--space-5);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-lg);color:var(--color-on-band-muted)}
.form__result-title{margin-bottom:var(--space-2);font-size:var(--text-subtitle);font-weight:var(--weight-bold);line-height:var(--leading-snug);color:var(--color-on-band)}
.form__result[data-state="sent"]{margin-top:0;border-color:var(--color-on-band)}
.next{margin-top:var(--space-7);padding-top:var(--space-5);border-top:var(--border-hair) solid var(--color-line-strong)}
.next__title{font-size:var(--text-body);line-height:var(--leading-snug)}
.next__steps{display:grid;gap:var(--space-3);margin-top:var(--space-4);counter-reset:next}
.next__steps li{display:flex;gap:var(--space-3);color:var(--color-on-band-muted);counter-increment:next}
.next__steps li::before{content:counter(next);flex:none;display:grid;place-items:center;inline-size:var(--space-5);block-size:var(--space-5);border:var(--border-hair) solid var(--color-line-strong);border-radius:var(--radius-pill);font-size:var(--text-label);font-weight:var(--weight-bold);color:var(--color-on-band)}
.section--ink :focus-visible,.site-footer :focus-visible{outline-color:var(--color-on-band)}
/* Business facts (tools/build/facts.json). Each slot renders only once its fact is known. */
.next__facts{display:grid;gap:var(--space-2);margin-top:var(--space-5);font-size:var(--text-small)}
.next__facts div{display:grid;grid-template-columns:var(--space-9) minmax(0,1fr);gap:var(--space-3)}
.next__facts dt{color:var(--color-on-band-muted)}
.next__facts dd{font-weight:var(--weight-bold);color:var(--color-on-band)}
.form__direct{margin-top:var(--space-5);font-size:var(--text-small);color:var(--color-on-band-muted)}
.form__direct a{display:inline-flex;align-items:center;min-block-size:var(--size-tap);color:var(--color-on-band);font-weight:var(--weight-bold);text-decoration:underline;text-underline-offset:var(--underline-offset)}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--space-9) * 2),1fr));gap:var(--space-5);margin-top:var(--space-7)}
.team li{padding-top:var(--space-3);border-top:var(--border-hair) solid var(--color-ink)}
.team__name{font-weight:var(--weight-bold);line-height:var(--leading-snug)}
.team__role{font-size:var(--text-small);color:var(--color-ink-muted)}
.team__line{margin-top:var(--space-2);font-size:var(--text-small);text-wrap:pretty}

/* ---------- Footer ---------- */
.site-footer{padding-block:var(--space-7);background:var(--color-band);color:var(--color-on-band-muted);border-top:var(--border-hair) solid var(--color-line-strong);font-size:var(--text-small)}
.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6)}
.site-footer .brand{color:var(--color-on-band)}
.site-footer .brand__note{color:var(--color-on-band-muted)}
.footer__note{max-width:var(--measure-text);text-wrap:pretty}
.footer__links{display:flex;flex-wrap:wrap;gap:0 var(--space-5)}
.footer__links a{display:inline-flex;align-items:center;min-height:var(--size-tap);color:var(--color-on-band);text-decoration:underline;text-underline-offset:var(--underline-offset);text-decoration-thickness:var(--border-hair)}

/* ---------- Medium screens ---------- */
@media (max-width:64rem){
  .nav{display:none}
  .uses__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The path stacks, and its line runs down the start edge */
  .path{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .path__step{padding-inline-start:calc(var(--size-node) + var(--space-5))}
  .path__node{position:absolute;top:0;inset-inline-start:0}
  .path__num{margin-top:0}
  .path__step:not(:last-child)::before,
  .path__step:not(:last-child)::after{inset-inline-start:calc(var(--size-node) / 2 - var(--border-hair) / 2);top:calc(var(--size-node) / 2);inline-size:var(--border-hair);block-size:calc(100% + var(--space-5))}
  .path__step:not(:last-child)::after{transform-origin:top}
  .js-motion .path__step:not(:last-child)::after{animation-name:link-down}
}
@keyframes hub-in-static{
  0%,100%{border-color:var(--color-line-strong)}
  50%{border-color:var(--color-accent)}
}
@keyframes link-down{
  from{transform:scaleY(0);background:var(--color-accent)}
  70%{background:var(--color-accent)}
  to{transform:scaleY(1);background:var(--color-ink)}
}

/* ---------- One column ---------- */
@media (max-width:51.25rem){
  .hero,.split,.service{grid-template-columns:minmax(0,1fr)}
  .hero__title{font-size:var(--text-display-narrow)}
  .hero{align-items:start}
  .cta-after{display:flex}
  .cta-note--hero{display:none}
  /* The network: the inquiry on top, the two agents side by side, the booking under them */
  .net{padding:var(--space-6) var(--space-4)}
  .net__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "b c" "d d" "e e";gap:var(--space-7) var(--space-4);align-items:stretch}
  .net__grid > [data-node="b"],.net__grid > [data-node="c"]{align-self:stretch}
  .net__grid > [data-node="e"]{margin-top:calc(var(--space-7) * -1 + var(--space-4))}
  /* The hub stacks as a tree (the user's pick, 2026-11-09, design/hub-phone-compare.html A): one source a row,
     a rail on the right takes a stub from each and enters the core from the side, and a second rail leaves the
     core below to feed each result. site.js draws the wires; the boxes and the core sit over them. */
  .hub{aspect-ratio:auto;display:grid;gap:var(--space-7);margin-bottom:0}
  .hub__lines{display:none}
  .hub__wires{display:block}
  .hub__inputs,.hub__outputs{position:static;inline-size:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);padding-inline-start:var(--space-6)}
  .hub__box{position:relative;z-index:1;transform:none}
  .hub__core{position:relative;z-index:1;left:auto;top:auto;transform:none;justify-self:center;inline-size:var(--space-9)}
  .js-motion .hub__core{animation-name:hub-in-static}
  .hub .cap{position:static}
  .hero__lead{font-size:var(--text-body)}
  .calc{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "form" "out";padding:var(--space-5)}
  .ba{grid-template-columns:minmax(0,1fr)}
  .ba__arrow{justify-self:center;transform:rotate(-90deg)}
  .principles{grid-template-columns:minmax(0,1fr)}
  .uses__list{grid-template-columns:minmax(0,1fr)}
  .form{grid-template-columns:minmax(0,1fr)}
}
/* Phones: the network's cards stack. The wires that would cross a card run down the sides instead,
   so the branch to two agents and their meeting point still read. */
@media (max-width:30rem){
  .net{padding-inline:var(--space-5)}
  .net__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "b" "c" "d" "e"}
}
@media (max-width:22.5rem){
  .brand__note{display:none}
  .cta-more{display:none}
}

/* ---------- The call bar: phones keep the call within thumb reach ---------- */
/* One column only. It rises once the hero's own button has left the screen, and steps away again
   when the contact form comes up, so it never covers the form or doubles the hero. */
.callbar{display:none}
@media (max-width:51.25rem){
  html{scroll-padding-bottom:calc(var(--size-tap) + var(--space-6))}
  .callbar{position:fixed;inset-inline:0;bottom:0;z-index:5;display:block;padding:var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--color-paper);border-top:var(--border-hair) solid var(--color-line);transform:translateY(100%);visibility:hidden;transition:transform var(--dur-base) var(--ease-out),visibility var(--dur-base) step-end}
  .callbar.is-shown{transform:none;visibility:visible;transition:transform var(--dur-base) var(--ease-out),visibility var(--dur-base) step-start}
  .callbar .btn{inline-size:100%}
}

/* ---------- Reduced motion: the finished state, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage .cube,.pulse,.tag{animation:none !important}
}

/* ---------- Print: the whole page, finished, with nothing waiting to be revealed ---------- */
@media print{
  .thread{display:none}
  .js-motion [data-reveal],
  .js-motion [data-reveal]:not(.hub) > *{opacity:1 !important;transform:none !important;transition:none !important}
  .js-motion [data-play],.js-motion [data-play]::before,.js-motion [data-play]::after,
  .js-motion [data-play] *,.js-motion [data-play] *::before,.js-motion [data-play] *::after{animation:none !important}
  .topbar{position:static}
  .skip,.callbar{display:none}
}