/* The top menu's states, and the FAQ with the early-access offer. */

/* Menu: condenses after the hero and always stays in view. */
.topnav { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, top 0.3s ease; }
.topnav.scrolled { top: 10px; padding-top: 6px; padding-bottom: 6px; background: rgba(6, 16, 10, 0.94); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75); }

/* Logo: rolls over to its italic twin. */
.logo { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; padding: 0 0.2em; margin: 0 -0.2em; }
.logo-a, .logo-b { display: block; transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.logo-b { position: absolute; left: 0.2em; top: 100%; color: var(--lime); }
.logo:hover .logo-a, .logo:hover .logo-b, .logo:focus-visible .logo-a, .logo:focus-visible .logo-b { transform: translateY(-100%); }

/* Links: a pill that slides to the hovered link and rests on the section in view. */
.topnav .links { position: relative; gap: 4px; }
.topnav .links a { position: relative; z-index: 1; padding: 8px 12px; border-radius: 999px; transition: color 0.25s ease, transform 0.15s ease; }
.topnav .links a:active { transform: scale(0.95); }
.topnav .links a[aria-current="true"] { color: #fff; }
.topnav .links a[aria-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--lime); }
.nav-ind { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); opacity: 0; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease; pointer-events: none; }
.nav-ind.on { opacity: 1; }
/* Letters roll up to a lime twin on hover. */
.nav-roll { display: inline-flex; overflow: hidden; vertical-align: bottom; line-height: 1.3; }
.nav-roll .ch { position: relative; display: inline-block; white-space: pre; transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1); transition-delay: calc(var(--i) * 18ms); }
.nav-roll .ch::after { content: attr(data-c); position: absolute; left: 0; top: 100%; color: var(--lime); }
.topnav .links a:hover .ch, .topnav .links a:focus-visible .ch { transform: translateY(-100%); }

/* Offer badge. */
.nav-badge { display: inline-flex; align-items: center; gap: 8px; font: 500 12px Inter; color: var(--lime); border: 1px solid rgba(244, 174, 133, 0.35); border-radius: 999px; padding: 7px 12px; white-space: nowrap; transition: background 0.25s ease, border-color 0.25s ease; }
.nav-badge:hover { background: rgba(244, 174, 133, 0.1); border-color: rgba(244, 174, 133, 0.7); }
.nav-badge .dot, .offer-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(244, 174, 133, 0.6); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(244, 174, 133, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(244, 174, 133, 0); } }

/* Call to action: the arrow slides through, the button glows, and presses in. */
.nav-cta { overflow: hidden; position: relative; gap: 8px; }
.nav-cta .cta-arrow { display: inline-block; transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1); }
.nav-cta:hover .cta-arrow { transform: translateX(4px); }
.btn-light:hover { box-shadow: 0 0 0 4px rgba(244, 174, 133, 0.18), 0 14px 34px -10px rgba(244, 174, 133, 0.6); }
.btn:active { transform: translateY(0) scale(0.97); }
.topnav a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

