/* ============================================================
   Category mindset archetypes (compliance / emotional / commercial).
   Only NEW module classes live here; shared tokens, .cl-hero, .cl-section,
   .bd-card, .bd-btn, .bd-chip, .cl-cities-grid, .cl-samples-grid and the
   .seo-faq layout come from tokens.css / responsive-pages.css / seo-editorial.css.
   Mobile reflow uses the same @container home (max-width: 760px) mechanism.
   ============================================================ */

/* Two-column hero (text + side card). */
.cm-hero-grid          { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 48px; align-items: center; }

/* Process guide — horizontal numbered steps with a connector rail. */
.cm-process-grid       { position: relative; }
.cm-process-step       { position: relative; }
.cm-process-rail       { position: absolute; }

/* Documents checklist — list + sticky downloads aside. */
.cm-docs-grid          { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; align-items: start; }
/* Desktop: items are always-expanded cards — no accordion chevron, body shown,
   header not a toggle. The accordion only kicks in on mobile (see reflow below). */
.cm-docs-item-chev     { display: none; }
.cm-docs-item-head     { cursor: default !important; }
/* Desktop badge = filled pill (uppercase). Mobile strips this to plain text. */
.cm-docs-item-badge    { background: var(--badge-bg); padding: 3px 9px; border-radius: 999px;
                         text-transform: uppercase; }

/* Proof block — tearsheet visual + copy. */
.cm-proof-grid         { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: center; }

