/* Version A, "Quiet signal": editorial and cinematic. Light page, white cards, a serif for display headlines,
   painted landscapes inside cards, yellow only where it carries meaning. Loaded after site.css. */

/* block, not swap: a headline never shows in the fallback first and then jumps to other lines when the font arrives.
   While it loads, Georgia scaled to Instrument Serif's width holds the same lines (measured in WebKit on the site's
   headlines: 0.6% mean width error upright, 1.3% italic), so nothing below moves either. */
@font-face { font-family: 'Instrument Serif'; src: url(/assets/fonts/instrument-serif-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Instrument Serif'; src: url(/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: 'Instrument Serif Fallback'; src: local('Georgia'); font-weight: 400; font-style: normal; size-adjust: 76.3%; }
@font-face { font-family: 'Instrument Serif Fallback'; src: local('Georgia Italic'), local('Georgia-Italic'); font-weight: 400; font-style: italic; size-adjust: 79.1%; }

:root {
  --a-ink: #13281c;
  --a-ink2: #4a5a50;
  --a-mute: #5c6a61;
  --a-line: #e8e5df;
  --a-line2: #d9d5cd;
  --a-soft: #f3f1ec;
  --a-frame: #ebe8e1;
  --a-serif: 'Instrument Serif', 'Instrument Serif Fallback', 'Iowan Old Style', Georgia, serif;
  --a-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
html[data-variant~="a"] .bl { background: var(--bl-light); }
.a-wrap { --wp: 24px; width: 100%; max-width: 1248px; margin-inline: auto; padding-inline: var(--wp); }
.a-sec { padding-block: 104px; }
.a-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 13px/16px var(--font); letter-spacing: 0; color: var(--a-ink2); }
.a-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--bl-primary); flex: none; }
.a-display { margin: 0; font: 400 clamp(54px, 7.2vw, 100px)/.94 var(--a-serif); letter-spacing: -.012em; text-wrap: balance; }
.a-display em, .a-h2 em { font-style: italic; }
.a-display--md { font-size: clamp(46px, 5.8vw, 80px); }
.a-h2 { margin: 0; font: 400 clamp(36px, 3.6vw, 50px)/1.02 var(--a-serif); letter-spacing: -.01em; text-wrap: balance; }
.a-h3 { margin: 0; font: 400 clamp(30px, 2.8vw, 38px)/1.04 var(--a-serif); letter-spacing: -.005em; text-wrap: balance; }
.a-lead { margin: 0; font-size: 18px; line-height: 28px; letter-spacing: -.01em; color: var(--a-ink2); text-wrap: pretty; }
.a-head { max-width: 760px; }
.a-head .a-lead { margin-top: 20px; max-width: 620px; }
.a-h2 + .a-lead { margin-top: 20px; }
.a-head--c { margin: 0 auto 48px; text-align: center; }
.a-head--c .a-lead { margin-inline: auto; }
.a-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; }
.a-head--row > div:first-child { max-width: 760px; }
.a-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.a-ctas--c { justify-content: center; }
.a-u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* buttons */
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
  font: 500 15px/1 var(--font); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.a-btn:active { transform: translateY(1px); }
.a-btn--dark { background: var(--a-ink); color: #fff; }
.a-btn--dark:hover { background: #2d4034; }
.a-btn--light { background: #fff; color: var(--a-ink); box-shadow: inset 0 0 0 1px var(--a-line2); }
.a-btn--light:hover { background: #f4f2ed; }
.a-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.a-link { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px; border-bottom: 1px solid rgba(19, 40, 28, .25);
  font: 500 15px/22px var(--font); color: var(--a-ink); text-decoration: none; transition: border-color .2s ease; }
.a-link svg { width: 14px; height: 14px; transition: transform .25s var(--a-ease); }
.a-link:hover { border-color: var(--a-ink); }
.a-link:hover svg { transform: translateX(3px); }

/* ---------- nav ---------- */
.a-nav { position: sticky; top: 0; z-index: 60; background: rgba(246, 248, 243, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); transition: box-shadow .3s ease; }
.a-nav.is-scrolled { box-shadow: 0 1px 0 rgba(19, 40, 28, .08); }
.a-nav-in { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1248px; height: 64px; margin: 0 auto; padding: 0 24px; }
.a-nav .logo { font-size: 20px; color: var(--a-ink); }
.a-links { display: flex; gap: 2px; }
.a-links .nl { position: relative; padding: 8px 13px; border-radius: 999px; font: 500 14px/20px var(--font); color: var(--a-ink2); text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.a-links .nl:hover { color: var(--a-ink); background: rgba(19, 40, 28, .05); }
.a-links .nl.is-on { color: var(--a-ink); }
.a-links .nl.is-on::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--bl-primary); }
.a-nav-r { justify-self: end; display: flex; align-items: center; gap: 8px; }
.a-menu { display: none; align-items: center; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #ebe8e2; color: var(--a-ink); font: 500 14px/1 var(--font); cursor: pointer; }
.a-sheet { position: absolute; top: 64px; left: 12px; right: 12px; display: grid; gap: 2px; padding: 10px; border-radius: 18px;
  background: rgba(246, 248, 243, .98); box-shadow: inset 0 0 0 1px rgba(19, 40, 28, .1), 0 24px 48px -16px rgba(19, 40, 28, .25); }
.a-sheet[hidden] { display: none; }
.a-sheet a:not(.a-btn) { padding: 12px 14px; border-radius: 10px; font-size: 17px; line-height: 22px; text-decoration: none; }
.a-sheet a:not(.a-btn):hover { background: rgba(19, 40, 28, .05); }
.a-sheet .a-btn { margin-top: 8px; }

/* ---------- hero ---------- */
.a-hero { padding: 64px 0 0; }
.a-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; padding-bottom: 48px; }
.a-hero .a-display { max-width: 9.6em; }
.a-hero-r { padding-bottom: 8px; }
.a-hero-r .a-ctas { margin-top: 28px; }
.a-founders { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; font-size: 14px; line-height: 20px; color: var(--a-ink2); }
.a-avs { display: flex; flex: none; }
.a-avs img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; box-shadow: 0 0 0 2px var(--bl-light); }
.a-avs img + img { margin-left: -8px; }

/* the product tour */
.a-tour { margin: 0; }
.a-tour-box { position: relative; overflow: hidden; aspect-ratio: 1200 / 690; border-radius: 22px; background: #e7c9a4; isolation: isolate; }
.a-tour-bgw { position: absolute; inset: 0; transform: scale(var(--bgz, 1)); transition: transform 1.6s cubic-bezier(.65, 0, .25, 1); }
.a-tour-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: a-kenburns 22s ease-in-out infinite; }
.a-tour-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(19, 40, 28, .06); }
.a-stage { position: absolute; left: 0; top: 0; width: 1200px; height: 690px; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.a-cam { position: absolute; inset: 0; transform-origin: 0 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--z, 1));
  transition: transform 1.6s cubic-bezier(.65, 0, .25, 1); }
.a-win { position: absolute; overflow: hidden; border-radius: 14px; background: #fff; color: var(--a-ink); font-size: 14px; line-height: 19px;
  box-shadow: 0 0 0 1px rgba(19, 40, 28, .07), 0 40px 70px -28px rgba(19, 40, 28, .45), 0 12px 28px -10px rgba(19, 40, 28, .2); }
.a-acc { left: 90px; top: 70px; width: 700px; height: 540px; }
.a-brief { left: 672px; top: 120px; width: 440px; opacity: 0; transform: translateX(36px) scale(.98); transition: opacity .7s ease, transform .9s var(--a-ease); }
.is-brief .a-brief { opacity: 1; transform: none; }
.a-bar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--a-line); font-size: 13px; }
.a-bar b { font-weight: 500; }
.a-dots { display: flex; gap: 6px; }
.a-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e6e2db; }
.a-sync { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--a-ink2); }
.a-sync svg { width: 13px; height: 13px; }
.is-sync .a-sync svg { animation: a-spin 1s ease-in-out; }
.a-checked { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #177650; }
.a-checked svg { width: 13px; height: 13px; }
.a-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px 8px; }
.a-filters span { padding: 5px 10px; border-radius: 999px; background: var(--a-soft); font-size: 12px; line-height: 15px; color: var(--a-ink2); }
.a-filters .is-y { background: var(--bl-yellow-7); color: var(--a-ink); box-shadow: inset 0 0 0 1px var(--bl-yellow-5); }
.a-tbl { padding: 2px 8px 8px; }
.a-tr { display: grid; grid-template-columns: 1.75fr 1fr .55fr 1.25fr .95fr; align-items: center; gap: 10px; height: 56px; padding: 0 12px; border-radius: 10px;
  box-shadow: inset 0 -1px 0 var(--a-line); transition: background-color .5s ease, box-shadow .4s ease; }
.a-th { height: 34px; color: var(--a-mute); font-size: 12px; font-weight: 500; }
.a-tr:last-child { box-shadow: none; }
.a-co { display: flex; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; }
.a-ini { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--c); font: 600 11px/1 var(--font); font-style: normal; color: var(--a-ink); }
.a-ini--lg { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }
.a-fit { display: flex; gap: 4px; }
.a-fit i { width: 7px; height: 7px; border-radius: 2px; background: var(--a-ink); }
.a-fit.f2 i:last-child { background: #dcd8d0; }
.a-own { color: var(--a-ink2); }
.a-quiet { color: var(--a-mute); font-size: 12.5px; }
.a-sig .a-chip { display: none; }
.a-tr.hot { background: var(--bl-yellow-8); }
.a-tr.hot .a-quiet { display: none; }
.a-tr.hot .a-chip { display: inline-flex; animation: a-pop .35s ease both; }
.a-tr.sel { box-shadow: inset 0 0 0 1.5px var(--bl-primary); background: var(--bl-yellow-7); }
.a-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 8px; border-radius: 999px; background: var(--bl-yellow-7);
  box-shadow: inset 0 0 0 1px var(--bl-yellow-5); font-size: 11px; white-space: nowrap; }
