/* =============================================================================
   Deal Flip Formula, free live masterclass opt-in.

   Design system
   - Canvas: white, with one quiet off white surface for alternating sections.
   - Ink: near black navy for headings, slate for body (9:1 and 7:1 on white).
   - Brand: DFF navy carries every primary action and the dark accents; the
     logo blue is an accent only (icons, links, the highlight gradient).
   - Type: Inter Tight for display, Inter for text and UI.
   - Scale: 8pt spacing, one shadow scale (sm / md / lg), one radius scale.
   - Motion: one entrance (fade up on scroll), 200ms hovers, nothing looping.
   ============================================================================= */

:root {
  --white: #ffffff;
  --surface: #f6f7fa;
  --surface-2: #eef1f6;
  --ink: #0c1222;
  --ink-2: #1f2937;
  --slate: #3b4557;
  --muted: #6b7383;
  --line: #e4e8ef;
  --line-2: #d3d9e3;

  --navy: #0f2344;
  --navy-2: #163366;
  --navy-3: #1e4185;
  --brand: #2b7beb;
  --brand-soft: #e9f1fd;
  --brand-ink: #1b5fd0;
  --cta: #2563eb;
  --cta-2: #1d4ed8;
  --cta-top: #3b82f6;
  --cyan: #06b6d4;
  --green: #1e9e5a;
  --green-soft: #e6f6ec;
  --red: #d64545;
  --red-soft: #fdecec;

  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sig: "Mrs Saint Delafield", "Segoe Script", "Snell Roundhand", cursive;

  --shadow-sm: 0 1px 2px rgba(12, 18, 34, 0.06), 0 1px 3px rgba(12, 18, 34, 0.04);
  --shadow-md: 0 10px 30px -14px rgba(12, 18, 34, 0.22);
  --shadow-lg: 0 30px 60px -28px rgba(12, 18, 34, 0.32);
  --shadow-float: 0 2px 22px rgba(12, 18, 34, 0.09), 0 30px 60px -28px rgba(12, 18, 34, 0.32);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --container: 70rem;
  --gutter: 1.25rem;

  --header-h: 72px;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--slate);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol,
li,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

input:focus-visible {
  outline: none;
}

::selection {
  background: var(--navy);
  color: #fff;
}

#hero-form,
#final-form,
#disclaimer,
#sms-terms {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }
}

/* ---------------------------------------------------------------------------
   Type
   --------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

.eyebrow--pill {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 13px;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}

/* The session time is one unit, it never breaks across two lines. */
[data-session-time] {
  white-space: nowrap;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.16);
}

.h-display {
  font-size: 34px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.035em;
}

@media (min-width: 768px) {
  .h-display {
    font-size: 46px;
  }
}

@media (min-width: 1024px) {
  .h-display {
    font-size: clamp(40px, 4.69vw - 8px, 46px);
  }
}

/* Desktop only line breaks inside the headline, measured against the
   7/12 column so the three lines read long, long, short. */
.br-d {
  display: none;
}

@media (min-width: 768px) {
  .br-d {
    display: inline;
  }
}

.h-section {
  font-size: 28px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.03em;
}

@media (min-width: 768px) {
  .h-section {
    font-size: 38px;
  }
}

.lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--slate);
}

@media (min-width: 768px) {
  .lead {
    font-size: 19px;
  }
}

.body {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--slate);
}

.body b,
.lead b {
  color: var(--ink);
  font-weight: 600;
}

/* The one highlight device on the page: the key phrase on a flat brand blue
   block, white type, square-ish corners, no tilt. */
