/* Homepage-only styles. Shared tokens, buttons, reveals, FAQ items, the
   skip link, and the CTA band live in /assets/styles.css — both surfaces
   load that file. This sheet is the landing page's own composition:
   hero, Ken Burns shots, coworker intro, how-it-works tickets, shots
   carousel, trust band, org chart, and the Florian Haller quote. */

.serif-accent { font-family: var(--serif); font-style: normal; font-weight: inherit; letter-spacing: inherit; }
.eyebrow { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--primary); }

/* ===== hero: left-aligned serif statement over a drifting product shot ===== */
/* The homepage header is a fixed transparent overlay, so it takes no
   layout space above the hero — the hero is a full screen on its own. */
.hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--ink); }

/* Default treatment: the four product screenshots in a Ken Burns drift
   under a dark scrim, cross-fading between shots on a 4.5s cadence (JS
   below drives the .is-active class; fade is a 1.1s opacity transition).
   The shots are LIGHT UI, so unlike the video they are dimmed hard
   (low opacity over the ink ground) and the scrim covers the whole frame —
   the goal is "clean dark hero with a hint of product behind it", not
   "look at the screenshot". Only transform and opacity are animated
   (GPU-composited); the pan travels one way only and is restarted as each
   shot fades in, so a reset never happens while a shot is on screen. */
.hero .hero-shot { position: absolute; inset: 0; overflow: hidden; }
.hero .hero-shot img {
  --shot-s: 1.3;
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Colour, not monochrome. A colour screenshot is lighter and busier than
     its grey version, so the scrim buys less headroom under the white
     headline: saturation is pulled back so the UI reads as a tint rather
     than a picture, and brightness is cut to hold the contrast. */
  opacity: 0; filter: brightness(calc(var(--shot-b, 0.92) * 0.86)) contrast(1.02) saturate(0.88);
  transform: scale(var(--shot-s)) translate3d(var(--shot-x, 0%), var(--shot-y, 0%), 0);
  /* One-way pan that never resets on screen. A shot is visible for 5.6s —
     its 4.5s hold plus the 1.1s fade-out — so a 4.5s animation snapped back
     to the start while the outgoing layer was still fading, which is the jump
     you could see. At 9s the reset lands 3.4s after the shot is fully gone.
     Travel is scaled with the duration (+-9% x, +-7% y) so apparent speed is
     unchanged at ~2.2% of frame width per second, and each shot's base scale
     is raised to keep an edge margin: the constraint is |offset + amplitude|
     <= (S-1)/(2S), tightest on roster at 1.75%. index.html restarts the
     animation as each shot fades in, so this holds even when a beat is
     skipped. */
  animation: hero-drift 9s linear infinite;
  transition: opacity 1.1s linear;
  will-change: transform, opacity;
}
.hero .hero-shot img.is-active { opacity: var(--shot-o, 0.58); }
/* Per-shot composition. Three of the four screenshots carry readable UI
   copy that must not sit under the left-aligned headline (hero x 5–55%,
   y 30–67%), so each gets its own base scale/offset (the drift keyframes
   add to these via the vars):
   - board: the proven default framing.
   - roster: nudged right so the SERVICEPLAN logo + "Your AI coworkers"
     heading stay in the heavily-scrimmed top strip, leaving the blurred
     coworker list behind the headline.
   - brief: zoomed and lifted so the black search bar — the darkest, most
     text-friendly region — backs the headline, pushing the giant "What
     do you want to get done?" up into the top scrim; dimmed a touch
     harder so the residual letters read as texture.
   - chat2: wall-to-wall readable chat, so it leans on treatment instead
     of crop: zoomed (fewer, larger, softer lines in frame) and dimmed
     hardest of the four. */
.hero .hero-shot img[data-shot="shot-roster"] { --shot-s: 1.6; --shot-x: 8%; --shot-o: 0.53; }
.hero .hero-shot img[data-shot="shot-brief"] { --shot-s: 1.62; --shot-x: -4%; --shot-y: -8%; --shot-o: 0.5; }
.hero .hero-shot img[data-shot="shot-chat2"] { --shot-s: 1.46; --shot-y: 6%; --shot-o: 0.44; --shot-b: 0.85; }
/* Edge headroom: object-fit fills the box before the transform, and
   translate % is applied before scale, so the constraint is
   |T| <= (S - 1) / (2 * S) per axis. T is base offset plus the drift
   at that keyframe. Scale is raised with the travel so no sliver can
   appear. Tightest: roster x, 17.0% against a 18.75% limit. */
