/* LPG Digital — site styles. Values measured from Figma "LPG Digital New Website Design" (dark, 1440 + 393). */

:root {
  --bg: #020617;
  --surface: #071023;
  --surface-deep: #050811;
  --surface-raised: #131824;
  --accent: #0080ff;
  --accent-hover: #1a8cff;
  --accent-soft: #46a8ff;
  --accent-dot: #65b2ff;
  --text: #ffffff;
  --text-body: #c3cae8;
  --text-muted: #96989f;
  --text-faint: #70737f;
  --text-meta: #71717a;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --rule: rgba(255, 255, 255, 0.14);
  --ghost: rgba(255, 255, 255, 0.06);
  --gutter: clamp(20px, 8.334vw, 120px);
  --maxw: 1200px;
  --r-card: 36px;
  --r-btn: 14px;
  /* Motion: one critically damped spring (Apple's default, damping 1.0, no overshoot) for every transition.
     --dur is the settle time at a 0.3s response, --dur-lg at 0.4s. Browsers without linear() get a close cubic-bezier. */
  --spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: .44s;
  --dur-lg: .59s;
  --press: 100ms ease-out;
  color-scheme: dark;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.004 1%, 0.032 3%, 0.098 5.7%, 0.203 9%, 0.334 12.9%, 0.473 17.2%, 0.605 22.1%, 0.718 27.3%, 0.808 33%, 0.875 39%, 0.922 45.5%, 0.954 52.3%, 0.973 59.4%, 0.985 66.9%, 0.992 74.7%, 0.996 82.8%, 0.998 91.3%, 1); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
