/* Optimly refresh: shared page components for the core marketing pages
   (/product, /pricing, /faq, /about, /agencies, /what-is-brand-index).
   Ported from the prototype's styles.css + components.css, keeping only the rules
   these pages use. Everything is scoped under .mr-page, so pages that don't opt in
   don't change. Tokens, fonts, the header/footer and the base .mr-cta come from
   marketing-refresh.css. No text below 16px. */

/* Trocchi has only oldstyle figures, so digits in "Trocchi" come from PP Mondwest, the brand's
   pixel accent. This face must load after the Google Fonts Trocchi stylesheet (it does: the
   webfonts block comes before extra_head), because for overlapping unicode-ranges the later
   face wins. size-adjust 115% matches Mondwest's figures to Trocchi's cap height. */
@font-face { font-family:"Trocchi"; src:url("/static/fonts/PPMondwest-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0030-0039; size-adjust:115%; }

.mr-page {
  --mr-glass:rgba(86,92,170,.33); --mr-rule:rgba(255,255,255,.1);
  --mr-page-max:clamp(1440px, calc(100vw - 80px), 1660px);
  --mr-m-pad:clamp(28px,4.4vw,72px); --mr-m-gap:clamp(28px,3.4vw,56px); --mr-m-well:rgba(12,15,38,.6);
  --mr-mono:"IBM Plex Mono",ui-monospace,monospace;
  padding-top:clamp(24px,3vw,40px);
  background:var(--mr-navy); color:var(--mr-warm-white);
  font:400 20px/1.6 var(--mr-f-body); letter-spacing:-.02em;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
.mr-page *, .mr-page ::before, .mr-page ::after { box-sizing:border-box; }
.mr-page :where(h1,h2,h3,p,figure,ul,ol,dl,dd,pre) { margin:0; }
.mr-page :where(h1,h2,h3) { font-weight:400; color:inherit; letter-spacing:inherit; line-height:inherit; }
.mr-page :where(h1,h2,h3,figcaption,summary) { text-wrap:balance; }
.mr-page :where(p,li,dd) { text-wrap:pretty; }
.mr-page a, .mr-page a:hover { color:inherit; }
.marketing-refresh .mr-page a:focus-visible, .mr-page :focus-visible { outline:2px solid var(--mr-lime); outline-offset:4px; border-radius:0; }
.mr-page ::selection { background:var(--mr-lime); color:var(--mr-ink-deep); }
.mr-page img { display:block; max-width:none; }
.mr-page .mr-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Layout: full-bleed section bands, a constrained wrap inside. */
.mr-page .mr-wrap { position:relative; width:100%; max-width:var(--mr-page-max); margin-inline:auto; padding-inline:var(--mr-gutter) calc(var(--mr-gutter) + clamp(0px,.42vw,6px)); }
.mr-page .mr-sect { padding-block:clamp(72px,9vw,140px); }
.mr-page .mr-sect--tight { padding-block:clamp(48px,6vw,88px); }
/* Tonal breaks, counted back from the footer so the last block is solid navy. */
.mr-page .mr-tone-rise { background:var(--mr-navy-raised); }
.mr-page .mr-tone-fall { background:var(--mr-navy); }

/* Page hero */
.mr-page .mr-ph { padding-block:clamp(80px,10vw,150px) clamp(56px,7vw,96px); }
.mr-page .mr-ph__title { margin-top:18px; max-width:980px; font-family:var(--mr-f-display); font-size:clamp(44px,5vw,72px); line-height:1.16; letter-spacing:-.02em; }
.mr-page .mr-px { font-family:var(--mr-f-pixel); font-size:1.22em; letter-spacing:0; line-height:1; white-space:nowrap; }
.mr-page .mr-ph__lede { margin-top:28px; max-width:640px; }
.mr-page .mr-ph__ctas { display:flex; flex-wrap:wrap; align-items:center; gap:20px 40px; margin-top:48px; }
.mr-page .mr-ph__fine { margin-top:28px; max-width:620px; }

/* Type */
.mr-page .mr-kicker { font:600 20px/1.4 var(--mr-f-body); letter-spacing:0; color:#fff; }
.mr-page .mr-h2 { font-family:var(--mr-f-display); font-size:clamp(32px,3.34vw,48px); line-height:1.2; letter-spacing:-.02em; }
.mr-page .mr-h3 { font-family:var(--mr-f-display); font-size:clamp(26px,2.23vw,32px); line-height:1.2; letter-spacing:-.02em; }
.mr-page .mr-lime { color:var(--mr-lime); }
.mr-page .mr-body { font-size:clamp(17px,1.39vw,20px); line-height:1.6; }
.mr-page .mr-muted { color:rgba(248,244,238,.78); }
.mr-page .mr-fine { font-size:16px; line-height:1.6; color:rgba(248,244,238,.7); }
.mr-page .mr-lede { margin-top:20px; max-width:680px; }
.mr-page .mr-after-kicker { margin-top:14px; }
.mr-page .mr-prose { font-size:clamp(17px,1.39vw,20px); line-height:1.7; }
.mr-page .mr-prose p { margin-top:18px; }
.mr-page .mr-prose a, .mr-page .mr-inline { text-decoration:underline; text-decoration-color:rgba(223,234,98,.6); text-underline-offset:4px; }
.mr-page .mr-prose a:hover, .mr-page .mr-inline:hover { color:var(--mr-lime); }

/* Links: plain text, no arrows. */
.mr-page .mr-more { font:600 clamp(17px,1.39vw,20px)/1.4 var(--mr-f-body); letter-spacing:0; color:#fff; }
.mr-page .mr-more:hover { color:var(--mr-lime); }
.mr-page .mr-link-plain { font:400 21.6px/1.2 var(--mr-f-body); color:#fff; letter-spacing:0; }
.mr-page .mr-link-plain:hover { color:var(--mr-lime); }
.mr-page .mr-links { display:flex; flex-wrap:wrap; align-items:center; gap:14px 36px; margin-top:24px; }
.mr-page .mr-more--block { display:inline-block; margin-top:28px; }
.mr-page .mr-links--cta { gap:20px 36px; margin-top:28px; }

/* CTAs: the pixel-notch .mr-cta from marketing-refresh.css, in the prototype's page sizes.
   Lime CTAs hover to the brand gradient; on hover or focus the notches shuffle. */
.mr-page .mr-cta { --fill-hover:linear-gradient(100deg,var(--mr-lime) 0%,var(--mr-sky) 55%,var(--mr-lavender) 100%); }
.mr-page .mr-cta::before { background:var(--fill-hover); }
.mr-page .mr-cta--cream { --fill-hover:var(--mr-lime); }
.mr-page .mr-cta--lg { --s:15px; width:270px; height:69px; padding:0; font-size:21.6px; }
.mr-page .mr-cta--card { width:211px; height:56px; padding:0; font-size:18px; }
.mr-page .mr-cta--sm { --s:11px; width:142px; height:49px; padding:0; font-size:16px; }
.mr-page .mr-cta:hover, .mr-page .mr-cta:focus-visible { animation:mr-notch-shuffle .64s steps(1,end); }
@keyframes mr-notch-shuffle {
  0%, 100% { -webkit-mask-position:var(--notches); mask-position:var(--notches); }
  20% { -webkit-mask-position:0 0, left 0 top 0, left var(--s) top var(--s), right var(--s) bottom var(--s), right 0 bottom 0; mask-position:0 0, left 0 top 0, left var(--s) top var(--s), right var(--s) bottom var(--s), right 0 bottom 0; }
  40% { -webkit-mask-position:0 0, left calc(var(--s) * 2) top 0, left 0 top var(--s), right 0 bottom calc(var(--s) * 2), right var(--s) bottom 0; mask-position:0 0, left calc(var(--s) * 2) top 0, left 0 top var(--s), right 0 bottom calc(var(--s) * 2), right var(--s) bottom 0; }
  60% { -webkit-mask-position:0 0, left var(--s) top 0, left 0 top calc(var(--s) * 2), right calc(var(--s) * 2) bottom 0, right 0 bottom var(--s); mask-position:0 0, left var(--s) top 0, left 0 top calc(var(--s) * 2), right calc(var(--s) * 2) bottom 0, right 0 bottom var(--s); }
  80% { -webkit-mask-position:0 0, left 0 top 0, left var(--s) top var(--s), right var(--s) bottom var(--s), right 0 bottom 0; mask-position:0 0, left 0 top 0, left var(--s) top var(--s), right var(--s) bottom var(--s), right 0 bottom 0; }
}

/* Two-column split: heading left, copy right. */
.mr-page .mr-split2 { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,6vw,120px); align-items:start; }
.mr-page .mr-split2 .mr-body + .mr-body { margin-top:20px; }
.mr-page .mr-split2 .mr-fine { margin-top:24px; max-width:620px; }

/* Step cards (glass) */
.mr-page .mr-stepgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; counter-reset:mr-step; }
.mr-page .mr-step { position:relative; padding:32px 30px 36px; background:var(--mr-glass); border:1px solid var(--mr-rule); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); transition:border-color .25s, box-shadow .25s, translate .25s; }
.mr-page .mr-step:hover { border-color:rgba(223,234,98,.55); box-shadow:0 0 0 1px rgba(223,234,98,.25), 0 18px 48px -24px rgba(171,202,223,.5); translate:0 -3px; }
.mr-page .mr-step__n { font:600 16px/1.4 var(--mr-f-body); letter-spacing:0; color:var(--mr-sky); }
.mr-page .mr-step__n::before { counter-increment:mr-step; content:"0" counter(mr-step) " · "; }
.mr-page .mr-step .mr-h3 { margin-top:18px; }
.mr-page .mr-step .mr-body { margin-top:14px; font-size:16px; }
.mr-page .mr-step .mr-body + .mr-body { margin-top:12px; }

/* Provenance badges and Brand Profile field rows */
.mr-page .mr-prov { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; font:600 16px/1.5 var(--mr-f-body); letter-spacing:0; white-space:nowrap; }
.mr-page .mr-prov::before { content:""; width:6px; height:6px; }
.mr-page .mr-prov--owner { color:var(--mr-lime); border:1px solid rgba(223,234,98,.5); }
.mr-page .mr-prov--owner::before { background:var(--mr-lime); }
.mr-page .mr-prov--sourced { color:var(--mr-sky); border:1px solid rgba(171,202,223,.45); }
.mr-page .mr-prov--sourced::before { border:1px solid var(--mr-sky); }
.mr-page .mr-rows { margin-top:32px; border-top:1px solid var(--mr-rule); }
.mr-page .mr-field { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; padding:22px 0; border-top:1px solid var(--mr-rule); }
.mr-page .mr-field__k { display:flex; flex-direction:column; align-items:flex-start; gap:10px; font:600 16px/1.4 var(--mr-f-body); letter-spacing:0; }
.mr-page .mr-field__v { font-size:16px; line-height:1.6; }

/* Signature-moment frame, shared by the product, pricing and explainer figures. */
.mr-page .mr-moment { position:relative; margin:clamp(56px,6vw,96px) 0; border:1px solid rgba(255,255,255,.08); background:linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,0) 40%), rgba(26,30,61,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 48px 96px -56px rgba(4,6,24,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.mr-page .mr-moment-well { padding:clamp(22px,2.4vw,34px); background:var(--mr-m-well); border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 12px 24px -16px rgba(0,0,0,.5); line-height:1.9; }
.mr-page .mr-moment-btn { min-height:52px; padding:0 26px; border:1px solid rgba(248,244,238,.24); background:rgba(248,244,238,.02); color:var(--mr-warm-white); font:600 16px/1.2 var(--mr-f-body); letter-spacing:0; cursor:pointer; transition:border-color .25s, background-color .25s, box-shadow .3s, color .25s, transform .15s; }
.mr-page .mr-moment-btn:hover:not(:disabled) { border-color:rgba(248,244,238,.7); }
.marketing-refresh .mr-page .mr-moment-btn:focus-visible { outline:none; border-color:var(--mr-lime); box-shadow:0 0 0 4px rgba(223,234,98,.18); }

/* Company pages (About, Agencies, the explainer) */
.mr-page .mr-co-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:56px; }
.mr-page .mr-co-card { display:flex; flex-direction:column; align-items:flex-start; padding:36px 32px 40px; background:var(--mr-glass); border:1px solid var(--mr-rule); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); transition:border-color .25s, box-shadow .25s; }
.mr-page .mr-co-card:hover { border-color:rgba(223,234,98,.5); box-shadow:0 18px 48px -24px rgba(171,202,223,.5); }
.mr-page .mr-co-card__tag { font:600 16px/1.4 var(--mr-f-body); letter-spacing:0; color:var(--mr-sky); }
.mr-page .mr-co-card .mr-h3 { margin-top:14px; }
.mr-page .mr-co-card .mr-body { margin-top:16px; }
.mr-page .mr-co-card .mr-body + .mr-body { margin-top:14px; }
.mr-page .mr-co-card .mr-more { margin-top:auto; padding-top:28px; }

.mr-page .mr-people { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:48px; }
.mr-page .mr-person { padding:30px; background:var(--mr-glass); border:1px solid var(--mr-rule); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); transition:border-color .25s, box-shadow .25s; }
.mr-page .mr-person:hover { border-color:rgba(223,234,98,.5); box-shadow:0 18px 48px -24px rgba(171,202,223,.5); }
.mr-page .mr-person__role { font:600 16px/1.4 var(--mr-f-body); letter-spacing:0; color:var(--mr-sky); }
.mr-page .mr-person .mr-h3, .mr-page .mr-person .mr-body { margin-top:12px; }
.mr-page .mr-person .mr-body { font-size:16px; }
.mr-page .mr-person .mr-more { display:inline-block; margin-top:18px; }
.mr-page .mr-backed { margin-top:64px; }
/* Backers: name pills, each led by the backer's logo on a warm-white tile. */
.mr-page .mr-backers { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; padding:0; list-style:none; }
.mr-page .mr-backers li { display:flex; align-items:center; gap:14px; padding:10px 20px 10px 10px; border:1px solid var(--mr-rule); font:600 16px/1.3 var(--mr-f-body); letter-spacing:0; color:rgba(248,244,238,.86); }
.mr-page .mr-backers img { width:96px; height:48px; padding:6px 10px; object-fit:contain; background:var(--mr-warm-white); }
.mr-page .mr-co-founded { margin-top:20px; max-width:640px; }
.mr-page .mr-co-disambig { margin-top:40px; max-width:680px; }

/* Explainer: editorial long read and closing mission band */
.mr-page .mr-read { max-width:760px; }
.mr-page .mr-chapter + .mr-chapter { margin-top:clamp(64px,7vw,104px); }
.mr-page .mr-chapter__n { font:600 16px/1.4 var(--mr-f-body); letter-spacing:0; color:var(--mr-sky); }
.mr-page .mr-chapter .mr-h2 { margin-top:12px; }
.mr-page .mr-chapter .mr-prose { margin-top:24px; }
.mr-page .mr-chapter .mr-prose p:first-child { margin-top:0; }
.mr-page .mr-chapter .mr-more { display:inline-block; margin-top:28px; }
.mr-page .mr-mission { position:relative; padding-block:clamp(64px,8vw,112px); text-align:center; }
.mr-page .mr-mission__h { margin:14px auto 0; max-width:980px; }
.mr-page .mr-mission__lede { margin:20px auto 0; max-width:600px; }

/* One field, two ways of seeing (explainer signature). Hovering lights the provenance on both sides. */
.mr-page .mr-tw__panes { --mr-m-pad:clamp(24px,3.2vw,48px); display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1.25fr); }
.mr-page .mr-tw__seam { width:1px; justify-self:center; margin-block:var(--mr-m-pad); background:linear-gradient(180deg, transparent, rgba(223,234,98,.75) 20%, rgba(223,234,98,.75) 80%, transparent); }
.mr-page .mr-tw__pane { min-width:0; padding:var(--mr-m-pad); }
.mr-page .mr-tw__label { font:600 16px/1.4 var(--mr-f-body); letter-spacing:0; color:var(--mr-sky); }
.mr-page .mr-tw__human { display:flex; flex-direction:column; gap:16px; margin-top:32px; }
.mr-page .mr-tw__k { font:600 16px/1.4 var(--mr-f-body); letter-spacing:0; }
.mr-page .mr-tw__human .mr-prov { align-self:flex-start; transition:box-shadow .25s; }
.mr-page .mr-tw__v { font-family:var(--mr-f-display); font-size:clamp(22px,1.7vw,26px); line-height:1.35; }
.mr-page .mr-tw__agent { margin-top:32px; overflow-x:auto; font:500 16px/1.7 var(--mr-mono); letter-spacing:0; color:var(--mr-warm-white); white-space:pre; }
.mr-page .mr-tw__agent code { font:inherit; }
.mr-page .mr-tw__agent .k { color:var(--mr-lavender); }
.mr-page .mr-tw__agent .s { color:var(--mr-warm-white); }
.mr-page .mr-tw__hl { display:inline-block; transition:background .25s, color .25s; }
.mr-page .mr-tw:hover .mr-tw__hl { background:rgba(223,234,98,.14); }
.mr-page .mr-tw:hover .mr-tw__hl .s { color:var(--mr-lime); }
.mr-page .mr-tw:hover .mr-tw__human .mr-prov { box-shadow:0 0 0 1px rgba(223,234,98,.35), 0 0 24px -4px rgba(223,234,98,.45); }
.mr-page .mr-tw__cap { margin-top:20px; max-width:680px; }