.hero.tone-color .hero-shot img {
  filter: brightness(calc(var(--shot-b, 0.92) * 0.88)) contrast(1.02) saturate(0.9);
}

@keyframes hero-drift {
  from { transform: scale(var(--shot-s, 1.3)) translate3d(calc(var(--shot-x, 0%) + 9%), calc(var(--shot-y, 0%) + 7%), 0); }
  to { transform: scale(calc(var(--shot-s, 1.3) + 0.06)) translate3d(calc(var(--shot-x, 0%) - 9%), calc(var(--shot-y, 0%) - 7%), 0); }
}
.hero.drift-paused .hero-shot img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* one well-composed static frame: no drift, no cross-fade (JS also
     skips the cycle), each shot resting at its own base composition */
  .hero .hero-shot img { animation: none; transition: none; }
}

/* The video path, kept intact for the lab (?bg=video and friends below). */
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.82; filter: grayscale(1) contrast(1.05) brightness(0.95); display: none; }
.hero.bg-video video, .hero.bg-ink video, .hero.bg-color video, .hero.bg-duo video, .hero.bg-blur video { display: block; }
.hero.bg-video .hero-shot, .hero.bg-ink .hero-shot, .hero.bg-color .hero-shot, .hero.bg-duo .hero-shot, .hero.bg-blur .hero-shot { display: none; }

/* The scrim over the screenshot. The vignette recipe below (kept for the
   video modes) leaves the centre transparent — fine over dark footage,
   dirty over light UI. Here the whole frame carries weight: heaviest
   where the left-aligned copy sits and where the transparent header
   needs contrast, easing toward the right so the shot still reads. */
.hero .scrim {
  position: absolute; inset: 0;
  background:
    /* Top to bottom: light at the top so the product is actually visible,
       deepening to near-solid ink at the base where the trust band takes
       over. The one exception is the first ~120px — the header sits there in
       white chrome, so a short strip keeps enough weight for the nav to read
       against a moving colour screenshot. */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0.26) 110px, rgba(0, 0, 0, 0.34) 22%, rgba(0, 0, 0, 0.62) 48%, rgba(0, 0, 0, 0.82) 74%, rgba(0, 0, 0, 0.94) 100%),
    /* the headline is left-aligned and runs wide, so it carries its own
       weight independent of the vertical fade */
    linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.28) 52%, rgba(0, 0, 0, 0.06) 80%, rgba(0, 0, 0, 0));
}
/* Video-mode scrim — shading at the edges, not over the whole frame. Two
   flat gradients used to cover the entire hero, so even the lightest
   point sat at ~70% black and the footage barely read. A vignette does
   the work instead: the middle stays open, the edges carry the tint. */
.hero.bg-video .scrim, .hero.bg-color .scrim {
  background:
    /* the vignette — transparent centre, tint rolling in at the edges */
    radial-gradient(125% 105% at 50% 45%, transparent 34%, rgba(0, 0, 0, 0.34) 68%, rgba(0, 0, 0, 0.74) 100%),
    /* just enough weight behind the left-aligned headline to keep it legible */
    linear-gradient(to right, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0) 80%),
    /* and a fade into the trust band below */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.62) 100%);
}

/* hero background lab: the default cycles all four screenshots; pin one
   via ?bg=shot-board|shot-roster|shot-brief|shot-chat2, the video via
   ?bg=video, and the old video treatments via ?bg=ink|color|duo|blur
   (+ ?vid=test) */