.hl {
  display: inline-block;
  padding: 0.125em 0.22em 0.13em;
  margin: 0 0.02em;
  border-radius: 0.12em;
  background: var(--cta);
  color: #fff;
  line-height: 1.02;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The tilted variant: springs in at a slight angle on load, then rocks
   gently around that resting angle. Hero and curriculum headlines only. */
.hl--tilt {
  transform: rotate(-2deg);
  box-shadow: 0 14px 30px -14px rgba(37, 99, 235, 0.55);
  animation:
    hl-tilt-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both,
    hl-tilt-sway 3.4s ease-in-out 1.5s infinite;
}

@keyframes hl-tilt-in {
  0% {
    transform: rotate(0deg) scale(1);
  }
  60% {
    transform: rotate(-3.2deg) scale(1.04);
  }
  100% {
    transform: rotate(-2deg) scale(1);
  }
}

@keyframes hl-tilt-sway {
  0%,
  28%,
  100% {
    transform: rotate(-2deg);
  }
  7% {
    transform: rotate(-3.6deg) scale(1.02);
  }
  16% {
    transform: rotate(-0.2deg);
  }
  23% {
    transform: rotate(-2.7deg);
  }
}

.qa .hl--tilt {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .hl--tilt {
    animation: none;
  }
}

.hl--wrap {
  display: inline;
  white-space: normal;
}

/* Orange marker underline for the closing phrase of the headline. Draws in
   from the left once the page has loaded. */
.ul {
  background-image: linear-gradient(#f97316, #f97316);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.14em;
  padding-bottom: 0.04em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}

.js .ul {
  animation: ul-draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both;
}

@keyframes ul-draw {
  from {
    background-size: 0% 0.14em;
  }
  to {
    background-size: 100% 0.14em;
  }
}

.qa .ul {
  animation: none;
}

/* ---------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.qa .reveal {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background-image: linear-gradient(180deg, var(--cta-top) 0%, var(--cta) 100%);
  color: #fff;
  font-family: var(--font-display);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 14px 30px -12px rgba(37, 99, 235, 0.6);
  transition:
    filter 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 18px 34px -12px rgba(37, 99, 235, 0.7);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled] {
  cursor: progress;
  opacity: 0.7;
}

.btn__main {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.btn__sub {
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.2;
}

.btn--block {
  width: 100%;
}

.btn--wide {
  min-width: 17rem;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 1.1rem;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, 0.6);
  transition: background 0.2s ease;
}

.btn-ghost:hover {
  background: var(--cta-2);
}

@media (max-width: 479px) {
  .btn-ghost {
    height: 40px;
    padding: 0 0.85rem;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.header.is-stuck {
  border-bottom-color: var(--line);
}

/* Under 1024px the bar goes away entirely; the lockup sits centered at the
   top of the page instead and the sticky bar handles the CTA. */
.mobile-brand {
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter) 1.5rem;
}

@media (max-width: 1023px) {
  .header {
    display: none;
  }
}

@media (min-width: 1024px) {
  .mobile-brand {
    display: none;
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand img {
  height: 30px;
  width: auto;
}

.brand span {
  white-space: nowrap;
}

@media (max-width: 479px) {
  .brand img {
    height: 28px;
  }
}

.header__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header__live {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 13.5px;
  color: var(--muted);
}

.header__live b {
  color: var(--ink);
  font-weight: 600;
}

.header__live .sep {
  color: var(--line-2);
  margin: 0 0.1rem;
}

@media (min-width: 900px) {
  .header__live {
    display: inline-flex;
  }
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: 2rem 0 3rem;
}

@media (min-width: 1024px) {
  .hero {
    padding: 4rem 0 5rem;
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 85% 0%, rgba(43, 123, 235, 0.1), transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, var(--white) 70%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "copy"
    "card"
    "trust";
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "copy card"
      "trust card";
    column-gap: 4rem;
    row-gap: 2rem;
    align-items: center;
  }
}

.hero__copy {
  grid-area: copy;
}

.hero__card {
  grid-area: card;
}

.hero__trust {
  grid-area: trust;
}

@media (min-width: 1024px) {
  .hero__copy {
    align-self: end;
  }
  .hero__trust {
    align-self: start;
  }
}

.hero__copy {
  text-align: center;
}

@media (min-width: 1024px) {
  .hero__copy {
    text-align: left;
  }
}

.eyebrow--stars {
  gap: 0.6rem;
  white-space: nowrap;
}

@media (max-width: 479px) {
  .eyebrow--stars {
    font-size: 12px;
    padding: 0.4rem 0.7rem;
  }
  .eyebrow--stars .stars--inline svg {
    width: 12px;
    height: 12px;
  }
}

.eyebrow--stars b {
  color: var(--ink);
  font-weight: 600;
}

.stars--inline svg {
  width: 15px;
  height: 15px;
  color: #f5b301;
}

/* The hero button only makes sense when the form is not right underneath. */
.btn--hero {
  display: none;
  margin: 1.75rem 0 0;
  min-width: 18rem;
}

@media (min-width: 1024px) {
  .btn--hero {
    display: inline-flex;
  }
}

.hero__stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
}

@media (min-width: 768px) {
  .hero__stats {
    gap: 1.25rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  .hero__stats {
    justify-content: flex-start;
  }
}

.hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
}

.hero__stats b {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.hero__stats span {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .hero__stats b {
    font-size: 30px;
  }
  .hero__stats span {
    font-size: 13.5px;
  }
}

.hero__copy .h-display {
  margin-top: 1.25rem;
  margin-left: auto;
  margin-right: auto;
}

.nowrap {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .hero__copy .h-display {
    text-wrap: initial;
  }
}

@media (min-width: 1024px) {
  .hero__copy .h-display {
    margin-left: 0;
  }
}

.hero__copy .lead {
  margin: 1.25rem auto 0;
  max-width: 34rem;
}

@media (min-width: 1024px) {
  .hero__copy .lead {
    margin-left: 0;
  }
}

.hero__points {
  list-style: none;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 1.5rem;
  text-align: left;
  width: 100%;
  max-width: 34rem;
  border: 1.5px dashed rgba(30, 158, 90, 0.55);
  background: rgba(230, 246, 236, 0.55);
  border-radius: var(--radius-md);
}

@media (min-width: 560px) {
  .hero__points {
    grid-template-columns: 1fr 1fr;
  }
}

/* Between 1024 and 1199 the copy column is too narrow for two columns of
   pills without wrapping, so the box goes single column there. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero__points {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .hero__points {
    margin-left: 0;
  }
}

.hero__points li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.hero__points b {
  font-weight: 700;
  color: var(--ink);
}

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}

.check svg {
  width: 12px;
  height: 12px;
}

/* ---------------------------------------------------------------------------
   Opt-in card
   --------------------------------------------------------------------------- */

/* Three soft lights behind the card: blue, cyan, a touch of violet. They
   drift slowly on transform only, stay well under the card's edges, and
   pause when the card is off screen (see main.js). */
.glowbox {
  position: relative;
  isolation: isolate;
}

.glowbox__g {
  position: absolute;
  inset: -2rem;
  z-index: -1;
  pointer-events: none;
}

@media (min-width: 768px) {
  .glowbox__g {
    inset: -3rem;
  }
}

.glowbox__g span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform;
}

.glowbox__g .g1 {
  left: -4rem;
  top: -2rem;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.58), transparent 66%);
  animation: glow-a 16s ease-in-out infinite;
}

.glowbox__g .g2 {
  right: -5rem;
  bottom: -3rem;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.55), transparent 66%);
  animation: glow-b 19s ease-in-out infinite;
}

.glowbox__g .g3 {
  right: 0;
  top: -3rem;
  width: 16rem;
  height: 16rem;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.42), transparent 66%);
  animation: glow-c 23s ease-in-out infinite;
}

@keyframes glow-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(12%, 8%, 0) scale(1.12);
  }
  66% {
    transform: translate3d(-6%, 14%, 0) scale(0.94);
  }
}

@keyframes glow-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  40% {
    transform: translate3d(-14%, -8%, 0) scale(1.1);
  }
  70% {
    transform: translate3d(6%, -14%, 0) scale(0.96);
  }
}

@keyframes glow-c {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-18%, 16%, 0) scale(1.15);
  }
}

.qa .glowbox__g span,
.is-paused .glowbox__g span {
  animation-play-state: paused;
}

@media (max-width: 639px) {
  .glowbox__g span {
    filter: blur(44px);
  }
  .glowbox__g .g3 {
    display: none;
  }
}

.optin {
  position: relative;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-lg);
}

/* A thin light that travels around the card edge. The conic gradient is
   masked to a 1.5px ring, so only the rim is painted and the card stays
   clickable. Browsers without @property simply show no beam. */
@property --beam {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.optin::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam),
    transparent 0deg,
    transparent 230deg,
    rgba(37, 99, 235, 0.2) 262deg,
    #2563eb 305deg,
    rgba(37, 99, 235, 0.85) 335deg,
    rgba(37, 99, 235, 0) 360deg
  );
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: beam 7s linear infinite;
}

@keyframes beam {
  to {
    --beam: 360deg;
  }
}

.qa .optin::after,
.is-paused .optin::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .optin::after {
    display: none;
  }
}