.a-chip svg { width: 11px; height: 11px; flex: none; }
.a-chip em { font-style: normal; font-weight: 600; }
.a-chip.is-old { background: #fff; box-shadow: inset 0 0 0 1px var(--a-line2); }
.a-redact { display: inline-block; height: 9px; border-radius: 999px; background: var(--a-ink); opacity: .82; vertical-align: middle; }
.a-redact--soft { background: #e3dfd8; opacity: 1; }
.a-brief-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; }
.a-brief-h b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.a-brief-h span { font-size: 12px; color: var(--a-ink2); }
.a-new { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--bl-primary); font-size: 11px; font-weight: 500; color: var(--a-ink) !important; white-space: nowrap; }
.a-fields { padding: 0 18px; }
.a-field { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--a-line); }
.a-k { padding-top: 1px; font-size: 12.5px; font-weight: 500; color: var(--a-mute); }
.a-v { font-size: 14px; line-height: 21px; }
.a-why-bar { display: flex; align-items: center; gap: 7px; }
.a-why-bar svg { width: 12px; height: 12px; flex: none; }
.a-f-why .a-redact { width: 0; transition: width 1s var(--a-ease); }
.a-why-t { display: block; margin-top: 6px; color: var(--a-ink2); opacity: 0; transition: opacity .6s ease .2s; }
.is-why .a-f-why .a-redact { width: 72%; }
.is-why .a-why-t { opacity: 1; }
.a-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.a-roles span { padding: 4px 10px; border-radius: 999px; background: var(--a-soft); font-size: 12.5px; line-height: 16px; }
.a-brief .a-roles span { opacity: 0; transform: scale(.7); }
.is-who .a-brief .a-roles span { animation: a-pop .35s ease both; }
.is-who .a-brief .a-roles span + span { animation-delay: .15s; }
.a-typed { min-height: 40px; }
.a-typed .a-redact { width: 70px; height: 9px; margin: 0 2px; }
.a-caret { display: inline-block; width: 2px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--a-ink); opacity: 0; }
.is-typing .a-caret { opacity: 1; animation: a-blink 1.1s step-end infinite; }
.a-brief-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 14px 18px 16px; border-top: 1px solid var(--a-line); }
.a-reply { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: #e9f3ec; color: #177650; font-size: 12.5px; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: scale(.8); transition: opacity .35s ease, transform .35s ease; }
.a-reply svg { width: 13px; height: 13px; }
.is-reply .a-reply { opacity: 1; transform: none; }
.a-send { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--bl-primary); font-size: 13px; font-weight: 500; transition: background-color .3s ease, transform .2s ease; }
.a-send svg { width: 13px; height: 13px; display: none; }
.is-sent .a-send { background: var(--a-ink); color: #fff; }
.is-sent .a-send svg { display: block; }
.a-send-d, .is-sent .a-send-t { display: none; }
.is-sent .a-send-d { display: inline; }
.a-send.press { transform: scale(.96); }
.a-meta { font-size: 12px; color: var(--a-ink2); }
.a-toast { position: absolute; left: 696px; top: 590px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 14px;
  background: var(--a-ink); color: #fff; box-shadow: 0 24px 48px -16px rgba(19, 40, 28, .55); opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .5s ease, transform .6s var(--a-ease); }
.a-toast b { display: block; font-size: 13.5px; line-height: 18px; font-weight: 500; }
.a-toast span span { display: block; font-size: 12px; line-height: 17px; color: #cfccc6; }
.a-toast-i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--bl-primary); color: var(--a-ink); }
.a-toast-i svg { width: 15px; height: 15px; }
.is-toast .a-toast { opacity: 1; transform: none; }
.a-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; fill: var(--a-ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round;
  opacity: 0; transform: translate(var(--cx, 600px), var(--cy, 760px)); transition: transform 1.1s cubic-bezier(.45, 0, .2, 1), opacity .4s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); }
.is-cursor .a-cursor { opacity: 1; }
.a-cursor.click { animation: a-click .3s ease; }
.a-pause { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(246, 248, 243, .75); color: var(--a-ink); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(19, 40, 28, .12); transition: background-color .2s ease; }
.a-pause:hover { background: rgba(255, 255, 255, .95); }
.a-step:focus-visible, .a-pause:focus-visible, .a-seg button:focus-visible, .a-tab:focus-visible, .a-si:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
.a-pause svg, .a-play svg { width: 14px; height: 14px; fill: currentColor; }
.a-pause .pl, .a-play .pl { display: none; }
.a-pause[data-paused] .pa, .a-play[data-paused] .pa { display: none; }
.a-pause[data-paused] .pl, .a-play[data-paused] .pl { display: inline; }
.a-steps { position: absolute; left: 16px; top: 16px; z-index: 3; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(246, 248, 243, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(19, 40, 28, .1); }
.a-step { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 5px; border: 0; border-radius: 999px; background: transparent; font: 500 13px/1 var(--font); color: var(--a-ink2); white-space: nowrap; cursor: pointer;
  transition: background-color .4s ease, color .4s ease; }
.a-step:hover { color: var(--a-ink); }
.a-step i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(19, 40, 28, .08); font: 600 11px/1 var(--font); font-style: normal; transition: background-color .4s ease; }
[data-step="1"] .a-step[data-s="1"], [data-step="2"] .a-step[data-s="2"], [data-step="3"] .a-step[data-s="3"] { background: #fff; color: var(--a-ink); box-shadow: 0 1px 2px rgba(19, 40, 28, .08); }
[data-step="1"] .a-step[data-s="1"] i, [data-step="2"] .a-step[data-s="2"] i, [data-step="3"] .a-step[data-s="3"] i { background: var(--bl-primary); }
/* while the brief covers the table (steps 2 and 3), its Owner column fades out instead of peeking out beside it */
.a-tbl .a-own, .a-tbl .a-th > span:last-child { transition: opacity .4s ease; }
[data-step="2"] .a-tbl .a-own, [data-step="3"] .a-tbl .a-own, [data-step="2"] .a-tbl .a-th > span:last-child,
[data-step="3"] .a-tbl .a-th > span:last-child { opacity: 0; }
[data-rise] .w { display: inline-block; animation: a-rise-in .9s var(--a-ease) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
@keyframes a-rise-in { from { opacity: 0; transform: translateY(.32em); } to { opacity: 1; transform: none; } }
.a-tour figcaption { margin-top: 14px; font-size: 13px; line-height: 20px; color: var(--a-ink2); }
.is-paused .a-tour-bg, .is-paused .a-caret { animation-play-state: paused; }

/* ---------- statement ---------- */
.a-state { padding-block: 136px 88px; }
.a-state-in { max-width: 1060px; text-align: center; }
.a-big { margin: 0; font: 400 clamp(36px, 4.4vw, 62px)/1.08 var(--a-serif); letter-spacing: -.008em; color: var(--a-ink); text-wrap: balance; }
[data-words] .w { color: #cdc8bf; transition: color .5s ease; transition-delay: calc(var(--i) * 32ms); }
[data-words].in .w { color: inherit; }
.a-state-sub { max-width: 640px; margin: 40px auto 0; }
.a-state-sub p { margin: 0; font-size: 18px; line-height: 28px; color: var(--a-ink2); }
.a-state-sub .a-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 14px; line-height: 18px; box-shadow: inset 0 0 0 1px var(--a-line); }
.a-note svg { width: 14px; height: 14px; flex: none; }
.a-rx { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; max-width: 1000px; margin: 40px auto 0; padding: 24px 28px 22px; border-radius: 22px; background: #fff; text-align: left; box-shadow: inset 0 0 0 1px var(--a-line); }
.a-rx > .a-rx-k, .a-rx > .a-link { grid-column: 1 / -1; justify-self: start; }
.a-rx-k { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--a-ink2); }
.a-rx-k::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--bl-primary); }
.a-rx-row { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 16px 0 18px; border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); }
.a-rx-row p { position: relative; margin: 0; font-size: 17px; line-height: 25px; color: var(--a-ink); }
.a-rx-row p span { display: block; margin-bottom: 4px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-mute); }
.a-rx-row p + p::before { content: ""; position: absolute; left: 2px; top: -20px; width: 9px; height: 9px; border-right: 1.5px solid var(--bl-gold); border-bottom: 1.5px solid var(--bl-gold); transform: rotate(45deg); }
.a-rx .a-link { margin-top: 16px; }
.a-proof { display: grid; gap: 6px; max-width: 560px; margin: 28px auto 0; padding: 18px 22px; border-radius: 18px; background: #fff; text-align: left; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--a-line); transition: transform .3s var(--a-ease), box-shadow .3s ease; }
.a-proof:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--a-line2), 0 18px 36px -22px rgba(19, 40, 28, .35); }
.a-proof-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--a-ink2); }
.a-proof-k::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--bl-primary); }
.a-proof-t { font: 400 22px/1.2 var(--a-serif); color: var(--a-ink); text-wrap: pretty; }
.a-proof-l { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 500; }
.a-proof-l svg { width: 14px; height: 14px; transition: transform .25s var(--a-ease); }
.a-proof:hover .a-proof-l svg { transform: translateX(3px); }

