/* Pulse Systems site. Tokens from work/pulse/brand/design-tokens.json screen_colors
   and brand/guidelines.md section 4. Do not restyle .sc-* or [data-sc-*] here. */

:root {
  --sc-canvas:     #0A1628;
  --sc-surface:    #112C45;
  --sc-ink:        #FFFFFF;
  --sc-ink-soft:   #D4E0EA;
  --sc-accent:     #5B8CFF;
  --sc-accent-ink: #0A1628;
  --sc-font-display: "Zodiak", Georgia, serif;
  --sc-font-text:    "General Sans", system-ui, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --pulse-blue: #2E5FC8;
  --signal: #5B8CFF;
  --muted: color-mix(in oklab, #D4E0EA 66%, #0A1628);

  /* Every stage must fit one screen, so sizes follow the screen height as well as its
     width: short laptops get smaller type and tighter gaps instead of clipped content. */
  --bar-h: clamp(5.25rem, 14svh, 8.75rem);
  --pad-b: clamp(1rem, 3svh, 2rem);
  --gap: clamp(1.25rem, 4.5svh, 3rem);

  /* Type system: four roles, one style each, used everywhere. */
  --t-h1: clamp(3rem, min(1.9rem + 6.6vw, 12svh), 7.5rem);
  --t-h2: clamp(2.1rem, min(1.9rem + 4.2vw, 7svh), 5rem);
  --t-h3: clamp(1.1rem, min(1.1rem + 0.9vw, 3.1svh), 2rem);
  --t-body: clamp(0.95rem, min(0.95rem + 0.4vw, 2.15svh), 1.32rem);
  --t-label: clamp(0.7rem, min(0.7rem + 0.15vw, 1.5svh), 0.86rem);
}

/* Ground: the page is light (sections with [data-light]), dark from "Watch" to "Ways to
   start", then light again for the closing call to action (js/ground.js sets data-mode). The colours are registered so the change fades instead of cutting. */
@property --sc-canvas   { syntax: '<color>'; inherits: true; initial-value: #0A1628; }
@property --sc-ink      { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --sc-ink-soft { syntax: '<color>'; inherits: true; initial-value: #D4E0EA; }
@property --muted       { syntax: '<color>'; inherits: true; initial-value: #8494A6; }
@property --signal      { syntax: '<color>'; inherits: true; initial-value: #5B8CFF; }
/* Glass button tint: the lowest Pulse blue opacity that keeps white labels at 4.5:1 or more
   (light ground 0.9 gives 4.9:1, dark ground 0.6 gives 9.6:1). */
@property --glass-a     { syntax: '<number>'; inherits: true; initial-value: 0.6; }
html {
  transition: --sc-canvas 700ms ease, --sc-ink 700ms ease, --sc-ink-soft 700ms ease, --muted 700ms ease,
    --signal 700ms ease, --glass-a 700ms ease;
}
html[data-mode="light"] {
  --sc-canvas: #E4EEF8; --sc-ink: #0A1628; --sc-ink-soft: #425263; --muted: #647687;
  --signal: #2E5FC8; --glass-a: 0.9;
}
/* A faint blue grid behind everything, fading out toward the edges. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgb(91 140 255 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(91 140 255 / 0.07) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 100%);
}

body { font-family: var(--sc-font-text); line-height: 1.6; letter-spacing: 0.005em; }

.skip {
  position: fixed; left: var(--sc-4); top: var(--sc-4); z-index: 100;
  padding: var(--sc-2) var(--sc-4); background: var(--sc-ink); color: var(--sc-canvas);
  border-radius: var(--sc-r-sm); transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

h3 { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-lg); margin: 0; letter-spacing: -0.005em; }

/* -------------------------------------------------------------------- intro */
/* js/intro.js: the P spins, "ulse Systems" slides out of it, then the line moves into the
   bar logo. The SVG fills the screen and its units are pixels; the script places each piece. */
.intro { display: none; }
.intro-on .intro, .is-intro .intro { position: fixed; inset: 0; z-index: 100; display: block; background: #E4EEF8; }
.intro__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__svg [data-piece] { opacity: 0; fill: #0A1628; }
.intro-on .bar__mark, .is-intro .bar__mark { visibility: hidden; }
.intro-on .bar__nav { opacity: 0; }
.bar > .bar__nav { transition: background-color var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out),
  opacity 0.8s var(--sc-ease-out) 0.4s; }

/* ------------------------------------------------------------------- chrome */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h); padding-inline: var(--sc-gutter);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 62%, transparent 100%);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark { display: block; }
/* Use cases, About and Book a call sit together on the right. On phones a menu button
   (js/menu.js) holds Use cases and About, and Book a call stays beside it. */
.bar__nav { position: relative; display: flex; align-items: center; gap: var(--sc-2); }
.bar__links { display: contents; }
.bar__nav .bar__menu { display: none; }
.bar__menu svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bar__menu[aria-expanded="true"] .bar__menu-open, .bar__menu[aria-expanded="false"] .bar__menu-close { display: none; }
.bar__mark svg { height: calc(var(--bar-h) * 0.74); width: auto; display: block; }
/* White on the dark ground, navy on the light one (js/ground.js sets data-mode). */
.bar__logo { fill: #FFFFFF; transition: fill 700ms ease; }
html[data-mode="light"] .bar__logo { fill: #0A1628; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 var(--sc-5); border-radius: var(--sc-r-pill);
  /* Blue-tinted glass: part-opacity Pulse blue over a blurred backdrop, with a light edge. */
  background: rgb(46 95 200 / var(--glass-a)); color: #FFFFFF;
  border: 1px solid rgb(255 255 255 / 0.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 8px 24px -10px rgb(10 22 40 / 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  font: 500 var(--sc-t-base)/1 var(--sc-font-text); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn--sm { min-height: 2.75rem; font-size: var(--sc-t-sm); }
/* Quieter glass for secondary links (About): a faint blue tint, ink label. */
.btn--quiet { background: rgb(46 95 200 / 0.1); color: var(--sc-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25); }
@media (hover: hover) and (pointer: fine) { .btn.btn--quiet:hover { background: rgb(46 95 200 / 0.18); } }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .close__mail:focus-visible, .bar__mark:focus-visible, .foot a:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px;
}
/* Hover adds tint, so the label only gains contrast. */
@media (hover: hover) and (pointer: fine) { .btn:hover { background: rgb(46 95 200 / min(1, var(--glass-a) + 0.1)); } }

/* ---------------------------------------------------------------- stages */
.act { position: relative; }
/* Stages flow with the page (no pinning) but each still fills the screen. */
.stage { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
/* When a stage has free height (tall screens), the content sits a little above the middle:
   two parts of the free space above it, three below. A full stage is unchanged. */
.act:not(.hook):not(.close) .stage { grid-template-rows: 2fr auto 3fr; }
.act:not(.hook):not(.close) .stage__inner { grid-row: 2; }
/* "Unsure where to start?" sits higher on wide screens: a small gap under the top bar, and the
   rest of the free height below it. */
.sl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5; overflow: visible;
}
.sl path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sl .sl__under { stroke: var(--signal); stroke-width: 6; opacity: 0.12; }
.sl .sl__main { stroke: var(--signal); stroke-width: 2.5; }
.sl .sl__head { fill: var(--signal); }
/* A step's arrow draws out from the spine once the line reaches its step; the step's text
   waits for it (.step.is-on below). */
.sl .sl__arm { stroke-dasharray: 120; stroke-dashoffset: 120; opacity: 0;
  transition: stroke-dashoffset 180ms var(--sc-ease-out), opacity 100ms var(--sc-ease-out); }
.sl .sl__arm.is-on { stroke-dashoffset: 0; opacity: 1; }

.stage__inner {
  position: relative; z-index: 2;
  /* The line runs in a margin 6% of the width in from each edge (js/pulse-line.js), so
     content keeps clear of it. */
  width: min(74rem, 100% - 2 * max(var(--sc-gutter), 6vw + 1.5rem));
  padding: var(--bar-h) 0 var(--pad-b);
  text-align: center;
}
.head {
  font-size: var(--sc-t-3xl); font-weight: 400; line-height: 1.04;
  margin: 0 auto; max-width: 18ch; text-wrap: balance;
}

/* When a stage comes on screen its text wipes in left to right, one piece after another in
   line order (js/pulse-line.js sets each delay). The wipe is timed, not tied to scroll
   position, so it always finishes and never sits half-drawn. */
@property --w { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --draw { syntax: '<number>'; inherits: true; initial-value: 0; }
.pl-on [data-mark] { transition: --draw 1.4s var(--sc-ease-out); }
.pl-on [data-wipe] {
  clip-path: inset(-0.35em calc((1 - var(--w, 0)) * 100% - 0.05em) -0.45em -0.35em);
  opacity: var(--w, 0);
  transition: --w 650ms var(--sc-ease-out);
}

/* --------------------------------------------------------------------- hook */
.hook__title {
  font-size: var(--t-h1); font-weight: 400; line-height: 1.02;
  margin: 0 auto; max-width: 14ch; text-wrap: balance;
}
.pl-on .hook__title { animation: wipe-in 1.1s var(--sc-ease-out) 0.1s both; }
@keyframes wipe-in {
  from { clip-path: inset(-0.3em 100% -0.4em -0.3em); }
  to   { clip-path: inset(-0.3em -0.05em -0.4em -0.3em); }
}
.hook__box { width: fit-content; max-width: 100%; margin: 0 auto; }
.hook__sub { margin: var(--sc-5) auto 0; max-width: 70ch; text-wrap: balance; }
.pl-on .hook__sub { animation: fade-up 0.7s var(--sc-ease-out) 0.6s both; }
@keyframes fade-up { from { opacity: 0; translate: 0 0.5rem; } }
.hook__actions { display: grid; justify-items: center; gap: var(--sc-3); margin-top: var(--sc-6); }
/* Header, subtitle, button, then the line under it; when that ends, js/pulse-line.js draws
   the line round the box. */
.pl-on .hook__actions .btn { animation: fade-up 0.6s var(--sc-ease-out) 0.9s both; }
.pl-on .hook__actions .freecall { animation: fade-up 0.6s var(--sc-ease-out) 1.1s both; }
.intro-on .hook__title, .intro-on .hook__sub,
.intro-on .hook__actions .btn, .intro-on .hook__actions .freecall { animation-play-state: paused; }
.freecall { margin: 0; font: 400 var(--t-label)/1.4 var(--sc-font-mono); letter-spacing: 0.04em; color: var(--sc-ink-soft); }

/* --------------------------------------------------------------------- who */
/* Who is this for: the header and why, then a box for each situation we help with, close
   together in two rows of two. The line goes once round each box and joins each pair of
   neighbours (js/pulse-line.js), so the gaps between boxes leave room for it. Every row is as
   tall as the tallest box, so the boxes line up. */
/* On wide screens the section sits close under the hero: its content starts at the top of the
   stage, with a smaller gap for the top bar (the header is centred, clear of the logo and
   buttons), and the free height goes below it. */
@media (min-width: 861px) {
  .act.who:not(.hook):not(.close) .stage { grid-template-rows: 0 auto 1fr; }
  .who .stage__inner { padding-top: calc(var(--bar-h) * 0.6); }
}
.who__lead { margin: var(--sc-4) auto 0; max-width: 62ch; text-wrap: balance; font: 400 var(--t-body)/1.5 var(--sc-font-text); color: var(--sc-ink-soft); }
.who__lead strong { font-weight: 600; color: var(--sc-ink); }
.who__grid {
  list-style: none; margin: calc(var(--gap) + 0.5rem) auto 0; padding: 0; max-width: 60rem; text-align: left;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr;
  column-gap: clamp(2rem, 4vw, 3rem); row-gap: clamp(1.5rem, 4.5svh, 2.5rem);
}
.who__box { box-sizing: border-box; padding: clamp(0.85rem, 2.2svh, 1.25rem) clamp(1rem, 1.6vw, 1.4rem); }
.who__box h3 { margin: 0; font: 600 calc(var(--t-body) * 0.95)/1.25 var(--sc-font-text); color: var(--sc-ink); }
.who__box p { margin: 0.45rem 0 0; font: 400 calc(var(--t-body) * 0.88)/1.45 var(--sc-font-text); color: var(--sc-ink-soft); }

/* ------------------------------------------------------------------ process */
.steps {
  list-style: none; margin: var(--gap) auto 0; padding: 0; max-width: 60rem;
  display: grid; grid-template-columns: 1fr 9rem 1fr; row-gap: 0;
}
/* Steps alternate sides, and each one starts below the end of the one before it. */
.step { padding: var(--sc-2); opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.step.is-on { opacity: 1; }
/* Once its arrow has drawn, the number, title, text and tags wipe in 90 ms apart, the same
   beat as every other box (js/pulse-line.js). */
.pl-on .step.is-on .step__n { transition-delay: 0.1s; }
.pl-on .step.is-on h3 { transition-delay: 0.19s; }
.pl-on .step.is-on p { transition-delay: 0.28s; }
.pl-on .step.is-on .step__tags { transition-delay: 0.37s; }
.step:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
.step:nth-child(2) { grid-row: 2; grid-column: 3; text-align: left; }
.step:nth-child(3) { grid-row: 3; grid-column: 1; text-align: right; }
.step:nth-child(4) { grid-row: 4; grid-column: 3; text-align: left; }
.step__n { display: inline-block; margin-bottom: var(--sc-2); }
.step p { margin: var(--sc-1) 0 0; text-wrap: balance; }
/* What each step delivers: small quiet tags under its text, on the side of the text. */
.step__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--sc-3) 0 0; padding: 0; list-style: none; }
.step:nth-child(odd) .step__tags { justify-content: flex-end; }
/* On wide screens every step sits right of the line, left aligned, and the line moves left so
   the text sits nearer the middle of the page (js/pulse-line.js reads the line's place from the
   list's centre). The three tags stay on one line, and each step is as wide as its tags, so the
   text fills out to the end of the tags. (The text's zero width keeps it from widening the
   step; min-width then fills the step.) */
@media (min-width: 1240px) {
  .steps { position: relative; left: -16rem; grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1fr); row-gap: clamp(2.5rem, 7svh, 4.5rem); }
  .step:nth-child(n) { grid-column: 3; text-align: left; width: max-content; }
  .step p { width: 0; min-width: 100%; text-wrap: pretty; }
  .step:nth-child(odd) .step__tags { justify-content: flex-start; }
  .step__tags { flex-wrap: nowrap; }
  .step__tags li { white-space: nowrap; }
}
.step__tags li {
  padding: 0.3rem 0.65rem; border: 1px solid rgb(120 160 235 / 0.35); border-radius: 999px;
  font: 500 calc(var(--t-body) * 0.78)/1.2 var(--sc-font-text); color: var(--sc-ink-soft);
}

/* ------------------------------------------------------------------ people */
/* Founder portraits (About page). */
.people { display: flex; justify-content: center; gap: clamp(4rem, 10vw, 9rem); margin-top: var(--gap); }
.person { margin: 0; width: clamp(5.5rem, min(10vw, 15svh), 9rem); }
.person__photo {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
}
.person__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08) brightness(1.04);
}
/* Flex, not grid: a name wider than its photo must still overflow evenly on both sides. */
.person figcaption { margin-top: clamp(1rem, 3svh, 2rem); display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.person figcaption strong { font-weight: 600; }

/* -------------------------------------------------------------------- close */
.close .stage { grid-template-rows: 1fr auto; }
.close .stage__inner { display: grid; justify-items: center; gap: var(--sc-4); }
.close__mark { position: relative; width: clamp(5.5rem, 17svh, 10rem); margin-bottom: var(--sc-5); --draw: 0; }
.close__mark svg { display: block; width: 100%; height: auto; overflow: visible; }
/* The P draws itself: a thick stroke along its centre line is the mask that reveals the
   flat logo, so one P draws in and settles as the exact master, with no swap. The stroke is
   wider than the logo's thickest part so the finished mask covers it all. */
.close__stroke {
  fill: none; stroke: #fff; stroke-width: 260; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw));
}
.close__fill { fill: var(--pulse-blue); }
.close__title { max-width: none; }
.close__body { margin: 0; max-width: 46ch; text-wrap: balance; color: var(--sc-ink-soft); }
.close__actions { display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; justify-content: center; margin-top: var(--sc-4); }
.close__mail { color: var(--sc-ink-soft); text-underline-offset: 0.25em; }
.foot {
  position: relative; z-index: 2; width: 100%;
  display: flex; justify-content: space-between; gap: var(--sc-4);
  padding: var(--sc-5) var(--sc-gutter) calc(var(--sc-5) + env(safe-area-inset-bottom));
  font-size: var(--sc-t-xs); color: var(--muted);
}
.foot a { color: inherit; }

/* ---------------------------------------------------------------- type roles */
/* Heading: Zodiak. Subheading: General Sans 600. Body: General Sans 400. Label: mono. */
.head { font: 400 var(--t-h2)/1.04 var(--sc-font-display); letter-spacing: var(--sc-track-tight); }
/* The tight letter tracking also narrows the spaces (to about 0.16em), so the words run
   together; give the spaces back their natural width (about 0.2em) and keep the tight letters. */
.head, .hook__title { word-spacing: 0.04em; }
.step h3, .person figcaption strong {
  font: 600 var(--t-h3)/1.18 var(--sc-font-text); letter-spacing: -0.01em; color: var(--sc-ink);
}
.hook__sub, .step p, .close__body {
  font: 400 var(--t-body)/1.5 var(--sc-font-text); color: var(--sc-ink-soft);
}
.step__n {
  font: 500 var(--t-label)/1.2 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal);
}
.hook__sub { font-size: calc(var(--t-body) * 1.22); }

/* ------------------------------------------------------------------- phones */
@media (max-width: 860px) {
  /* Sized for iPhone 14 and later with Safari's toolbars showing (about 390 x 660). */
  :root {
    --bar-h: 4.75rem; --pad-b: 1.5rem; --gap: clamp(1rem, 3svh, 1.75rem);
    --t-h1: clamp(2.6rem, 12vw, 3.6rem); --t-h2: clamp(1.6rem, min(7.2vw, 4.4svh), 2.3rem);
    --t-h3: 1.05rem; --t-body: clamp(0.88rem, 2.2svh, 1rem); --t-label: 0.68rem;
  }
  .hook .stage__inner, .close .stage__inner { --pad-b: 1rem; }
  /* Middle stages take their content's height on phones, so short ones leave no empty screen. */
  .act:not(.hook):not(.close) .stage { min-height: 0; }
  .stage__inner { width: calc(100% - 2 * var(--sc-gutter)); }
  /* Logo, Book a call and the menu button fit side by side at 360 px. */
  .bar__nav { gap: 0.4rem; }
  .bar__nav .btn { min-height: 2.5rem; padding: 0 0.85rem; font-size: 0.82rem; }
  .bar__nav .bar__menu { display: inline-flex; width: 2.5rem; padding: 0; }
  .bar__links {
    display: none; position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 10.5rem;
    flex-direction: column; gap: 0.4rem; padding: 0.5rem; border-radius: 1.1rem;
    background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
    border: 1px solid rgb(255 255 255 / 0.25);
    box-shadow: 0 18px 40px -18px rgb(10 22 40 / 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  }
  .bar.is-open .bar__links { display: flex; }
  .bar__links .btn { width: 100%; min-height: 2.75rem; }
  .bar__mark svg { height: calc(var(--bar-h) * 0.62); }
  /* Two lines at 390 px for the hero header. */
  :root { --t-h1: clamp(2.1rem, 9.6vw, 3rem); }
  .hook__title { max-width: 18ch; }

  /* Who is this for, on phones: two boxes to a row. */
  .who__lead { font-size: 0.92rem; }
  .who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 1.25rem; }
  .who__box { padding: 0.6rem 0.7rem; }
  .who__box h3 { font-size: 0.82rem; }
  .who__box p { margin-top: 0.3rem; font-size: 0.74rem; line-height: 1.35; }

  .steps { grid-template-columns: 1fr 4rem 1fr; row-gap: 0; }
  .step { padding-block: var(--sc-1); }
  .step__n { margin-bottom: var(--sc-1); }
  .step p { font-size: 0.86rem; line-height: 1.4; }



  .people { gap: var(--sc-8); }
  .person { width: clamp(5rem, 14svh, 7rem); }
  .person figcaption { margin-top: var(--sc-3); }

  .foot { flex-direction: column; gap: var(--sc-1); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .step { transition: none; }
  .step { opacity: 1; }
  .pl-on [data-wipe] { clip-path: none; opacity: 1; }
  .pl-on .hook__title, .pl-on .hook__sub, .pl-on .hook__actions .btn, .pl-on .hook__actions .freecall { animation: none; }
}

/* --------------------------------------------------------------------- watch */
/* Results: one box (the line wraps it) with a tab per department. Each panel shows sourced
   stats on the left and, on the right, the kind of system we build there as a checklist that
   runs itself (js/results.js). The panels share one grid cell, so the box keeps the height of
   the tallest and the line does not move when the tab changes. */
.watch .head { max-width: 22ch; font-size: calc(var(--t-h2) * 0.72); }
/* The header sits a little higher than in other stages, so the subtitle keeps clear room above
   the line along the box's top edge. */
.watch__intro { margin-top: calc(var(--sc-4) * -1); }
.watch__lead { margin: var(--sc-3) auto 0; max-width: 46ch; text-wrap: balance; font: 400 var(--t-body)/1.5 var(--sc-font-text); color: var(--sc-ink-soft); }
/* Equal room on all four sides between the line (drawn 14px outside this box, 8px on phones)
   and the content inside it. On large screens, where the type is at its largest, the box grows
   with it, so every task and the first stat's label still fit on one line side by side. */
.watch__box { --inset: clamp(0.75rem, 2vw, 1.5rem); position: relative; box-sizing: border-box; width: min(100%, max(64rem, calc(var(--t-body) * 51))); margin: calc(var(--gap) * 0.75 + var(--sc-4)) auto 0; padding: var(--inset); text-align: left; }
/* Tabs across the top: the first name starts on the content's left edge, the last ends on its
   right edge, and the gaps between names are equal. The selected one grows (larger type) and
   the others slide aside to make room. The row keeps one height, so the box does not move. */
.results__tabs { display: flex; align-items: center; justify-content: space-between; height: calc(var(--t-h3) * 1.45); }
.results__tab, .results__arrow {
  font: 500 var(--t-label)/1 var(--sc-font-text); letter-spacing: 0.02em; color: var(--sc-ink-soft);
  background: none; border: 0; cursor: pointer; border-radius: 999px;
  transition: color 200ms ease, background-color 200ms ease;
}
.results__tab {
  flex: none; padding: 0.35em 0; white-space: nowrap;
  font: 500 var(--t-body)/1 var(--sc-font-text); letter-spacing: 0; color: var(--muted);
  transition: font-size 450ms var(--sc-ease-out), color 300ms ease;
}
.results__tab[aria-selected="true"] { font-size: calc(var(--t-h3) * 1.2); font-weight: 600; color: var(--sc-ink); }
/* A blue underline marks the selected tab, so it reads as a tab and not as a heading. It grows
   out from the middle as the tab is selected. */
.results__tab { position: relative; }
.results__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--signal);
  scale: 0 1; transition: scale 450ms var(--sc-ease-out);
}
.results__tab[aria-selected="true"]::after { scale: 1 1; }
/* Below the box, outside the line (drawn 14px outside it, 8px on phones). */
.results__arrows { display: flex; justify-content: center; gap: 0.5rem; margin-top: calc(14px + var(--sc-4)); }
/* The arrows are the last thing in the stage, so it needs less empty space below them. */
.watch .stage__inner { --pad-b: clamp(0.5rem, 1.5svh, 1rem); }
.results__arrow { width: 2.25rem; height: 2.25rem; font-size: 1rem; box-shadow: inset 0 0 0 1px rgb(91 140 255 / 0.35); color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) {
  .results__tab:hover { color: var(--sc-ink); }
  .results__arrow:hover { background: rgb(91 140 255 / 0.16); }
}
.results__tab:focus-visible, .results__arrow:focus-visible, .results__src:focus-visible, .sources a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Clear room between the selected tab's underline and "Agent deployed" below it. */
.results__panels { display: grid; margin-top: clamp(1rem, 2.8svh, 1.75rem); }
.rpanel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
/* Wide screens: two halves of equal width. "Agent deployed" sits alone in the top row; the left
   side starts level with the top edge of the checklist box, and keeps clear room above
   "Sources" in the bottom corner. */
@media (min-width: 861px) {
  .rpanel { grid-template-rows: auto 1fr; row-gap: 0; }
  .rpanel > .agent { display: contents; }
  .rpanel .agent__title { grid-area: 1 / 2; }
  .rpanel .agent__box { grid-area: 2 / 2; }
  .rpanel__results { grid-area: 2 / 1; align-self: start; padding-bottom: calc(var(--t-label) + clamp(1rem, 3svh, 1.75rem)); }
}
/* Hidden panels still hold their size (visibility, not display), so the box fits the tallest.
   The outgoing panel fades; the incoming one slides in from the side it comes from (--dir). */
.rpanel[hidden] { display: grid; visibility: hidden; opacity: 0; transition: opacity 200ms ease, visibility 0s 200ms; }
.rpanel.is-in { animation: rpanel-in 450ms var(--sc-ease-out) both; }
@keyframes rpanel-in { from { opacity: 0; translate: calc(var(--dir, 1) * 2.5rem) 0; } }
/* Left side: a heading that says what we do for the department (a little smaller than the
   selected tab), then two columns: the tasks a system can take over as a bulleted list, and the
   two stats stacked on the right. Every tab puts each piece in the same place: the task column
   is as wide as the longest task in any tab, so no task wraps, and the first task sits on the
   first stat's baseline. */
.rpanel__results { --task: calc(var(--t-body) * 0.95); display: grid; grid-template-columns: minmax(0, calc(var(--task) * 13.4)) minmax(0, 1fr); align-items: baseline; column-gap: clamp(1rem, 2.5vw, 2rem); }
.rpanel__head { grid-column: 1 / -1; margin: 0 0 clamp(0.75rem, 2.2svh, 1.25rem); font: 400 calc(var(--t-h3) * 1.1)/1.1 var(--sc-font-display); letter-spacing: -0.01em; color: var(--sc-ink); }
.rpanel__tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.5rem, 1.6svh, 0.9rem); }
.rpanel__tasks li { padding-left: 1.1em; text-indent: -1.1em; font: 400 var(--task)/1.35 var(--sc-font-text); color: var(--sc-ink); }
.rpanel__tasks li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: calc(1.1em - 6px); vertical-align: 0.2em; }
.rpanel__stats { display: grid; gap: clamp(0.6rem, 2svh, 1.1rem); }
.stat { display: grid; justify-items: start; }
.stat__n { margin: 0; font: 400 clamp(1.6rem, min(1rem + 1.8vw, 5svh), 2.4rem)/1 var(--sc-font-display); color: var(--signal); letter-spacing: -0.02em; }
.stat__l { margin: 0.25rem 0 0; font: 400 calc(var(--t-body) * 0.8)/1.35 var(--sc-font-text); color: var(--sc-ink); text-wrap: pretty; }
/* Where the stats column is too narrow for the first label on one line in every tab, it keeps
   room for two, so the second stat stays in the same place in every tab. */
@media (min-width: 861px) and (max-width: 1023px), (max-width: 389px) { .stat:first-child .stat__l { min-height: calc(2em * 1.35); } }
/* "Sources" sits in the box's bottom-left corner, level with the checklist box's bottom edge. */
.results__note { position: absolute; left: var(--inset); bottom: var(--inset); margin: 0; font: 400 var(--t-label)/1 var(--sc-font-mono); letter-spacing: 0.02em; color: var(--muted); }
.results__src { font: inherit; color: var(--sc-ink-soft); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgb(91 140 255 / 0.5); text-underline-offset: 0.2em; }
/* Sources: one dialog lists every study behind the section's numbers. */
.sources {
  width: min(40rem, calc(100vw - 2rem)); max-height: min(80svh, 44rem); padding: clamp(1.25rem, 3vw, 2rem); border: 0; border-radius: 14px;
  background: #0F2236; color: #D4E0EA; box-shadow: inset 0 0 0 1px rgb(91 140 255 / 0.3), 0 24px 60px rgb(0 0 0 / 0.45);
}
.sources::backdrop { background: rgb(5 12 24 / 0.6); }
.sources__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sources h2 { margin: 0; font: 400 1.6rem/1.1 var(--sc-font-display); color: #fff; }
.sources h3 { margin: 1.25rem 0 0.4rem; font: 600 0.95rem/1.3 var(--sc-font-text); color: #fff; }
.sources p { margin: 0.75rem 0 0; font: 400 0.9rem/1.5 var(--sc-font-text); }
.sources .sources__lead { margin: 1rem 0 0.5rem; font: 500 1rem/1.5 var(--sc-font-text); color: #fff; }
.sources ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.sources li { font: 400 0.85rem/1.45 var(--sc-font-text); }
.sources a { color: #D4E0EA; text-decoration-color: rgb(91 140 255 / 0.6); text-underline-offset: 0.2em; }

/* The checklist. "Agent deployed" sits above the box beside a small robot that keeps working
   (antenna pulse, blink). In the box: the workflow name, then the trigger (a lightning bolt),
   the steps (each waits, spins, then gets a blue check) and the hand-off to a person (larger,
   ending on a green check). js/results.js runs it, holds, and runs it again. */
/* The box fills the row, so it ends on the same line as the stats area beside it. Its text
   starts at the top, so the workflow name sits in the same place in every tab; where another
   tab's checklist is taller, the extra room goes below the steps. From 1101px no step wraps in
   any tab, so every checklist is the same height and the text can sit in the middle. */
.agent { display: flex; flex-direction: column; }
.agent__box { flex: 1; display: flex; flex-direction: column; }
@media (min-width: 1101px) { .rpanel .agent__box { justify-content: center; } }
.agent__title {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem;
  font: 600 var(--t-label)/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal);
}
.agent__bot { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: var(--signal); stroke-width: 1.8; stroke-linecap: round; }
.agent__bot .agent__ant, .agent__bot .agent__eye { fill: var(--signal); stroke: none; }
.agent__ant { animation: bot-ping 1.6s ease-in-out infinite; }
.agent__eye { transform-box: fill-box; transform-origin: center; animation: bot-blink 3.2s ease-in-out infinite; }
@keyframes bot-ping { 50% { opacity: 0.25; } }
@keyframes bot-blink { 0%, 92%, 100% { scale: 1 1; } 96% { scale: 1 0.15; } }
.agent__box {
  padding: clamp(1rem, 2.5svh, 1.5rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: 12px; background: rgb(17 44 69 / 0.55); box-shadow: inset 0 0 0 1px rgb(91 140 255 / 0.22);
}
.agent__flow { margin: 0; font: 600 var(--t-body)/1.3 var(--sc-font-text); color: var(--sc-ink); }
.agent__steps { --t-step: clamp(0.85rem, 0.78rem + 0.22vw, 1rem); list-style: none; margin: clamp(0.6rem, 1.8svh, 1.1rem) 0 0; padding: 0; display: grid; gap: clamp(0.35rem, 1.2svh, 0.6rem); }
.agent__steps li {
  position: relative; padding-left: 1.9rem; min-height: 1.3rem;
  font: 400 var(--t-step)/1.3 var(--sc-font-text); color: var(--muted); transition: color 250ms ease;
}
.agent__steps li::before {
  content: "\00B7\00B7\00B7"; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 1.2rem; height: 1.2rem;
  display: grid; place-items: center; font: 700 0.9rem/1 var(--sc-font-text); letter-spacing: 0.05em; color: var(--muted);
  border-radius: 5px; box-sizing: border-box;
}
.agent__steps li.is-run, .agent__steps li.is-done { color: var(--sc-ink); }
.agent__steps li.is-run::before { content: ""; border: 2px solid rgb(91 140 255 / 0.25); border-top-color: var(--signal); border-radius: 50%; animation: agent-spin 0.7s linear infinite; }
.agent__steps li.is-done::before {
  content: ""; background: var(--pulse-blue) no-repeat center / 0.8rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.3 3.3L11 1.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation: agent-pop 300ms var(--sc-ease-out);
}
@keyframes agent-spin { to { rotate: 1turn; } }
@keyframes agent-pop { from { scale: 0.4; opacity: 0; } }
/* The trigger: a lightning bolt, dim until it fires, then lit. */
.agent__steps li.is-trigger::before, .agent__steps li.is-trigger.is-run::before, .agent__steps li.is-trigger.is-done::before {
  content: ""; border: 0; border-radius: 0; animation: none; background: var(--muted);
  -webkit-mask: no-repeat center / 0.85rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M7.5 0L0 9h4.5L3.5 16 12 6H7z'/%3E%3C/svg%3E");
          mask: no-repeat center / 0.85rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M7.5 0L0 9h4.5L3.5 16 12 6H7z'/%3E%3C/svg%3E");
}
.agent__steps li.is-trigger.is-run::before { background: var(--signal); animation: bolt-flash 0.5s ease-in-out infinite; }
.agent__steps li.is-trigger.is-done::before { background: var(--signal); animation: agent-pop 300ms var(--sc-ease-out); }
@keyframes bolt-flash { 50% { opacity: 0.3; } }
/* The hand-off to a person: a little larger, and it ends on a green check. */
.agent__steps li.is-review { margin-top: 0.15rem; padding-left: 2.2rem; font-size: calc(var(--t-step) * 1.12); font-weight: 600; }
.agent__steps li.is-review::before { width: 1.5rem; height: 1.5rem; border-radius: 6px; }
.agent__steps li.is-review.is-done::before { background-color: #23A55A; background-size: 0.95rem; }

@media (max-width: 860px) {
  .watch__intro { margin-top: 0; }
  .results__tabs { height: 2rem; }
  .results__note { position: static; margin-top: var(--sc-3); }
  .results__tab { font-size: 0.62rem; padding-inline: 0; }
  .results__tab[aria-selected="true"] { font-size: 0.92rem; }
  .results__tab::after { height: 2px; }
  .results__arrows { margin-top: calc(8px + var(--sc-4)); }
  /* The panels share their rows, so the checklist starts at the same height in every tab. */
  .results__panels { grid-template-rows: auto auto; }
  .rpanel { grid-row: 1 / span 2; grid-template-columns: 1fr; grid-template-rows: subgrid; gap: var(--sc-4); }
  .rpanel__results { align-self: start; }
  .rpanel__head { font-size: 1.15rem; margin-bottom: 0.6rem; }
  .rpanel__tasks { gap: 0.45rem; }
  .rpanel__results { --task: 0.8rem; }
  .rpanel__stats { gap: 0.6rem; }
  .stat__n { font-size: 1.4rem; }
  .stat__l { font-size: 0.72rem; margin-top: 0.15rem; }
  .agent__steps { --t-step: 0.8rem; }
  .agent__box { padding: 0.9rem 0.85rem; }
  .agent__steps li { padding-left: 1.7rem; }
  .agent__steps li.is-review { padding-left: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rpanel[hidden], .results__tab, .results__tab::after { transition: none; }
  .rpanel.is-in { animation: none; }
  .agent__steps li::before, .agent__steps li.is-trigger.is-run::before, .agent__ant, .agent__eye { animation: none; }
}

/* --------------------------------------------------------------------- about */
/* A plain page: header, a short pulse, the founders, their note, then the call. */
.about__main {
  width: min(44rem, 100% - 2 * var(--sc-gutter)); margin: 0 auto;
  padding: calc(var(--bar-h) + var(--sc-6)) 0 var(--sc-8); text-align: center;
}
.about__since { margin: var(--sc-3) 0 0; font: 500 var(--t-label)/1.2 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.about__pulse { display: block; width: min(100%, 30rem); height: 3rem; margin: var(--sc-4) auto 0; overflow: visible; }
.about__pulse path { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: pulse-draw 1.6s var(--sc-ease-out) 0.2s forwards; }
@keyframes pulse-draw { to { stroke-dashoffset: 0; } }
.about .people { margin-top: var(--sc-6); }
.about__note { margin: var(--sc-7) auto 0; max-width: 38rem; text-align: left; }
.about__note p { margin: 0 0 var(--sc-4); font: 400 var(--t-body)/1.65 var(--sc-font-text); color: var(--sc-ink-soft); }
.about__note .about__sign { margin-top: var(--sc-5); font-weight: 600; color: var(--sc-ink); }
.about__actions { display: grid; justify-items: center; gap: var(--sc-3); margin-top: var(--sc-7); }
@media (prefers-reduced-motion: reduce) { .about__pulse path { animation: none; stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- use cases */
/* A plain page like About: header and intro, a chip for each case, one section per case (text
   beside its square video loop), the ideas clients brought us, then the call. */
.uc__main {
  width: min(70rem, 100% - 2 * var(--sc-gutter)); margin: 0 auto;
  padding: calc(var(--bar-h) + var(--sc-6)) 0 var(--sc-8);
}
.uc-label { margin: 0; font: 500 var(--t-label)/1.2 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.uc-intro { max-width: 44rem; margin: 0 auto; text-align: center; }
.uc-intro .head { margin: var(--sc-3) 0 0; }
.uc-intro__body { margin: var(--sc-5) 0 0; font: 400 var(--t-body)/1.65 var(--sc-font-text); color: var(--sc-ink-soft); text-wrap: pretty; }
.uc-intro__body + .uc-intro__body { margin-top: var(--sc-4); }
.uc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-2); margin: var(--sc-6) auto var(--sc-8); }
.uc-case, .uc-ideas, .uc-close { border-top: 1px solid rgb(46 95 200 / 0.18); scroll-margin-top: var(--bar-h); }
.uc-case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 5vw, 5rem);
  align-items: center; padding-block: clamp(3rem, 9svh, 6rem);
}
.uc-case__name { margin: var(--sc-2) 0 0; font: 400 calc(var(--t-h2) * 0.62)/1.1 var(--sc-font-display); letter-spacing: var(--sc-track-tight); word-spacing: 0.04em; color: var(--sc-ink); }
.uc-case__problem { margin: var(--sc-4) 0 0; max-width: 36rem; font: 400 var(--t-body)/1.6 var(--sc-font-text); color: var(--sc-ink-soft); }
.uc-case__body { margin: var(--sc-4) 0 0; max-width: 38rem; font: 400 var(--t-body)/1.65 var(--sc-font-text); color: var(--sc-ink-soft); text-wrap: pretty; }
.uc-case__tasks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column;
  gap: var(--sc-3) var(--sc-5); margin: var(--sc-5) 0 0; padding: 0; max-width: 38rem; list-style: none;
  font: 500 var(--t-body)/1.4 var(--sc-font-text); color: var(--sc-ink);
}
.uc-case__tasks li { position: relative; padding-left: 1.1em; }
.uc-case__tasks li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--signal); }
.uc-case__connects { margin: var(--sc-5) 0 0; max-width: 38rem; font: 400 var(--t-label)/1.6 var(--sc-font-mono); letter-spacing: 0.02em; color: var(--sc-ink-soft); }
.uc-media__box, .uc-media__todo { position: relative; aspect-ratio: 1; width: 100%; border-radius: 14px; overflow: hidden; background: #0A1628; }
.uc-media__poster, .uc-media__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.uc-media__poster { transition: opacity 400ms var(--sc-ease-out); }
/* Stands in for a case's video until its render is ready. */
.uc-media__todo {
  display: grid; place-content: center; gap: var(--sc-2); padding: var(--sc-5); text-align: center;
  border: 1px dashed rgb(91 140 255 / 0.55); color: #D4E0EA;
  font: 500 var(--t-label)/1.4 var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.uc-media__todo span:first-child { font: 600 var(--t-h3)/1.2 var(--sc-font-text); letter-spacing: 0; text-transform: none; color: #FFFFFF; }
.uc-ideas { padding-block: clamp(3rem, 9svh, 6rem); text-align: center; }
.uc-ideas__head, .uc-close .head { max-width: 26ch; margin: 0 auto; font-size: calc(var(--t-h2) * 0.72); }
.uc-ideas__head u, .uc-intro .head u { text-decoration-skip-ink: none; text-decoration-color: var(--signal); text-decoration-thickness: 0.06em; text-underline-offset: 0.14em; }
.uc-ideas__lead { margin: var(--sc-4) auto 0; font: 400 var(--t-body)/1.5 var(--sc-font-text); color: var(--sc-ink-soft); }
.uc-ideas__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); margin-top: var(--sc-7); }
.uc-idea .uc-case__name { margin: 0; font: 600 var(--t-h3)/1.18 var(--sc-font-text); letter-spacing: -0.01em; }
.uc-idea .uc-case__problem { min-height: 3.2em; max-width: 40ch; margin: var(--sc-2) auto var(--sc-5); text-wrap: balance; }
.uc-close { display: grid; justify-items: center; gap: var(--sc-4); padding-top: clamp(3rem, 9svh, 6rem); text-align: center; }
.uc-close .head { margin-bottom: var(--sc-2); }
@media (max-width: 860px) {
  .uc-chips { margin-bottom: var(--sc-6); }
  .uc-case { grid-template-columns: 1fr; gap: var(--sc-6); padding-block: var(--sc-7); }
  .uc-case__name { font-size: calc(var(--t-h2) * 0.85); }
  .uc-ideas__grid { grid-template-columns: 1fr; gap: var(--sc-7); }
  .uc-idea .uc-case__problem { min-height: 0; }
}

/* ----------------------------------------------------------------- services */
/* One box per service, two by two; one column on phones. */
/* Wider than Use cases, so each service name fits on one line on a computer. */
.sv .uc__main { width: min(80rem, 100% - 2 * var(--sc-gutter)); }
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: var(--sc-7); }
.sv-box {
  padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgb(46 95 200 / 0.22); border-radius: 14px;
  background: rgb(46 95 200 / 0.04); scroll-margin-top: calc(var(--bar-h) + var(--sc-4));
}
.sv-box h2 { margin: 0; font: 400 calc(var(--t-h2) * 0.55)/1.1 var(--sc-font-display); letter-spacing: var(--sc-track-tight); word-spacing: 0.04em; color: var(--sc-ink); }
.sv-box p { margin: var(--sc-3) 0 0; font: 400 var(--t-body)/1.6 var(--sc-font-text); color: var(--sc-ink-soft); text-wrap: pretty; }
.sv-box { display: flex; flex-direction: column; }
/* What the service includes: at the foot of the box, split by thin lines. On a computer all
   four sit on one line; on narrower screens two per line, so every box reads the same. */
.sv-list {
  display: flex; flex-wrap: nowrap; justify-content: flex-start;
  margin: auto 0 0; padding: var(--sc-5) 0 0; list-style: none;
}
.sv-list li { padding: 0 0.6rem; white-space: nowrap; font: 500 calc(var(--t-body) * 0.82)/1.3 var(--sc-font-text); color: var(--sc-ink); }
.sv-list li:first-child { padding-left: 0; }
.sv-list li + li { border-left: 1px solid rgb(46 95 200 / 0.3); }
@media (max-width: 1239px) {
  .sv-list { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; row-gap: 0.5rem; }
  .sv-list li { padding: 0 0.85rem 0 0; white-space: normal; }
  .sv-list li + li { border-left: 0; }
  .sv-list li:nth-child(even) { padding: 0 0 0 0.85rem; border-left: 1px solid rgb(46 95 200 / 0.3); }
}
.sv-grid + .uc-close { margin-top: clamp(3rem, 9svh, 6rem); }
@media (max-width: 860px) { .sv-grid { grid-template-columns: 1fr; } .sv-box h2 { font-size: calc(var(--t-h2) * 0.75); } }