@media (min-width: 768px) {
  .optin {
    padding: 2rem;
  }
}

.optin__badge {
  position: absolute;
  top: -14px;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  background: #f5b301;
  color: #3a2a00;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -10px rgba(245, 179, 1, 0.7);
}

.optin__badge svg {
  width: 12px;
  height: 12px;
}

.optin__live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dot--blue {
  background: var(--cta);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.optin__head {
  text-align: center;
  margin-bottom: 1rem;
}

.optin__head .optin__title {
  margin-top: 0.7rem;
}

.field__label {
  display: block;
  margin: 0 0 0.35rem 0.1rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.optin__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.optin__note svg {
  width: 14px;
  height: 14px;
  color: var(--green);
}

.optin__urgency {
  padding: 0.7rem 0.9rem 0.65rem;
  border: 1.5px dashed rgba(245, 158, 11, 0.7);
  border-radius: var(--radius-md);
  background: rgba(255, 251, 235, 0.9);
}

.optin__urgency-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  color: #7a4a00;
  font-size: 13.5px;
  font-weight: 600;
}

.seats {
  margin-top: 0.5rem;
}

.seats__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  overflow: hidden;
}

.seats__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  transition: width 0.8s ease;
}

.seats__count {
  margin-top: 0.45rem;
  text-align: center;
  font-size: 12.5px;
  color: #7a4a00;
  font-variant-numeric: tabular-nums;
}

.seats__count b {
  font-weight: 700;
  color: #5b3700;
}

.optin__urgency-text svg {
  width: 15px;
  height: 15px;
  color: #f59e0b;
  flex: none;
}

.optin__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ink);
}

.optin__date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}

.optin__date b {
  color: var(--ink);
  font-weight: 600;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.field input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 0 1rem;
  font-size: 16px;
  color: var(--ink);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field input:focus {
  border-color: var(--cta);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.field.is-invalid input {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.12);
}

.field--phone {
  display: flex;
  position: relative;
}

.field--phone .prefix {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 50px;
  padding: 0 0.85rem;
  border: 1px solid var(--line-2);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.field--phone .prefix svg {
  width: 20px;
  height: 14px;
  border-radius: 2px;
}

.field--phone .prefix {
  flex: none;
}

.field--phone input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------------------------------------------------------------------------
   Country code picker

   Replaces the fixed +1 once the script runs. The panel is anchored to the
   whole phone field rather than to the button, so it is the same width as the
   field on every screen and can never hang off the side of a phone.
   --------------------------------------------------------------------------- */

.ccpick {
  flex: none;
  display: flex;
}

.ccpick__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 50px;
  padding: 0 0.6rem 0 0.75rem;
  border: 1px solid var(--line-2);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-2);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.ccpick__btn:hover {
  background: var(--line);
}

.ccpick__btn:focus-visible {
  outline: none;
  border-color: var(--cta);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
  z-index: 1;
}

.ccpick__flag {
  font-size: 17px;
  line-height: 1;
  /* Windows has no flag glyphs and falls back to the two letter code, which
     is why the code is what the button is sized around. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.ccpick__dial {
  font-variant-numeric: tabular-nums;
}

.ccpick__caret {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.ccpick.is-open .ccpick__caret {
  transform: rotate(180deg);
}

.ccpick.is-open .ccpick__btn {
  border-color: var(--cta);
  background: var(--white);
}

.ccpick__pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 274px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow-float);
}

.ccpick__pop[hidden] {
  display: none;
}

/* Opened upward when there is not enough room below, which on a phone is
   most of the time once the keyboard is up. */
.ccpick--up .ccpick__pop {
  top: auto;
  bottom: calc(100% + 6px);
}

.ccpick__search {
  flex: none;
  padding: 0.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.ccpick__search input {
  width: 100%;
  height: 40px;
  padding: 0 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  /* 16px so iOS Safari does not zoom the page when this takes focus. */
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
}

.ccpick__search input:focus {
  outline: none;
  border-color: var(--cta);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ccpick__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ccpick__opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  /* 44px keeps every row a comfortable touch target. */
  min-height: 44px;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}

.ccpick__opt:hover,
.ccpick__opt.is-active {
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.ccpick__opt[aria-selected="true"] {
  font-weight: 600;
}

.ccpick__name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccpick__code {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ccpick__opt.is-active .ccpick__code {
  color: var(--brand-ink);
}

.ccpick__empty {
  padding: 0.9rem 0.6rem;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 480px) {
  .ccpick__btn {
    padding: 0 0.5rem 0 0.6rem;
    gap: 0.3rem;
    font-size: 14.5px;
  }

  .ccpick__flag {
    font-size: 16px;
  }

  .ccpick__pop {
    max-height: 252px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ccpick__caret,
  .ccpick__btn {
    transition: none;
  }
}

.field__error {
  display: none;
  margin: 0.35rem 0.15rem 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--red);
}

.field.is-invalid .field__error {
  display: block;
}

.form .btn {
  margin-top: 0.25rem;
}

.consent {
  margin-top: 0.1rem;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.consent a {
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.countdown__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.countdown__row {
  display: flex;
  gap: 0.5rem;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 54px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
}

.countdown__unit b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cta);
  font-variant-numeric: tabular-nums;
}

.countdown__unit span {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.optin__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.optin__avatars {
  display: flex;
  flex: none;
}

.optin__avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--white);
}

.optin__avatars img + img {
  margin-left: -13px;
}

.optin__social-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  white-space: nowrap;
  line-height: 1.3;
  color: var(--muted);
}

.optin__social-text b {
  color: var(--ink);
  font-weight: 600;
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.stars svg {
  width: 14px;
  height: 14px;
  color: #f5b301;
}

.stars b {
  margin-left: 0.35rem;
}

/* Host tag under the hero copy: Instagram story ring, name, handle, badge */

.host-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
  text-align: left;
  cursor: default;
}


/* Phones: the tag straddles the top edge of the opt-in card. Desktop keeps
   it under the checklist. Two copies in the markup, one shown per layout. */
.host-tag--mobile {
  display: none;
}

@media (max-width: 1023px) {
  .host-tag--desktop {
    display: none;
  }
  .host-tag--mobile {
    display: inline-flex;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 3;
    width: max-content;
    max-width: calc(100vw - 2 * var(--gutter));
    margin: 0;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  .hero__card {
    margin-top: 2.25rem;
  }
  .hero__card .optin {
    padding-top: 3.5rem;
  }
}

.hero__trust {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__trust {
    align-items: flex-start;
  }
}

.host-tag__ring {
  display: inline-flex;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
  flex: none;
}

/* The white gap is a real border on the image, not a box shadow: the photo's
   anti aliased edge then blends into white instead of into the gradient,
   which removed the hairline that hugged the photo. */
.host-tag__ring img {
  width: 48px;
  height: 48px;
  border: 2px solid var(--white);
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
}

.host-tag__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.host-tag__text b {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.host-tag__text > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13.5px;
  color: var(--muted);
}

.host-tag__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-2);
}

.verified {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------------------
   Trust strip: four stat cards, same surface language as the opt-in card
   --------------------------------------------------------------------------- */

.trust {
  position: relative;
  z-index: 1;
  padding: 0.5rem 0 3rem;
}

@media (min-width: 1024px) {
  .trust {
    padding: 0 0 4rem;
  }
}

.trust__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (min-width: 900px) {
  .trust__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

.trust__item {
  padding: 1.25rem 1rem;
  text-align: center;
  border: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}

@media (min-width: 900px) {
  .trust__item {
    padding: 1.75rem 1rem;
  }
}

.trust__item b {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

@media (min-width: 900px) {
  .trust__item b {
    font-size: 32px;
  }
}

.trust__item span {
  display: block;
  margin-top: 0.35rem;
  font-size: 13px;
  color: var(--muted);
}

.trust__note {
  margin-top: 1rem;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */

.section {
  padding: 4rem 0;
}

@media (min-width: 768px) {
  .section {
    padding: 6rem 0;
  }
}

.section--surface {
  background: var(--surface);
}

/* Two white sections in a row do not need a full pad on each side of the
   join, or the page reads as a void between them. */
#versus {
  padding-bottom: 3rem;
}

#system {
  padding-top: 3rem;
}

@media (min-width: 768px) {
  #versus {
    padding-bottom: 4rem;
  }
  #system {
    padding-top: 4rem;
  }
}

.section__head {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .section__head {
    margin-bottom: 3.5rem;
  }
}

.section__head .h-section {
  margin-top: 1rem;
}

.section__head .lead {
  margin-top: 1rem;
}

/* Host */

.host {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .host {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: stretch;
  }
}

.host__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  max-width: 30rem;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .host__media {
    aspect-ratio: auto;
    max-width: none;
    min-height: 34rem;
    height: 100%;
  }
}

.host__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

.host__badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.5rem 0.85rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.host__badge .dot {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 158, 90, 0.18);
}

