/* Homepage sections (src/home.mjs). Shared parts live in components.css; colours in tokens.css.
   The tab rail, the explorer and the logo strip keep their own engines and get the light look here. */

/* Hero on the warm gradient: the promise on the left, and on the right a stack of work the agents prepared
   (hero-stack.js). The top card waits for your go-ahead: approve it, or put it back for later; approved work flies
   off and an agent prepares the next. The cards are rendered in their stacked places, so nothing shifts. */
.hero { position: relative; overflow: hidden; padding: 148px 0 72px; background: var(--grad-top); touch-action: pan-y pinch-zoom; }
/* On a desktop the hero has the first screen to itself (up to 960px): the large statement below starts under the fold
   instead of competing with the title. */
@media (min-width: 1101px) and (min-height: 760px) { .hero { display: grid; align-content: center; min-height: min(100svh, 960px); padding: 100px 0 64px; } }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 484px; align-items: center; gap: 48px; }
.hero-copy { display: grid; justify-items: start; gap: 24px; }
.hero h1 { max-width: 600px; font-size: 54px; }
/* One line per sentence; a sentence that has to wrap on a phone wraps evenly within itself. */
.hero h1 .h1-line { display: block; text-wrap: balance; }
/* Each word is its own box (the intro sharpens them one by one), with or without the intro, so the lines stay put. */
.hero h1 .hw { display: inline-block; }
.hero .stop { color: var(--accent); }
.hero-lead { max-width: 520px; }
.hero .actions { justify-content: flex-start; margin-top: 8px; }
.hero .btn-glass { border-color: var(--line-ink); }
/* Under the buttons, one quiet line: the case that shows it working. */
.hero-case {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; margin-top: -8px; color: var(--ink-muted);
  font-size: 14.5px; line-height: 1.4; text-align: left; transition: color var(--fast);
}
.hero-case b { flex: none; color: var(--ink); font-weight: 500; }
.hero-case b::after { content: " ·"; color: var(--ink-subtle); font-weight: 400; }
.hero-case .i { flex: none; color: var(--accent); transition: transform var(--base) var(--enter); }
.hero-case:hover { color: var(--ink); }
.hero-case:hover .i { transform: translateX(3px); }
.hero-case-short { display: none; }
/* The full sentence only where the copy has the width of the page (tablets); beside the folder and on phones the short one. */
@media (max-width: 640px), (min-width: 1101px) { .hero-case-full { display: none; } .hero-case-short { display: inline; } }

/* The desk under the hero (hero-field.js): a grid of faint dots, the full stop of the logo, fading out under the nav and
   into the page below. CSS draws the grid; once the canvas runs (data-live) it draws the same grid as particles, which
   turn liquid under the pointer and ripple out of the folder when work is approved. Decoration: it never takes a
   click. */
.hero-field {
  --field-gap: 16px; --field-size: 1.2px; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at center, var(--field-dot) 0 1px, transparent 1.6px) 0 0 / var(--field-gap) var(--field-gap);
  -webkit-mask: linear-gradient(180deg, transparent 0, var(--ink) 150px, var(--ink) 66%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0, var(--ink) 150px, var(--ink) 66%, transparent 100%);
}
.hero-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-field[data-live] { background: none; }
/* Where the copy stands above the folder, the desk only starts around the folder, so no dots sit behind the text. */
@media (max-width: 1100px) {
  .hero-field {
    -webkit-mask: linear-gradient(180deg, transparent 0, transparent 54%, var(--ink) 66%, var(--ink) 86%, transparent 100%);
    mask: linear-gradient(180deg, transparent 0, transparent 54%, var(--ink) 66%, var(--ink) 86%, transparent 100%);
  }
}

/* The stack: a glass folder holding the work, and under it the agents at work. Its parts, back to front: the painted
   back with its tab, the files (the top one stands up out of the pocket, the ones behind show their edges above it),
   and the frosted front that says what waits. The folder leans with the pointer and, on a desktop, lays itself back on
   the desk as the page scrolls on. Thrown cards pass in front of the glass. */
