/* D-110 Mobile design system: one shared phone layer (≤767px), loaded last on every route, /book-call included.
   Desktop and tablet are untouched: every rule sits inside the phone media query.

   The phone scale (existing site tokens, now enforced everywhere):
     gutter 20 · H1 36 (homepage hero 40) · H2 30 · panel / feature-card title 24 · grid-card title 20 Season Mix
     lead 18 · body 16 · small 14 · label 12 · section 72 / band 48 · header → content 48 · card padding 24
     buttons 48 tall, 16px · two buttons stack full width · graphics use the card's full inner width
   Selectors carry html body:not(#zm) (ID weight) so this layer wins over the component layers before it. */

@media (max-width: 767px) {
  :root { --zm-g: 20px; --zm-pad: 24px; --zm-btn: 48px; }

  /* ── Nothing pushes the page wider than the phone ───────────────────────────────────────────────────────────── */
  /* The breadcrumb trail scrolls sideways on phones (site-v6.css); inline-size containment stops its full one-line
     width from stretching the hero column it sits in (calculator, article and story heroes were 400–446px wide). */
  html body:not(#zm) .z-crumbs { contain: inline-size; max-width: 100%; }
  /* …and it starts on the gutter like the H1 under it (the scroller's padding put "Home" at x=28). */
  html body:not(#zm) .z-crumbs ol { padding-left: 0 !important; margin-left: 0 !important; flex-wrap: wrap !important; overflow: visible !important; white-space: normal !important; row-gap: 4px !important; }
  html body:not(#zm) .z-crumbs li { flex: 0 1 auto !important; padding-left: 0 !important; }
  html body:not(#zm) .z-crumbs li:last-child { max-width: 100%; }

  /* ── Headings: one scale, balanced lines, no orphans ────────────────────────────────────────────────────────── */
  html body:not(#zm) main :is(h1, h2) { text-wrap: balance; }
  html body:not(#zm) main :is(h3, p, li) { text-wrap: pretty; }
  /* Every heading that opens a section is 30px on a phone. Pages had them at 24 ("subsection" role), 32 (compare v2,
     nexus check, changelog) and 18 (careers investors). Article subheads (rich text) and card headings (pricing plan
     names, story cards) keep their sizes. */
  html body:not(#zm) main h2[data-zamp-type="subsection"]:not(:is(.text-rich-blog, .text-rich-text, .z-article-body, .w-richtext, [class*="pricing"]) *),
  html body:not(#zm) :is(main .zv-h2, main #zcl-log-h, #nexus-check-title, main h2.heading-style-h4[data-zamp-type="compact"]) {
    font: 400 30px/1.2 var(--z-font-heading) !important; letter-spacing: -.01em !important; }
  /* Grid-card titles in the compare v2 sections were 22px; card titles are 20. */
  html body:not(#zm) .zv :is(.zv-glance, .zv-switch, .zv-fit) h3 { font-size: 20px !important; line-height: 1.25 !important; }
  /* FAQ questions: one size across the five FAQ components (they ranged 16–20px, regular and medium). */
  html body:not(#zm) main :is(.faq_question_title, .z-faq-question-title, .zu-faq__item h3, .zv-faq__item :is(h3, summary), .z7-faq-btn, .z-shp-faq-question) {
    font: 500 18px/1.4 var(--z-font-body) !important; letter-spacing: 0 !important; }
  html body:not(#zm) main :is(.faq_question, .z7-faq-btn, .zu-faq__item > *:first-child) { gap: 16px; }
  html body:not(#zm) main :is(.faq_question_title, .z-faq-question-title) { flex: 1 1 auto; max-width: none !important; }
  /* Headings on the Shopify filing page use <br> breaks that are hidden on phones without leaving a space
     ("theswitch", "yourShopify"): keep the authored breaks there. */
  html body:not(#zm) main [class*="shp-"] :is(h1, h2, h3) br { display: inline !important; }
  html body:not(#zm) main [class*="shp-"] h2 { font-size: 30px !important; line-height: 1.2 !important; }

  /* ── CTA panel: some instances lost the gap between heading and lead (changelog, use-case hub) ────────────────── */
  html body:not(#zm) .z9-cta__panel .z9-cta__lead { margin-top: 20px !important; }

  /* ── Buttons: 48px, 16px, and a pair stacks full width ──────────────────────────────────────────────────────── */
  html body:not(#zm) main :is(.button:not(.is-link):not(.is-icon), .z3-btn, .z-sec__btn, .z5-card__btn, .z-cq__cta, .z-404__btn) {
    min-height: var(--zm-btn); height: auto; padding-top: 0; padding-bottom: 0; font-size: 16px; box-sizing: border-box; }
  html body:not(#zm) main .button-group:has(> .button + .button) { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  html body:not(#zm) main .button-group:has(> .button + .button) > .button { width: 100%; justify-content: center; text-align: center; margin: 0; }
  html body:not(#zm) .z-404__actions { flex-direction: column; }
  html body:not(#zm) .z-404__btn { justify-content: center; }
  html body:not(#zm) .z-404__wrap { width: auto; margin: 0 var(--zm-g); }

  /* ── Feature cards (z5): one title size, card padding 24, graphics use the full inner width ──────────────────── */
  html body:not(#zm) main .z5-card .z5-card__copy { padding: 28px var(--zm-pad) 24px !important; min-height: 0 !important; }
  html body:not(#zm) main .z5-card .z5-card__t { font-size: 24px !important; line-height: 1.2 !important; }
  html body:not(#zm) main .z5-card .z5-card__b { font-size: 16px !important; line-height: 1.55 !important; margin-bottom: 0 !important; }
  html body:not(#zm) main .z5-card .z5-card__btn { margin-top: 24px !important; }
  html body:not(#zm) main .z5-card .z5-card__art:has(> .zc:not(.zc--photo)) { padding: 0 var(--zm-pad) !important; margin-top: 0 !important; }

  /* A grid of cards inside a grey panel (z5-trio) put card text 56–64px from the edge: on phones the panel steps back
     and the cards themselves carry the grey, on the gutter like every other card. */
  html body:not(#zm) main .z5-trio { padding: 0 !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: visible; row-gap: 24px !important; }
  html body:not(#zm) main .z5-trio :is(._3col-grid, ._2col-grid, ._2_col_grid) { gap: 16px !important; }
  html body:not(#zm) main .z5-trio .feature-card { background: var(--ds-ground-beige, #f6f5f3) !important; padding: var(--zm-pad) !important; }

  /* ── Product feature lists (Webflow tabs): every item open, no auto-rotation mid-read ───────────────────────── */
  html body:not(#zm) main .products-tabs-item-description { height: auto !important; overflow: visible !important; transition: none !important; }
  html body:not(#zm) main .products-tabs-item-description p { margin-top: 8px; }
  html body:not(#zm) main .products-tabs-item-progress { display: none !important; }
  html body:not(#zm) main .products-tabs-item-track { height: 1px !important; margin-top: 20px !important; background: var(--ds-border, #e6e1da) !important; }
  html body:not(#zm) main .products-tabs-item-container { row-gap: 20px; }

  /* ── Use-case pages: the desktop sticky heading column kept its 500px height above the list ─────────────────── */
  html body:not(#zm) main .zu-choose__l { min-height: 0 !important; height: auto !important; position: static !important; }

  /* ── Graphics (product UI mockups): headers wrap instead of squeezing pills; nothing under 11px ─────────────── */
  html body:not(#zm) .zc-h { flex-wrap: wrap; row-gap: 8px; }
  html body:not(#zm) .zc-h .zc-h__t { flex: 1 1 140px; min-width: 0 !important; }
  html body:not(#zm) .zc-h .zc-h__end { flex: 0 0 auto; }
  html body:not(#zm) .zc-h .zc-h__end .zc-pill { white-space: nowrap !important; }
  /* The rate bar's in-segment figures drop to ~5px on a phone; the rows under the bar carry the same figures. */
  html body:not(#zm) .zb-split i { font-size: 0 !important; }
  /* Code keeps its lines (JSON broke mid-value when wrapped) and scrolls inside its own box. */
  html body:not(#zm) :is(.zc-code, .zg-code, .za-code) { white-space: pre !important; overflow-wrap: normal !important; overflow-x: auto; font-size: 11px; }

  /* ── Article tables: words never break mid-word; wide tables scroll inside their own box ────────────────────── */
  html body:not(#zm) main :is(.text-rich-blog, .text-rich-text, .z-article-body) table :is(th, td) {
    word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; min-width: 7.5em; }

  /* ── Square patterns: on a phone the bottom-left square of a green panel sat under its outline button, and the
     press-card square under the excerpt. Panels keep their top-right square; card squares shrink into the corner. ── */
  html body:not(#zm) .split-feature_left:not(.z-split-feature-media-beige) { background-image: url('/design-assets/squares/forest-panel-tr.svg') !important; }
  html body:not(#zm) .split-feature_left.z-split-feature-media-beige { background-image: url('/design-assets/squares/beige-panel-tr.svg') !important; }
  html body:not(#zm) :is(.press_card, .media-card) { background-size: 56px 56px !important; padding-bottom: 72px !important; }

  /* ── Tables ─────────────────────────────────────────────────────────────────────────────────────────────────────
     Pricing comparison: each feature was a label row and then a row of three checks (106px a feature, ~6,000px in
     all), and the plan names scrolled away. Now one row per feature: the label, then three 52px check columns under
     plan names that stay pinned below the navigation. The plan cards above carry the buttons. */
  html body:not(#zm) main .pricing_top-row { grid-template-columns: minmax(0, 1fr) repeat(3, 52px) !important; position: sticky; top: 52px; z-index: 3;
    background: #fff; border-bottom: 1px solid var(--ds-border, #e6e1da); column-gap: 0 !important; }
  html body:not(#zm) main .pricing_top-row .pricing_empty-space { display: flex !important; align-items: flex-end; padding: 12px 8px 12px 0; }
  html body:not(#zm) main .pricing_top-row .pricing_empty-space h3 { margin: 0; font: 500 14px/1.3 var(--z-font-body) !important; letter-spacing: 0; color: var(--ds-ink-secondary, #323232); }
  html body:not(#zm) main .pricing_top-row-content { padding: 12px 2px !important; justify-content: flex-end !important; text-align: center; }
  html body:not(#zm) main .pricing_top-row-content .heading-style-h5 { font: 500 12px/1.25 var(--z-font-body) !important; letter-spacing: 0; }
  html body:not(#zm) main .pricing_top-row-content .hide-mobile-portrait { display: none !important; }
  html body:not(#zm) main .pricing_row { grid-template-columns: minmax(0, 1fr) repeat(3, 52px) !important; column-gap: 0 !important; align-items: center;
    border-bottom: 1px solid var(--ds-border, #e6e1da); }
  html body:not(#zm) main .pricing_row > * { border-bottom: 0 !important; }
  html body:not(#zm) main .pricing_row > .pricing-table_feature { grid-column: 1 !important; grid-row: 1 !important; padding: 14px 8px 14px 0 !important; font-size: 15px; line-height: 1.4; }
  html body:not(#zm) main .pricing_row > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  html body:not(#zm) main .pricing_row > :nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
  html body:not(#zm) main .pricing_row > :nth-child(4) { grid-column: 4 !important; grid-row: 1 !important; }
  html body:not(#zm) main .pricing_row > .pricing_row-content { padding: 14px 0 !important; border: 0 !important; justify-content: center; align-self: stretch; align-items: center; }
  html body:not(#zm) main .pricing_heading-row { padding: 32px 0 12px !important; }
  html body:not(#zm) main .pricing_heading-row h4 { font: 400 20px/1.2 var(--z-font-heading) !important; }

  /* Article tables with three or more columns (stackTables in copy-fixes.mjs): each row becomes a card. The first cell
     is its title; every other cell shows its column name above the value. */
  html body:not(#zm) main table.z-tbl-stack, html body:not(#zm) main table.z-tbl-stack :is(tbody, tr, td, th) { display: block; width: 100% !important; min-width: 0 !important; }
  html body:not(#zm) main table.z-tbl-stack { border: 0 !important; }
  html body:not(#zm) main table.z-tbl-stack :is(thead, .z-tbl-stack__head) { display: none !important; }
  html body:not(#zm) main table.z-tbl-stack tr { padding: 16px 0 !important; border-bottom: 1px solid var(--ds-border, #e6e1da) !important; background: transparent !important; }
  html body:not(#zm) main table.z-tbl-stack tr > :is(td, th) { padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ds-ink-secondary, #323232) !important; font-size: 15px; line-height: 1.5; }
  html body:not(#zm) main table.z-tbl-stack tr > :is(td, th):first-child { margin-bottom: 4px; font: 500 16px/1.4 var(--z-font-body); color: #000 !important; }
  /* Label and value share a line (label column 42%), so a row of short values stays compact. */
  html body:not(#zm) main table.z-tbl-stack tr > :is(td, th)[data-label]:not(:first-child) { position: relative; margin-top: 6px; padding-left: calc(42% + 12px) !important; }
  html body:not(#zm) main table.z-tbl-stack tr > :is(td, th)[data-label]:not(:first-child)::before {
    content: attr(data-label); position: absolute; left: 0; top: 0; width: 42%; font: 500 13px/1.5 var(--z-font-body); color: #838383; }
  /* The article comparison matrix is built in the browser (no labels to stack by): its feature column stays pinned
     while the tools scroll sideways, and the box fades at the right edge to show there is more. */
  html body:not(#zm) main .cmp-feature-comparison .blog-table-wrapper { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  html body:not(#zm) main .cmp-feature-comparison table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; min-width: 116px; max-width: 128px; background: #fff; box-shadow: 1px 0 0 var(--ds-border, #e6e1da); }
  html body:not(#zm) main .cmp-feature-comparison table thead :is(th, td):first-child { background: var(--ds-ground-beige, #f6f5f3); }
  html body:not(#zm) main .cmp-feature-comparison table :is(th, td):not(:first-child) { min-width: 200px; }
  html body:not(#zm) main :is(figure.wp-block-table, .blog-table-wrapper):has(table.z-tbl-stack) { overflow: visible !important; }

  /* Use-case pages, the dark "with Zamp" comparison: row titles off the box edge, readable labels. */
  html body:not(#zm) .zu-dark .zv-table__row { padding: 20px 16px !important; }
  html body:not(#zm) .zu-dark .zv-table__row .zv-table__topic { padding: 0 0 8px !important; }
  html body:not(#zm) .zu-dark .zv-table__row > :is(.zv-table__z, .zv-table__t)::before { font-size: 12px; color: rgba(255, 255, 255, .6) !important; }
  html body:not(#zm) .zu-dark .zv-table__row > .zv-table__z::before { color: var(--ds-yellow, #ffec72) !important; }
  html body:not(#zm) main .zv-fn { margin-left: 1px; }

  /* ── Guide and resource cards: a square cover and a four-line excerpt (cards were ~860px tall) ──────────────── */
  html body:not(#zm) main .blog_item-link .blog_image-wrapper:has(.guide_image) { aspect-ratio: 1 / 1; height: auto !important; }
  html body:not(#zm) main .blog_item-link .blog_image-wrapper:has(.guide_image) img { width: 100%; height: 100%; object-fit: cover; }
  html body:not(#zm) main .blog_item-link .text-size-regular { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }

  /* ── Shopify filing page: the line break in "your / switch" is hidden on phones (no space was left), and the
     panel copy was dark grey on dark green. ── */
  html body:not(#zm) #qualify-heading br { display: inline !important; }
  html body:not(#zm) .shp-onboarding-description { color: rgba(255, 255, 255, .8) !important; }

  /* ── Footer: one CTA size, 48px controls, two link columns, real tap targets ────────────────────────────────── */
  html body:not(#zm) .footer_cta_component .cta_title { font-size: 30px !important; line-height: 1.2 !important; }
  html body:not(#zm) .footer_cta_component :is(.form_input, .button, input[type="submit"]) { height: var(--zm-btn) !important; min-height: var(--zm-btn) !important; }
  html body:not(#zm) .footer_top-wrapper { grid-template-columns: 1fr 1fr !important; gap: 40px 24px !important; }
  html body:not(#zm) .footer_link { display: block; padding-top: 8px !important; padding-bottom: 8px !important; }

  /* ── Small things the second review found ────────────────────────────────────────────────────────────────────── */
  /* Phone numbers and job-type chips never break ("1-866-438- / 9267", "Full- / Time"). */
  html body:not(#zm) a[href^="tel:"] { white-space: nowrap; }
  html body:not(#zm) .roles-item .display-inlineflex { flex-wrap: wrap; }
  html body:not(#zm) .roles-item .display-inlineflex > div { white-space: nowrap; }
  /* A story button whose label runs to two lines grows instead of spilling out of its 48px box. */
  html body:not(#zm) main :is(.z5-card__btn, .z-cq__cta, .button:not(.is-link):not(.is-icon)) { height: auto !important; padding-top: 12px !important; padding-bottom: 12px !important; line-height: 1.25 !important; }
  /* Use-case hub: "By business" sits a section step under the platform cards (it touched them). */
  html body:not(#zm) main .zuh-h2b { margin-top: 56px !important; }
  /* Compare pages' sticky "Book a walkthrough" bar: one 64px row (button and dismiss), not a 157px stack. */
  html body:not(#zm) .z-scrollbar__inner { flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 12px !important; }
  html body:not(#zm) .z-scrollbar__inner p { display: none !important; }
  html body:not(#zm) .z-scrollbar__btn { flex: 1 1 auto; justify-content: center; height: 48px !important; min-height: 48px; }
  html body:not(#zm) .z-scrollbar__close { flex: none; width: 48px !important; height: 48px !important; }
}