.hero.bg-ink video { opacity: 0.45; }
.hero.bg-ink .scrim { background: rgba(10, 9, 8, 0.6); }
.hero.bg-color video { filter: none; }
.hero.bg-duo video { filter: grayscale(1) contrast(1.1) brightness(0.92); opacity: 0.9; }
.hero.bg-duo .scrim {
  background:
    linear-gradient(to right, rgba(22, 4, 46, 0.85), rgba(22, 4, 46, 0.4) 65%, rgba(34, 5, 68, 0.55)),
    linear-gradient(to bottom, rgba(100, 0, 255, 0.22), rgba(100, 0, 255, 0.14) 40%, rgba(16, 2, 34, 0.85) 100%);
}
.hero.bg-blur video { filter: blur(16px) saturate(1.05); transform: scale(1.12); opacity: 0.65; }
.hero.bg-blur .scrim { background: rgba(10, 9, 8, 0.5); }
.hero-inner {
  position: relative; flex: 1; color: #fff; width: 100%;
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left; padding: 130px clamp(24px, 4vw, 56px) 48px;
}
.hero-social { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.66); }
.hero-social .avatars { display: flex; }
.hero-social .avatars img {
  width: 30px; height: 30px; border-radius: 999px; object-fit: cover;
  background: var(--muted); margin-left: -9px; display: block;
}
.hero-social .avatars img:first-child { margin-left: 0; }
.hero-social .count { font-size: 13px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.75); }
.hero-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.9rem, 6.4vw, 5.6rem); line-height: 1.05; letter-spacing: -0.03em;
  max-width: 20ch; text-wrap: balance; margin: 0 0 26px;
  /* carries the contrast where the video is brightest, so the scrim does
     not have to darken the whole frame to keep the line readable */
  /* one wide, soft pass only — a tight second shadow reads as an outline */
  text-shadow: 0 4px 44px rgba(0, 0, 0, 0.62);
}
.hero-title .serif-accent { font-size: 1em; letter-spacing: inherit; }
.hero-sub {
  font-size: clamp(15.5px, 1.5vw, 17px); line-height: 1.6; color: rgba(255, 255, 255, 0.88);
  /* 52ch capped the line at 558px while the sentence needs 599, so it broke to
     two lines inside a 1240px hero and left "chat log." stranded on its own.
     Measured at the 17px top of the clamp: English needs 56ch, German 62ch
     (82 characters against English's 76). 64ch clears both with headroom, and
     the German line is the one that sets the floor — sizing to English alone
     would have left /de wrapping forever.
     `balance` rather than `pretty` for the narrow widths where it does wrap:
     pretty optimises only the last line and left a stub, which is what made
     the break read as a mistake instead of a choice. */
  max-width: 64ch; text-wrap: balance; margin: 0 0 36px;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.66);
}

/* hero actions: the same two the nav carries, in the nav's order so the
   eye does not have to re-learn which one is primary */
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.hero-cta-signup { background: #fff; color: var(--ink); }
.hero-cta-signup:hover { background: rgba(255, 255, 255, 0.88); }
.hero-cta-sales { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.42); }
.hero-cta-sales:hover { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.08); }
.hero-note {
  font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.68);
  max-width: 44ch; margin: 0 0 26px;
}
/* hero fine-print: must stay white on ink. The shared .no-card in
   styles.css is muted-foreground for paper coworker pages. */
.hero .no-card { color: rgba(255, 255, 255, 0.5); }

/* trusted-by wall at the hero's base, on the page grid: label left, logos right */
.hero-logos { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hl-inner {
  max-width: 1240px; margin: 0 auto; padding: 24px clamp(24px, 4vw, 56px) 26px;
  display: flex; align-items: center; gap: clamp(28px, 4vw, 56px);
}
.hero-logos .hl-label { flex-shrink: 0; font-family: var(--sans); font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: rgba(255, 255, 255, 0.55); }
.hl-marquee {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
@media (max-width: 680px) {
  .hl-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hl-marquee { width: 100%; }
}
.hl-track { display: flex; align-items: center; gap: clamp(44px, 6vw, 80px); width: max-content; animation: marquee 40s linear infinite; padding-right: clamp(44px, 6vw, 80px); }
.hl-marquee:hover .hl-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hl-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } }
.hl-track img { height: 20px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.5; transition: opacity 0.3s var(--ease); flex-shrink: 0; }
.hl-track img.logo-tall { height: 27px; }
.hl-track img:hover { opacity: 0.9; }

.vid-toggle {
  position: absolute; right: 20px; top: -52px; z-index: 2;
  width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  transition: background-color 0.3s var(--ease);
}
.vid-toggle:hover { background: rgba(0, 0, 0, 0.55); }

/* ===== sections ===== */
section.block { padding: clamp(96px, 11vw, 160px) 0 0; }

/* Background system: sections alternate ink and paper down the page.
   Dark sections share this band skin; grey stays a component surface. */
