/* Mobile marketing (design_handoff_mobile_marketing). Loaded only on marketing pages (mobile_chrome).
   The chrome elements are hidden by default and turned on below the 640px breakpoint, so this file
   never changes the desktop rendering. Every value resolves to a cloudbase.css token. */

/* chrome is in the DOM at all widths; keep it out of the way until the breakpoint */
/* NB: hide the send-to-desktop widget by its [data-std] attr, NOT the bare `.std` class — `.std` also
   names the desktop standard-set section's wrapper (marketing.html), and a bare `.std{display:none}`
   here was hiding the whole features section at every width. */
.mbar, .msheet-nav, .site-onphone, [data-std], .pr-mobile, .home-m, .im, .pm, .foot-m { display: none; }

@media (max-width: 640px) {
  /* ---- turn off the desktop nav; the fixed bar replaces it ---- */
  .topbar, .site-foot > .wrap > .foot-links ~ *, .nav-feat-menu { }
  .topbar { display: none !important; }

  /* ---- the fixed top bar ---- */
  .mbar { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 40; align-items: center;
    justify-content: space-between; padding: 13px 22px; background: var(--surface);
    border-bottom: 1px solid var(--line-quiet); }
  .has-mobile-chrome { padding-top: 68px; }
  .mbar-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; padding: 11px 0; min-height: 46px; }
  .mbar-name { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); }
  .mbar-menu { min-width: 46px; min-height: 44px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: var(--surface-quiet); border-radius: 3px; cursor: pointer; }
  .mbar-menu:hover { border-color: var(--line-strong); }
  .mbar-bars { position: relative; width: 16px; height: 9px; display: block; }
  .mbar-bars::before, .mbar-bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--ink-body); }
  .mbar-bars::before { top: 0; } .mbar-bars::after { bottom: 0; }

  /* ---- the full-screen menu sheet ---- */
  body.menu-open { overflow: hidden; }
  .msheet-nav { display: flex; position: fixed; inset: 0; z-index: 60; flex-direction: column;
    background: var(--surface); max-width: 430px; margin: 0 auto; padding: 13px 22px 32px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .msheet-nav[hidden] { display: none; }
  .msheet-nav-head { display: flex; align-items: center; justify-content: space-between; }
  .msheet-nav-label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
  .msheet-nav-x { min-width: 46px; min-height: 44px; background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 14px; color: var(--ink-quiet); text-align: right; }
  .msheet-nav-list { display: flex; flex-direction: column; margin-top: 10px; }
  .msheet-nav-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 16px 0; border-bottom: 1px solid var(--line-quiet); text-decoration: none; }
  .msheet-nav-row:last-child { border-bottom: 0; }
  .msheet-nav-t { font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: -0.015em; color: var(--ink); }
  .msheet-nav-row.here .msheet-nav-t { color: var(--accent); }
  .msheet-nav-h { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); flex: none; }
  .msheet-nav-cta { margin-top: auto; flex: none; padding-top: 28px; }
  .msheet-nav-cta.btn { display: block; text-align: center; padding: 17px 20px; margin-top: auto; border-radius: 3px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

  /* ---- generic page mobile layer: single column, real gutters, readable type ---- */
  body { -webkit-text-size-adjust: 100%; }
  .hero, .wrap, .band, .section, .sec, main, .col2, .duo, .grid, .cards, .panels, .configurator,
  .pricing-grid, .steps, .three, .rows, .container, .mx { max-width: 100% !important; }
  .hero { grid-template-columns: 1fr !important; display: block !important; padding: 30px 22px 38px !important; }
  /* anything laid out in columns collapses to one on a phone */
  [style*="grid-template-columns"], .col2, .duo, .three, .cards, .panels, .grid, .foot-links,
  .pricing-grid, .steps { grid-template-columns: 1fr !important; }
  .col2, .duo, .three, .cards, .panels, .grid { display: block !important; }
  img, svg, table { max-width: 100%; height: auto; }
  /* keep every section within the gutter and stop horizontal scroll */
  section, header, footer, .band, .sec, .wrap, .hero, .cta, .foot { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); box-sizing: border-box; }
  html, body { overflow-x: hidden; }
  /* tap targets — links in prose keep their line, but standalone CTAs get height */
  .btn, .btn-accent, a.btn, button { min-height: 46px; }

  /* ---- "On a phone, on purpose" note ---- */
  .site-onphone { display: block; background: var(--surface-quiet); border-top: 1px solid var(--line); padding: 26px 22px 28px; }
  .site-onphone-label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
  .site-onphone-p { font-family: var(--prose); font-size: 16px; line-height: 1.75; color: var(--ink-body); margin: 10px 0 0; }

  /* ---- mobile footer (navy) — bespoke .foot-m replaces the desktop .wrap wholesale (design footer:
     brand + one-line tagline + five links, two columns, no headers) ---- */
  .site-foot { background: #0d1620; padding: 36px 22px 42px; }
  .site-foot > .wrap { display: none; }
  .foot-m { display: block; }
  .foot-m-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; margin: 0 0 18px; border: 1px solid rgba(255,255,255,.14); background: #e7edfb; }
  .foot-m-brand { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; color: #fff; }
  .foot-m-mark { width: 20px; height: 20px; border-radius: 5px; background: var(--accent); position: relative; flex: none; overflow: hidden; display: inline-block; }
  .foot-m-mark::before { content: ""; position: absolute; background: #fff; border-radius: 3px; width: 8px; height: 5px; left: 7px; top: 6px; }
  .foot-m-mark::after { content: ""; position: absolute; background: #fff; border-radius: 3px; width: 14px; height: 6px; left: 4px; top: 10px; }
  .foot-m-tag { font-family: var(--prose); font-style: italic; font-size: 16px; line-height: 1.8; color: #c3d0e6; margin: 14px 0 26px; text-wrap: pretty; }
  .foot-m-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .foot-m-links a { display: inline-flex; align-items: center; min-height: 46px; padding: 12px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #93a6c4; text-decoration: none; }
  .foot-m-links a:hover { color: #fff; }

  /* ---- send-to-desktop (the mobile primary CTA) ---- */
  [data-std] { display: block; border-top: 1px solid var(--line-quiet); margin-top: 22px; padding-top: 22px; }
  .std-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-quiet); }
  .std-h { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); margin-top: 6px; }
  .std-note { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 8px 0 14px; }
  .std-email { width: 100%; box-sizing: border-box; padding: 15px 14px; font-family: var(--prose); font-size: 17px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--ink); }
  .std-email::placeholder { font-style: italic; color: var(--ink-faint); }
  .std-email:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
  .std-send { width: 100%; margin-top: 10px; padding: 16px 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; border: 0; border-radius: 3px; background: var(--accent); color: #fff; cursor: pointer; }
  .std-send:disabled { background: var(--surface-sunk); color: var(--ink-quiet); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
  .std-anyway { display: inline-flex; align-items: center; min-height: 46px; margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
  .std-sent { border: 1px solid var(--line); border-left: 2px solid var(--ok); background: var(--surface-quiet); border-radius: 0 6px 6px 0; padding: 20px; }
  .std-sent .std-h { font-size: 19px; }

  /* ---- instrument pages: the desktop content is replaced wholesale by the bespoke .im layout
     (design_handoff_mobile_marketing §isFeature) — hero → navy band + pull-quote → moves on 2px ink
     rules → honest limit → send-to-desktop + all-instruments. Each page uses its own desktop wrapper
     class (tm-wrap for most; iv-/fm-/gc-wrap for invoices/formation/ground; .mband for modes), so all
     of them are hidden ≤640px. ---- */
  .tm-wrap, .iv-wrap, .fm-wrap, .gc-wrap, .mband { display: none; }
  .im { display: block; }
  .im-hero { padding: 44px 22px 34px; }
  .im-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-quiet); }
  .im-h1 { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 12px 0 0; text-wrap: pretty; }
  .im-lede { font-family: var(--prose); font-size: 18px; line-height: 1.8; color: var(--ink-body); margin: 16px 0 0; }
  .im-band { background: #0d1620; padding: 36px 22px 40px; }
  .im-b-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); }
  .im-b-h { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.18; letter-spacing: -0.015em; color: #fff; margin: 14px 0 0; text-wrap: pretty; }
  .im-pull { font-family: var(--prose); font-style: italic; font-size: 17px; line-height: 1.8; color: #fff; border-left: 2px solid var(--accent-2); padding-left: 16px; margin: 20px 0 0; }
  .im-moves { padding: 38px 22px 40px; }
  .im-move { border-top: 2px solid var(--ink); padding-top: 14px; margin-top: 20px; }
  .im-moves .im-eyebrow + .im-move { margin-top: 22px; }
  .im-move h4 { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--ink); margin: 0; }
  .im-move p { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 7px 0 0; }
  .im-limit { background: var(--surface-sunk); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px 22px 36px; }
  .im-limit-p { font-family: var(--prose); font-size: 17px; line-height: 1.8; color: var(--ink-body); margin: 10px 0 0; }
  /* the close (design §isFeature): send-to-desktop, a hairline, then the all-instruments link */
  .im-close { padding: 36px 22px 44px; }
  .im-close .std { border-top: 0; margin-top: 0; padding-top: 0; }
  .im-all { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
  .im-close .im-all { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 18px; border-top: 1px solid var(--line-quiet); padding-top: 18px; }
  /* Today's UI mock */
  .im-mock { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
  .im-mock-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; background: var(--surface-quiet); border-bottom: 1px solid var(--line-quiet); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); }
  .im-mrow { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--line-quiet); }
  .im-mrow:last-child { border-bottom: 0; }
  .im-mrow.appt { background: var(--accent-wash); }
  .im-mt { font-family: var(--mono); font-size: 11px; color: var(--ink-quiet); flex: none; }
  .im-mn { flex: 1; min-width: 0; font-family: var(--serif); font-size: 16px; color: var(--ink); }
  .im-mn.done { color: var(--ink-quiet); text-decoration: line-through; }
  .im-mcheck { flex: none; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; }
  .im-mcheck.on { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 11px; }
  .im-mtag { flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px; }
  .im-mstar { flex: none; color: var(--accent); font-size: 15px; }
  .std-wrap { padding: 0 22px 8px; }                      /* the send-to-desktop close follows .im */
  /* Today's bespoke extras (screenshot 164): band paragraph before the pull, a moves headline, the
     sunk "part that makes it work" section holding two paragraphs + the mock, inline send-to-desktop. */
  .im-b-p { font-family: var(--prose); font-size: 17px; line-height: 1.8; color: #c3d0e6; margin: 18px 0 0; }
  .im-moves-h { font-family: var(--serif); font-weight: 600; font-size: 29px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); margin: 6px 0 22px; text-wrap: pretty; }
  .im-part { background: var(--surface-sunk); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 36px 22px 40px; }
  .im-part-h { font-family: var(--serif); font-weight: 600; font-size: 29px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); margin: 6px 0 14px; text-wrap: pretty; }
  .im-part-p { font-family: var(--prose); font-size: 17px; line-height: 1.8; color: var(--ink-body); margin: 0 0 12px; text-wrap: pretty; }
  .im-part-p.quiet { font-size: 16px; color: var(--ink-quiet); margin-bottom: 24px; }
  .im-part .im-mock { margin-top: 4px; }

  /* ---- home (handoff §1): the mobile-only .home-m block IS the hero + Quiet Modes band; hide the
     desktop hero/CTA/context-modes. DOM order then gives hero+quiet -> What's inside -> Made to fit ->
     pricing -> straight answers, exactly the handoff sequence. ---- */
  .home-m { display: block; }
  /* the whole desktop home is replaced by .home-m on mobile (design is bespoke for small screens).
     !important because the generic layer above forces `.hero { display: block !important }` for other
     pages — without it the desktop hero (and its .wsdemo panel) leaks back in below .home-m. */
  .home-flow > .hero, .home-flow > .std-wrap, #cmodes, #standard, #fit, #pricing, .band.sa, .mob-drop, .band.wif { display: none !important; }

  .hm-hero { padding: 34px 22px 8px; }
  .hm-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-quiet); }
  .hm-h1 { font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: 12px 0 0; text-wrap: pretty; }
  .hm-lede { font-family: var(--prose); font-size: 19px; line-height: 1.7; color: var(--ink-body); margin: 18px 0 0; }
  .hm-hero .std { margin-top: 22px; }
  .hm-quiet { background: #0d1620; padding: 38px 22px 40px; margin-top: 6px; }
  .hm-q-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); }
  .hm-q-h { font-family: var(--serif); font-weight: 600; font-size: 32px; line-height: 1.13; letter-spacing: -0.015em; color: #fff; margin: 14px 0 0; text-wrap: pretty; }
  .hm-q-p { font-family: var(--prose); font-size: 17px; line-height: 1.8; color: #c3d0e6; margin: 18px 0 0; }
  .hm-q-p b { color: #fff; font-weight: 600; }
  .hm-q-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
  .hm-q-card { border: 1px solid rgba(143,176,255,.32); border-radius: 6px; padding: 14px; }
  .hm-q-card.on { border-color: var(--accent-2); background: rgba(143,176,255,.10); }
  .hm-q-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; }
  .hm-q-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
  .hm-q-grid i { height: 16px; background: rgba(143,176,255,.16); border-radius: 2px; display: block; }
  .hm-q-bars { display: flex; flex-direction: column; gap: 5px; }
  .hm-q-bars b { height: 22px; background: rgba(143,176,255,.22); border-radius: 2px; display: block; }
  .hm-q-note { font-family: var(--prose); font-style: italic; font-size: 14px; color: #c3d0e6; margin-top: 12px; }
  .hm-inside { padding: 40px 22px 44px; }
  .hm-in-h { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); margin: 0; text-wrap: pretty; }
  .hm-in-lede { font-family: var(--prose); font-size: 17px; line-height: 1.7; color: var(--ink-body); margin: 12px 0 0; }
  .hm-panel { margin-top: 22px; }
  .hm-panel h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); margin: 0; }
  .hm-panel p { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 6px 0 0; }
  .hm-panel-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
  .hm-seeall { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 16px 18px; border: 1px dashed var(--accent-line); border-radius: 6px; background: var(--surface-quiet); text-decoration: none; }
  .hm-seeall > span:first-child { font-family: var(--prose); font-size: 14px; color: var(--ink-body); }
  .hm-seeall-cta { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); flex: none; }
  .hm-eyebrow2 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-quiet); margin-bottom: 14px; }

  /* Made to fit */
  .hm-fit { background: var(--surface-sunk); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 40px 22px 44px; }
  .hm-fit-h { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 16px; text-wrap: pretty; }
  .hm-fit-h em { font-style: italic; color: var(--accent); }
  .hm-fit-lede { font-family: var(--prose); font-size: 17px; line-height: 1.8; color: var(--ink-body); margin: 0 0 22px; }
  .hm-steps { display: flex; flex-direction: column; gap: 18px; }
  .hm-step { border: 1px solid var(--line); border-radius: 6px; padding: 18px; background: var(--surface); }
  .hm-step.live { border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0; }
  .hm-step-k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-quiet); }
  .hm-step h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); margin: 6px 0 0; }
  .hm-step p { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 7px 0 0; }

  /* Pricing teaser */
  .hm-price { padding: 44px 22px 46px; }
  .hm-price-amt { display: flex; align-items: baseline; gap: 10px; }
  .hm-price-n { font-family: var(--serif); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
  .hm-price-per { font-family: var(--prose); font-size: 18px; color: var(--ink-quiet); }
  .hm-price-p { font-family: var(--prose); font-size: 18px; line-height: 1.8; color: var(--ink-body); margin: 16px 0 0; text-wrap: pretty; }
  .hm-price-btn.btn { display: block; text-align: center; margin-top: 26px; padding: 16px 20px; border-radius: 3px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
  .hm-price-link { display: block; text-align: center; margin-top: 12px; min-height: 44px; line-height: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }

  /* Straight answers — native exclusive accordion (one open at a time via name=) */
  .hm-sa { background: var(--surface-sunk); border-top: 1px solid var(--line); padding: 40px 22px 44px; }
  .hm-faq { border-bottom: 1px solid var(--line); }
  .hm-faq > summary { list-style: none; cursor: pointer; padding: 19px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); }
  .hm-faq > summary::-webkit-details-marker { display: none; }
  .hm-faq > summary::after { content: "+"; font-family: var(--mono); font-size: 15px; color: var(--accent); flex: none; }
  .hm-faq[open] > summary::after { content: "−"; }
  .hm-faq > p { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 0 0 22px; max-width: 44ch; }
  .hm-sa-face { float: left; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin: 0 14px 6px 0; border: 1px solid var(--line); background: #e7edfb; }

  /* ---- pricing (design screenshot 163): full bespoke flow replaces the desktop configurator, which
     lives inside .page-wrap and is hidden ≤640px. hero → $24 panel → 3 rows → worked example →
     send-to-desktop → navy "what you never pay for". ---- */
  body:has(.pr-mobile) .page-wrap { display: none; }
  .pr-mobile { display: block; }
  .prm-hero { padding: 44px 22px 8px; }
  .prm-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-quiet); }
  .prm-h1 { font-family: var(--serif); font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 12px 0 0; text-wrap: pretty; }
  .prm-sub { font-family: var(--prose); font-size: 18px; line-height: 1.8; color: var(--ink-body); margin: 18px 0 0; text-wrap: pretty; }
  .prm-panel { margin: 22px 22px 0; border: 1px solid var(--accent-line); border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0; padding: 18px 18px 16px; }
  .prm-label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-quiet); }
  .prm-price { font-family: var(--serif); font-weight: 600; font-size: 52px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin-top: 6px; }
  .prm-per { font-family: var(--prose); font-size: 17px; font-weight: 400; color: var(--ink-quiet); letter-spacing: 0; }
  .prm-line { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 10px 0 0; }
  .prm-rows { margin: 18px 22px 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .prm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-quiet); }
  .prm-row:last-child { border-bottom: 0; }
  .prm-row-m { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .prm-row-t { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); }
  .prm-row-s { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-quiet); }
  .prm-meta { font-family: var(--fig, var(--mono)); font-size: 13px; color: var(--ink-quiet); flex: none; }
  .prm-example { margin: 18px 22px 8px; background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 6px; padding: 20px 22px; font-family: var(--prose); font-size: 17px; line-height: 1.8; color: var(--ink-body); }
  .prm-example b { color: var(--ink); font-weight: 600; }
  .prm-std { padding: 20px 22px 44px; }
  .prm-std .std { border-top: 0; margin-top: 0; padding-top: 0; }
  .prm-band { background: #0d1620; padding: 36px 22px 40px; }
  .prm-band-k { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); }
  .prm-band-h { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.18; letter-spacing: -0.015em; color: #fff; margin: 14px 0 0; text-wrap: pretty; }
  .prm-band-items { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
  .prm-band-item { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: #c3d0e6; border-top: 1px solid rgba(143,176,255,.28); padding-top: 13px; }
  .prm-band-item b { color: #fff; font-weight: 600; }

  /* ---- shared mobile layout for the text pages (about / runway / privacy / built-for-you), each a
     bespoke .pm block per the design (§15-18); the desktop content is hidden on those pages. ---- */
  .pm { display: block; }
  body:has(.pm) .page-wrap, body:has(.pm) .bfy-wrap { display: none; }
  .pm-hero { padding: 44px 22px 34px; }
  .pm-portrait { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin: 0 0 20px; border: 1px solid var(--line); background: var(--surface-quiet); }
  .pm-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-quiet); }
  .pm-h1 { font-family: var(--serif); font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 12px 0 0; text-wrap: pretty; }
  .pm-lede { font-family: var(--prose); font-size: 18px; line-height: 1.8; color: var(--ink-body); margin: 18px 0 0; text-wrap: pretty; }
  .pm-lede + .pm-lede { font-size: 17px; line-height: 1.85; margin-top: 16px; }
  .pm-lede b { color: var(--ink); font-weight: 600; }
  .pm-quote { font-family: var(--prose); font-style: italic; font-size: 17px; line-height: 1.8; color: var(--ink-quiet); border-left: 2px solid var(--accent-line); padding-left: 16px; margin: 22px 0 0; text-wrap: pretty; }
  .pm-panels { padding: 0 22px 40px; display: flex; flex-direction: column; gap: 18px; }
  .pm-panel { border: 1px solid var(--line); border-radius: 6px; padding: 18px; background: var(--surface); }
  .pm-panel.live { border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0; }
  .pm-p-k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-quiet); }
  .pm-panel h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); margin: 6px 0 0; }
  .pm-panel h3:first-child { margin-top: 0; }  /* panels with no eyebrow (privacy) */
  .pm-panel p { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 7px 0 0; }
  .pm-panel .hm-panel-link { margin-top: 12px; }
  .pm-band { background: #0d1620; padding: 36px 22px 40px; }
  .pm-band-k { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); }
  .pm-band-h { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.18; letter-spacing: -0.015em; color: #fff; margin: 14px 0 0; text-wrap: pretty; }
  .pm-band-items { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
  .pm-band-item { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: #c3d0e6; border-top: 1px solid rgba(143,176,255,.28); padding-top: 13px; }
  .pm-rows { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 0 22px; }
  .pm-rows-t { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); padding: 14px 16px 8px; }
  .pm-row { padding: 13px 16px; border-top: 1px solid var(--line-quiet); }
  .pm-row h4 { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; }
  .pm-row p { font-family: var(--prose); font-size: 14px; line-height: 1.5; color: var(--ink-quiet); margin: 3px 0 0; }
  .pm-close { padding: 36px 22px 46px; }
  .pm-close.sunk { background: var(--surface-sunk); border-top: 1px solid var(--line); }
  .pm-close p { font-family: var(--prose); font-size: 17px; line-height: 1.8; color: var(--ink-body); margin: 0 0 18px; text-wrap: pretty; }
  .pm-btn.btn { display: block; text-align: center; padding: 16px 20px; border-radius: 3px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
  .pm-link { display: block; text-align: center; margin-top: 12px; min-height: 44px; line-height: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
  .pm-labelled { display: flex; flex-direction: column; gap: 22px; }
  .pm-labelled .pm-p-k { display: block; }
  .pm-labelled p { font-family: var(--prose); font-size: 16px; line-height: 1.7; color: var(--ink-body); margin: 7px 0 0; }
  .pm-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
  .pm-links span { font-family: var(--prose); font-size: 16px; color: var(--ink-body); }
  .pm-links a { display: inline-flex; align-items: center; min-height: 46px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-decoration: none; }

  /* ---- /write + /write-sent: a real form joins the mobile chrome. These are the only mobile_chrome
     pages that still show a .page-wrap on a phone (the marketing pages hide theirs), so the sheet goes
     full-bleed with 22px gutters and the actions stack full-width. Scoped by .wa/.ws so nothing else
     is touched. ---- */
  input, textarea { font-size: 16px; }   /* ≥16px stops iOS zooming in on focus */
  body:has(.wa) .page-wrap, body:has(.ws) .page-wrap { max-width: 100%; padding: 8px 0 34px; }
  body:has(.wa) .sheet, body:has(.ws) .sheet { border-left: 0; border-right: 0; border-radius: 0; }
  body:has(.wa) .sheet-sec, body:has(.ws) .sheet-sec { padding: 30px 22px; }
  .wa h1, .ws h1 { font-size: 30px; line-height: 1.14; letter-spacing: -0.015em; }
  .wa-kind { min-height: 60px; }                                   /* comfortable tap target */
  .wa-send { flex-direction: column; align-items: stretch; gap: 12px; }
  .wa-send .btn { width: 100%; text-align: center; }
  .wa-send .note { text-align: center; }
  .ws-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .ws-actions .btn { width: 100%; text-align: center; }
  .ws-actions .link { text-align: center; }
}