/* ============================================================================
   sections.css — the page-level compositions
   ========================================================================== */

/* ── hero ────────────────────────────────────────────────────────────────────
   One column, centred: the headline, one line under it, the buttons, then the
   pipeline stage running the full width of the page. The headline is plain
   text with no entrance animation — it is the page's largest paint and must
   not wait for a script. The stage below is the page's one moving picture.  */
.hero {
  /* no bottom padding: the stage runs to the section's foot and the logo
     strip starts on the other side of its bottom rule */
  padding-block: clamp(22px, 4.2vh, 56px) 0;
  text-align: center;
}
/* lifted above the stage, or the download menu opens underneath it */
.hero__copy { max-width: 1000px; margin-inline: auto; position: relative; z-index: 3; }
.hero__title {
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.04;
  margin-bottom: clamp(16px, 1.8vw, 22px);
  text-wrap: balance;
}
.hero__sub { margin-inline: auto; margin-bottom: clamp(20px, 2.2vw, 28px); max-width: 880px; }
.hero__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── the hero stage ──────────────────────────────────────────────────────────
   A full-width frame under the copy, painted with the ribbed blue backdrop (below) and
   ending on a hairline right above the logo strip. Its top edge fades in
   rather than starting at a line. The pipeline's two canvases fill it, under
   the Scribe mark; the height is fixed in CSS so nothing moves when the
   script arrives.                                                           */