/* ---------- rewrite ---------- */
.a-rw { padding-top: 40px; }
.a-frame { max-width: 960px; margin: 0 auto; padding: 14px 18px 22px; border-radius: 26px; background: var(--a-frame); }
.a-frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 14px; }
.a-rw-status { display: grid; justify-items: start; }
.a-st { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; white-space: nowrap; }
.a-st svg { width: 13px; height: 13px; }
.a-st--gen { background: #fff; color: var(--a-ink2); }
.a-st--busy { background: var(--a-ink); color: #fff; }
.a-st--done { background: var(--bl-primary); color: var(--a-ink); }
.s-gen .a-st--gen, .s-busy .a-st--busy, .s-done .a-st--done { opacity: 1; transform: none; }
.a-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: a-spin .8s linear infinite; }
.a-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(19, 40, 28, .08); }
.a-seg button { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font: 500 13px/1 var(--font); color: var(--a-ink2); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.a-seg button:hover { color: var(--a-ink); }
.a-seg button[aria-pressed="true"] { background: var(--a-ink); color: #fff; }
.a-seg button[data-v="sig"][aria-pressed="true"] { background: var(--bl-primary); color: var(--a-ink); }
.a-seg .a-spin { display: none; border-color: rgba(19, 40, 28, .25); border-top-color: var(--a-ink); }
.s-busy .a-seg .a-spin { display: block; }
.a-rw-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.a-frame { position: relative; }
.a-replay { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  font: 500 13px/1 var(--font); color: var(--a-ink2); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.a-replay:hover { background: rgba(19, 40, 28, .06); color: var(--a-ink); }
.a-replay svg { width: 13px; height: 13px; }
.a-mail { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(19, 40, 28, .05); }
.a-mail-h { padding: 16px 32px 12px; border-bottom: 1px solid var(--a-line); }
.a-mail-h p { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 14px; line-height: 28px; }
.a-mk { width: 56px; flex: none; color: var(--a-mute); }
.a-sw { display: grid; }
.a-sw > span { grid-area: 1 / 1; transition: opacity .5s ease; }
.a-sw .af { opacity: 0; }
.s-done .a-sw .b4 { opacity: 0; }
.s-done .a-sw .af { opacity: 1; }
.a-mail-b { display: grid; padding: 22px 32px 18px; }
.a-mail-b > div { grid-area: 1 / 1; }
.a-mail-b p { margin: 0 0 10px; font-size: 16px; line-height: 2.15; color: var(--a-ink); }
.a-before { transition: opacity .6s ease, filter .6s ease; }
.s-busy .a-before { opacity: .42; }
.s-busy .a-before mark { text-decoration: line-through; text-decoration-color: rgba(180, 83, 42, .85); text-decoration-thickness: 1.5px; }
.s-busy .a-before mark::after { opacity: 0; }
.s-done .a-before { opacity: 0; filter: blur(2px); }
.a-after p { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s var(--a-ease); }
.s-done .a-after p { opacity: 1; transform: none; }
.s-done .a-after p:nth-child(2) { transition-delay: .35s; }
.s-done .a-after p:nth-child(3) { transition-delay: .7s; }
.a-mail mark { position: relative; padding: 2px 1px; border-radius: 3px; background: transparent; color: inherit; transition: background-color .4s ease, box-shadow .4s ease; }
.a-mail mark::after { content: attr(data-note); position: absolute; left: 0; top: var(--ny, calc(100% - 1px)); font: 500 11.5px/14px var(--font); letter-spacing: 0; color: #b4532a; white-space: nowrap;
  opacity: 0; transform: translateY(-3px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.a-mail mark.flip::after { left: auto; right: 0; }
.a-mail mark.on { background: rgba(180, 83, 42, .12); box-shadow: inset 0 -1.5px 0 rgba(180, 83, 42, .55); }
.a-mail mark.on::after { opacity: 1; transform: none; }
.a-mail mark.good.on { background: rgba(196, 238, 140, .24); box-shadow: inset 0 -1.5px 0 rgba(31, 107, 62, .7); }
.a-mail mark.good::after { color: #177650; }
.a-frame-note { margin: 16px 0 0; font-size: 13px; line-height: 20px; color: var(--a-ink2); text-align: center; }

/* ---------- the system ---------- */
.a-sys-top { margin-bottom: 40px; }
.a-sys-top > div:first-child { max-width: 860px; }
.a-sys-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.a-sys-l .a-scope { margin-top: 0; }
.a-sys-cap { display: none; }
.a-scope { display: flex; gap: 12px; margin: 28px 0 0; padding: 14px 16px; border-radius: 14px; background: #fff; font-size: 15px; line-height: 22px; color: var(--a-ink2); box-shadow: inset 0 0 0 1px var(--a-line); }
.a-scope svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--a-ink); }
.a-sys-head { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--a-line); font-size: 13px; font-weight: 500; color: var(--a-ink2); }
.a-play { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; color: var(--a-ink);
  font: 500 13px/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px var(--a-line2); }
.a-play:hover { background: #f4f2ed; }
.a-layer { margin: 22px 0 4px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-mute); }
.a-si { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 6px; width: 100%; padding: 13px 0 15px; border: 0; border-bottom: 1px solid var(--a-line);
  background: none; color: #5c6a61; text-align: left; font: inherit; cursor: pointer; }
.a-si .n { font: 500 12px/22px var(--mono); letter-spacing: 0; }
.a-si .t { font-size: 17px; line-height: 22px; font-weight: 500; color: var(--a-ink2); transition: color .25s ease; }
.a-si .d { grid-column: 2; margin-top: 4px; font-size: 15px; line-height: 22px; transition: color .25s ease; }
.a-si:hover .t, .a-si.is-on .t { color: var(--a-ink); }
.a-si.is-on .d { color: var(--a-ink2); }
.a-si.is-on .n { color: var(--a-ink); }
.a-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bl-primary); transform: scaleX(0); transform-origin: 0 50%; }
.a-si.is-on .a-prog { transform: scaleX(1); }
.is-auto .a-si.is-on .a-prog { animation: a-prog var(--dur, 6.5s) linear both; }
.is-held .a-si.is-on .a-prog { animation-play-state: paused; }
.a-sys-l > .a-link { margin-top: 28px; }
.a-sys-r { position: sticky; top: 104px; }
.a-sys-card { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 7 / 6.2; border-radius: 22px; background: #c9b9a4; isolation: isolate; }
.a-sys-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.a-sys-vis { grid-area: 1 / 1; width: min(460px, 84%); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .5s ease, transform .6s var(--a-ease); pointer-events: none; }
.a-sys-vis.is-on { opacity: 1; transform: none; pointer-events: auto; }
.a-sys-vis .mv { box-shadow: 0 0 0 1px rgba(19, 40, 28, .06), 0 40px 70px -28px rgba(19, 40, 28, .45), 0 12px 28px -10px rgba(19, 40, 28, .18); }
.a-sys-vis.is-on .mv > *, .a-sys-vis.is-on .prow, .a-sys-vis.is-on .seq { animation: a-rise .5s var(--a-ease) both; }
.a-sys-vis.is-on .mv > *:nth-child(2), .a-sys-vis.is-on .prow:nth-child(3) { animation-delay: .08s; }
.a-sys-vis.is-on .mv > *:nth-child(3), .a-sys-vis.is-on .prow:nth-child(4) { animation-delay: .16s; }
/* the loop's labels and caption centre with `translate`, which the rise animation's `transform: none` leaves alone */
.a-sys-vis .loop-l { transform: none; translate: -50% -50%; }
.a-sys-vis .loop-cap { transform: none; translate: 0 -50%; }
.a-sys-vis.is-on .mv > *:nth-child(4), .a-sys-vis.is-on .prow:nth-child(5) { animation-delay: .24s; }

/* ---------- the deliverable ---------- */
.a-dl { padding-top: 64px; }
.a-dl-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.a-dl-list { counter-reset: n; margin: 32px 0 0; padding: 0; list-style: none; }
.a-dl-list li { counter-increment: n; display: grid; grid-template-columns: 36px 1fr; gap: 2px 6px; padding: 14px 0; border-top: 1px solid var(--a-line); }
.a-dl-list li::before { content: counter(n); grid-row: 1 / 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bl-primary); font: 500 12px/1 var(--font); }
.a-dl-list b { font-weight: 500; }
.a-dl-list span { grid-column: 2; font-size: 15px; line-height: 22px; color: var(--a-ink2); }
.a-paint { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 7 / 6; border-radius: 22px; background: #d9c39f; isolation: isolate; }
.a-paint > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.a-paint--plain { aspect-ratio: auto; padding: 56px 24px; background-color: #ebefe8;
  background-image: radial-gradient(rgba(19, 40, 28, .14) 1px, transparent 1.2px); background-size: 18px 18px; }
.a-paint--plain .a-doc { width: min(540px, 100%); }
.a-paint--doc { aspect-ratio: auto; padding: 64px 40px; }
.a-paint--doc .a-doc { width: min(540px, 100%); box-shadow: 0 30px 60px -28px rgba(19, 40, 28, .45), 0 0 0 1px rgba(19, 40, 28, .06); }
.a-doc { width: min(500px, 88%); padding: 4px 22px 10px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(19, 40, 28, .06), 0 40px 70px -28px rgba(19, 40, 28, .45), 0 12px 28px -10px rgba(19, 40, 28, .18); }
.a-doc-h { display: flex; align-items: center; gap: 12px; padding: 16px 0 14px; }
.a-doc-h b { display: block; font-size: 16px; line-height: 20px; font-weight: 600; }
.a-doc-h span { font-size: 12.5px; color: var(--a-ink2); }
.a-doc-row { display: grid; grid-template-columns: 26px 78px 1fr; gap: 10px; align-items: start; padding: 14px 0; border-top: 1px solid var(--a-line); font-size: 14px; line-height: 21px; }
.a-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bl-primary); font-size: 11.5px; font-weight: 500; }
.a-doc .a-k { padding-top: 2px; }
.a-sub { display: block; margin-top: 6px; color: var(--a-ink2); }
.a-task { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--a-ink); color: #fff; font-size: 12.5px; line-height: 16px; }
.a-task svg { width: 12px; height: 12px; }
.a-doc[data-reveal].in .a-doc-row { animation: a-rise .55s var(--a-ease) both; }
.a-doc[data-reveal].in .a-doc-row:nth-child(3) { animation-delay: .1s; }
.a-doc[data-reveal].in .a-doc-row:nth-child(4) { animation-delay: .2s; }
.a-doc[data-reveal].in .a-doc-row:nth-child(5) { animation-delay: .3s; }

/* ---------- three ways in ---------- */
.a-ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 52px; }
.a-way { display: flex; flex-direction: column; padding: 28px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-line); }
.a-way.is-first { background: linear-gradient(180deg, var(--bl-yellow-7) 0, #fff 160px); box-shadow: inset 0 0 0 1.5px var(--bl-yellow-4); }
.a-way-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.a-cue { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--a-soft); font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--a-ink); }
.a-tagy, .a-tagg { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 500; }
.a-tagy { background: var(--bl-primary); color: var(--a-ink); }
.a-tagg { background: var(--a-soft); color: var(--a-ink2); }
.a-way .a-h3 { font-size: 38px; }
.a-way-d { margin: 8px 0 0; font-size: 16px; line-height: 24px; }
.a-fmt { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--a-line); font-size: 14px; line-height: 20px; color: var(--a-ink2); }
.a-checks { display: grid; gap: 11px; margin: 18px 0 30px; padding: 0; list-style: none; }
.a-checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 22px; }
.a-checks svg { width: 16px; height: 16px; margin-top: 3px; }
.a-way .a-btn { margin-top: auto; align-self: flex-start; }
.a-ways-grid[data-reveal].in .a-way { animation: a-rise .7s var(--a-ease) both; }
.a-ways-grid[data-reveal].in .a-way:nth-child(2) { animation-delay: .1s; }
.a-ways-grid[data-reveal].in .a-way:nth-child(3) { animation-delay: .2s; }
.a-ways-end { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 36px 0 0; font-size: 16px; color: var(--a-ink2); }
.a-ways-end svg { width: 18px; height: 18px; color: var(--a-ink); }