.host__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 38rem;
}

.host__copy .h-section {
  margin-top: 1rem;
}

.host__copy .body + .body {
  margin-top: 1rem;
}

.host__copy .h-section + .body {
  margin-top: 1.25rem;
}

.src {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  padding: 0.15rem 0.6rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  white-space: nowrap;
  vertical-align: 2px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.stat {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1rem 0.75rem;
  text-align: center;
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.stat span {
  display: block;
  margin-top: 0.3rem;
  font-size: 12px;
  color: var(--muted);
}

.stats__note {
  margin-top: 0.6rem;
  font-size: 12px;
  color: var(--muted);
}

.host__closing {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.host__sig {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.host__sig img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--line-2);
}

.host__sig b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.host__sig span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 13.5px;
  color: var(--muted);
}

.host__sig span svg {
  width: 15px;
  height: 15px;
  color: var(--brand);
}

/* Compare: two equal cards, same structure, one of them navy headed */

.compare {
  display: grid;
  grid-template-columns: 1fr;
  /* Tight row gap so the zero height VS item lands on the seam and the badge
     straddles both stacked cards, like the gutter does on desktop. */
  row-gap: 0.5rem;
  margin: 0 auto;
}

@media (min-width: 800px) {
  .compare {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
  }
}

.compare__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}

.compare__card > .compare__head {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.compare__card > .compare__list {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.compare {
  position: relative;
  isolation: isolate;
}

.compare__col {
  position: relative;
  z-index: 1;
  display: flex;
}

.compare__col > .compare__card {
  flex: 1;
}

/* One light layer for the whole comparison, painted behind both cards so a
   green blob can never wash over the red card. */
.compare__glows {
  position: absolute;
  inset: -3rem -2rem;
  z-index: -1;
  pointer-events: none;
}

.cg {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform;
}

.cg--r1 {
  left: -2rem;
  top: -1rem;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(214, 69, 69, 0.75), transparent 68%);
  animation: glow-a 17s ease-in-out infinite;
}

.cg--r2 {
  left: 6%;
  bottom: -2rem;
  width: 18rem;
  height: 18rem;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.5), transparent 68%);
  animation: glow-b 21s ease-in-out infinite;
}

.cg--g1 {
  right: -2rem;
  top: -1rem;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(30, 158, 90, 0.8), transparent 68%);
  animation: glow-b 19s ease-in-out infinite;
}

.cg--g2 {
  right: 6%;
  bottom: -2rem;
  width: 18rem;
  height: 18rem;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.6), transparent 68%);
  animation: glow-a 23s ease-in-out infinite;
}

.qa .cg,
.is-paused .cg {
  animation-play-state: paused;
}

@media (max-width: 799px) {
  .compare__glows {
    inset: -2rem -1rem;
  }
  .cg--r1,
  .cg--g1 {
    width: 17rem;
    height: 17rem;
  }
  .cg--r2,
  .cg--g2 {
    width: 14rem;
    height: 14rem;
  }
  .cg--r1 { left: -3rem; top: 2%; }
  .cg--r2 { left: 20%; top: 22%; bottom: auto; }
  .cg--g1 { right: -3rem; bottom: 8%; top: auto; }
  .cg--g2 { right: 20%; bottom: 28%; }
}


.compare__card--new {
  border-color: rgba(30, 158, 90, 0.35);
}

/* Same travelling rim light as the opt-in card, in green. */
.compare__card--new::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--radius-lg) + 1.5px);
  padding: 2px;
  background: conic-gradient(
    from var(--beam),
    transparent 0deg,
    transparent 230deg,
    rgba(30, 158, 90, 0.25) 255deg,
    #10b981 300deg,
    #1e9e5a 332deg,
    rgba(30, 158, 90, 0) 360deg
  );
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: beam 7s linear infinite;
}

.qa .compare__card--new::after,
.is-paused .compare__card--new::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .compare__card--new::after {
    display: none;
  }
}