section.band-dark {
  background: var(--ink); color: #fff;
  margin-top: clamp(96px, 11vw, 160px);
  padding: clamp(90px, 10vw, 140px) 0;
}
.band-dark .section-head p { color: rgba(255, 255, 255, 0.6); }
.band-dark .muted { color: rgba(255, 255, 255, 0.6); }
.band-dark .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.band-dark .btn-outline:hover { border-color: rgba(255, 255, 255, 0.65); }
.section-head { max-width: 760px; margin: 0 0 clamp(44px, 6vw, 68px); text-align: left; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.section-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 3.5vw, 48px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance;
}
.section-head p { font-size: 16.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 54ch; }

/* ===== coworker introduction ===== */
/* the discipline swaps out under a fixed-width slot so the line never jumps */
/* Every word is stacked in one grid cell, so the slot is naturally as wide
   as the longest of them and never changes width. That is what keeps the
   headline's wrap independent of which word is showing: it flows inline
   and breaks only when the viewport actually needs it. The full stop
   rides inside each word, so it sits tight against the short ones and the
   slack falls at the end of the line, where nobody sees it. */
.rotator {
  display: inline-grid; vertical-align: top; text-align: left;
  /* No overflow:hidden. It clipped the word's soft shadow to the
     container's rectangle, and that hard cut-off read as a faint grey
     box around the word. Nothing needs clipping now that one span
     cross-fades in place rather than several sliding through. */
}
.rot-word {
  /* start, not stretch — otherwise each span fills the slot and measuring
     it for the width transition just returns the slot back */
  grid-area: 1 / 1; justify-self: start; white-space: nowrap;
  opacity: 0; transform: translateY(0.12em);
  /* Deliberately quick: one span carries every word, so the out/in pair
     is the only thing between two words. A long fade here reads as a
     headline with a hole in it. */
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.rot-word.is-active { opacity: 1; transform: none; }
/* The rotating discipline carries the brand colour; the full stop stays
   white so the line still ends on the headline's own voice.
   Not --primary itself: #6400ff has a relative luminance of 0.10, which
   against this hero measures 1.5:1 on the dark areas — invisible. Same
   hue, lifted for a dark surface, plus a stronger halo than the white
   text needs because a saturated colour loses more against the video. */
.rot-word { color: var(--primary-on-dark); text-shadow: 0 4px 44px rgba(0, 0, 0, 0.72); }
.hero-dot { color: #fff; text-shadow: 0 4px 44px rgba(0, 0, 0, 0.62); }
@media (prefers-reduced-motion: reduce) { .rot-word { transition: none; } }

/* Serviceplan ships its own white artwork; whitening it like the rest of
   the strip turns the red square in its mark into a blank block */
.hl-track img.is-brand { filter: none; opacity: 0.75; }

.intro-grid {
  display: grid; gap: clamp(24px, 4vw, 40px); grid-template-columns: 1fr;
  max-width: 100%; margin: 0;
  /* top-aligned: portraits and headings line up no matter how many
     lines a blurb takes (or whether a coworker has one at all) —
     with align-items: end a longer blurb shoved its portrait up */
  align-items: start;
}
@media (min-width: 640px) { .intro-grid { grid-template-columns: repeat(3, 1fr); } }
.intro-person { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.intro-person .shell { width: 100%; padding: 0; border-radius: 0; background: transparent; border: none; transition: none; }
.intro-person .portrait {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-lg);
  overflow: hidden; background: #e8e7e5; border: 1px solid var(--border);
}
.intro-person .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.14); transition: transform 0.8s var(--ease); }
.intro-person:hover .portrait img { transform: scale(1.19); }
.intro-person h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; margin: 16px 0 3px; letter-spacing: -0.01em; }
.intro-person .role { font-size: 12.5px; letter-spacing: 0; color: var(--muted-foreground); }
.intro-person .blurb {
  margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--muted-foreground);
  max-width: 34ch;
  /* exactly three lines at every column width. The text is editorial
     (catalog `blurb`, written to fill three lines); only coworkers
     without one fall back to a JS-truncated bio. The clamp is the
     hard cap for anything over-long; the min-height reserves the
     space when a text comes up short. */
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden;
  min-height: 4.5em;
}
.intro-more-wrap { display: flex; justify-content: flex-start; margin-top: clamp(40px, 5vw, 56px); }
.intro-more {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 18px 8px 10px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--border);
  font-size: 14px; font-weight: 500;
  transition: border-color 0.3s var(--ease);
}
.intro-more:hover { border-color: var(--primary); box-shadow: none; transform: none; }
.intro-more .stack { display: flex; }
.intro-more .stack img,
.intro-more .stack .more-count {
  width: 28px; height: 28px; border-radius: 999px; object-fit: cover;
  box-shadow: 0 0 0 2px #fff; background: var(--muted); margin-left: -9px; display: block;
}
.intro-more .stack img:first-child { margin-left: 0; }
.intro-more .stack .more-count {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 500;
}
.intro-more .label { display: inline-flex; align-items: center; gap: 8px; color: var(--foreground); transition: none; }
.intro-more .label .arrow { color: var(--muted-foreground); }

