:root {
  --paper: #f3f0e9;
  --paper-deep: #e7e0d4;
  --ink: #171714;
  --muted: #6c6962;
  --line: rgba(23, 23, 20, 0.14);
  --brass: #b8833c;
  /* Brass as TEXT failed contrast at 2.91:1 on paper — below AA, and below even
     the large-text threshold — while carrying every eyebrow, the em half of the
     hero H1 and the price. --brass is still correct for borders, outlines, fills
     and large surfaces; anything you read uses --brass-text (4.93:1). */
  --brass-text: #8a5f24;
  --brass-light: #e2c58e;
  --cream: #faf8f3;
  --green: #5e7665;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell: min(1380px, calc(100vw - 80px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Opt out of Chrome Android's auto dark theme, which algorithmically inverts
     pages that declare no scheme. This design is explicitly light everywhere. */
  color-scheme: only light;
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; overflow-x: hidden; }
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body.no-scroll { overflow: hidden; }
main, section { min-width: 0; max-width: 100%; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
::selection { background: var(--brass-light); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 18px; top: 18px; z-index: 1000; padding: 10px 16px;
  background: var(--ink); color: #fff; transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.announcement {
  height: 32px; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 24px; background: var(--ink); color: rgba(255,255,255,.82); font-size: 11px;
  letter-spacing: .02em; position: relative; z-index: 50;
}
.announcement-logo { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }
.announcement span { color: var(--brass-light); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.announcement p { margin: 0; }
.announcement a { border-bottom: 1px solid rgba(255,255,255,.35); }

.site-header {
  width: 100%; height: 76px; padding: 0 max(36px, calc((100vw - 1380px) / 2)); display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 40;
  background: rgba(243, 240, 233, .86); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.brand img { width: 144px; height: auto; }
.desktop-nav { display: flex; gap: 34px; font-size: 13px; }
.desktop-nav a { position: relative; color: #45443f; }
.desktop-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--ink);
  transition: right .35s var(--ease);
}
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { right: 0; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
/* Log in — the entrance to the product, beside (not instead of) the entrance to
   the store. Deliberately quiet: buying the pen is still the primary act here,
   and an existing customer already knows to look for this. Same underline sweep
   as the primary nav so it reads as navigation rather than a second CTA. */
.desktop-nav .nav-teams { color: var(--brass-text); font-weight: 600; }
.bag-button {
  border: 0; background: transparent; padding: 12px 10px; cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
}
.bag-emoji { font-size: 14px; line-height: 1; filter: grayscale(1); }
.bag-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 1px; padding: 0 5px;
  border: 1px solid var(--line); border-radius: 20px; font-size: 10px;
}

.button {
  min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 100px; display: inline-flex;
  align-items: center; justify-content: center; gap: 14px; font-weight: 650; font-size: 13px; letter-spacing: -.01em;
  cursor: pointer; transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
/* None of the page's calls to action had a focus state, so keyboard users got the
   UA ring — which on a --ink button is black on black in Safari and Firefox. */
.button:focus-visible,
.text-button:focus-visible,
.faq-item button:focus-visible,
.menu-button:focus-visible,
.mobile-menu a:focus-visible,
.site-footer a:focus-visible,
.hero-film-sound:focus-visible,
[data-proof-scroll]:focus-visible { outline: 3px solid var(--brass-text); outline-offset: 3px; }
/* On dark or brass surfaces the dark ring disappears; use the light brass there. */
.button-dark:focus-visible,
.closing-cta .button:focus-visible,
.site-footer a:focus-visible,
.hero-film-sound:focus-visible { outline-color: var(--brass-light); }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: var(--brass); }
.button-light { background: var(--cream); color: var(--ink); }
.button-outline { border-color: var(--ink); background: transparent; }
.button-outline:hover { background: var(--paper-deep); }
.button-large { min-height: 58px; padding: 0 30px; font-size: 14px; }
.button-full { width: 100%; border-radius: 8px; }
.header-cta { min-height: 42px; padding: 0 20px; }

.menu-button { display: none; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; padding: 12px 8px; }
.menu-button span:not(.sr-only) { display: block; height: 1px; background: var(--ink); margin: 5px 0; transition: .25s; }
.mobile-menu { display: none; }
.section-shell { width: var(--shell); margin-inline: auto; }
section[id] { scroll-margin-top: 24px; }

.hero {
  min-height: min(650px, calc(100svh - 108px)); padding-block: clamp(24px, 2.8vw, 38px); display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(520px, 1.28fr); align-items: center; gap: clamp(24px, 2.4vw, 38px);
}
.hero-copy { padding-left: 0; position: relative; z-index: 3; }
.eyebrow {
  margin: 0 0 16px; color: var(--brass-text); font-size: 11px; font-weight: 750; letter-spacing: .19em;
  text-transform: uppercase; display: flex; align-items: center; gap: 10px;
}
.eyebrow-light { color: var(--brass-light); }
.closing-cta .eyebrow-light { color: rgba(255, 255, 255, .92); }
.live-dot { width: 7px; height: 7px; background: var(--brass); border-radius: 50%; box-shadow: 0 0 0 5px rgba(184,131,60,.12); }
.hero h1, .section-intro h2, .film-copy h2, .product-copy h2, .closing-cta h2, .film-modal h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.06em; line-height: .89; margin: 0;
}
.hero h1 { font-size: clamp(48px, 3.9vw, 66px); line-height: .93; }
.hero h1 em { font-weight: 400; color: var(--brass-text); }
.hero-deck {
  max-width: 525px; margin: 16px 0 18px; font-size: clamp(15px, 1vw, 17px); line-height: 1.5; color: #52504a;
  letter-spacing: -.025em;
}
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.text-button {
  border: 0; padding: 10px 0; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 650;
}
.play-icon { font-size: 9px; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; }
.hero-meta { display: flex; gap: 0; margin-top: 18px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.hero-meta span { padding: 0 18px; border-left: 1px solid var(--line); }
.hero-meta span:first-child { padding-left: 0; border-left: 0; }

.hero-mobile-film-card { display: none; }
.hero-mobile-sound { display: none; }

.hero-visual {
  min-height: 570px; position: relative; display: grid; place-items: center; isolation: isolate;
  border: 0; border-radius: 34px; background: transparent; box-shadow: none;
}
.hero-visual::before {
  content: ""; position: absolute; inset: 8% 3%; border: 1px solid rgba(184,131,60,.12); border-radius: 50%;
  background: radial-gradient(circle, rgba(244,226,196,.48), rgba(244,226,196,0) 67%); transform: scale(.92); z-index: -1;
}
/* Square. Rounded video surfaces were the thing that read as generic. */
.hero-photo-frame {
  width: min(96%, 720px); aspect-ratio: 1800 / 1005; position: relative; z-index: 1; overflow: hidden;
  border: 0; border-radius: 0; background: #f7f3eb; box-shadow: 0 34px 80px rgba(47,39,29,.11);
}
.hero-photo-frame img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
  filter: saturate(.96) contrast(.99);
}
.hero-film-visual.hero-visual {
  min-height: 0; display: block; overflow: visible; border-radius: 0; background: transparent;
}
.hero-film-visual.hero-visual::before { display: none; }
.hero-film-frame.hero-photo-frame {
  width: 100%; max-width: none; aspect-ratio: 16 / 9; border-radius: 0; background: #11110f;
  box-shadow: 0 30px 70px rgba(34,29,23,.16);
}
.hero-product-film {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; border: 0;
  background: #11110f;
}
.hero-film-sound {
  position: absolute; right: 16px; bottom: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
  background: rgba(18,17,15,.82); color: #fff; box-shadow: 0 8px 24px rgba(22,19,15,.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer;
  font: 650 12px/1 Arial, sans-serif; letter-spacing: .01em;
}
.hero-film-sound:active { transform: scale(.97); }
.hero-mobile-sound-icon { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.hero-mobile-sound-icon span,
.hero-mobile-sound-icon i,
.hero-mobile-sound-icon b {
  display: block; width: 2px; border-radius: 999px; background: currentColor; font: inherit;
}
.hero-mobile-sound-icon span { height: 7px; }
.hero-mobile-sound-icon i { height: 13px; }
.hero-mobile-sound-icon b { height: 9px; }
.hero-film-sound[aria-pressed="true"] {
  background: rgba(255,255,255,.9); color: #171612; border-color: rgba(23,22,18,.1);
}
.hero-glow {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(226,197,142,.6), rgba(226,197,142,0) 66%);
  filter: blur(20px); z-index: -1; animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.08); opacity: .7; } }