.hero-stack { --card-h: 296px; --bleed: 0px; --inset: 22px; --tab-h: 26px; --edges: 28px; --glass-h: 92px; --tuck: 16px; position: relative; display: grid; gap: 14px; min-width: 0; perspective: 1600px; }
.folder {
  --fx: 0; --fy: 0; position: relative; margin-inline: calc(var(--bleed) * -1); padding: calc(var(--tab-h) + 16px + var(--edges)) var(--inset) 0;
  transform: rotateX(calc(var(--fy) * -2.4deg)) rotateY(calc(var(--fx) * 3.2deg)); transition: transform .9s var(--enter);
}
/* Its shadow on the desk, which shifts away from the light as it leans. */
.folder::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -6px; height: 48px; border-radius: 50%; background: var(--folder-shadow); filter: blur(22px);
  transform: translateX(calc(var(--fx) * -10px)); transition: transform .9s var(--enter);
}
.folder-back { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; background: var(--folder-back); }
.folder-art {
  position: absolute; left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); opacity: 0; filter: blur(14px) saturate(.7);
  transform: translate(calc(var(--fx) * -8px), calc(var(--fy) * -6px)) scale(1.02);
  transition: transform 1.1s var(--enter), opacity 1.2s var(--enter), filter 1.2s var(--enter);
}
.folder-art[data-ready] { opacity: 1; filter: none; }
.folder-sheen { position: absolute; inset: 0; background: var(--folder-sheen); }
/* The tab carries the folder's name. */
.folder-tab {
  position: absolute; top: 0; right: 0; display: grid; place-items: center; width: min(170px, 38%); height: var(--tab-h);
  color: var(--ink); font-size: 12.5px; font-weight: 500; letter-spacing: -.005em;
}
.folder-tab span { padding: 1px 10px; border-radius: var(--r-pill); background: var(--glass-strong); }
.folder-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.folder-back .folder-rim path { stroke: var(--folder-rim-back); stroke-width: 2; }
.stack-cards { position: relative; height: var(--card-h); margin: 0; padding: 0; list-style: none; }
.folder-front {
  position: relative; z-index: 15; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: var(--glass-h);
  margin: calc(var(--tuck) * -1) calc(var(--inset) * -1) 0; padding: 0 22px 18px; border-radius: 22px;
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); background: var(--folder-glass);
  transform-origin: 50% 100%; transform: perspective(760px) rotateX(var(--hinge, 0deg)); transition: transform .8s cubic-bezier(.34, 1.36, .5, 1);
}
/* Glass catches the light along its top edge, and a soft highlight follows the pointer. */
.folder-front::before { content: ""; position: absolute; inset: 0; background: var(--folder-gloss); pointer-events: none; }
.folder-front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(260px 160px at calc(50% + var(--fx) * 40%) calc(10% + var(--fy) * 30%), var(--folder-spec), transparent 70%);
}
.folder-front .folder-rim path { stroke: var(--folder-rim); stroke-width: 2.4; }
/* Hover or keyboard focus: the glass leans towards you on its bottom edge. Not after a tap on a touch screen. */
@media (hover: hover) { .folder:hover .folder-front { --hinge: -9deg; } }
.folder:has(:focus-visible) .folder-front { --hinge: -9deg; }
.folder-label { position: relative; display: grid; gap: 2px; min-width: 0; }
.folder-title { font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.folder-meta { color: var(--ink-muted); font-size: 14px; }
.folder-meta b { display: inline-block; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.stack-label { position: relative; color: var(--ink-muted); font-size: 13px; white-space: nowrap; }
.stack-label-short { display: none; }
@media (max-width: 419px) { .stack-label-full { display: none; } .stack-label-short { display: inline; } }
.stack-foot { display: flex; align-items: center; gap: 12px; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .folder, .folder::before, .folder-art, .folder-front { transition: none; transform: none; } .folder-art { filter: none; } }
/* On a desktop, scrolling on lays the folder (and the line under it) back on the desk. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1101px) {
    .hero-stack { animation: folder-away linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  }
}
@keyframes folder-away { to { transform: perspective(1600px) translateY(64px) rotateX(24deg) scale(.92); } }

.task {
  --tilt: 0; position: absolute; inset: 0 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: var(--card-h);
  padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--canvas); box-shadow: var(--shadow-stack);
  transform-origin: 50% 100%; transform: translateY(calc(var(--k) * -15px)) scale(calc(1 - var(--k) * .025)); z-index: calc(10 - var(--k));
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.task.is-back { opacity: 0; }
.task.is-under .task-head, .task.is-under .task-body, .task.is-under .task-foot { opacity: 0; }
.task-head { transition: opacity .3s var(--enter); }
.task.is-dragging { cursor: grabbing; }
/* A soft light that follows the pointer over the top card, under its content, so the buttons keep their colour. */
.task-head, .task-body, .task-foot { position: relative; z-index: 1; }
.task::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--base);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), var(--task-glare), transparent 65%);
}
.task.is-lit::after { opacity: 1; }
.task-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.task-agent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.task-agent b { display: block; font-size: 14.5px; font-weight: 500; }
.task-agent small { display: block; color: var(--ink-subtle); font-size: 12.5px; }
.task-icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hue-soft); color: var(--hue); }
/* The source's logo, cut out: no plate behind it. */
.task-src { display: grid; flex: none; place-items: center; width: 28px; height: 28px; }
.task-src img { width: 22px; height: 22px; object-fit: contain; }
.task-body { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; min-height: 0; overflow: hidden; transition: opacity .35s var(--enter); }
.task-title { font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.task-text { color: var(--ink-muted); font-size: 14.5px; line-height: 1.45; }
.task-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.task-facts li { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--panel-solid); font-size: 12.5px; font-weight: 500; }
.task-facts img { width: 14px; height: 14px; object-fit: contain; }
.task-facts .i { color: var(--green); }
.task-table { display: grid; margin-top: 4px; font-size: 14px; }
.task-table div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.task-table div:last-child { border: 0; font-weight: 500; }
.task-table dt { color: var(--ink-muted); }
.task-table dd { margin: 0; font-variant-numeric: tabular-nums; }
.ad-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
/* The checked facts, the numbers and the ads sit right above the buttons; spare room goes under the message. */
.task-body > .task-facts, .task-body > .task-table, .task-body > .ad-thumbs { margin-top: auto; padding-top: 8px; }
.ad-thumb { position: relative; height: 88px; overflow: hidden; border-radius: 12px; background: var(--wash); }
.ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ad-thumb b { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--glass-ink); color: var(--on-ink); font-size: 12px; font-weight: 500; }
.task-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; transition: opacity .35s var(--enter); }
.task-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-ink);
  border-radius: var(--r-pill); background: var(--canvas); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
  transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.task-btn:hover { background: var(--panel-solid); }
