:root {
  --paper: #ffffff;
  --paper-deep: #f4f2ed;
  --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: #fbfaf7;
  --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 { width: max-content; display: inline-flex; flex-direction: column; align-items: flex-start; justify-self: start; line-height: 1; text-decoration: none; }
.brand img { width: 126px; height: auto; }
.brand span {
  align-self: flex-end; margin: 3px 0 0; color: var(--brass-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px; font-weight: 700;
  letter-spacing: .2em; line-height: 1; text-transform: uppercase;
}
.desktop-nav { display: flex; align-items: center; 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, .desktop-nav > a[aria-current="page"]::after { right: 0; }
.nav-dropdown { position:relative; }
.nav-dropdown summary { display:flex; align-items:center; gap:7px; padding:16px 0; color:#45443f; cursor:pointer; list-style:none; }
.nav-dropdown summary::-webkit-details-marker { display:none; }
.nav-dropdown summary span { color:var(--brass-text); font-size:16px; transition:transform .2s var(--ease); }
.nav-dropdown[open] summary span { transform:rotate(45deg); }
.nav-dropdown-panel { position:absolute; top:46px; left:50%; width:220px; padding:8px; border:1px solid var(--line); background:rgba(250,248,243,.98); box-shadow:0 18px 44px rgba(23,23,20,.12); transform:translateX(-50%); }
.nav-dropdown-panel a { display:block; padding:11px 12px; color:#45443f; }
.nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus-visible { background:rgba(23,23,20,.055); }
.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: 4px; 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: 4px; }
.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: 92px; }

.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 :is(h2, h3) {
  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 {
  display: block; width: 2px; border-radius: 999px; background: currentColor; font: inherit;
}
.hero-mobile-sound-icon span:nth-child(1) { height: 7px; }
.hero-mobile-sound-icon span:nth-child(2) { height: 13px; }
.hero-mobile-sound-icon span:nth-child(3) { height: 9px; }
.hero-film-sound[aria-pressed="true"] {
  background: rgba(255,255,255,.9); color: #171612; border-color: rgba(23,22,18,.1);
}
.ambient-film-sound { top: 14px; right: 14px; bottom: auto; }
.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(16px, 1.6vw, 24px); 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; }
.credibility-band { margin-top: clamp(48px, 5vw, 72px); padding: 28px 0; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 62px); border-block: 1px solid var(--line); }
.credibility-band > i { width: 1px; height: 52px; flex: none; background: var(--line); }
.credibility-group { min-width: 0; display: flex; align-items: center; gap: 22px; }
.credibility-group small { flex: none; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .19em; }
.credibility-group img { display: block; width: auto; height: auto; object-fit: contain; }
.credibility-backer img { max-width: 190px; max-height: 53px; }
.credibility-partners > div { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px); }
.credibility-partners img:nth-child(1) { max-width: 142px; max-height: 34px; }
.credibility-partners img:nth-child(2) { max-width: 112px; max-height: 28px; }
.credibility-partners img:nth-child(3) { max-width: 100px; max-height: 30px; }
.event-film {
  margin-top: clamp(52px, 5vw, 76px); display: grid; grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr);
  align-items: stretch; overflow: hidden; background: #171612; color: #fff;
}
.event-film-copy { padding: clamp(34px, 4.5vw, 68px); display: flex; flex-direction: column; justify-content: center; }
.event-film-copy .eyebrow { color: var(--brass-light); }
.event-film-copy h3 { margin: 20px 0 0; font-family: var(--serif); font-size: clamp(46px, 5vw, 76px); font-weight: 400; line-height: .92; letter-spacing: -.05em; }
.event-film-copy h3 em { color: var(--brass-light); font-weight: 400; }
.event-film-copy > p:last-child { max-width: 34ch; margin: 24px 0 0; color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.6; }
.event-film-frame { min-width: 0; margin: 0; position: relative; background: #080807; }
.event-film-frame video { display: block; width: 100%; height: 100%; min-height: 390px; aspect-ratio: 16 / 9; object-fit: cover; }
.event-film-frame .ambient-film-sound { top: auto; bottom: 14px; }

.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-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); }

.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) * 1558 / 720); 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; position: relative; 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::after { content: ""; position: absolute; z-index: 2; top: 9px; left: 50%; width: 27%; height: 13px; transform: translateX(-50%); border-radius: 999px; background: #050505; pointer-events: none; }
.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; }