/* ---------- platform bento ---------- */
.a-ea { display: inline-flex; margin-left: 4px; padding: 2px 9px; border-radius: 999px; background: var(--bl-yellow-6); font-size: 12px; line-height: 16px; color: var(--a-ink); }
.a-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 52px; }
.a-bc { display: flex; flex-direction: column; padding: 10px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-line); }
.a-bc--wide { grid-column: span 2; }
.a-bc-ui { position: relative; display: grid; align-content: center; gap: 8px; height: 250px; padding: 20px; overflow: hidden; border-radius: 15px; background: var(--a-soft); }
.a-bc-tx { padding: 18px 14px 14px; }
.a-bc-tx h3 { margin: 8px 0 6px; font: 500 18px/24px var(--font); letter-spacing: -.015em; }
.a-bc-tx p:not(.a-status) { margin: 0; font-size: 15px; line-height: 22px; color: var(--a-ink2); }
.a-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 17px; color: var(--a-ink2); }
.a-status i { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--a-mute); }
.a-status i.y { background: var(--bl-primary); }
.a-status i.g { background: #177650; }
.a-status i.p { background: var(--data-8); }
.a-crm-r, .a-sig-r, .a-comp-r { display: grid; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px; background: #fff; font-size: 13.5px; line-height: 18px;
  box-shadow: 0 1px 2px rgba(19, 40, 28, .05); }
.a-crm-r { grid-template-columns: 30px 1fr auto auto; padding: 7px 10px; }
.a-bc--wide .a-bc-ui { height: auto; min-height: 250px; gap: 6px; padding: 16px 18px; }
.a-crm-r b, .a-sig-r b { font-weight: 500; }
.a-crm-i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font: 700 14px/1 var(--font); }
.a-crm-i svg { width: 16px; height: 16px; }
.a-crm-i.hs { background: #fff1ec; color: #ff7a59; }
.a-crm-i.sf { background: #e9f5fc; color: #00a1e0; }
.a-crm-i.pd { background: #ecf6ee; color: #1f7a3c; }
.a-crm-i.zo { background: #fdeeee; color: #d8252b; }
.a-crm-i.md { background: #eef0fb; color: #3651c6; }
.a-st-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--a-ink2); white-space: nowrap; }
.a-st-dot::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: #cfcac1; }
.a-st-dot.y::before { background: var(--bl-primary); }
.a-mini-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--a-line2); }
.a-mini-btn.is-dark { background: var(--a-ink); color: #fff; box-shadow: none; }
.a-sig-r { grid-template-columns: 1fr auto; }
.a-comp-r { grid-template-columns: auto 1fr; }
.a-tag { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.a-tag.t1 { background: var(--data-2); }
.a-tag.t2 { background: var(--data-6); }
.a-tag.t3 { background: var(--data-9); }
.a-bars { align-content: end; }
.a-bars-in { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 0 4px; border-bottom: 1px solid var(--a-line2); }
.a-bars-in i { flex: 1; height: calc(var(--h) * 100%); border-radius: 6px 6px 2px 2px; background: #d9d4cb; transform-origin: 50% 100%; }
.a-bars-in i:first-child { background: var(--bl-primary); }
.a-bars .a-meta { display: block; margin-top: 12px; }
.a-wb { place-items: center; }
.a-wb-card { width: 100%; max-width: 300px; padding: 14px 16px 10px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(19, 40, 28, .06), 0 16px 32px -16px rgba(19, 40, 28, .25); }
.a-wb-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 500; }
.a-wb-h svg { width: 14px; height: 14px; }
.a-wb-s { margin: 10px 0 6px; font-size: 10.5px; line-height: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--a-mute); }
.a-wb-card .a-redact { display: block; height: 8px; margin-bottom: 6px; }
.a-bc--strip { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 48px; padding: 26px 30px; }
.a-data { display: flex; align-items: center; gap: 16px; flex: none; }
.a-data > svg { width: 30px; height: 30px; }
.a-data h3 { margin: 0; font: 500 18px/24px var(--font); }
.a-data p { margin: 2px 0 0; font-size: 15px; color: var(--a-ink2); }
.a-data-l { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.a-data-l b { display: block; font-size: 15px; line-height: 22px; font-weight: 500; }
.a-data-l span { font-size: 14px; line-height: 21px; color: var(--a-ink2); }
.a-bc[data-reveal].in .a-crm-r, .a-bc[data-reveal].in .a-sig-r, .a-bc[data-reveal].in .a-comp-r { animation: a-rise .5s var(--a-ease) both; }
.a-bc[data-reveal].in .a-bc-ui > :nth-child(2) { animation-delay: .08s; }
.a-bc[data-reveal].in .a-bc-ui > :nth-child(3) { animation-delay: .16s; }
.a-bc[data-reveal].in .a-bc-ui > :nth-child(4) { animation-delay: .24s; }
.a-bc[data-reveal].in .a-bc-ui > :nth-child(5) { animation-delay: .32s; }
.a-bc[data-reveal].in .a-bars-in i { animation: a-grow-y .9s var(--a-ease) both; }
.a-bc[data-reveal].in .a-bars-in i:nth-child(2) { animation-delay: .06s; }
.a-bc[data-reveal].in .a-bars-in i:nth-child(3) { animation-delay: .12s; }
.a-bc[data-reveal].in .a-bars-in i:nth-child(4) { animation-delay: .18s; }
.a-bc[data-reveal].in .a-bars-in i:nth-child(5) { animation-delay: .24s; }
.a-bc[data-reveal].in .a-bars-in i:nth-child(6) { animation-delay: .3s; }

/* ---------- who it is for ---------- */
.a-tabs { margin-top: 44px; }
.a-tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1180px) { .a-tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 58px; padding: 0 20px; border: 0; border-radius: 16px;
  background: #ebe8e2; color: var(--a-ink2); font: 500 16px/20px var(--font); letter-spacing: -.01em; text-align: left; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.a-tab .n { color: var(--a-ink2); font-weight: 400; }
.a-tab:hover { background: #e3dfd8; color: var(--a-ink); }
.a-tab[aria-selected="true"] { background: var(--bl-primary); color: var(--a-ink); }
.a-tab[aria-selected="true"] .n { color: var(--a-ink); }
.a-tp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-top: 10px; padding: 40px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-line); }
.a-tp[hidden] { display: none; }
.a-tp:not([hidden]) { animation: a-fade .45s ease both; }
.a-tp-tx p { margin: 18px 0 26px; font-size: 17px; line-height: 27px; color: var(--a-ink2); }
.a-tp-img { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 16px; }
.a-tp-img img { width: 100%; height: 100%; object-fit: cover; }
.a-glass { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(246, 248, 243, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(19, 40, 28, .12); font-size: 14px; line-height: 18px; font-weight: 500; }
.a-tp-img { display: grid; place-items: center; }
.a-tp-img img { position: absolute; inset: 0; }
.a-art { position: relative; width: min(380px, 84%); padding: 14px 16px 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(19, 40, 28, .06), 0 30px 60px -24px rgba(19, 40, 28, .45); font-size: 13.5px; line-height: 18px; }
.a-art-h { margin: 0 0 8px; font-weight: 500; font-size: 14px; }
.a-art-r { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--a-line); }
.a-art-r b { font-weight: 500; }
.a-art-r em { font-style: normal; font-size: 12.5px; color: var(--a-ink2); white-space: nowrap; }
.a-art-b { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--a-line); font-size: 13px; }
.a-art-b i { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #d9d4cb calc(var(--w) * 100%), var(--a-soft) 0); }
.a-art-b.is-y i { background: linear-gradient(90deg, var(--bl-primary) calc(var(--w) * 100%), var(--a-soft) 0); }
.a-art-f { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--a-line); font-size: 12.5px; color: #177650; }
.a-art-f svg { width: 13px; height: 13px; }
.a-tp:not([hidden]) .a-art { animation: a-rise .6s var(--a-ease) both .1s; }
.a-who-plat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 24px 0 0; font-size: 15px; line-height: 22px; color: var(--a-ink2); }
.a-who-plat > svg { width: 18px; height: 18px; color: var(--a-ink); }

/* ---------- who we are ---------- */
.a-us-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.a-fdrs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0 24px; }
.a-fdr { margin: 0; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-line); }
.a-fdr img { width: 100%; height: auto; aspect-ratio: 1 / 1.05; object-fit: cover; object-position: 50% 16%; background: var(--a-soft); }
.a-fdr figcaption { padding: 16px 18px 20px; }
.a-fdr b { display: block; font: 400 28px/1.05 var(--a-serif); }
.a-fdr figcaption > span { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--a-ink2); }
.a-fdr p { margin: 10px 0 0; font-size: 14.5px; line-height: 22px; color: var(--a-ink2); }
.a-us-r { padding-top: 6px; }
.a-us-r .a-h3 { margin-bottom: 24px; }
.a-res-list { display: grid; gap: 10px; }
.a-res { display: grid; grid-template-columns: 112px 1fr 18px; gap: 16px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 18px; background: #fff;
  text-decoration: none; box-shadow: inset 0 0 0 1px var(--a-line); transition: transform .3s var(--a-ease), box-shadow .3s ease; }