/* Display headings use DM Sans's optical size axis (narrower cut at large sizes), matching Figma's rendering. */
h1, h2 { font-optical-sizing: auto; font-variation-settings: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-bottom: 80px; position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 24px; border-radius: var(--r-btn);
  font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: background-color var(--dur) var(--spring), border-color var(--dur) var(--spring), transform var(--dur) var(--spring);
}
/* Press feedback lands on pointer-down and is instant; the release springs back. */
.btn:active, .nav__cta:active { transform: scale(0.97); transition-duration: 100ms; transition-timing-function: ease-out; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: var(--ghost); border: 1px solid var(--border-strong); color: #fff; }
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.32); }
.btn--lg { padding: 16px 26px; }
/* Icon-only buttons (the social links on About): square, as tall as a .btn--lg with text. */
.btn--icon.btn--lg { width: 50px; height: 50px; padding: 0; }
.btn-icons { display: flex; flex-wrap: wrap; gap: 12px; } /* the icons stay in one row when .btn-row stacks on phones */
@media (max-width: 640px) { .btn--icon.btn--lg { width: 45px; height: 45px; } } /* matches the phone button height */
.btn--icon svg { flex: none; }
.btn--sm { padding: 14px 22px; font-size: 14px; }
.btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- Tags & chips ---------- */
.tag {
  display: inline-flex; padding: 3px 8px; border-radius: 12px; border: 1px solid var(--border);
  font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0.03em; color: var(--text-body);
  text-transform: uppercase; white-space: nowrap;
}
.tag--accent { background: var(--accent); border-color: var(--accent); color: #fff; padding: 5px 10px; border: 0; }
.chip { display: inline-flex; padding: 4px 8px; border-radius: 12px; background: var(--accent); font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.03em; color: #fff; }

/* Placeholder figures still to be confirmed before launch. */
.tbc { outline: 1.5px dashed #f5b544; outline-offset: 4px; border-radius: 6px; }

/* ---------- Section heads ---------- */
.head { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding-bottom: 48px; }
.head h2 { font-size: 44px; font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; max-width: 880px; }
.head p:not(.tag) { font-size: 16px; line-height: 1.6; color: var(--text-muted); max-width: 700px; }

/* ---------- Nav ---------- */
.nav { background: var(--surface); position: sticky; top: 0; z-index: 50; }
.nav__inner { display: flex; justify-content: center; align-items: center; gap: 48px; padding-block: 18px; }
.nav__spacer { display: none; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo img { width: 21px; height: 24px; object-fit: contain; }
.logo span { font-size: 15px; font-weight: 500; letter-spacing: 0.6px; line-height: 1.2; white-space: nowrap; }
.nav__pill {
  display: flex; align-items: center; padding: 6px 6px 6px 10px; border-radius: 20px; background: var(--surface); /* 14px button radius + the 6px ring, so the corners run parallel */
  filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.16));
}
.nav__links { display: flex; }
.nav__links a { padding: 12px 18px; font-size: 14px; line-height: 1.4; color: var(--text-body); border-radius: 100px; transition: color var(--dur) var(--spring); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: #fff; }
.nav__cta { padding: 11px 18px; white-space: nowrap; border-radius: var(--r-btn); background: var(--accent); text-align: center; font-size: 14px; font-weight: 500; line-height: 1.2; transition: background-color var(--dur) var(--spring), transform var(--dur) var(--spring); }
.nav__cta:hover { background: var(--accent-hover); }
/* In the desktop pill the button is as tall as the links and sits in an even 6px ring, so the text inset matches at
   both ends (about 28px before "Services", 26px after the button label). */
.nav__pill .nav__cta { margin-left: 6px; padding: 12px 20px; line-height: 1.4; }
.nav__right { justify-self: end; display: none; align-items: center; gap: 12px; }
.nav__menu { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.nav__menu span { width: 18px; height: 1.6px; border-radius: 1px; background: #fff; transition: transform var(--dur) var(--spring), opacity var(--dur) var(--spring); }
.nav[data-open] .nav__menu span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav[data-open] .nav__menu span:nth-child(2) { opacity: 0; }
.nav[data-open] .nav__menu span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
.nav__drawer { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 80px 0 72px; text-align: center; }
.hero__glow { position: absolute; pointer-events: none; }
.hero__glow img { position: absolute; max-width: none; width: 100%; height: 100%; }
.hero__glow--1 { left: calc(50% - 410px); top: 40px; width: 820px; height: 360px; }
.hero__glow--1 img { inset: -66.67% -29.27%; width: auto; height: auto; }
.hero__glow--2 { left: calc(50% - 530px); top: 220px; width: 460px; height: 240px; }
.hero__glow--2 img { inset: -83.33% -43.48%; width: auto; height: auto; }
.hero__glow--3 { left: -103px; top: 543px; width: 246px; height: 222px; }
.hero__glow--3 img { inset: -123.42% -111.38%; width: auto; height: auto; }
.hero__glow--4 { left: calc(50% + 395px); top: 380px; width: 316px; height: 316px; }
.hero__glow--4 img { inset: -153.16%; width: auto; height: auto; }
.hero .wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero__badge { display: inline-flex; align-items: center; gap: 5px; }
.hero__badge i { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-dot); }
.hero h1 { max-width: 940px; padding-top: 28px; font-size: 60px; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: var(--accent-soft); }
.hero__sub { max-width: 720px; padding-top: 24px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.hero__video { width: min(880px, 100%); margin-top: 44px; }
.hero__ctas { padding-top: 40px; justify-content: center; }
.hero__meta { padding-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-meta); }

/* Video placeholder / player */
.video {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  width: 100%; aspect-ratio: 880 / 495; border-radius: var(--r-card); background: var(--surface-deep); overflow: hidden;
}
.video img.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__play { position: relative; width: 76px; height: 76px; transition: transform var(--dur) var(--spring); }
.video[data-src] { cursor: pointer; }
.video[data-src]:hover .video__play { transform: scale(1.06); }
.video[data-src]:active .video__play { transform: scale(0.94); transition: transform var(--press); }
.video__title { position: relative; font-size: 15px; font-weight: 500; line-height: 1.4; }
.video__time { position: relative; margin-top: -12px; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Client logos ---------- */
.logos { padding: 8px 0 88px; }
.logos__cap { padding-bottom: 44px; text-align: center; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; color: var(--text-faint); }
.marquee { position: relative; display: flex; flex-direction: column; gap: 50px; overflow: hidden; padding-block: 8px; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 112px; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(to right, var(--bg), rgba(2, 6, 23, 0)); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--bg), rgba(2, 6, 23, 0)); }
.marquee__row { display: flex; width: max-content; animation: marquee var(--speed, 60s) linear infinite; }
.marquee__row--rev { animation-direction: reverse; }
.marquee__set { display: flex; align-items: center; gap: var(--gap, 52px); padding-right: var(--gap, 52px); height: 26px; }
.marquee__set img { opacity: 0.82; object-fit: contain; flex: none; }
.marquee__set .marquee__text { opacity: 0.8; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--text-muted); white-space: nowrap; }
.marquee--mobile { display: none; }
/* Newsletter: pulled up under the signup card, with room before the cards below. */
.logos--nl { margin-top: -36px; padding: 0 0 104px; }
.logos--nl .logos__cap { padding-bottom: 28px; }
@media (max-width: 640px) { .logos--nl { margin-top: -24px; padding-bottom: 64px; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Quote row ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote {
  display: flex; flex-direction: column; min-height: 264px; padding: 28px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--border);
}
.quote__metric { align-self: flex-start; padding: 4px 8px; border-radius: 12px; background: var(--bg); font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--text-muted); }
.quote blockquote { flex: 1; padding: 20px 0 22px; font-size: 17px; line-height: 1.5; letter-spacing: -0.005em; }
.person { display: flex; align-items: center; gap: 10px; }
.person img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.person b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.person small { display: block; margin-top: 1px; font-size: 13px; line-height: 1.4; color: var(--text-faint); }

/* ---------- Founder ---------- */
.founder {
  display: flex; gap: 48px; padding: 40px 48px 40px 40px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--border);
}
.founder__photo { flex: none; width: 320px; height: 509px; border-radius: 28px; object-fit: cover; }
.founder__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.founder__copy h2 { font-size: 34px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.founder__role { padding-top: 6px; font-size: 15px; line-height: 1.45; color: var(--text-faint); }
.founder__bio { padding: 20px 0 28px; font-size: 16px; line-height: 1.65; color: var(--text-body); }
.expertise { width: 100%; padding: 22px; border-radius: 24px; background: var(--surface-raised); font-weight: 500; }
.expertise h3 { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.03em; color: var(--text-body); }
.arrow-list { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.arrow-list li { display: flex; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.arrow-list li::before { content: "→"; flex: none; font-size: 13px; color: var(--accent); }
.founder__cta { padding-top: 28px; }
.founder__cta small { font-size: 13px; line-height: 1.5; color: var(--text-faint); }

/* ---------- Software partners ---------- */
.partners__label { padding-bottom: 26px; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; }
.partners { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 28px; }
.partner { display: flex; align-items: center; gap: 12px; }
.partner img { width: 34px; height: 34px; flex: none; object-fit: contain; }
.partner img.r8 { border-radius: 8px; }
.partner img.r17 { border-radius: 17px; }
.partner img.tile { padding: 5px; border-radius: 8px; background: #fff; }
.partner b { display: block; font-size: 16px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.partner small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--text-faint); white-space: nowrap; }

/* ---------- Result cards ---------- */
.results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.result {
  display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--border);
}
.result__label { display: flex; align-items: center; gap: 8px; min-height: 21px; }
.result__label .chip { flex: none; }
.result__label p { font-size: 15px; font-weight: 500; line-height: 1.4; }
.result .video { margin-top: 18px; aspect-ratio: auto; height: 296px; border-radius: 24px; }
.result .video__play { width: 60px; height: 60px; }
.result .person { padding-top: 20px; }
.result .person img { width: 32px; height: 32px; }
.result .person small { font-size: 12.5px; }
.result .person img.rot { transform: rotate(-40deg); }

/* ---------- Client work ---------- */
.case { padding-bottom: 8px; }
.case__panel { display: block; position: relative; height: 420px; border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.case__panel > img.cover, .case__panel > .case__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__panel > img.laundry { position: absolute; left: 0; top: -20.44%; width: 100%; height: 182.97%; max-width: none; }
.fan { position: absolute; left: 50%; top: 50%; width: 1200px; height: 420px; transform: translate(-50%, -50%) scale(var(--fan-scale, 1)); }
.fan__shot {
  position: absolute; width: 210px; height: 300px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22); background: var(--surface-deep);
}
.fan__shot img { position: absolute; top: 0; height: 100%; width: 254%; max-width: none; }
.fan__shot img.full { left: 0; width: 100%; height: auto; }
.fan__shot:nth-child(1) { left: -45px; top: 131px; transform: rotate(14deg); }
.fan__shot:nth-child(2) { left: 226px; top: 85px; transform: rotate(7deg); }
.fan__shot:nth-child(3) { left: 495px; top: 60px; }
.fan__shot:nth-child(4) { left: 762px; top: 60px; transform: rotate(-7deg); }
.fan__shot:nth-child(5) { left: 1028px; top: 80px; transform: rotate(-14deg); }
.fan__shot:nth-child(1) img:not(.full) { left: 0; }
.fan__shot:nth-child(2) img:not(.full) { left: -38.5%; }
.fan__shot:nth-child(3) img:not(.full) { left: -77%; }
.fan__shot:nth-child(4) img:not(.full) { left: -115.5%; }
.fan__shot:nth-child(5) img:not(.full) { left: -154%; }
.case__caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 20px; }
.case__brand { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: 0.03em; }
.case__tags { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.03em; color: var(--text-body); }
.case__tags li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: middle; transform: translateY(-1px); }
.case__rule { height: 1px; background: var(--rule); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); padding: 26px 0 34px; }
.metric b { display: block; font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.metric span { display: block; max-width: 230px; padding-top: 8px; font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
.metrics--3 { grid-template-columns: repeat(3, 1fr); }
.metrics__note { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; color: var(--text-faint); }

/* ---------- AOV band ---------- */
.band { display: flex; flex-direction: column; align-items: center; padding: 68px 64px; border-radius: var(--r-card); background: var(--surface-raised); text-align: center; }
.band h2 { max-width: 840px; font-size: 38px; font-weight: 600; line-height: 1.22; letter-spacing: -0.015em; }
.band > p { max-width: 720px; padding-top: 20px; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.readout { width: 100%; margin-top: 44px; padding: 30px 36px; border-radius: 28px; background: var(--surface); text-align: left; }
.readout__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 22px; }
.readout__head h3 { font-size: 19px; font-weight: 600; line-height: 1.35; }
.readout__head p { padding-top: 4px; font-size: 13px; line-height: 1.45; color: var(--text-faint); }
.readout__head .chip { flex: none; padding: 5px 10px; }
.readout table { width: 100%; border-collapse: collapse; font-size: 15px; font-weight: 500; line-height: 1.4; }
.readout th, .readout td { padding: 15px 0; text-align: right; border-bottom: 1px solid var(--border); }
.readout th { padding: 0 0 0; height: 17px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-faint); }
.readout thead tr th { padding-bottom: 0; }
.readout th:first-child, .readout td:first-child { text-align: left; width: 300px; }
.readout col.c { width: 190px; }
.readout col.l { width: 180px; }
.readout td.ctl { color: var(--text-muted); }
.readout td.lift { color: var(--accent); }
.readout .lbl-short { display: none; }
.montii-logo { position: relative; display: block; width: 107px; height: 31px; overflow: hidden; }
.montii-logo img { position: absolute; left: -21.29%; top: -24.62%; width: 121.5%; height: 150.21%; max-width: none; }
.readout__foot { padding-top: 16px; font-size: 13px; line-height: 1.6; color: var(--text-faint); }
.readout__foot b { font-weight: 700; }
.band .btn-row { padding-top: 40px; justify-content: center; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { padding: 26px 32px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); }
.faq summary { display: flex; align-items: center; gap: 20px; cursor: pointer; list-style: none; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 500; line-height: 1.2; color: var(--text-faint); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { max-width: 940px; padding-top: 14px; font-size: 15px; line-height: 1.65; color: var(--text-body); }
.faq details > div p + p { margin-top: 10px; }

/* ---------- CTA block ---------- */
.cta { display: flex; flex-direction: column; align-items: center; padding: 88px 80px; border-radius: var(--r-card); background: var(--surface-deep); text-align: center; }
.cta h2 { max-width: 900px; padding-top: 28px; font-size: 54px; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
.cta > p:not(.tag) { max-width: 700px; padding-top: 22px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.cta .btn { margin-top: 40px; width: 271px; }
.cta small { max-width: 700px; padding-top: 26px; font-size: 14px; line-height: 1.5; color: var(--text-faint); }

/* ---------- Footer ---------- */
.footer { padding-bottom: 48px; }
.footer__rule { height: 1px; background: var(--rule); }
.footer__top { display: flex; gap: 80px; padding: 56px 0; }
.footer__brand { width: 400px; flex: none; }
.footer__brand .logo span { font-weight: 700; }
.footer__blurb { padding: 18px 0 28px; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.footer__label { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.03em; color: var(--text-body); }
.footer__nl { padding: 10px 0 14px; font-size: 14px; line-height: 1.55; color: var(--text-body); }
.signup { display: flex; gap: 8px; }
.signup input {
  flex: 1; min-width: 0; padding: 13px 16px; border-radius: var(--r-btn); border: 1px solid var(--border);
  background: var(--surface); color: #fff; font: inherit; font-size: 14px; line-height: 1.4;
}
.signup input::placeholder { color: var(--text-muted); }
.signup button { padding: 13px 18px; border-radius: var(--r-btn); background: var(--accent); font-size: 14px; font-weight: 500; line-height: 1.2; }
.signup button:hover { background: var(--accent-hover); }
.signup__msg { padding-top: 10px; font-size: 13px; color: var(--text-muted); }
[data-page="newsletter"] .footer__signup { display: none; }
.footer__col { flex: 1; display: flex; flex-direction: column; gap: 14px; color: var(--text-body); }
.footer__col h4 { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.03em; }
.footer__col a { font-size: 14px; line-height: 1.5; transition: color var(--dur) var(--spring); }
.footer__col a:hover { color: #fff; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.5; color: var(--text-faint); }
.footer__legal { display: flex; gap: 24px; white-space: nowrap; }
.footer__legal a:hover { color: var(--text-body); }

/* ---------- Inner pages ---------- */
.page-hero { position: relative; overflow: hidden; padding: 80px 0 64px; text-align: center; } /* top matches .hero */
.page-hero .wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.page-hero h1 { max-width: 900px; padding-top: 28px; font-size: 54px; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
.page-hero h1 em { font-style: normal; color: var(--accent-soft); }
.page-hero p:not(.tag) { text-wrap: pretty; max-width: 700px; padding-top: 20px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.page-hero .btn-row { padding-top: 36px; justify-content: center; }
.page-hero__glow { position: absolute; left: 50%; top: 0; width: 820px; height: 360px; transform: translateX(-50%); pointer-events: none; }
.page-hero__glow img { position: absolute; inset: -66.67% -29.27%; max-width: none; }

.card { padding: 32px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.offer { display: flex; flex-direction: column; }
.offer .tag { align-self: flex-start; }
.offer h2 { padding-top: 20px; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.offer > p:not(.tag) { padding-top: 12px; font-size: 15.5px; line-height: 1.65; color: var(--text-body); }
.offer .arrow-list { padding: 22px 0 28px; flex: 1; }
.offer__meta { display: flex; gap: 24px; padding: 18px 0 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-faint); }
.offer__meta b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.offer .btn { align-self: flex-start; }
/* Page Speed: a full-width card under the three core offers; copy on the left, the list on the right. */
.offer--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
.offer--wide .offer__main { display: flex; flex-direction: column; }
.offer--wide .offer__main > p:not(.tag) { padding: 12px 0 24px; font-size: 15.5px; line-height: 1.65; color: var(--text-body); }
.offer--wide .arrow-list { padding: 4px 0 0; }
@media (max-width: 960px) { .offer--wide { grid-template-columns: 1fr; } .offer--wide .arrow-list { padding: 22px 0 0; } }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.step { counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); display: block; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--accent-soft); }
.step h3 { padding-top: 14px; font-size: 19px; font-weight: 600; line-height: 1.35; }
.step p { padding-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }

.case-card { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color var(--dur) var(--spring); }
.case-card:hover { border-color: var(--border-strong); }
.case-card .case__panel { height: 260px; border-radius: 0; }
.case__panel--stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(60% 80% at 50% 30%, rgba(0, 128, 255, 0.28), rgba(0, 128, 255, 0) 70%), var(--surface-deep);
}
.case__panel--stat b { font-size: 72px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.case__panel--stat span { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.case-card__body { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 30px; }
.case-card__body .case__brand { font-size: 15px; }
.case-card__body h3 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.case-card__body p { font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.case-card__more { padding-top: 6px; font-size: 14px; font-weight: 500; color: var(--accent-soft); }

.prose { max-width: 760px; margin-inline: auto; font-size: 17px; line-height: 1.7; color: var(--text-body); }
.prose h2 { padding-top: 48px; font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
.prose h3 { padding-top: 28px; font-size: 20px; font-weight: 600; line-height: 1.35; color: #fff; }
.prose p, .prose ul, .prose ol, .prose table { margin-top: 16px; }
.prose ul { padding-left: 0; }
.prose ul li { position: relative; padding-left: 22px; margin-top: 8px; }
.prose ul li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-size: 14px; top: 2px; }
.prose ol { list-style: decimal; padding-left: 22px; }
.prose ol li { margin-top: 8px; }
.prose a { color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-soft); }
.prose h1 { font-size: 44px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.prose strong, .prose b { color: #fff; font-weight: 600; }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.prose th, .prose td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose th { background: var(--surface); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
.prose .toc ol li { margin: 0 0 8px; break-inside: avoid; }
.prose .toc ol li:first-child { margin-top: 0; }
.prose .notice, .prose .toc { margin-top: 24px; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); font-size: 14.5px; }
.prose .toc ol { columns: 2; column-gap: 32px; }
.prose .toc a { text-decoration: none; color: var(--text-body); }
.legal-head { padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.legal-head .meta { margin-top: 8px; font-size: 14px; color: var(--text-faint); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { padding: 26px 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); }
.stat b { display: block; font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.stat span { display: block; padding-top: 10px; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }

.nl-card { max-width: 640px; margin-inline: auto; }
.nl-card .signup { margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav__links a { padding-inline: 14px; }
  .hero h1 { font-size: 52px; }
  .founder__photo { width: 280px; height: auto; align-self: stretch; }
  .partners { flex-wrap: wrap; justify-content: flex-start; row-gap: 20px; }
  .partner { width: calc(50% - 12px); }
  .footer__top { gap: 48px; }
  .footer__brand { width: 340px; }
}

@media (max-width: 960px) {
  .nav__inner { display: grid; grid-template-columns: 1fr auto; padding-block: 14px; }
  .nav__pill, .nav__spacer { display: none; }
  .nav__right { display: flex; }
  .nav__right .nav__cta { width: auto; padding: 9px 16px; font-size: 13px; }
  .nav__drawer { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-lg) var(--spring), visibility 0s var(--dur-lg); }
  .nav[data-open] .nav__drawer { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dur-lg) var(--spring), visibility 0s; }
  .nav__drawer > .nav__drawer-links { min-height: 0; overflow: hidden; }
  /* Links slide down with the drawer and back up the same way when it closes. */
  .nav__drawer a { opacity: 0; transform: translateY(-8px); transition: opacity var(--dur) var(--spring), transform var(--dur-lg) var(--spring); }
  .nav[data-open] .nav__drawer a { opacity: 1; transform: none; }
  /* The spacing sits on the first and last links so the drawer can close to zero height. */
  .nav__drawer-links { display: flex; flex-direction: column; }
  .nav__drawer a:first-child { margin-top: 6px; }
  .nav__drawer a:last-child { margin-bottom: 18px; }
  .nav__drawer a { display: block; padding: 12px 0; font-size: 17px; color: var(--text-body); border-bottom: 1px solid var(--border); }
  .nav__drawer a[aria-current="page"] { color: #fff; }
  .quotes, .results, .grid-3, .steps { grid-template-columns: 1fr; gap: 12px; }
  .grid-2 { grid-template-columns: 1fr; gap: 12px; }
  .founder { flex-direction: column; gap: 0; padding: 20px; }
  .founder__photo { width: 100%; height: 360px; object-position: center 20%; }
  .founder__copy h2 { padding-top: 20px; }
  .footer__top { flex-wrap: wrap; }
  .footer__brand { width: 100%; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .logo img { width: 17px; height: 20px; }
  .logo { gap: 8px; }
  .logo span { font-size: 13px; font-weight: 700; letter-spacing: 0.52px; }
  .section { padding-bottom: 56px; }
  .tag { font-size: 10.5px; }
  .head { gap: 14px; padding-bottom: 28px; }
  .head h2 { font-size: 27px; line-height: 1.2; letter-spacing: -0.02em; }
  .head p:not(.tag) { font-size: 14px; }

  .hero { padding: 36px 0 48px; }
  .hero__glow--1 { left: calc(50% - 190px); top: 20px; width: 380px; height: 240px; }
  .hero__glow--1 img { inset: -62.5% -39.47%; }
  .hero__glow--2 { left: 20px; top: 150px; width: 240px; height: 160px; }
  .hero__glow--2 img { inset: -81.25% -54.17%; }
  .hero__glow--3, .hero__glow--4 { display: none; }
  .hero__badge { padding: 4px 9px; font-size: 10.5px; letter-spacing: 0.03em; }
  .hero__badge i { display: block; }
  .hero h1 { padding-top: 20px; font-size: 32px; line-height: 1.15; }
  .hero__sub { padding-top: 16px; font-size: 15px; }
  .hero__video { margin-top: 28px; }
  .hero .video { aspect-ratio: auto; height: 199px; gap: 12px; border-radius: 24px; }
  .hero .video__play { width: 52px; height: 52px; }
  .hero .video__title { font-size: 13px; }
  .hero .video__time { display: none; }
  .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; padding-top: 24px; }

  .logos { padding: 0 0 48px; }
  .logos__cap { padding-bottom: 28px; font-size: 10.5px; letter-spacing: 0.1em; }
  .marquee--desktop { display: none; }
  .marquee--mobile { display: flex; gap: 25px; }
  .marquee::before, .marquee::after { width: 48px; }

  .quote { min-height: 0; padding: 20px; border-radius: 28px; }
  .quote blockquote { font-size: 15.5px; padding: 16px 0 18px; }

  .founder__photo { height: 220px; border-radius: 20px; }
  .founder__copy h2 { font-size: 26px; }
  .founder__bio { font-size: 15px; }
  .expertise { padding: 18px; border-radius: 20px; }
  .founder__cta { flex-direction: column; align-items: stretch; padding-top: 18px; }
  .founder__cta .btn { width: 100%; }
  .founder__cta small { white-space: normal; text-align: center; }

  .partners__label { padding-bottom: 18px; }
  .partners { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .partner { width: auto; align-items: flex-start; }
  .partner b { font-size: 14.5px; white-space: normal; }
  .partner small { font-size: 12px; white-space: normal; }

  .result { padding: 16px; border-radius: 28px; }
  .result .video { height: 195px; border-radius: 20px; }
  .result .video__play { width: 48px; height: 48px; }
  .result .person { padding-top: 16px; }

  .case__panel { height: 190px; border-radius: 24px; }
  .case__caption { padding: 16px 0 14px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .case__caption img { transform-origin: left center; }
  .case__tags { justify-content: flex-start; font-size: 11px; gap: 8px; }
  .case__tags li + li::before { margin-right: 8px; }
  .case__rule { background: var(--border); }
  .metrics { grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 16px 0 28px; }
  .metric b { font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
  .metric span { padding-top: 6px; font-size: 10px; }

  .band { padding: 32px 20px; border-radius: 28px; }
  .band h2 { font-size: 22px; line-height: 1.25; }
  .band > p { padding-top: 14px; font-size: 13.5px; }
  .readout { margin-top: 24px; padding: 18px 16px; border-radius: 20px; }
  .readout__head { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 14px; }
  .readout__head h3 { font-size: 14.5px; }
  .readout__head p { font-size: 11px; }
  .readout__head .chip { order: 3; font-size: 9.5px; padding: 4px 8px; }
  .readout table { font-size: 12px; }
  .readout th { font-size: 9.5px; }
  .readout th, .readout td { padding-block: 11px; }
  .readout thead th { padding-block: 0; }
  .readout th:first-child, .readout td:first-child { width: auto; }
  .readout col.c, .readout col.l { width: 62px; }
  .readout .lbl-long { display: none; }
  .readout .lbl-short { display: inline; }
  .readout__foot { padding-top: 12px; font-size: 11px; }
  .readout__foot b { font-weight: 400; }
  .band .btn-row { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; padding-top: 24px; }
  .band .btn { padding-block: 14px; font-size: 14px; }

  .faq details { padding: 18px; border-radius: 20px; }
  .faq summary { font-size: 15.5px; gap: 12px; }
  .faq summary::after { font-size: 20px; }
  .faq details > div { padding-top: 10px; font-size: 14px; }

  .cta { padding: 48px 24px; border-radius: 28px; }
  .cta .tag { font-size: 10px; }
  .cta h2 { padding-top: 20px; font-size: 30px; line-height: 1.17; }
  .cta > p:not(.tag) { padding-top: 16px; font-size: 15px; }
  .cta .btn { width: 100%; margin-top: 28px; }
  .cta small { font-size: 12.5px; padding-top: 18px; }

  .footer__top { flex-direction: column; gap: 32px; padding: 40px 0; }
  .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__legal { flex-wrap: wrap; gap: 16px 20px; }

  .page-hero { padding: 36px 0 40px; }
  .page-hero h1 { font-size: 34px; padding-top: 20px; }
  .page-hero p:not(.tag) { font-size: 15.5px; padding-top: 14px; }
  .page-hero .tag { white-space: normal; text-align: center; max-width: 100%; }
  .page-hero .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
  .page-hero__glow { width: 380px; height: 240px; }
  .page-hero__glow img { inset: -62.5% -39.47%; }
  .card { padding: 22px; border-radius: 28px; }
  .offer h2 { font-size: 23px; }
  .offer .btn { align-self: stretch; }
  .case-card .case__panel { height: 200px; }
  .case-card__body { padding: 20px 20px 24px; }
  .case-card__body h3 { font-size: 19px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 24px; padding-top: 36px; }
  .prose .toc ol { columns: 1; }
  .prose h1 { font-size: 32px; }
  .prose table { display: block; overflow-x: auto; font-size: 13px; }
  .prose th, .prose td { padding: 10px 12px; white-space: nowrap; }
  .prose td:first-child { white-space: normal; min-width: 150px; }
  .stat { padding: 20px; border-radius: 20px; }
  .stat b { font-size: 28px; }
  .stat span { font-size: 10.5px; }
}

/* Footer columns wrapper keeps desktop flex layout. */
.footer__cols { display: contents; }
@media (max-width: 640px) { .footer__cols { display: grid; } }

@media (prefers-reduced-motion: reduce) {
  .marquee__row { animation: none; }
  html { scroll-behavior: auto; }
  .nav__drawer, .nav[data-open] .nav__drawer { transition: none; }
  .nav__drawer a { transform: none; }
  .btn:active, .nav__cta:active, .quiz__options button:active, .proof__nav button:active { transform: none; }
  a.case__panel:hover > .case__video, .proof__item a:hover img, .video[data-src]:hover .video__play { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .case__chip { background: #0b1326; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Mobile refinements matched to the Figma 393 frame. */
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .fan { transform: translate(-50%, -50%) scale(calc(var(--fan-scale, 1) * 1.6)); }
  .case__caption > img { width: 130px; height: auto; }
  .montii-logo { width: 62px; height: 18px; }
  .result__label { align-items: flex-start; }
  .result__label p { font-size: 14px; }
  .result .video__play { width: 60px; height: 60px; }
  .readout col.c { width: 66px; }
  .readout col.l { width: 54px; }
  .readout td:first-child { padding-right: 6px; }
  .signup { flex-direction: column; }
  .signup button { padding-block: 14px; }
  .footer__cols { grid-template-columns: 1fr; gap: 28px; }
  .partners + .partners__rule { display: block; }
}

@media (max-width: 640px) { .readout .pad { display: none; } }

/* Mobile panel renders (Figma 393 frame uses its own compositions) and QA round 2 spacing. */
.m-panel { display: none; }
.partners__rule { display: none; }
[data-page="newsletter"] .footer__blurb { padding-bottom: 0; }
@media (max-width: 640px) {
  .m-panel { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
  .case__panel > .fan, .case__panel > img.cover { display: none; }

  .case__caption { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .case__caption { justify-content: flex-start; }
  .case__caption > img, .case__caption > .montii-logo { margin-right: calc(100% - 140px); margin-bottom: 4px; }
  .case__brand, .case__tags li {
    display: inline-flex; padding: 3px 8px; border: 1px solid var(--border); border-radius: 12px;
    font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: 0.03em; color: var(--text-body);
  }
  .case__tags { gap: 6px; }
  .case__tags li + li::before { display: none; }
  .metrics__note { font-size: 13px; }

  .quote blockquote { font-size: 15px; }
  .partners__rule { display: block; height: 1px; margin: 28px 0 0; background: var(--rule); }

  .result .video { height: 180px; margin-top: 12px; }
  .result .person { padding-top: 14px; }
  .result { padding: 16px 16px 14px; }

  .faq { gap: 10px; }
  .faq details > div { font-size: 13px; }

  .footer__blurb { font-size: 13px; padding: 14px 0 22px; }
  .footer__col { gap: 11px; }
  .footer__bottom { font-size: 12px; }
  .signup input { padding-block: 12px; }
  .signup button { padding-block: 12px; }

  .readout td:first-child { white-space: normal; }
  .readout col.c { width: 70px; }
  .readout col.l { width: 52px; }
  .readout td:not(:first-child), .readout th:not(:first-child) { padding-left: 4px; white-space: nowrap; }

  .prose th, .prose td { white-space: normal; min-width: 110px; }
}

/* Client wordmarks in the Figma file are dark artwork; show them in white on the navy background. */
.case__caption > img, .montii-logo img { filter: brightness(0) invert(1); opacity: 0.9; }

/* Desktop hero: headline, video and CTAs share the first viewport. Spacing scales with viewport height;
   the inline script after the hero sizes the video to the height that is left. */
@media (min-width: 961px) {
  .hero, .page-hero { padding-top: clamp(28px, 5vh, 80px); }
  .page-hero h1 { padding-top: clamp(16px, 2.6vh, 28px); }
  .hero h1 { max-width: 1200px; padding-top: clamp(16px, 2.6vh, 28px); font-size: clamp(40px, min(5.6vh, 3.7vw), 60px); }
  .hero__sub { max-width: 780px; padding-top: clamp(12px, 2vh, 24px); font-size: 17px; }
  .hero__video { margin-top: clamp(20px, 3.2vh, 44px); }
  .hero__ctas { padding-top: clamp(18px, 2.8vh, 40px); }
  .hero__meta { padding-top: 12px; }
}

/* Heavy wordmarks (8 Hours) read larger than thin ones at the same width. */
.case__caption > img.wm-sm { width: 84px; height: auto; }
@media (max-width: 640px) { .case__caption > img.wm-sm { width: 72px; margin-right: calc(100% - 72px); } }

/* Case-study pages: client video or quote under the write-up. */
.case-video { max-width: 880px; margin: 0 auto; }
.case-video .person { justify-content: center; padding-top: 16px; }
.case-quote { max-width: 880px; margin: 0 auto; }
.case-quote > p { margin: 0; font-size: 19px; line-height: 1.5; color: #fff; }
.case-quote .person { padding-top: 18px; }
.case-note { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--text-faint); }

/* Results without a client video share one card. */
.result--list ul { display: flex; flex-direction: column; gap: 22px; margin-top: 20px; list-style: none; padding: 0; }
.result--list li > p { font-size: 17px; font-weight: 500; line-height: 1.4; }
.result--list li .person { padding-top: 10px; }

.ba-panel + .ba-panel { margin-top: 16px; }

/* Client logo above the case-study headline (white, sized per logo to the same visual weight) */
.page-hero .client-logo { width: var(--w); max-width: 80vw; height: auto; margin-bottom: 24px; filter: brightness(0) invert(1); }
@media (max-width: 640px) {
  .page-hero .client-logo { width: calc(var(--w) * 0.85); margin-bottom: 18px; }
}

/* Homepage cases: show that each one opens a full case study */
.case__chip { position: absolute; right: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(8, 14, 30, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 14px; font-weight: 500; color: #fff; transition: background var(--dur) var(--spring), border-color var(--dur) var(--spring); }
a.case__panel:hover .case__chip, a.case__panel:focus-visible .case__chip { background: var(--accent); border-color: var(--accent); }
a.case__panel > .case__video { transition: transform var(--dur-lg) var(--spring); }
a.case__panel:hover > .case__video { transform: scale(1.015); }
.case__more { display: inline-flex; align-items: center; gap: 8px; margin: -14px 0 24px; font-size: 15px; font-weight: 500; color: var(--accent-soft); }
.case__more:hover { color: #fff; }
.case__more { transition: color var(--dur) var(--spring); }
.case__more svg, .case__chip svg { transition: transform var(--dur) var(--spring); }
.case__more:hover svg, a.case__panel:hover .case__chip svg { transform: translate(2px, -2px); }
@media (max-width: 640px) {
  .case__chip { right: auto; top: auto; left: 12px; bottom: 12px; padding: 7px 12px; font-size: 12px; gap: 6px; }
  .case__more { margin: -8px 0 20px; font-size: 14px; }
}

/* ---------- Apply funnel ---------- */
.apply-hero { position: relative; overflow: hidden; padding: 72px 0 88px; }
.apply-hero__inner { position: relative; display: grid; grid-template-columns: 1fr 460px; grid-template-areas: "lead quiz" "more quiz"; grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
.apply-hero__lead { grid-area: lead; }
.apply-hero__more { grid-area: more; }
.quiz { grid-area: quiz; }
.apply-hero h1 { padding-top: 24px; font-size: 50px; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
.apply-hero h1 em { font-style: normal; color: var(--accent-soft); }
.apply-hero__sub { padding-top: 20px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.apply-steps { display: grid; gap: 14px; padding-top: 32px; counter-reset: s; }
.apply-steps li { position: relative; padding-left: 44px; counter-increment: s; }
.apply-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--border-strong); font-size: 13px; font-weight: 600; line-height: 26px; text-align: center; color: var(--accent-soft); }
.apply-steps b { display: block; font-size: 16px; font-weight: 600; }
.apply-steps span { display: block; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.apply-hero__meta { padding-top: 28px; font-size: 14px; color: var(--text-faint); }

.quiz { position: relative; padding: 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); scroll-margin-top: 96px; }
.quiz__top { display: flex; align-items: center; justify-content: space-between; min-height: 22px; font-size: 13px; }
.quiz__back { color: var(--accent-soft); font-weight: 500; transition: opacity var(--press); }
.quiz__back:active { opacity: .6; }
.quiz__back[hidden] + .quiz__label { margin-left: auto; }
.quiz__label { color: var(--text-muted); }
.quiz__bar { height: 4px; margin: 12px 0 24px; border-radius: 4px; background: var(--ghost); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width var(--dur-lg) var(--spring); }
.quiz h2 { font-size: 21px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.quiz__options { display: grid; gap: 10px; padding-top: 18px; }
.quiz__options button { padding: 15px 18px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-deep); text-align: left; font-size: 15px; font-weight: 500; line-height: 1.35; transition: border-color var(--dur) var(--spring), background-color var(--dur) var(--spring), transform var(--dur) var(--spring); }
.quiz__options button:active { transform: scale(0.98); transition: transform var(--press), border-color var(--press), background-color var(--press); }
.quiz__options button[data-picked] { border-color: var(--accent); background: rgba(0, 128, 255, 0.12); }
@media (hover: hover) { .quiz__options button:hover { border-color: var(--accent); background: rgba(0, 128, 255, 0.12); } }
.quiz__form { display: grid; gap: 14px; }
/* .quiz__form sets display, which would otherwise override the hidden attribute on inactive steps. */
.quiz [hidden] { display: none !important; }
.quiz__form h2 { padding-bottom: 4px; }
.quiz__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz__form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-body); }
.quiz__form input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-deep); color: #fff; font: inherit; font-size: 15px; transition: border-color var(--dur) var(--spring); }
.quiz__form input::placeholder { color: var(--text-faint); }
.quiz__req { margin-left: 3px; font-style: normal; color: var(--accent-soft); } /* every field is required */
/* Browser autofill paints its own light fill; keep the field's dark well and white text. */
.quiz__form input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--surface-deep) inset; -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 9999s; }
.quiz__form input:focus { outline: none; border-color: var(--accent); }
.quiz__error { font-size: 14px; color: #ff8a8a; }
.quiz__badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 128, 255, 0.14); border: 1px solid rgba(70, 168, 255, 0.3); color: var(--accent-soft); font-size: 14px; font-weight: 600; line-height: 1.3; }
.quiz__badge svg { flex: none; }
.quiz__badge { transform-origin: left center; }
.quiz__submit { width: 100%; margin-top: 4px; }
.quiz__submit:disabled { opacity: .6; cursor: wait; }
.quiz__fine { font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.quiz__fine a { text-decoration: underline; }
.quiz__calendly { height: 680px; margin: 16px -12px -12px; border-radius: 16px; overflow: hidden; background: #fff; }

.apply-fit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.apply-fit h3 { font-size: 20px; font-weight: 600; }
.apply-fit p { padding-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.apply-fit a { color: var(--accent-soft); text-decoration: underline; }
.apply-process { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; counter-reset: s; }
.apply-process li { position: relative; padding: 22px 26px 22px 76px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); counter-increment: s; }
.apply-process li::before { content: counter(s); position: absolute; left: 26px; top: 22px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); font-size: 14px; font-weight: 600; line-height: 32px; text-align: center; }
.apply-process b { display: block; font-size: 17px; font-weight: 600; }
.apply-process span { display: block; padding-top: 4px; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.apply-process__note { max-width: 820px; margin: 20px auto 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); text-align: center; }
.page-hero .hero__video { margin-top: 40px; }
.page-hero .btn-row + p, .page-hero p + p { padding-top: 12px; }

@media (max-width: 1080px) {
  .apply-hero__inner { grid-template-columns: 1fr; grid-template-areas: "lead" "quiz" "more"; row-gap: 32px; }
  .apply-hero__lead, .apply-hero__more { max-width: 720px; }
  .apply-steps { padding-top: 0; }
  .quiz { max-width: 560px; width: 100%; }
}
@media (max-width: 960px) { .apply-fit { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .apply-hero { padding: 40px 0 56px; }
  .apply-hero h1 { font-size: 32px; }
  .apply-hero__sub { font-size: 16px; }
  .quiz { padding: 22px 18px; border-radius: 22px; }
  .quiz h2 { font-size: 19px; }
  .quiz__row { grid-template-columns: 1fr; }
  .quiz__calendly { height: 720px; margin-inline: -8px; }
  .apply-process li { padding: 18px 18px 18px 62px; }
  .apply-process li::before { left: 18px; top: 18px; width: 30px; height: 30px; line-height: 30px; }
}

/* ---------- Proof carousels ---------- */
.proof-head { display: flex; flex-direction: column; gap: 8px; padding: 64px 0 24px; }
.proof-head h3 { font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.proof-head p { font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.head + .proof-head { padding-top: 0; }
.proof { position: relative; }
.proof__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
@media (hover: hover) and (pointer: fine) { .proof__track { cursor: grab; } }
.proof__track[data-dragging] { cursor: grabbing; user-select: none; }
.proof__track[data-dragging] a { cursor: grabbing; }
.proof__track::-webkit-scrollbar { display: none; }
.proof__item { flex: none; width: 250px; scroll-snap-align: start; }
.proof__item a { display: block; overflow: hidden; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.proof__item img { width: 100%; height: auto; transition: transform var(--dur-lg) var(--spring); -webkit-user-drag: none; }
/* Test screenshots show whole; fixed height, width follows each screenshot. */
.proof--tests .proof__item { width: auto; }
.proof--tests .proof__item img { width: auto; height: 520px; }
.proof__item a:hover img { transform: scale(1.02); }
.proof__item figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; font-size: 14px; line-height: 1.45; color: var(--text-body); }
.proof__item figcaption b { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #fff; }
.proof__nav { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; }
.proof__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--ghost); font-size: 18px; transition: border-color var(--dur) var(--spring), opacity var(--dur) var(--spring), transform var(--dur) var(--spring); }
.proof__nav button:not(:disabled):active { transform: scale(0.92); transition: transform var(--press); }
.proof__nav button:hover { border-color: rgba(255, 255, 255, 0.4); }
.proof__nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 640px) {
  .proof-head { padding-top: 48px; }
  .proof-head h3 { font-size: 21px; }
  .proof__item { width: 72vw; max-width: 270px; }
  .proof--tests .proof__item { width: auto; max-width: none; }
  .proof--tests .proof__item img { height: 440px; }
  .proof__track { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
}

/* Before/after pairs: two phone frames; site.js scrolls each page top to bottom while the card is in view. */
.proof--pages .proof__item { width: auto; max-width: none; }
.ba__pair { display: flex; gap: 14px; padding: 16px 16px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.ba__phone { display: flex; flex-direction: column; gap: 8px; }
.ba__label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ba__phone + .ba__phone .ba__label { color: var(--accent-soft); }
.ba__screen { position: relative; width: 172px; height: 372px; overflow: hidden; border-radius: 18px; border: 3px solid #1e2636; background: #fff; }
.ba__screen img { width: 100%; height: auto; will-change: transform; }
.ba__screen img:not([src]) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .ba__screen { overflow-y: auto; } }
@media (max-width: 640px) {
  .ba__pair { gap: 10px; padding: 12px 12px 14px; }
  .ba__screen { width: 138px; height: 298px; border-radius: 14px; }
}

/* ---------- Glass and light pass (reel reference, 30 Oct) ----------
   Four upgrades kept on brand: one accent (LPG Blue), DM Sans only, 1px lines, glows instead of fills.
   Scoped to html:not([data-look="classic"]) so ?look=classic on the preview shows the previous look for comparison. */

/* 1. Glass nav: translucent Midnight with a blur, a 1px line under it, and a visible glass pill for the links. */
html:not([data-look="classic"]) .nav {
  /* Denser toward the bottom edge, where the blur samples less and text would ghost through. */
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.66), rgba(2, 6, 23, 0.88));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 #1a2334; /* a shadow, not a border, so the nav height doesn't change */
}
html:not([data-look="classic"]) .nav[data-open] { background: rgba(2, 6, 23, 0.94); }
html:not([data-look="classic"]) .nav__pill {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06); filter: none;
}

/* 2. Hero light: two wide, soft LPG Blue glows behind the headline (the guide's "Hero glow", two at most) replace the
   four glow images. No ribs, grid or grain: the guide's atmosphere is glow and plates only. */
html:not([data-look="classic"]) .hero__glow { display: none; }
html:not([data-look="classic"]) .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
html:not([data-look="classic"]) .hero::before {
  background:
    radial-gradient(42% 34% at 50% 14%, rgba(0, 128, 255, 0.30), transparent 72%),
    radial-gradient(30% 26% at 24% 40%, rgba(70, 168, 255, 0.12), transparent 70%);
}
html:not([data-look="classic"]) .hero .wrap { z-index: 1; }

/* 3. Lit primary button: LPG Blue lit from above, a thin highlight on the top edge and a soft blue glow under it. */
html:not([data-look="classic"]) .btn--primary,
html:not([data-look="classic"]) .nav__cta {
  background: linear-gradient(180deg, #0072e8 0%, #0064ce 100%); /* white text 4.6:1 at the top edge, 5.0:1 mid-button */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(0, 128, 255, 0.55);
  font-weight: 600;
  transition: filter var(--dur) var(--spring), box-shadow var(--dur) var(--spring), transform var(--dur) var(--spring);
}
html:not([data-look="classic"]) .btn--primary:hover,
html:not([data-look="classic"]) .nav__cta:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 30px -8px rgba(0, 128, 255, 0.75);
}

/* 4. Hero video card: a 1px border that fades from Signal Light at the top into the Line colour, a light pool inside,
   and a frosted play button (play-glass.svg). */
html:not([data-look="classic"]) .hero__video .video {
  background: radial-gradient(70% 90% at 50% 0%, rgba(0, 128, 255, 0.16), transparent 62%), var(--surface-deep);
  box-shadow: 0 40px 90px -50px rgba(0, 128, 255, 0.45);
}
html:not([data-look="classic"]) .hero__video .video::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(70, 168, 255, 0.5), #1a2334 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html:not([data-look="classic"]) .hero__video .video__play {
  border-radius: 50%;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 32px -12px rgba(0, 128, 255, 0.6);
}
html[data-look="classic"] .hero__video .video__play { content: url("/assets/icons/play.svg"); }

/* 6. Ambient light: a soft LPG Blue glow pinned to the top of the viewport, so the hero's light carries down the page
   as it scrolls and the glass nav always has light behind it. A fixed layer behind the content, not a scroll effect. */
html:not([data-look="classic"]) body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 0%, rgba(0, 128, 255, 0.20), transparent 72%);
}
@media (max-width: 640px) {
  html:not([data-look="classic"]) body::before { background: radial-gradient(90% 32% at 50% 0%, rgba(0, 128, 255, 0.20), transparent 72%); }
}

/* 5. Card material below the fold: the glass cues without the blur (blur over flat Midnight shows nothing).
   Every card gets a faint highlight on its top edge; cards without a border get the Line hairline; one feature card
   per section (the band, the closing CTA, the apply quiz) gets the hero card's edge light. */
html:not([data-look="classic"]) :is(.quote, .founder, .result, .faq details, .card, .case-card, .prose .notice, .prose .toc,
  .stat, .apply-process li, .proof__item a, .ba__pair) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html:not([data-look="classic"]) :is(.band, .readout, .cta, .expertise, .case__panel) {
  box-shadow: inset 0 0 0 1px #1a2334, inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* The quiz keeps its 1px border, so its edge light sits on that border (inset -1px) instead of drawing a second line inside it. */
html:not([data-look="classic"]) .quiz::before { inset: -1px; }
html:not([data-look="classic"]) :is(.band, .cta) {
  position: relative;
  background-image: radial-gradient(70% 60% at 50% 0%, rgba(0, 128, 255, 0.10), transparent 62%);
}
html:not([data-look="classic"]) :is(.band, .cta, .quiz)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(70, 168, 255, 0.5), #1a2334 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

@media (max-width: 640px) {
  /* On a narrow screen the desktop glow reads as a shaft; widen it into a pool. */
  html:not([data-look="classic"]) .hero::before {
    background: radial-gradient(75% 22% at 50% 10%, rgba(0, 128, 255, 0.30), transparent 72%),
      radial-gradient(50% 18% at 20% 30%, rgba(70, 168, 255, 0.10), transparent 70%);
  }
}
@media (max-width: 640px) {
  /* On a phone the band is section ground, not a card, so the readout table gets the full width (card-in-card left it
     about 255px wide). The readout takes the edge light instead. */
  html:not([data-look="classic"]) .band { padding-inline: 0; background: none; box-shadow: none; }
  html:not([data-look="classic"]) .band::before { display: none; }
  html:not([data-look="classic"]) .readout {
    position: relative; padding-inline: 18px;
    background: radial-gradient(70% 50% at 50% 0%, rgba(0, 128, 255, 0.10), transparent 62%), var(--surface);
  }
  html:not([data-look="classic"]) .readout::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(180deg, rgba(70, 168, 255, 0.5), #1a2334 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
}
@media (prefers-reduced-transparency: reduce) {
  html:not([data-look="classic"]) .nav { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:not([data-look="classic"]) .hero__video .video__play { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Before/after spotlight (IG case-study layout, 30 Oct) ----------
   A smaller Before phone, a line arrow, a larger After phone with numbered callouts on its right edge, both cropped
   to just under Add to Cart. The list and the pins share data-spot indexes; site.js moves one spotlight between them.
   Glass look only: ?look=classic shows the scrolling carousel alone. */
html[data-look="classic"] :is(.bax, .bax-more) { display: none; }
.bax {
  --bw: 168px; --aw: 232px; --ratio: 420 / 1490;
  position: relative; padding: 28px 48px 48px; border-radius: var(--r-card);
  background: radial-gradient(60% 50% at 72% 0%, rgba(0, 128, 255, 0.12), transparent 64%), var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.bax::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(70, 168, 255, 0.5), #1a2334 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Brand pills: a glass segmented control. The active pill carries a thin LPG Blue line that fills while it plays. */
.bax__tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 100px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.bax__tabs button {
  position: relative; overflow: hidden; padding: 9px 18px; border-radius: 100px; font-size: 14px; font-weight: 500; color: var(--text-muted);
  transition: color var(--dur) var(--spring), background-color var(--dur) var(--spring), transform var(--dur) var(--spring);
}
.bax__tabs button:hover { color: #fff; }
.bax__tabs button:active { transform: scale(0.96); transition: transform var(--press); }
.bax__tabs button[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.bax__progress { position: absolute; left: 18px; right: 18px; bottom: 4px; height: 1.5px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.bax__tabs button[aria-selected="true"] .bax__progress { transform: scaleX(var(--p, 0)); }
.bax[data-still] .bax__progress { display: none; }

.bax__panel {
  /* The text is centred on the stage's height (empty rows above and below it). */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: ". stage" "head stage" "list stage" ". stage";
  grid-template-rows: 1fr auto auto 1fr; column-gap: 56px; padding-top: 36px;
}
.bax__panel[hidden] { display: none; }
.bax__panel[data-enter] { animation: bax-in var(--dur-lg) var(--spring) both; }
@keyframes bax-in { from { opacity: 0; transform: translateY(8px); } }

.bax__head { grid-area: head; align-self: end; }
.bax__kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.bax__metric { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding-top: 14px; }
.bax__metric b { font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-optical-sizing: auto; font-variation-settings: normal; }
.bax__metric span { font-size: 17px; line-height: 1.4; color: var(--text-body); max-width: 220px; }
.bax__sub { padding-top: 10px; font-size: 15px; color: var(--text-muted); }

.bax__changes { grid-area: list; align-self: start; display: grid; gap: 2px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); counter-reset: none; }
.bax__changes button {
  display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 10px 12px; margin-inline: -12px; border-radius: 14px; text-align: left;
  font-size: 15px; line-height: 1.5; color: var(--text-body);
  transition: background-color var(--dur) var(--spring), color var(--dur) var(--spring);
}
.bax__changes button:hover, .bax__changes button[data-on] { color: #fff; background: rgba(255, 255, 255, 0.04); }
.bax__n {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%;
  font-size: 12px; font-weight: 600; color: #fff; background: var(--surface-deep); box-shadow: inset 0 0 0 1px #1a2334;
  transition: box-shadow var(--dur) var(--spring), color var(--dur) var(--spring);
}
.bax__changes button[data-on] .bax__n { color: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px rgba(0, 128, 255, 0.45); }

/* Stage: phones centred on each other, the arrow between them. */
.bax__stage { grid-area: stage; display: flex; align-items: center; gap: 14px; padding-right: 34px; }
.bax__phone { display: flex; flex-direction: column; gap: 10px; }
.bax__phone figcaption { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.bax__phone--after figcaption { color: var(--accent-soft); }
.bax__frame { position: relative; padding: 5px; border-radius: 26px; background: linear-gradient(180deg, rgba(70, 168, 255, 0.32), #1a2334 38%, #121a2a); }
.bax__phone--before .bax__frame { width: var(--bw); border-radius: 22px; padding: 4px; background: linear-gradient(180deg, #2a3344, #161d2b); }
.bax__phone--after .bax__frame { width: var(--aw); box-shadow: 0 30px 80px -30px rgba(0, 128, 255, 0.5); }
.bax__screen { position: relative; overflow: hidden; aspect-ratio: var(--ratio); border-radius: 21px; background: #fff; }
.bax__phone--before .bax__screen { border-radius: 18px; }
.bax__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; -webkit-user-drag: none; user-select: none; }
.bax__arrow { flex: none; width: 48px; margin-top: 22px; fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Spotlight: a blue outline on the changed section with the rest of the page dimmed (the shadow is clipped by the screen). */
.bax__spot {
  position: absolute; left: 3px; right: 3px; top: var(--t, 0); height: var(--h, 0); border-radius: 8px; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 18px rgba(0, 128, 255, 0.55), 0 0 0 999px rgba(2, 6, 23, 0.42);
  transition: top var(--dur-lg) var(--spring), height var(--dur-lg) var(--spring), opacity var(--dur) var(--spring);
}
.bax__panel[data-spot] .bax__spot { opacity: 1; }

/* Frosted result chip on the After frame's top edge: real blur over the screenshot. */
.bax__chip {
  position: absolute; top: -15px; right: -18px; z-index: 2; padding: 7px 13px; border-radius: 100px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: #fff; background: rgba(7, 16, 35, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(70, 168, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px -10px rgba(0, 128, 255, 0.7);
}

/* Callout pins: a 1px LPG Blue line out of the frame's right edge to a numbered dot. */
.bax__pins li { position: absolute; top: var(--y); left: 100%; display: flex; align-items: center; transform: translateY(-50%); }
.bax__pins li::before { content: ""; width: 10px; height: 1px; background: var(--accent); }
.bax__pins button {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 600; color: #fff;
  background: var(--surface-deep); box-shadow: inset 0 0 0 1px var(--accent);
  transition: background-color var(--dur) var(--spring), box-shadow var(--dur) var(--spring), transform var(--dur) var(--spring);
}
.bax__pins button[data-on] { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px rgba(0, 128, 255, 0.6); transform: scale(1.08); }

.bax-more { padding: 40px 0 16px; font-size: 15px; color: var(--text-muted); }

@media (max-width: 1100px) {
  .bax { --bw: 150px; --aw: 210px; padding-inline: 36px; }
  .bax__panel { column-gap: 36px; }
  .bax__metric b { font-size: 52px; }
}
@media (max-width: 860px) {
  .bax__panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "list"; grid-template-rows: auto; padding-top: 28px; }
  .bax__stage { justify-content: center; padding-top: 28px; }
}
@media (max-width: 640px) {
  /* The plate runs closer to the screen edge so both phones stay legible at 393px. */
  .bax { --bw: 100px; --aw: 166px; margin-inline: calc(12px - var(--gutter)); padding: 18px 14px 22px; border-radius: 28px; }
  .bax__tabs { display: flex; }
  .bax__tabs button { flex: 1; padding: 9px 8px; font-size: 13px; }
  .bax__progress { left: 12px; right: 12px; }
  .bax__panel { padding-top: 22px; }
  .bax__head { padding-inline: 6px; }
  .bax__metric b { font-size: 44px; }
  .bax__metric span { font-size: 15px; }
  .bax__sub { font-size: 14px; }
  .bax__stage { gap: 6px; padding: 30px 26px 0 0; }
  .bax__arrow { width: 24px; margin-top: 20px; }
  .bax__frame { padding: 4px; border-radius: 20px; }
  .bax__phone--before .bax__frame { padding: 3px; border-radius: 14px; }
  .bax__screen { border-radius: 16px; }
  .bax__phone--before .bax__screen { border-radius: 11px; }
  .bax__phone figcaption { font-size: 11px; }
  .bax__chip { top: -13px; right: -14px; padding: 6px 10px; font-size: 12px; }
  .bax__pins li::before { width: 6px; }
  .bax__pins button { width: 20px; height: 20px; font-size: 10px; }
  .bax__changes { margin-top: 24px; padding: 14px 6px 0; }
  .bax__changes button { font-size: 14px; padding: 9px 10px; margin-inline: -10px; }
  .bax-more { padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .bax__spot, .bax__tabs button, .bax__pins button { transition: none; }
  .bax__panel[data-enter] { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .bax__chip { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Apply quiz on the homepage (#apply): the /apply/ hero grid, with a section headline in place of the page h1. */
.apply-home .apply-hero__lead h2 { padding-top: 20px; font-size: 44px; font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
#work, .apply-home { scroll-margin-top: 120px; } /* lands just below the sticky nav (96px on desktop, 62px on phones) */
@media (max-width: 1080px) { .apply-home .quiz { max-width: 720px; } } /* one column: as wide as the text above */
@media (max-width: 640px) {
  #work, .apply-home { scroll-margin-top: 80px; }
  .apply-home .apply-hero__lead h2 { font-size: 27px; line-height: 1.2; }
  .apply-home .apply-hero__sub { font-size: 16px; }
}

/* Case logos at one visual size: about 19px of visible ink (Botanical H2O's thin, wide mark a little more, Laundry
   Sauce's long wordmark a little less, by eye). Widths allow for each file's built-in padding (Laundry Sauce's SVG is
   ~40% padding; the MontiiCo PNG is cropped by .montii-logo). Phones take ~80% of the desktop size. */
.case__caption > img[src*="laundrysauce"] { width: 280px; height: auto; }
.case__caption > img[src*="8hours"] { width: 142px; height: auto; }
.case__caption > img[src*="botanical-h2o"] { width: 142px; height: auto; }
.case__caption > img[src*="salt-lab"] { width: 108px; height: auto; }
.case__caption > .montii-logo { width: 136px; height: 39px; margin-block: -10px; } /* the PNG crop box is twice the ink height */
@media (max-width: 640px) {
  .case__caption > img[src*="laundrysauce"] { width: 224px; margin-right: 0; }
  .case__caption > img[src*="8hours"] { width: 114px; margin-right: calc(100% - 114px); }
  .case__caption > img[src*="botanical-h2o"] { width: 114px; }
  .case__caption > img[src*="salt-lab"] { width: 87px; }
  .case__caption > .montii-logo { width: 110px; height: 32px; margin-block: -8px; }
}

/* ---------- Blueprints lead magnet (/blueprints/, 1 Nov 2026) ----------
   Hero = the apply page's two-column layout: copy and fanned PDF covers on the left, the email gate on the right
   (styled like the quiz card). On phones the gate comes straight after the headline and the covers drop below it. */
.bp-hero { position: relative; overflow: hidden; padding: 72px 0 88px; }
.bp-hero__inner { position: relative; display: grid; grid-template-columns: 1fr 440px; column-gap: 64px; align-items: start; }
.bp-hero h1 { padding-top: 24px; font-size: 50px; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.bp-hero h1 em { font-style: normal; color: var(--accent-soft); }
.bp-hero__sub { padding-top: 20px; max-width: 600px; font-size: 18px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.bp-covers { position: relative; height: 380px; margin-top: 44px; }
.bp-covers img { position: absolute; top: 0; width: 240px; height: auto; border-radius: 10px; border: 1px solid var(--border-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.bp-covers img:first-child { left: 8px; transform: rotate(-4deg); }
.bp-covers img:last-child { left: 228px; top: 22px; transform: rotate(4deg); }

.bp-gate { position: relative; padding: 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); scroll-margin-top: 96px; }
html:not([data-look="classic"]) .bp-gate::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(70, 168, 255, 0.5), #1a2334 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.bp-gate [hidden] { display: none !important; }
.bp-gate h2 { padding-top: 8px; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.bp-gate:focus, .bp-unlocked:focus { outline: none; }
.bp-gate__list { display: grid; gap: 10px; padding: 16px 0 6px; }
.bp-gate__list li { position: relative; padding-left: 26px; }
.bp-gate__list li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 4px #0a3f80; }
.bp-gate__list b { display: block; font-size: 15px; font-weight: 600; }
.bp-gate__list span { display: block; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.bp-form { display: grid; gap: 14px; }
.bp-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-body); }
.bp-form input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-deep); color: #fff; font: inherit; font-size: 16px; transition: border-color var(--dur) var(--spring); }
.bp-form input::placeholder { color: var(--text-faint); }
.bp-form input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--surface-deep) inset; -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 9999s; }
.bp-form input:focus { outline: none; border-color: var(--accent); }
.bp-form__submit { width: 100%; margin-top: 4px; }
.bp-form__submit:disabled { opacity: .6; cursor: wait; }
.bp-form__error { font-size: 14px; color: #ff8a8a; }
.bp-form__fine { font-size: 12px; line-height: 1.5; color: var(--text-faint); }
.bp-form__fine a { text-decoration: underline; }

.bp-files { display: grid; gap: 12px; padding-top: 18px; }
.bp-files li { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: var(--surface-deep); border: 1px solid var(--border); }
.bp-files img { flex: none; width: 52px; height: auto; border-radius: 4px; }
.bp-files div { flex: 1; min-width: 0; }
.bp-files b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.bp-files span { display: block; padding-top: 2px; font-size: 13px; color: var(--text-muted); }
.bp-files .btn { flex: none; }
.bp-unlocked__note { padding-top: 14px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }

.bp-books { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bp-book { display: flex; gap: 28px; align-items: flex-start; }
.bp-book > img { flex: none; width: 150px; height: auto; border-radius: 8px; border: 1px solid var(--border-strong); }
.bp-book__meta { font-size: 13px; font-weight: 500; letter-spacing: 0.03em; color: var(--accent-soft); }
.bp-book h3 { padding-top: 8px; font-size: 22px; font-weight: 600; line-height: 1.25; }
.bp-book__sub { padding-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.bp-book__list { display: grid; gap: 10px; padding-top: 18px; }
.bp-book__list li { font-size: 15px; line-height: 1.55; color: var(--text-body); }
.bp-book__list b { color: #fff; font-weight: 600; }
.bp-again { display: flex; justify-content: center; padding-top: 40px; }
/* One blueprint per page (lead magnet pages): a single cover, the contents as a two-column numbered list, and a card
   linking to the other blueprint. */
.bp-covers--one { height: 420px; }
.bp-covers--one img { width: 280px; left: 24px !important; top: 0 !important; transform: rotate(-3deg) !important; }
.bp-unlocked__note a, .bp-gate__list a { color: var(--accent-soft); text-decoration: underline; }
.bp-toc { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 10px; max-width: 880px; margin-inline: auto; counter-reset: t; }
.bp-toc li { display: flex; gap: 14px; align-items: baseline; padding: 16px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); counter-increment: t; font-size: 15.5px; line-height: 1.45; color: var(--text-body); }
.bp-toc li::before { content: counter(t, decimal-leading-zero); flex: none; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent-soft); }
.bp-also, .bp-book--link { display: flex; gap: 28px; align-items: center; transition: border-color var(--dur) var(--spring); }
.bp-also { max-width: 920px; margin-inline: auto; }
.bp-also > img { flex: none; width: 130px; height: auto; border-radius: 8px; border: 1px solid var(--border-strong); }
.bp-also h3 { padding-top: 8px; font-size: 22px; font-weight: 600; line-height: 1.25; }
.bp-also__go { display: inline-block; padding-top: 16px; font-size: 15px; font-weight: 500; color: var(--accent-soft); }
@media (hover: hover) { .bp-also:hover, .bp-book--link:hover { border-color: rgba(70, 168, 255, 0.45); } }
.bp-book--link { align-items: flex-start; }
.bp-book--link .bp-book__sub { padding-top: 10px; }

.bp-next { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bp-next .card { padding: 26px; }
.bp-next__soon { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
.bp-next h3 { padding-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.bp-next h3 + p { padding-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }

.bp-author { display: flex; gap: 40px; align-items: center; max-width: 920px; margin-inline: auto; }
.bp-author > img { flex: none; width: 180px; height: 240px; border-radius: 24px; object-fit: cover; object-position: top; }
.bp-author h2 { padding-top: 16px; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.bp-author__bio { padding-top: 16px; font-size: 17px; line-height: 1.65; color: var(--text-body); }

@media (max-width: 1080px) {
  .bp-hero__inner { grid-template-columns: 1fr; row-gap: 32px; }
  .bp-hero__lead { display: contents; }
  .bp-hero__lead > :not(.bp-covers) { max-width: 720px; }
  .bp-hero__lead > .tag { justify-self: start; }
  .bp-hero__sub { padding-top: 0; margin-top: -12px; }
  .bp-gate { order: 1; max-width: 560px; width: 100%; }
  .bp-covers { order: 2; margin-top: 0; }
  .bp-books { grid-template-columns: 1fr; }
  .bp-next { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bp-hero { padding: 36px 0 64px; }
  .bp-hero__inner { row-gap: 24px; }
  .bp-hero h1 { padding-top: 0; }
  .bp-hero h1 { font-size: 34px; }
  .bp-hero__sub { font-size: 16px; }
  .bp-gate { padding: 22px; border-radius: 24px; }
  .bp-covers { height: 250px; }
  .bp-covers img { width: 160px; }
  .bp-covers img:first-child { left: 4px; }
  .bp-covers img:last-child { left: 150px; top: 14px; }
  .bp-book { flex-direction: column; gap: 20px; }
  .bp-book > img { width: 120px; }
  .bp-next { grid-template-columns: 1fr; }
  .bp-covers--one { height: 290px; }
  .bp-covers--one img { width: 190px; left: 12px !important; }
  .bp-toc { grid-template-columns: 1fr; }
  .bp-also { flex-direction: column; align-items: flex-start; gap: 20px; }
  .bp-also > img { width: 110px; }
  .bp-author { flex-direction: column; align-items: flex-start; gap: 24px; }
  .bp-author > img { width: 140px; height: 186px; }
  .bp-files li { flex-wrap: wrap; }
  .bp-files .btn { width: 100%; }
}