.compare__head {
  position: relative;
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.compare__label {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare__card--old .compare__label {
  color: #9b2f2f;
  background: var(--red-soft);
}

.compare__card--new .compare__label {
  color: #10633b;
  background: var(--green-soft);
}

.compare__head h3 {
  margin-top: 0.65rem;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.compare__card--new .compare__head h3,
.compare__card--old .compare__head h3 {
  color: var(--ink);
}

.compare__list {
  list-style: none;
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}

.compare__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--slate);
  text-wrap: pretty;
}


.compare__card--new .compare__list li {
  color: var(--ink-2);
}

.compare__list .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  flex: none;
}

.compare__list .mark svg {
  width: 11px;
  height: 11px;
}

.mark--no {
  background: var(--red-soft);
  color: var(--red);
}

.mark--yes {
  background: var(--green-soft);
  color: var(--green);
}

/* Screenshot gallery */

.shots {
  margin-top: 3.5rem;
}

.shots__label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.marquee {
  position: relative;
  width: 100vw;
  margin: 1.25rem 0 0 calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  width: max-content;
  /* The marquee clips (mask + overflow), so the track carries enough padding
     for the cards' drop shadows to finish inside it. */
  padding: 1.75rem 0 4.5rem;
  animation: marquee 42s linear infinite;
}

@media (max-width: 767px) {
  .marquee__track {
    animation-duration: 32s;
  }
}

.marquee:hover .marquee__track,
.is-paused .marquee__track,
.qa .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.shot {
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.shot img {
  width: 11rem;
  aspect-ratio: 640 / 599;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 10px;
  background: #1e1f22;
}

@media (min-width: 768px) {
  .shot img {
    width: 12.5rem;
  }
}

/* Final */

.final__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .final__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
  }
}

.final__copy {
  text-align: center;
}

@media (min-width: 1024px) {
  .final__copy {
    text-align: left;
  }
}

.final__copy .h-section {
  margin-top: 1rem;
}

.final__copy .lead {
  margin: 1.25rem auto 0;
  max-width: 34rem;
}

@media (min-width: 1024px) {
  .final__copy .lead {
    margin-left: 0;
  }
}

.final__copy .lead + .lead {
  margin-top: 1rem;
}

/* Footer */

.footer {
  border-top: 1px solid var(--line);
  padding: 3rem 0 2.5rem;
}

@media (max-width: 1023px) {
  .footer {
    padding-bottom: calc(2.5rem + 84px + env(safe-area-inset-bottom));
  }
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.footer p {
  max-width: 46rem;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.footer p b {
  color: var(--slate);
  font-weight: 600;
}

.footer p a {
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
}

.footer__links a:hover {
  color: var(--ink);
}

.footer__copy {
  font-size: 12.5px;
  color: var(--muted);
}

/* Sticky bar (phones and tablets) */

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  visibility: hidden;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.3s;
}

.sticky.is-on {
  visibility: visible;
  transform: none;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

@media (min-width: 1024px) {
  .sticky {
    display: none;
  }
}

.sticky__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 36rem;
  margin: 0 auto;
}

.sticky__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.25;
}

.sticky__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.sticky__title .dot {
  animation: dot-blink 1.7s ease-in-out infinite;
}

@keyframes dot-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky__title .dot {
    animation: none;
  }
}

/* Bare numbers, no frames: 6d : 12h : 46m : 26s */
.sticky__cd {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cta);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sticky__cd b {
  font-weight: 700;
}

.sticky .btn {
  min-height: 48px;
  padding: 0.5rem 1.1rem;
  border-radius: 12px;
  flex: none;
}

.sticky .btn__main {
  font-size: 15px;
}

/* ---------------------------------------------------------------------------
   Kicker: small caps label with side bars
   --------------------------------------------------------------------------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

.kicker .bar {
  display: inline-block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.5;
}

.kicker--dark {
  color: #7fa7f0;
}

/* ---------------------------------------------------------------------------
   Navy sections
   --------------------------------------------------------------------------- */

.section--navy {
  background:
    radial-gradient(70% 55% at 50% -10%, rgba(37, 99, 235, 0.25), transparent 65%),
    var(--navy);
}

.section--navy-cont {
  background: var(--navy);
}

.section--navy .h-section {
  color: #fff;
}

.section--navy .lead {
  color: #aebbce;
}

.section--navy .body {
  color: #c3cddf;
}

.section--navy .body b {
  color: #fff;
}

.section--navy .hl {
  box-shadow: 0 14px 30px -12px rgba(37, 99, 235, 0.6);
}

/* ---------------------------------------------------------------------------
   Wire marquee
   --------------------------------------------------------------------------- */

.wiremarq {
  padding: 1rem 0 0;
}

.wiremarq__label {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
}

.wiremarq__label .dot {
  display: inline-block;
  margin-right: 0.45rem;
  vertical-align: 1px;
}

@media (max-width: 639px) {
  .wiremarq__label {
    font-size: 13px;
  }
}

.wiremarq__label b {
  color: var(--ink);
  font-weight: 600;
}

.shot--wire {
  box-shadow: var(--shadow-float);
  border: 0;
}

.shot--wire img {
  width: auto;
  height: 10.5rem;
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--white);
}

@media (min-width: 768px) {
  .shot--wire img {
    height: 12rem;
  }
}

/* ---------------------------------------------------------------------------
   Versus extras
   --------------------------------------------------------------------------- */

/* The badge always overlaps the seam: over the gutter between the two
   columns on desktop, over the join between the stacked cards on phones. */
.compare__vs {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
  height: 52px;
  margin: -26px 0;
  align-items: center;
  pointer-events: none;
}

.compare__vs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-image: linear-gradient(180deg, var(--cta-top) 0%, var(--cta) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.7);
}

@media (min-width: 800px) {
  .compare {
    position: relative;
    grid-template-columns: 1fr 1fr;
  }
  .compare__vs {
    position: absolute;
    left: 50%;
    top: 50%;
    height: auto;
    margin: 0;
    transform: translate(-50%, -50%);
  }
  .compare__vs span {
    width: 56px;
    height: 56px;
    font-size: 16px;
    box-shadow: 0 12px 28px -10px rgba(37, 99, 235, 0.7);
  }
}

.section--navy .compare__card {
  border-color: transparent;
}

.vs-punch {
  margin-top: 2.25rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .vs-punch {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------------------------
   The System steps
   --------------------------------------------------------------------------- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
  }
  .steps__line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 44px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--line-2) 15%, var(--line-2) 85%, transparent);
  }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-float);
}