@media (max-width:1100px) {
  .mr-page .mr-split2 { grid-template-columns:minmax(0,1fr); }
  .mr-page .mr-stepgrid { grid-template-columns:1fr; }
  .mr-page .mr-co-pair { grid-template-columns:1fr; }
  .mr-page .mr-tw__panes { grid-template-columns:1fr; grid-template-rows:auto 1px auto; }
  .mr-page .mr-tw__seam { width:auto; height:1px; margin:0 var(--mr-m-pad); align-self:center; background:linear-gradient(90deg, transparent, rgba(223,234,98,.75) 15%, rgba(223,234,98,.75) 85%, transparent); }
}
@media (max-width:640px) {
  .mr-page .mr-px { white-space:normal; }
  .mr-page .mr-cta--lg { --s:13px; width:240px; height:61px; font-size:19px; }
  .mr-page .mr-field { grid-template-columns:1fr; gap:10px; }
  .mr-page .mr-people { grid-template-columns:1fr; }
  .mr-page .mr-co-card { padding:28px 22px 32px; }
  .mr-page .mr-tw__agent { white-space:pre-wrap; overflow-wrap:anywhere; }
  .mr-page .mr-mission__h br { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .mr-page .mr-cta { animation:none !important; }
  .mr-page .mr-step, .mr-page .mr-co-card, .mr-page .mr-person, .mr-page .mr-moment-btn, .mr-page .mr-tw__hl, .mr-page .mr-tw__human .mr-prov { transition:none; }
  .mr-page .mr-step:hover { translate:none; }
}

/* The co-founders' letter (/about/letter): one reading column, set like a letter. */
.mr-page .mr-letter__body { padding-bottom:clamp(80px,10vw,150px); }
.mr-page .mr-letter__body > * { max-width:720px; }
.mr-page .mr-letter__body p { margin:0; font-size:clamp(18px,1.39vw,20px); line-height:1.7; color:rgba(248,244,238,.88); }
.mr-page .mr-letter__body p + p { margin-top:22px; }
.mr-page .mr-letter__body h2 { margin:clamp(48px,5vw,72px) 0 20px; font-family:var(--mr-f-display); font-weight:400; font-size:clamp(28px,2.5vw,36px); line-height:1.2; letter-spacing:-.02em; color:#fff; }
.mr-page .mr-letter__body .mr-letter__close { margin-top:32px; font-family:var(--mr-f-display); font-size:clamp(24px,2vw,30px); line-height:1.3; color:var(--mr-lime); }
.mr-page .mr-letter__sign { margin-top:48px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12); }
.mr-page .mr-letter__sign p { font-size:18px; line-height:1.5; color:rgba(248,244,238,.74); }
.mr-page .mr-letter__sign p + p { margin-top:4px; }
/* The names in a restrained handwriting face (Caveat), like a signed letter. */
.mr-page .mr-letter__sign .mr-letter__names { font:500 clamp(36px,3vw,44px)/1.1 "Caveat","Area Normal",cursive; letter-spacing:0; color:#fff; }
.mr-page .mr-letter__sign .mr-letter__names + p { margin-top:10px; }