/* ===== how it works: ink chapter ===== */
.hiw-shell { padding: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; }
.hiw-core {
  position: relative; overflow: visible; border-radius: 0;
  background: transparent; border: none; box-shadow: none;
  border-top: 1px solid var(--hairline-dark);
  padding: clamp(36px, 5vw, 56px) 0 0;
  display: grid; grid-template-columns: 1fr; gap: 30px;
}
.hiw-core::before { content: none; }
.hiw-core > * { position: relative; }
@media (min-width: 900px) { .hiw-core { grid-template-columns: 1fr 56px 1fr 56px 1fr; gap: 0; } }
.hiw-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* --primary-on-dark, never --primary: #6400ff is near-invisible on ink */
.hiw-step { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary-on-dark); }
.hiw-cap { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); margin: 0; padding-top: 2px; }

.hiw-link { display: flex; align-items: center; justify-content: center; }
.hiw-orb {
  width: 34px; height: 34px; border-radius: 999px; background: transparent;
  border: 1px solid var(--hairline-dark); color: rgba(255, 255, 255, 0.7);
  box-shadow: none; display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(90deg); margin: -4px 0;
}
@media (min-width: 900px) { .hiw-orb { transform: none; margin: 0; } }

/* one dark ticket, shown three times as it moves through the pipeline:
   New briefing → Delegated → Done. All three cards share this skin and
   stretch to equal height so heads, rows, and feet line up. */
.ticket {
  flex: 1; display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.04); color: #fff;
  border: 1px solid var(--hairline-dark); border-radius: var(--r-lg);
  overflow: hidden; text-align: left;
}
.ticket-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--hairline-dark);
}
.ticket-id { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); }
.ticket-status { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); }
.ticket-status.is-done { color: #fff; }
.ticket-body { padding: 15px 16px 16px; }
.ticket-title { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 7px; color: #fff; }
.ticket-desc { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); margin: 0; }
.ticket-meta { border-top: 1px solid var(--hairline-dark); padding: 6px 0; }
.ticket-meta-row { display: flex; align-items: center; gap: 12px; padding: 7px 16px; min-width: 0; }
.ticket-label {
  flex-shrink: 0; width: 86px; font-size: 11px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
}
.ticket-value {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticket-value svg { color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.ticket-ava {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 10px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.ticket-ava img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.14); }
.ticket-rows { flex: 1; display: flex; flex-direction: column; }
.ticket-rows .hiw-row { flex: 1; }
.ticket-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 11px 12px; border-top: 1px solid var(--hairline-dark);
}
.ticket-send {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  background: #fff; border-radius: var(--r-md); padding: 7px 12px;
}
.ticket-done {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 500; color: #fff; padding: 7px 4px;
}

.hiw-lead { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--hairline-dark); }
.hiw-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.hiw-who strong { font-size: 13.5px; font-weight: 500; color: #fff; }
.hiw-who small { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hiw-row { display: flex; align-items: center; gap: 11px; padding: 12px 16px; min-width: 0; }
.hiw-row + .hiw-row { border-top: 1px solid var(--hairline-dark); }
.hiw-row-name { font-size: 13.5px; font-weight: 400; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hiw-tag { margin-left: auto; flex-shrink: 0; font-size: 11px; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); }
.hiw-ava {
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.hiw-ava.sm { width: 24px; height: 24px; font-size: 10px; }
.hiw-ava img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.14); }

.hiw-file-icon { color: rgba(255, 255, 255, 0.7); display: inline-flex; flex-shrink: 0; }
.hiw-file-type { margin-left: auto; flex-shrink: 0; font-size: 11px; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); }

/* ===== product screenshots: big shot with the next one peeking right,
       arrows slide the track ===== */
.shot-stage { position: relative; }
.shot-viewport { overflow: hidden; }
/* no frame: the renders already read as objects, so a box around them
   only draws a hard edge the eye has to cross */