.step__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: var(--brand-soft);
  color: var(--cta);
}

.step__icon svg {
  width: 34px;
  height: 34px;
}

/* Emoji glyph in the step plate, with a slow breathing loop so the row does
   not feel frozen. */
.stepmoji {
  font-size: 30px;
  line-height: 1;
  animation: stepmoji 3.6s ease-in-out infinite;
}

.step:nth-child(3) .stepmoji {
  animation-delay: 0.5s;
}

.step:nth-child(4) .stepmoji {
  animation-delay: 1s;
}

@keyframes stepmoji {
  0%,
  62%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  74% {
    transform: translateY(-4px) scale(1.08) rotate(-4deg);
  }
  86% {
    transform: translateY(0) scale(1.02) rotate(2deg);
  }
}

.qa .stepmoji,
.is-paused .stepmoji {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .stepmoji {
    animation: none;
  }
}



.step__num {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 0 0 2.5px var(--white);
}

.step__label {
  margin-top: 1.1rem;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

.step h3 {
  margin-top: 0.5rem;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.step__text {
  margin-top: 0.6rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
}

.step__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: #15703f;
  font-size: 12.5px;
  font-weight: 600;
}

.step__tag svg {
  width: 12px;
  height: 12px;
}

.step__text {
  margin-bottom: 1.4rem;
}

/* ---------------------------------------------------------------------------
   Loophole
   --------------------------------------------------------------------------- */

/* Certificate: outer card, inset hairline frame, corner marks and a seal. */
.loophole {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(37, 99, 235, 0.05), transparent 60%),
    var(--white);
  border-radius: var(--radius-lg);
  padding: 2.75rem 1.5rem 2.25rem;
  box-shadow: var(--shadow-float);
  text-align: center;
}

.loophole::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
}

.loophole__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--cta);
  border-radius: 2px;
  pointer-events: none;
}

.loophole__corner--tl {
  top: 18px;
  left: 18px;
  border-right: 0;
  border-bottom: 0;
}

.loophole__corner--tr {
  top: 18px;
  right: 18px;
  border-left: 0;
  border-bottom: 0;
}

.loophole__corner--bl {
  bottom: 18px;
  left: 18px;
  border-right: 0;
  border-top: 0;
}

.loophole__corner--br {
  bottom: 18px;
  right: 18px;
  border-left: 0;
  border-top: 0;
}

@media (min-width: 768px) {
  .loophole {
    padding: 3.5rem 3.5rem 2.75rem;
  }
  .loophole__corner {
    width: 22px;
    height: 22px;
  }
}

.loophole__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.loophole__tag svg {
  width: 14px;
  height: 14px;
}

.loophole .h-section {
  margin-top: 1.1rem;
}

.loophole .body {
  max-width: 36rem;
  margin: 1.1rem auto 0;
  text-align: center;
}

/* A thin rule with a diamond in the middle, the way a certificate separates
   its body from the line underneath. */
.loophole__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  max-width: 20rem;
  margin: 1.9rem auto 0;
}

.loophole__rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2));
}

.loophole__rule span:last-child {
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.loophole__rule i {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--cta);
  transform: rotate(45deg);
  border-radius: 1px;
}

.loophole__kicker {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cta);
}

/* ---------------------------------------------------------------------------
   AI section
   --------------------------------------------------------------------------- */

.ai {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .ai {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
  }
}

.ai__copy {
  text-align: center;
}

@media (min-width: 1024px) {
  .ai__copy {
    text-align: left;
  }
}

.ai__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ai__badge svg {
  width: 13px;
  height: 13px;
  color: #f59e0b;
}

.ai__copy .h-section {
  margin-top: 1.1rem;
}

.ai__copy .lead {
  margin: 1.1rem auto 0;
  max-width: 34rem;
}

@media (min-width: 1024px) {
  .ai__copy .lead {
    margin-left: 0;
  }
}

.ai__feats {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .ai__feats {
    margin-left: 0;
  }
}

.ai__feats li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0.9rem;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate);
}

.ai__feats b {
  color: var(--ink);
  font-weight: 600;
}

.ai__fi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--white);
  color: var(--cta);
  box-shadow: var(--shadow-sm);
}

.ai__fi svg {
  width: 19px;
  height: 19px;
}

.ai__visual {
  position: relative;
  max-width: 23rem;
  margin: 0 auto;
  width: 100%;
}

/* Rotating gradient outline and the particle burst behind it, the same
   mechanic as the Billions AI voice player, in the DFF palette. */
@property --spin-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.spinring {
  position: relative;
  padding: 3px;
  border-radius: 2.1rem;
  background-image: conic-gradient(
    from var(--spin-angle),
    #2563eb,
    #38bdf8,
    #6366f1,
    #38bdf8,
    #2563eb
  );
  box-shadow: 0 24px 70px -20px rgba(37, 99, 235, 0.45);
  animation: spin-angle 4s linear infinite;
}

@keyframes spin-angle {
  to {
    --spin-angle: 360deg;
  }
}

.particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  animation:
    particle-pop var(--dur) ease-out var(--delay) infinite,
    particle-hue 4s linear var(--hue-delay, 0s) infinite;
}

@keyframes particle-pop {
  0% {
    transform: translate(0, 0) scale(0.2);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  75% {
    opacity: 0.3;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1);
    opacity: 0;
  }
}

/* Same palette and period as the ring, so every particle carries the colour
   the gradient has at its own angle. */
@keyframes particle-hue {
  0% {
    background-color: #2563eb;
  }
  25% {
    background-color: #38bdf8;
  }
  50% {
    background-color: #6366f1;
  }
  75% {
    background-color: #38bdf8;
  }
  100% {
    background-color: #2563eb;
  }
}

.qa .particle,
.qa .spinring,
.is-paused .particle,
.is-paused .spinring {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .particles {
    display: none;
  }
  .spinring {
    animation: none;
  }
}

.aiapp {
  position: relative;
  z-index: 1;
  border: 0;
  background: var(--white);
  border-radius: 1.95rem;
  padding: 1.5rem 1.4rem;
}

.aiapp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.aiapp__search {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--muted);
}

.aiapp__search span {
  position: relative;
  padding-right: 2px;
}

.aiapp__search span::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 1px;
  bottom: 1px;
  width: 1.5px;
  background: var(--cta);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

.qa .aiapp__search span::after,
.is-paused .aiapp__search span::after {
  animation-play-state: paused;
}