.hero-stage {
  position: relative;
  z-index: 1;
  margin-top: clamp(14px, 2.6vh, 36px);
  height: clamp(440px, 46vw, 600px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.hero-stage__bg,
.end-cta__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-stage__bg {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
}

/* ── ribbed blue backdrop (round 7) ──────────────────────────────────────────
   The backdrop of the hero stage and of the closing call to action is the
   reference picture itself (assets/img/bg/ribbed-blue.webp, 1672 x 941):
   white at the top, then wide ribs of sky blue that deepen towards the foot.
   It is laid cover-fit and anchored to the bottom edge, so the blue always sits
   behind the lower part of the pane and the white head of the picture melts
   into the page. This replaces the canvas-drawn "fractal glass" of round 6
   (assets/js/glass.js is no longer loaded).                                  */
.hero-stage__bg,
.end-cta__bg {
  background: #FEFEFD url("../img/bg/ribbed-blue.webp") center bottom / cover no-repeat;
}

/* the strip of customer names under the hero */
.logos { padding-block: clamp(20px, 2.6vw, 34px) clamp(30px, 3.6vw, 48px); }

/* ── sticky stacking cards ("Why Scribe") ────────────────────────────────────
   Each panel is a full-viewport sticky box inside one tall parent, so panel n+1
   travels up and settles exactly over panel n. The card itself is centred
   inside the sticky box, which keeps the stack visually still while scrolling. */
.stack-section { margin-top: clamp(30px, 4vw, 52px); }
.stack-list { position: relative; }
.stack-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stack-card {
  width: 100%;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.31fr) minmax(0, 1fr);
  align-items: stretch;
  box-shadow: 0 -1px 0 rgba(18, 22, 32, .06);
  /* set by stack.js: one step smaller for every card that has come to rest on top */
  transform: scale(var(--stack-scale, 1));
  transition: transform .35s var(--ease);
  transform-origin: 50% 42%;
}
.stack-card__media {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  min-height: clamp(330px, 38vw, 548px);
  display: grid;
  place-items: center;
  padding: clamp(20px, 2.2vw, 30px);
}
.stack-card__media picture { display: block; width: min(100%, 460px); }
.stack-card__media .chip-shot { width: min(100%, 460px); }
.stack-card__body {
  padding: clamp(26px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.stack-card__body .h4 { max-width: 400px; text-wrap: pretty; }
.stack-card__body p { font-size: 16px; line-height: 1.45; color: var(--ink-2); max-width: 380px; }
.stack-card__body .btn { align-self: flex-start; margin-top: 6px; }

/* ── feature lists (features page) ────────────────────────────────────── */
.feature-list { display: flex; flex-direction: column; gap: 20px; }
.feature-list li { display: flex; gap: 13px; }
.feature-list .icon { width: 17px; height: 17px; color: var(--ink); margin-top: 2px; flex: 0 0 auto; }
.feature-list b { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.feature-list p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 40ch; }

/* ── the pipeline (in the hero stage) ────────────────────────────────────────
   Two canvases — the lanes, then the cards — sit under the Scribe mark;
   pipeline-scene.js draws both and reads the mark's box to find the middle,
   so the mark's size and position here are what the scene is built around. */
.pipeline__stage { position: absolute; inset: 0; z-index: 1; }
/* round 5: the belt can be grabbed and dragged sideways (pipeline-scene.js).
   A vertical swipe still scrolls the page on touch screens. */
.hero-stage.is-draggable { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.hero-stage.is-dragging { cursor: grabbing; }
.pipeline__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* held back until the cards are painted, so the scene arrives whole */
html:not(.no-js) .pipeline__canvas { opacity: 0; transition: opacity .7s var(--ease); }
html:not(.no-js) .pipeline__stage.is-ready .pipeline__canvas { opacity: 1; }

.pipeline__hub {
  --hub: clamp(76px, 8.4vw, 124px);
  --energy: 0;
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 2;
  width: var(--hub);
  height: var(--hub);
  transform: translate(-50%, -50%);
}
.pipeline__halo {
  position: absolute;
  inset: -58%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 135, 242, .55), rgba(90, 135, 242, .22) 46%, rgba(90, 135, 242, 0));
  opacity: calc(.78 + .22 * var(--energy));
  transform: scale(calc(1 + .14 * var(--energy)));
}
.pipeline__tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22.5%;
  will-change: transform;      /* it breathes every frame; keep that off the paint path */
  box-shadow:
    0 0 30px rgba(90, 135, 242, .55),
    0 0 70px rgba(90, 135, 242, .30),
    0 22px 46px -18px rgba(31, 67, 176, .55);
}
.pipeline__tile img { width: 100%; height: 100%; border-radius: inherit; -webkit-user-drag: none; user-select: none; }

/* ── security band ───────────────────────────────────────────────────────── */
.pillars {
  margin-top: clamp(34px, 4vw, 54px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pillars li { padding: 4px clamp(16px, 2vw, 28px); }
.pillars li + li { border-left: 1px solid var(--line); }
/* each icon sits in its own small tile, on the same left edge as the title
   and text under it */
.pillars .icon-tile {
  width: 40px;
  height: 40px;
  margin-bottom: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.pillars b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.pillars p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
/* the single reassurance link under a band section */
.band__cta { display: flex; justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }

/* ── pricing ─────────────────────────────────────────────────────────────── */
.pricing__switch { display: flex; justify-content: center; margin-top: 30px; }
.plans {
  margin-top: clamp(30px, 3.6vw, 46px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 30px);
  overflow: hidden;
  isolation: isolate;
}
/* home page (round 4): white cards with an edge, so they stand off the
   section rather than melt into it; Pro carries a blue edge and lift */
.plans--raised .plan {
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(18, 22, 32, .08), 0 1px 2px rgba(18, 22, 32, .04), 0 18px 36px -28px rgba(22, 34, 70, .3);
}
.plans--raised .plan--featured {
  box-shadow: 0 0 0 1.5px var(--accent-line), 0 26px 48px -26px rgba(45, 91, 227, .42);
}
.plan--featured .plan__art {
  position: absolute;
  right: -8%; bottom: -6%;
  width: 74%;
  opacity: 1;
  z-index: -1;
  -webkit-mask-image: radial-gradient(76% 76% at 76% 80%, #000 30%, transparent 74%);
          mask-image: radial-gradient(76% 76% at 76% 80%, #000 30%, transparent 74%);
}
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan__name { font-size: 15px; font-weight: 500; color: var(--ink); }
.plan__badge {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 500;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 18px;
  font-family: 'Sentient', 'Scribe Serif', Georgia, serif;
  font-weight: 300;
  font-size: clamp(38px, 3.6vw, 46px);
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--ink);
}
.plan__price .per {
  font-family: 'Onest', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ink-3);
}
.plan__price .amount { transition: opacity .22s var(--ease); }
.plan__desc { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 32ch; }
.plan__inc { margin-top: 24px; font-size: 13px; font-weight: 500; color: var(--ink); }
.plan__list { margin-top: 14px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan__list li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); }
.plan__list .icon { width: 15px; height: 15px; color: var(--ink); margin-top: 3px; flex: 0 0 auto; }
.plan .btn { margin-top: 28px; }
.plan__foot { margin-top: 30px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* comparison table (pricing page) */
.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { padding: 15px 18px; text-align: left; vertical-align: middle; }
.compare thead th { font-size: 13px; font-weight: 500; color: var(--ink); }
.compare tbody tr { border-top: 1px solid var(--line); }
.compare tbody th { font-weight: 400; color: var(--ink-2); }
.compare td { text-align: center; color: var(--ink-2); width: 17%; }
.compare td .icon { width: 16px; height: 16px; color: var(--ink); margin-inline: auto; }
.compare .dash { color: var(--ink-3); }
.table-scroll { overflow-x: auto; }

/* ── closing CTA ─────────────────────────────────────────────────────────── */
.cta-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: center;
  overflow: hidden;
}
.cta-card__body { padding: clamp(26px, 3.4vw, 48px); }
.cta-card__body .h3 { margin-bottom: 18px; max-width: 440px; text-wrap: pretty; }
.cta-card__body p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 40ch; margin-bottom: 28px; }
.cta-card__body p:first-of-type { margin-bottom: 12px; }
.cta-card__body .cta-card__note { font-size: 13px; color: var(--ink-3); max-width: 46ch; }
.cta-card__media {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  min-height: clamp(240px, 26vw, 320px);
}
.cta-card__media .shot__fg {
  position: absolute;
  top: 9%;
  left: 8%;
  width: 132%;
  height: auto;
  max-width: none;
  border-radius: 10px;
}

/* ── inner-page hero ─────────────────────────────────────────────────────── */
.page-hero {
  padding-block: clamp(48px, 6vw, 92px) clamp(34px, 4vw, 56px);
  text-align: center;
}
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero .h1 { margin-inline: auto; max-width: 660px; text-wrap: pretty; }
.page-hero .lead { margin: 20px auto 0; text-align: center; }
.page-hero__cta { margin-top: 30px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.page-hero__search { margin: 30px auto 0; }

/* ── integrations grid ───────────────────────────────────────────────────── */
.integrations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.integration {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.integration:hover { transform: translateY(-3px); background: #E8ECF2; }
.integration__head { display: flex; align-items: center; gap: 12px; }
.integration__head b { display: block; font-size: 14.5px; font-weight: 500; }
.integration__head span:not(.logo-tile) { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.integration p {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  flex: 1;
}
.integration .link-arrow { margin-top: 18px; font-size: 13.5px; }
.integration.is-hidden { display: none; }

/* ── split feature rows (features page) ──────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.6vw, 60px);
  align-items: center;
}
.split + .split { margin-top: clamp(52px, 7vw, 104px); }
.split--flip .split__media { order: -1; }
.split__copy .eyebrow { margin-bottom: 16px; }
.split__copy .h4 { margin-bottom: 18px; max-width: 430px; text-wrap: pretty; }
/* Kept, Oct 2026: the home page's watchouts spotlight uses a larger heading */
.split__copy .h3 { margin-bottom: 20px; max-width: 480px; text-wrap: pretty; }
.split__copy > p { font-size: 15px; line-height: 1.58; color: var(--ink-2); max-width: 44ch; margin-bottom: 26px; }
.split__media .shot { aspect-ratio: 16 / 11.6; }
.split__media .shot__fg {
  position: absolute;
  top: 8%;
  left: 8%;
  /* the narrowest of the three full-window slots, so it leans on the frame a
     little harder to hold the window's type at the same size as the others */
  width: 128%;
  height: auto;
  max-width: none;
  border-radius: 10px;
}

/* ── quiet value grid (about page) ───────────────────────────────────────── */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.value {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 28px);
}
.value .icon-tile { margin-bottom: 20px; }
.value b { display: block; font-size: 15.5px; font-weight: 500; margin-bottom: 9px; }
.value p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.timeline { border-top: 1px solid var(--line); }
.timeline li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding-block: 26px;
  border-bottom: 1px solid var(--line);
}
.timeline .when { font-size: 13px; color: var(--ink-3); padding-top: 3px; }
.timeline b { display: block; font-size: 16px; font-weight: 500; margin-bottom: 7px; }
.timeline p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }

/* ── contact ─────────────────────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .68fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: start;
}
.contact__form { display: grid; gap: 18px; }
.contact__form .grid-2 { gap: 18px; }
.contact__aside { display: flex; flex-direction: column; gap: 18px; }
.contact__block { background: var(--surface); border-radius: var(--r-lg); padding: 24px; }
.contact__block b { display: block; font-size: 14.5px; font-weight: 500; margin-bottom: 8px; }
.contact__block p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.contact__block a { color: var(--accent-ink); }
.form-note { font-size: 12.5px; color: var(--ink-3); }
.form-status {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 14px;
}
.form-status.is-shown { display: flex; }

/* ── legal / prose ───────────────────────────────────────────────────────── */
.prose { max-width: 72ch; }
.prose h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: 44px;
  margin-bottom: 12px;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.prose p + p { margin-top: 14px; }
.prose ul { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.notfound {
  min-height: calc(100vh - var(--nav-h) - 80px);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 60px;
}
.notfound__code {
  font-family: 'Sentient', 'Scribe Serif', Georgia, serif;
  font-weight: 300;
  font-size: clamp(90px, 15vw, 168px);
  line-height: .9;
  letter-spacing: -.06em;
  color: var(--ink);
}

/* ── a heading with its lead beside it rather than under it ──────────────── */
.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.split-head .section-head { max-width: none; }
.split-head__lead { max-width: 46ch; padding-bottom: 4px; }

/* ── permission tiers (integrations page) ─────────────────────────────── */
.perms { margin-top: 34px; display: flex; flex-direction: column; }
.perms li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.perms li:last-child { border-bottom: 1px solid var(--line); }
.perms b { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 15px; font-weight: 500; }
.perms b span { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.perms p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.perms__tag {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 10px; background: var(--white); border: 1px solid var(--line);
}
.perms__tag .icon { width: 15px; height: 15px; }
.perms__tag--read  { color: #2B6E49; }
.perms__tag--write { color: var(--accent); }
.perms__tag--send  { color: var(--ink); }

/* ── a brand mark on its white tile (integrations page) ────────────────── */
.logo-tile {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--line);
}
.logo-tile img { width: 22px; height: 22px; object-fit: contain; -webkit-user-drag: none; user-select: none; }

/* ── integrations page: the brand mark and what each connector can do ──── */
.integration__caps {
  display: inline-block;
  align-self: flex-start;
  margin-top: 16px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}

/* the permission tiers laid out across, for the integrations page */
.perms--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(30px, 3.6vw, 48px); }
.perms--row li, .perms--row li:last-child { border-bottom: 0; }

/* ── the frame round every screenshot ──────────────────────────────────────
   Every product shot sits in a thick, translucent white mat, so the painted
   backdrop shows through its edge. Loaded last in this file so it wins over
   the per-slot radii above.                                              */
:root {
  --frame: 9px;
  --frame-tint: rgba(255, 255, 255, .5);
  --frame-r: 20px;
}
.chip-shot,
.shot__fg {
  border: var(--frame) solid var(--frame-tint);
  border-radius: var(--frame-r);
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .45),
    0 24px 48px -20px rgba(20, 30, 60, .34),
    0 2px 6px rgba(20, 30, 60, .08);
}
.shot--bleed .shot__fg { border-bottom-right-radius: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   THE HOME PAGE, ROUNDS 3–4 (Sep 2026) — core feature cards, the bento, and
   the last call to action. Responsive overrides are at the foot of
   responsive.css under the same heading.
   ════════════════════════════════════════════════════════════════════════ */

/* ── core features: the stacking cards, text left, the picture right ──────
   Round 4. On a wide screen the heading pins under the nav and the three
   cards stack right beneath it, a little lower each time (--deck) so the
   edge of the card underneath shows. The track the heading sticks in stops
   one panel short of the list, so the heading and the last card let go on
   the same frame. Below 1181px the stack flattens (responsive.css) and all
   of this is ordinary flow. */
.feats .stack-list { margin-top: clamp(30px, 4vw, 52px); }
.feat { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.feat__body {
  padding: clamp(24px, 2.8vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.feat__body .h4 { max-width: 14ch; text-wrap: balance; font-size: clamp(26px, 2.7vw, 36px); }
.feat__body p { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); max-width: 34ch; text-wrap: pretty; }

@media (min-width: 1181px) {
  .feats {
    --fh: 132px;                        /* the pinned heading's band */
    --deck: 14px;                       /* each later card rests this much lower */
    --stack-top: calc(var(--nav-h) + var(--fh));
    --card-h: clamp(380px, calc(100vh - var(--stack-top) - var(--deck) * 2 - 44px), 520px);
    --mh: calc(var(--card-h) - 24px - 56px);   /* the picture's room: card less its padding and the media's */
  }
  .feats { padding-bottom: 0; }
  .feats__pin { position: relative; }
  /* the heading's track ends where the last panel's sticky room begins
     (its height plus the two deck steps), so both let go together */
  .feats__track {
    position: absolute;
    left: 0; right: 0; top: 0;
    bottom: calc(var(--card-h) + 8px + var(--deck) * 2);
    pointer-events: none;
  }
  .feats__head {
    position: sticky;
    top: var(--nav-h);
    height: var(--fh);
    display: grid;
    place-items: center;
    pointer-events: auto;
  }
  .feats .stack-list { margin-top: 0; padding-top: var(--fh); max-width: 1100px; margin-inline: auto; }
  /* Every panel is only as tall as its card, so all of them hold until the
     same moment and let go together. The space between them (a viewport
     less the heading, plus --dwell so each card rests before the next comes
     up over it) is margin; after the last card, the rest of the viewport
     plus the same dwell, which the next section rises through while the
     stack holds still. */
  .feats .stack-list { --dwell: 90px; }
  .feats .stack-panel {
    top: calc(var(--stack-top) + var(--i, 0) * var(--deck));
    height: calc(var(--card-h) + 8px);
    align-items: flex-start;
  }
  .feats .stack-panel + .stack-panel { margin-top: calc(100vh - var(--stack-top) + var(--dwell) - var(--card-h) - 8px); }
  .feats .stack-panel:nth-child(2) { --i: 1; }
  .feats .stack-panel:nth-child(3) { --i: 2; }
  .feats .stack-list::after {
    content: '';
    display: block;
    height: calc(100vh - var(--stack-top) - var(--deck) * 2 - var(--card-h) - 8px + var(--dwell));
  }
  .feats .stack-card { height: var(--card-h); transform-origin: 50% 0; box-shadow: 0 -1px 0 rgba(18, 22, 32, .06), 0 -14px 30px -24px rgba(18, 22, 32, .28); }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 13px 0 11px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.chips li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

.feat__media {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 28px;
  min-height: 0;
}
.feat__media .shot__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* The shots are captured already cropped to what the card says, so each is
   drawn whole: sized by width, never clipped. */
.shot4 { display: block; position: relative; z-index: 1; }
.shot4 img { display: block; width: 100%; height: auto; }

@media (min-width: 1181px) {
  /* each picture is as large as the card's height allows (the numbers are
     the shots' own aspect ratios), and never wider than its box */
  .shot4--project   { width: min(100%, calc(var(--mh) * 1.43 + 8px)); }
  .shot4--assistant { position: absolute; top: 28px; right: 28px; width: min(calc(100% - 96px), 600px, calc(var(--mh) * .78 * 1.89)); }
  .shot4--inset     { position: absolute; left: 28px; bottom: 28px; width: min(calc(100% - 140px), 430px); z-index: 2; }
  .shot4--dictation { position: absolute; top: 30px; left: 30px; width: min(calc(100% - 90px), 560px); }
}

/* card 3: the typing demo — the pill, then an email the words land in —
   over the lower right of the dictated lines */
.type-demo {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 28px;
  width: min(62%, 380px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.type-demo__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 10px;
  background: #0548CF;              /* the prototype's Ocean button */
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 14px 30px -14px rgba(5, 40, 120, .6);
  white-space: nowrap;
}
.type-demo__pill > .icon { width: 17px; height: 17px; }
.keycap {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.type-demo.is-live .keycap { transform: translateY(1px); box-shadow: inset 0 0 0 rgba(0, 0, 0, .18); background: rgba(255, 255, 255, .28); }
.type-demo__wave { display: none; align-items: center; gap: 2px; height: 16px; }
.type-demo.is-live .type-demo__wave { display: inline-flex; }
.type-demo__wave i { width: 2.5px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .8); transition: height .12s linear; }

.type-demo__mail {
  width: 100%;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 24px 48px -20px rgba(20, 30, 60, .38), 0 1px 3px rgba(20, 30, 60, .10);
  overflow: hidden;
  text-align: left;
}
.type-demo__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #F4F6F9;
  border-bottom: 1px solid #E6E9EF;
  font-size: 13px;
}
.type-demo__bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5DAE3; }
.type-demo__bar b { margin-left: 8px; font-weight: 600; color: var(--ink); }
.type-demo__field {
  display: flex; gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid #EEF0F4;
  font-size: 14px;
  color: var(--ink);
}
.type-demo__field span { width: 52px; color: var(--ink-2); }
.type-demo__text {
  padding: 14px 16px 18px;
  min-height: 78px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
/* words not yet spoken take no room, so the caret sits right after the
   last one and the line wraps the way it would while typing */
.type-demo__text .w { display: none; }
.type-demo__text .w.is-in { display: inline; animation: word-in .3s var(--ease) both; }
@keyframes word-in { from { opacity: 0; filter: blur(3px); } }
.type-demo__caret {
  display: inline-block;
  width: 1.5px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ── the details: the bento ─────────────────────────────────────────────────
   Round 5. Seven white tiles, each a picture over a title and one line. The
   pictures (.art) follow the references: white objects with a hairline edge
   and a wide, faint shadow; skeleton bars for content; concentric rings
   (.art--rings) or a dot grid (.art--dots) behind them that fade out before
   the edges, so the picture melts into the tile; and one soft blue for
   Scribe, flat — no sheen, no glare, no hard shadows. Each picture is drawn
   on a fixed-size stage (.art__stage, --dw × --dh) that scales down with its
   tile, so it keeps its composition at every width. Shared parts first, then
   one block per tile. Layout: 2 across, 3 across, 2 across. */
:root {
  --bento-bg: #EEF0F4;
  --il-edge: #E7EAF0;                              /* the hairline round every object */
  --il-shadow: 0 1px 2px rgba(22, 34, 70, .04), 0 14px 32px -20px rgba(22, 34, 70, .22);
  --il-sk: #EEF0F4;                                /* skeleton bars */
  --il-sk-2: #F4F5F8;
  --il-blue: #5B86F5;                              /* Scribe, in the pictures */
  --il-blue-hi: #86A7FF;
  --il-violet: #9B7BF7;
  --il-muted: #8C94A3;
}
.bento-band { background: var(--bento-bg); }
.bento {
  margin-top: clamp(30px, 3.6vw, 48px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "watch watch watch watch watch watch watch nobot nobot nobot nobot nobot"
    "lang  lang  lang  lang  share share share share local local local local"
    "key   key   key   key   key   ins   ins   ins   ins   ins   ins   ins";
  gap: 14px;
}
.tile--watch    { grid-area: watch; }
.tile--nobot    { grid-area: nobot; }
.tile--lang     { grid-area: lang; }
.tile--share    { grid-area: share; }
.tile--local    { grid-area: local; }
.tile--key      { grid-area: key; }
.tile--insights { grid-area: ins; }

.tile {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 26px;
  border-radius: 22px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(18, 22, 32, .05);
  box-shadow: 0 1px 2px rgba(18, 22, 32, .03);
  overflow: hidden;
}
.tile__title { margin: 4px 26px 0; font-size: 19px; font-weight: 600; letter-spacing: -.018em; line-height: 1.3; }
.tile__cap { margin: 6px 26px 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }

/* the picture: full bleed at the top of the tile, its pattern fading out */
.art {
  position: relative;
  height: 256px;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}
.art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.art--rings::before {
  background: repeating-radial-gradient(circle at 50% 50%, rgba(18, 22, 32, 0) 0 19px, rgba(18, 22, 32, .06) 20px, rgba(18, 22, 32, 0) 21px 22px);
  -webkit-mask-image: radial-gradient(58% 62% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(58% 62% at 50% 50%, #000 30%, transparent 100%);
}
.art--dots::before {
  background: radial-gradient(circle, rgba(70, 100, 190, .2) 1px, transparent 1.5px) center / 14px 14px;
  -webkit-mask-image: radial-gradient(62% 70% at 50% 46%, #000 25%, transparent 100%);
          mask-image: radial-gradient(62% 70% at 50% 46%, #000 25%, transparent 100%);
}
.art--tint { background: radial-gradient(70% 80% at 50% 40%, #F2F6FF, rgba(242, 246, 255, 0) 100%); }

/* the stage: drawn at --dw × --dh, scaled down (never up) to fit its tile */
.art__stage {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--dw);
  height: var(--dh, 256px);
  translate: -50% -50%;
  scale: min(1, tan(atan2(calc(100cqw - 20px), var(--dw))));
}
.art .icon { width: 20px; height: 20px; }

/* parts */
.ob {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--il-edge);
  border-radius: 14px;
  box-shadow: var(--il-shadow);
}
.sk { display: block; width: var(--w, 60%); height: 8px; border-radius: 4px; background: var(--il-sk); }
.sk--2 { background: var(--il-sk-2); }
.blue-orb {                                        /* Scribe's soft blue, flat: no sheen, a wide faint glow */
  position: absolute;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--il-blue-hi), var(--il-blue));
  box-shadow: 0 12px 26px -12px rgba(84, 128, 242, .55);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pill .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.pill--amber { background: #FCF0DA; color: #8A5A00; }
.pill--green { background: #E2F3E9; color: #23663F; }
.spark {                                           /* a small four-point star */
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s, 10px); height: var(--s, 10px);
  background: #B7C9F8;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.orb {                                             /* an app, on a white disc */
  position: absolute;
  left: var(--x); top: var(--y);
  width: 46px; height: 46px;
  translate: -50% -50%;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--il-edge);
  box-shadow: 0 10px 22px -14px rgba(22, 34, 70, .3);
}
.orb img { width: 24px; height: 24px; border-radius: 5px; }

/* 1 · watchouts: the live call is read (a scan across its waveform), Scribe
   in the middle, and the watchout that comes out of it */
.stage--watch { --dw: 610px; display: flex; align-items: center; justify-content: center; }
.stage--watch > .ob { position: relative; }
.stage--watch > .ob::after {                       /* a faint violet glow under each card, as in the reference */
  content: '';
  position: absolute;
  left: 16%; right: 16%; bottom: -16px;
  height: 30px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(155, 123, 247, .2), rgba(155, 123, 247, 0));
}
.wcall { width: 178px; padding: 8px 8px 14px; border-radius: 16px; }
.wcall__panel { height: 104px; border-radius: 10px; background: #F4F5F8; display: grid; place-items: center; }
.wbox { position: relative; display: block; }
.wave { display: flex; align-items: center; gap: 4px; height: 60px; }
.wave i { width: 4px; height: calc(var(--h) * 100%); border-radius: 2px; background: #D4D9E2; }
.wave--read { position: absolute; inset: 0; clip-path: inset(0 42% 0 0); }
.wave--read i { background: #2F3747; }
.scan { position: absolute; top: -12px; bottom: -12px; left: 58%; width: 2px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(91, 134, 245, 0), var(--il-blue) 22%, var(--il-violet) 78%, rgba(155, 123, 247, 0)); }
.scan i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--il-blue); opacity: .55; }
.scan i:nth-child(1) { left: -9px; top: 22%; }
.scan i:nth-child(2) { left: -14px; top: 58%; opacity: .35; }
.scan i:nth-child(3) { left: -6px; top: 80%; }
.wcall__t { margin: 12px 6px 0; font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.wcall__s { margin: 4px 6px 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--il-muted); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #E0452F; box-shadow: 0 0 0 3px rgba(224, 69, 47, .14); }
.wire { flex: 0 0 auto; width: 34px; height: 2px; margin: 0 10px; border-radius: 2px; background: linear-gradient(90deg, rgba(155, 123, 247, .1), var(--il-violet) 55%, #7C95F6); }
.wire--out { background: linear-gradient(90deg, #7C95F6, rgba(91, 134, 245, .15)); }
.node {
  position: relative;
  flex: 0 0 auto;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--il-edge);
  color: var(--ink);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .75), 0 12px 26px -14px rgba(80, 100, 200, .4);
}
.node::before {                                    /* the reading arc */
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(155, 123, 247, 0), var(--il-violet) 90deg, var(--il-blue) 150deg, rgba(91, 134, 245, 0) 152deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask-image: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
.node .icon { width: 19px; height: 19px; }
.wflag { width: 222px; padding: 14px 14px 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 9px; }
.wflag__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 1px; }
.wflag__hd b { font-size: 15px; font-weight: 500; }
.wflag__pair { position: relative; display: flex; flex-direction: column; gap: 5px; margin-bottom: 3px; padding: 9px 10px; border-radius: 10px; background: #FCF8F0; border: 1px solid #F4E7CD; }
.wflag__row { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.wflag__row .icon { width: 13px; height: 13px; flex: 0 0 auto; color: var(--il-muted); align-self: center; }
.wflag__row b { font-size: 14px; font-weight: 600; color: var(--ink); }
.wflag__row em { font-style: normal; font-size: 11.5px; color: var(--il-muted); }
.wflag__neq { position: absolute; right: -13px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 1px solid #EFD9AE; color: #B47708; }
.wflag__neq .icon { width: 13px; height: 13px; stroke-width: 2.4; }

/* 2 · no bot: Scribe listening in the middle, the call apps on its axes */
.stage--nobot { --dw: 470px; }
.discs i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 242, 246, 0) 55%, rgba(240, 242, 246, .9)); border: 1px solid rgba(18, 22, 32, .035); }
.discs { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%); mask-image: linear-gradient(180deg, #000 70%, transparent 98%); }
.discs i:nth-child(1) { width: 112px; height: 112px; }
.discs i:nth-child(2) { width: 196px; height: 196px; }
.discs i:nth-child(3) { width: 284px; height: 284px; opacity: .75; }
.axis { position: absolute; }
.axis--h { left: 4%; right: 4%; top: 50%; border-top: 1px dashed #D6DBE4; }
.axis--v { top: 2%; bottom: 2%; left: 50%; border-left: 1px dashed #D6DBE4; }
.listen {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px;
  padding: 0 24px 0 20px;
  border-radius: 999px;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, #82A4FF, #5580F2);
  box-shadow: 0 0 0 7px rgba(130, 164, 255, .12), 0 18px 36px -16px rgba(85, 128, 242, .65);
}
.eq { display: inline-flex; align-items: center; gap: 2.5px; height: 18px; }
.eq i { width: 3px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .92); }
.eq i:nth-child(2) { height: 14px; } .eq i:nth-child(3) { height: 18px; } .eq i:nth-child(4) { height: 11px; } .eq i:nth-child(5) { height: 6px; }
.note { display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 14px; white-space: nowrap; }
.note > img, .note__off { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: #F2F4F7; }
.note > img { padding: 6px; }
.note__off { display: grid; place-items: center; color: #9AA2B1; }
.note__off .icon { width: 15px; height: 15px; }
.note b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.note em { display: block; font-size: 11px; line-height: 1.3; font-style: normal; color: var(--il-muted); }
.note--tr { left: 57%; top: 15%; }
.note--bl { right: 57%; top: 64%; }

/* 3 · languages: one voice, the greetings round it */
.stage--lang { --dw: 370px; }
.lang__core { left: 50%; top: 50%; width: 64px; height: 64px; translate: -50% -50%; box-shadow: 0 0 0 8px rgba(134, 167, 255, .12), 0 14px 28px -12px rgba(84, 128, 242, .55); }
.lang__core .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.say {
  position: absolute;
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--il-edge);
  box-shadow: 0 10px 22px -14px rgba(22, 34, 70, .28);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.say--on { background: #EEF3FF; border-color: #D2DEFD; color: var(--accent-ink); }
.say--on em { margin-right: 7px; padding: 1px 5px; border-radius: 4px; background: var(--white); font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--il-blue); }
.say--more { padding: 2px 8px; background: transparent; border-color: transparent; box-shadow: none; font-size: 11.5px; font-weight: 600; color: var(--il-blue); }

/* 4 · share: pick what goes in, one link, and when it runs out */
.stage--share { --dw: 370px; }
.doc { left: 76px; top: 30px; width: 196px; padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.doc__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.doc__ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #F2F4F7; color: var(--il-muted); }
.doc__ic .icon { width: 15px; height: 15px; }
.doc__row { display: flex; align-items: center; gap: 10px; }
.doc__row:not(.is-in) { opacity: .5; }
.cb { width: 15px; height: 15px; flex: 0 0 auto; border-radius: 4.5px; border: 1.5px solid #CDD3DD; }
.doc__row.is-in .cb { border: 0; background: var(--il-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m3.6 7.2 2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.doc__row.is-in .sk { background: #DDE6FD; }
.linkchip { left: 168px; top: 178px; display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 6px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.linkchip b { font-weight: 600; }
.linkchip__ic { position: static; width: 28px; height: 28px; box-shadow: none; }
.linkchip__ic .icon { width: 14px; height: 14px; stroke-width: 2; }
.art .linkchip__copy { width: 14px; height: 14px; margin-left: 3px; color: var(--il-muted); }
.expchip { left: 206px; top: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.art .expchip .icon { width: 14px; height: 14px; color: var(--il-blue); }

/* 5 · on your device: the files live on the computer, the cloud stays out */
.stage--local { --dw: 370px; }
.laptop { position: absolute; left: 50%; top: 52%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; }
.laptop__screen { position: relative; width: 198px; padding: 16px; border-radius: 12px 12px 5px 5px; display: flex; flex-direction: column; gap: 11px; }
.file { display: flex; align-items: center; gap: 10px; }
.file i { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; background: #EEF3FF; color: var(--il-blue); }
.art .file .icon { width: 14px; height: 14px; }
.laptop__lock { right: -17px; top: -17px; width: 40px; height: 40px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .85), 0 12px 24px -12px rgba(84, 128, 242, .55); }
.art .laptop__lock .icon { width: 17px; height: 17px; stroke-width: 2; }
.laptop__base { position: relative; width: 252px; height: 12px; margin-top: -1px; border-radius: 2px 2px 10px 10px; background: linear-gradient(180deg, #F5F6F8, #E7EAEF); border: 1px solid #E2E5EB; box-shadow: 0 12px 22px -16px rgba(22, 34, 70, .35); }
.laptop__base::after { content: ''; position: absolute; left: 50%; top: 0; width: 46px; height: 4px; translate: -50% 0; border-radius: 0 0 4px 4px; background: #DADEE5; }
.cloud-off { position: absolute; left: 13%; top: 26%; translate: -50% -50%; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed #D2D8E2; background: rgba(255, 255, 255, .85); color: #A9B1C0; }
.art .cloud-off .icon { width: 19px; height: 19px; }

/* 6 · your key: voice mode on your own key, text chat on none */
.stage--key { --dw: 470px; }
.keycard { left: 50%; top: 50%; width: 300px; translate: -50% -50%; padding: 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.keycard__hd { display: flex; align-items: center; gap: 10px; }
.keycard__hd b { flex: 1; font-size: 14.5px; font-weight: 600; }
.keycard__ic { position: static; width: 32px; height: 32px; box-shadow: none; }
.art .keycard__ic .icon { width: 16px; height: 16px; stroke-width: 2; }
.keycard__field { display: flex; align-items: center; gap: 3px; height: 38px; padding: 0 12px; border-radius: 9px; background: #F6F7F9; border: 1px solid var(--il-edge); font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-2); }
.keycard__field i { width: 5px; height: 5px; border-radius: 50%; background: #A3AAB8; }
.keycard__field span:first-child { margin-right: 4px; }
.keycard__field span:last-child { margin-left: 4px; }
.keycard__row { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #EEF0F4; font-size: 13.5px; font-weight: 500; }
.keycard__row em { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--il-muted); }
.keycard__row--soft { color: var(--ink-2); }
.toggle { position: relative; width: 36px; height: 21px; border-radius: 999px; background: var(--il-blue); }
.toggle::after { content: ''; position: absolute; right: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(18, 22, 32, .2); }

/* 7 · insights: the week as bars that fade into the tile, the busiest day
   lit, with a dashed line at its height (after the "You" reference) */
.stage--ins { --dw: 640px; }
.week { z-index: 2; left: 26px; top: 24px; padding: 10px 14px 11px; border-radius: 12px; display: flex; flex-direction: column; gap: 1px; }
.week__k { font-size: 12px; color: var(--il-muted); }
.week__v { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.bars {
  position: absolute;
  left: 50%; bottom: 0;
  width: 470px; height: 198px;
  translate: -50% 0;
  padding-bottom: 28px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}
.bars i {
  position: relative;
  font-style: normal;
  height: calc(var(--v) * 150px + 8px);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #DCE5FD 0%, rgba(220, 229, 253, .6) 55%, rgba(220, 229, 253, 0) 100%);
}
.bars i.is-peak { background: linear-gradient(180deg, #8DACFF 0%, #7D9EFA 42%, rgba(125, 158, 250, .25) 82%, rgba(125, 158, 250, 0) 100%); box-shadow: 0 -12px 32px -16px rgba(91, 134, 245, .5); }
.bars em { position: absolute; left: 50%; bottom: -24px; translate: -50% 0; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--il-muted); }
.bars__line { position: absolute; left: -64px; right: -64px; top: 12px; border-top: 1.5px dashed rgba(91, 134, 245, .32); }
.bars__dot { position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; translate: -50% 0; border-radius: 50%; background: var(--white); border: 2px solid #7D9EFA; }
.bars__tip { position: absolute; left: 50%; top: -16px; translate: -50% -100%; padding: 6px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--il-edge); box-shadow: 0 10px 24px -14px rgba(22, 34, 70, .32); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bars s { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.bars s:nth-of-type(1) { left: 30%; top: 24px; }
.bars s:nth-of-type(2) { left: 64%; top: 46px; width: 2px; height: 2px; }
.bars s:nth-of-type(3) { left: 42%; top: 72px; }
.bars s:nth-of-type(4) { left: 70%; top: 98px; width: 2px; height: 2px; }

/* motion: the scan reads the call, the arc turns, Scribe listens, the
   greetings drift — all off with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .wave--read { animation: read 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
  .scan { animation: scan 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
  .node::before { animation: spin 2.6s linear infinite; }
  .eq i { animation: eq 1.1s ease-in-out infinite; transform-origin: center; }
  .eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
  .eq i:nth-child(4) { animation-delay: -.15s; } .eq i:nth-child(5) { animation-delay: -.45s; }
  .say { animation: drift 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .bars s { animation: twinkle 2.4s ease-in-out infinite; }
  .bars s:nth-of-type(2) { animation-delay: -.8s; } .bars s:nth-of-type(3) { animation-delay: -1.5s; } .bars s:nth-of-type(4) { animation-delay: -2s; }
}
@keyframes read {
  0%        { clip-path: inset(0 100% 0 0); opacity: 1; }
  76%, 88%  { clip-path: inset(0 0 0 0); opacity: 1; }
  100%      { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes scan {
  0%   { left: 0; opacity: 0; }
  8%   { opacity: 1; }
  76%  { left: 100%; opacity: 1; }
  86%, 100% { left: 100%; opacity: 0; }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes eq { 50% { transform: scaleY(.45); } }
@keyframes drift { 50% { transform: translateY(-3px); } }
@keyframes twinkle { 50% { opacity: .25; } }

/* ── integrations: words left, tile board right (round 6) ──────────────────
   Two columns: the heading, one line, three chips and the button on the left;
   on the right a square board of rounded tiles — the Scribe mark in the
   middle cell, a connector's logo in the cells that name one, an empty well
   in the rest. main.js renders the cells and gives each its distance from the
   middle as --o (the opacity it rests at: the rim is ghostly) and --d (its
   entrance delay, so the board opens outward from the mark). */
.integ__layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 104px);
}
.integ__copy { display: flex; flex-direction: column; align-items: flex-start; }
.integ__copy .h2 { max-width: 15ch; text-wrap: balance; }
.integ__copy .lead { margin-top: 20px; max-width: 36ch; }
.integ__copy .chips { margin-top: 26px; }
.integ__actions { margin-top: 30px; }

.integ__art { position: relative; width: 100%; max-width: 620px; margin-inline: auto; }
.igrid {
  --n: 7;
  --gap: clamp(5px, 1.35vw, 14px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--gap);
  isolation: isolate;
  -webkit-user-select: none;
          user-select: none;
}
/* a soft blue light behind the mark */
.igrid::before {
  content: '';
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(134, 167, 255, .34), rgba(134, 167, 255, .1) 58%, rgba(134, 167, 255, 0));
}
.igrid__cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 26%;
  background: rgba(18, 22, 32, .028);                 /* an empty well */
  opacity: var(--o, 1);
  transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease-out) var(--d, 0ms),
              box-shadow .3s var(--ease);
}
.igrid__cell.has-logo {
  background: var(--white);
  box-shadow: 0 0 0 1px var(--il-edge), 0 1px 2px rgba(22, 34, 70, .04), 0 14px 26px -18px rgba(22, 34, 70, .3);
}
.igrid__cell.has-logo img { width: 50%; height: 50%; object-fit: contain; pointer-events: none; }
.igrid__cell.is-core {
  z-index: 2;
  box-shadow:
    0 0 30px rgba(90, 135, 242, .5),
    0 0 70px rgba(90, 135, 242, .26),
    0 22px 46px -18px rgba(31, 67, 176, .55);
}
.igrid__cell.is-core img { width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }

/* without script nothing renders the tiles, so the words stand alone */
.no-js .integ__art { display: none; }
.no-js .integ__layout { grid-template-columns: minmax(0, 1fr); }

/* the board opens outward from the mark */
html:not(.no-js) .integ__art.reveal .igrid__cell { opacity: 0; transform: scale(.86); }
html:not(.no-js) .integ__art.reveal.is-in .igrid__cell { opacity: var(--o, 1); transform: none; }

/* hover: a tile comes forward and says its name */
.igrid__cell.has-logo:hover {
  z-index: 5;
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--il-edge), 0 2px 4px rgba(22, 34, 70, .05), 0 22px 34px -16px rgba(22, 34, 70, .36);
  transition-delay: 0ms;
}
.igrid__label {
  position: absolute;
  left: 50%; top: calc(100% + 8px);
  translate: -50% 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.igrid__cell.has-logo:hover .igrid__label { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .igrid__cell.is-core { animation: igrid-glow 4.2s ease-in-out infinite; }
}
@keyframes igrid-glow {
  50% { box-shadow: 0 0 40px rgba(90, 135, 242, .62), 0 0 90px rgba(90, 135, 242, .34), 0 22px 46px -18px rgba(31, 67, 176, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .igrid__cell { transition: none; }
  html:not(.no-js) .integ__art.reveal .igrid__cell { opacity: var(--o, 1); transform: none; }
}

/* ── questions ───────────────────────────────────────────────────────────── */
.faq-grid { margin-top: clamp(30px, 3.6vw, 48px); }

/* ── the last call to action ─────────────────────────────────────────────── */
.end-cta {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-xl);
  padding: clamp(56px, 7vw, 96px) 24px;
  text-align: center;
  background: var(--surface);
}
.end-cta__bg { border-radius: inherit; z-index: -1; }
.end-cta .h2 { margin-bottom: 28px; }

/* the small picture over the heading (round 4), in the bento's style */
.cta-art {
  position: relative;
  width: 360px;
  max-width: 100%;
  height: 120px;
  margin: 0 auto 26px;
}
.cta-art__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cta-art__wires path { fill: none; stroke: #9DB6F4; stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.cta-art__rings { position: absolute; left: 50%; top: 50%; }
.cta-art__rings i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(45, 91, 227, .16); background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .5)); transform: translate(-50%, -50%); }
.cta-art__rings i:nth-child(1) { width: 112px; height: 112px; }
.cta-art__rings i:nth-child(2) { width: 164px; height: 164px; opacity: .6; }
/* the mark as it is in the nav — Wave-K on its ink tile — with a soft blue
   glow instead of the glossy tile */
.cta-art__core { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; translate: -50% -50%; border-radius: 15px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(18, 22, 32, .07), 0 0 0 7px rgba(255, 255, 255, .7), 0 16px 34px -14px rgba(84, 128, 242, .55); }
.cta-art__core img { display: block; width: 100%; height: 100%; }
.cta-art__call { left: 36px; top: 50%; }
.cta-art__rec { position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; border-radius: 50%; background: #E0452F; box-shadow: 0 0 0 3px #fff; }
.cta-art__note {
  position: absolute;
  right: 0; top: 50%;
  width: 92px;
  padding: 12px 11px;
  display: flex; flex-direction: column; gap: 7px;
  border-radius: 11px;
  background: var(--white);
  box-shadow: var(--soft-shadow);
  transform: translateY(-50%) rotate(4deg);
}
.cta-art__note .sk { height: 6px; }
.cta-art__tick { position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 3px #fff; }
.cta-art__tick .icon { width: 12px; height: 12px; stroke-width: 2.8; }
@media (prefers-reduced-motion: no-preference) {
  .cta-art__wires path { animation: wire 1.6s linear infinite; }
  .cta-art__rec { animation: rec 1.8s ease-in-out infinite; }
}
@keyframes rec { 50% { opacity: .35; } }
.end-cta__actions { display: flex; justify-content: center; }
.end-cta__note { margin-top: 16px; font-size: 13px; color: var(--ink); }   /* ink, not ink-2: it sits on the blue (8:1 against it, 3.5:1 for ink-2) */