.workspace-section[hidden], .intelligence-grid[hidden], .tech-architecture[hidden] { display: none !important; }
.app-explorer { margin-top: clamp(74px, 8vw, 120px); padding: clamp(30px, 4vw, 58px); overflow: hidden; color: #fff; background: radial-gradient(circle at 22% 18%, rgba(202,145,73,.22), transparent 31%), radial-gradient(circle at 79% 66%, rgba(112,89,56,.2), transparent 36%), #171612; }
#intelligence .app-explorer { margin-top: 0; }
.app-explorer-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.app-explorer-heading h3 { margin: 12px 0 0; font-family: var(--serif); font-size: clamp(42px, 5vw, 72px); font-weight: 400; line-height: .94; letter-spacing: -.045em; }
.app-explorer-heading h3 em { color: var(--brass-light); font-weight: 400; }
.app-explorer-heading > p { margin: 0 0 7px; color: rgba(255,255,255,.57); font-size: 12px; }
.app-explorer .app-deck { margin-top: clamp(30px, 4vw, 54px); }
.app-feature-row { margin-top: clamp(38px, 4.5vw, 62px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.16); }
.app-feature-row article { min-width: 0; padding: 24px 24px 0 0; }
.app-feature-row article + article { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.13); }
.app-feature-row small { color: #d3b477; font-size: 8px; font-weight: 750; letter-spacing: .16em; }
.app-feature-row h4 { margin: 16px 0 9px; font-family: var(--serif); font-size: clamp(24px, 2.15vw, 34px); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.app-feature-row p { max-width: 32ch; margin: 0; color: rgba(255,255,255,.56); font-size: 12px; line-height: 1.55; }

.proof { position: relative; }
.proof-heading {
  padding-top: 18px; border-top: 1px solid var(--line);
}
.proof-heading h2 {
  margin: 0; max-width: 900px; font-family: var(--serif); font-size: clamp(56px, 6vw, 94px); font-weight: 400;
  line-height: .92; letter-spacing: -.055em;
}
.proof-band-title { margin-top: 42px; padding-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); }
.proof-band-title strong { font-size: 13px; letter-spacing: .01em; }
.proof-band-title span { color: var(--muted); font-size: 11px; }
.proof-people-title, .proof-more-title { padding-top: 0; align-items: center; border-top: 0; }
.proof-people-title strong, .proof-more-title strong { display: flex; flex: 1; align-items: center; gap: 20px; font-family: var(--serif); font-size: clamp(32px, 3.2vw, 48px); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.proof-people-title strong { white-space: nowrap; }
.proof-people-title strong::after, .proof-more-title strong::after { content: ""; flex: 1; min-width: 44px; height: 1px; background: var(--line); }
.proof-people-title span, .proof-more-title span { flex: none; }
.video-story-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; }
.video-story-card { min-width: 0; }
.video-story-media { width: 100%; aspect-ratio: 16 / 9; position: relative; display: block; overflow: hidden; padding: 0; border: 0; border-radius: 3px; background: #181714; cursor: pointer; }
.video-story-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .4s var(--ease), filter .25s ease; }
.video-story-media > span { width: 54px; height: 38px; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; background: rgba(17,17,15,.84); box-shadow: 0 10px 28px rgba(0,0,0,.28); transform: translate(-50%, -50%); transition: background .25s, transform .25s; }
.video-story-media i { width: 0; height: 0; margin-left: 3px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #fff; }
.video-story-media:hover img, .video-story-media:focus-visible img { transform: scale(1.025); filter: brightness(.82); }
.video-story-media:hover > span, .video-story-media:focus-visible > span { background: var(--brass); transform: translate(-50%, -50%) scale(1.05); }
.video-story-media:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.video-story-card blockquote { min-height: 3.6em; margin: 15px 1px 0; font-family: var(--serif); font-size: clamp(17px, 1.35vw, 21px); font-weight: 600; line-height: 1.2; letter-spacing: -.018em; }
.video-story-card > p { margin: 10px 1px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.video-story-card strong { font-size: 12px; line-height: 1.3; }
.video-story-card > p span { color: var(--muted); font-size: 9px; line-height: 1.3; text-align: right; }
.proof-more-title { margin-top: clamp(50px, 5vw, 72px); }
.proof-video-wall { margin-top: 16px; }
.proof-autoplay-grid { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.proof-autoplay-feature { min-height: 0; aspect-ratio: 9 / 16; position: relative; overflow: hidden; background: #11110f; color: #fff; }
.proof-autoplay-feature video,
.proof-autoplay-feature iframe { width: 100%; height: 100%; min-height: 0; display: block; border: 0; object-fit: cover; background: #11110f; }
.proof-autoplay-feature::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(10,10,9,.88)); pointer-events: none; }
.proof-autoplay-feature > div { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 6px; pointer-events: none; }
.proof-autoplay-feature small { color: #d3b477; font-size: 8px; font-weight: 750; letter-spacing: .16em; }
.proof-autoplay-feature strong { max-width: 12ch; font-family: var(--serif); font-size: clamp(21px, 1.65vw, 27px); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.proof-autoplay-feature span { color: rgba(255,255,255,.65); font-size: 10px; }
.proof-autoplay-feature .ambient-film-sound { left: 14px; right: auto; }
.kol-film-grid { min-width: 0; margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 14px; }
.kol-film-card { min-width: 0; }
.kol-film-media { width: 100%; aspect-ratio: 16 / 9; position: relative; display: block; overflow: hidden; padding: 0; border: 0; border-radius: 3px; background: #181714; cursor: pointer; }
.kol-film-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .4s var(--ease), filter .25s ease; }
.kol-film-media > span { width: 42px; height: 30px; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 3px; background: rgba(17,17,15,.84); box-shadow: 0 8px 24px rgba(0,0,0,.25); transform: translate(-50%, -50%); transition: background .25s, transform .25s; }
.kol-film-media i { width: 0; height: 0; margin-left: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #fff; }
.kol-film-media:hover img, .kol-film-media:focus-visible img { transform: scale(1.025); filter: brightness(.82); }
.kol-film-media:hover > span, .kol-film-media:focus-visible > span { background: var(--brass); transform: translate(-50%, -50%) scale(1.05); }
.kol-film-media:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.kol-film-card > p { margin: 9px 1px 0; }
.kol-film-card strong { display: block; font-family: var(--serif); font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.kol-film-card > p span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.3; }
.proof-press-feature { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr); border-block: 1px solid var(--line); background: #eee9e0; }
.proof-press-feature figure { min-width: 0; margin: 0; overflow: hidden; }
.proof-press-play { height: 100%; aspect-ratio: 16 / 10; border-radius: 0; }
.proof-press-feature figure img { width: 100%; height: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; object-position: center; }
.proof-press-feature > div { padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; }
.proof-press-feature h3 { margin: 14px 0 0; font-family: var(--serif); font-size: clamp(38px, 4vw, 60px); font-weight: 400; line-height: .94; letter-spacing: -.045em; }
.proof-press-feature h3 em { color: var(--brass-text); font-weight: 400; }
.proof-press-feature > div > p:last-child { max-width: 47ch; margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.proof-people-title { margin-top: 54px; }
.professional-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.professional-card { min-width: 0; margin: 0; }
.professional-card img { width: 100%; height: auto; aspect-ratio: 1; display: block; object-fit: cover; filter: saturate(.82); transition: filter .3s var(--ease), transform .35s var(--ease); }
.professional-card:hover img { filter: saturate(1); transform: translateY(-3px); }
.professional-card figcaption { margin-top: 12px; }
.professional-card figcaption strong { display: block; font-size: 12px; line-height: 1.25; }
.professional-card figcaption > span { min-height: 2.6em; margin-top: 4px; display: block; color: var(--muted); font-size: 9px; line-height: 1.35; }
.professional-card blockquote { margin: 12px 0 0; font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.28; letter-spacing: -.012em; }

.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; }

.integration-ecosystem { position:relative; overflow:hidden; padding:clamp(92px,8vw,138px) 0; color:#f7f2e8; background:radial-gradient(circle at 12% 10%,rgba(164,72,39,.24),transparent 31%),radial-gradient(circle at 88% 74%,rgba(198,149,71,.2),transparent 35%),#11110f; }
.integration-ecosystem::before { content:""; position:absolute; inset:0; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size:30px 30px; mask-image:linear-gradient(90deg,#000,transparent 62%); }
.integration-ecosystem > .section-shell { position:relative; }
.integration-ecosystem-heading { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(48px,7vw,110px); align-items:end; }
.integration-ecosystem-heading h2 { max-width:900px; margin:18px 0 0; font-family:var(--serif); font-size:clamp(54px,6vw,92px); font-weight:400; line-height:.92; letter-spacing:-.055em; }
.integration-ecosystem-heading h2 em { color:#d3b477; font-weight:400; }
.integration-ecosystem-heading > p { max-width:650px; margin:0; color:rgba(255,255,255,.58); font-size:15px; line-height:1.7; }
.integration-ecosystem-stage { margin-top:clamp(50px,5.5vw,78px); padding:clamp(18px,2.4vw,34px); border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(20,19,16,.72); box-shadow:0 34px 90px rgba(0,0,0,.24); }
.native-apps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.12); border-left:1px solid rgba(255,255,255,.12); }
.native-apps > span { min-width:0; min-height:72px; padding:12px; border-right:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.52); font-size:11px; transition:color .28s,background .28s,box-shadow .28s; }
.native-apps > span.is-active { color:#fff; background:rgba(255,255,255,.065); box-shadow:inset 0 -2px 0 #d3b477; }
.native-apps i { width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; font-style:normal; }
.native-apps svg { width:100%; height:100%; display:block; overflow:visible; }
.native-apps .notion-logo { padding:2px; border-radius:6px; background:#fff; }
.integration-action-demo { min-height:215px; padding:34px 2%; display:grid; grid-template-columns:minmax(180px,1fr) minmax(44px,.28fr) minmax(150px,.62fr) minmax(44px,.28fr) minmax(180px,1fr); gap:clamp(10px,1.7vw,26px); align-items:center; }
.integration-action-demo > div:not(.integration-agent-core) { min-height:105px; padding:18px; border:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,255,255,.025); }
.integration-action-demo small,.integration-agent-core small { color:rgba(255,255,255,.42); font-size:7px; font-weight:700; letter-spacing:.14em; }
.integration-action-demo > div > strong { font-family:var(--serif); font-size:clamp(20px,1.8vw,28px); font-weight:400; line-height:1.08; }
.integration-signal { width:100%; height:1px; position:relative; display:block; overflow:hidden; background:rgba(211,180,119,.2); }
.integration-signal::after { content:""; width:42%; height:100%; position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,transparent,#f3d795,transparent); filter:drop-shadow(0 0 5px #d3b477); animation:integration-flow 2.35s var(--ease) infinite; }
.integration-signal-out::after { animation-delay:.58s; }
.integration-action-demo em { width:fit-content; padding:4px 6px; border:1px solid rgba(211,180,119,.44); color:#e4c88f; font-size:6px; font-style:normal; letter-spacing:.11em; }
.integration-agent-core { display:grid; justify-items:center; gap:6px; text-align:center; }
.integration-agent-core b { width:72px; height:72px; display:grid; place-items:center; background:linear-gradient(145deg,#eee1bf,#be9050); color:#17140f; font-family:var(--serif); font-size:51px; font-weight:400; box-shadow:0 0 0 10px rgba(211,180,119,.055),0 0 42px rgba(198,149,71,.17); animation:integration-core-pulse 2.35s var(--ease) infinite; }
.integration-agent-core b img { width:100%; height:100%; display:block; object-fit:cover; }
.integration-agent-core strong { font-size:11px!important; font-family:var(--sans)!important; font-weight:650!important; }
.native-app-footnote { margin:0; padding-top:17px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.44); font-size:11px; text-align:center; }
.integration-layers { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.16); margin-top:18px; }
.integration-layers article { min-height:250px; padding:30px 28px; border-right:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; }
.integration-layers article:last-child { border-right:0; }
.integration-layers article > span { color:#b99a62; font-size:8px; font-weight:750; letter-spacing:.15em; }
.integration-layers strong { margin:auto 0 15px; font-family:var(--serif); font-size:clamp(29px,2.8vw,43px); font-weight:400; line-height:1.02; }
.integration-layers p { margin:0; color:rgba(255,255,255,.52); font-size:12px; line-height:1.6; }
@keyframes integration-flow { 0%{transform:translateX(-115%);opacity:0} 18%{opacity:1} 82%{opacity:1} 100%{transform:translateX(255%);opacity:0} }
@keyframes integration-flow-vertical { 0%{transform:translateY(-115%);opacity:0} 18%{opacity:1} 82%{opacity:1} 100%{transform:translateY(255%);opacity:0} }
@keyframes integration-core-pulse { 0%,100%{box-shadow:0 0 0 10px rgba(211,180,119,.04),0 0 28px rgba(198,149,71,.12)} 50%{box-shadow:0 0 0 14px rgba(211,180,119,.075),0 0 48px rgba(198,149,71,.26)} }

.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(28px, 2.3vw, 42px) clamp(48px, 4vw, 72px); display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(55px, 8vw, 120px); align-items: start; }
/* Three panels, two columns: the tall pen on the left spans both rows, and the
   right column stacks the black pen over the in-hand shot.
   `align-items: end` used to park the single right panel at the bottom, which
   left 447px of empty paper above it — measured, not guessed. The right column
   now defines the height and the left panel stretches to match, so the two
   columns end flush. */
.product-gallery { display: grid; grid-template-columns: 1.08fr .92fr; grid-template-rows: auto auto; gap: 14px; align-items: stretch; position: sticky; top: 110px; }
.gallery-main { grid-column: 1; grid-row: 1 / 3; min-height: 710px; }
.gallery-top { grid-column: 2; grid-row: 1; }
.gallery-detail { grid-column: 2; grid-row: 2; }
/* 0.64 is the photograph's own ratio, so `cover` crops nothing and the pen is
   whole — the same reasoning as the panel below it. The crop was taken to the
   pixel column where the source's headline text begins, which is why it is this
   ratio and not a rounder one. */
.gallery-top { aspect-ratio: 973 / 1520; background: #efeae1; }
.gallery-top img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
/* The panel now carries the photograph's own 720x840 ratio, so `cover` crops
   nothing at all and the pen is whole at every width. A full-height slot here was
   ~1:2.3 against a ~1:1.1 subject, which is why the cap kept being sliced. */
.gallery-detail { aspect-ratio: 720 / 840; }
.gallery-main, .gallery-detail, .gallery-top { 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; }
/* This was height:80% with left:-36%, which blew the photograph up and pushed it
   off the panel — the pen's cap was sliced by the right edge. The slot is ~1:2.4
   and the subject is ~1:1.1, so NO crop of it can hold the whole pen; contain is
   the only fit that never cuts the product. The warm panel becomes its plate,
   which is what the panel beside it already does. */
.gallery-detail img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.product-copy { padding-top: 0; }
.product-copy h2 { font-size: clamp(50px, 4.6vw, 74px); }
.product-description { margin: 0 0 18px; 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; }

/* 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(24px, 2.6vw, 44px); margin: 22px 0 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.pricing-card { min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.pricing-card .included-list { margin-top: 0; }
.pricing-card + .pricing-card { padding-left: clamp(28px, 3vw, 52px); border-left: 1px solid var(--line); }
/* 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; }
/* $129 is now the supporting figure, not the headline — the $0 above it is the
   claim that does the selling. */
.pricing-amount { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pricing-card-software .pricing-highlight { margin-top: 4px; }
.pricing-amount strong { font-family: var(--serif); color: var(--brass-text); font-size: clamp(30px, 2.7vw, 38px); 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-free { margin: 2px 0 2px; }
.pricing-amount, .pricing-free { min-height: 104px; }
/* nowrap: at the card's real width "/ month" broke to its own line and left the
   $0 hanging. The pair is one figure and has to stay one. */
.pricing-zero { margin: 0; display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.pricing-zero strong { font-family: var(--serif); color: var(--brass-text); font-size: clamp(50px, 4.6vw, 64px); font-weight: 500; line-height: .9; letter-spacing: -.035em; }
.pricing-zero span { font-family: var(--serif); color: var(--brass-text); font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.pricing-no-subscription { width: fit-content; margin: 12px 0 0; padding: 10px 13px; white-space: nowrap; color: #fff; background: var(--brass-text); font-size: 10.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.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); }
.pricing-plans-link { width: fit-content; margin-top: 2px; color: var(--ink); border-bottom: 1px solid var(--brass-text); font-size: 12px; font-weight: 650; text-decoration: none; }

.software-plans { padding-block: clamp(42px, 4vw, 72px) clamp(72px, 7vw, 112px); }
.software-plans-head { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr); align-items: end; gap: clamp(36px, 7vw, 110px); }
.software-plans-head h2 { margin-top: 12px; max-width: 13ch; font-size: clamp(36px, 3.8vw, 58px); line-height: .98; letter-spacing: -.045em; }
.software-plans-head > p { max-width: 52ch; color: var(--muted); font-size: 14px; line-height: 1.55; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(24px, 2.6vw, 38px); border-block: 1px solid var(--line); }
.plan-card { min-width: 0; display: flex; flex-direction: column; padding: clamp(16px, 1.7vw, 24px); }
.plan-card + .plan-card { border-left: 1px solid var(--line); }
.plan-card-pro { box-shadow: inset 0 3px 0 var(--brass-text); }
.plan-name { margin: 0; font-family: var(--serif); font-size: clamp(26px, 2.3vw, 36px); line-height: 1; letter-spacing: -.03em; }
.plan-for { min-height: 34px; margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
/* Height from the type scale, not a flat px: "Custom" is set smaller than "$12.99",
   so a fixed min-height leaves the Enterprise rule and list floating above the
   other two. Same defect, and same fix, as .pricing-plan-price on /pricing. */
.plan-price { min-height: calc(clamp(30px, 2.7vw, 42px) * 1.05 + 14px); display: flex; align-items: baseline; gap: 7px; margin: 16px 0 0; }
.plan-price strong { font-family: var(--serif); font-size: clamp(30px, 2.7vw, 42px); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; }
.plan-price span { color: var(--muted); font-size: 12.5px; }
.plan-price-custom strong { font-size: clamp(26px, 2.2vw, 34px); }
.plan-card ul { min-height: 0; display: grid; align-content: start; gap: 6.5px; margin: 11px 0 14px; padding: 11px 0 0; border-top: 1px solid var(--line); list-style: none; }
.plan-card li { position: relative; padding-left: 18px; color: #4f4c46; font-size: 12.5px; line-height: 1.36; }
.plan-card li::before { position: absolute; left: 0; color: var(--brass-text); content: "✓"; }
.plan-card .button { width: 100%; min-height: 44px; margin-top: auto; justify-content: center; font-size: 13px; }

/* The homepage carries its OWN copy of the plan cards — it does not load
   pricing-page.css — so the "plus" divider and the roadmap block need their
   rules here too. Editing /pricing alone left this section untouched for four
   rounds while it was the section actually being looked at. */
.plan-card li.plan-plus { margin-bottom: 1px; padding-left: 0; color: var(--ink); font-size: 11.5px; }
.plan-card li.plan-plus::before { content: none; }
.plan-card li.plan-plus b { font-weight: 650; }
.plan-card .plan-next { margin: 0 0 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.plan-card .plan-next-head { margin: 0 0 9px; color: var(--ink); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.plan-card .plan-next-head span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: none; }
.plan-card .plan-next ul { min-height: 0; margin: 0; padding: 0; border-top: 0; gap: 5.5px; }
.plan-card .plan-next li { padding-left: 18px; color: var(--muted); font-size: 11.5px; }
.plan-card .plan-next li::before { color: var(--muted); content: "+"; font-weight: 600; }
.plans-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
.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(4, 1fr); gap: 55px; background: var(--ink); color: rgba(255,255,255,.56); font-size: 12px; }
/* height:auto, or the width/height ATTRIBUTES win and the wordmark is squashed.
   The file is 300x100 (3:1); CSS set width:180px and left height at the
   attribute's 100px, rendering it 180x100 — the logo compressed 40% on one
   axis, on every page, in the footer. Measured, not guessed: computed
   object-fit was `fill` with a 1.67 aspect error. */
.footer-brand img { width: 180px; height: auto; 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 { width: 310px; min-height: 62px; padding: 7px 7px 7px 16px; position: fixed; z-index: 35; right: 20px; bottom: 20px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 10px; background: rgba(250,248,243,.93); box-shadow: 0 18px 50px rgba(0,0,0,.18); backdrop-filter: blur(16px); transform: translateY(110px); opacity: 0; pointer-events: none; transition: transform .4s var(--ease), opacity .3s ease; }
.mobile-buy-bar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-buy-bar small, .mobile-buy-bar strong { display: block; }
.mobile-buy-bar small { color: var(--brass-text); font-size: 9px; font-weight: 750; letter-spacing: .05em; }
.mobile-buy-bar strong { font-family: var(--serif); font-size: 20px; white-space: nowrap; }
.mobile-buy-bar .button { min-height: 48px; padding-inline: 17px; }
.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 :is(h2, h3) { 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 :is(h2, h3) { 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-poster { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 2; display: block; object-fit: cover; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.proof-video-poster[hidden] { display: none; }
.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, .proof-video-player.is-portrait iframe { width: min(430px, 100%); aspect-ratio: 9 / 16; }
.proof-video-player.is-portrait .proof-video-poster { width: min(430px, 100%); left: 50%; right: auto; transform: translateX(-50%); }
.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; z-index: 3; 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(44px); transition: opacity .72s var(--ease), transform .72s var(--ease); }
.reveal-delay { transition-delay: .12s; }.reveal-delay-2 { transition-delay: .24s; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* THE HERO DOES NOT WAIT FOR JAVASCRIPT.
   ---------------------------------------------------------------------------
   `.js` is set by an inline script in <head>, so `.js .reveal { opacity: 0 }`
   applies to the hero from the very first paint. The hero only becomes visible
   when script.js runs, finds .reveal, and an IntersectionObserver adds
   .is-visible — and script.js is the last tag in <body> with no defer, so that
   is after the whole document has parsed. Then a .72s transition runs on top.

   Measured on a throttled phone: FCP 3.98s, LCP 4.69s. The gap is 0.71s, which
   is the transition, and the LCP element is the hero film's poster — a 4KB WebP
   that had finished downloading at 1.19s. The largest paint on the page was
   waiting on script execution and an animation, not on bytes.

   An element in the first viewport has nothing to reveal: the visitor has not
   scrolled, so the fade-up plays at something they are already looking at. Below
   the fold the effect is the point and is left alone.

   Specificity: .hero .reveal is (0,3,0), matching .js .reveal.is-visible, so this
   has to sit AFTER it to win — and it is not inside a media query, because a
   media query adds no specificity and would lose to the base rule above. */
.js .hero .reveal,
.js .hero .reveal.reveal-delay,
.js .hero .reveal.reveal-delay-2 {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---- 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 the 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; }

.builders { padding-block: clamp(72px, 6vw, 108px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: clamp(36px, 5vw, 76px); align-items: start; border-top: 1px solid var(--line); }
.builders-photo { min-width: 0; margin: 0; position: relative; overflow: hidden; background: #d6d2cb; }
.builders-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 65%, rgba(15,14,12,.18)); }
.builders-photo img { width: 100%; height: auto; aspect-ratio: 1492 / 1054; display: block; object-fit: cover; object-position: center; }
.builders-copy { padding-top: 4px; }
.builders-copy h2 { margin: 16px 0 22px; font-family: var(--serif); font-size: clamp(44px, 4.3vw, 70px); font-weight: 400; line-height: .96; letter-spacing: -.045em; }
.builders-copy h2 em { color: var(--brass-text); font-style: normal; font-weight: 400; }
.builders-copy > h2 + p { max-width: 38ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.builders-credentials { list-style: none; margin: 28px 0 0; padding: 24px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; border-top: 1px solid var(--line); }
.builders-credentials li { min-height: 25px; display: inline-flex; align-items: center; gap: 6px; color: #4f4b44; }
.builders-credentials img { width: auto; max-width: 104px; max-height: 27px; display: block; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease); }
.builders-credentials li:hover img { filter: grayscale(0); opacity: 1; transform: translateY(-1px); }
.builders-credentials .credential-microsoft img { max-width: 86px; }
.builders-credentials .credential-microsoft span { font-size: 13px; font-weight: 650; }
.builders-credentials .credential-yc img { width: 21px; height: 21px; opacity: .78; }
.builders-credentials .credential-yc span { font-size: 11px; font-weight: 650; }

/* "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; }
  .workspace-showcase { width: min(100% - 48px, 1040px); }.shop { gap: 45px; }.product-gallery { grid-template-columns: 1fr; }.gallery-main, .gallery-top, .gallery-detail { grid-column: 1; grid-row: auto; }.gallery-detail, .gallery-top { 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; }
  .professional-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .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) {
  :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: 112px; }.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%; max-height:calc(100svh - 66px); overflow-y:auto; 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), .mobile-nav-group summary { padding: 16px 6px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 26px; }.mobile-menu .button { margin-top: 18px; }.mobile-nav-group summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; }.mobile-nav-group summary::-webkit-details-marker { display:none; }.mobile-nav-group summary span { font-family:var(--sans); font-size:20px; transition:transform .2s var(--ease); }.mobile-nav-group[open] summary span { transform:rotate(45deg); }.mobile-nav-group > div { padding:5px 6px 10px; border-bottom:1px solid var(--line); }.mobile-nav-group > div a { display:block; padding:11px 8px; color:var(--muted); font-size:16px; }
  .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: 14px 20px; text-align: center; flex-wrap: wrap; }.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; }
  .credibility-band { flex-direction: column; align-items: stretch; }.credibility-band > i { width: 100%; height: 1px; }.credibility-group { justify-content: center; }.proof-press-feature { grid-template-columns: 1fr; }.proof-press-feature figure img { aspect-ratio: 16 / 10; }.proof-press-feature > div { min-height: 0; }
  .event-film { grid-template-columns: 1fr; }.event-film-copy { min-height: 330px; }.event-film-frame video { min-height: 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 h2 { font-size: clamp(54px, 13vw, 84px); }.video-story-grid { grid-template-columns: 1fr; }.professional-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.builders { grid-template-columns: 1fr; gap: 32px; }.builders-copy { padding-bottom: 0; }.builders-copy h2 br { display: none; }
  .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%; }
  .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; }
  .integration-ecosystem-heading { grid-template-columns:1fr; gap:28px; }.integration-ecosystem-heading > p { max-width:680px; }.native-apps { grid-template-columns:repeat(2,minmax(0,1fr)); }.integration-action-demo { grid-template-columns:1fr minmax(36px,.2fr) .65fr minmax(36px,.2fr) 1fr; gap:12px; }.integration-layers article { min-height:230px; padding:25px 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; }.software-plans-head { grid-template-columns: 1fr; gap: 22px; }.plan-grid { grid-template-columns: 1fr; }.plan-card + .plan-card { border-left: 0; border-top: 1px solid var(--line); }.plan-for, .plan-price, .plan-card ul { min-height: 0; }.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 :is(h2, h3) { font-size: 48px; }
}

@media (max-width: 560px) {
  section[id] { scroll-margin-top: 80px; }
  .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; }
  .proof-band-title { margin-top: 30px; align-items: flex-start; }.proof-band-title span { max-width: 19ch; text-align: right; }.video-story-grid { gap: 28px; }.video-story-card blockquote { min-height: 0; font-size: 20px; }.video-story-card > p { display: block; margin-top: 8px; }.video-story-card > p span { display: block; margin-top: 3px; text-align: left; }.video-story-media > span { width: 46px; height: 34px; }.proof-more-title, .proof-people-title { align-items: center; }.proof-more-title strong, .proof-people-title strong { gap: 10px; font-size: clamp(20px, 5.7vw, 23px); }.proof-more-title span, .proof-people-title span { display: none; }.proof-autoplay-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.proof-autoplay-feature { width: 100%; aspect-ratio: 9 / 16; margin: 0; }.proof-autoplay-feature > div { left: 10px; right: 10px; bottom: 12px; }.proof-autoplay-feature strong { font-size: clamp(17px, 5vw, 24px); }.proof-autoplay-feature span { font-size: 8px; }.kol-film-grid { grid-template-columns: 1fr; gap: 22px; }.kol-film-card strong { font-size: 16px; }.proof-press-feature { margin-top: 38px; }.proof-press-feature > div { padding: 28px 22px 32px; }.proof-press-feature h3 { font-size: 42px; }.proof-people-title { margin-top: 42px; }.proof-people-title strong { white-space: nowrap; }.professional-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.professional-card figcaption > span { min-height: 0; }.professional-card blockquote { margin-top: 9px; }.builders { padding-block: 72px; }.builders-copy h2 { font-size: clamp(44px, 12.5vw, 58px); }.builders-copy h2 br { display: initial; }
  .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; }.credibility-band { padding: 26px 0; gap: 24px; }.credibility-group { flex-direction: column; gap: 14px; }.credibility-partners > div { flex-wrap: wrap; justify-content: center; gap: 18px 24px; }.credibility-backer img { max-width: 170px; }
  .event-film { margin-top: 44px; }.event-film-copy { min-height: 0; padding: 34px 24px 36px; }.event-film-copy h3 { font-size: 48px; }.event-film-copy > p:last-child { margin-top: 18px; }.event-film-frame video { aspect-ratio: 16 / 9; }
  .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; }
  .app-explorer { width: 100vw; margin-left: calc(50% - 50vw); padding: 34px 18px 40px; }.app-explorer-heading { display: block; }.app-explorer-heading h3 { font-size: 44px; }.app-explorer-heading > p { margin-top: 12px; }.app-explorer .app-deck { --phone-w: 150px; }
  .app-feature-row { grid-template-columns: 1fr; }.app-feature-row article { padding: 22px 0; }.app-feature-row article + article { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.13); }.app-feature-row article:last-child { padding-bottom: 0; }.app-feature-row h4 { font-size: 30px; }
  .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; }
  .integration-ecosystem { padding:76px 0; }.integration-ecosystem-heading h2 { font-size:clamp(46px,13vw,64px); }.integration-ecosystem-stage { padding:10px; border-radius:12px; }.native-apps > span { min-height:60px; padding:9px 8px; gap:7px; font-size:9px; }.native-apps i { width:23px; height:23px; flex-basis:23px; }.integration-action-demo { min-height:0; padding:28px 4px; grid-template-columns:1fr; gap:12px; }.integration-action-demo > div:not(.integration-agent-core) { min-height:94px; }.integration-signal { width:1px; height:42px; justify-self:center; background:rgba(211,180,119,.2); }.integration-signal::after { width:100%; height:42%; inset:0 0 auto; background:linear-gradient(transparent,#f3d795,transparent); animation-name:integration-flow-vertical; }.integration-agent-core { padding:8px 0; }.integration-agent-core b { width:60px; height:60px; font-size:43px; }.native-app-footnote { padding:15px 8px 4px; text-align:left; line-height:1.55; }.integration-layers { grid-template-columns:1fr; }.integration-layers article { min-height:0; padding:25px 4px; border-right:0; border-bottom:1px solid rgba(255,255,255,.14); }.integration-layers article:last-child { border-bottom:0; }.integration-layers strong { margin:26px 0 12px; font-size:34px; }
  .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; }.software-plans { padding-block: 72px; }.software-plans-head h2 { font-size: clamp(46px, 13vw, 60px); }.plan-grid { margin-top: 36px; }.plan-card { padding: 30px 0; }
  .mobile-buy-bar { width: auto; left: 10px; right: 10px; bottom: 10px; min-height: 68px; padding: 8px 8px 8px 17px; border-radius: 12px; }.mobile-buy-bar small { font-size: 10px; }.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 :is(h2, h3) { font-size: 58px; }.proof-video-modal { padding: 78px 12px 22px; align-items: start; }.proof-video-heading .eyebrow { margin-bottom: 8px; }.proof-video-heading :is(h2, h3) { 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 iPhone 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: 14px; 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; }
  /* 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; }
}

/* --- research ---------------------------------------------------------------
 *
 * Ported from home.scriben.ai so the ICML work stops living only on the
 * research subdomain. The ART is pixel-identical to the company version: its
 * colours are literals there too, and the two tokens it does use (--acid,
 * --brass-bright) are redeclared LOCALLY on the section rather than added to
 * :root, so nothing else on this page can pick them up by accident.
 *
 * The TYPE is deliberately not identical. The company site self-hosts
 * Newsreader; this site loads no webfont at all and sets its serif to Iowan Old
 * Style. Shipping Newsreader for one section would give that heading a face no
 * other heading on the page has, which is the actual way a transplant looks
 * wrong. var(--serif) resolves to the host page's face, and the size clamp sits
 * inside the range this page already uses (awards 52-96, ecosystem 54-92).
 */
.research-section {
  --acid: #e8ef9b;
  --brass-bright: #d2a34c;
  padding: clamp(76px, 8vw, 125px) 0;
  color: #fff;
  background: #24221c;
}
.research-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(70px, 9vw, 150px);
  align-items: center;
}
.research-copy h2 {
  max-width: 650px;
  margin: 25px 0 30px;
  font-family: var(--serif);
  font-size: clamp(54px, 5.6vw, 88px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.045em;
}
.research-copy > p:not(.eyebrow) { max-width: 560px; margin: 0; color: #b8b1a4; font-size: 17px; line-height: 1.65; }
.research-copy .button { margin-top: 38px; }
.research-art {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 48%, #d5a144 0 4%, #885826 5%, transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(210, 163, 76, .2), transparent 55%),
    #12110e;
}
.research-art::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image:
    linear-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .2) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, #000, transparent 74%);
}
.paper-meta {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  left: 20px;
  display: flex;
  justify-content: space-between;
  color: #c5beaf;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .14em;
}
.evidence-points { position: absolute; inset: 0; }
.evidence-points i {
  --orbit-size: 48%;
  --orbit-speed: 14s;
  --orbit-phase: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-size);
  aspect-ratio: 1;
  border: 1px solid rgba(232, 239, 155, .13);
  border-radius: 50%;
  animation: evidence-orbit var(--orbit-speed) linear infinite;
}
.evidence-points i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 18px rgba(232, 239, 155, .7);
  transform: translateY(-50%);
}
.evidence-points i:nth-child(1) { --orbit-size: 29%; --orbit-speed: 8s; --orbit-phase: 18deg; }
.evidence-points i:nth-child(2) { --orbit-size: 38%; --orbit-speed: 11s; --orbit-phase: 94deg; animation-direction: reverse; }
.evidence-points i:nth-child(3) { --orbit-size: 47%; --orbit-speed: 13s; --orbit-phase: 156deg; }
.evidence-points i:nth-child(4) { --orbit-size: 55%; --orbit-speed: 17s; --orbit-phase: 238deg; animation-direction: reverse; }
.evidence-points i:nth-child(5) { --orbit-size: 63%; --orbit-speed: 19s; --orbit-phase: 302deg; }
.evidence-points i:nth-child(6) { --orbit-size: 70%; --orbit-speed: 23s; --orbit-phase: 52deg; animation-direction: reverse; }
.evidence-points i:nth-child(7) { --orbit-size: 76%; --orbit-speed: 27s; --orbit-phase: 188deg; }
.evidence-points i:nth-child(1),
.evidence-points i:nth-child(3),
.evidence-points i:nth-child(5),
.evidence-points i:nth-child(7) { border-color: rgba(232, 239, 155, .28); }
.belief-core {
  position: absolute;
  z-index: 2;
  top: 57%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.belief-core strong { color: var(--brass-bright); font-size: 25px; font-weight: 400; }
.research-art > p {
  position: absolute;
  right: 24px;
  bottom: 18px;
  left: 24px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 4vw, 66px);
  line-height: 1;
}
@keyframes evidence-orbit {
  from { transform: translate(-50%, -50%) rotate(var(--orbit-phase)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orbit-phase) + 360deg)); }
}
/* Seven elements orbiting forever is a lot of motion for anyone who asked for
   less of it. The art still reads as a governed boundary when it holds still. */
@media (prefers-reduced-motion: reduce) {
  .evidence-points i { animation: none; }
}
@media (max-width: 1180px) {
  .research-grid { gap: 70px; }
  .research-art { min-height: 520px; }
}
@media (max-width: 900px) {
  .research-grid { grid-template-columns: 1fr; }
  .research-art { min-height: 650px; }
}
@media (max-width: 600px) {
  .research-art { min-height: 430px; }
  .research-art > p { right: 18px; bottom: 18px; left: 18px; font-size: 36px; }
}

/* The #how -> #intelligence seam stacked two full section paddings plus ~50px of
   slack under the process grid, which read as a blank screen between the cards
   and the dark panel. Measured 13 Sep 2026: 78 + 50 + 78 = 206px of nothing.
   Only this one seam is tightened; the rest of the page keeps its rhythm. */
#how { padding-bottom: clamp(26px, 2.6vw, 40px); }
#intelligence { padding-top: clamp(26px, 2.6vw, 40px); }

/* ---- footer social row (homepage uses .site-footer, not .camp-foot) ----- */
.site-footer .foot-social { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 26px; }
.site-footer .foot-social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line, rgba(23,23,20,.14)); color: var(--muted, #6b675d); text-decoration: none; transition: color .18s ease, border-color .18s ease; }
/* The footer ground IS --ink (#171714). Hovering to --ink painted the icon
   in the background colour, so the link a user was pointing at was the one
   they could not see. Measured 15 Sep 2026: contrast 3.83 at rest, 1.17 on
   hover. On a dark ground the hover has to brighten. .camp-foot does the
   same thing on a LIGHT ground, where going to --ink is correct — which is
   why only this rule changes. */
.site-footer .foot-social a:hover { color: #fff; border-color: rgba(255,255,255,.55); }
.site-footer .foot-social svg { width: 17px; height: 17px; fill: currentColor; }