.task-btn--go { min-width: 136px; border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.task-btn--go:hover { border-color: var(--ink-800); background: var(--ink-800); }
.task-btn:active, .task-btn.is-pressing { transform: scale(.95); }
.task-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.go-label { white-space: nowrap; }
.go-done { display: none; align-items: center; gap: 6px; }
.task.is-approved .go-label { display: none; }
.task.is-approved .go-done { display: inline-flex; }
.task.is-approved .task-btn--go { border-color: var(--green); background: var(--green); color: var(--on-ink); }
/* Being prepared: the content gives way to placeholder lines until the agent is done. */
.task-skel { position: absolute; left: 18px; right: 18px; top: 82px; display: grid; gap: 10px; opacity: 0; transition: opacity .35s var(--enter); }
.task-skel i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--wash) 20%, var(--panel-solid) 50%, var(--wash) 80%); background-size: 220% 100%; animation: skel 1.3s linear infinite; }
.task-skel i:first-child { width: 40%; }
.task-skel i:nth-child(2) { height: 20px; width: 78%; }
.task-skel i:last-child { width: 64%; }
.task.is-preparing .task-body, .task.is-preparing .task-foot { opacity: 0; }
.task.is-preparing .task-foot { visibility: hidden; }
.task.is-preparing .task-skel { opacity: 1; }
@keyframes skel { to { background-position: -220% 0; } }
/* The line under the stack stays quiet: a small grey pause control (its hit area stays 44px) and grey typing dots. */
.hero-stack .sim-pause { position: relative; width: 28px; height: 28px; border-color: transparent; background: transparent; color: var(--ink-subtle); }
.hero-stack .sim-pause::before { content: ""; position: absolute; inset: -8px; }
.hero-stack .sim-pause:hover { border-color: transparent; color: var(--ink); }
.stack-feed { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink-muted); font-size: 14px; }
.stack-feed [data-stack-feed] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typing { display: inline-flex; flex: none; gap: 3px; padding: 7px 0; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-subtle); animation: typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
/* Paused: everything in the stack stands still. */
.hero-stack.is-paused .typing i, .hero-stack.is-paused .task-skel i, .hero-stack.is-paused .dot--live::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .typing i, .task-skel i { animation: none; } .task { cursor: default; } }