.aiapp__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.aiapp__title svg {
  width: 16px;
  height: 16px;
  color: var(--cta);
}

.aiapp__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

.dot--green {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 158, 90, 0.18);
}

.aiapp__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.2rem;
  border-bottom: 1px solid var(--line);
}

.aiapp__nm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.aiapp__nm svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.aiapp__st {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: #15703f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aiapp__count {
  padding: 1.35rem 0.2rem 1.2rem;
  text-align: center;
}

.aiapp__count b {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cta);
  font-variant-numeric: tabular-nums;
}

.aiapp__count span {
  display: block;
  margin-top: 0.3rem;
  font-size: 12.5px;
  color: var(--muted);
}

.aiapp__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background-image: linear-gradient(180deg, var(--cta-top) 0%, var(--cta) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 22px -10px rgba(37, 99, 235, 0.6);
}

.aiapp__btn svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------------------
   Community wall
   --------------------------------------------------------------------------- */

.wall {
  columns: 1;
  column-gap: 0.9rem;
  max-width: 62rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .wall {
    columns: 3;
    column-gap: 1.1rem;
  }
}

@media (min-width: 1024px) {
  .wall {
    columns: 4;
  }
}

.cw-post {
  break-inside: avoid;
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .cw-post {
    margin-bottom: 1.1rem;
  }
}

.cw-post img {
  display: block;
  width: 100%;
}

.wall__disclaim {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Host
   --------------------------------------------------------------------------- */

.host {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .host {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: center;
  }
}

.host__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
  max-width: 26rem;
  margin: 0 auto;
  width: 100%;
  /* the shadow lives on the image itself, so the float card is not clipped */
  box-shadow: none;
}

.host__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}

.host__float {
  position: absolute;
  right: -10px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
}

@media (min-width: 1024px) {
  .host__float {
    right: -24px;
  }
}

.host__float b {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cta);
}

.host__float span {
  font-size: 12px;
  line-height: 1.35;
  color: var(--slate);
}

.host__copy {
  max-width: 38rem;
  text-align: left;
}

.host__copy .h-section {
  margin-top: 1rem;
}

.host__copy .body {
  margin-top: 1.1rem;
}

/* Signed off by hand, the way you close a letter. The face is a fine pen
   script, so it needs a larger point size than a normal font to read right. */
.host__signature {
  margin-top: 1.5rem;
  font-family: var(--font-sig);
  font-weight: 400;
  font-size: clamp(52px, 5vw, 62px);
  line-height: 1;
  color: var(--cta);
}

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.faq {
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.faq__item {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__plus {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-soft);
  transition: transform 0.25s ease;
}

.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-ink);
  transform: translate(-50%, -50%);
}

.faq__plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__plus {
  transform: rotate(45deg);
}

.faq__item p {
  padding: 0 1.35rem 1.2rem;
  font-size: 15px;
  line-height: 1.65;
  color: var(--slate);
}

/* ---------------------------------------------------------------------------
   Final
   --------------------------------------------------------------------------- */

.final {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.final .lead {
  margin: 1.1rem auto 0;
  max-width: 37rem;
}

.final .btn {
  margin-top: 1.75rem;
}

.final__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.75rem;
  margin-top: 1.5rem;
  font-size: 13.5px;
  font-weight: 500;
  color: #aebbce;
}

.final__trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.final__trust svg {
  width: 14px;
  height: 14px;
  color: #7fa7f0;
}

/* ---------------------------------------------------------------------------
   Final CTA: a contained card sitting on the live call grid, square corners,
   with slow particles drifting up through the section behind it.
   --------------------------------------------------------------------------- */

/* Particle layer, clipped by the card it lives in. */
.rise {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.rise span {
  position: absolute;
  bottom: -26px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 var(--glow) var(--c);
  opacity: 0;
  animation: rise var(--dur) linear infinite;
  /* negative delay: the field is already populated on the first frame instead
     of starting empty and filling in over the next fifteen seconds */
  animation-delay: calc(var(--delay) * -1);
}

@keyframes rise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.7);
    opacity: 0;
  }
  14% {
    opacity: var(--op);
  }
  76% {
    opacity: var(--op);
  }
  100% {
    transform: translate3d(var(--dx), calc(var(--travel) * -1), 0) scale(1.1);
    opacity: 0;
  }
}

.qa .rise span,
.is-paused .rise span {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .rise {
    display: none;
  }
}

.finalcard {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
  border-radius: var(--radius-md);
  background-color: #0a1b40;
  background-image: url("/assets/img/call-grid.webp");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  box-shadow: var(--shadow-float);
}

/* Scrim over the photo so the copy keeps its contrast, plus the blue wash
   the navy sections used to have. */
.finalcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(75% 60% at 50% 0%, rgba(37, 99, 235, 0.38), transparent 66%),
    linear-gradient(180deg, rgba(5, 14, 38, 0.58), rgba(5, 14, 38, 0.8));
}

/* The copy is a plain block, so it needs its own layer to sit above the
   absolutely positioned particles. */
.finalcard .final {
  position: relative;
  z-index: 1;
}

.finalcard .h-section {
  color: #fff;
}

.finalcard .lead {
  color: #c3cddf;
}

.finalcard .hl {
  box-shadow: 0 14px 30px -12px rgba(37, 99, 235, 0.6);
}


/* ===========================================================================
   THANK YOU PAGE
   Same tokens and the same white card language as the opt in, with the
   components this page needs on top: confirmation badge, video players,
   the seat card with its calendar links, the checklist, the reasons row
   and the Head Start Pack offer.
   =========================================================================== */

.ty-hero {
  padding-top: 2rem;
  padding-bottom: 0;
  text-align: center;
}

@media (min-width: 768px) {
  .ty-hero {
    padding-top: 3rem;
  }
}

/* The video card and the seat card are one continuous instruction, so this
   join is tighter than the normal section rhythm. */
#steps {
  padding-top: 2.75rem;
}

@media (min-width: 768px) {
  #steps {
    padding-top: 3.25rem;
  }
}

.ty-wrap {
  max-width: 44rem;
  margin: 0 auto;
}

/* Confirmation badge */

.ty-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1rem 0.4rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: #146b3d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ty-ok i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}

.ty-ok svg {
  width: 12px;
  height: 12px;
}

.ty-hero .h-display {
  margin-top: 1.1rem;
}