.shot-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.shot-track { display: flex; gap: 24px; transition: transform 0.6s var(--ease); }
@media (prefers-reduced-motion: reduce) { .shot-track { transition: none; } }
.shot-slide { flex: 0 0 88%; min-width: 0; }
/* 16:9 matches the product renders exactly, so nothing is cropped. The
   renders carry their own dark falloff, so the canvas stays paper and a
   soft mask dissolves the last few percent of each edge into the page. */
.shot-canvas {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: var(--background); overflow: hidden;
}
.shot-canvas span { font-size: 13px; letter-spacing: 0.02em; color: var(--muted-foreground); }
.shot-canvas img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* controls live below the frame on paper, never on top of a screenshot */
.shot-nav {
  width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0;
  border: 1px solid var(--border); background: transparent;
  color: var(--foreground); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), opacity 0.3s var(--ease);
}
.shot-nav:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.shot-nav[disabled] { opacity: 0; pointer-events: none; }
.shot-info { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 20px; }
.shot-info p { font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 70ch; }
.shot-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.shot-count { font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .shot-info { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ===== trust band (dark) ===== */
.band-dark .trust-logo { filter: brightness(0) invert(1); }
/* a brand that ships its own white artwork keeps it: forcing Serviceplan
   to solid white turns the red square in its mark into a blank block */
.band-dark .trust-logo.is-brand { filter: none; }
.trust-inner { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .trust-inner { grid-template-columns: 1.08fr 1fr; } }
.trust-media { padding: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; }
.trust-media .photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.trust-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.trust-media:hover img { transform: scale(1.03); }
.trust-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.trust-logo { height: 22px; width: auto; }
.trust-headline { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.trust-copy p { font-size: 16px; line-height: 1.65; max-width: 46ch; }

/* ===== org chart: coworkers slot in under your real team =====
   Connectors are drawn per column (never across the grid) so the rail
   always meets each branch stem exactly, whatever the gap resolves to. */
.org { --org-gap: clamp(16px, 3vw, 36px); }
.org-root { display: flex; justify-content: center; }
.org-root .org-card { min-width: min(320px, 100%); }
.org-stem { width: 1px; height: 32px; background: var(--border); margin: 0 auto; }
.org-branches {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--org-gap);
}
.org-branch { position: relative; padding-top: 32px; display: flex; flex-direction: column; }
/* vertical drop into each branch */
.org-branch::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 32px;
  background: var(--border);
}
/* horizontal rail: each column draws its own half, overlapping the gap */
.org-branch::after {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--border);
  left: calc(var(--org-gap) / -2); right: calc(var(--org-gap) / -2);
}
.org-branch:first-child::after { left: 50%; }
.org-branch:last-child::after { right: 50%; }
.org-drop { width: 1px; height: 22px; background: var(--border); margin: 0 auto; }
.org-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
}
.org-card.org-human { background: var(--muted); border-color: transparent; }
.org-ava {
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; overflow: hidden;
  background: rgba(15, 14, 13, 0.08); color: var(--muted-foreground);
  font-size: 10.5px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.org-card.org-human .org-ava { background: #fff; }
.org-ava img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.14); }
.org-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.org-who strong { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-who small { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-tag {
  margin-left: auto; flex-shrink: 0; font-size: 10.5px; letter-spacing: 0.05em;
  padding: 2px 7px; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--primary); background: var(--primary-soft);
}
@media (max-width: 760px) {
  .org-stem, .org-branch::before, .org-branch::after { display: none; }
  .org-branches { grid-template-columns: 1fr; gap: 28px; }
  .org-branch { padding-top: 0; }
  .org-root { justify-content: flex-start; margin-bottom: 28px; }
  .org-root .org-card { min-width: 0; width: 100%; }
}

/* ===== CEO quote ===== */
.quote-grid { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .quote-grid { grid-template-columns: 1.15fr 1fr; } }
.quote-text {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.35; letter-spacing: -0.015em;
  text-wrap: pretty; margin: 0;
}
.quote-attr { margin-top: 26px; display: flex; flex-direction: column; line-height: 1.45; }
.quote-attr strong { font-size: 14.5px; font-weight: 500; }
.quote-attr small { font-size: 13px; color: var(--muted-foreground); }
.quote-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.quote-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 560px) {
  /* .hero-inner is align-items:flex-start, so the row has to claim the
     width itself before the buttons can stretch into it */
  .hero-cta { flex-direction: column; align-items: stretch; align-self: stretch; max-width: 360px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}