.floating-note {
  position: absolute; z-index: 3; padding: 14px 17px; display: flex; align-items: center; gap: 13px;
  min-width: 178px; border: 1px solid rgba(255,255,255,.62); border-radius: 12px; background: rgba(250,248,243,.87);
  box-shadow: 0 18px 50px rgba(32,28,23,.12); backdrop-filter: blur(12px);
}
.floating-note small, .floating-note strong { display: block; }
.floating-note small { font-size: 9px; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); margin-bottom: 2px; }
.floating-note strong { font-family: var(--serif); font-size: 15px; font-weight: 600; }
.note-capture { left: -3%; top: 27%; animation: float 5s ease-in-out infinite; }
.note-memory { right: -3%; top: 39%; animation: float 5s .7s ease-in-out infinite; }
.note-email { right: 0; bottom: 10%; animation: float 5s 1.1s ease-in-out infinite; }
.note-meeting { left: -1%; bottom: 9%; animation: float 5s 1.8s ease-in-out infinite; }
.note-symbol {
  width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 50%; background: #efe3cf; color: var(--brass-text); font-size: 14px; font-weight: 750;
}
.note-symbol-calendar { border-radius: 8px; background: var(--ink); color: var(--brass-light); font-size: 10px; }
@keyframes float { 50% { transform: translateY(-12px); } }
.check { width: 28px; height: 28px; display: grid; place-items: center; background: var(--green); color: #fff; border-radius: 50%; }
.wave { height: 28px; display: flex; align-items: center; gap: 2px; }
.wave i { width: 2px; height: 6px; background: var(--brass); border-radius: 3px; animation: wave 1.2s infinite ease-in-out; }
.wave i:nth-child(2) { animation-delay: .12s; }.wave i:nth-child(3) { animation-delay: .24s;}.wave i:nth-child(4) { animation-delay: .36s;}.wave i:nth-child(5) { animation-delay: .48s;}
@keyframes wave { 50% { height: 24px; } }
.hero-caption { position: absolute; right: 3%; top: 8%; text-align: right; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 12px; }

.media-hit-target { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.media-hit-target:focus-visible { outline: 3px solid var(--brass-light); outline-offset: -8px; }
.film-strip::after { pointer-events: none; }

.principle-band {
  height: 92px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; gap: clamp(30px, 6vw, 100px);
  font-family: var(--serif); font-size: clamp(17px, 2vw, 28px); letter-spacing: -.02em;
}
.principle-band p { margin: 0; }
.principle-band span { color: var(--brass-text); }

/* Trusted-by logo marquee. Each track animates -100% of its OWN width, so the strip only
   reads as continuous while the viewport is narrower than the tracks either side of it —
   hence three, not two. Track padding is half the item gap so the seam spaces evenly. */
.trusted { padding-block: clamp(64px, 5.6vw, 92px) clamp(10px, 1.6vw, 22px); overflow: hidden; }
.trusted-title { width: var(--shell); margin: 0 auto; font-family: var(--serif); font-size: clamp(27px, 3vw, 42px); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; text-align: center; }
.logo-marquee { display: flex; margin-top: clamp(36px, 3.6vw, 52px); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(50px, 5.6vw, 88px); margin: 0; padding-inline: clamp(25px, 2.8vw, 44px); list-style: none; animation: marquee 44s linear infinite; }
.logo-track img { display: block; width: clamp(116px, 11vw, 162px); height: auto; opacity: .5; filter: grayscale(1); transition: opacity .4s var(--ease), filter .4s var(--ease); }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track img:hover { opacity: 1; filter: none; }

.awards { padding-block: clamp(82px, 6.5vw, 112px); }
.awards-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 80px; align-items: end; }
.awards-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(52px, 6vw, 96px); font-weight: 400; line-height: .92; letter-spacing: -.055em; }
.awards-heading h2 em { color: var(--brass-text); font-weight: 400; }
.awards-heading > p { max-width: 470px; margin: 0 0 7px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.awards-grid { margin-top: clamp(48px, 5vw, 68px); display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(250,248,243,.6); }
.award-card { min-width: 0; min-height: 420px; padding: 30px 23px; border-right: 1px solid var(--line); display: grid; grid-template-rows: 210px 1fr; align-content: stretch; gap: 28px; overflow: hidden; transition: background .35s, transform .35s var(--ease); }
.award-card:last-child { border-right: 0; }
.award-card:hover { background: var(--cream); transform: translateY(-5px); }
.award-card small { color: var(--brass-text); font-size: 8px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.award-card h3 { margin: 7px 0 0; font-family: var(--serif); font-size: clamp(19px, 1.65vw, 26px); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; }
.award-card p { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.award-logo { min-width: 0; width: 100%; height: 210px; padding: 8px 0; position: relative; overflow: hidden; }
.award-logo img {
  display: block; position: absolute; inset: 0; margin: auto;
  width: auto !important; height: auto !important;
  max-width: 92% !important; max-height: 194px !important;
  object-fit: contain; object-position: center; filter: saturate(.96);
}
.award-logo-wide img { max-width: 100% !important; }
.award-card > div:last-child { min-width: 0; position: relative; z-index: 1; align-self: start; }

.story, .how, .proof, .intelligence, .details, .faq { padding-block: clamp(84px, 7vw, 124px); }
.section-intro { max-width: 830px; }
.section-intro h2 { font-size: clamp(58px, 7vw, 112px); }
.section-lead {
  max-width: 570px; margin: 35px 0 0 auto; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.6; color: #56534d; letter-spacing: -.02em;
}

.process-grid { margin-top: clamp(58px, 6vw, 82px); display: grid; grid-template-columns: .86fr 1.28fr .86fr; gap: 18px; align-items: stretch; }
.process-card { min-height: 500px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(250,248,243,.55); display: flex; flex-direction: column; }
.process-number { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
.process-card h3 { font-family: var(--serif); font-size: 42px; font-weight: 400; margin: auto 0 8px; letter-spacing: -.04em; }
.process-card p { margin: 0; color: var(--muted); font-size: 14px; }
.process-icon { margin: auto; }
.capture-icon { height: 110px; display: flex; align-items: center; gap: 9px; }
.capture-icon span { display: block; width: 6px; height: 25px; background: var(--brass); border-radius: 10px; animation: capture 1.4s ease-in-out infinite; }
.capture-icon span:nth-child(2), .capture-icon span:nth-child(5) { animation-delay: .1s; }
.capture-icon span:nth-child(3), .capture-icon span:nth-child(4) { animation-delay: .2s; }
@keyframes capture { 50% { height: 90px; } }
.process-feature { position: relative; padding: 0; overflow: hidden; background: #e9e1d4; }
.process-feature video { height: 64%; width: 100%; object-fit: cover; background: #eee; }
.process-feature-copy { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 28px; align-items: start; pointer-events: none; }
.process-feature-copy h3 { margin: 0; }
.process-feature-copy p { grid-column: 2; }
.process-remember {
  background: radial-gradient(circle at 50% 40%, rgba(101,71,43,.88) 0, rgba(57,45,32,.82) 27%, rgba(25,23,19,.96) 62%, #11110f 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
}
.process-remember h3 { color: #fff; }
.process-remember p { color: rgba(255,255,255,.72); }
.remember-visual {
  position: relative; flex: 1; display: grid; place-items: center; overflow: hidden; isolation: isolate;
}
.remember-visual img {
  position: relative; z-index: 2; width: clamp(62px, 8vw, 96px); height: auto; max-height: 78%; object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.4));
}
.remember-orbit {
  position: absolute; left: 50%; top: 50%; border: 1px solid rgba(226,197,142,.22); border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
}
.remember-orbit-outer { width: min(82%, 320px); aspect-ratio: 1; animation: remember-spin 26s linear infinite; }
.remember-orbit-inner { width: min(34%, 130px); aspect-ratio: 1; animation: remember-spin 9s linear infinite reverse; }
.remember-orbit-mid { width: min(58%, 225px); aspect-ratio: 1; animation: remember-spin 16s linear infinite; }
@keyframes remember-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Each body is a child of its ring, pinned to a point on the ring's edge, so the
   ring's own rotation carries it around. Radius is therefore always exactly the
   ring's radius at any container size — the previous version used translateX(41%),
   which resolves against the 7px dot rather than the container, so the bodies
   orbited at roughly 3px and read as jitter rather than motion. */
.remember-dot {
  position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%; background: var(--brass-light);
  box-shadow: 0 0 8px 2px rgba(226,197,142,.3);
}
.remember-dot-sm { width: 5px; height: 5px; opacity: .8; }
.at-3  { top: 50%; left: 100%; transform: translate(-50%, -50%); }
.at-9  { top: 50%; left: 0;    transform: translate(-50%, -50%); }
.at-12 { top: 0;   left: 50%;  transform: translate(-50%, -50%); }
.at-6  { top: 100%; left: 50%; transform: translate(-50%, -50%); }
.action-stack { margin: auto 0; display: grid; gap: 10px; }
.action-stack > span { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--cream); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; font-size: 11px; box-shadow: 0 7px 22px rgba(32,28,23,.07); transform: rotate(-2deg); }
.action-stack > span:nth-child(2) { transform: rotate(1deg) translateX(12px); }.action-stack > span:nth-child(3) { transform: rotate(-1deg) translateX(4px); }
.action-stack > span > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; font-weight: 620; }
.action-stack > span > i { display: inline-grid; place-items: center; width: 17px; height: 17px; background: var(--green); color: #fff; border-radius: 50%; font-style: normal; font-size: 9px; }
.action-brand { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: 0 0 auto; }
.action-brand svg { width: 21px; height: 21px; display: block; overflow: visible; }
.action-brand-pair { width: 35px; }
.action-brand-pair svg { width: 17px; height: 17px; }
.action-brand-trio { width: 46px; }
.action-brand-trio svg { width: 15px; height: 15px; }
.process-agentic { border-color: #302c25; background: radial-gradient(circle at 70% 16%, #4a3a25 0, #1a1916 44%, #11110f 100%); color: #fff; }
.process-agentic .process-number { border-color: rgba(255,255,255,.2); color: var(--brass-light); }
.process-vera { width: clamp(92px, 9vw, 126px); height: auto; margin: 10px auto -8px; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(0,0,0,.28)); }
.process-agentic h3 { display: flex; align-items: baseline; gap: .28em; flex-wrap: nowrap; white-space: nowrap; }
.process-agentic h3 em { color: var(--brass-light); font-size: .48em; font-weight: 400; letter-spacing: -.02em; }
.process-agentic p { color: rgba(255,255,255,.58); }
.process-agentic .action-stack > span { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: rgba(255,255,255,.88); box-shadow: 0 12px 34px rgba(0,0,0,.2); backdrop-filter: blur(8px); }

.zoom-story {
  height: 250vh; position: relative; background: var(--paper); --zoom-progress: 0; --zoom-scale: .58;
}
.zoom-sticky {
  height: 100svh; min-height: 680px; position: sticky; top: 0; display: grid; place-items: center; overflow: hidden;
  perspective: 1200px;
}
/* Wide enough for "One morning brief." to hold one line. At 900px it wrapped to
   three lines and the last one sat underneath the laptop frame. */
.zoom-copy {
  position: absolute; z-index: 1; top: 7%; left: 50%; width: min(1180px, calc(100% - 40px)); text-align: center;
  transform: translateX(-50%) translateY(calc(var(--zoom-progress) * -80px));
  opacity: calc(1 - (var(--zoom-progress) * 2.6)); will-change: transform, opacity;
}
.zoom-copy .eyebrow { justify-content: center; margin-bottom: 14px; }
.zoom-copy h2 {
  margin: 0; font-family: var(--serif); font-size: clamp(46px, 6.4vw, 104px); font-weight: 400; line-height: .92;
  letter-spacing: -.055em;
}
.zoom-copy h2 em { color: var(--brass-text); font-weight: 400; }
.zoom-copy > p:last-child { margin: 22px 0 0; color: var(--muted); font-size: 12px; }
.zoom-frame {
  width: 100vw; height: 100svh; min-height: 680px; position: relative; z-index: 2; overflow: hidden; background: #efede8;
  border: 1px solid rgba(23,23,20,.22); border-radius: calc(34px * (1 - var(--zoom-progress)));
  box-shadow: 0 calc(50px * (1 - var(--zoom-progress))) 100px rgba(40,31,22,calc(.22 * (1 - var(--zoom-progress))));
  transform: translateY(calc((1 - var(--zoom-progress)) * 18vh)) scale(var(--zoom-scale)) rotateX(calc((1 - var(--zoom-progress)) * 12deg));
  transform-origin: 50% 52%; will-change: transform, border-radius;
}
.zoom-frame > img:not(.zoom-pen) { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.zoom-browser-bar {
  position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 46px; padding: 0 16px; display: flex;
  align-items: center; gap: 7px; background: rgba(238,236,231,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px);
  opacity: calc(1 - (var(--zoom-progress) * 1.6));
}
.zoom-browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: #c7c1b7; }
.zoom-browser-bar span:first-child { background: #c56d5e; }.zoom-browser-bar span:nth-child(2) { background: #d3aa54; }.zoom-browser-bar span:nth-child(3) { background: #708f70; }
.zoom-wash {
  position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,16,14,.9), rgba(16,16,14,.25) 55%, rgba(16,16,14,.05));
  opacity: clamp(0, calc((var(--zoom-progress) - .5) * 2.4), .88); pointer-events: none;
}
.zoom-message {
  position: absolute; z-index: 3; left: clamp(28px, 8vw, 125px); bottom: clamp(45px, 10vh, 110px); color: #fff;
  opacity: clamp(0, calc((var(--zoom-progress) - .55) * 3), 1);
  transform: translateY(calc((1 - var(--zoom-progress)) * 50px));
}
.zoom-message span { color: var(--brass-light); font-size: 10px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.zoom-message strong { display: block; margin-top: 12px; font-family: var(--serif); font-size: clamp(52px, 7vw, 115px); font-weight: 400; line-height: .86; letter-spacing: -.055em; }
.zoom-pen {
  position: absolute; z-index: 3; right: clamp(18px, 9vw, 140px); bottom: -24%; height: 104%; width: auto;
  transform: translateY(calc((1 - var(--zoom-progress)) * 42%)) rotate(calc(25deg - (var(--zoom-progress) * 13deg)));
  transform-origin: center bottom; filter: drop-shadow(0 40px 34px rgba(0,0,0,.35)); opacity: clamp(0, calc((var(--zoom-progress) - .25) * 2), 1);
}
.zoom-laptop-base { position: absolute; z-index: 1; left: 50%; top: 81%; width: min(78vw, 1180px); height: 38px; border-radius: 4px 4px 32px 32px; background: linear-gradient(180deg, #cbc9c5, #7e7d7a 48%, #b8b7b3); box-shadow: 0 28px 55px rgba(43,36,28,.24); transform: translateX(-50%) scaleX(calc(.78 + (var(--zoom-progress) * .22))); transform-origin: center top; opacity: calc(1 - (var(--zoom-progress) * 1.65)); pointer-events: none; }
.zoom-laptop-base::before { content: ""; position: absolute; inset: 0; clip-path: polygon(4% 0,96% 0,100% 100%,0 100%); background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.zoom-laptop-base span { position: absolute; top: 0; left: 50%; width: 13%; height: 7px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #777672; }
.scroll-cue {
  position: absolute; z-index: 6; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center;
  gap: 9px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .16em;
  opacity: calc(1 - (var(--zoom-progress) * 2.4));
}
.scroll-cue span { width: 1px; height: 25px; background: var(--brass); animation: scrollCue 1.5s ease-in-out infinite; }
@keyframes scrollCue { 50% { transform: scaleY(.45); transform-origin: bottom; } }

.workspace-section { padding-block: clamp(76px, 6vw, 104px); background: var(--ink); color: #fff; overflow: hidden; }
.app-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.app-heading .section-lead { color: rgba(255,255,255,.57); margin: 0 0 6px; }
.workspace-showcase { width: min(1320px, calc(100vw - 64px)); margin: clamp(48px, 5vw, 68px) auto 0; }

.app-stage { display: grid; justify-items: center; gap: clamp(36px, 4vw, 62px); }



/* Straight on, no tilt. Phones move with the drag one-for-one and settle on the nearest
   screen when you let go — a threshold that fires mid-gesture feels arbitrary, because
   from the hand's point of view it is. Index-driven and wrapping, so there is no first or
   last. Without JavaScript it falls back to a plain wrapped row with every screen visible. */
.app-deck { --phone-w: clamp(158px, 13.5vw, 202px); --phone-h: calc(var(--phone-w) * 2532 / 1170); display: grid; justify-items: center; gap: clamp(16px, 1.8vw, 26px); width: 100%; }
.app-stagearea { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.app-phone { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; }
/* Without this the browser starts its own image drag on pointerdown and cancels every
   pointer event after the first — one pointermove arrives, no pointerup ever does, and the
   deck sits still while you drag it. This is the other half of "the drag is stuck". */
.app-phone img { display: block; width: var(--phone-w); height: auto; border-radius: 22px; background: #f7f4ef; -webkit-user-drag: none; user-select: none; }
.app-phone:focus-visible { outline: 3px solid var(--brass-light); outline-offset: 6px; border-radius: 26px; }

.js .app-stagearea { display: block; position: relative; height: calc(var(--phone-h) + 34px); touch-action: pan-y; cursor: grab; }
.js .app-stagearea.is-dragging { cursor: grabbing; }
.js .app-phone {
  position: absolute; left: 50%; top: 50%; z-index: var(--z, 0); opacity: var(--op, 0); pointer-events: var(--hit, none);
  transform: translate(-50%, -50%) translateX(calc(var(--x, 0) * var(--phone-w))) scale(var(--s, .8));
  transition: transform .45s var(--ease), opacity .45s var(--ease), filter .45s var(--ease);
  filter: saturate(calc(.5 + .5 * var(--lit, 0)));
}
/* While a finger is down the phones track it exactly; a transition would lag behind. */
.js .app-stagearea.is-dragging .app-phone { transition: none; }
.js .app-phone img { border-radius: 24px; box-shadow: 0 0 0 6px #17171a, 0 0 0 7px rgba(255,255,255,.13), 0 24px 50px rgba(0,0,0,.46); }
.js .app-phone.is-active { cursor: default; }

.app-dots { display: none; }
.js .app-dots { display: flex; gap: 7px; }
.app-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.24); transition: background .3s, transform .3s; cursor: pointer; }
.app-dots i.is-on { background: var(--brass-light); transform: scale(1.35); }

.app-deck-caption { margin: 0; max-width: 430px; text-align: center; }
.app-deck-caption b { display: block; margin-bottom: 5px; color: #fff; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.app-deck-caption span { color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.6; }

/* Laptop left, monitor right — the point of the pair is that a visitor should not have to
   read a caption to learn Scriben runs on both. Both are drawn in CSS around the same
   screenshots; the silhouettes carry the meaning, so no device photography is needed. */
.desk { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 54px); align-items: end; width: min(100%, 980px); }
.device { margin: 0; display: grid; justify-items: center; }
.device-screen { width: 100%; padding: 9px 9px 0; background: linear-gradient(180deg, #303035, #202024); }
.device-screen img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 1041; object-fit: cover; object-position: top center; background: #fff; }

/* Laptop: a deep chin, then a wider deck that tapers away from the viewer. */
.device-laptop .device-screen { border-radius: 11px 11px 0 0; padding-bottom: 16px; }
.device-hinge { width: 116%; height: 13px; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #34343a, #17171a); clip-path: polygon(0 0, 100% 0, 97.4% 100%, 2.6% 100%); }
.device-hinge::after { content: ""; display: block; width: 13%; height: 3px; margin: 0 auto; border-radius: 0 0 4px 4px; background: rgba(255,255,255,.16); }

/* Monitor: thin bezel, a neck, and a foot wide enough to look like it could stand. */
.device-monitor .device-screen { border-radius: 8px; padding-bottom: 9px; }
.device-neck { width: 13%; height: 34px; background: linear-gradient(90deg, #202024, #3a3a40 45%, #202024); }
.device-foot { width: 42%; height: 9px; border-radius: 5px; background: linear-gradient(180deg, #34343a, #1a1a1d); box-shadow: 0 12px 26px rgba(0,0,0,.5); }

.proof { position: relative; }
.proof-heading {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(40px, 8vw, 130px); align-items: end;
}
.proof-heading h2 {
  margin: 0; font-family: var(--serif); font-size: clamp(58px, 7vw, 112px); font-weight: 400;
  line-height: .9; letter-spacing: -.06em;
}
.proof-heading h2 em { color: var(--brass-text); font-weight: 400; }
.proof-heading > p { max-width: 520px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.55; }
.proof-group { margin-top: clamp(62px, 7vw, 104px); }
.proof-group-title {
  margin-bottom: 26px; padding-top: 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(240px, .8fr);
  gap: 20px; align-items: end; border-top: 1px solid var(--line);
}
.proof-group-title > span { color: var(--brass-text); font-size: 10px; letter-spacing: .15em; }
.proof-group-title h3 { margin: 0; font-family: var(--serif); font-size: clamp(34px, 3.8vw, 58px); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.proof-group-title p { justify-self: end; max-width: 360px; margin: 0; color: var(--muted); font-size: 13px; }
.recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.recommendation-card {
  min-width: 0; padding: 10px 10px 20px; display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: 18px; background: var(--cream); overflow: hidden;
}
.recommendation-media {
  width: 100%; position: relative; display: block; overflow: hidden; border: 0; padding: 0;
  border-radius: 11px; background: #d9d5ce; color: inherit; text-align: inherit; cursor: pointer;
}
.recommendation-media img { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; transition: transform .45s var(--ease), filter .3s ease; }
.recommendation-media > span, .workspace-proof-media-link > span {
  position: absolute; right: 12px; bottom: 12px; padding: 9px 12px; border-radius: 999px; background: rgba(17,17,15,.9);
  color: #fff; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.recommendation-media > span { display: flex; align-items: center; gap: 7px; }
.recommendation-media > span i { font-style: normal; font-size: 10px; }
.recommendation-media:hover img, .recommendation-media:focus-visible img { transform: scale(1.025); filter: brightness(.86); }
.recommendation-media:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.workspace-proof-media-link:hover :is(img, video), .workspace-proof-media-link:focus-visible :is(img, video) { transform: scale(1.025); filter: brightness(.88); }
.workspace-proof-media-link:focus-visible { box-shadow: inset 0 0 0 3px var(--brass); }
.recommendation-card blockquote { margin: 22px 12px 26px; color: #403d37; font-family: var(--serif); font-size: clamp(17px, 1.4vw, 22px); line-height: 1.35; letter-spacing: -.02em; }
.recommendation-card footer { margin-top: auto; padding: 18px 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.recommendation-card footer strong { font-size: 13px; }
.recommendation-card footer span { color: var(--brass-text); font-size: 8px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.proof-stories-panel { width: calc(100% + 48px); margin-left: -24px; padding: clamp(32px, 5vw, 68px) 24px; border-radius: 24px; background: var(--ink); color: #fff; }
.proof-group-title-light { border-color: rgba(255,255,255,.18); }
.proof-group-title-light p { color: rgba(255,255,255,.55); }
.story-proof-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.story-proof-card { min-width: 0; padding: 8px 8px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.05); overflow: hidden; }
.story-proof-card > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; filter: saturate(.9); }
.story-proof-card > div { padding: 18px 9px 0; }
.story-proof-card h4 { margin: 0; font-family: var(--serif); font-size: clamp(20px, 1.7vw, 27px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.story-proof-card small { display: block; min-height: 35px; margin: 9px 0 15px; color: var(--brass-light); font-size: 8px; font-weight: 700; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; }
.story-proof-card p { margin: 0; color: rgba(255,255,255,.64); font-size: 11px; line-height: 1.55; }
.proof-carousel-controls { margin: -8px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.proof-carousel-controls p { margin: 0; color: var(--muted); font-size: 11px; }
.proof-carousel-controls p span { margin-right: 8px; color: var(--brass-text); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.proof-carousel-controls > div { display: flex; gap: 8px; }
.proof-carousel-controls button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--cream); color: var(--ink); cursor: pointer; font-size: 18px; transition: background .2s, color .2s, opacity .2s; }
.proof-carousel-controls button:hover, .proof-carousel-controls button:focus-visible { background: var(--ink); color: #fff; }
.proof-carousel-controls button:disabled { opacity: .32; cursor: default; }
.workspace-proof-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(300px, 25vw, 390px); gap: 14px; padding: 2px 2px 13px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: inline mandatory; scroll-padding-inline: 2px; overscroll-behavior-inline: contain;
  scrollbar-width: thin; scrollbar-color: var(--brass) transparent;
}
.workspace-proof-grid::-webkit-scrollbar { height: 7px; }.workspace-proof-grid::-webkit-scrollbar-track { background: transparent; }.workspace-proof-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--brass); }
.workspace-proof-grid:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; border-radius: 12px; }
.workspace-proof-card { min-width: 0; align-self: start; display: flex; flex-direction: column; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); overflow: hidden; }
.workspace-proof-media-link { width: 100%; aspect-ratio: 1.03; flex: 0 0 auto; display: block; position: relative; overflow: hidden; border: 0; padding: 0; background: #ddd; text-align: inherit; cursor: pointer; outline: 0; }
.workspace-proof-media-link :is(img, video) { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s var(--ease), filter .3s ease; }
.workspace-proof-media-link[data-video-orientation="portrait"] :is(img, video) { object-position: center 34%; }
.workspace-proof-media-link:hover :is(img, video),
.workspace-proof-media-link:focus-visible :is(img, video) { transform: scale(1.025); filter: saturate(1.04) brightness(.9); }
.workspace-proof-media-link > span { display: flex; align-items: center; gap: 7px; }
.workspace-proof-media-link > span i { font-style: normal; font-size: 8px; }
.workspace-proof-story { background: #ded7cc; }
.workspace-proof-story img { object-position: center 18%; filter: saturate(.9); }
.workspace-proof-story > span { background: rgba(255,255,255,.94); color: var(--ink); }
.workspace-proof-card > div:not(.workspace-proof-media-link) { padding: 15px 16px 16px; display: grid; gap: 12px; }
.workspace-proof-card p { min-height: 0; margin: 0; color: #4f4c45; font-size: 11px; line-height: 1.55; }
.workspace-proof-card strong { padding-top: 11px; border-top: 1px solid var(--line); font-size: 12px; }
.workspace-proof-card strong span { color: var(--brass-text); font-weight: 650; }

.intelligence { position: relative; padding-bottom: 48px; }
.details { padding-top: 48px; }
.intelligence-grid { min-width: 0; margin-top: clamp(58px, 6vw, 82px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.intel-card { width: 100%; min-width: 0; min-height: 650px; padding: clamp(27px, 3.5vw, 48px); position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--cream); display: flex; flex-direction: column; overflow: hidden; }
.intel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 35px; }
.intel-top span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; }
.intel-top small { color: var(--brass-text); font-size: 9px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.intel-card > h3 { margin: auto 0 8px; font-family: var(--serif); font-size: clamp(34px, 3.4vw, 52px); font-weight: 400; line-height: 1; letter-spacing: -.04em; }
.intel-card > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 14px; }
.brief-preview { width: 84%; margin: 20px auto 50px; padding: 30px; position: relative; z-index: 2; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 24px 50px rgba(42,33,20,.09); transform: rotate(-1.5deg); }
.brief-preview > p { margin: 0 0 8px; color: var(--muted); font-size: 10px; }.brief-preview h3 { margin: 0 0 25px; font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.05; }.brief-preview ul { list-style: none; margin: 0; padding: 0; }.brief-preview li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 11px; }.brief-preview b { display: inline-block; width: 55px; color: var(--brass-text); }
.intel-mascot { display: block; object-fit: contain; pointer-events: none; user-select: none; }
.mascot-brief { width: 150px; position: absolute; right: -18px; top: 63px; z-index: 3; transform: rotate(6deg); filter: drop-shadow(0 15px 18px rgba(42,33,20,.13)); }
.intel-memory { background: #e9e2d7; }.memory-visual { margin: 0 auto 40px; position: relative; }.memory-screen { width: 100%; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 50px rgba(42,33,20,.12); }.mascot-memory { width: 126px; position: absolute; right: -22px; bottom: -20px; z-index: 2; filter: drop-shadow(0 14px 16px rgba(42,33,20,.17)); }
.intel-agents { background: var(--ink); color: #fff; }.intel-agents .intel-top span { border-color: rgba(255,255,255,.2); }.intel-agents > p { color: rgba(255,255,255,.57); }
.agent-flow { margin: 65px 0 70px; position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 22px; }
.mascot-workflow { width: 112px; position: absolute; right: -25px; top: -105px; opacity: .96; filter: drop-shadow(0 15px 18px rgba(0,0,0,.3)); }
.agent-source { padding: 23px 25px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; font-family: var(--serif); font-size: 18px; }.agent-flow > i { color: var(--brass-light); font-style: normal; }.agent-actions { display: grid; gap: 10px; }.agent-actions span { padding: 13px 15px; display: flex; justify-content: space-between; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(255,255,255,.06); font-size: 11px; }.agent-actions b { color: #7fc38b; }
.intel-integrations { background: #d7c1a1; }
.integration-cloud { width: 100%; min-width: 0; min-height: 300px; position: relative; margin-bottom: 50px; }
.mascot-integrations { width: 178px; position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%,-46%); filter: drop-shadow(0 18px 22px rgba(42,33,20,.14)); }
.integration-cloud .integration-pill {
  position: absolute; z-index: 2; min-height: 48px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid rgba(23,23,20,.12); border-radius: 50px; background: var(--cream); box-shadow: 0 12px 30px rgba(42,33,20,.1); font-family: var(--serif); white-space: nowrap;
}
.integration-pill .integration-icon { width: 23px; height: 23px; flex: 0 0 auto; display: block; }
.integration-pill b { font: inherit; font-weight: 500; }
.integration-cloud span:nth-of-type(1) { left: 4%; top: 30%; transform: rotate(-5deg); }
.integration-cloud span:nth-of-type(2) { left: 38%; top: 5%; transform: rotate(3deg); }
.integration-cloud span:nth-of-type(3) { right: 3%; top: 34%; transform: rotate(6deg); }
.integration-cloud span:nth-of-type(4) { left: 27%; bottom: 5%; transform: rotate(-3deg); }
.integration-cloud span:nth-of-type(5) { right: 22%; bottom: 12%; }
.integration-cloud span:nth-of-type(6) { left: 3%; bottom: 12%; transform: rotate(4deg); }
.knowledge-lake { grid-column: 1 / -1; min-height: 600px; padding: clamp(34px, 6vw, 85px); position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 70px; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 76% 42%, #53442f 0, #25211b 34%, #151513 68%); color: #fff; }
.knowledge-lake > div:first-child { position: relative; z-index: 3; width: min(920px, 82%); }.knowledge-lake h3 { max-width: 920px; margin: 0; font-family: var(--serif); font-size: clamp(48px, 6.1vw, 96px); font-weight: 400; line-height: .9; letter-spacing: -.055em; }.knowledge-lake h3 em { color: var(--brass-light); font-weight: 400; }.knowledge-lake > p { position: relative; z-index: 3; max-width: min(700px, 58%); margin: 0; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.65; }
.lake-mascot { position: absolute; height: 46%; right: 3%; bottom: 2%; z-index: 2; object-fit: contain; opacity: .9; filter: drop-shadow(0 22px 25px rgba(0,0,0,.32)); }
.lake-orbits { position: absolute; width: 560px; height: 560px; right: -5%; top: -18%; opacity: .38; }.lake-orbits span { position: absolute; inset: 0; border: 1px solid var(--brass-light); border-radius: 50%; animation: orbit 24s linear infinite; }.lake-orbits span:nth-child(2) { inset: 15%; animation-direction: reverse; }.lake-orbits span:nth-child(3) { inset: 31%; }.lake-orbits span::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--brass-light); left: 14%; top: 14%; }.lake-orbits i { position: absolute; inset: 40%; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: #f5efe4; box-shadow: 0 14px 35px rgba(0,0,0,.35); }.lake-orbits i img { width: 100%; height: 100%; display: block; object-fit: cover; }

.tech-architecture { margin-top: 18px; padding: clamp(34px, 5vw, 72px); border: 1px solid var(--line); border-radius: 18px; background: #f7f3ec; }
.tech-architecture-heading { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; align-items: end; }
.tech-architecture-heading h3 { margin: 0; font-family: var(--serif); font-size: clamp(44px, 5.4vw, 82px); font-weight: 400; line-height: .95; letter-spacing: -.05em; }
.tech-pipeline { margin-top: 65px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.tech-pipeline article { min-height: 210px; padding: 27px 22px 0 0; position: relative; border-right: 1px solid var(--line); }
.tech-pipeline article:not(:first-child) { padding-left: 22px; }
.tech-pipeline article:last-child { border-right: 0; }
.tech-pipeline article::before { content: ""; width: 9px; height: 9px; position: absolute; top: -5px; left: 0; border: 2px solid #f7f3ec; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.tech-pipeline small { color: var(--brass-text); font-size: 8px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.tech-pipeline strong { display: block; margin: 26px 0 10px; font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.05; }
.tech-pipeline p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.spec-grid { margin-top: clamp(58px, 6vw, 82px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.spec-card { min-height: 420px; position: relative; padding: clamp(26px, 4vw, 56px); border: 1px solid var(--line); border-radius: 18px; background: var(--cream); overflow: hidden; }
.spec-index { position: absolute; top: 25px; right: 25px; font-size: 9px; color: var(--muted); letter-spacing: .16em; }
.spec-card > strong { display: block; font-family: var(--serif); font-size: clamp(100px, 12vw, 190px); line-height: .8; font-weight: 400; letter-spacing: -.08em; color: var(--brass-text); }
.spec-card > strong small { font-family: var(--sans); font-size: .14em; letter-spacing: .02em; text-transform: uppercase; }
.spec-card h3 { margin: auto 0 8px; font-family: var(--serif); font-weight: 400; font-size: 34px; letter-spacing: -.03em; }
.spec-card p { max-width: 420px; margin: 0; color: var(--muted); }
.spec-card:not(.spec-visual):not(.spec-wide) { display: flex; flex-direction: column; }
.spec-dark { background: var(--ink); color: #fff; }.spec-dark p { color: rgba(255,255,255,.58); }.spec-dark > strong { color: var(--brass-light); }
.spec-visual { grid-column: 1 / -1; min-height: 480px; background: #e8ded0; }
.spec-visual img { position: absolute; width: 52%; height: 100%; right: 2%; top: 0; object-fit: contain; object-position: right center; filter: drop-shadow(0 30px 35px rgba(64,39,18,.16)); }
.spec-visual > div { position: absolute; left: clamp(26px, 4vw, 56px); bottom: 48px; z-index: 2; }
.spec-wide { grid-column: 1 / -1; min-height: 470px; padding: clamp(28px, 4vw, 58px); display: grid; grid-template-columns: minmax(0, .82fr) minmax(380px, 1.18fr); grid-template-rows: 1fr auto; align-items: end; column-gap: clamp(40px, 7vw, 110px); }
.spec-wide > .spec-index { top: 30px; right: 34px; }
.spec-wide > h3 { grid-column: 1; grid-row: 1; align-self: end; margin: 0 0 48px; max-width: 470px; font-size: clamp(42px, 5vw, 78px); line-height: .94; }
.spec-wide > p { grid-column: 1; grid-row: 2; max-width: 520px; margin: 0; }
.speaker-transcript { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 100%; padding: clamp(22px, 3vw, 38px); border: 1px solid #d9d0c2; border-radius: 18px; background: rgba(255,255,255,.74); box-shadow: 0 24px 70px rgba(60,48,32,.08); }
.transcript-status { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; color: #716c64; font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.transcript-status span { width: 8px; height: 8px; border-radius: 50%; background: #2d8a5f; box-shadow: 0 0 0 5px rgba(45,138,95,.1); }
.speaker-turn { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: start; gap: 14px; padding: 20px 0; border-top: 1px solid #e6ded3; }
.speaker-turn > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #171715; color: #fff; font-size: 12px; letter-spacing: .06em; }
.speaker-turn-alt > b { background: var(--brass); }
.speaker-turn strong { display: block; margin-bottom: 5px; font-size: 13px; }
.speaker-turn p { margin: 0; color: #38352f; font-size: 16px; line-height: 1.45; }
.speaker-turn time { color: #8a847a; font-size: 11px; }
.speaker-resolution { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 10px; padding: 15px 16px; border-radius: 10px; background: #f1eadf; }
.speaker-resolution span { color: #746e65; font-size: 12px; }
.speaker-resolution strong { font-family: var(--serif); font-size: 20px; font-weight: 500; white-space: nowrap; }
.speaker-resolution i { padding: 0 7px; color: var(--brass-text); font-style: normal; }
@keyframes marquee { to { transform: translateX(-100%); } }

.film-strip { min-height: min(920px, 92vh); position: relative; display: flex; align-items: center; overflow: hidden; background: #0b0b0a; color: #fff; }
.film-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.88) 0, rgba(0,0,0,.62) 38%, rgba(0,0,0,.08) 75%); }
.film-strip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.film-copy { width: var(--shell); margin: auto; position: relative; z-index: 3; }
.film-copy h2 { font-size: clamp(68px, 9vw, 145px); }
.film-copy p:not(.eyebrow) { max-width: 450px; margin: 30px 0; color: rgba(255,255,255,.67); font-size: 18px; }

.shop { padding-block: clamp(88px, 7.5vw, 138px); display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(55px, 8vw, 120px); align-items: start; }
.product-gallery { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; position: sticky; top: 110px; }
.gallery-main, .gallery-detail { min-height: 710px; position: relative; border-radius: 18px; overflow: hidden; }
.gallery-main { display: grid; place-items: center; background: #fbfaf7; }
.gallery-main > img { height: 72%; width: auto; position: relative; z-index: 2; filter: drop-shadow(0 22px 20px rgba(42,34,25,.18)); }
.gallery-shadow { position: absolute; bottom: 13%; width: 42%; height: 40px; background: rgba(40,31,22,.13); filter: blur(18px); border-radius: 50%; }
.gallery-detail { background: #dfd4c5; }
.gallery-detail img { position: absolute; height: 80%; width: auto; max-width: none; left: -36%; bottom: -3%; }
.product-copy { padding-top: 15px; }
.product-copy h2 { font-size: clamp(56px, 5.5vw, 90px); }
.product-description { margin: 0 0 28px; color: #55524b; font-size: 17px; line-height: 1.65; }
.included-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; font-size: 13px; line-height: 1.4; }
.included-list li { display: flex; gap: 9px; align-items: baseline; }
.included-list span { color: var(--brass-text); margin-right: 0; flex: 0 0 auto; }

/* The page sold a $199 gadget and never mentioned the $12.99/month layer, which
   existed only in the JSON-LD. Pen alone reads as hardware margin; pen plus a
   recurring layer, with the pen as the acquisition channel, is the actual model —
   so both are given equal weight and sit side by side. */
/* Hairline rules, not containers. The house pattern is a divider between columns
   (.award-card uses border-right; .included-list used border-block) — bordered,
   rounded, tinted boxes read as generic and do not belong on this page. */
.pricing-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 52px); margin: 34px 0 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.pricing-card { min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.pricing-card + .pricing-card { padding-left: clamp(28px, 3vw, 52px); border-left: 1px solid var(--line); }
.pricing-kicker { margin: 0; color: var(--brass-text); font-size: 9px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
/* Sized so "Scriben Intelligence" holds one line: when it wrapped, the two
   prices fell out of alignment and the heading dropped a word on its own. */
.pricing-card h3 { margin: 0; font-family: var(--serif); font-size: clamp(20px, 1.6vw, 23px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.pricing-amount { margin: 0; display: flex; align-items: baseline; gap: 9px; }
.pricing-amount strong { font-family: var(--serif); color: var(--brass-text); font-size: clamp(38px, 3.4vw, 46px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.pricing-amount span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.pricing-highlight { margin: -4px 0 0; color: var(--brass-text); font-size: 13px; font-weight: 650; }
.pricing-enterprise { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.pricing-enterprise a { color: var(--ink); font-weight: 650; border-bottom: 1px solid var(--brass-text); padding-bottom: 1px; }
.pricing-enterprise a:hover { color: var(--brass-text); }
.quantity-row { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 14px; font-size: 12px; }
.quantity-picker { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 30px; overflow: hidden; }
.quantity-picker button { width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer; }.quantity-picker output { min-width: 28px; text-align: center; }
.add-button, .product-copy .button-outline { margin-top: 10px; min-height: 57px; justify-content: space-between; padding-inline: 22px; }.product-copy .button-outline { justify-content: center; }
/* Concrete commitments beat reassuring adjectives. The storefront leads with
   these and the product page repeats them under a "Risk-free" heading; this
   page had "Secure checkout", which asserts nothing a buyer can hold us to. */
.assurance-title { margin: 28px 0 14px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--brass-text); font-size: 9px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.assurance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.assurance-list li { display: flex; gap: 10px; align-items: baseline; color: #55524b; }
.assurance-list span { color: var(--brass-text); flex: 0 0 auto; font-size: 9px; }

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; border-top: 1px solid var(--line); }
.faq .section-intro h2 { font-size: clamp(55px, 5.2vw, 85px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item button { width: 100%; min-height: 86px; padding: 0; border: 0; background: transparent; display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer; font-size: 16px; }
.faq-item button i { font-style: normal; font-size: 25px; font-weight: 300; transition: transform .35s var(--ease); }
.faq-item button[aria-expanded="true"] i { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-answer p { overflow: hidden; margin: 0; color: var(--muted); max-width: 650px; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }.faq-item.is-open .faq-answer p { padding: 0 40px 26px 0; }

.closing-cta { min-height: 700px; padding: 100px max(40px, calc((100vw - 1380px)/2)); position: relative; display: flex; align-items: center; background: var(--brass-text); color: #fff; overflow: hidden; }
.closing-cta > div:last-child { position: relative; z-index: 2; }.closing-cta h2 { font-size: clamp(90px, 13vw, 210px); margin-bottom: 50px; }
.closing-pen { position: absolute; right: 3%; top: -20%; height: 140%; transform: rotate(37deg); opacity: .92; }
.closing-pen img { height: 100%; width: auto; filter: drop-shadow(0 40px 35px rgba(50,30,9,.2)); }

.site-footer { padding: 90px max(40px, calc((100vw - 1380px)/2)) 36px; display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 55px; background: var(--ink); color: rgba(255,255,255,.56); font-size: 12px; }
.footer-brand img { width: 180px; filter: invert(1); opacity: .96; }.footer-brand p { max-width: 380px; margin-top: 25px; line-height: 1.7; }
.site-footer h3 { margin: 0 0 20px; color: var(--brass-light); font-size: 9px; text-transform: uppercase; letter-spacing: .17em; }.site-footer a { display: block; margin: 0 0 13px; transition: color .2s; }.site-footer a:hover { color: #fff; }
.footer-bottom { grid-column: 1 / -1; margin-top: 55px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; }

.mobile-buy-bar { display: none; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(15,14,12,.45); opacity: 0; pointer-events: none; transition: opacity .4s; backdrop-filter: blur(5px); }
.cart-drawer { position: fixed; right: 0; top: 0; z-index: 80; width: min(480px, 100vw); height: 100%; padding: 34px; background: var(--cream); transform: translateX(105%); transition: transform .55s var(--ease); box-shadow: -30px 0 70px rgba(0,0,0,.16); display: flex; flex-direction: column; }
.cart-open .drawer-backdrop { opacity: 1; pointer-events: auto; }.cart-open .cart-drawer { transform: translateX(0); }
.drawer-header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 25px; border-bottom: 1px solid var(--line); }.drawer-header small { text-transform: uppercase; letter-spacing: .15em; color: var(--brass-text); font-size: 9px; }.drawer-header h2 { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: 31px; line-height: 1.1; }.drawer-header button, .modal-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; font-size: 24px; }
.empty-cart { margin: auto; text-align: center; }.empty-cart p { font-family: var(--serif); font-size: 25px; }.cart-content { display: flex; flex-direction: column; height: 100%; padding-top: 28px; }
.cart-line { display: grid; grid-template-columns: 82px 1fr auto; gap: 16px; align-items: center; }.cart-image { height: 110px; display: grid; place-items: center; background: #eee9df; border-radius: 8px; }.cart-image img { height: 90%; width: auto; }.cart-line h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 21px; font-weight: 500; }.cart-line p, .cart-line span { margin: 0 0 4px; color: var(--muted); font-size: 11px; }.cart-line > strong { align-self: start; }
.cart-included { margin-top: 24px; padding: 13px 15px; display: flex; justify-content: space-between; border: 1px solid var(--line); background: #f1ebdf; border-radius: 7px; font-size: 11px; }.cart-included i { color: var(--green); font-style: normal; }.cart-total { display: flex; justify-content: space-between; margin-top: auto; padding: 22px 0; border-top: 1px solid var(--line); }.cart-total strong { font-family: var(--serif); font-size: 26px; }.checkout-note { text-align: center; color: var(--muted); font-size: 10px; }

.film-modal { position: fixed; inset: 0; z-index: 90; padding: clamp(30px, 6vw, 90px); background: rgba(14,14,12,.96); color: #fff; overflow-y: auto; }
.film-modal[hidden] { display: none; }.modal-close { position: fixed; right: 28px; top: 28px; color: #fff; border-color: rgba(255,255,255,.25); z-index: 2; }.film-modal-content { min-height: calc(100vh - 180px); display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 70px; align-items: center; }.film-modal-copy h2 { font-size: clamp(55px, 6vw, 95px); }.film-modal-copy > p:not(.eyebrow) { color: rgba(255,255,255,.6); }.film-player { position: relative; min-width: 0; }.film-modal video { width: 100%; max-height: 76vh; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 0; }.film-status { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); margin: 0; padding: 10px 14px; border-radius: 999px; background: rgba(14,14,12,.78); color: rgba(255,255,255,.88); font-size: 13px; text-align: center; backdrop-filter: blur(10px); }
.proof-video-modal { position: fixed; inset: 0; z-index: 110; padding: clamp(80px, 7vw, 110px) clamp(18px, 5vw, 76px) clamp(24px, 5vw, 60px); display: grid; place-items: center; background: rgba(12,12,10,.96); color: #fff; overflow-y: auto; }
.proof-video-modal[hidden] { display: none; }
.proof-video-dialog { width: min(1360px, 100%); display: grid; grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.proof-video-heading h2 { margin: 14px 0 0; font-family: var(--serif); font-size: clamp(42px, 5vw, 78px); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.proof-video-player { min-width: 0; position: relative; }
.proof-video-player video { width: 100%; max-height: 76vh; aspect-ratio: 16 / 9; display: block; object-fit: contain; border-radius: 0; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.proof-video-player.is-portrait { display: grid; place-items: center; }
.proof-video-player.is-portrait video { width: min(430px, 100%); aspect-ratio: 9 / 16; }
.proof-video-player video[hidden] { display: none; }
.proof-video-player iframe { width: 100%; max-height: 76vh; aspect-ratio: 16 / 9; display: block; border: 0; border-radius: 0; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.proof-video-player iframe[hidden] { display: none; }
.proof-story-view {
  width: min(860px, 100%); min-height: 0; margin: 0; display: grid; grid-template-columns: minmax(260px, .9fr) minmax(280px, 1.1fr);
  overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: #f4efe7; color: var(--ink);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.proof-story-view[hidden] { display: none; }
.proof-story-view > img { width: 100%; height: min(64vh, 660px); min-height: 420px; display: block; object-fit: cover; object-position: center 18%; background: #ded7cc; }
.proof-story-view figcaption { padding: clamp(30px, 5vw, 58px); display: flex; flex-direction: column; justify-content: center; }
.proof-story-view figcaption p { margin: 0; font-family: var(--serif); font-size: clamp(24px, 3vw, 40px); line-height: 1.18; letter-spacing: -.03em; }
.proof-story-view figcaption a { width: fit-content; margin-top: 30px; padding-bottom: 5px; border-bottom: 1px solid currentColor; color: var(--ink); font-size: 12px; font-weight: 720; text-decoration: none; }
.proof-story-view figcaption a:hover, .proof-story-view figcaption a:focus-visible { color: var(--brass-text); }
.proof-video-status { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 9px 13px; border-radius: 999px; background: rgba(14,14,12,.82); color: rgba(255,255,255,.88); font-size: 12px; text-align: center; backdrop-filter: blur(10px); }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 100; transform: translate(-50%, 130%); padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 30px; box-shadow: 0 12px 40px rgba(0,0,0,.22); font-size: 12px; transition: transform .45s var(--ease); }.toast.is-visible { transform: translate(-50%, 0); }

/* The hidden state is gated on .js (set by an inline script in <head>) because only
   JS can clear it. Ungated, a blocked/404'd/throwing script.js left most of the page
   invisible — a blank marketing site that still returned 200. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal-delay { transition-delay: .12s; }.reveal-delay-2 { transition-delay: .24s; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Enterprise ------------------------------------------------------------
   The page told an enterprise story — "your company's enterprise knowledge
   layer", a pipeline whose last stage is "Enterprise" — and then offered a
   visitor exactly two ways out: buy a $199 pen, or email an alias in the footer.
   There was no <form> anywhere in the document. */
.enterprise { padding-block: clamp(80px, 6.5vw, 120px); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(48px, 6vw, 96px); align-items: start; border-top: 1px solid var(--line); }
.enterprise-copy h2 { font-family: var(--serif); font-size: clamp(48px, 4.6vw, 76px); font-weight: 400; line-height: .98; letter-spacing: -.04em; margin: 0 0 22px; }
.enterprise-copy h2 em { color: var(--brass-text); font-weight: 400; }
.enterprise-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.enterprise-points li { padding-left: 22px; position: relative; color: #55524b; font-size: 15px; line-height: 1.55; }
.enterprise-points li::before { content: "◈"; position: absolute; left: 0; color: var(--brass-text); font-size: 11px; }

.enterprise-form-shell { min-width: 0; }
.enterprise-form-shell .field { display: grid; gap: 7px; margin-bottom: 16px; }
.enterprise-form-shell .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.enterprise-form-shell label { font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.enterprise-form-shell abbr { color: var(--brass-text); text-decoration: none; }
.enterprise-form-shell :is(input, select, textarea) {
  width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 0;
  background: #fff; color: var(--ink); font-family: var(--sans); font-size: 15px;
}
.enterprise-form-shell textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.enterprise-form-shell :is(input, select, textarea):focus-visible { outline: 3px solid var(--brass-text); outline-offset: 2px; border-color: var(--brass-text); }
.enterprise-form-shell button[type="submit"] { margin-top: 8px; }
.enterprise-form-shell button.is-busy { opacity: .6; pointer-events: none; }
/* Off-screen rather than display:none — a bot reading the DOM should still find it. */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.lead-error { margin: 14px 0 0; padding: 11px 14px; background: #f7e9e4; color: #7d2f16; font-size: 13px; }
.lead-fallback { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; }
.lead-fallback a { color: var(--ink); font-weight: 650; border-bottom: 1px solid var(--brass-text); }
/* The [hidden] attribute sets display:none via a UA rule that any class-level
   display beats — without this the thank-you block renders permanently, above
   a form nobody has submitted yet. */
.lead-success[hidden] { display: none; }
.lead-success { display: grid; gap: 10px; }
.lead-success h3 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.15; }
.lead-success p:last-child { margin: 0; color: #55524b; font-size: 15px; }
.lead-success a { border-bottom: 1px solid var(--brass-text); }
.enterprise-copy .section-lead { margin-left: 0; max-width: 100%; }
.lake-cta { margin: 16px 0 0; }
.lake-cta a { color: var(--brass-light); font-weight: 650; font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* "Ask an assistant about Scriben" — the visitor's own AI can answer questions this page
   never anticipated, and the prompt arrives pre-filled so they do not have to describe the
   product they have not bought yet. llms.txt is what those assistants will read. */
.footer-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.footer-ask a { padding: 5px 11px; border: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none; transition: border-color .3s, background .3s; }
.footer-ask a:hover { border-color: rgba(23,23,20,.4); background: rgba(23,23,20,.04); }
.footer-ask a:focus-visible { outline: 3px solid var(--brass-light); outline-offset: 2px; }
.footer-note { max-width: 46ch; }

@media (max-width: 1100px) {
  .pricing-pair { grid-template-columns: 1fr; gap: 26px; }
  .pricing-card + .pricing-card { padding-left: 0; padding-top: 26px; border-left: 0; border-top: 1px solid var(--line); }
  :root { --shell: min(calc(100% - 48px), 1040px); }
  .site-header { padding-inline: 24px; }.desktop-nav { gap: 20px; }.hero { min-height: 590px; grid-template-columns: minmax(0,.78fr) minmax(430px,1.22fr); }.hero-visual { min-height: 530px; }.hero-photo-frame { width: min(70%, 400px); }.note-capture, .note-meeting { left: -5%; }.note-memory, .note-email { right: -3%; }.hero-meta { flex-wrap: wrap; gap: 10px 0; }
  .process-grid { grid-template-columns: .86fr 1.22fr .86fr; gap: 14px; }.process-card { min-height: 460px; padding: 22px; }.process-card h3 { font-size: 36px; }.process-feature-copy { padding: 22px; gap: 15px; }
  .zoom-story { --zoom-scale: .62; }
  .workspace-showcase { width: min(100% - 48px, 1040px); }.shop { gap: 45px; }.product-gallery { grid-template-columns: 1fr; }.gallery-detail { display: none; }.gallery-main { min-height: 650px; }
  .awards-grid { grid-template-columns: repeat(3, 1fr); }.award-card:nth-child(3) { border-right: 0; }.award-card:nth-child(-n+3) { border-bottom: 1px solid var(--line); }.award-card { min-height: 350px; }.knowledge-lake { gap: 50px; }
  .story-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.workspace-proof-grid { grid-auto-columns: min(38vw, 360px); }.proof-stories-panel { width: 100%; margin-left: 0; }
  .tech-pipeline { grid-template-columns: repeat(3, 1fr); border-top: 0; gap: 1px; background: var(--line); }.tech-pipeline article { min-height: 190px; padding: 24px; border: 0; background: #f7f3ec; }.tech-pipeline article:not(:first-child) { padding-left: 24px; }.tech-pipeline article::before { display: none; }
}

@media (max-width: 820px) {
  .desk { grid-template-columns: 1fr; gap: 40px; justify-items: center; }
  .device { width: min(100%, 460px); }
  :root { --shell: calc(100vw - 36px); }
  .announcement { justify-content: flex-start; overflow: hidden; white-space: nowrap; }.announcement p { overflow: hidden; text-overflow: ellipsis; }.announcement a { display: none; }
  .site-header { height: 66px; grid-template-columns: 1fr auto; }.brand img { width: 124px; }.desktop-nav, .header-cta { display: none; }.menu-button { display: block; }.header-actions { gap: 2px; }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobile-menu { position: absolute; display: flex; flex-direction: column; gap: 0; left: 0; top: 66px; width: 100%; padding: 12px 18px 22px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 45px rgba(0,0,0,.08); }.mobile-menu[hidden] { display: none; }.mobile-menu a:not(.button) { padding: 16px 6px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 26px; }.mobile-menu .button { margin-top: 18px; }
  .hero { min-height: auto; padding-block: 42px 50px; grid-template-columns: 1fr; }.hero-copy { padding-left: 0; }.hero h1 { font-size: clamp(52px, 12.5vw, 72px); }.hero-deck { margin-top: 20px; }.hero-meta { margin-top: 26px; }.hero-visual { min-height: 560px; margin-top: 30px; }.hero-photo-frame { width: min(78%, 420px); }.hero-caption { display: none; }.floating-note { scale: .78; }.note-capture { top: 24%; left: -3%; }.note-memory { top: 42%; right: -3%; }.note-email { bottom: 8%; right: -3%; }.note-meeting { bottom: 8%; left: -2%; }
  .principle-band { height: auto; min-height: 120px; padding: 25px 20px; gap: 20px; text-align: center; }.principle-band p { max-width: 240px; }
  .awards-heading { grid-template-columns: 1fr; gap: 30px; }.awards-grid { grid-template-columns: 1fr 1fr; }.award-card, .award-card:nth-child(3) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.award-card:nth-child(even) { border-right: 0; }.award-card:last-child { border-bottom: 0; }
  .story, .how, .proof, .intelligence, .details, .faq { padding-block: 82px; }.section-intro h2 { font-size: clamp(54px, 14vw, 85px); }.section-lead { margin: 26px 0 0; }
  .proof-heading { grid-template-columns: 1fr; gap: 28px; }.proof-heading h2 { font-size: clamp(54px, 13vw, 84px); }.proof-group-title { grid-template-columns: 34px 1fr; }.proof-group-title p { grid-column: 2; justify-self: start; }.recommendation-grid { grid-template-columns: 1fr; }.recommendation-card { display: grid; grid-template-columns: minmax(220px, .9fr) 1.1fr; grid-template-rows: 1fr auto; padding: 10px; }.recommendation-media { grid-row: 1 / span 2; height: 100%; min-height: 260px; }.recommendation-media img { height: 100%; aspect-ratio: auto; }.recommendation-card blockquote { margin: 24px; }.recommendation-card footer { margin: 0 14px 0 24px; padding-bottom: 12px; }
  .story-proof-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding-bottom: 8px; scrollbar-width: thin; }.story-proof-card { flex: 0 0 min(310px, 84vw); scroll-snap-align: start; }.workspace-proof-grid { grid-auto-columns: min(72vw, 340px); }.workspace-proof-card > div:not(.workspace-proof-media-link) { min-height: 0; }
  .process-grid { grid-template-columns: 1fr; margin-top: 60px; }.process-card, .process-card:last-child { min-height: 420px; grid-column: auto; }.process-feature video { max-height: 360px; }.process-card:last-child .action-stack { width: 100%; }
  .zoom-story { height: 220vh; --zoom-scale: .66; }.zoom-sticky, .zoom-frame { min-height: 620px; }.zoom-copy { top: 12%; }.zoom-frame { transform: translateY(calc((1 - var(--zoom-progress)) * 20vh)) scale(var(--zoom-scale)); }.zoom-pen { right: -2%; height: 90%; }.zoom-message strong { font-size: clamp(48px, 12vw, 82px); }
  .app-heading { grid-template-columns: 1fr; gap: 30px; }.workspace-showcase { width: calc(100% - 32px); margin-top: 48px; }  .intelligence-grid { grid-template-columns: 1fr; margin-top: 65px; }.intel-card { min-height: 570px; }.knowledge-lake { grid-column: auto; min-height: 650px; }.knowledge-lake > div:first-child { width: 100%; }.knowledge-lake > p { max-width: 68%; }.lake-orbits { right: -45%; }.lake-mascot { height: 39%; right: -5%; bottom: -14%; opacity: .58; }.tech-architecture-heading { grid-template-columns: 1fr; gap: 20px; }
  .spec-grid { grid-template-columns: 1fr; margin-top: 60px; }.spec-visual { grid-column: auto; }.spec-wide { grid-column: auto; min-height: 650px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-items: start; }.spec-wide > h3 { grid-column: 1; grid-row: 2; margin: 0 0 20px; }.spec-wide > p { grid-column: 1; grid-row: 3; }.speaker-transcript { grid-column: 1; grid-row: 1; margin: 28px 0 52px; }.spec-card { min-height: 380px; }.spec-visual img { width: 70%; right: 0; }.film-strip { min-height: 720px; }.film-strip::after { background: linear-gradient(0deg, rgba(0,0,0,.86), rgba(0,0,0,.2)); }.film-copy { align-self: end; padding-bottom: 80px; }
  .shop { grid-template-columns: 1fr; }.pricing-pair { grid-template-columns: 1fr; }.enterprise { grid-template-columns: 1fr; gap: 44px; }.product-gallery { position: relative; top: 0; }.gallery-main { min-height: 620px; }.product-copy h2 { font-size: clamp(58px, 14vw, 92px); }
  .faq { grid-template-columns: 1fr; gap: 50px; }.closing-cta { min-height: 580px; }.closing-cta h2 { font-size: clamp(85px, 23vw, 150px); }.closing-pen { opacity: .4; right: -30%; }
  .site-footer { grid-template-columns: 1.7fr 1fr 1fr; }.footer-brand { grid-column: 1 / -1; }
  .film-modal-content, .proof-video-dialog { grid-template-columns: 1fr; gap: 35px; }.film-modal { padding-top: 100px; }.film-modal-copy > p:not(.eyebrow) { display: none; }.proof-video-heading h2 { font-size: 48px; }
}

@media (max-width: 560px) {
  .bag-button { display: none; }.hero { padding-top: 34px; }.hero h1 { font-size: clamp(47px, 13vw, 64px); letter-spacing: -.065em; }.hero-actions { gap: 16px; }.hero-actions .button { width: 100%; }.text-button { margin-inline: auto; }.hero-meta span { width: 50%; padding: 0 10px 0 0; border-left: 0; }.hero-meta span:last-child { width: 100%; }
  .hero-visual { min-height: 485px; border-radius: 25px; }.hero-visual::before { inset: 5% 0; }.hero-photo-frame { width: calc(100% - 18px); max-width: 390px; border: 0; border-radius: 0; }.floating-note { min-width: min(148px, 48vw); padding: 8px 10px; scale: .72; }.floating-note strong { font-size: 13px; }.floating-note small { font-size: 7px; }.note-capture { left: -15px; top: 23%; transform-origin: left center; }.note-email { right: -15px; bottom: 5%; transform-origin: right center; }.principle-band { font-size: 16px; }
  .recommendation-card { display: flex; padding: 8px 8px 18px; }.recommendation-media { min-height: 0; height: auto; }.recommendation-media img { height: auto; aspect-ratio: 16 / 9; }.recommendation-card blockquote { margin: 20px 12px 24px; }.recommendation-card footer { margin: auto 4px 0; padding: 16px 8px 0; }.proof-stories-panel { padding-inline: 16px; }.proof-group-title h3 { font-size: 34px; }.proof-carousel-controls p { max-width: 205px; }.workspace-proof-grid { grid-auto-columns: min(84vw, 320px); }
  .awards { padding-block: 70px; }.awards-heading h2 { font-size: clamp(43px, 12.2vw, 51px); line-height: .94; }.awards-heading h2 br { display: none; }.awards-heading h2 em { display: block; margin-top: .16em; line-height: .94; }.awards-grid { grid-template-columns: 1fr; margin-top: 44px; }.award-card, .award-card:nth-child(3), .award-card:nth-child(even) { min-height: 335px; grid-template-rows: 180px 1fr; border-right: 0; border-bottom: 1px solid var(--line); }.award-card:last-child { border-bottom: 0; }.award-logo { height: 180px; }.award-logo img { max-height: 164px !important; }
  .zoom-story {
    height: auto; min-height: 0; padding: 72px 0 100px; background: var(--paper);
    --zoom-progress: 1; --zoom-scale: 1;
  }
  .zoom-sticky {
    height: auto; min-height: 0; position: relative; top: auto; display: flex; flex-direction: column;
    align-items: stretch; overflow: visible; perspective: none;
  }
  .zoom-copy {
    position: relative; inset: auto; width: calc(100% - 36px); margin: 0 auto 34px; text-align: left;
    transform: none; opacity: 1;
  }
  .zoom-copy .eyebrow { justify-content: flex-start; margin-bottom: 13px; }
  .zoom-copy h2 { font-size: clamp(48px, 13vw, 62px); line-height: .92; letter-spacing: -.06em; }
  .zoom-copy h2 br { display: none; }
  .zoom-copy > p:last-child { display: none; }
  .zoom-frame {
    width: calc(100% - 24px); height: auto; min-height: 0; aspect-ratio: 2940 / 1594; margin: 0 auto;
    position: relative; transform: none !important; transform-origin: center; border-radius: 16px;
    box-shadow: 0 20px 55px rgba(40,31,22,.14); background: #fff;
  }
  .zoom-frame > img:not(.zoom-pen) { width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .zoom-browser-bar { height: 30px; padding-inline: 10px; opacity: 1; }
  .zoom-wash, .zoom-message, .zoom-pen, .zoom-laptop-base, .scroll-cue { display: none; }
  .process-card { min-height: 390px; }.process-feature video { height: 58%; }.process-feature-copy { padding: 22px; }.workspace-section { padding-bottom: 72px; }.workspace-showcase { width: calc(100% - 20px); margin-top: 38px; }
     on phones left two of the three product screenshots unreachable there. */
  .intel-card { min-height: 530px; padding: 24px; }.intel-card > h3 { overflow-wrap: anywhere; }.brief-preview { width: 100%; padding: 22px; }.mascot-brief { width: 108px; right: -13px; }.mascot-memory { width: 96px; right: -12px; }.agent-flow { grid-template-columns: 1fr; gap: 12px; margin: 35px 0 55px; }.agent-flow > i { transform: rotate(90deg); justify-self: center; }.mascot-workflow { width: 84px; right: -16px; top: -63px; }
  .integration-cloud { min-height: 270px; margin: 2px 0 38px; padding: 4px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); gap: 10px; align-items: center; overflow: hidden; }
  .integration-cloud .mascot-integrations { width: min(145px, 45vw); left: 50%; top: 50%; transform: translate(-50%, -48%); }
  .integration-cloud .integration-pill { position: relative; inset: auto !important; width: 100%; min-width: 0; min-height: 42px; padding: 8px 5px; transform: none !important; justify-self: stretch; gap: 5px; text-align: center; white-space: nowrap; font-size: clamp(12px, 3.7vw, 16px); }
  .integration-pill .integration-icon { width: 17px; height: 17px; }
  .integration-cloud span:nth-of-type(1) { grid-column: 1; grid-row: 2; }.integration-cloud span:nth-of-type(2) { grid-column: 2; grid-row: 1; }.integration-cloud span:nth-of-type(3) { grid-column: 3; grid-row: 2; }.integration-cloud span:nth-of-type(4) { grid-column: 1; grid-row: 3; }.integration-cloud span:nth-of-type(5) { grid-column: 3; grid-row: 3; }.integration-cloud span:nth-of-type(6) { grid-column: 2; grid-row: 3; }
  .knowledge-lake { min-height: 620px; padding: 30px 24px; }.knowledge-lake h3 { font-size: 46px; }.knowledge-lake > p { max-width: 100%; font-size: 14px; }.lake-orbits { width: 430px; height: 430px; right: -70%; opacity: .25; }.lake-mascot { display: none; }.tech-architecture { padding: 28px 20px; }.tech-pipeline { grid-template-columns: 1fr; }.tech-pipeline article { min-height: 155px; }
  .spec-card { min-height: 340px; }.spec-card > strong { font-size: 110px; }.spec-visual img { width: 74%; height: 100%; right: -3%; }.spec-visual > div { left: 24px; bottom: 26px; }.spec-wide { min-height: 650px; padding: 24px; }.speaker-transcript { padding: 20px; margin-top: 35px; }.speaker-turn { grid-template-columns: 38px minmax(0,1fr); }.speaker-turn > b { width: 36px; height: 36px; }.speaker-turn time { display: none; }.speaker-resolution { align-items: flex-start; flex-direction: column; gap: 5px; }
  .film-strip { min-height: 650px; }.film-copy h2 { font-size: 72px; }.shop { padding-top: 80px; }.gallery-main { min-height: 520px; }.pricing-pair { grid-template-columns: 1fr; }.product-copy .eyebrow { margin-top: 20px; }.assurance-list { margin-bottom: 40px; }
  .mobile-buy-bar { position: fixed; z-index: 35; left: 10px; right: 10px; bottom: 10px; height: 68px; padding: 8px 8px 8px 17px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 14px; background: rgba(250,248,243,.92); box-shadow: 0 18px 50px rgba(0,0,0,.2); backdrop-filter: blur(16px); transform: translateY(120px); transition: transform .45s var(--ease); }.mobile-buy-bar.is-visible { transform: translateY(0); }.mobile-buy-bar small, .mobile-buy-bar strong { display: block; }.mobile-buy-bar small { font-size: 10px; color: var(--muted); }.mobile-buy-bar strong { font-family: var(--serif); }.mobile-buy-bar .button { min-height: 50px; }
  .cart-drawer { padding: 24px; }.closing-cta { min-height: 530px; padding-inline: 24px; }.site-footer { grid-template-columns: 1fr 1fr; padding: 70px 24px 100px; }.footer-bottom { flex-direction: column; gap: 5px; }
  .film-modal { padding: 90px 14px 30px; }.film-modal-content { min-height: auto; }.film-modal-copy h2 { font-size: 58px; }.proof-video-modal { padding: 78px 12px 22px; align-items: start; }.proof-video-heading .eyebrow { margin-bottom: 8px; }.proof-video-heading h2 { margin-top: 0; font-size: 38px; }.proof-video-player video { border-radius: 0; }.proof-story-view { grid-template-columns: 1fr; }.proof-story-view > img { height: min(42vh, 420px); min-height: 260px; }.proof-story-view figcaption { padding: 24px; }.proof-story-view figcaption p { font-size: 25px; }
}

/* The product photograph and device showcase stay complete at every viewport. */
@media (max-width: 1100px) {
  .hero-photo-frame { width: min(96%, 680px); }
}

@media (max-width: 820px) {
  .hero-visual { min-height: 430px; }
  .hero-photo-frame { width: min(100%, 680px); }
  .workspace-section { padding-bottom: 76px; }
  .workspace-showcase { width: calc(100% - 32px); margin-top: 48px; }
}

@media (max-width: 560px) {
  .hero-visual { min-height: 370px; margin-top: 20px; }
  .hero-photo-frame { width: 100%; max-width: none; aspect-ratio: 1800 / 1005; border-radius: 0; }
  .floating-note { display: flex; min-width: min(142px, 45vw); padding: 8px 9px; scale: .68; }
  .note-capture { top: 7%; left: -10px; transform-origin: left center; }
  .note-memory { top: 29%; right: -10px; transform-origin: right center; }
  .note-meeting { left: -10px; bottom: 17%; transform-origin: left center; }
  .note-email { right: -10px; bottom: 0; transform-origin: right center; }
  .workspace-section { padding-bottom: 64px; }
  .workspace-showcase { width: calc(100% - 20px); min-height: 0; margin-top: 38px; }
  
  .workspace-screen { aspect-ratio: 1920 / 1041; object-fit: contain; }
}

/* On phones, the film is the opening product visual rather than a second action or a duplicate still. */
@media (max-width: 560px) {
  .hero { padding-block: 30px 38px; gap: 0; }
  .hero h1 { font-size: clamp(45px, 12.5vw, 59px); }
  .hero-mobile-film-card {
    display: block; position: relative; margin: 24px 0 20px; overflow: hidden; border: 0;
    border-radius: 0; background: transparent; box-shadow: 0 18px 44px rgba(37, 31, 24, .1);
  }
  .hero-mobile-film {
    width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; border: 0; border-radius: 0; background: #f5efe5;
  }
  .hero-mobile-sound {
    position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
    min-height: 38px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
    background: rgba(18,17,15,.82); color: #fff; box-shadow: 0 8px 24px rgba(22,19,15,.2);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer;
    font: 650 12px/1 Arial, sans-serif; letter-spacing: .01em;
  }
  .hero-mobile-sound:active { transform: scale(.97); }
  .hero-mobile-sound[aria-pressed="true"] { background: rgba(255,255,255,.9); color: #171612; border-color: rgba(23,22,18,.1); }
  .hero-deck { margin-top: 0; font-size: 16px; line-height: 1.55; }
  .hero-actions { margin-top: 20px; }
  .hero-actions .text-button { display: none; }
  .hero-meta { margin-top: 22px; }
  .hero-visual,
  .hero-film-visual.hero-visual { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .zoom-story { --zoom-progress: 1; --zoom-scale: 1; }
  /* The blanket animation kill above would freeze the strip mid-scroll and clip the logos
     that happen to be off-screen. Drop the duplicate tracks and wrap the real one instead. */
  .logo-marquee { justify-content: center; mask-image: none; }
  .logo-track + .logo-track { display: none; }
  .logo-track { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; max-width: var(--shell); row-gap: 30px; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 561px) {
  .zoom-story { height: 100vh; }
}