/* The intro (after butter.video; introScreen in src/home.mjs, intro.js). On the hero gradient, a greeting and one line
   ink in word by word, hold and fade. The page then comes in: the bar and the nav drop in, the title sharpens word by
   word, the copy rises, the top card lands on the stack and the cards under it slide out from beneath it. Only with
   html.intro, which the head script sets on a fresh visit; with reduced motion there is no intro. Only transforms,
   opacity and blur, so nothing shifts. A click or key press ends it at once (intro.js). */
.intro-screen { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .intro .intro-screen {
    position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: var(--grad-top);
    animation: intro-screen-out .45s var(--enter) 1.5s both;
  }
  .intro-line { margin: 0; color: var(--ink); font-size: 22px; font-weight: 500; letter-spacing: -.01em; text-align: center; text-wrap: balance; animation: intro-line-out .35s ease-in 1.35s both; }
  .intro-line .stop { color: var(--accent); }
  .iw { display: inline-block; animation: intro-word .5s var(--enter) calc(.1s + var(--w) * .08s) both; }
  .intro .announce { animation: intro-drop .7s var(--enter) 1.6s both; }
  .intro .nav-shell { animation: intro-drop .7s var(--enter) 1.65s both; }
  .intro.brand-in .site-header .brand-logo { animation-delay: 1.95s; }
  .intro .hero .eyebrow { animation: intro-rise .7s var(--enter) 1.7s both; }
  .intro .hero h1 .hw { animation: intro-blur .8s var(--enter) calc(1.75s + var(--w) * .06s) both; }
  .intro .hero-lead { animation: intro-rise .7s var(--enter) 2.05s both; }
  .intro .hero .actions { animation: intro-rise .7s var(--enter) 2.15s both; }
  .intro .hero-case { animation: intro-rise .7s var(--enter) 2.25s both; }
  /* The folder assembles itself on the desk: the back rises, the top card drops into it with a little overshoot and
     the files behind it follow, then the frosted front slides up into place. The desk comes up with it. */
  .intro .hero-field { animation: intro-fade 1s var(--enter) 1.9s both; }
  .intro .folder-back { animation: intro-rise .7s var(--enter) 1.8s both; }
  .intro .folder::before { animation: intro-fade .7s var(--enter) 1.85s both; }
  .intro .task:not([inert]) { animation: intro-deal .75s cubic-bezier(.3, 1.35, .5, 1) 1.95s both; }
  .intro .task[inert] { animation: intro-peek .55s var(--enter) calc(2.2s + var(--k) * .07s) both; }
  .intro .folder-front { animation: intro-glass .8s cubic-bezier(.34, 1.3, .5, 1) 2.2s both; }
  .intro .stack-foot { animation: intro-rise .6s var(--enter) 2.45s both; }
  /* On a tall screen the section under the hero is in view too: it fades in after the hero, not before it. Opacity
     only, so its scroll motion keeps working. */
  .intro main > :not(.hero) { animation: intro-fade .6s var(--enter) 2.4s both; }
  /* The cookie card waits until the page is in, so it never covers the greeting; it then rises in (intro.js). */
  .intro .cookie-notice { visibility: hidden; }
  .intro-done .cookie-notice { animation: notice-rise .5s var(--enter) both; }
}
/* On a phone the greeting takes the first line and the sentence the second. */
@media (max-width: 640px) { .intro-line .iw[data-greet] { display: block; } }
@keyframes intro-word { from { opacity: 0; filter: blur(6px); transform: translateY(.25em); } }
@keyframes intro-line-out { to { opacity: 0; filter: blur(6px); transform: translateY(-10px); } }
@keyframes intro-screen-out { to { opacity: 0; visibility: hidden; } }
@keyframes intro-drop { from { opacity: 0; transform: translateY(-18px); } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes notice-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes intro-blur { from { opacity: 0; filter: blur(10px); transform: translateY(.18em); } }
@keyframes intro-deal { from { opacity: 0; translate: 0 -90px; rotate: -5deg; } }
@keyframes intro-peek { from { opacity: 0; translate: 0 -70px; } }
@keyframes intro-glass { from { opacity: 0; translate: 0 40px; } }

@media (max-width: 1100px) {
  .hero { padding-top: 132px; text-align: center; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 48px; }
  .hero-copy { justify-items: center; }
  .hero h1 { max-width: 760px; font-size: 48px; }
  .hero .actions { justify-content: center; }
  .hero-stack { width: min(484px, 100%); text-align: left; }
}


/* What it takes over and how a task flows: the simulations live in sims.css. */
.take-over .block-head, .how .block-head { margin-bottom: 40px; }

/* Why it works: four tiles, each with its hue and a small proof of what it means. Titles and bodies
   share rows across the tiles, so they line up whatever wraps. */
.reasons .tile-visual { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.tv-chip, .tv-step, .tv-log {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--canvas);
  color: var(--ink-muted); font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.tv-chip .i, .tv-step .i { color: var(--hue); }
.tv-chip--hue { background: var(--hue-soft); color: var(--hue); }
.tv-log { width: 100%; border-radius: 8px; color: var(--ink); }
.tv-log time { color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.tv-step.is-done { background: var(--hue-soft); color: var(--hue); }
@media (min-width: 961px) {
  .reasons .tile-grid--4 { grid-template-rows: repeat(4, auto); row-gap: 0; }
  .reasons .tile { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 8px; }
}
@media (max-width: 640px) {
  .reasons .tile-visual { grid-column: 2; }
}

/* The statement after the logos: one big sentence with the real logos of the software standing in it. */
.statement { padding: 56px 0 var(--section-y); }
.statement-text {
  max-width: 1040px; margin: 0 auto; color: var(--ink); text-align: center; text-wrap: balance;
  font-size: clamp(28px, 3.9vw, 52px); font-weight: 500; line-height: 1.2; letter-spacing: -.035em;
}
.statement .stop { color: var(--accent); }
/* A logo block and the words it belongs to never part over a line break. */
.st-group { white-space: nowrap; }
/* Each logo stands in its own slot in the sentence. When the block has fallen to the section below, the slot keeps
   a faint imprint of the logo. Negative block margins keep the slots from pushing their lines apart. */
.st-slot {
  position: relative; display: inline-block; width: 1.12em; height: 1.12em; margin: -.2em .06em -.2em 0; vertical-align: -.2em;
  border-radius: 25%; box-shadow: var(--shadow-slot);
}
.st-ghost { position: absolute; inset: 21%; width: 58%; height: 58%; object-fit: contain; opacity: .22; }
/* The block itself, in the sentence and in the tray below: a white tile with the real logo, cut out, no plate. */
.st-tile, .bay-tile {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 25%;
  background: linear-gradient(180deg, var(--canvas) 40%, var(--panel-solid)); box-shadow: var(--shadow-logo-tile);
}
.st-tile { transform: rotate(var(--r)); }
.st-tile img, .bay-tile img { width: 58%; height: 58%; object-fit: contain; }

/* The tray under the statement: a slot for each place the sentence names, the rest of the software as chips. */
.software .block-head { margin-bottom: 40px; }
.tray { padding: 10px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel-solid); }
.tray-bays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.tray-bays > li { display: grid; }
/* A bay never moves on hover: a block may be lying in its slot. */
.bay {
  display: grid; justify-items: center; align-content: start; gap: 18px; padding: 28px 16px 24px; border: 1px solid var(--line);
  border-radius: 20px; background: var(--canvas); text-align: center; transition: border-color var(--fast), box-shadow var(--fast);
}
.bay:hover { border-color: var(--line-ink); box-shadow: var(--shadow-card-hover); }
.bay:focus-visible { outline: none; box-shadow: var(--focus); }
.bay-slot { position: relative; width: 88px; height: 88px; border-radius: 25%; background: var(--wash); box-shadow: var(--shadow-slot); }
.bay-copy { display: grid; gap: 4px; }
.bay-copy b { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.bay-copy span { color: var(--ink-muted); font-size: 14px; line-height: 1.4; }
.tray-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 12px 8px; }
.tray-more-label { color: var(--ink-muted); font-size: 14px; font-weight: 500; }
.tray-more .chips { flex: 1 1 520px; }
@media (max-width: 960px) {
  .tray-bays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tray { padding: 8px; border-radius: 24px; }
  .tray-bays { gap: 8px; }
  .bay { gap: 14px; padding: 20px 10px 18px; }
  .bay-slot { width: 72px; height: 72px; }
  .bay-copy b { font-size: 16px; }
  .bay-copy span { font-size: 13px; }
  .tray-more { padding: 14px 6px 6px; }
}

/* The office. */
.home-office { padding-block: var(--section-y); }

/* The platform behind the office: an ink library of glossy blocks under it (after butter.video). */
.library { margin-top: 40px; padding: 10px; border-radius: 28px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-frame); }
.library-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 4px 8px 10px 12px; color: var(--muted-on-ink); font-size: 14px; font-weight: 500; }
.library-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; color: var(--on-ink); font-size: 14px; font-weight: 500; }
.library-link .i { color: var(--orange-on-ink); transition: transform var(--base) var(--enter); }
.library-link:hover .i { transform: translateX(3px); }
.library-link:focus-visible { outline: none; border-radius: var(--r-small); box-shadow: var(--focus); }
.library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.library-grid > li { display: grid; }
.block-tile {
  position: relative; display: grid; align-content: start; gap: 6px; min-height: 0; height: 100%; padding: 16px 16px 58px;
  border: 1px solid var(--line-on-ink); border-radius: 20px; background: var(--panel-on-ink); color: var(--on-ink);
  transition: background var(--base) var(--enter), border-color var(--base) var(--enter), transform var(--base) var(--enter);
}
.block-tile b { margin-top: 12px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.block-short { color: var(--muted-on-ink); font-size: 13.5px; line-height: 1.4; }
/* The glossy block: the area's light hue, a highlight from above, a shade below and a deep drop shadow. */
.block-icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: var(--ink);
  background: radial-gradient(120% 90% at 30% 10%, var(--gloss-hi), transparent 55%), linear-gradient(180deg, transparent 40%, var(--gloss-lo)), var(--hue-on-ink);
  box-shadow: var(--shadow-block); transform: rotate(-4deg); transition: transform .45s var(--enter);
}
.library-grid > li:nth-child(even) .block-icon { transform: rotate(4deg); }
.block-icon .i { width: 26px; height: 26px; stroke-width: 1.8; }
.block-go {
  position: absolute; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px;
  border-radius: var(--r-pill); background: var(--tint-on-ink); color: var(--on-ink); font-size: 13px; font-weight: 500;
  transition: background var(--base) var(--enter), color var(--base) var(--enter);
}
.block-tile:hover, .block-tile:focus-visible { border-color: var(--line-on-ink); background: var(--tile-on-ink-hover); transform: translateY(-3px); }
.block-tile:hover .block-icon, .block-tile:focus-visible .block-icon { transform: rotate(0) translateY(-4px) scale(1.06); }
.block-tile:hover .block-go, .block-tile:focus-visible .block-go { background: var(--on-ink); color: var(--ink); }
.block-tile:focus-visible { outline: none; box-shadow: var(--focus); }
@media (max-width: 960px) { .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .library { margin-top: 32px; border-radius: 24px; }
  .block-tile { padding: 14px 14px 54px; }
  .block-icon { width: 48px; height: 48px; border-radius: 14px; }
  .block-short { font-size: 13px; }
}
@media (max-width: 380px) { .library-grid { grid-template-columns: minmax(0, 1fr); } }

