@layer modules {
  /* Marketing Font */
  .page--surface {
    font-family: "Quicksand", ui-sans-serif, system-ui, sans-serif;
    background: linear-gradient(
      to bottom,
      white 0%,
      color-mix(in srgb, var(--color-sky-50) 70%, var(--color-emerald-50)) 30%,
      var(--color-emerald-50) 60%,
      var(--color-emerald-50) 100%
    );
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* Auth pages - centered, allow scroll for longer content */
  .page--auth {
    min-height: 100vh;
  }

  .page--auth .page-main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  /* Marketing Topbar - cleaner look */
  .page--surface .topbar {
    border-bottom: none;
  }

  .topbar--marketing .topbar__inner {
    justify-content: space-between;
    padding-block: 1rem;
  }

  .topbar--marketing .topbar__brand {
    font-size: 1.25rem;
    gap: 0.375rem;
  }

  .topbar--marketing .topbar__logo {
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }

  .topbar__doodle-link {
    font-family: "Delicious Handrawn", cursive;
    font-size: 1.25rem;
    color: var(--color-emerald-600);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .topbar__doodle-link:hover {
    color: var(--color-emerald-700);
  }

  /* Chat Hero */
  .chat-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-block-size: 100vh;
    padding-block-start: 0;
    padding-block-end: 2rem;
    text-align: center;
    position: relative;
  }

  .chat-hero__title {
    color: var(--color-ink);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-inline-size: 20ch;
    position: relative;
    z-index: 1;
  }

  .chat-hero__subtitle {
    color: var(--color-ink-subtle);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    margin-top: 1rem;
    position: relative;
    z-index: 1;
  }

  /* Chat Demo */
  .chat-demo {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: clamp(2.5rem, 6vw, 4rem);
    max-inline-size: 24rem;
    inline-size: 100%;
    position: relative;
    z-index: 1;
  }

  .chat-row {
    display: flex;
  }

  .chat-row--left {
    justify-content: flex-start;
  }

  .chat-row--right {
    justify-content: flex-end;
  }

  .chat-bubble,
  .chat-typing {
    padding: 0.85rem 1.1rem;
    border-radius: 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    font-weight: 400;
  }

  .chat-bubble {
    max-inline-size: 85%;
    inline-size: fit-content;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }

  .chat-bubble--visible {
    animation: bubble-pop 0.3s ease-out forwards;
  }

  @keyframes bubble-pop {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .chat-row--left .chat-bubble,
  .chat-row--left .chat-typing {
    background: var(--color-slate-200);
    color: var(--color-ink);
    border-bottom-left-radius: 0.25rem;
    text-align: left;
    max-inline-size: 275px;
  }

  @media (min-width: 768px) {
    .chat-row--left .chat-bubble,
    .chat-row--left .chat-typing {
      max-inline-size: 85%;
    }
  }

  .chat-row--left .chat-bubble::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-right-color: var(--color-slate-200);
    border-bottom-color: var(--color-slate-200);
    border-bottom-left-radius: 4px;
  }

  .chat-row--right .chat-bubble,
  .chat-row--right .chat-typing {
    background: var(--color-emerald-500);
    color: white;
    border-bottom-right-radius: 0.25rem;
    text-align: right;
  }

  .chat-row--right .chat-bubble::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color: var(--color-emerald-500);
    border-bottom-color: var(--color-emerald-500);
    border-bottom-right-radius: 4px;
  }

  .chat-bubble [data-chat-demo-target="scrambleWord"] {
    font-weight: 600;
  }

  .chat-bubble__name {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  .chat-bubble--left .chat-bubble__name {
    color: var(--color-sky-600);
  }

  .chat-bubble--right .chat-bubble__name {
    color: rgba(255, 255, 255, 0.85);
  }

  .chat-bubble__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
  }

  .chat-bubble__link:hover {
    opacity: 0.85;
  }

  .chat-bubble__time {
    display: block;
    font-size: 0.65rem;
    opacity: 0.6;
    margin-top: 0.25rem;
  }

  .chat-bubble__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-top: 0.25rem;
  }

  .chat-bubble__meta .chat-bubble__time {
    display: inline;
    margin-top: 0;
  }

  .chat-bubble__check {
    width: 0.7rem;
    height: 0.5rem;
    opacity: 0.7;
  }

  /* Typing Indicator */
  .chat-typing {
    display: flex;
    gap: 0.25rem;
  }

  .chat-typing__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--color-slate-400);
    animation: typing-bounce 1.4s infinite ease-in-out both;
  }

  .chat-row--right .chat-typing__dot {
    background: rgba(255, 255, 255, 0.7);
  }

  .chat-typing__dot:nth-child(1) {
    animation-delay: 0s;
  }

  .chat-typing__dot:nth-child(2) {
    animation-delay: 0.16s;
  }

  .chat-typing__dot:nth-child(3) {
    animation-delay: 0.32s;
  }

  @keyframes typing-bounce {
    0%, 80%, 100% {
      transform: scale(0.8);
      opacity: 0.5;
    }
    40% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* Chat Doodle */
  .chat-doodle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    align-self: flex-end;
    margin-top: -5.5rem;
    margin-inline-end: 1rem;
    color: var(--color-slate-500);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .chat-doodle--visible {
    opacity: 1;
    transform: translateY(0);
  }

  .chat-doodle__arrow {
    inline-size: 2rem;
    block-size: auto;
  }

  .chat-doodle__text {
    font-family: "Delicious Handrawn", cursive;
    font-size: 1.5rem;
    transform: rotate(3deg);
    text-align: right;
  }

  @media (min-width: 768px) {
    .chat-doodle {
      margin-top: -4.5rem;
      margin-inline-end: 2.5rem;
      align-items: center;
    }

    .chat-doodle__text {
      font-size: 2rem;
      text-align: center;
    }
  }

  @media (min-width: 768px) {
    .chat-demo {
      gap: 1.75rem;
      max-inline-size: 40rem;
    }

    .chat-bubble,
    .chat-typing {
      font-size: 1.25rem;
      padding: 1rem 1.25rem;
      font-weight: 400;
    }

    .chat-row--right .chat-bubble {
      inline-size: 422px;
    }

    .chat-bubble__time {
      font-size: 0.7rem;
    }
  }

  /* End Chat Demo */


  .marketing-section {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
  }

  .marketing-section--border {
    border-top: 1px solid var(--color-border);
  }

  .marketing-container {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    margin-inline: auto;
    max-inline-size: 72rem;
    padding-inline: var(--container-padding);
  }

  .marketing-container--narrow {
    max-inline-size: 52rem;
  }

  .marketing-header {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .section-title {
    color: var(--color-ink);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    line-height: 1.2;
  }

  .section-lede {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .hero {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
  }

  @media (min-width: 960px) {
    .hero {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
  }

  .hero__title {
    color: var(--color-ink);
    font-size: clamp(2.5rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .hero__highlight {
    background: linear-gradient(120deg, var(--color-emerald-500), var(--color-sky-700));
    -webkit-background-clip: text;
    color: transparent;
  }

  .hero__lede {
    color: var(--color-ink-subtle);
    font-size: var(--text-lg);
    line-height: 1.6;
  }

  .hero__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
  }

  .hero__stats {
    display: grid;
    gap: var(--block-space);
  }

  @media (min-width: 640px) {
    .hero__stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
  }

  .stat-card__label {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .stat-card__title {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .stat-card__text {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
  }

  .hero__panel {
    position: relative;
  }

  .hero__glow {
    background: radial-gradient(circle at top, var(--color-emerald-100), var(--color-sky-50) 55%, transparent 80%);
    border-radius: var(--radius-3xl);
    filter: blur(28px);
    inset: -1.5rem;
    position: absolute;
  }

  .hero__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
  }

  .hero__card-header {
    border-bottom: 1px solid var(--color-border);
    padding: 1.5rem;
  }

  .hero__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: 1.5rem;
  }

  .hero__card-title {
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-top: 0.5rem;
  }

  .step-item {
    display: flex;
    gap: var(--block-space);
  }

  .step-badge {
    border-radius: var(--radius-lg);
    display: inline-block;
    font-feature-settings: "lnum", "tnum";
    font-variant-numeric: lining-nums tabular-nums;
    font-size: var(--text-sm);
    font-weight: 600;
    flex: 0 0 2.5rem;
    inline-size: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    block-size: 2.5rem;
  }

  .step-badge--emerald {
    background: var(--color-emerald-50);
    border: 1px solid var(--color-emerald-100);
    color: var(--color-emerald-700);
  }

  .step-badge--sky {
    background: var(--color-sky-50);
    border: 1px solid var(--color-sky-200);
    color: var(--color-sky-700);
  }

  .step-badge--slate {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    color: var(--color-slate-700);
  }

  .referral-shell {
    align-items: center;
    background: var(--color-canvas);
    display: flex;
    justify-content: center;
    min-height: 100dvh;
    padding: clamp(2rem, 6vw, 4rem) var(--container-padding);
  }

  .referral-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    inline-size: min(100%, 34rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }

  .step-title {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .step-body {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .feature-grid {
    display: grid;
    gap: var(--block-space);
  }

  @media (min-width: 768px) {
    .feature-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .feature-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: 1.25rem;
  }

  .feature-card__label {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .feature-card__title {
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .feature-card__text {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  /* Demo Sections */
  .demo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: 100vh;
    padding-block: clamp(3rem, 8vw, 6rem);
    padding-inline: var(--container-padding);
  }

  .demo-section--top {
    justify-content: flex-start;
  }

  .demo-section__title {
    font-family: "Delicious Handrawn", cursive;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--color-ink);
    text-align: center;
    margin-bottom: 1.5rem;
  }

  /* Demo Profile Card */
  .demo-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-inline-size: 24rem;
    inline-size: 100%;
    position: relative;
    z-index: 1;
  }

  @keyframes profile-fade-in {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .demo-profile__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

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

  .demo-profile__avatar {
    flex-shrink: 0;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--color-emerald-500), var(--color-sky-500));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .demo-profile__avatar-text {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
  }

  .demo-profile__info {
    flex: 1;
    min-inline-size: 0;
    text-align: left;
  }

  .demo-profile__name {
    color: var(--color-ink);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .demo-profile__tagline {
    color: var(--color-ink-subtle);
    font-size: 0.875rem;
    margin-top: 0.125rem;
  }

  .demo-profile__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--color-slate-50);
    border-radius: var(--radius-lg);
  }

  .demo-profile__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
  }

  .demo-profile__stat-value {
    color: var(--color-ink);
    font-size: 1.25rem;
    font-weight: 700;
  }

  .demo-profile__stat-label {
    color: var(--color-ink-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .demo-profile__services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .demo-profile__tag {
    background: var(--color-emerald-50);
    color: var(--color-emerald-700);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
  }

  .demo-profile__doodle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1rem;
    color: var(--color-slate-500);
    animation: doodle-bounce 2s ease-in-out infinite;
  }

  @keyframes doodle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }

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

  .demo-profile__doodle-arrow {
    inline-size: 2rem;
    block-size: auto;
  }

  .demo-profile__doodle-text {
    font-family: "Delicious Handrawn", cursive;
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.2;
  }

  .demo-profile__doodle-small {
    font-size: 1rem;
    color: var(--color-slate-400);
    white-space: nowrap;
  }

  .demo-profile__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    background: var(--color-sky-50);
    border: 1px solid var(--color-sky-200);
    border-radius: var(--radius-lg);
    color: var(--color-sky-700);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }

  .demo-profile__cta:hover {
    background: var(--color-sky-100);
    transform: translateY(-1px);
  }

  .demo-profile__cta--whatsapp {
    background: #dcfce7;
    border-color: #86efac;
    color: #15803d;
    animation: whatsapp-pulse 2s ease-in-out infinite;
  }

  @keyframes whatsapp-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
      box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
  }

  .demo-profile__cta--whatsapp:hover {
    background: #bbf7d0;
    animation: none;
  }

  .demo-profile__cta--call {
    background: var(--color-emerald-50);
    border-color: var(--color-emerald-200);
    color: var(--color-emerald-700);
  }

  .demo-profile__cta--call:hover {
    background: var(--color-emerald-100);
  }

  .demo-profile__cta-icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  .demo-profile__cta-label {
    font-size: 0.75rem;
    font-weight: 600;
  }

  .demo-profile__footer {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-ink-subtle);
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
  }

  .demo-profile__back {
    margin-top: 0.5rem;
  }

  .demo-profile__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-ink-subtle);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .demo-profile__back-link:hover {
    color: var(--color-ink);
  }

  .demo-profile__back-icon {
    inline-size: 1rem;
    block-size: 1rem;
  }

  @media (min-width: 768px) {
    .demo-profile {
      max-inline-size: 28rem;
    }

    .demo-profile__card {
      padding: 2rem;
    }

    .demo-profile__avatar {
      inline-size: 4rem;
      block-size: 4rem;
    }

    .demo-profile__avatar-text {
      font-size: 1.5rem;
    }

    .demo-profile__name {
      font-size: 1.5rem;
    }

    .demo-profile__tagline {
      font-size: 1rem;
    }
  }

  /* Demo Journey */
  .demo-journey {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    max-inline-size: 28rem;
    inline-size: 100%;
    position: relative;
    z-index: 1;
  }

  .demo-journey__title {
    font-family: "Delicious Handrawn", cursive;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--color-ink);
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .demo-journey__title--visible {
    opacity: 1;
    transform: translateY(0);
  }

  .demo-journey__steps {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
  }

  .demo-journey__step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    position: relative;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .demo-journey__step--visible {
    opacity: 1;
    transform: translateY(0);
  }

  .demo-journey__step--highlight {
    background: linear-gradient(135deg, var(--color-emerald-50), var(--color-sky-50));
    border-color: var(--color-emerald-200);
  }

  .demo-journey__step-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-lg);
  }

  .demo-journey__step-icon svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .demo-journey__step-icon--share {
    background: var(--color-sky-100);
    color: var(--color-sky-600);
  }

  .demo-journey__step-icon--click {
    background: var(--color-violet-100);
    color: var(--color-violet-600);
  }

  .demo-journey__step-icon--track {
    background: var(--color-amber-100);
    color: var(--color-amber-600);
  }

  .demo-journey__step-icon--payout {
    background: var(--color-emerald-100);
    color: var(--color-emerald-600);
  }

  .demo-journey__step-content {
    flex: 1;
    min-inline-size: 0;
  }

  .demo-journey__step-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink);
  }

  .demo-journey__step-desc {
    font-size: 0.875rem;
    color: var(--color-ink-subtle);
    margin-top: 0.125rem;
  }

  .demo-journey__tier-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  .demo-journey__tier-bar {
    flex: 1;
    height: 0.5rem;
    background: var(--color-slate-200);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .demo-journey__tier-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-emerald-400), var(--color-emerald-500));
    border-radius: var(--radius-full);
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .demo-journey__tier-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    white-space: nowrap;
  }

  .demo-journey__payout {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .demo-journey__payout-increment {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-emerald-600);
  }

  .demo-journey__payout-total {
    font-size: 0.875rem;
    color: var(--color-ink-subtle);
  }

  .demo-journey__connector {
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .demo-journey__connector--visible {
    opacity: 1;
  }

  .demo-journey__connector-arrow {
    width: 1.5rem;
    height: 2.5rem;
    color: var(--color-slate-400);
  }

  .demo-journey__doodle {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-slate-500);
    opacity: 0;
    transform: translateX(10px) scale(0.9);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .demo-journey__doodle--visible {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  .demo-journey__doodle--right {
    right: -8rem;
    top: 50%;
    transform: translateY(-50%) translateX(10px) scale(0.9);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .demo-journey__doodle--right.demo-journey__doodle--visible {
    transform: translateY(-50%) translateX(0) scale(1);
  }

  .demo-journey__doodle--left {
    left: -7.5rem;
    top: 50%;
    transform: translateY(-50%) translateX(-10px) scale(0.9);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .demo-journey__doodle--left.demo-journey__doodle--visible {
    transform: translateY(-50%) translateX(0) scale(1);
  }

  .demo-journey__doodle-arrow {
    inline-size: 3.5rem;
    block-size: auto;
  }

  .demo-journey__doodle-text {
    font-family: "Delicious Handrawn", cursive;
    font-size: 1.25rem;
    white-space: nowrap;
  }

  .demo-journey__doodle-text--large {
    font-size: 1.75rem;
    color: var(--color-emerald-600);
  }

  .demo-journey__doodle-sparkle {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    color: var(--color-amber-400);
    animation: sparkle-spin 2s linear infinite;
  }

  @keyframes sparkle-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .demo-journey__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .demo-journey__actions--visible {
    opacity: 1;
    transform: translateY(0);
  }

  .demo-journey__doodle-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-family: "Delicious Handrawn", cursive;
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--color-emerald-600);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .demo-journey__doodle-link:hover {
    color: var(--color-emerald-700);
  }

  .demo-journey__doodle-link-arrow {
    inline-size: 1.5rem;
    block-size: 2.5rem;
  }

  .demo-journey__btn-arrow--left {
    order: -1;
  }

  .demo-journey__back-link {
    font-size: 0.875rem;
    color: var(--color-ink-subtle);
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .demo-journey__back-link:hover {
    color: var(--color-ink);
  }

  /* Hide doodles on mobile - not enough space */
  @media (max-width: 767px) {
    .demo-journey__doodle {
      display: none;
    }
  }

  @media (min-width: 768px) {
    .demo-journey {
      max-inline-size: 32rem;
    }

    .demo-journey__step {
      padding: 1.25rem;
    }

    .demo-journey__step-icon {
      inline-size: 3rem;
      block-size: 3rem;
    }

    .demo-journey__step-icon svg {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }

    .demo-journey__step-title {
      font-size: 1.125rem;
    }

    .demo-journey__payout-increment {
      font-size: 1.5rem;
    }
  }

  /* Demo Dashboard */
  .demo-dashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-inline-size: 26rem;
    inline-size: 100%;
    position: relative;
  }

  /* Text message bubble */
  .demo-dashboard__message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .demo-dashboard__phone--visible {
    opacity: 1;
    transform: translateX(0);
  }

  .demo-dashboard__message-bubble {
    background: var(--color-slate-200);
    color: var(--color-ink);
    padding: 0.85rem 1.1rem;
    border-radius: 1.25rem;
    border-bottom-left-radius: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
    max-inline-size: 16rem;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  .demo-dashboard__message-bubble::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-right-color: var(--color-slate-200);
    border-bottom-color: var(--color-slate-200);
    border-bottom-left-radius: 4px;
  }

  .demo-dashboard__message-time {
    display: block;
    font-size: 0.65rem;
    opacity: 0.6;
    margin-top: 0.25rem;
  }

  .demo-dashboard__message-doodle {
    font-family: "Delicious Handrawn", cursive;
    font-size: 1.1rem;
    color: var(--color-emerald-600);
    padding-left: 0.5rem;
  }

  /* Dashboard Panel */
  .demo-dashboard__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .demo-dashboard__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .demo-dashboard__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    background: linear-gradient(135deg, var(--color-emerald-500), var(--color-sky-500));
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
  }

  .demo-dashboard__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-ink);
  }

  .demo-dashboard__subtitle {
    font-size: 0.75rem;
    color: var(--color-ink-subtle);
  }

  /* New Lead Alert */
  .demo-dashboard__new-lead {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem;
    background: var(--color-emerald-50);
    border: 1px solid var(--color-emerald-200);
    border-radius: var(--radius-lg);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .demo-dashboard__new-lead--visible {
    opacity: 1;
    transform: translateY(0);
  }

  .demo-dashboard__new-lead-badge {
    font-size: 0.5625rem;
    font-weight: 700;
    color: white;
    background: var(--color-emerald-500);
    padding: 0.1875rem 0.375rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .demo-dashboard__new-lead-info {
    flex: 1;
    min-inline-size: 0;
  }

  .demo-dashboard__new-lead-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink);
  }

  .demo-dashboard__new-lead-time {
    font-size: 0.6875rem;
    color: var(--color-ink-subtle);
  }

  .demo-dashboard__new-lead-action {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-emerald-700);
    background: var(--color-emerald-100);
    border: none;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
  }

  /* ROI Stats */
  .demo-dashboard__roi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .demo-dashboard__roi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: var(--radius-lg);
  }

  .demo-dashboard__roi-item--revenue {
    background: var(--color-emerald-50);
  }

  .demo-dashboard__roi-item--cost {
    background: var(--color-slate-100);
  }

  .demo-dashboard__roi-item--profit {
    background: linear-gradient(135deg, var(--color-emerald-100), var(--color-sky-100));
  }

  .demo-dashboard__roi-label {
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .demo-dashboard__roi-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-top: 0.125rem;
  }

  .demo-dashboard__roi-value--pulse {
    animation: roi-pulse 0.6s ease;
  }

  @keyframes roi-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); color: var(--color-emerald-600); }
  }

  .demo-dashboard__roi-detail {
    font-size: 0.5625rem;
    color: var(--color-ink-subtle);
    margin-top: 0.125rem;
  }

  /* Chart */
  .demo-dashboard__chart {
    padding: 0.75rem;
    background: var(--color-slate-50);
    border-radius: var(--radius-lg);
  }

  .demo-dashboard__chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
  }

  .demo-dashboard__chart-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .demo-dashboard__chart-legend {
    display: flex;
    gap: 0.625rem;
  }

  .demo-dashboard__chart-legend-item {
    font-size: 0.5625rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .demo-dashboard__chart-legend-item::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 2px;
  }

  .demo-dashboard__chart-legend-item--leads::before {
    background: var(--color-slate-400);
  }

  .demo-dashboard__chart-legend-item--converted::before {
    background: var(--color-emerald-500);
  }

  .demo-dashboard__chart-bars {
    display: flex;
    justify-content: space-between;
    gap: 0.375rem;
    height: 4rem;
  }

  .demo-dashboard__chart-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .demo-dashboard__chart-day span {
    font-size: 0.5625rem;
    color: var(--color-ink-muted);
  }

  .demo-dashboard__chart-bar-group {
    flex: 1;
    display: flex;
    gap: 2px;
    align-items: flex-end;
    width: 100%;
  }

  .demo-dashboard__chart-bar {
    flex: 1;
    height: var(--bar-height, 50%);
    border-radius: 2px;
    transition: height 0.5s ease;
  }

  .demo-dashboard__chart-bar--leads {
    background: var(--color-slate-300);
  }

  .demo-dashboard__chart-bar--today {
    background: var(--color-slate-400);
  }

  .demo-dashboard__chart-bar--converted {
    background: var(--color-emerald-500);
  }

  /* Affiliates */
  .demo-dashboard__affiliates {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .demo-dashboard__affiliates-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .demo-dashboard__affiliate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-slate-50);
    border-radius: var(--radius-lg);
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  .demo-dashboard__affiliate--highlight {
    background: var(--color-emerald-50);
    box-shadow: 0 0 0 2px var(--color-emerald-200);
  }

  .demo-dashboard__affiliate-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    background: var(--color-sky-100);
    color: var(--color-sky-700);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  .demo-dashboard__affiliate-avatar--jessica {
    background: var(--color-emerald-100);
    color: var(--color-emerald-700);
  }

  .demo-dashboard__affiliate-info {
    flex: 1;
    min-inline-size: 0;
  }

  .demo-dashboard__affiliate-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink);
  }

  .demo-dashboard__affiliate-stats {
    font-size: 0.625rem;
    color: var(--color-ink-subtle);
  }

  .demo-dashboard__affiliate-stats strong {
    color: var(--color-emerald-600);
  }

  .demo-dashboard__affiliate-earnings {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
  }

  .demo-dashboard__affiliate-paid {
    font-size: 0.625rem;
    color: var(--color-ink-muted);
  }

  .demo-dashboard__affiliate-badge {
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--color-emerald-700);
    background: var(--color-emerald-100);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-full);
  }

  /* Doodle */
  .demo-dashboard__doodle {
    display: flex;
    justify-content: center;
    color: var(--color-emerald-600);
    margin-top: 0.5rem;
  }

  .demo-dashboard__doodle-text {
    font-family: "Delicious Handrawn", cursive;
    font-size: 1.75rem;
  }

  .demo-dashboard__doodle-highlight {
    display: inline-block;
    font-weight: 700;
  }

  .demo-dashboard__doodle-highlight--pulse {
    animation: doodle-highlight-pulse 1s ease-in-out 2;
  }

  @keyframes doodle-highlight-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.1);
    }
  }

  @media (min-width: 768px) {
    .demo-dashboard {
      max-inline-size: 30rem;
    }

    .demo-dashboard__message-bubble {
      max-inline-size: 18rem;
    }

    .demo-dashboard__panel {
      padding: 1.5rem;
      gap: 1.25rem;
    }

    .demo-dashboard__roi-value {
      font-size: 1.375rem;
    }

    .demo-dashboard__doodle-text {
      font-size: 2rem;
    }
  }

  /* CTA Section */
  .demo-section--center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-block-size: auto;
    padding: 2rem 1.5rem 3rem;
  }

  @media (min-width: 768px) {
    .demo-section--center {
      min-block-size: 80vh;
    }
  }

  .demo-cta {
    text-align: center;
    max-inline-size: 32rem;
  }

  .demo-cta__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .demo-cta__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-ink-subtle);
    margin-top: 1rem;
  }

  .demo-cta__doodle-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    font-family: "Delicious Handrawn", cursive;
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--color-emerald-600);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .demo-cta__doodle-link:hover {
    color: var(--color-emerald-700);
  }

  .demo-cta__doodle-arrow {
    inline-size: 2.5rem;
    block-size: 1.5rem;
  }

  /* Marketing page form styles */
  .page--surface .marketing-section {
    padding-block: 2rem 4rem;
  }

  .page--surface .marketing-header {
    text-align: center;
    margin-bottom: 2rem;
  }

  .page--surface .marketing-header .eyebrow {
    font-family: "Delicious Handrawn", cursive;
    font-size: 1.25rem;
    color: var(--color-emerald-600);
    text-transform: none;
    letter-spacing: 0;
  }

  .page--surface .marketing-header .title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 0.5rem;
  }

  .page--surface .marketing-header .lede {
    font-size: 1.1rem;
    color: var(--color-ink-subtle);
    margin-top: 0.75rem;
  }

  .page--surface .card {
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
  }

  .page--surface .btn--primary {
    background: var(--color-emerald-500);
  }

  .page--surface .btn--primary:hover {
    background: var(--color-emerald-600);
  }

  /* Footer flows from gradient */
  .page--surface .site-footer {
    background: transparent;
    margin-top: 0;
    border-top: none;
  }

  .page--surface .page-main {
    background: transparent;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Auth shell (login/signup) */
  .page--surface .auth-shell {
    background: transparent;
    padding-block: 0;
  }

  @media (min-width: 640px) {
    .page--surface .auth-shell {
      padding-block: 2rem 4rem;
    }
  }

  .page--auth .auth-shell {
    /* padding handled by auth.css */
  }

  /* About Page */
  .about-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 0 clamp(2rem, 4vw, 3rem);
  }

  .about-hero__title {
    color: var(--color-ink);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-inline-size: 20ch;
  }

  .about-hero__subtitle {
    color: var(--color-ink-subtle);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    line-height: 1.6;
    margin-top: 1.25rem;
    max-inline-size: 42ch;
  }

  /* About Problem */
  .about-problem {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    padding-block: clamp(2rem, 4vw, 3rem);
    max-inline-size: 60rem;
    margin-inline: auto;
  }

  @media (min-width: 768px) {
    .about-problem {
      grid-template-columns: 1.2fr 0.8fr;
      align-items: center;
    }
  }

  .about-problem__text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .about-problem__text p {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.7;
  }

  .about-problem__callout {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .about-problem__callout-stat {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    background: linear-gradient(120deg, var(--color-emerald-500), var(--color-sky-700));
    -webkit-background-clip: text;
    color: transparent;
    line-height: 1;
  }

  .about-problem__callout-label {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.4;
  }

  /* About Steps */
  .about-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-block: clamp(2rem, 4vw, 3rem);
  }

  .about-steps__header {
    text-align: center;
  }

  .about-steps__title {
    font-family: "Delicious Handrawn", cursive;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--color-ink);
  }

  .about-steps__cards {
    display: grid;
    gap: var(--block-space);
    inline-size: 100%;
    max-inline-size: 56rem;
  }

  @media (min-width: 768px) {
    .about-steps__cards {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .about-steps__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .about-steps__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-lg);
  }

  .about-steps__icon svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .about-steps__icon--sky {
    background: var(--color-sky-100);
    color: var(--color-sky-600);
  }

  .about-steps__icon--amber {
    background: var(--color-amber-100);
    color: var(--color-amber-600);
  }

  .about-steps__icon--emerald {
    background: var(--color-emerald-100);
    color: var(--color-emerald-600);
  }

  .about-steps__card-title {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .about-steps__card-desc {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  /* About Values */
  .about-values {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-block: clamp(2rem, 4vw, 3rem);
  }

  .about-values__header {
    text-align: center;
  }

  .about-values__title {
    color: var(--color-ink);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    line-height: 1.2;
  }

  .about-values__grid {
    display: grid;
    gap: var(--block-space);
    inline-size: 100%;
    max-inline-size: 40rem;
  }

  @media (min-width: 640px) {
    .about-values__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .about-values__item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .about-values__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-lg);
    background: var(--color-emerald-50);
    color: var(--color-emerald-600);
  }

  .about-values__icon svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .about-values__item-title {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .about-values__item-desc {
    color: var(--color-ink-subtle);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-top: 0.125rem;
  }

  /* Scroll Reveal animations */
  [data-scroll-reveal-target="item"] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  [data-scroll-reveal-target="item"].--revealed {
    opacity: 1;
    transform: translateY(0);
  }

  [data-scroll-reveal-target="item"]:nth-child(2) {
    transition-delay: 0.1s;
  }

  [data-scroll-reveal-target="item"]:nth-child(3) {
    transition-delay: 0.2s;
  }

  [data-scroll-reveal-target="item"]:nth-child(4) {
    transition-delay: 0.3s;
  }

  .page--surface .auth-shell .eyebrow--accent {
    font-family: "Delicious Handrawn", cursive;
    font-size: 1.25rem;
    color: var(--color-emerald-600);
    text-transform: none;
    letter-spacing: 0;
  }

  .page--surface .auth-shell .title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .page--surface .auth-shell .lede {
    font-size: 1rem;
    color: var(--color-ink-subtle);
  }

  .page--surface .auth-card {
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    border: none;
  }

  .page--surface .auth-shell .btn--primary {
    background: var(--color-emerald-500);
  }

  .page--surface .auth-shell .btn--primary:hover {
    background: var(--color-emerald-600);
  }
}