.ty-hero .lead {
  margin: 1.25rem auto 0;
  max-width: 36rem;
  text-wrap: pretty;
}

/* Video player: poster, play button, caption strip */

.vid {
  position: relative;
  max-width: 44rem;
  margin: 2.25rem auto 0;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.vid__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  cursor: pointer;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(37, 99, 235, 0.18), transparent 70%),
    linear-gradient(180deg, #16305d 0%, #0a1b3c 100%);
}

.vid__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* With a real frame behind it the grid goes, and a light scrim keeps the
   play button readable over the picture. */
.vid__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vid__frame--poster::after {
  background-image: none;
  background:
    radial-gradient(50% 55% at 50% 45%, rgba(6, 14, 32, 0.42), transparent 72%),
    linear-gradient(180deg, rgba(6, 14, 32, 0.28), rgba(6, 14, 32, 0.12) 45%, rgba(6, 14, 32, 0.3));
}

.vid__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--cta-top), var(--cta));
  color: #fff;
  box-shadow:
    0 0 0 10px rgba(255, 255, 255, 0.08),
    0 18px 40px -14px rgba(37, 99, 235, 0.9);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.vid__frame:hover .vid__play {
  transform: translate(-50%, -50%) scale(1.06);
}

.vid__play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.vid__cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--slate);
  text-align: center;
}

.vid__cap > span {
  text-wrap: pretty;
}

.vid__cap svg {
  width: 15px;
  height: 15px;
  color: var(--cta);
  flex: none;
}

/* Seat card */

.seat {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  text-align: left;
}

.seat__head {
  position: relative;
  padding: 1.6rem 1.5rem 1.5rem;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(160deg, var(--cta-top) 0%, var(--cta-2) 100%);
  color: #fff;
  overflow: hidden;
}

.seat__head::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(250deg, #000, transparent 62%);
  mask-image: linear-gradient(250deg, #000, transparent 62%);
}

.seat__lab {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.seat__day {
  position: relative;
  z-index: 1;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.seat__time {
  position: relative;
  z-index: 1;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.seat__body {
  padding: 1.4rem 1.35rem 1.5rem;
}

.seat__body h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.seat__body > p {
  margin-top: 0.3rem;
  font-size: 14px;
  color: var(--muted);
}

.cal {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.cal a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.18s ease,
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease;
}

.cal a:hover {
  background: var(--white);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.cal svg {
  flex: none;
}

.cal__ic {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

/* the Outlook mark is wider than it is tall */
.cal__ic--wide {
  width: 23px;
}

.cal__go {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--muted);
}

/* Numbered checklist card */

.todo {
  max-width: 34rem;
  margin: 1.25rem auto 0;
  padding: 1.5rem 1.35rem;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
  text-align: left;
}

.todo > h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}

.todo ol {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.todo li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0.85rem;
  align-items: start;
}

.todo li > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--cta-top), var(--cta));
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.8);
}

.todo strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}

.todo li > div > span {
  display: block;
  margin-top: 0.15rem;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate);
  text-wrap: pretty;
}

.note {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.3rem;
  padding: 0.95rem 1rem;
  border: 1.5px dashed rgba(30, 158, 90, 0.55);
  border-radius: var(--radius-sm);
  background: rgba(230, 246, 236, 0.55);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate);
  text-wrap: pretty;
}

.note b {
  color: #146b3d;
}

.note i {
  font-style: normal;
  font-size: 17px;
  line-height: 1;
  text-align: center;
}

/* Small optional strip that points down to the offer */

.teaser {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 34rem;
  margin: 1.25rem auto 0;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
  text-align: left;
}

@media (min-width: 620px) {
  .teaser {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }

  .teaser__txt {
    padding-right: 0.5rem;
  }
}

.teaser__txt {
  flex: 1;
}

.teaser p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate);
  text-wrap: pretty;
}

.teaser p b {
  color: var(--ink);
}

.teaser .btn {
  min-height: 46px;
  padding: 0.5rem 1.1rem;
  flex: none;
}

.teaser .btn__main {
  font-size: 15px;
}

/* Why Wednesday matters: three reasons */

.reasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  max-width: 62rem;
  margin: 2.5rem auto 0;
}

@media (min-width: 900px) {
  .reasons {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.reason {
  text-align: center;
}

.reason__ic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-float);
  color: var(--cta);
}

.reason__ic svg {
  width: 34px;
  height: 34px;
}

.reason__ic b {
  position: absolute;
  right: -2px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--cta-top), var(--cta));
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.9);
}

.reason--green .reason__ic {
  color: var(--green);
}

.reason--green .reason__ic b {
  background: linear-gradient(180deg, #2bb36c, var(--green));
  box-shadow: 0 8px 18px -8px rgba(30, 158, 90, 0.9);
}

.reason h3 {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

.reason p {
  margin: 0.6rem auto 0;
  max-width: 24rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  text-wrap: pretty;
}

.punch {
  max-width: 44rem;
  margin: 2.75rem auto 0;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
  text-align: center;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--slate);
  text-wrap: pretty;
}

.punch b {
  color: var(--ink);
}

/* Head Start Pack */

.pack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  max-width: 40rem;
  margin: 2.25rem auto 0;
}

.pack__item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
  text-align: left;
}

.pack__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--surface);
  font-size: 25px;
  line-height: 1;
}

.pack__item h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.pack__item p {
  margin-top: 0.3rem;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate);
  text-wrap: pretty;
}

.price {
  max-width: 34rem;
  margin: 1.75rem auto 0;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-float);
  text-align: center;
}

.price__ok {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: #146b3d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price__ok svg {
  width: 12px;
  height: 12px;
}

.price__lab {
  margin-top: 1rem;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

.price__row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.5rem;
}

.price__was {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: line-through;
}

.price__now {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
}

.price__save {
  display: inline-flex;
  margin-top: 0.8rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: #146b3d;
  font-size: 13px;
  font-weight: 700;
}

.price .btn {
  width: 100%;
  margin-top: 1.35rem;
}

.price__fine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  font-size: 12.5px;
  color: var(--muted);
}

.price__fine svg {
  width: 13px;
  height: 13px;
  color: var(--green);
}

.price__list {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-align: left;
}

.price__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.6rem;
  align-items: center;
  font-size: 14.5px;
  color: var(--slate);
}

.price__list i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}

.price__list svg {
  width: 11px;
  height: 11px;
}

.decline {
  display: block;
  margin: 1.35rem auto 0;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.vid__embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}