/* Trust band — four pillars. */
.cm-trust-grid         { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Generic two-up (word-count explainer). */
.cm-two                { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Commercial multi-city combo — three packs. */
.cm-combo-grid         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Commercial AD-TYPES — "Three ways to run your ad". Three image-topped cards on
   desktop; on mobile they collapse to horizontal rows (thumbnail left). */
.cm-adtypes-grid       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cm-adtype-card        { transition: border-color .15s; }
/* The thumbnail image always covers its box (desktop = image-top, mobile = image-left). */
.cm-adtype-thumb img   { object-fit: cover; object-position: center top; }
/* The selected ✓ tick is mobile-only touch feedback — hidden on desktop (the card
   border already conveys selection there). Above the mobile breakpoint, hide it
   regardless of Alpine's x-show so the red badge never floats on desktop. */
@media (min-width: 761px) {
  .cm-adtype-tick      { display: none !important; }
}

/* Sticky-footer spacing + red accent line — keyed to the viewport (not the home
   container) so it always applies on commercial mobile, regardless of whether the
   @container query resolves. Zeroes the stacked .bh-home reserve and leaves enough
   room below the page footer that the fixed sticky bar never overlaps it. */
@media (max-width: 760px) {
  .cm-commercial-page.bh-home { padding-bottom: 80px !important; }
  .cm-commercial-root         { padding-bottom: 0 !important; }
  .cm-rate-sheet-bar          { border-top: 2px solid var(--accent) !important; }
}

/* Commercial hero-right wrapper (calculator / reach card). */
.cm-commercial-hero-right { min-width: 0; }

/* Calculator AD-TYPE cards — thumbnail-left, text beside it, never stacks. */
.rcc-type-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rcc-type-card   { display: flex; align-items: center; justify-content: flex-start;
                   gap: 10px; padding: 10px; border-radius: 13px; cursor: pointer;
                   text-align: left; min-width: 0; flex-wrap: nowrap;
                   transition: border-color .15s, background .15s; }
.rcc-type-thumb  { width: 38px; height: 38px; border-radius: 8px; object-fit: cover;
                   flex-shrink: 0; background: var(--paper-2); border: 1px solid var(--rule); }
.rcc-type-body   { min-width: 0; }
.rcc-type-name   { display: block; font-family: var(--font-display); font-weight: 800;
                   font-size: 13px; line-height: 1.1; color: var(--ink); }
.rcc-type-unit   { display: block; font-size: 10.5px; font-weight: 700; margin-top: 2px; }
@media (max-width: 600px) {
  /* Mobile: roomier AD-TYPE cards — larger thumbnail, more padding, and the
     label wraps to two lines ("Classified" / "Text"), matching the mobile design. */
  .rcc-type-card  { padding: 12px; gap: 11px; align-items: center; min-height: 66px; }
  .rcc-type-thumb { width: 42px; height: 42px; }
  .rcc-type-body  { min-width: 0; }
  .rcc-type-name  { font-size: 13.5px; line-height: 1.18; white-space: normal; }
  .rcc-type-unit  { font-size: 11px; margin-top: 3px; }
}

/* Compliance "requirement" section — full-body, edge-to-edge. Overrides the
   shared .cl-section-inner max-width cap so the four bordered cards span the
   whole window (with comfortable side gutters), not a centered 1280px column. */
.cm-req-section .cl-section-inner { max-width: none; }
.cm-req-items          { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Emotional hero on desktop: the text block and the stats/CTA block both sit in
   the LEFT column (stacked), while the memorial card occupies the RIGHT column,
   spanning both rows. (On mobile the three reflow into design order.) */
.cm-hero-grid:has(.cm-obit-cta) { grid-template-rows: auto auto; }
.cm-hero-grid > .cm-obit-cta   { grid-column: 1; grid-row: 2; margin-top: 26px; }
.cm-hero-grid > .cm-obit-ad    { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* Emotional archetype — quiet serif headings + shadowless buttons. */
.cat-quiet .bd-btn     { box-shadow: none !important; }
.cat-quiet .bd-btn:hover { box-shadow: 0 6px 18px rgba(75, 81, 97, 0.25) !important; }
.cat-quiet .bd-h2      { font-family: "Newsreader", Georgia, serif !important; font-weight: 700 !important; }

/* Requirement cards: 4 across → 2 across on tablet before the mobile 1-col reflow. */
@container home (max-width: 1000px) {
  .cm-req-items        { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   Mobile reflow
   ============================================================ */
@container home (max-width: 760px) {
  .cm-hero-grid        { grid-template-columns: 1fr !important; gap: 28px !important; }
  .cm-req-card         { order: 2; }

  /* Mobile hero: show the stacked sample-cards visual + the booking CTA / hint;
     the desktop two-button row is hidden (pinned booking bar covers it). */
  .cm-hero-mobile-cards { display: block !important; }
  .cm-hero-mobile-cta   { display: block !important; }
  .cm-hero-grid .cl-hero-buttons { display: none !important; }
  /* Hide the rate-calculator card on mobile — the mobile booking CTA above covers
     it. Scoped to the compliance hero so commercial pages keep their calculator. */
  .cm-hero-grid .cm-commercial-hero-right { display: none !important; }

  /* Deadline strip: swap the full strip for the compact one-line version on mobile. */
  .ds-full    { display: none !important; }
  .ds-compact { display: block !important; }

  /* Rate grid: swap the card grid for a single-column row list, and use the
     compact "{Category} rates by city" heading, on mobile. */
  .rg-cards       { display: none !important; }
  .rg-rows        { display: block !important; }
  .rg-head-full   { display: none !important; }
  .rg-head-mobile { display: block !important; }
  /* Hide the 2-paper combo promo card on mobile. */
  .rg-combo       { display: none !important; }

  /* Stop the hero stats cramping: stack the big number above its sub-text so the
     "3-line notice · Kolkata" line gets the full column width and never wraps mid-
     word. Each stat takes an equal half so the two sit cleanly side by side.
     Tighter top spacing on mobile so the stats sit closer to the sample cards. */
  .cm-hero-grid .cl-hero-stats        { gap: 0 !important; margin-top: 16px !important; padding-top: 16px !important; }
  .cm-hero-grid .cl-hero-stats > div  { flex: 1 1 0; min-width: 0; }
  .cm-hero-grid .cl-hero-stats > div > div:last-child {
    flex-direction: column !important; align-items: flex-start !important; gap: 2px !important;
  }
  .cm-hero-grid .cl-hero-stats > div > div:last-child > div:last-child {
    white-space: nowrap;
  }

  /* Process steps on mobile: horizontal scroll of bordered step cards (design),
     instead of a vertical stack. Rail hidden — cards carry the sequence. */
  .cm-process-grid     { display: flex !important; grid-template-columns: none !important;
                         gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory;
                         -webkit-overflow-scrolling: touch; padding-bottom: 6px;
                         margin-left: -2px; margin-right: -2px; }
  .cm-process-grid::-webkit-scrollbar { height: 0; }
  .cm-process-step     { flex: 0 0 78%; max-width: 78%; scroll-snap-align: start;
                         padding: 18px !important; border: 1px solid var(--rule);
                         border-radius: 14px; background: #fff; }
  .cm-process-step > div:last-child { padding-right: 0 !important; }
  .cm-process-rail     { display: none !important; }

  .cm-docs-grid        { grid-template-columns: 1fr !important; gap: 16px !important; }
  .cm-docs-aside       { position: static !important; }

  /* Documents on mobile: each item is a collapsible accordion row — status badge
     + title + chevron, with the body hidden until tapped (design). */
  .cm-docs-need        { gap: 0 !important; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
  .cm-docs-item        { padding: 15px 18px !important; gap: 12px !important; border-radius: 0 !important;
                         border-bottom: 1px solid var(--rule); align-items: center !important; }
  .cm-docs-item-chev   { padding-left: 4px; }
  .cm-docs-item:last-child { border-bottom: 0; }
  .cm-docs-item-icon   { display: none !important; }            /* row is tighter without the big icon */
  .cm-docs-item-chev   { display: flex !important; align-items: center; }
  .cm-docs-item-head   { cursor: pointer !important; align-items: center !important; }
  .cm-docs-item-body   { display: none; }
  .cm-docs-item-body.is-open { display: block; }
  /* Status badge on mobile: keep the soft tinted pill, but title-case (not
     uppercase) — matching the design's "Required" / "We handle it" / "Optional". */
  .cm-docs-item-badge  { text-transform: none !important; letter-spacing: 0 !important;
                         font-size: 10.5px !important; padding: 3px 9px !important; }

  /* Downloads → horizontal scroll row of format chips on mobile. */
  .cm-docs-downloads   { display: flex !important; gap: 10px !important; overflow-x: auto;
                         scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
                         padding-bottom: 4px; }
  .cm-docs-downloads::-webkit-scrollbar { height: 0; }
  .cm-docs-download    { flex: 0 0 72%; scroll-snap-align: start; }

  /* Sample templates → horizontal scroll of cards on mobile (design). The next
     card peeks at the right edge to signal there's more to swipe. */
  .st-grid    { display: flex !important; grid-template-columns: none !important;
                gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .st-grid::-webkit-scrollbar { height: 0; }
  .st-card    { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; }

  /* Proof block on mobile: full-width heading on top, then a COMPACT tear-sheet
     thumbnail (small "PDF" tag) floated left so only the dek/body wraps to its
     right, then the "Accepted for" box below. Big image + "48 hours" badge hidden. */
  .cm-proof-head-mobile { display: block !important; margin-bottom: 16px; }
  .cm-proof-grid       { display: block !important; grid-template-columns: none !important; }
  .cm-proof-visual     { float: left; width: 92px; margin: 2px 16px 8px 0; }
  .cm-proof-img        { border-radius: 10px; }
  .cm-proof-img > div  { aspect-ratio: 3 / 3.6 !important; }
  .cm-proof-tag        { top: 6px !important; left: 6px !important; padding: 3px 6px !important;
                         font-size: 7.5px !important; letter-spacing: 0.04em !important; }
  .cm-proof-badge      { display: none !important; }   /* badge omitted on mobile */
  /* Hide the in-grid eyebrow + h2 (the mobile heading above covers them); keep the
     dek paragraph, which wraps around the floated thumbnail. */
  .cm-proof-text .bd-eyebrow,
  .cm-proof-text .bd-h2 { display: none !important; }
  /* Points list hidden on mobile — the design jumps straight to "Accepted for". */
  .cm-proof-points     { display: none !important; }
  /* Clear the float before the "Accepted for" box so it sits full-width below. */
  .cm-proof-acceptedfor { clear: both; }

  /* Trust band on mobile: just two stat boxes (INS accreditation + ads published),
     a shortened headline, and the verify-phone box / sub-text / address hidden. */
  .cm-trust-grid       { grid-template-columns: 1fr 1fr !important; }
  .cm-trust-cell       { display: none !important; }
  .cm-trust-cell--keep { display: block !important; padding: 16px !important; }
  .cm-trust-h2-rest    { display: none; }            /* "…, not a reseller" trimmed */
  .cm-trust-eyebrow-pre { display: none; }           /* "Is this … ? Yes" trimmed → "Genuine — …" */
  .cm-trust-verify     { display: none !important; }
  .cm-trust-sub        { display: none !important; }
  .cm-trust-address    { display: none !important; }

  /* Commercial trust band: show all FOUR stat boxes in a compact 2×2 grid, plus a
     one-line "verify on call" footer (instead of the 2-box compliance treatment). */
  .cm-commercial-page .cm-trust-cell        { display: block !important; padding: 14px !important; }
  .cm-commercial-page .cm-trust-cell > div:first-of-type { font-size: 18px !important; margin-top: 10px !important; }
  .cm-commercial-page .cm-trust-cell span:first-child { width: 32px !important; height: 32px !important; }
  .cm-commercial-page .cm-trust-grid        { gap: 10px !important; }
  .cm-commercial-page .cm-trust-verifyline  { display: flex !important; }
  /* Smaller, tighter heading so it sits on ~2 lines like the design. */
  .cm-commercial-page .cm-trust-h2          { font-size: 20px !important; line-height: 1.2 !important; }

  /* FAQ footer: swap the big "Still have a question?" card for the compact pill. */
  .cm-faq-foot-full    { display: none !important; }
  .cm-faq-foot-pill    { display: inline-flex !important; margin-top: 18px !important; }
  /* Trim the FAQ section's bottom padding on mobile so the chat pill sits closer
     to the trust band below (less dead white space). */
  .seo-faq-pad         { padding-bottom: 24px !important; }

  /* Sticky bottom "view rate" bar — mobile only. */
  .cm-sticky-rate      { display: flex !important; position: fixed; left: 0; right: 0;
                         bottom: 0; z-index: 60; align-items: center; gap: 12px;
                         padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff;
                         border-top: 1px solid var(--rule); border-radius: 0;
                         box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
                         text-decoration: none; color: var(--ink); }
  .cm-sticky-rate-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
                         background: rgba(211,16,39,0.08); color: var(--accent);
                         display: grid; place-items: center; }
  .cm-sticky-rate-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .cm-sticky-rate-title{ font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1.15; }
  .cm-sticky-rate-sub  { font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
  .cm-sticky-rate-btn  { flex-shrink: 0; display: flex; align-items: center; gap: 5px;
                         background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
                         padding: 10px 14px; border-radius: 10px; }
  /* Sticky "ready to view rates & book" bar — red heading + location picker + Go.
     Full-width, edge-to-edge, fixed to the bottom. Uses the global red accent. */
  .cm-sticky-book      { display: block !important; position: fixed; left: 0; right: 0; bottom: 0;
                         z-index: 60; background: #fff; border-top: 2px solid var(--accent);
                         box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
                         padding: 11px 14px calc(11px + env(safe-area-inset-bottom)); }
  .cm-sticky-book-head { display: flex; align-items: center; gap: 7px; color: var(--accent);
                         font-weight: 800; font-size: 13.5px; }
  .cm-sticky-book-row  { display: flex; align-items: stretch; gap: 10px; margin-top: 9px; }
  .cm-sticky-book-select { position: relative; flex: 1; min-width: 0; }
  .cm-sticky-book-select select { width: 100%; appearance: none; -webkit-appearance: none;
                         padding: 12px 34px 12px 36px; border-radius: 10px; background: var(--paper-2);
                         border: 1px solid var(--rule); font: inherit; font-weight: 700; font-size: 13.5px;
                         color: var(--ink); cursor: pointer; }
  .cm-sticky-book-pin  { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
                         color: var(--accent); pointer-events: none; }
  .cm-sticky-book-chev { position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
                         color: var(--muted); pointer-events: none; }
  .cm-sticky-book-go,
  .cm-sticky-book-go:link,
  .cm-sticky-book-go:visited,
  .cm-sticky-book-go:hover,
  .cm-sticky-book-go svg { color: #fff !important; }
  .cm-sticky-book-go   { flex-shrink: 0; display: flex; align-items: center; justify-content: center;
                         gap: 6px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
                         padding: 0 24px; border-radius: 10px; text-decoration: none; }

  /* Keep the sticky bar from covering the page footer (taller two-row bar). */
  .bh-home             { padding-bottom: 116px; }

  /* ── Commercial mobile sticky RATE SHEET ─────────────────────────────────
     The calculator lives in the footer on mobile (design). A collapsed bar shows
     the live price; tapping it slides up the full type/city picker panel. */
  .cm-rate-sheet       { display: block !important; position: fixed; left: 0; right: 0; bottom: 0;
                         z-index: 200; background: #fff; }
  .cm-rate-sheet-bar   { width: 100%; display: flex; align-items: center; justify-content: space-between;
                         gap: 12px; background: #fff; border-top: 2px solid var(--accent);
                         box-shadow: 0 -6px 24px rgba(0,0,0,0.12); text-align: left;
                         padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  /* When the panel is open, the rounded-top panel overlays the (square) container —
     so the corners still read. The container bg only matters for the collapsed bar,
     where it guarantees no page content bleeds through behind the bar. */
  .cm-rate-sheet-icon  { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
                         background: rgba(211,16,39,0.08); color: var(--accent);
                         display: grid; place-items: center; }
  .cm-rate-sheet-cta   { flex-shrink: 0; display: flex; align-items: center; gap: 6px;
                         background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
                         padding: 13px 20px; border-radius: 10px; white-space: nowrap; }
  .cm-rate-sheet-panel { background: #fff; border-top: 2px solid var(--accent);
                         box-shadow: 0 -12px 36px rgba(0,0,0,0.22);
                         border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .cm-rate-sheet-panel-head { display: flex; align-items: flex-start; justify-content: space-between;
                         gap: 12px; margin-bottom: 14px; }
  /* Reserve space below the WHOLE page (footer included) for the fixed sticky bar,
     so the bar sits below the footer instead of overlapping it. The body's default
     .bh-home (116px, for the emotional two-row bar) is replaced with 80px here. */
  .cm-commercial-page.bh-home { padding-bottom: 80px !important; }
  .cm-commercial-root  { padding-bottom: 0 !important; }
  /* Obituary now uses the single-row .cm-rate-sheet collapsed bar (not the old
     two-row .cm-sticky-book), so it needs the same 80px reserve as commercial. */
  .cm-obit-page.bh-home { padding-bottom: 80px !important; }

  .cm-two              { grid-template-columns: 1fr !important; }
  .cm-combo-grid       { grid-template-columns: 1fr !important; }

  /* Ad-types on mobile: STACKED cards, 2 per row (image on top, text below) — like
     the agency/matrimonial ad-type picker. The 3rd card wraps to the next row. The
     "best for" + "enhance" rows and the book button are dropped to keep cards compact. */
  .cm-adtypes-grid     { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .cm-adtype-card      { flex-direction: column !important; align-items: stretch !important; height: auto !important; }
  .cm-adtype-card > div:first-child { width: 100% !important; flex-shrink: 0; background: #efece6 !important;
                                      height: 104px !important; line-height: 0 !important; overflow: hidden; }
  .cm-adtype-card > div:first-child img { width: 100% !important; height: 100% !important;
                                      object-fit: cover !important; object-position: center top !important;
                                      display: block; }
  .cm-adtype-card > div:last-child { padding: 12px 13px !important; justify-content: flex-start !important; }
  .cm-adtype-bestfor, .cm-adtype-enhance,
  .cm-adtype-card .cm-adtype-body > a { display: none !important; }
  /* Ad-types section header — smaller eyebrow, tighter 2-line heading, compact dek. */
  .cm-adtypes-head .bd-eyebrow { font-size: 11px !important; letter-spacing: 0.1em !important; }
  .cm-adtypes-head .bd-h2      { font-size: 24px !important; line-height: 1.18 !important; margin-top: 7px !important; }
  .cm-adtypes-head p           { font-size: 13.5px !important; margin-top: 8px !important; line-height: 1.5 !important; }

  /* Compact ad-type typography — name on one line, single-line price, tight body. */
  .cm-adtype-body      { padding: 12px 13px !important; overflow: hidden; }
  .cm-adtype-tag       { font-size: 9.5px !important; }
  .cm-adtype-name      { font-size: 15px !important; margin-top: 3px !important; line-height: 1.2 !important; }
  .cm-adtype-from      { margin-top: 4px !important; flex-wrap: wrap !important; }
  .cm-adtype-price     { font-size: 18px !important; }
  .cm-adtype-unit      { font-size: 11px !important; white-space: nowrap; }
  .cm-adtype-desc      { display: none !important; }   /* hide body copy on mobile (stacked cards stay short) */

  /* Multi-edition packages — drop dek, tighten heading, single-column rows. */
  .cm-pkg-dek          { display: none !important; }
  .cm-pkg-h2           { font-size: 22px !important; line-height: 1.18 !important; }
  .cm-pkg-pill         { margin-top: 12px; }
  .cm-pkg-grid         { grid-template-columns: 1fr !important; gap: 10px !important; }
  .cm-pkg-card         { padding: 13px 14px !important; gap: 10px !important; }

  /* Pricing reassurance: show the compact "No surprises on price" note on mobile,
     hide the full desktop word-count explainer. */
  .cm-price-note       { display: block !important; }
  .cm-wordcount-section { display: none !important; }

  /* Requirement cards on mobile: single column, compact, with the icon to the
     LEFT of the text (horizontal) instead of stacked on top — matches the design. */
  .cm-req-items        { grid-template-columns: 1fr !important; gap: 10px !important; }
  .cm-req-item         { flex-direction: row !important; align-items: flex-start !important;
                         gap: 13px !important; padding: 15px !important; }
  .cm-req-item-icon    { margin-bottom: 0 !important; }
  .cm-req-item-body    { min-width: 0; }

  /* Obituary hero on mobile: shorter headline (+ "The" prefix), shorter dek, and
     the reassurance check-list hidden — straight to the memorial card (design). */
  .cm-obit-h1          { font-size: 27px !important; line-height: 1.16 !important; }
  .cm-obit-h1-full     { display: none; }
  .cm-obit-h1-mobile   { display: inline !important; }
  .cm-obit-dek-rest    { display: none; }
  .cm-obit-checks      { display: none !important; }

  /* Mobile order: text → memorial card → stats + buttons (matches the design).
     Reset the desktop grid placement so flex order takes over. */
  .cm-hero-grid:has(.cm-obit-cta) { display: flex !important; flex-direction: column; }
  .cm-hero-grid > .cm-obit-ad   { order: 1; grid-column: auto; grid-row: auto; margin-top: 18px; }
  .cm-hero-grid > .cm-obit-cta  { order: 2; grid-column: auto; grid-row: auto; margin-top: 18px; }
  /* Stats as a 2-up bordered card grid on mobile (design), full-width button. */
  .cm-obit-cta .cl-hero-stats   { display: grid !important; grid-template-columns: 1fr 1fr;
                                  gap: 10px; padding-top: 0 !important; border-top: 0 !important; }
  .cm-obit-cta .cl-hero-stats > div { background: #fff; border: 1px solid var(--rule);
                                  border-radius: 12px; padding: 12px 14px; border-left: 1px solid var(--rule) !important; }
  .cm-obit-cta .cl-hero-stats > div > div:last-child > div:first-child { font-size: 25px !important; }
  .cm-obit-cta .cl-hero-stats > div:last-child { padding-left: 14px !important; }
  .cm-obit-cta-btns             { flex-direction: column; margin-top: 14px !important; }
  .cm-obit-cta-btns > a:first-child { width: 100%; justify-content: center; }
  .cm-obit-cta-btns > a:last-child  { display: none !important; }   /* one CTA on mobile */

  /* Mobile section order (design): deadline → notice types → verse templates →
     rates → (proof → faq follow in DOM order). The page wrapper becomes a flex
     column so `order` can lift the rate grid below the templates. Unordered
     siblings stay at order:0 (header/hero above, proof/faq/footer below keep
     DOM order since they all share the default order). */
  .cat-quiet                    { display: flex; flex-direction: column; }
  .cm-obit-order-deadline       { order: 1; }
  .cm-obit-order-types          { order: 2; }
  .cm-obit-order-samples        { order: 3; }
  .cm-obit-order-rates          { order: 4; }
  .cm-obit-order-proof          { order: 5; }
  .cm-obit-order-faq            { order: 6; }
  .cm-obit-order-trust          { order: 7; }
}

/* ── Commercial ad-types: viewport-based fallback ────────────────────────────
   Mirror of the @container home (max-width:760px) ad-type rules above, but keyed
   to the real viewport so the image-left mobile row layout applies even where the
   container context doesn't resolve as expected. Plain @media — no ancestor needed. */
@media (max-width: 760px) {
  /* STACKED ad-type cards, 2 per row (image on top, text below) — see the matching
     block above. The 3rd card wraps to the next row. */
  .cm-adtypes-grid     { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .cm-adtype-card      { display: flex !important; flex-direction: column !important;
                         align-items: stretch !important; height: auto !important; }

  /* Multi-edition packages on mobile: drop the dek, tighten the heading, and stack
     the rows in one column. Each card is already a left/right row. */
  .cm-pkg-dek          { display: none !important; }
  .cm-pkg-h2           { font-size: 22px !important; line-height: 1.18 !important; }
  .cm-pkg-pill         { margin-top: 12px; }
  .cm-pkg-grid         { grid-template-columns: 1fr !important; gap: 10px !important; }
  .cm-pkg-card         { padding: 13px 14px !important; gap: 10px !important; }

  /* Pricing reassurance: show the compact "No surprises on price" note on mobile,
     hide the full desktop word-count explainer. */
  .cm-price-note       { display: block !important; }
  .cm-wordcount-section { display: none !important; }
  /* Thumbnail on top, full-width, fixed height so all three are identical. */
  .cm-adtype-card > div:first-child { width: 100% !important; flex-shrink: 0 !important;
                         background: #efece6 !important; height: 104px !important;
                         line-height: 0 !important; overflow: hidden; }
  .cm-adtype-card > div:first-child img { width: 100% !important; height: 100% !important;
                         object-fit: cover !important; object-position: center top !important;
                         display: block !important; }
  .cm-adtype-card > div:last-child { padding: 12px 13px !important; flex: 1 1 auto !important;
                         min-width: 0; justify-content: flex-start !important; }
  .cm-adtype-bestfor, .cm-adtype-enhance,
  .cm-adtype-card .cm-adtype-body > a { display: none !important; }
  /* Ad-types section header — smaller eyebrow, tighter 2-line heading, compact dek. */
  .cm-adtypes-head .bd-eyebrow { font-size: 11px !important; letter-spacing: 0.1em !important; }
  .cm-adtypes-head .bd-h2      { font-size: 24px !important; line-height: 1.18 !important; margin-top: 7px !important; }
  .cm-adtypes-head p           { font-size: 13.5px !important; margin-top: 8px !important; line-height: 1.5 !important; }
  /* Compact ad-type typography — name on one line, single-line price, body hidden. */
  .cm-adtype-body      { padding: 12px 13px !important; overflow: hidden; }
  .cm-adtype-tag       { font-size: 9.5px !important; }
  .cm-adtype-name      { font-size: 15px !important; margin-top: 3px !important; line-height: 1.2 !important; }
  .cm-adtype-from      { margin-top: 4px !important; flex-wrap: wrap !important; }
  .cm-adtype-price     { font-size: 18px !important; }
  .cm-adtype-unit      { font-size: 11px !important; white-space: nowrap; }
  .cm-adtype-desc      { display: none !important; }   /* hide body copy on mobile */
}