.a-res:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--a-line2), 0 18px 36px -20px rgba(19, 40, 28, .35); }
.a-res-img { display: block; height: 80px; overflow: hidden; border-radius: 11px; background: var(--a-soft); }
.a-res-img img { width: 100%; height: 100%; object-fit: cover; }
.a-res-esg { display: grid; place-items: center; background-color: #0b0e0d;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 16px 16px; }
.a-res-esg span { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: #8fd39f; }
.a-res-k { display: block; margin-bottom: 4px; font-size: 13px; line-height: 17px; color: var(--a-ink2); }
.a-res-tx b { display: block; font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -.015em; }
.a-res > svg { width: 18px; height: 18px; color: var(--a-ink2); }

/* ---------- faq ---------- */
.a-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
.a-faq-l .a-lead { margin-top: 18px; }
.a-faq-list.faq { max-width: none; margin: 0; border-top: 1px solid var(--a-line2); }
.a-faq-list details { border-bottom: 1px solid var(--a-line2); }
.a-faq-list summary { padding: 22px 0; font-size: 18px; line-height: 26px; letter-spacing: -.015em; font-weight: 500; }
.a-faq-list summary svg { width: 18px; height: 18px; margin-top: 4px; }
.a-faq-list .a { padding: 0 48px 22px 0; }

/* ---------- closing ---------- */
.a-close { padding-block: 120px 160px; }
.a-close-in { max-width: 820px; text-align: center; }
.a-close .a-lead { max-width: 560px; margin: 24px auto 32px; }

/* ---------- footer ---------- */
.a-foot { padding: 72px 0 28px; background: #efede9; font-size: 14px; line-height: 20px; }
.a-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.a-foot .logo { font-size: 20px; color: var(--a-ink); }
.a-foot-brand p { max-width: 300px; margin: 14px 0 20px; color: var(--a-ink2); line-height: 22px; }
.a-foot-h { margin: 0 0 12px; font-size: 13px; line-height: 18px; font-weight: 500; }
.a-foot-grid > div:not(.a-foot-brand) a { display: block; padding: 4px 0; color: var(--a-ink2); text-decoration: none; }
.a-foot-grid > div:not(.a-foot-brand) a:hover { color: var(--a-ink); }
.a-foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid #dfdbd3; font-size: 12.5px; color: var(--a-ink2); }
.a-foot-legal span:first-child { overflow-wrap: anywhere; }
.a-end { display: none; }

/* ---------- inner pages in this version ---------- */
html[data-variant~="a"] .h0, html[data-variant~="a"] .h1, html[data-variant~="a"] .h2, html[data-variant~="a"] .h3, html[data-variant~="a"] .h4 {
  font-family: var(--a-serif); font-weight: 400; letter-spacing: -.008em; line-height: 1.02; }
html[data-variant~="a"] .h0 { font-size: clamp(60px, 8.6vw, 124px); }
html[data-variant~="a"] .h1 { font-size: clamp(50px, 6.2vw, 86px); line-height: .98; }
html[data-variant~="a"] .h2 { font-size: clamp(40px, 4.6vw, 60px); }
html[data-variant~="a"] .h3 { font-size: clamp(34px, 3.6vw, 46px); }
html[data-variant~="a"] .h4 { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.06; }
html[data-variant~="a"] .btn { height: 42px; padding: 0 18px; border-radius: 999px; font-size: 15px; }
html[data-variant~="a"] .btn--sm { height: 32px; padding: 0 13px; font-size: 13px; }
html[data-variant~="a"] .btn--primary { background: var(--a-ink); color: #fff; }
html[data-variant~="a"] .btn--primary:hover { background: #2d4034; }
html[data-variant~="a"] .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; text-transform: none; letter-spacing: 0; }
html[data-variant~="a"] .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--bl-primary); flex: none; }
html[data-variant~="a"] .on-dark .eyebrow::before, html[data-variant~="a"] .eyebrow.on-dark::before { background: var(--bl-primary); }
html[data-variant~="a"] .page-hero .pane-txt, html[data-variant~="a"] .hero .pane-txt { background: #fff; }
html[data-variant~="a"] .page-hero .pane, html[data-variant~="a"] .hero .pane { border-radius: 22px; }

/* inner pages: the same editorial language as the home page. Warm neutral stages with white artifacts instead of
   yellow panels, the platform diagram on the light canvas, open centred closings. */
html[data-variant~="a"] .feature-vis:not(.feature-vis--img), html[data-variant~="a"] .ep-vis, html[data-variant~="a"] .brief-stage {
  background-color: #ebefe8; background-image: radial-gradient(rgba(19, 40, 28, .12) 1px, transparent 1.2px); background-size: 18px 18px; }
html[data-variant~="a"] .box--dark.dark-sec { background: #ebefe8; color: var(--a-ink); border-radius: 22px; }
html[data-variant~="a"] .dark-sec .on-dark, html[data-variant~="a"] .dark-sec .h1, html[data-variant~="a"] .dark-sec .h2 { color: var(--a-ink); }
html[data-variant~="a"] .dark-sec .eyebrow { color: var(--a-ink2); }
html[data-variant~="a"] .dark-sec .lead { color: var(--a-ink2); }
html[data-variant~="a"] .dark-sec .flow-item { background: #fff; color: var(--a-ink); box-shadow: 0 0 0 1px var(--a-line), 0 8px 18px -12px rgba(19, 40, 28, .3); }
html[data-variant~="a"] .dark-sec .flow-item svg { color: var(--a-ink); }
html[data-variant~="a"] .dark-sec .flow-item .hs { color: #ff7a59; }
html[data-variant~="a"] .dark-sec .flow-item .soon { background: var(--bl-yellow-7); color: var(--a-ink); }
html[data-variant~="a"] .dark-sec .flow-item:hover { box-shadow: 0 0 0 1px var(--bl-yellow-4), 0 8px 18px -12px rgba(19, 40, 28, .3); }
html[data-variant~="a"] .dark-sec .flow-hub span { color: var(--a-ink2); }
html[data-variant~="a"] .dark-sec .flow-wires path { stroke: rgba(19, 40, 28, .28); }
html[data-variant~="a"] .dark-sec .flow-wires circle { fill: var(--a-ink); }
html[data-variant~="a"] .box--field.aud { background: #fff; box-shadow: inset 0 0 0 1px var(--a-line); border-radius: 22px; }
html[data-variant~="a"] .aud .eyebrow { color: var(--a-ink2) !important; }
html[data-variant~="a"] #contact.box--dark { background: transparent; color: var(--a-ink); }
html[data-variant~="a"] #contact .final-box { grid-template-columns: 1fr; text-align: center; }
html[data-variant~="a"] #contact .final-txt { justify-items: center; padding: 104px 24px 128px; }
html[data-variant~="a"] #contact .final-txt .lead { max-width: 560px; color: var(--a-ink2); }
html[data-variant~="a"] #contact .on-dark, html[data-variant~="a"] #contact .h1 { color: var(--a-ink); }
html[data-variant~="a"] #contact .eyebrow { color: var(--a-ink2); }
html[data-variant~="a"] #contact .final-img { display: none; }
html[data-variant~="a"] #contact .ctas { justify-content: center; }
html[data-variant~="a"] #contact .btn--glass { color: var(--a-ink) !important; background: #fff; box-shadow: inset 0 0 0 1px var(--a-line2); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-variant~="a"] .mv { font-size: 13.5px; line-height: 19px; }

/* ---------- keyframes ---------- */
@keyframes a-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes a-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes a-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes a-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes a-click { 0% { transform: translate(var(--cx), var(--cy)) scale(1); } 50% { transform: translate(var(--cx), var(--cy)) scale(.82); } 100% { transform: translate(var(--cx), var(--cy)) scale(1); } }
@keyframes a-kenburns { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .a-sys-grid, .a-dl-grid { gap: 48px; }
  .a-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-bc--wide { grid-column: 1 / -1; }
  .a-bc--strip { flex-direction: column; align-items: flex-start; gap: 20px; }
  .a-data-l { width: 100%; }
}
@media (max-width: 900px) {
  .a-sec { padding-block: 72px; }
  .a-links { display: none; }
  .a-menu { display: inline-flex; }
  .a-nav-in { grid-template-columns: 1fr auto; }
  .a-hero { padding-top: 40px; }
  .a-hero-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 36px; }
  .a-sys-grid, .a-dl-grid, .a-us-grid, .a-faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .a-sys-r { position: static; }
  .a-sys-l { display: contents; }
  .a-sys-head { order: 0; margin-top: 0; }
  .a-sys-list { order: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: -24px 0 0; padding: 4px 0 6px; }
  .a-sys-list::-webkit-scrollbar { display: none; }
  .a-sys-r { order: 2; margin-top: -24px; }
  .a-sys-l .a-scope { order: 3; }
  .a-sys-l > .a-link { order: 4; margin-top: -16px; }
  .a-rx { grid-template-columns: 1fr; padding: 20px; }
  .a-rx-row { gap: 22px; }
  .a-art { width: 90%; }
  .a-layer { display: none; }
  .a-si { flex: none; width: auto; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 9px 14px 11px; border: 0; border-radius: 999px;
    background: #fff; box-shadow: inset 0 0 0 1px var(--a-line); scroll-snap-align: start; }
  .a-si .d { display: none; }
  .a-si .t { font-size: 15px; }
  .a-si.is-on { background: var(--a-ink); box-shadow: none; }
  .a-si.is-on .t, .a-si.is-on .n { color: #fff; }
  .a-prog { left: 14px; right: 14px; bottom: 4px; border-radius: 2px; }
  .a-sys-card { aspect-ratio: auto; min-height: 400px; padding: 28px 0 92px; margin: 0; }
  .a-sys-cap { display: block; position: absolute; left: 14px; right: 14px; bottom: 14px; margin: 0; padding: 12px 14px; border-radius: 12px;
    background: rgba(246, 248, 243, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(19, 40, 28, .1);
    font-size: 14px; line-height: 20px; }
  .a-paint { aspect-ratio: auto; padding: 28px 0; }
  .a-ways-grid { grid-template-columns: 1fr; }
  .a-head--row { flex-direction: column; align-items: flex-start; }
  .a-tablist { grid-template-columns: 1fr; }
  .a-tab { height: 52px; }
  .a-tp { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .a-foot-grid { grid-template-columns: 1fr 1fr; }
  .a-foot-brand { grid-column: 1 / -1; }
}
/* the tour on tablets and phones: one stage at a time, readable, no camera */
@media (max-width: 900px) {
  .a-tour-box { aspect-ratio: auto; padding: 20px 14px 64px; }
  .a-stage { position: relative; width: auto; height: auto; transform: none; }
  .a-cam { position: relative; display: grid; gap: 12px; transform: none !important; transition: none; }
  .a-win, .a-toast { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .a-acc .a-filters span:nth-child(2) { display: none; }
  .a-tr { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; height: 52px; }
  .a-tr > :nth-child(2), .a-tr > :nth-child(3), .a-tr > :nth-child(5) { display: none; }
  .a-tbl .a-tr:nth-child(n+5) { display: none; }
  .a-th { display: none !important; }
  .a-cam > .a-win, .a-cam > .a-toast { grid-area: 1 / 1; }
  .a-acc, .a-brief { transition: opacity .5s ease, transform .6s var(--a-ease); }
  .a-brief { opacity: 0; transform: translateY(12px); }
  [data-step="2"] .a-brief, [data-step="3"] .a-brief { opacity: 1; transform: none; }
  [data-step="2"] .a-acc, [data-step="3"] .a-acc { opacity: 0; transform: translateY(-8px); pointer-events: none; }
  .a-toast { align-self: end; margin: 0 10px 10px; }
  .a-f-why .a-redact { width: 72%; transition: none; }
  .a-why-t { opacity: 1; }
  .a-brief .a-roles span { opacity: 1; transform: none; animation: none !important; }
  .a-field { grid-template-columns: 78px 1fr; }
  .a-toast { justify-self: start; }
  .a-cursor { display: none; }
  .a-brief-f { flex-wrap: wrap; }
  .a-cam { max-width: 560px; margin: 0 auto; }
  .a-steps { position: relative; left: auto; top: auto; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto 14px; }
  .a-step span { display: none; }
  [data-step="1"] .a-step[data-s="1"] span, [data-step="2"] .a-step[data-s="2"] span, [data-step="3"] .a-step[data-s="3"] span { display: inline; }
  .a-tour:not([data-step]) .a-step[data-s="1"] span { display: inline; }
}
/* small phones: the circles show the progression, the active step reads on its own line */
@media (max-width: 400px) {
  .a-steps { gap: 6px; margin-bottom: 46px; }
  .a-step { padding: 0 5px; }
  .a-step span { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); padding: 3px 12px; border-radius: 999px;
    font-size: 15px; line-height: 20px; color: var(--a-ink); }
  html[data-variant~="a"] .a-step span { background: rgba(246, 248, 243, .85); }
}

@media (max-width: 760px) {
  .a-ways-end { text-align: center; }
  .a-ways-end svg { display: none; }
  .a-who-plat > svg { display: none; }
  .a-mail-h, .a-mail-b { padding-inline: 18px; }
  .a-mail-b p { font-size: 15px; line-height: 2.55; }
  .a-mail mark::after { font-size: 11px; line-height: 13px; }
  .a-mk { width: 52px; }
  .a-frame { padding: 10px 10px 18px; border-radius: 22px; }
  .a-bento { grid-template-columns: 1fr; }
  .a-bc-ui { height: auto; min-height: 220px; }
  .a-crm-r { grid-template-columns: 30px 1fr auto; }
  .a-crm-r .a-st-dot { display: none; }
  .a-data-l { grid-template-columns: 1fr; gap: 14px; }
  .a-fdrs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .a-fdr figcaption { padding: 14px 14px 16px; }
  .a-fdr b { font-size: 22px; }
  .a-res { grid-template-columns: 84px 1fr 16px; gap: 12px; }
  .a-res-img { height: 64px; }
  .a-foot-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 420px) {
  .a-wrap { --wp: 16px; }
  .a-hero .a-ctas .a-btn { flex: 1 1 auto; }
  .a-fdrs { grid-template-columns: 1fr; }
  .a-fdr img { aspect-ratio: 4 / 3; }
  .a-nav-r .a-btn--sm { padding: 0 13px; }
  .a-crm-r { grid-template-columns: 30px minmax(0, 1fr); row-gap: 6px; }
  .a-crm-r .a-mini-btn { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .a-tour-bgw, .a-cam, .a-sys-vis, .a-brief, .a-toast { transition: none !important; }
  .a-caret, .a-spin, .a-tour-bg { animation: none !important; }
  .a-sys-vis.is-on .mv > *, .a-sys-vis.is-on .prow, .a-sys-vis.is-on .seq, .a-tp:not([hidden]), [data-reveal].in * { animation: none !important; }
  [data-words] .w { transition: none; color: inherit; }
  [data-rise] .w { animation: none; }
  .a-btn, .a-res, .a-link svg { transition: none; }
}

/* the CRM card: HubSpot, then every other CRM in one row */
.a-crm-r--multi { grid-template-columns: auto 1fr auto auto; }
.a-crm-is { display: flex; gap: 4px; }
.a-crm-is .a-crm-i { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
.a-crm-is .a-crm-i svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .a-paint--doc { padding: 28px 14px; } }
@media (max-width: 560px) { .a-crm-r--multi { grid-template-columns: auto 1fr; } .a-crm-r--multi .a-st-dot { display: none; } }

/* the rewrite on a painting, like the brief and the tour */
.a-frame--paint { isolation: isolate; overflow: hidden; padding: 28px 40px 26px; background: #cdb89a; }
.a-frame--paint .a-frame-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.a-frame--paint .a-mail { box-shadow: 0 30px 60px -28px rgba(19, 40, 28, .45), 0 0 0 1px rgba(19, 40, 28, .06); }
.a-frame--paint .a-frame-note { width: fit-content; margin: 16px auto 0; padding: 4px 12px; border-radius: 999px; background: rgba(246, 248, 243, .88); color: var(--a-ink); }
@media (max-width: 900px) { .a-frame--paint { padding: 14px 10px 18px; } }

/* the platform cards float on one painting */
.a-bento-band { position: relative; isolation: isolate; overflow: hidden; margin-top: 52px; padding: 24px; border-radius: 28px; background: #cdb89a; }
.a-bento-band .a-bento-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.a-bento-band .a-bento { margin-top: 0; }
.a-bento-band .a-bc { box-shadow: 0 24px 50px -30px rgba(19, 40, 28, .5); }
@media (max-width: 900px) { .a-bento-band { padding: 10px; border-radius: 22px; } }

/* the link under the note in the statement gets its own line */
.a-state-sub > .a-link { display: flex; width: fit-content; margin: 22px auto 0; }

/* ---------- the platform: a market map on a painting (home and platform page) ---------- */
.a-pv-fig { margin: 0; }
.a-pv-fig figcaption { margin-top: 14px; font-size: 13px; line-height: 20px; color: var(--a-ink2); }
.a-pv { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: 56px 48px 64px; border-radius: 22px; background: #b9b3a3; }
.a-pv-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.a-pv-stage { position: relative; width: min(1000px, 100%); }
.a-app { overflow: hidden; border-radius: 14px; background: #fff; color: var(--a-ink); font-size: 14px; line-height: 19px;
  box-shadow: 0 0 0 1px rgba(19, 40, 28, .07), 0 40px 70px -28px rgba(19, 40, 28, .45), 0 12px 28px -10px rgba(19, 40, 28, .2); }
.a-map { width: 70%; }
.a-mt { padding: 2px 8px 8px; }
.a-mrow { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1.3fr); align-items: center; gap: 12px; height: 50px; padding: 0 10px;
  box-shadow: inset 0 -1px 0 var(--a-line); }
.a-mrow:last-child { box-shadow: none; }
.a-mrow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-mhead { height: 34px; font-size: 12px; font-weight: 500; color: var(--a-mute); }
.a-mrow .a-co { font-weight: 500; }
.a-mv { display: inline-flex; align-items: center; gap: 8px; }
.a-mv em { font-style: normal; font-size: 12px; color: var(--a-ink2); }
.a-pv-acc { position: absolute; right: 0; top: 64px; width: 33%; }
.a-acc-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--a-line); font-size: 13.5px; line-height: 18px; }
.a-acc-r b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.a-acc-r .a-chip, .a-acc-r .a-quiet { flex: none; }
.a-acc-f { margin: 0; padding: 10px 14px 12px; font-size: 12px; line-height: 16px; color: var(--a-ink2); }
.a-pv[data-reveal].in .a-mrow:not(.a-mhead) { animation: a-rise .5s var(--a-ease) both; }
.a-pv[data-reveal].in .a-mrow:nth-child(3) { animation-delay: .08s; }
.a-pv[data-reveal].in .a-mrow:nth-child(4) { animation-delay: .16s; }
.a-pv[data-reveal].in .a-mrow:nth-child(5) { animation-delay: .24s; }
.a-pv[data-reveal].in .a-mrow:nth-child(6) { animation-delay: .32s; }
.a-pv[data-reveal].in .a-pv-acc { animation: a-acc-in .8s var(--a-ease) both .45s; }
@keyframes a-acc-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* home: the four parts under the picture */
.a-plat .a-pv { margin-top: 44px; }
.a-pl4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; padding: 0; list-style: none; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-line); }
.a-pl4 li { display: grid; align-content: start; gap: 4px; padding: 20px 22px 22px; }
.a-pl4 li + li { box-shadow: inset 1px 0 0 var(--a-line); }
.a-pl4 b { font-size: 16px; line-height: 22px; font-weight: 500; }
.a-pl4 span { font-size: 14.5px; line-height: 21px; color: var(--a-ink2); }
.a-pl4 em { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-style: normal; font-size: 12.5px; line-height: 16px; color: var(--a-ink2); }
.a-pl4 em i { width: 7px; height: 7px; border-radius: 2px; background: var(--bl-primary); }
.a-pl4 em i.p { background: var(--data-8); }
.a-plat-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-size: 14px; line-height: 20px; color: var(--a-ink2); text-align: center; }
.a-plat-note svg { width: 14px; height: 14px; flex: none; }

/* platform page: the five parts, each on its own painting */
.a-sys-card > .a-sys-paint { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transform: none; transition: opacity .9s ease; }
.a-sk { font-weight: 500; color: var(--a-ink); }
.a-sys--plat .mv .mock-row, .a-sys--plat .mv .comp { padding-inline: 0; }
.a-segs { display: grid; }
.a-seg-r { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--a-line); font-size: 13px; }
.a-seg-r i { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #d9d4cb calc(var(--w) * 100%), var(--a-soft) 0); }
.a-seg-r.is-y i { background: linear-gradient(90deg, var(--bl-primary) calc(var(--w) * 100%), var(--a-soft) 0); }
.a-file { display: grid; grid-template-columns: 20px minmax(0, 1fr) 22px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--a-soft); }
.a-file > svg { width: 18px; height: 18px; }
.a-file span { font-size: 12px; line-height: 16px; color: var(--a-ink2); }
.a-file b { display: block; font-size: 13.5px; line-height: 18px; font-weight: 500; color: var(--a-ink); }
.a-file i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bl-primary); }
.a-file i svg { width: 12px; height: 12px; }
.a-wbm.mail { padding: 18px 20px; }
.a-wbm .item i.is-g { background: var(--bl-grey-medium); }

/* platform page: who it is for, four cards on one painting */
.a-aud-band { position: relative; isolation: isolate; overflow: hidden; margin-top: 44px; padding: 170px 24px 24px; border-radius: 28px; background: #6d7a5a; }
.a-aud-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.a-aud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.a-aud-c { display: flex; flex-direction: column; padding: 22px 22px 24px; border-radius: 18px; background: rgba(255, 255, 255, .95); box-shadow: 0 24px 50px -30px rgba(19, 40, 28, .5); }
.a-aud-k { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--a-ink2); }
.a-aud-k svg { width: 16px; height: 16px; color: var(--a-ink); }
.a-aud-c h3 { margin: 0 0 10px; font: 400 27px/1.06 var(--a-serif); letter-spacing: -.005em; text-wrap: balance; }
.a-aud-c p:not(.a-aud-k) { margin: 0; font-size: 15px; line-height: 22px; color: var(--a-ink2); }
.a-aud[data-reveal].in .a-aud-c { animation: a-rise .6s var(--a-ease) both; }
.a-aud[data-reveal].in .a-aud-c:nth-child(2) { animation-delay: .08s; }
.a-aud[data-reveal].in .a-aud-c:nth-child(3) { animation-delay: .16s; }
.a-aud[data-reveal].in .a-aud-c:nth-child(4) { animation-delay: .24s; }

/* platform page: your data, shown on a file */
.a-dt-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.a-dt-r { order: -1; }
.a-dt-list { display: grid; margin: 32px 0 0; padding: 0; list-style: none; }
.a-dt-list li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--a-line); font-size: 15px; line-height: 22px; color: var(--a-ink2); }
.a-dt-list svg { width: 20px; height: 20px; margin-top: 2px; color: var(--a-ink); }
.a-dt-list b { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 500; color: var(--a-ink); }
.a-csv { width: min(560px, 92%); }
.a-csv-t { padding: 8px 10px 6px; }
.a-csv-r { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .7fr); gap: 6px; padding: 3px 0; }
.a-csv-r > span { display: flex; align-items: center; height: 34px; padding: 0 10px; overflow: hidden; border-radius: 8px; font-size: 13px; white-space: nowrap; }
.a-csv-h > span { height: 30px; font-size: 12px; font-weight: 500; }
.a-csv .ok { background: var(--bl-yellow-7); box-shadow: inset 0 0 0 1px var(--bl-yellow-5); }
.a-csv .no { background: repeating-linear-gradient(135deg, var(--a-soft) 0 6px, #fff 6px 12px); color: var(--a-mute); box-shadow: inset 0 0 0 1px var(--a-line); }
.a-csv-h .no { text-decoration: line-through; }
.a-csv .no .a-redact { width: 70%; opacity: .3; }
.a-csv .ok .a-redact--soft { width: 80%; background: var(--bl-yellow-3); }
.a-csv-f { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px 14px; border-top: 1px solid var(--a-line); font-size: 12.5px; line-height: 16px; color: var(--a-ink2); }
.a-csv-f span { display: inline-flex; align-items: center; gap: 8px; }
.a-csv-f i { width: 14px; height: 14px; border-radius: 4px; }
.a-csv[data-reveal].in .a-csv-r { animation: a-rise .5s var(--a-ease) both; }
.a-csv[data-reveal].in .a-csv-r:nth-child(2) { animation-delay: .08s; }
.a-csv[data-reveal].in .a-csv-r:nth-child(3) { animation-delay: .16s; }
.a-csv[data-reveal].in .a-csv-r:nth-child(4) { animation-delay: .24s; }

/* closing: the call, with a booking card on a painting */
.a-cl-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.a-cl-grid .a-lead { max-width: 480px; margin: 24px 0 32px; }
.a-cl-card { width: min(400px, 88%); padding: 20px 22px 22px; border-radius: 18px; background: #fff; box-shadow: 0 30px 60px -28px rgba(19, 40, 28, .45), 0 0 0 1px rgba(19, 40, 28, .06); }
.a-cl-who { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--a-line); font-size: 13px; line-height: 18px; color: var(--a-ink2); }
.a-cl-who .a-avs img { width: 40px; height: 40px; box-shadow: 0 0 0 2px #fff; }
.a-cl-who b { display: block; font-size: 16px; line-height: 21px; font-weight: 600; color: var(--a-ink); }
.a-cl-list { display: grid; gap: 10px; margin: 16px 0 18px; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.a-cl-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.a-cl-list svg { width: 16px; height: 16px; margin-top: 2px; }
.a-cl-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.a-cl-slots span { display: grid; place-items: center; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--a-line2); font-size: 13px; font-weight: 500; }
.a-cl-slots .is-on { background: var(--bl-primary); box-shadow: none; }
.a-cl-btn { display: grid; place-items: center; height: 42px; border-radius: 999px; background: var(--a-ink); color: #fff; font-size: 14px; font-weight: 500; }
.a-cl-card[data-reveal].in { animation: a-acc-in .8s var(--a-ease) both .1s; }

@media (max-width: 1100px) {
  .a-mrow { grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 1.3fr); }
  .a-mrow > :nth-child(2) { display: none; }
  .a-pl4 { grid-template-columns: 1fr 1fr; }
  .a-pl4 li:nth-child(3) { box-shadow: inset 0 1px 0 var(--a-line); }
  .a-pl4 li:nth-child(4) { box-shadow: inset 1px 0 0 var(--a-line), inset 0 1px 0 var(--a-line); }
  .a-aud { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .a-pv { padding: 18px 12px 20px; }
  .a-map { width: 100%; }
  .a-map .a-sync { display: none; }
  .a-map .a-filters span:nth-child(n+3) { display: none; }
  .a-mrow { grid-template-columns: minmax(0, 1fr) auto; }
  .a-mrow > :nth-child(3) { display: none; }
  .a-pv-acc { position: relative; top: auto; right: auto; width: auto; margin: 12px 0 0; }
  .a-aud-band { padding: 120px 10px 10px; border-radius: 22px; }
  .a-dt-grid, .a-cl-grid { grid-template-columns: 1fr; gap: 36px; }
  .a-dt-r { order: 0; }
  .a-csv { width: 100%; }
  .a-csv-r { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); }
  .a-csv-r > :nth-child(n+4) { display: none; }
}
@media (max-width: 560px) {
  .a-mv em { display: none; }
  .a-mt .a-mrow:nth-child(n+6) { display: none; }
  .a-csv .a-checked { display: none; }
  .a-csv-r > span { padding: 0 8px; font-size: 12px; }
  .a-pl4 { grid-template-columns: 1fr; }
  .a-pl4 li + li, .a-pl4 li:nth-child(4) { box-shadow: inset 0 1px 0 var(--a-line); }
  .a-aud { grid-template-columns: 1fr; }
  .a-cl-card { width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .a-sys-card > .a-sys-paint { transition: none; }
  .a-pv[data-reveal].in *, .a-pv[data-reveal].in .a-pv-acc, .a-cl-card[data-reveal].in, .a-csv[data-reveal].in * { animation: none !important; }
}

/* the statement on the platform page: founders and the link centred, with air between them */
.a-state-sub .a-founders--c { justify-content: center; margin-top: 28px; font-size: 15px; }
.a-state-sub > .a-ctas { margin-top: 28px; }

/* ---------- home: the platform parts as tabs that switch the window on the painting ---------- */
.a-pt { margin-top: 44px; }
.a-pt-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.a-pt-t { display: grid; gap: 5px; padding: 14px 18px 15px; border: 0; border-radius: 16px; background: #ebe8e2; color: var(--a-ink2); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease; }
.a-pt-t b { font-size: 16px; line-height: 20px; font-weight: 500; color: var(--a-ink); }
.a-pt-t > span { font-size: 13.5px; line-height: 19px; }
.a-pt-t em { display: inline-flex; align-items: center; gap: 7px; font-style: normal; font-size: 12px; line-height: 16px; }
.a-pt-t em i { width: 7px; height: 7px; border-radius: 2px; background: var(--bl-primary); }
.a-pt-t em i.p { background: var(--data-8); }
.a-pt-t:hover { background: #e3dfd8; }
.a-pt-t[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-ink); }
.a-pt-t:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
.a-plat .a-pt .a-pv { margin-top: 0; }
.a-pt-p { display: grid; justify-items: center; width: 100%; }
.a-pt-p[hidden] { display: none; }
.a-pt-p:not([hidden]) { animation: a-fade .45s ease both; }
.a-pt-win { width: min(720px, 100%); }
.a-pt-win > .mock-row, .a-pt-win > .comp { padding-inline: 18px; }
.a-pt-win .a-file { margin: 14px 16px 6px; }
.a-pt-win.mail { padding: 20px 24px; }
.a-pt-win.mail .item i.is-g { background: var(--bl-grey-medium); }
.a-pt-cap { margin: 16px 0 0; padding: 6px 14px; border-radius: 999px; background: rgba(246, 248, 243, .92); font-size: 13.5px; line-height: 18px; color: var(--a-ink); text-align: center; }

/* platform page: a small example under each audience */
.a-aud-c p:not(.a-aud-k) { margin-bottom: 16px; }
.a-aud-art { display: grid; gap: 7px; margin-top: auto; padding: 11px 12px; border-radius: 12px; background: var(--a-soft); font-size: 12.5px; line-height: 16px; }
.a-aud-art .r { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.a-aud-art .r b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.a-aud-art .r em { flex: none; font-style: normal; color: var(--a-ink2); }
.a-aud-art .a-chip { height: 20px; padding: 0 7px; font-size: 10.5px; }
.a-aud-art .a-chip .a-redact { height: 7px; }
.a-aud-art .bar { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 8px; }
.a-aud-art .bar i { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--bl-primary) calc(var(--w) * 100%), #e3dfd8 0); }
@media (max-width: 900px) { .a-pt-list { grid-template-columns: 1fr 1fr; } .a-pt-t > span { display: none; } }

/* ESG 2030: the essay's daylight look (paper, green lines) instead of the dark cover */
html[data-variant~="a"] .esg-cover, html[data-variant~="a"] .a-res-esg { background-color: #fbfbf6;
  background-image: linear-gradient(rgba(29, 28, 28, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 28, 28, .05) 1px, transparent 1px); background-size: 24px 24px; }
html[data-variant~="a"] .esg-cover { box-shadow: inset 0 0 0 1px var(--a-line); }
html[data-variant~="a"] .esg-cover .esg-lines path { stroke: #1c6c34; }
html[data-variant~="a"] .esg-cover .esg-lines path:nth-child(4n+1) { stroke: #9dddb0; }
html[data-variant~="a"] .esg-cover .esg-lines path:nth-child(4n+2) { stroke: #4e7a61; }
html[data-variant~="a"] .esg-cover .esg-lines path:nth-child(4n+3) { stroke: #002f0f; }
html[data-variant~="a"] .esg-k, html[data-variant~="a"] .a-res-esg span { color: #1c6c34; }
html[data-variant~="a"] .esg-h { color: #1d1c1c; }

/* the planned API, CLI and MCP: a code window */
.a-pt-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.a-pt-t em i.o { background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-ink2); }
.a-code-win .a-bar { gap: 10px; }
.a-code-tabs { display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; border-radius: 8px; background: var(--a-soft); }
.a-code-tabs span { padding: 3px 9px; border-radius: 6px; font: 500 11.5px/16px var(--mono); color: var(--a-ink2); }
.a-code-tabs .is-on { background: #fff; color: var(--a-ink); box-shadow: 0 1px 2px rgba(19, 40, 28, .08); }
.a-code { display: grid; gap: 6px; padding: 18px 20px 20px; background: #1f2421; color: #e6e9e4; font: 13px/20px var(--mono); }
.a-code p { margin: 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.a-code .c-p { color: #9dddb0; }
.a-code .c-f { color: #b9cfc2; }
.a-code .c-k { color: #9dddb0; font-weight: 600; }
.a-code .c-s { color: #e4ffc2; }
.a-code .c-c { margin-top: 8px; color: #7f8a83; }
.a-code .c-o { color: #c9cfca; }
.a-code .c-y { color: #e4ffc2; }
.a-code .a-redact { width: 70px; height: 8px; background: #e6e9e4; opacity: .5; vertical-align: 1px; }
@media (max-width: 1100px) { .a-pt-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .a-pt-list { grid-template-columns: 1fr 1fr; } .a-code { font-size: 12px; } }

/* the market map: your accounts highlighted in the map */
.a-mrow.is-yours { background: var(--bl-yellow-8); box-shadow: inset 3px 0 0 var(--bl-primary), inset 0 -1px 0 var(--a-line); }
.a-yi { width: 13px; height: 13px; flex: none; margin-left: 2px; color: var(--a-ink2); }
.a-pv-acc .a-bar b { white-space: nowrap; }
/* the weekly brief, with real items */
.a-brf.mail { gap: 9px; }
.a-brf .mail-meta { margin-bottom: 4px; }
.a-brf .mail-h { margin-top: 6px; }
.a-brf-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--a-soft); font-size: 13px; line-height: 17px; }
.a-brf-r > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-brf-r .a-co { font-weight: 500; }
.a-brf-r .a-ini { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
.a-brf-r .tag { flex: none; }
.a-code { grid-template-columns: minmax(0, 1fr); }
.a-code p { min-width: 0; }
.a-code-win { max-width: 100%; }
/* the explorer never grows wider than its column, whatever a panel holds */
.a-sys-card { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .a-sys-grid { grid-template-columns: minmax(0, 1fr); } }

/* booking card: an agenda and the format, the real button sits beside it */
.a-cl-meta { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 14px; border-radius: 12px; background: var(--a-soft); font-size: 13px; line-height: 18px; font-weight: 500; }
.a-cl-meta svg { width: 15px; height: 15px; flex: none; }
.a-cl-list { margin-bottom: 14px; }
/* phones: tighter rhythm between sections */
@media (max-width: 600px) {
  .a-sec { padding-block: 56px; }
  .a-state { padding-block: 72px 40px; }
  .a-head .a-lead { margin-top: 16px; }
}

/* the market map: one company opened, with its moves */
.a-mrow.is-sel { background: var(--bl-yellow-7); box-shadow: inset 0 0 0 1.5px var(--bl-primary); border-radius: 10px; }
.a-det { padding-bottom: 2px; }
.a-det-h { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--a-line); }
.a-det-h b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.a-det-h span { font-size: 12px; line-height: 16px; color: var(--a-ink2); }
.a-det-k { margin: 12px 16px 6px; font-size: 11.5px; line-height: 16px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--a-mute); }
.a-det-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 16px; font-size: 13px; line-height: 17px; }
.a-det-r > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-det-r em { font-style: normal; font-size: 12px; color: var(--a-ink2); white-space: nowrap; }
.a-det-f { display: flex; align-items: center; gap: 6px; margin-top: 4px; border-top: 1px solid var(--a-line); }
.a-det-f svg { width: 13px; height: 13px; flex: none; }
/* the platform tabs: one rhythm between the options and down to the picture */
.a-pt-list { gap: 12px; margin-bottom: 12px; }
.a-pt-t { gap: 6px; padding: 16px 18px; }
.a-pt-t em { margin-top: 4px; }
/* small card titles in the sans; the serif stays for headlines */
.a-aud-c h3 { font: 600 19px/25px var(--font); letter-spacing: -.015em; }
/* text for screen readers only: what a redaction stands for */
.a-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-redact { position: relative; }

/* phones: the tour windows keep their own height (no white stretch); tab art shows whole; platform tabs as pills */
@media (max-width: 900px) {
  .a-cam > .a-win { align-self: center; }
  .a-tp-img { aspect-ratio: auto; min-height: 260px; padding: 28px 0; }
  .a-pt-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .a-pt-t { grid-auto-flow: column; align-items: center; justify-content: start; gap: 8px; padding: 9px 14px; border-radius: 999px; }
  .a-pt-t b { font-size: 14px; line-height: 18px; }
  .a-pt-t em { margin-top: 0; font-size: 11.5px; }
}

/* explorer paintings fill the whole card, also where the card has padding; on phones the caption reads before the picture */
.a-sys-card > .a-sys-paint { grid-area: auto; }
@media (max-width: 900px) {
  .a-sys-card { grid-template-rows: auto auto; align-content: start; padding: 14px 0 28px; min-height: 0; }
  .a-sys-cap { position: relative; inset: auto; grid-row: 1; justify-self: stretch; margin: 0 14px 22px; }
  .a-sys-card > .a-sys-vis:not(.a-sys-paint) { grid-area: 2 / 1; }
}
/* tablets: the five platform tabs stay on one row (title and status); the selected one is described under the picture */
@media (min-width: 901px) and (max-width: 1100px) {
  .a-pt-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .a-pt-t > span { display: none; }
}
/* tablets and phones, tour step 3: the handover notification takes the place of the brief's footer (it says the same),
   so no sliver of the reply pill shows above it */
@media (max-width: 900px) {
  .is-toast .a-brief-f { visibility: hidden; }
  .a-cam > .a-toast { align-self: end; margin: 0 10px 14px; }
}
/* very small phones: window title bars on one line (no traffic-light dots, slightly smaller text) */
@media (max-width: 360px) {
  .a-tour .a-bar { gap: 8px; padding: 0 12px; font-size: 12px; }
  .a-tour .a-bar .a-dots { display: none; }
  .a-tour .a-bar > * { white-space: nowrap; }
}
@media (max-width: 440px) { .a-tr .a-chip .a-redact { width: 40px !important; } }
@media (max-width: 360px) {
  .a-tr .a-chip .a-redact { width: 22px !important; }
  .a-tour .a-tr .a-ini { display: none; }
}
/* the weekly brief mockup never grows wider than its card (a long row made the grid column 397 px in a 300 px card);
   on phones its rows wrap, and the code window's lines wrap instead of ending in an ellipsis */
.a-brf.mv { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) {
  .a-brf-r > span:first-child { white-space: normal; }
  .a-code { padding: 16px 16px 18px; }
  .a-code p { white-space: pre-wrap; overflow-wrap: anywhere; text-overflow: clip; }
  .a-code-win .a-bar .a-dots { display: none; }
  .a-code-win .a-bar b { white-space: nowrap; }
}
@media (max-width: 360px) {
  .a-brf-r .a-chip .a-redact { width: 22px !important; }
  .a-brf-r .a-ini { display: none; }
  .a-code-win .a-bar { gap: 8px; padding: 0 10px; font-size: 12px; }
  .a-code-tabs span { padding: 3px 6px; font-size: 11px; }
}
/* CSV preview: company names end in an ellipsis when the column is narrow, like a spreadsheet cell */
.a-csv-r > span:first-child { display: block; line-height: 34px; text-overflow: ellipsis; }
.a-csv-h > span:first-child { line-height: 30px; }   /* header cells are 30 px tall */
/* CSV preview: the company column gets the room it needs; narrow desktop windows drop the phone column.
   The opened company's moves wrap instead of being cut where its panel narrows. */
.a-csv-r { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .6fr); }
@media (min-width: 901px) and (max-width: 1100px) {
  .a-csv-r { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .6fr); }
  .a-csv-r > :nth-child(4) { display: none; }
}
@media (max-width: 1100px) { .a-det-r > span:nth-child(2) { white-space: normal; } }
/* narrow desktop windows (up to 1100 px): the explorer's code and brief rows wrap, the portfolio's next step wraps,
   and between 901 and 1000 px the CSV shows company, domain and one unused column */
@media (max-width: 1100px) {
  .a-brf-r > span:first-child { white-space: normal; }
  .a-code p { white-space: pre-wrap; overflow-wrap: anywhere; text-overflow: clip; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .a-csv-r { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .8fr); }
  .a-csv-r > :nth-child(n+4) { display: none; }
  .a-csv-r > span { padding: 0 8px; }
  .a-csv-h > span { font-size: 12px; }
}
@media (max-width: 360px) { .a-map .a-ini { display: none; } }
/* explorer paintings: none is in the layout until the page has loaded (lazy images that are not displayed are not
   fetched), so the six paintings do not compete with the first screen on a slow connection */
.js:not(.is-loaded) .a-sys-card > .a-sys-paint { display: none; }
/* painted bands below the first screen are absolutely placed, so leaving them out of the layout until the page has
   loaded changes nothing on screen; it keeps them from competing with the first screen on a slow connection */
.js:not(.is-loaded) img.a-pv-bg[loading="lazy"] { display: none; }
/* without the demo script (JavaScript off, or a download that failed for 4 s): each explorer shows its first part,
   and the outreach example rests on its finished version, matching the selected "On the signal" */
html:not(.js) .a-sys-card > img.a-sys-vis:first-of-type, html:not(.js) .a-sys-card > div.a-sys-vis:first-of-type,
.no-demo .a-sys-card > img.a-sys-vis:first-of-type, .no-demo .a-sys-card > div.a-sys-vis:first-of-type { opacity: 1; transform: none; }
html:not(.js) [data-rewrite] .a-before, .no-demo [data-rewrite] .a-before,
html:not(.js) [data-rewrite] .a-sw .b4, .no-demo [data-rewrite] .a-sw .b4 { opacity: 0; }
html:not(.js) [data-rewrite] .a-after p, .no-demo [data-rewrite] .a-after p,
html:not(.js) [data-rewrite] .a-sw .af, .no-demo [data-rewrite] .a-sw .af { opacity: 1; transform: none; }
/* print: the statement in full ink, and the tour's table with its new signals landed, whatever was scrolled */
@media print {
  [data-words] .w { color: inherit !important; }
  .a-tr[data-hot] { background: var(--bl-yellow-8); }
  .a-tr[data-hot] .a-quiet { display: none; }
  .a-tr[data-hot] .a-chip { display: inline-flex; animation: none; }
}