@media (max-width: 1180px) { .nav-badge { display: none; } }
@media (max-width: 960px) {
  .nav-ind { display: none; }
  .topnav.open .links a { border-radius: 0; padding: 14px 6px; }
  .topnav.open .links a[aria-current="true"]::after { left: auto; right: 8px; bottom: 50%; margin: 0 0 -2px; }
}

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 72px; align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-side h2 { font-size: clamp(48px, 6vw, 92px); margin: 14px 0 18px; }
.faq-side > p { font-size: 18px; max-width: 34ch; }
.faq-side a:not(.btn) { color: var(--ink); text-underline-offset: 3px; }
.offer-card { margin-top: 34px; background: var(--ink); color: var(--paper); border-radius: 24px; padding: 28px; position: relative; overflow: hidden; }
.offer-card::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 143, 91, 0.75), transparent 70%); }
.offer-card > * { position: relative; }
.offer-card .offer-tag { color: var(--lime); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.offer-card .offer-big { font: 400 clamp(30px, 3vw, 40px)/1.05 "Bricolage Grotesque"; margin: 10px 0 12px; color: var(--paper); }
.offer-card .offer-big em { color: var(--lime); }
.offer-card p:not(.offer-big):not(.offer-tag) { color: #c9d6cc; font-size: 15px; margin-bottom: 20px; }
.offer-card .btn { background: var(--lime); color: var(--ink); }

.faq-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip { font: 500 14px Inter; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.faq-list details { border-top: 1px solid var(--rule); }
.faq-list details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq-list details[hidden] { display: none; }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font: 400 clamp(22px, 2.2vw, 30px)/1.2 "Bricolage Grotesque"; color: var(--ink); transition: color 0.2s ease, padding 0.3s ease; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease; }
.faq-list summary:hover { padding-left: 12px; }
.faq-list summary:hover::after { background-color: var(--paper-2); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.faq-list .a { overflow: hidden; }
.faq-list .a p { padding: 0 4px 24px; max-width: 62ch; font-size: 17px; color: var(--soft); }

/* Close: the offer above the line. */
.offer-pill { display: inline-flex; align-items: center; gap: 10px; font: 500 14px Inter; color: var(--lime); border: 1px solid rgba(244, 174, 133, 0.35); border-radius: 999px; padding: 8px 16px; margin-bottom: 30px; }

@media (max-width: 960px) {
  .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .faq-side { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-badge .dot, .offer-pill .dot { animation: none; }
  .topnav, .nav-ind, .nav-roll .ch, .logo-a, .logo-b { transition: none; }
}
.still .nav-badge .dot, .still .offer-pill .dot { animation-play-state: paused; }

/* Type retune for Bricolage Grotesque: wider and heavier than the serif it replaces. */
.topnav .logo { font: 700 22px "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -0.03em; }
.hero h1 { max-width: 17ch; font-size: clamp(46px, 6.8vw, 100px); letter-spacing: -0.045em; }
.sec-head h2, .spread-head h2, .result .spread-head h2 { font-size: clamp(38px, 4.6vw, 66px); }
.split h2, .keypath h2 { font-size: clamp(38px, 4.6vw, 68px); }
.head-gap h2 { font-size: clamp(40px, 5.4vw, 80px); }
.faq-side h2 { font-size: clamp(44px, 5.4vw, 80px); }
.final h2 { font-size: clamp(54px, 10.5vw, 168px); letter-spacing: -0.05em; }
.pipeline h3 { font-size: clamp(30px, 3.2vw, 46px); }
.marquee div { font-style: normal; font-weight: 800; letter-spacing: -0.04em; }
.versus { font-weight: 400; letter-spacing: -0.02em; }
.versus .win { font-style: normal; font-weight: 600; color: var(--lime); }
.result .spread-head p, .spread-head p { font-family: Inter, system-ui, sans-serif; font-size: 19px; line-height: 1.6; }
.faq-list summary { font-weight: 500; font-size: clamp(20px, 1.9vw, 25px); letter-spacing: -0.02em; }
.offer-card .offer-big { font-weight: 600; letter-spacing: -0.03em; }
.offer-card .offer-big em { font-weight: 300; font-style: normal; }
.mat figcaption b { font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
.providers ul, .hero .providers ul { font-weight: 600; letter-spacing: -0.03em; font-size: 28px; }
.journey h3 { letter-spacing: -0.03em; }

/* Brand: the Fig mark beside a lowercase wordmark that rolls to apricot. */
.topnav .logo.brandmark { display: inline-flex; align-items: center; gap: 8px; overflow: visible; height: auto; padding: 0; margin: 0; font: 800 22px "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -0.045em; }
.brandmark .fig { width: 26px; height: auto; transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.4, 1); transform-origin: 50% 90%; }
.brandmark:hover .fig, .brandmark:focus-visible .fig { transform: rotate(-14deg) scale(1.08); }
.brandmark .roll-word { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; padding: 0 0.15em; margin: 0 -0.15em; }
.brandmark .logo-a, .brandmark .logo-b { display: block; transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.brandmark .logo-b { position: absolute; left: 0.15em; top: 100%; color: var(--lime); }
.brandmark:hover .logo-a, .brandmark:hover .logo-b, .brandmark:focus-visible .logo-a, .brandmark:focus-visible .logo-b { transform: translateY(-100%); }

/* Hero: the tagline, big, with the promise right under it. */
.hero .hero-kicker { font-size: 14px; letter-spacing: 0.02em; margin-bottom: 18px; }
.hero h1.hero-tag { font-size: clamp(64px, 12.5vw, 196px); line-height: 0.92; letter-spacing: -0.06em; font-weight: 800; max-width: none; }
.hero h1.hero-tag em { font-weight: 800; color: var(--lime); }
.hero .lede.hero-punch { font: 500 clamp(19px, 2vw, 25px)/1.45 Inter, sans-serif; color: #dfe9e1; max-width: 40ch; margin: 26px auto 32px; letter-spacing: -0.01em; }

/* Prototype: wiring on the left, the playing phone on the right. */
.proto-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.8fr); gap: 36px; align-items: start; }
.proto-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.proto-steps li { counter-increment: s; border-top: 1px solid var(--edge); padding-top: 14px; }
.proto-steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 500 12px "JetBrains Mono", monospace; color: var(--lime); margin-bottom: 6px; }
.proto-steps b { display: block; font: 700 22px "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -0.03em; margin-bottom: 4px; }
.proto-steps span { color: var(--muted); font-size: 15px; }
.proto-side { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.proto-side .device { width: 270px; }
.cap-under { color: var(--muted); text-align: center; max-width: 30ch; }
.proto-side .share { width: 100%; }
.transitions { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 44px; }
.transitions li { font: 500 14px Inter; border: 1px solid var(--edge); border-radius: 999px; padding: 8px 16px; color: var(--muted); transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.transitions li:hover { color: var(--text); border-color: var(--lime); transform: translateY(-2px); }
.transitions li.hot { color: var(--ink); background: var(--lime); border-color: var(--lime); }

/* Footer brand line. */
.foot-brand { display: inline-flex; align-items: center; gap: 8px; }
.foot-brand b { color: var(--text); font-weight: 600; }

@media (max-width: 960px) {
  .proto-grid { grid-template-columns: 1fr; }
  .proto-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .brandmark .fig, .brandmark .logo-a, .brandmark .logo-b { transition: none; } }

/* Transition chips are buttons now. */
.transitions button { font: 500 14px Inter; border: 1px solid var(--edge); border-radius: 999px; padding: 9px 16px; color: var(--muted); background: transparent; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, background 0.2s ease; }
.transitions button:hover { color: var(--text); border-color: var(--lime); transform: translateY(-2px); }
.transitions button:active { transform: scale(0.96); }
.transitions button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.transitions button.hot { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.tr-note { text-align: center; color: var(--muted); margin-top: 14px; }

/* Footer links. */
.foot-links { display: flex; gap: 18px; }
.foot-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(166, 184, 171, 0.4); }
.foot-links a:hover { color: var(--text); }
.share h3 { margin-bottom: 8px; }

/* Prototype, stacked: the wiring first, then the transitions beside the phone they play on. */
.proto-wire { width: min(1080px, 100%); margin: 0 auto; }
.proto-play { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; width: min(1080px, 100%); margin: 96px auto 0; padding-top: 72px; border-top: 1px solid var(--edge); }
.play-copy h3 { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.035em; margin: 10px 0 26px; }
.play-copy .transitions { justify-content: flex-start; margin-top: 0; }
.play-copy .cap-under { text-align: left; max-width: none; margin-top: 18px; color: var(--text); }
.play-copy .tr-note { text-align: left; margin-top: 4px; }
.play-copy .share { margin-top: 30px; max-width: 460px; }
.proto-play .device { width: 290px; }
@media (max-width: 960px) {
  .proto-play { grid-template-columns: 1fr; gap: 28px; margin-top: 64px; padding-top: 48px; }
  .proto-play .device { order: 2; margin: 0 auto; width: 260px; }
  .play-copy { display: contents; }
  .play-copy .eyebrow { order: 0; }
  .play-copy h3 { order: 0; margin-bottom: 0; }
  .play-copy .transitions { order: 1; justify-content: center; }
  .play-copy .cap-under, .play-copy .tr-note { order: 3; text-align: center; margin: 0; }
  .play-copy .share { order: 4; max-width: none; margin: 0; }
}
.play-copy .share h3 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 8px; }
@media (max-width: 960px) { .play-copy .eyebrow, .play-copy h3 { text-align: center; } }

/* Tickers between sections: the next section's words, with the fig between them. */
.ticker { position: relative; z-index: 3; overflow: hidden; white-space: nowrap; padding: 18px 0; user-select: none; }
.ticker .track { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; animation: tick 40s linear infinite; will-change: transform; }
.ticker.fast .track { animation-duration: 30s; }
.ticker.slow .track { animation-duration: 48s; }
.ticker.rev .track { animation-direction: reverse; }
.ticker:hover .track { animation-play-state: paused; }
.ticker span { font: 800 clamp(26px, 3.6vw, 52px)/1 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -0.045em; }
.ticker img { width: clamp(20px, 2.2vw, 30px); height: auto; flex: none; transition: transform 0.4s ease; }
.ticker:hover img { transform: rotate(-18deg); }
.t-apricot { background: var(--lime); color: var(--ink); }
.t-apricot span.o { color: #5a1f55; }
.t-ink { background: var(--ink); color: var(--paper); border-block: 1px solid rgba(255, 255, 255, 0.08); }
.t-ink span.o { color: var(--lime); }
.t-outline { background: transparent; color: var(--text); border-block: 1px solid var(--edge); }
.t-outline span { color: #ff8fa8; }
.t-outline span.o { color: var(--lime); -webkit-text-stroke: 0; }
.ticker.tilt { transform: rotate(-1.6deg); margin: 18px -3vw; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6); }
.ticker.tilt.rev { transform: rotate(1.4deg); }
.still .ticker .track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker .track { animation: none; } }
@media (max-width: 560px) { .ticker { padding: 12px 0; } .ticker .track { gap: 22px; padding-right: 22px; } }

/* The free hook, opening the toolkit. */
.free-hook { font: 800 clamp(34px, 5.4vw, 84px)/1.02 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -0.05em; text-align: center; max-width: 18ch; margin: 0 auto 70px; color: var(--text); }
.free-hook strong { display: inline-block; color: var(--ink); background: var(--lime); padding: 0.02em 0.22em 0.08em; border-radius: 0.22em; transform: rotate(-2deg); margin-left: 0.1em; text-transform: uppercase; }

/* The offer badge: an apricot tag, a rolling message, a light that travels around the edge. */
@property --ob-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.offer-badge { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; padding: 7px 18px 7px 7px; margin-bottom: 34px; border-radius: 999px; background: rgba(8, 20, 13, 0.85); color: var(--text); font: 600 clamp(15px, 1.5vw, 18px)/1 Inter, sans-serif; text-decoration: none; overflow: hidden; box-shadow: 0 0 0 1px rgba(244, 174, 133, 0.25), 0 18px 50px -18px rgba(244, 174, 133, 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.offer-badge::before { content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; background: conic-gradient(from var(--ob-angle), transparent 0 62%, var(--lime) 72%, #ff8fa8 80%, transparent 90%); animation: ob-spin 4s linear infinite; }
.offer-badge::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, rgba(8, 20, 13, 0.96) 40%, rgba(244, 174, 133, 0.16) 50%, rgba(8, 20, 13, 0.96) 60%) 200% 0 / 250% 100%; animation: ob-shine 5s ease-in-out infinite; }
@keyframes ob-spin { to { --ob-angle: 360deg; } }
@keyframes ob-shine { 0%, 55% { background-position: 200% 0; } 100% { background-position: -60% 0; } }
.offer-badge:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 0 1px rgba(244, 174, 133, 0.6), 0 24px 60px -16px rgba(244, 174, 133, 0.75); }
.offer-badge:active { transform: scale(0.98); }
.offer-badge:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.ob-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--lime); color: var(--ink); border-radius: 999px; padding: 9px 14px; font-weight: 700; font-size: 0.82em; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.ob-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: #5a1f55; box-shadow: 0 0 0 0 rgba(90, 31, 85, 0.5); animation: ping 2.4s ease-out infinite; }
.ob-msg { position: relative; display: block; height: 1.3em; overflow: hidden; min-width: 15em; text-align: left; }
.ob-roll { display: flex; flex-direction: column; animation: ob-roll 9s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
.ob-roll span { display: block; height: 1.3em; line-height: 1.3em; white-space: nowrap; }
@keyframes ob-roll { 0%, 26% { transform: translateY(0); } 33%, 59% { transform: translateY(-1.3em); } 66%, 92% { transform: translateY(-2.6em); } 100% { transform: translateY(-3.9em); } }
.ob-arrow { color: var(--lime); transition: transform 0.25s ease; }
.offer-badge:hover .ob-arrow { transform: translateX(4px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.still .offer-badge::before, .still .offer-badge::after, .still .ob-roll, .still .ob-tag .dot { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .offer-badge::before, .offer-badge::after, .ob-roll, .ob-tag .dot { animation: none; } }
@media (max-width: 560px) { .offer-badge { gap: 10px; padding-right: 14px; font-size: 14px; } .ob-msg { min-width: 0; width: 13.5em; } .ob-tag { padding: 8px 11px; } }

/* The primary button: a light travelling around its edge, a shine across it, a slow glow. */
.btn-glow { position: relative; isolation: isolate; background: linear-gradient(110deg, #eef5ef 38%, #ffffff 50%, #eef5ef 62%) 200% 0 / 260% 100%; animation: btn-shine 4.5s ease-in-out infinite, btn-breathe 3.2s ease-in-out infinite; }
.btn-glow::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; padding: 3px; background: conic-gradient(from var(--ob-angle), transparent 0 58%, var(--lime) 70%, #ff8fa8 80%, #f2577f 86%, transparent 94%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ob-spin 3s linear infinite; filter: drop-shadow(0 0 6px rgba(244, 174, 133, 0.7)); }
@keyframes btn-shine { 0%, 50% { background-position: 200% 0; } 100% { background-position: -70% 0; } }
@keyframes btn-breathe { 0%, 100% { box-shadow: 0 10px 30px -10px rgba(244, 174, 133, 0.45); } 50% { box-shadow: 0 14px 44px -8px rgba(244, 174, 133, 0.8); } }
.btn-glow:hover { transform: translateY(-2px) scale(1.03); }
.btn-glow:hover::before { animation-duration: 1.4s; }
.btn-glow:active { transform: scale(0.97); }
.still .btn-glow, .still .btn-glow::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .btn-glow, .btn-glow::before { animation: none; } }

/* Waitlist form. */
.waitlist { width: min(620px, 100%); margin: 30px auto 0; text-align: left; }
.wl-row { display: flex; gap: 10px; padding: 8px; border-radius: 999px; background: rgba(8, 20, 13, 0.75); border: 1px solid var(--edge); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.7); }
.wl-email { flex: 1; display: flex; }
.wl-email input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: 500 17px Inter, sans-serif; padding: 0 16px; outline: none; }
.wl-email input::placeholder { color: #8fa294; }
.wl-row:focus-within { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(244, 174, 133, 0.25); }
.wl-submit { border: 0; cursor: pointer; white-space: nowrap; }
.wl-submit:disabled { opacity: 0.6; cursor: progress; }
.wl-more { margin: 14px 8px 0; color: var(--muted); font-size: 14px; }
.wl-more summary { cursor: pointer; }
.wl-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.wl-extra label { display: grid; gap: 6px; font-size: 13px; }
.wl-extra input { background: rgba(8, 20, 13, 0.75); border: 1px solid var(--edge); border-radius: 12px; color: var(--text); font: 500 15px Inter, sans-serif; padding: 11px 13px; }
.wl-extra input:focus { outline: 2px solid var(--lime); outline-offset: 1px; }
.wl-note { margin: 14px 8px 0; font-size: 13px; color: var(--muted); }
.wl-note a { color: var(--text); }
.wl-status { margin: 12px 8px 0; font: 600 15px Inter, sans-serif; min-height: 1.4em; }
.wl-status[data-kind="ok"] { color: var(--lime); }
.wl-status[data-kind="error"] { color: #ff8fa8; }
.waitlist.done .wl-row, .waitlist.done .wl-more { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.founder-line { margin-top: 26px; }
@media (max-width: 560px) {
  .wl-row { flex-direction: column; border-radius: 22px; }
  .wl-email input { padding: 12px 10px; }
  .wl-submit { justify-content: center; }
  .wl-extra { grid-template-columns: 1fr; }
}

/* Consent banner and cookie settings. */
.consent { position: fixed; z-index: 80; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 640px; display: flex; gap: 16px; align-items: center; animation: cp-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); padding: 16px 18px; border-radius: 18px; background: #0b1710; color: #eef5ef; border: 1px solid rgba(244, 174, 133, 0.35); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); font: 400 14px/1.5 Inter, sans-serif; }
.consent p { margin: 0; flex: 1; }
.consent a { color: #f4ae85; }
.consent-actions { display: flex; gap: 8px; }
.consent button { font: 600 14px Inter, sans-serif; border-radius: 999px; padding: 10px 16px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: #eef5ef; }
.consent button.yes { background: #f4ae85; border-color: #f4ae85; color: #14281d; }
.consent button:focus-visible { outline: 2px solid #f4ae85; outline-offset: 2px; }
.cookie-settings { font: 500 13px Inter, sans-serif; background: transparent; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
@media (max-width: 560px) { .consent { flex-direction: column; align-items: stretch; } .consent-actions { justify-content: flex-end; } }
.final .waitlist .wl-note, .final .waitlist .wl-status { font-size: 13px; max-width: none; margin: 12px 8px 0; text-align: left; }
.final .waitlist .wl-status { font-size: 15px; }
.final .waitlist .wl-more { text-align: left; }

/* Contact popup and page. */
.contact-pop { border: 1px solid rgba(244, 174, 133, 0.35); border-radius: 22px; padding: 30px; width: min(440px, calc(100% - 32px)); background: #0b1710; color: #eef5ef; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.75); }
.contact-pop::backdrop { background: rgba(3, 9, 6, 0.6); backdrop-filter: blur(6px); }
.contact-pop[open] { animation: cp-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cp-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.cp-close { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #eef5ef; font-size: 20px; line-height: 1; cursor: pointer; }
.cp-kicker { font: 600 12px Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #f4ae85; }
.contact-pop h2 { font: 800 36px/1 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -0.04em; margin: 8px 0 10px; }
.contact-pop p { color: #c9d6cc; font-size: 15px; }
.cp-email { font: 700 clamp(18px, 4.5vw, 22px) "Bricolage Grotesque", Inter, sans-serif; color: #fff !important; margin: 18px 0; user-select: all; overflow-wrap: anywhere; }
.cp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-actions .btn { border: 0; cursor: pointer; }
.cp-mail { color: #eef5ef; border: 1px solid rgba(255, 255, 255, 0.25) !important; }
.cp-status { min-height: 1.3em; margin-top: 12px; color: #f4ae85 !important; font-size: 14px; }
.contact-pop button:focus-visible, .contact-pop a:focus-visible { outline: 2px solid #f4ae85; outline-offset: 3px; }
.legal .contact-email a { font: 800 clamp(24px, 4vw, 36px) "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -0.03em; }
@media (prefers-reduced-motion: reduce) { .contact-pop[open] { animation: none; } }
.consent-fig { flex: none; width: 30px; height: auto; }
.consent-text { flex: 1; }
.consent-title { font: 800 18px "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -0.02em; color: #fff; margin: 0 0 4px !important; }
@media (max-width: 560px) { .consent-fig { display: none; } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
.contact-pop { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow: auto; }

/* Footer: the studio link and the copyright line. */
footer .wrap { flex-wrap: wrap; row-gap: 12px; }
.foot-brand a, .copyright a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(166, 184, 171, 0.45); }
.foot-brand a:hover, .copyright a:hover { color: var(--lime); }
.copyright { color: var(--muted); font-size: 13px; }

/* Phones: stage thumbnails take the full text width (the wrapper, not just the image, goes to column 2). */
@media (max-width: 960px) {
  .pipeline li .thumb { grid-column: 2; margin-top: 6px; }
  .pipeline li .thumb img { aspect-ratio: 16 / 10; width: 100%; }
}

/* Bring your own AI: the promise, every provider, and three facts. */
.byo { margin-top: 64px; border-radius: 28px; padding: 34px 36px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 20px 44px; align-items: center; text-align: left; }
.byo-kicker { font: 600 12px Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); }
.byo-title { font: 800 clamp(26px, 2.8vw, 38px)/1.05 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -0.04em; margin: 10px 0 12px; }
.byo-title em { font-style: normal; font-weight: 300; color: var(--lime); }
.byo-text { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 38ch; }
.byo-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pv { position: relative; overflow: hidden; border-radius: 16px; padding: 14px 14px 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--edge); transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; }
.pv b { display: block; font: 700 18px "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -0.03em; color: var(--text); }
.pv span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.pv:hover { transform: translateY(-3px); border-color: rgba(244, 174, 133, 0.6); background: rgba(244, 174, 133, 0.08); }
.pv.local { background: rgba(244, 174, 133, 0.14); border-color: rgba(244, 174, 133, 0.5); }
.pv.local span { color: var(--lime); }
/* A soft highlight travels across the chips in turn. */
.pv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%) -150% 0 / 220% 100% no-repeat; animation: pv-sweep 8s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 0.35s); pointer-events: none; }
.byo-grid li:nth-child(1) { --n: 0; } .byo-grid li:nth-child(2) { --n: 1; } .byo-grid li:nth-child(3) { --n: 2; } .byo-grid li:nth-child(4) { --n: 3; }
.byo-grid li:nth-child(5) { --n: 4; } .byo-grid li:nth-child(6) { --n: 5; } .byo-grid li:nth-child(7) { --n: 6; } .byo-grid li:nth-child(8) { --n: 7; }
@keyframes pv-sweep { 0%, 70% { background-position: -150% 0; } 90%, 100% { background-position: 150% 0; } }
.byo-facts { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 18px; border-top: 1px solid var(--edge); font-size: 14px; color: var(--muted); }
.byo-facts li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-right: 9px; vertical-align: 1px; }
.still .pv::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pv::after { animation: none; } }
@media (max-width: 960px) {
  .byo { grid-template-columns: 1fr; padding: 26px 22px; }
  .byo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}