/* Site v11, mobile pass (5 Nov 2026). Phones only: every rule sits inside (max-width: 600px), so tablets and desktops
   draw exactly as before. One file, the same bytes in every page folder (the export keeps one copy), linked last.
   Desktop UI shown on a phone gets its own framing from data attributes the page scripts read (host.js data-mo-m,
   home-v10f.js data-v9-m); this file holds the type, spacing and layout. */
@media (max-width: 600px) {

  /* ---------- 1 · Display type: a phone scale ----------
     Hero lines at 11.2vw (42px at 375, 46px at 430), section lines at 9vw (34px at 375). Leading opens up as the size
     comes down so no line's descenders meet the next line's capitals (Josh: display leading is never touching). */
  html body .v10-h1, html body .x-h1 { font-size: clamp(38px, 11.2vw, 46px) !important; line-height: 1.06 !important; }
  html body .v9e-say, html body .x-h2, html body .v10-does-h, html body .v9e-close-h, html body .a-q, html body .c-case-h,
  html body .z-h, html body .v10-faq-h { font-size: clamp(30px, 9vw, 36px) !important; line-height: 1.1 !important; letter-spacing: -.022em; }
  html body .c-block .x-h2, html body .x-split .x-h2, html body .c-slice-h, html body .x-gh { font-size: clamp(28px, 8.4vw, 34px) !important; line-height: 1.1 !important; }
  html body .v10e-story-h { font-size: clamp(26px, 7.5vw, 30px) !important; line-height: 1.16 !important; }

  /* ---------- 2 · The moments: a card holds its content, not a whole screen ---------- */
  html body .v9e-field { min-height: 0; padding-block: 48px; }

  /* ---------- 3 · Pause buttons: still there (anything that moves for more than five seconds can be stopped), but
     quiet: a small chip in the card's corner with a full 44px target ---------- */
  html body .v9e-pp, html body [data-mo-pause].v9e-pp { width: 44px; height: 44px; right: 6px; bottom: 6px; box-shadow: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .78) 0 15px, rgba(58, 30, 60, .12) 15.5px 16px, transparent 16.5px); }
  html body .v9e-pp svg { width: 12px; height: 12px; }

  /* ---------- Pricing: the two welcome screens, laid out at a phone width (data-fit-m), the badge under the card ---------- */
  .p-win .ka-win { height: 830px; }
  .p-win .v10-wel .rv-wel { width: auto; padding: 28px 24px; }
  .p-win .rv-wel .rv-wt { font-size: 34px; }
  .p-win .rv-wel .rv-begin { width: 100%; }
  .p-win .rv-wel-wrap { padding: 20px 16px 84px; }
  .p-win .p-made { left: 50%; right: auto; bottom: 24px; transform: translateX(-50%); font-size: 16px; padding: 8px 16px; }

  /* ---------- 4 · The founding ladder: one rung per line, its colour, its price and who gets it ---------- */
  html body .z-ladder { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 22px; }
  html body .z-rung { grid-template-columns: 6px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 11px 0; border-top: 1px solid rgba(58, 30, 60, .1); }
  html body .z-rung:last-child { border-bottom: 1px solid rgba(58, 30, 60, .1); }
  html body .z-tile { width: 6px; height: 100%; min-height: 24px; border-radius: 3px; }
  html body .z-rung-p { font-size: 17px; }
  html body .z-rung-l { text-align: right; font-size: 15px; }

  /* ---------- 5 · Pricing's plan table: one plan at a time (page.js adds the switch on phones) ---------- */
  .p-cmp-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 28px; padding: 4px; border-radius: 999px; background: var(--plane, #F4F1F7); }
  .p-cmp-switch button { appearance: none; border: 0; margin: 0; min-height: 44px; border-radius: 999px; background: transparent; color: #4F3B52;
    font: 500 16px/1 "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
  .p-cmp-switch button[aria-pressed="true"] { background: #3A1E3C; color: #F6F3EE; }
  .p-cmp-switch button:focus-visible { outline: 2px solid #8F83D6; outline-offset: 2px; }
  html body .p-cmp[data-show] { margin-top: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding: 4px 20px 8px; border-radius: 24px; background: var(--plane, #F4F1F7); }
  html body .p-cmp[data-show="c1"] { background: linear-gradient(160deg, #E6DEF7 0%, #F0E3F1 60%, #FAE8DC 100%); }
  html body .p-cmp[data-show] .p-cmp-plan, html body .p-cmp[data-show] td { display: none; }
  html body .p-cmp[data-show="c0"] .p-cmp-c0, html body .p-cmp[data-show="c1"] .p-cmp-c1, html body .p-cmp[data-show="c2"] .p-cmp-c2 { display: block; }
  html body .p-cmp[data-show] .p-cmp-plan { grid-column: 1 / -1; grid-row: 1; padding: 22px 0 14px; background: none; border-radius: 0; }
  html body .p-cmp[data-show] .p-cmp-plan .z-plan-price { flex-direction: row; align-items: baseline; gap: 10px; margin-top: 8px; }
  html body .p-cmp[data-show] tbody th { grid-column: 1; grid-row: calc(var(--r) * 1); padding: 14px 0; font-size: 16px; line-height: 1.35; }
  html body .p-cmp[data-show] td { grid-column: 2; grid-row: calc(var(--r) * 1); padding: 14px 0; background: none; border-radius: 0; font-size: 16px; line-height: 1.35; color: #3A1E3C; }
  html body .p-cmp[data-show] td::after { content: none; }
  html body .p-cmp[data-show] tbody th::before { display: block; left: 0; right: -16px; top: 0; }
  html body .p-cmp[data-show] td::before { display: none; }
  html body .p-cmp[data-show] .p-cmp-gap th, html body .p-cmp[data-show] .p-cmp-gap td { margin-top: 0; }
  html body .p-cmp[data-show] .p-cmp-same td { padding-block: 14px; }

  /* ---------- 6 · Comparison tables: the two names ride along at the top of the table instead of repeating in every
     group, and each row is tighter (its line, its hint, then the two answers side by side) ---------- */
  html body .ct-table thead { display: block; position: sticky; top: var(--nav-h, 64px); z-index: 3; margin: 0 -6px; padding: 0 6px; background: #FFFFFF; box-shadow: 0 1px 0 rgba(58, 30, 60, .1); }
  html body .ct-table thead tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
  html body .ct-table thead td.ct-corner { display: none; }
  html body .ct-table thead th { padding: 14px 12px 12px; font-size: 22px; text-align: left; }
  html body .ct--panel thead .ct-us { border-radius: 12px 12px 0 0; }
  html body .ct-gh td { display: none; }
  html body .ct-gh th { padding: 22px 12px 2px; }
  html body .ct-group:first-of-type .ct-gh th { padding-top: 18px; }
  html body .ct-table tbody th { padding: 14px 12px 6px; }
  html body .ct-table td { padding: 8px 12px 10px; }
  html body .ct-table tr + tr { margin-top: 2px; }

  /* ---------- 7 · Targets: the footer's links, the logo and Menu take a 44px press ---------- */
  html body .foot-cols a { padding: 11px 0; }
  html body .foot-cols h2 { margin-bottom: 4px; }
  html body .nav .logo { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  html body .nav .nav-menu { height: 44px; }
  html body .dg-panel .nm-mlist--names a { padding-block: 9px; }

  /* ---------- Home: the Form a client answers, laid out at a phone-ish width (data-v9-m) ---------- */
  .v10-fwin .rv-top { grid-template-columns: minmax(0, 1fr) auto; }
  .v10-fwin .rv-top .rv-saved { display: none; }

  /* ---------- Hero Form windows (Home, Use cases): the steps share one height, the tallest's; on a phone each step sits
     in the middle of it, the way a one-per-screen Form shows it, and answer rows are a little shorter, so a short step
     doesn't leave a band of empty white under its dots ---------- */
  html body .hl-win .ka-slides > .hh-step { align-self: center; }
  html body .hl-win .ka-ballot { gap: 8px; }
  html body .hl-win .ka-ballot > * { height: 52px; min-height: 52px; font-size: 20px; }

}