/* Scroll-driven motion, after butter.video: the statement inks in word by word, section titles sharpen word by
   word, and the simulations rise into place. Pure CSS on the scroll timeline (no scroll listeners); without
   support or with reduced motion everything simply stands in its final state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement-text { view-timeline-name: --statement; }
    .statement .w {
      animation: st-ink linear both; animation-timeline: --statement;
      animation-range: cover calc(14% + var(--i) / var(--n) * 30%) cover calc(19% + var(--i) / var(--n) * 30%);
    }
    .bw { display: inline-block; animation: bw-in linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 5%) cover calc(6% + var(--i) * 1.2%); }
    .take-over .sim-stage, .home-office .office-preview, .library { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
  }
}
/* The fall, after butter.video: each block lifts out of the sentence, sails over and drops into its slot in the
   tray below, on the page's own scroll. drop.js measures the path (--dx, --dy), the size of the slot (--tw), the
   block's size in the sentence relative to it (--s0) and the stretch of scroll it takes (--from, --to), then sets
   .drop-on. The block is drawn at the slot's size and scaled down in the sentence, so it lands sharp. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .drop-on .st-tile {
      inset: auto; top: 50%; left: 50%; z-index: 6; width: var(--tw); height: var(--tw); margin: calc(var(--tw) / -2) 0 0 calc(var(--tw) / -2);
      transform: none; pointer-events: none; will-change: transform;
      animation: st-fall linear both; animation-timeline: scroll(root); animation-range: var(--from) var(--to);
    }
    .drop-on .bay-tile { visibility: hidden; }
  }
}
/* Sideways it eases in and out; downwards it falls, slow at first and fast at the end (y grows with the square of
   the flight, sampled in five steps). It touches down at 88%, squashes and settles. */
