/* ═══════════════════════════════════════════════════════════════════════
   UPtrim — mobile-only overhaul.
   Every rule is inside a max-width media query so desktop stays EXACTLY
   as it is. Linked LAST so specificity wins ties.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   TABLET + PHONE (up to 900px)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* ── Global polish ── */
  html {
    -webkit-text-size-adjust: 100%;      /* no iOS auto-zoom on rotate */
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  .light-mode body {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.55;
  }
  /* Kill the expensive backdrop-filter on mobile — big perf win */
  .light-mode .header,
  .trust-card,
  .bento-card,
  .contact-card,
  .compare-card,
  .waitlist-hero,
  .pc-profile,
  .pc-f,
  .v1-cat,
  .plug-col,
  .plug-perk,
  .c-ship-inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Hide heavy decorative SVGs that clutter small screens */
  .c-deco,
  .c-wm,
  .c-hero-arrow,
  .c-peek {
    display: none !important;
  }

  /* Shrink the curled paper corner fold so it doesn't cover content */
  .c-fold {
    width: 56px !important;
    height: 56px !important;
    opacity: .65;
  }
  .c-fold-label { display: none !important; }

  /* Section padding — tighter but still breathes */
  .page-section { padding: 2.2rem 1rem !important; }
  .c-hero { padding: 3.8rem 0 2.5rem !important; }
  .c-band { padding: 3rem 0 !important; }

  /* ── Header / nav ── */
  .light-mode .header {
    margin-top: 20px !important;
    padding: .55rem .85rem !important;
    background: rgba(242, 232, 207, .97) !important;
  }
  .light-mode .logo { font-size: 1rem !important; }
  .light-mode .btn-cta {
    padding: .55rem .85rem !important;
    font-size: .78rem !important;
    min-height: 40px;
  }
  /* Bigger tap targets in the mobile nav drawer */
  .mobile-nav a,
  .mobile-nav .btn-cta {
    padding: 1rem 1.25rem !important;
    font-size: 1.05rem !important;
    min-height: 52px;
  }

  /* ── Headlines ── */
  h1, .c-display, .sec-head h2 {
    font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
    letter-spacing: -.025em !important;
    line-height: 1.08 !important;
  }
  .sec-head p,
  .c-hero-sub {
    font-size: .98rem !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  /* ── Hero card stack on home — simplify ── */
  .c-stack {
    height: auto !important;
    min-height: 340px;
    margin-top: 2rem;
  }
  .c-stack-card.cs-1 {
    position: relative !important;
    width: 100% !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    animation: none !important;
    margin-bottom: 1rem;
  }
  /* Secondary cards (Alice/memories + 34+ modules) stack below hero card */
  .c-stack-card.cs-2,
  .c-stack-card.cs-3 {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    animation: none !important;
    margin-top: .9rem;
  }

  /* Hero CTAs stack full-width + big tap area */
  .c-hero-cta {
    flex-direction: column !important;
    gap: .7rem !important;
    margin-top: 1.7rem !important;
  }
  .c-hero-cta .c-btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 1rem;
  }
  .c-hero-meta {
    flex-direction: column;
    gap: .35rem !important;
    align-items: flex-start !important;
    font-size: .82rem !important;
  }

  /* Dual sticker pair on hero — stack instead of overlap */
  .c-sticker + .c-sticker {
    display: inline-flex;
    margin-left: 0 !important;
    margin-top: .55rem;
    transform: rotate(2deg) !important;
  }

  /* ── v1.0 "Shipping Now" band ── */
  .c-ship-inner {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
    padding: 2.1rem 1.3rem 1.5rem !important;
  }
  .c-ship-right { grid-template-columns: 1fr 1fr !important; gap: .45rem !important; }
  .c-ship-chip { font-size: .72rem !important; padding: .5rem .6rem !important; }
  .c-ship-cta { width: 100%; justify-content: center; min-height: 52px; }

  /* ── Plug-and-play matrix (product page) ── */
  .plug-matrix { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .plug-col-back, .plug-col-mid, .plug-col-front { transform: none !important; }
  .plug-arrow { display: none !important; }
  .plug-perks { grid-template-columns: 1fr !important; gap: .85rem !important; }

  /* ── Pricing comparison cards — unrotate + stack ── */
  .compare-grid {
    grid-template-columns: 1fr !important;
    gap: 1.8rem !important;
    padding-top: 1.5rem !important;
  }
  .compare-card,
  .compare-card:nth-child(1),
  .compare-card:nth-child(2),
  .compare-card:nth-child(3),
  .compare-card:nth-child(4) {
    transform: none !important;
    padding: 2rem 1.3rem 1.5rem !important;
  }
  .compare-card:hover,
  .compare-card:nth-child(3):hover { transform: translateY(-4px) !important; }

  /* The oversized Pro price was jumbo — tame it */
  .cc-price { font-size: 3.4rem !important; }
  .cc-cur { font-size: 1.3rem !important; }
  .cc-list li:not(.cc-cat):not(.cc-plus) { font-size: .86rem !important; }
  .cc-btn { padding: 1rem !important; font-size: 1rem !important; min-height: 52px; }

  /* ── Home pricing preview tier cards ── */
  .c-tiers { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .c-t,
  .c-t-pro { transform: none !important; padding: 1.5rem !important; }
  .c-t-price { font-size: 2.8rem !important; }
  .c-t-cta { min-height: 52px; font-size: 1rem !important; }

  /* File-upload limits strip — condensed cells */
  .cc-limits, .c-t-limits { padding: .75rem .25rem !important; }
  .cc-limit-v, .c-t-limit-v { font-size: 1.05rem !important; }
  .cc-limit-l, .c-t-limit-l { font-size: .48rem !important; letter-spacing: .1em !important; }

  /* ── v1.0 Manifest grid (product page) ── */
  .v1-manifest { grid-template-columns: 1fr !important; gap: .9rem !important; }
  .v1-cat,
  .v1-cat:nth-child(n) { transform: none !important; }

  /* ── Parental control profile roster (multi-user) ── */
  .pc-roster { grid-template-columns: 1fr !important; gap: 2rem !important; padding-top: 1.4rem !important; }
  .pc-profile,
  .pc-profile:nth-child(n) { transform: none !important; }
  .pc-features { grid-template-columns: 1fr !important; gap: .9rem !important; }
  .pc-f,
  .pc-f:nth-child(n) { transform: none !important; }
  .pc-note p { font-size: 1.1rem !important; }

  /* ── Trust-mode grid (multi-user) ── */
  .trust-grid { grid-template-columns: 1fr 1fr !important; gap: .7rem !important; }
  .trust-card { padding: 1.2rem !important; }
  .trust-card h3 { font-size: 1rem !important; }
  .trust-card p { font-size: .8rem !important; }

  /* Steps track (3 circles with a line between) */
  .steps-track { grid-template-columns: 1fr !important; gap: 1.6rem !important; }
  .steps-track::before { display: none !important; }

  /* Zigzag sections stack vertically */
  .zigzag { grid-template-columns: 1fr !important; padding: 0 1rem !important; }
  .zigzag.zz-rev .zz-visual { order: unset !important; }
  .zz-content { padding: 1.5rem .5rem !important; }
  .zz-visual { padding: 1rem 0 !important; }
  .zz-visual-box { max-width: 100% !important; }

  /* ── Bento grid — all cards full-width single column ── */
  .bento { grid-template-columns: 1fr !important; gap: .75rem !important; }
  .b-span4, .b-span6, .b-span8, .b-span12 { grid-column: auto !important; }
  .bento-card { padding: 1.35rem !important; }
  .bento-card.b-big .b-visual {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 90px !important;
    margin-top: 1rem !important;
  }
  /* Secret Shield full-width card's 2-col split → stacks on phone */
  .bento-card.b-span12 > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  /* ── Contact grid ── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .contact-card { padding: 1.4rem !important; }
  .input, .textarea, .select {
    font-size: 16px !important;   /* ≥ 16px prevents iOS focus-zoom */
    padding: .85rem 1rem !important;
    min-height: 48px;
  }
  .textarea { min-height: 130px !important; }
  .submit-btn { min-height: 52px !important; font-size: 1rem !important; }

  /* Waitlist hero banner stacks */
  .waitlist-hero ul { grid-template-columns: 1fr !important; }
  .waitlist-hero { padding: 1.8rem 1.3rem !important; }
  .waitlist-hero h2 { font-size: 1.5rem !important; }

  /* ── Step dots (3-step How it works) ── */
  .step-dot { width: 52px !important; height: 52px !important; font-size: 1.15rem !important; }

  /* ── Stat strip (pricing bottom) ── */
  .stat-strip { grid-template-columns: 1fr !important; gap: .7rem !important; }
  .stat-card { padding: 1.3rem !important; }

  /* ── FAQ accordion ── */
  .faq-item summary { padding: 1rem 1.1rem !important; font-size: .92rem !important; min-height: 52px; }
  .faq-body { padding: 0 1.1rem 1rem !important; font-size: .88rem !important; }

  /* ── CTA banner — full-width buttons ── */
  .cta-banner { padding: 3rem 1.2rem !important; }
  .cta-actions { flex-direction: column !important; gap: .6rem !important; width: 100%; }
  .cta-actions .btn-cta,
  .cta-actions .btn-cta-lg,
  .cta-actions .btn-ghost {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 1rem !important;
  }

  /* ── Section bridge ornaments — smaller on mobile ── */
  .section-bridge { margin: 1.5rem auto !important; }
  .bridge-icon { font-size: 1.6rem !important; }

  /* ── Chatbot bubble — bottom-right clearance above footer/fold ── */
  #ucb-root { bottom: 14px !important; right: 14px !important; }

  /* ── Footer ── */
  .eb-footer,
  .c-foot {
    flex-direction: column !important;
    text-align: center !important;
    gap: .8rem !important;
    padding: 2rem 1rem !important;
  }
  .eb-footer a,
  .c-foot-links a { padding: .5rem .4rem; min-height: 44px; display: inline-flex; align-items: center; }

  /* ── Hero sticker (terra + live pair) ── */
  .c-sticker { font-size: .62rem !important; padding: .45rem .75rem !important; }

  /* ── TrimScript slot cards ── */
  .ts-card { grid-template-columns: 1fr !important; gap: 1.4rem !important; }
  .ts-slots { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Interactive dashboard card centerpiece ── */
  .c-dash-frame { padding: 0 .5rem !important; }
  .mock-dash-grid { grid-template-columns: 1fr !important; }
  .mock-dash-sidebar { display: none !important; }

  /* Tier-limits strip narrower labels */
  .cc-limit-l, .c-t-limit-l { letter-spacing: .08em !important; font-size: .45rem !important; }

  /* Scroll indicator stripe off on mobile */
  .scroll-prog { display: none !important; }

  /* ── Inline 2-col grids peppered through the site ── */
  main div[style*="grid-template-columns:1fr 1fr"]:not(.ts-slots) {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  main div[style*="grid-template-columns:1fr 1.1fr"],
  main div[style*="grid-template-columns:1fr 1.2fr"],
  main div[style*="grid-template-columns:1fr 1.25fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ── Reduce rotation of ALL cards for calmer scroll on small screens ── */
  .v1-cat, .pc-profile, .pc-f, .compare-card, .c-t, .plug-col, .plug-perk {
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   PHONE ONLY (up to 560px) — tighter, bigger touch targets
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .light-mode body { padding-top: 60px !important; }
  .light-mode .header { margin-top: 14px !important; }

  /* Hero */
  h1.c-display,
  .c-hero h1 {
    font-size: clamp(1.9rem, 9vw, 2.5rem) !important;
  }
  .c-hero-sub { font-size: .95rem !important; }

  /* Trust cards */
  .trust-grid { grid-template-columns: 1fr !important; }
  .trust-card { padding: 1.2rem !important; min-height: auto !important; }

  /* Fold completely off on tiny screens */
  .c-fold { display: none !important; }

  /* Ship band chips single column */
  .c-ship-right { grid-template-columns: 1fr !important; }

  /* File-limits strip gets tight — 1.5rem number is still readable */
  .cc-limit-v, .c-t-limit-v { font-size: .95rem !important; }

  /* Dashboard mock cards can scroll horizontally inside their frame */
  .c-dash-frame { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* TrimScript 2-col slots → 1-col on phone */
  .ts-slots { grid-template-columns: 1fr !important; }

  /* Extra breathing room between stacked tier cards */
  .compare-grid { gap: 2rem !important; }
  .c-tiers { gap: 1.4rem !important; }

  /* Chatbot bubble slightly smaller so it doesn't eat thumb space */
  #ucb-bubble { width: 54px !important; height: 54px !important; font-size: 1.3rem !important; }

  /* Early-bird sticker packs fewer per row */
  .c-mq-item, .c-mq-dot { font-size: .8rem !important; }

  /* Torn-paper top strip shorter */
  .c-desk-strip { height: 54px !important; }

  /* Hero sticker pair full width */
  .c-sticker, .c-sticker + .c-sticker {
    display: flex !important;
    width: 100%;
    justify-content: center;
    margin-left: 0 !important;
    margin-top: .5rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   REDUCED MOTION — respect the user
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01s !important;
    transition-duration: .01s !important;
  }
  .c-live-dot, .c-ship-dot, .cs-lane-dot,
  .plug-core-pulse, .ucb-bubble::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE PERSONALITY — additions injected by mobile.js.
   These give the phone view its own identity, not just a shrunk desktop.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Give the page extra bottom space so the sticky bar never covers content */
  body.is-mobile { padding-bottom: 88px !important; }

  /* ════════════════════════════════════════════════════════════════
     STICKY BOTTOM ACTION BAR
     ════════════════════════════════════════════════════════════════ */
  #m-stickybar {
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 9998;
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--c-paper, #F2E8CF);
    border: 2.5px solid var(--c-ink, #11294A);
    border-radius: 16px;
    box-shadow: 4px 4px 0 var(--c-ink, #11294A), 0 14px 30px rgba(17,41,74,.2);
    transition: transform .32s cubic-bezier(.3,1.4,.5,1), opacity .25s;
  }
  #m-stickybar.m-hidden {
    transform: translateY(calc(100% + 24px));
    opacity: 0;
  }
  .m-sb-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem .7rem;
    border-radius: 10px;
    text-decoration: none;
    font-family: "Outfit", "Plus Jakarta Sans", sans-serif;
    font-weight: 900;
    font-size: .88rem;
    letter-spacing: -.005em;
    min-height: 54px;
    border: 2px solid var(--c-ink, #11294A);
    transition: transform .15s;
  }
  .m-sb-btn:active { transform: scale(.97); }
  .m-sb-primary { background: var(--c-ink, #11294A); color: var(--c-cream, #E8DCBD); }
  .m-sb-primary .m-sb-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #2FA04F; box-shadow: 0 0 6px #2FA04F;
    animation: c-live-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }
  .m-sb-secondary { background: var(--c-mustard, #E8A934); color: var(--c-ink, #11294A); }
  .m-sb-star { color: var(--c-ink, #11294A); font-size: 1rem; }
  .m-sb-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; text-align: left; }
  .m-sb-micro {
    font-family: "JetBrains Mono", monospace;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 2px;
  }
  .m-sb-primary .m-sb-micro { color: #7BE0A8; opacity: 1; }

  /* ════════════════════════════════════════════════════════════════
     JUMP NAV — sticky horizontal pill strip
     ════════════════════════════════════════════════════════════════ */
  #m-jumpnav {
    position: sticky;
    top: 54px;
    z-index: 79;
    background: linear-gradient(
      to bottom,
      var(--c-cream, #E8DCBD) 0%,
      var(--c-cream, #E8DCBD) 85%,
      rgba(232,220,189,0) 100%
    );
    padding: .7rem 0 1rem;
    margin: 0 -1rem .3rem;
    overflow: hidden;
  }
  .m-jn-track {
    display: flex;
    gap: .45rem;
    padding: 0 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-jn-track::-webkit-scrollbar { display: none; }
  .m-jn-pill {
    flex-shrink: 0;
    scroll-snap-align: start;
    font-family: "JetBrains Mono", monospace;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .55rem .9rem;
    background: var(--c-paper, #F2E8CF);
    color: var(--c-ink, #11294A);
    border: 2px solid var(--c-ink, #11294A);
    border-radius: 99px;
    box-shadow: 2px 2px 0 var(--c-ink, #11294A);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s;
    min-height: 40px;
  }
  .m-jn-pill:active,
  .m-jn-pill.m-jn-tap {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--c-ink, #11294A);
    background: var(--c-mustard, #E8A934);
  }

  /* ════════════════════════════════════════════════════════════════
     TIER CARD CAROUSEL — horizontal swipe with snap + dots
     ════════════════════════════════════════════════════════════════ */
  .m-carousel {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 1rem !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1.5rem 1rem 1.2rem !important;
    margin: 0 -1rem;
    scroll-padding: 1rem;
  }
  .m-carousel::-webkit-scrollbar { display: none; }
  .m-carousel > * {
    flex: 0 0 calc(100% - 2.2rem) !important;
    max-width: calc(100% - 2.2rem) !important;
    scroll-snap-align: center;
    transform: none !important;
  }

  .m-car-dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin: .2rem 0 1.4rem;
  }
  .m-car-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    padding: 0;
    background: var(--c-line, #CEC3A8);
    border: 1.5px solid var(--c-ink, #11294A);
    cursor: pointer;
    transition: transform .2s, background .2s;
  }
  .m-car-dot.active {
    background: var(--c-terra, #C9632F);
    transform: scale(1.3);
  }

  /* ════════════════════════════════════════════════════════════════
     CHAPTER PROGRESS DOTS — vertical rail on right edge
     ════════════════════════════════════════════════════════════════ */
  #m-chapdots {
    position: fixed;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 75;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 8px 4px;
    pointer-events: none;
  }
  .m-cd-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(17, 41, 74, .2);
    border: 1.5px solid rgba(17, 41, 74, .45);
    transition: background .3s, transform .3s;
  }
  .m-cd-dot.active {
    background: var(--c-terra, #C9632F);
    border-color: var(--c-ink, #11294A);
    transform: scale(1.25);
  }

  /* ════════════════════════════════════════════════════════════════
     MOBILE WELCOME CARD — hero substitute
     ════════════════════════════════════════════════════════════════ */
  .c-hero.m-hero-hidden {
    display: none !important;
  }
  #m-welcome {
    position: relative;
    margin: 1.3rem 1rem 2rem;
    padding: 2.2rem 1.4rem 1.7rem;
    background: var(--c-paper, #F2E8CF);
    border: 2.5px solid var(--c-ink, #11294A);
    border-radius: 22px;
    box-shadow: 6px 6px 0 var(--c-mustard, #E8A934);
    overflow: visible;
  }
  .m-welc-tape {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    background: #E9F5D9;
    color: #1F5C2E;
    border: 2px solid #1F5C2E;
    font-family: "JetBrains Mono", monospace;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .22em;
    padding: .38rem .95rem;
    box-shadow: 2px 2px 0 #1F5C2E;
    white-space: nowrap;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    z-index: 2;
  }
  .m-welc-live {
    width: 7px; height: 7px; border-radius: 50%;
    background: #2FA04F; box-shadow: 0 0 5px #2FA04F;
    animation: c-live-pulse 1.6s ease-in-out infinite;
  }
  .m-welc-eyebrow {
    font-family: "Caveat", cursive;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-terra, #C9632F);
    text-align: center;
    margin-bottom: .35rem;
  }
  .m-welc-h {
    font-family: "Outfit", sans-serif;
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--c-ink, #11294A);
    letter-spacing: -.035em;
    line-height: 1;
    margin: 0 0 .85rem;
    text-align: center;
  }
  .m-welc-h em {
    font-style: normal;
    color: var(--c-terra, #C9632F);
    background: var(--c-mustard-tint, #F8E3B0);
    padding: 0 .2em;
    border-radius: 8px;
  }
  .m-welc-p {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--c-ink-2, #2A4868);
    margin: 0 0 1.1rem;
    text-align: center;
    font-weight: 500;
  }
  .m-welc-cta {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: 1rem;
  }
  .m-welc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .95rem 1rem;
    border-radius: 12px;
    font-family: "Outfit", sans-serif;
    font-weight: 900;
    font-size: 1rem;
    text-decoration: none;
    border: 2.5px solid var(--c-ink, #11294A);
    min-height: 52px;
    transition: transform .15s, box-shadow .15s;
  }
  .m-welc-btn:active { transform: translate(1px, 1px); }
  .m-welc-primary {
    background: var(--c-ink, #11294A);
    color: var(--c-cream, #E8DCBD);
    box-shadow: 3px 3px 0 var(--c-terra, #C9632F);
  }
  .m-welc-primary:active { box-shadow: 1px 1px 0 var(--c-terra, #C9632F); }
  .m-welc-ghost {
    background: transparent;
    color: var(--c-ink, #11294A);
    box-shadow: 3px 3px 0 var(--c-sage, #4A98DE);
  }
  .m-welc-ghost:active { box-shadow: 1px 1px 0 var(--c-sage, #4A98DE); }

  .m-welc-quick {
    display: flex;
    gap: .4rem;
    padding-top: .9rem;
    border-top: 2px dashed var(--c-line, #CEC3A8);
    justify-content: center;
    flex-wrap: wrap;
  }
  .m-welc-chip {
    background: var(--c-cream, #E8DCBD);
    color: var(--c-ink, #11294A);
    border: 1.5px solid var(--c-ink, #11294A);
    border-radius: 99px;
    padding: .4rem .8rem;
    font-family: "JetBrains Mono", monospace;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
    transition: background .15s;
  }
  .m-welc-chip:active {
    background: var(--c-mustard, #E8A934);
  }

  /* ════════════════════════════════════════════════════════════════
     CHATBOT — sit above the sticky bar, not behind it
     ════════════════════════════════════════════════════════════════ */
  body.is-mobile #ucb-root {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.is-mobile #ucb-panel {
    height: calc(100vh - 160px) !important;
  }

  /* Hide the original hero sticker pair on mobile since welcome card owns the show */
  .m-hero-hidden + #m-welcome ~ *,
  body.is-mobile .c-hero-cta { /* belt + suspenders */
    /* keep as-is */
  }
}

/* ─────────────────────────────────────────────────────────────────────
   PHONE ONLY (up to 560px) — tweaks for the mobile personality layer
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .m-welc-h { font-size: 2rem; }
  .m-welc-p { font-size: .88rem; }
  .m-sb-btn { font-size: .82rem; padding: .75rem .55rem; }
  .m-sb-micro { font-size: .46rem; }
  #m-chapdots { right: 5px; gap: 7px; }
  .m-cd-dot { width: 6px; height: 6px; }
  #m-jumpnav { top: 48px; }
  .m-jn-pill { font-size: .65rem; padding: .5rem .75rem; }
}