:root {
      --bg: #fafaf7;
      --surface: #ffffff;
      --surface-tint: #f3f1ec;
      --ink: #15140f;
      --ink-soft: #4a4943;
      --ink-faint: #807d74;
      --rule: #e7e4dc;
      --accent: #c2410c;            /* warm terracotta */
      --accent-soft: #fde8d5;
      --code-bg: #14130f;
      --code-ink: #ece7dc;
      --code-comment: #807d74;
      --code-string: #f0a771;
      --code-keyword: #b8c8ff;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 17px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a { color: inherit; text-decoration: none; }
    a:hover { color: var(--accent); }

    .wrap {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* ─── nav ─────────────────────────────────────────────── */
    nav {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: saturate(180%) blur(12px);
      -webkit-backdrop-filter: saturate(180%) blur(12px);
      background: rgba(250, 250, 247, 0.78);
      border-bottom: 1px solid transparent;
      transition: border-color .2s ease;
    }
    nav.scrolled { border-bottom-color: var(--rule); }
    nav .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      letter-spacing: -0.01em;
      font-size: 18px;
    }
    .brand-mark {
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
    }
    .brand-mark svg {
      display: block;
      width: 28px;
      height: 28px;
    }
    .nav-links {
      display: flex;
      gap: 28px;
      align-items: center;
      font-size: 15px;
      color: var(--ink-soft);
    }
    .nav-links a:hover { color: var(--ink); }
    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: var(--ink);
      color: #fff !important;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 500;
      transition: background .15s ease;
    }
    .nav-cta:hover { background: #000; color: #fff !important; }
    @media (max-width: 720px) {
      .nav-links a:not(.nav-cta) { display: none; }
    }

    /* ─── hero ────────────────────────────────────────────── */
    .hero {
      padding: 96px 0 80px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: var(--accent-soft);
      color: var(--accent);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 28px;
    }
    .eyebrow .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }
    h1 {
      font-family: 'Newsreader', serif;
      font-weight: 500;
      font-size: clamp(40px, 7vw, 76px);
      line-height: 1.04;
      letter-spacing: -0.025em;
      margin: 0 0 24px;
      max-width: 14ch;
    }
    h1 em {
      font-style: italic;
      color: var(--accent);
    }
    .hero p.lede {
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.5;
      color: var(--ink-soft);
      max-width: 56ch;
      margin: 0 0 36px;
    }
    .hero-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px;
      border-radius: 999px;
      font-weight: 500;
      font-size: 15px;
      transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
    }
    .btn-primary {
      background: var(--ink);
      color: #fff !important;
    }
    .btn-primary:hover { background: #000; color: #fff !important; transform: translateY(-1px); }
    .btn-secondary {
      background: transparent;
      color: var(--ink) !important;
      border: 1px solid var(--rule);
    }
    .btn-secondary:hover { border-color: var(--ink); color: var(--ink) !important; }

    /* ─── hero illustration: animated phone mockup ────────── */
    .chat-preview {
      margin: 56px auto 48px;
      max-width: 380px;
    }
    .phone-frame {
      background: #1a1a17;
      border-radius: 40px;
      padding: 10px;
      box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 28px 60px -22px rgba(15,15,10,.28),
        0 4px 12px rgba(15,15,10,.06);
      position: relative;
    }
    .phone-frame::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 96px;
      height: 22px;
      background: #1a1a17;
      border-radius: 0 0 12px 12px;
      z-index: 2;
    }
    .phone-screen {
      background: var(--surface-tint);
      border-radius: 32px;
      padding: 38px 16px 22px;
      min-height: 560px;
      overflow: hidden;
    }
    .phone-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 4px 4px 16px;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 18px;
    }
    .phone-avatar {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
    }
    .phone-avatar svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    .phone-id .phone-name {
      font-weight: 600;
      font-size: 16px;
      color: var(--ink);
      line-height: 1.1;
      margin-bottom: 2px;
    }
    .phone-id .phone-status {
      font-size: 13px;
      color: var(--ink-faint);
      line-height: 1;
    }
    .chat-stream {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .chat-msg {
      max-width: 78%;
      padding: 10px 14px;
      border-radius: 18px;
      font-size: 14.5px;
      line-height: 1.45;
      opacity: 0;
      transform: translateY(10px);
      animation: chatMsgIn .45s ease-out forwards;
      animation-delay: var(--delay, 0s);
    }
    .chat-msg.you {
      align-self: flex-end;
      background: #dcf2c4;
      color: var(--ink);
      border-bottom-right-radius: 6px;
    }
    .chat-msg.them {
      align-self: flex-start;
      background: var(--surface);
      color: var(--ink);
      border-bottom-left-radius: 6px;
    }
    .chat-msg .dot {
      color: var(--accent);
      margin-right: 4px;
    }
    @keyframes chatMsgIn {
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .chat-msg {
        animation: none;
        opacity: 1;
        transform: none;
      }
    }

    /* ─── sections ────────────────────────────────────────── */
    section { padding: 96px 0; }
    section.tinted { background: var(--surface-tint); }

    .section-eyebrow {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }
    h2 {
      font-family: 'Newsreader', serif;
      font-weight: 500;
      font-size: clamp(32px, 5vw, 48px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin: 0 0 20px;
      max-width: 22ch;
    }
    h2 em { font-style: italic; color: var(--accent); }
    .section-lede {
      font-size: 19px;
      line-height: 1.55;
      color: var(--ink-soft);
      max-width: 60ch;
      margin: 0 0 56px;
    }

    /* ─── feature cards ────────────────────────────────────── */
    .features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    @media (max-width: 860px) {
      .features { grid-template-columns: 1fr; }
    }
    .feature {
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: 18px;
      padding: 28px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .feature:hover {
      transform: translateY(-2px);
      box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 16px 36px -16px rgba(15,15,10,.1);
      border-color: #d8d4ca;
    }
    .feature-icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      background: var(--accent-soft);
      color: var(--accent);
      display: grid; place-items: center;
      margin-bottom: 18px;
    }
    .feature h3 {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin: 0 0 8px;
    }
    .feature p {
      font-size: 15px;
      color: var(--ink-soft);
      margin: 0;
      line-height: 1.5;
    }

    /* ─── architecture diagram ─────────────────────────────── */
    .arch {
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: 22px;
      padding: 40px;
      margin-bottom: 56px;
    }
    @media (max-width: 720px) {
      .arch { padding: 24px; }
    }
    .arch-svg-wrap {
      width: 100%;
      overflow-x: auto;
    }
    .arch svg {
      width: 100%;
      height: auto;
      max-width: 100%;
      display: block;
    }
    .arch text {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      fill: var(--ink);
    }
    .arch text.label-faint { fill: var(--ink-faint); font-size: 11px; }
    .arch text.label-tag { font-weight: 600; font-size: 12px; }
    .arch rect.box {
      fill: var(--surface);
      stroke: var(--rule);
      stroke-width: 1.5;
    }
    .arch rect.box-accent {
      fill: var(--accent-soft);
      stroke: var(--accent);
      stroke-width: 1.5;
    }
    .arch line.flow, .arch path.flow {
      stroke: var(--ink-faint);
      stroke-width: 1.5;
      fill: none;
    }

    /* ─── deep dive ──────────────────────────────────────── */
    .deep {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 56px;
      align-items: start;
    }
    @media (max-width: 860px) {
      .deep { grid-template-columns: 1fr; gap: 32px; }
    }
    .deep-item {
      padding: 28px 0;
      border-top: 1px solid var(--rule);
    }
    .deep-item:first-child { border-top: 0; padding-top: 0; }
    .deep-item h3 {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.015em;
      margin: 0 0 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .deep-item h3 .num {
      font-family: 'Newsreader', serif;
      font-style: italic;
      font-weight: 500;
      color: var(--accent);
      font-size: 18px;
    }
    .deep-item p {
      font-size: 15.5px;
      color: var(--ink-soft);
      margin: 0;
      line-height: 1.55;
    }

    /* ─── code window ───────────────────────────────────── */
    .code {
      background: var(--code-bg);
      color: var(--code-ink);
      border-radius: 14px;
      padding: 0;
      overflow: hidden;
      font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
      font-size: 13px;
      box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 16px 40px -16px rgba(15,15,10,.18);
      position: sticky;
      top: 88px;
    }
    @media (max-width: 860px) {
      .code { position: static; }
    }
    .code-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: rgba(255,255,255,.03);
      border-bottom: 1px solid rgba(255,255,255,.06);
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: var(--code-comment);
    }
    .code-head .dots {
      display: flex; gap: 6px;
    }
    .code-head .dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(255,255,255,.12);
    }
    .code-body {
      padding: 18px 20px;
      line-height: 1.65;
      overflow-x: auto;
      white-space: pre;
    }
    .c-c { color: var(--code-comment); font-style: italic; }
    .c-k { color: var(--code-keyword); }
    .c-s { color: var(--code-string); }
    .c-d { color: #6dd0a8; }

    /* ─── transcript example ───────────────────────────── */
    .transcript {
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: 18px;
      padding: 28px;
      max-width: 720px;
      margin: 0 auto;
    }
    .transcript-line {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 16px;
      padding: 14px 0;
      border-top: 1px solid var(--rule);
      align-items: start;
    }
    .transcript-line:first-child { border-top: 0; padding-top: 0; }
    .transcript-line .who {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .transcript-line .name {
      font-weight: 600;
      font-size: 14px;
    }
    .transcript-line .channel {
      font-size: 11px;
      color: var(--ink-faint);
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .transcript-line .what {
      font-size: 15px;
      line-height: 1.5;
    }
    .transcript-line.rosey .what { color: var(--ink); }
    .transcript-line .what em {
      font-style: italic;
      color: var(--ink-faint);
      font-size: 13px;
    }

    /* ─── self-host CTA ─────────────────────────────────── */
    .selfhost {
      background: var(--ink);
      color: #fff;
      border-radius: 24px;
      padding: 64px 48px;
      text-align: center;
    }
    @media (max-width: 720px) { .selfhost { padding: 40px 24px; } }
    .selfhost h2 {
      color: #fff;
      margin: 0 auto 16px;
      max-width: 18ch;
    }
    .selfhost h2 em { color: #f5b27a; }
    .selfhost p {
      color: #c8c4b9;
      max-width: 50ch;
      margin: 0 auto 36px;
      font-size: 17px;
    }
    .install-strip {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 999px;
      padding: 8px 8px 8px 20px;
      font-family: 'SF Mono', monospace;
      font-size: 14px;
      color: #ece7dc;
      margin-bottom: 28px;
    }
    .install-strip button {
      background: rgba(255,255,255,.1);
      color: #fff;
      border: 0;
      padding: 6px 14px;
      border-radius: 999px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background .15s ease;
    }
    .install-strip button:hover { background: rgba(255,255,255,.16); }
    .selfhost-ctas {
      display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    }
    .selfhost .btn-primary {
      background: #fff;
      color: var(--ink) !important;
    }
    .selfhost .btn-primary:hover { background: #f0ede5; color: var(--ink) !important; }
    .selfhost .btn-secondary {
      color: #fff !important;
      border-color: rgba(255,255,255,.18);
    }
    .selfhost .btn-secondary:hover { border-color: #fff; color: #fff !important; }

    /* ─── get-started: two paths ─────────────────────────── */
    .paths {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      margin-top: 40px;
      align-items: stretch;
    }
    @media (max-width: 900px) {
      .paths { grid-template-columns: 1fr; gap: 20px; }
    }
    .path-card {
      border-radius: 22px;
      padding: 36px;
      display: flex;
      flex-direction: column;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .path-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 18px 40px -18px rgba(15,15,10,.12);
    }
    /* Self-host card — dark, signals "the original" */
    .path-selfhost {
      background: var(--ink);
      color: #fff;
    }
    .path-selfhost h3 { color: #fff; }
    .path-selfhost .path-desc { color: #c8c4b9; }
    .path-selfhost .path-pros li { color: #d8d4ca; }
    .path-selfhost .path-pros li::marker { color: #f5b27a; }
    .path-selfhost .install-strip { margin-top: 8px; }
    .path-selfhost .btn-primary {
      background: #fff;
      color: var(--ink) !important;
    }
    .path-selfhost .btn-primary:hover {
      background: #f0ede5;
      color: var(--ink) !important;
    }
    .path-selfhost .btn-secondary {
      color: #fff !important;
      border-color: rgba(255,255,255,.2);
    }
    .path-selfhost .btn-secondary:hover {
      border-color: #fff;
      color: #fff !important;
    }
    /* Hosted card — light, signals "the new managed path" */
    .path-hosted {
      background: var(--surface);
      border: 1px solid var(--rule);
    }
    .path-hosted h3 { color: var(--ink); }
    .path-hosted .path-desc { color: var(--ink-soft); }
    .path-hosted .path-pros li { color: var(--ink-soft); }
    .path-hosted .path-pros li::marker { color: var(--accent); }

    .path-tag {
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 999px;
      margin-bottom: 16px;
      background: rgba(255,255,255,.08);
      color: #ece7dc;
      border: 1px solid rgba(255,255,255,.12);
      align-self: flex-start;
    }
    .path-tag-accent {
      background: var(--accent-soft);
      color: var(--accent);
      border: 1px solid rgba(216, 122, 70, 0.18);
    }
    .path-card h3 {
      font-size: 26px;
      font-weight: 600;
      letter-spacing: -0.02em;
      margin: 0 0 10px;
    }
    .path-desc {
      font-size: 16px;
      line-height: 1.55;
      margin: 0 0 18px;
    }
    .path-pros {
      list-style: disc;
      padding-left: 20px;
      margin: 0 0 22px;
      font-size: 15px;
      line-height: 1.55;
    }
    .path-pros li { margin-bottom: 6px; }
    .path-pros li:last-child { margin-bottom: 0; }
    .path-ctas {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: auto;
    }

    /* QR sub-block inside the hosted card */
    .hosted-qr {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 22px;
      align-items: center;
      margin-top: auto;
      padding: 20px;
      background: var(--bg);
      border: 1px solid var(--rule);
      border-radius: 16px;
    }
    @media (max-width: 520px) {
      .hosted-qr { grid-template-columns: 1fr; text-align: center; }
    }
    .qr-box {
      width: 180px;
      height: 180px;
      background: #fbf9f4;
      border: 1px solid var(--rule);
      border-radius: 12px;
      display: grid;
      place-items: center;
      padding: 10px;
    }
    @media (max-width: 520px) {
      .qr-box { margin: 0 auto; }
    }
    .qr-box canvas { display: block; max-width: 100%; height: auto; }
    .qr-caption {
      font-size: 14px;
      color: var(--ink-soft);
      margin: 0 0 10px;
    }
    .path-fineprint {
      font-size: 13px;
      color: var(--ink-faint);
      margin: 12px 0 0;
    }
    .path-fineprint a {
      color: var(--ink-soft);
      border-bottom: 1px solid var(--rule);
    }
    .path-fineprint a:hover { color: var(--accent); border-color: var(--accent); }

    /* ─── stack list ────────────────────────────────────── */
    .stack {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 40px;
    }
    @media (max-width: 720px) { .stack { grid-template-columns: repeat(2, 1fr); } }
    .stack-item {
      padding: 18px;
      border: 1px solid var(--rule);
      border-radius: 14px;
      background: var(--surface);
    }
    .stack-item .name {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 4px;
    }
    .stack-item .role {
      color: var(--ink-faint);
      font-size: 13px;
    }

    /* ─── footer ────────────────────────────────────────── */
    footer {
      padding: 48px 0 64px;
      border-top: 1px solid var(--rule);
      color: var(--ink-faint);
      font-size: 14px;
    }
    footer .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }
    footer a:hover { color: var(--ink); }
    footer .links { display: flex; gap: 24px; }

    /* ─── icons ────────────────────────────────────────── */
    .icon { width: 22px; height: 22px; stroke-width: 1.6; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

    /* ─── signup form (hero) ───────────────────────────── */
    .signup-form {
      display: flex;
      gap: 12px;
      max-width: 480px;
      margin: 0 0 8px;
      flex-wrap: wrap;
    }
    .signup-form input[type=email] {
      flex: 1 1 220px;
      min-width: 0;
      padding: 12px 18px;
      border: 1px solid var(--rule);
      border-radius: 999px;
      background: var(--surface);
      font-family: inherit;
      font-size: 15px;
      color: var(--ink);
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .signup-form input[type=email]:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--accent-soft);
    }
    .signup-form button {
      cursor: pointer;
      border: none;
      font-family: inherit;
    }
    .signup-form select {
      flex: 1 1 100%;
      padding: 12px 40px 12px 18px;
      border: 1px solid var(--rule);
      border-radius: 999px;
      background-color: var(--surface);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23807d74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 18px center;
      font-family: inherit;
      font-size: 14.5px;
      color: var(--ink);
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .signup-form select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--accent-soft);
    }
    .signup-form select:has(option[value=""]:checked) {
      color: var(--ink-faint);
    }
    .signup-msg {
      font-size: 14px;
      color: var(--ink-soft);
      min-height: 20px;
      margin: 4px 0 0;
    }
    .signup-msg.error { color: #b91c1c; }
    .signup-msg.success { color: #15803d; }
    .hero-fineprint {
      margin: 6px 0 0;
      font-size: 14px;
      color: var(--ink-faint);
    }
    .hero-fineprint a {
      color: var(--accent);
      border-bottom: 1px solid transparent;
      transition: border-color .15s ease;
    }
    .hero-fineprint a:hover { border-bottom-color: var(--accent); }

    /* Step labels above each form field — makes the two-step flow visible. */
    .signup-step-label {
      flex: 1 1 100%;
      font-size: 13.5px;
      color: var(--ink-soft);
      margin: 6px 0 -2px;
      display: flex;
      align-items: center;
      gap: 8px;
      line-height: 1.4;
    }
    .signup-step-label:first-of-type { margin-top: 0; }
    .signup-step-label .step-num {
      display: inline-grid;
      place-items: center;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
    }
    .signup-step-label .step-optional {
      color: var(--ink-faint);
      font-weight: 400;
    }

    /* ─── mobile polish ───────────────────────────────────
       The page is otherwise mostly fluid (clamp() typography,
       grids that already collapse to 1-col at 900px). These rules
       just tighten vertical rhythm and padding on phone-sized
       viewports so the hero doesn't feel airy and the path cards
       stop truncating their copy. */
    @media (max-width: 720px) {
      .hero { padding: 56px 0 48px; }
      section { padding: 64px 0; }
      .chat-preview { margin: 32px auto 36px; }
      .phone-screen { min-height: auto; padding: 30px 14px 18px; }
      .path-card { padding: 28px 22px; }
      .hosted-qr { padding: 16px; gap: 16px; }
      h2 { font-size: clamp(28px, 5vw, 40px) !important; }
    }
    @media (max-width: 420px) {
      .hero { padding: 40px 0 36px; }
      .chat-preview { margin: 24px auto 28px; max-width: 100%; }
      .path-card { padding: 24px 18px; }
      .signup-form button { flex: 1 1 100%; justify-content: center; }
      .wrap { padding: 0 18px; }
    }