@keyframes st-fall {
  0% { translate: 0 0; rotate: var(--r); scale: var(--s0); }
  10% { translate: 0 -10px; rotate: calc(var(--r) * -.6); scale: calc(var(--s0) * 1.14); }
  25.6% { translate: calc(var(--dx) * .104) calc((var(--dy) + 10px) * .04 - 10px); }
  41.2% { translate: calc(var(--dx) * .352) calc((var(--dy) + 10px) * .16 - 10px); }
  50% { rotate: var(--fr); scale: calc((var(--s0) * 1.14 + 1) / 2); }
  56.8% { translate: calc(var(--dx) * .648) calc((var(--dy) + 10px) * .36 - 10px); }
  72.4% { translate: calc(var(--dx) * .896) calc((var(--dy) + 10px) * .64 - 10px); }
  88% { translate: var(--dx) var(--dy); rotate: 0deg; scale: 1; }
  93% { translate: var(--dx) calc(var(--dy) + 4px); scale: 1.06 .92; }
  100% { translate: var(--dx) var(--dy); rotate: 0deg; scale: 1; }
}
@keyframes st-ink { from { color: var(--ink-ghost); } to { color: var(--ink); } }
@keyframes bw-in { from { opacity: .3; filter: blur(4px); transform: translateY(.1em); } to { opacity: 1; filter: none; transform: none; } }
@keyframes rise { from { opacity: .4; transform: translateY(72px) scale(.95); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  .hero { padding-bottom: 48px; }
  .hero { padding-top: 116px; }
  .hero h1 { font-size: clamp(31px, 10vw, 38px); }
  .hero .eyebrow { text-wrap: balance; }
  .hero-copy { gap: 18px; }
  .hero-inner { gap: 32px; }
  .hero { padding-top: 104px; }
  .hero .actions { width: 100%; }
  .hero .actions .btn { flex: 1 1 100%; max-width: 360px; }
}
.hero .label-short { display: none; }
/* From 360px the two buttons stand side by side, a size smaller than on a desktop; below 420px the second one says
   just "Het platform", so both fit. */
@media (max-width: 767px) and (min-width: 360px) {
  .hero .actions { flex-wrap: nowrap; gap: 8px; }
  .hero .actions .btn { flex: 0 1 auto; min-width: 0; min-height: 48px; padding: 0 16px; font-size: 16px; white-space: nowrap; }
}
@media (max-width: 419px) and (min-width: 360px) {
  .hero .actions .btn { padding: 0 14px; font-size: 15px; }
  .hero .label-full { display: none; }
  .hero .label-short { display: inline; }
}
/* Narrow phones: the cards grow by the lines that wrap, and the narrowest tighten the buttons, so every label stays
   on one line. scripts/check-hero-browser.cjs measures every card at every width. */
@media (max-width: 767px) { .hero-stack { width: min(440px, 100%); --bleed: 12px; --inset: 12px; --tab-h: 22px; --edges: 24px; --glass-h: 84px; } .folder-front { padding: 0 18px 16px; } .folder-title { font-size: 16px; } }
/* Phones: the folder keeps the page's margins and holds the cards with a little room; the cards, the glass and the
   tab are a size smaller, in proportion to the screen. */
@media (max-width: 479px) {
  .hero-stack { --card-h: 290px; --bleed: 0px; --inset: 10px; --tab-h: 18px; --edges: 22px; --glass-h: 70px; --tuck: 12px; }
  .folder-back { border-radius: 20px; }
  .folder-front { padding: 0 16px 13px; border-radius: 20px; }
  .folder-title { font-size: 15px; }
  .folder-meta { font-size: 13px; }
  .stack-label { font-size: 12.5px; }
  .task { padding: 14px 15px 15px; border-radius: 18px; }
  .task-head { padding-bottom: 10px; }
  .task-icon { width: 30px; height: 30px; border-radius: 9px; }
  .task-agent b { font-size: 14px; }
  .task-agent small { font-size: 12px; }
  .task-src { width: 24px; height: 24px; }
  .task-src img { width: 20px; height: 20px; }
  .task-body { padding-top: 11px; gap: 5px; }
  .task-title { font-size: 18px; }
  .task-text { font-size: 14px; }
  .task-facts li { padding: 3px 9px; font-size: 12px; }
  .task-table { font-size: 13.5px; }
  .ad-thumb { height: 74px; }
  .task-foot { padding-top: 10px; }
  .task-btn { min-height: 44px; padding: 0 15px; font-size: 14px; }
  .task-btn--go { min-width: 0; }
}
@media (max-width: 340px) {
  .hero-stack { --card-h: 312px; }
  .task { padding-inline: 16px; }
  .task-foot .task-btn { flex: 1 1 auto; padding: 0 12px; font-size: 14px; }
  .task-btn--go { min-width: 0; }
}
@media (max-width: 359px) { .hero-case b { display: none; } }