/* ============================================================
   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 — "supplement view" (left) + copy & 2-step picker (right).
   Replaces the old copy-left / calculator-right hero with its STARTING FROM +
   TURNAROUND stat row: the visual is now the actual printed page the category
   runs on, and the entire rate ask is two dropdowns and one button.
   ============================================================ */
.cm-hero-supplement,
.bh-tight .cm-hero-supplement { padding: 0; }
.cm-hero-supplement .cl-hero-inner { width: 100%; max-width: 1200px; margin: 0 auto;
                                      padding: 34px 40px 38px; box-sizing: border-box; }
.cm-hero-supplement .cm-hero-visual { min-width: 0; align-self: center; }
.cm-hero-supplement .cm-hero-copy { max-width: 760px; display: flex; flex-direction: column;
                                    align-items: stretch; }
.cm-hero-supplement .cl-hero-title { max-width: 760px; font-size: clamp(34px, 3.15vw, 46px); }

/* The page scan sits on a warm "light table" board so a 216x341 source doesn't
   have to be blown up to fill the column — it is mounted, not stretched. */
.cm-paper              { width: min(100%, 280px); margin: 0 auto; }
.cm-paper-board        { position: relative; border-radius: 20px; padding: 30px 26px 26px;
                         background: linear-gradient(158deg, #fbf4ec 0%, #ffffff 62%, #fdf6f4 100%);
                         border: 1px solid var(--rule); box-shadow: inset 0 1px 0 #fff;
                         display: flex; justify-content: center; }
.cm-paper-tag          { position: absolute; top: -12px; left: 22px; display: inline-flex;
                         align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
                         background: #fff; border: 1px solid var(--rule); color: var(--ink-2);
                         font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
                         box-shadow: 0 2px 8px rgba(0,0,0,0.06); white-space: nowrap; }
.cm-paper-tag svg      { color: var(--good); }
/* White mount + a second sheet peeking behind it, so it reads as a real page
   lifted off a stack rather than a floating thumbnail. */
.cm-paper-mount        { position: relative; width: 100%; background: #fff; padding: 8px;
                         border: 1px solid rgba(0,0,0,0.10); border-radius: 4px;
                         box-shadow: 0 14px 34px rgba(28,20,16,0.20), 0 2px 6px rgba(28,20,16,0.10);
                         transform: rotate(-1.1deg); }
.cm-paper-mount::before{ content: ""; position: absolute; inset: 0; z-index: -1;
                         background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 4px;
                         transform: rotate(2.6deg) translate(6px, 4px); }
.cm-paper-mount img    { display: block; width: 100%; max-width: none; height: auto;
                         border: 1px solid rgba(0,0,0,0.06); }
.cm-paper-cap          { margin-top: 16px; text-align: center; font-size: 12.5px;
                         color: var(--ink-2); line-height: 1.5; }
.cm-paper-cap strong   { color: var(--ink); }
.cm-paper-cap span     { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; }

/* Fallback visual (no category-specific page scan): CSS sample ads mounted over
   this newspaper's own general classified-page artwork. The print is deliberately
   muted so it supplies authentic context without competing with the samples. */
.cm-hero-clips         { position: relative; width: 100%; height: 300px; max-width: 310px;
                         margin: 0 auto; isolation: isolate; }
.cm-hero-newsprint     { position: absolute; z-index: 0; inset: 0 57px 0 57px;
                         overflow: hidden; border: 7px solid #fff; border-radius: 3px;
                         background: #e8e3da; box-shadow: 0 13px 30px rgba(28,20,16,.20);
                         transform: rotate(-1.8deg); }
.cm-hero-newsprint::after { content: ""; position: absolute; inset: 0;
                         background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(248,242,232,.14)); }
.cm-hero-newsprint img { display: block; width: 100%; height: 100%; object-fit: contain;
                         object-position: center; filter: grayscale(.42) contrast(.9) brightness(1.06);
                         opacity: .84; }
.cm-hero-clip-card     { position: absolute; z-index: 1; overflow: hidden; padding: 11px 13px;
                         border-radius: 5px; font-family: Georgia, "Times New Roman", serif; }
.cm-hero-clip-card-back { top: 78px; left: 0; right: 54px; background: rgba(253,246,227,.97);
                         border: 1px solid #d7c99d; box-shadow: 0 7px 18px rgba(0,0,0,.18);
                         transform: rotate(-3deg); transform-origin: bottom left; }
.cm-hero-clip-card-front { top: 151px; left: 44px; right: 0; background: rgba(255,255,255,.985);
                         border: 1px solid #cbc3b5; box-shadow: 0 10px 24px rgba(0,0,0,.22);
                         transform: rotate(2.5deg); transform-origin: bottom right; }
.cm-hero-clip-heading  { margin-bottom: 6px; color: #1c1a16; font-size: 11px;
                         font-weight: 700; letter-spacing: .06em; }
.cm-hero-clip-body     { display: -webkit-box; overflow: hidden; color: #222;
                         font-size: 11px; line-height: 1.45; -webkit-line-clamp: 4;
                         -webkit-box-orient: vertical; }
.cm-hero-clip-card-front .cm-hero-clip-heading,
.cm-hero-clip-card-front .cm-hero-clip-body { font-size: 11.5px; }

/* Reference composition: compact red location/category pill, two-column proof
   list, then one self-contained selector widget. */
.cm-hero-eyebrow       { display: inline-flex; align-items: center; align-self: flex-start;
                         gap: 7px; margin: 0 0 14px;
                         padding: 6px 12px; border-radius: 999px; background: rgba(211,16,39,.07);
                         color: var(--accent); font-size: 12px; font-weight: 700; line-height: 1.2; }
.cm-hero-copy .cl-hero-title { margin: 0; }
.cm-hero-support       { max-width: 720px; margin: 24px 0 0; color: var(--muted);
                         font-size: 13.5px; line-height: 1.5; }
.cm-hero-checks        { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px;
                         max-width: 720px; margin-top: 18px; }
.cm-hero-check         { display: flex; align-items: flex-start; gap: 8px; min-width: 0;
                         color: var(--ink-2); font-size: 13.5px; line-height: 1.35; }
.cm-hero-check-dot     { width: 18px; height: 18px; flex: 0 0 18px; display: grid;
                         place-items: center; margin-top: 1px; border-radius: 999px;
                         background: rgba(0,163,122,.10); color: var(--good); }
.cm-hero-pick          { width: 100%; max-width: 720px; margin-top: 24px; padding: 14px;
                         border: 1px solid var(--rule); border-radius: 15px; background: #fff;
                         box-shadow: 0 10px 28px rgba(24,28,36,.08); }
.cm-hero-pick-head     { display: flex; align-items: center; justify-content: space-between;
                         gap: 12px; margin-bottom: 10px; padding: 0 2px; }
.cm-hero-pick-label    { color: var(--ink); font-family: var(--font-display); font-size: 15px;
                         font-weight: 800; line-height: 1.2; }
.cm-hero-pick-hint     { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.cm-hero-pick-step     { flex-shrink: 0; padding: 4px 8px; border-radius: 999px;
                         background: var(--paper-2); color: var(--muted); font-size: 9.5px;
                         font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.cm-hero-pick-row      { display: grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
                         gap: 9px; align-items: stretch; }
.cm-hero-pick-row--single { grid-template-columns:minmax(0,1fr) auto; }
.cm-hero-pick-sel      { min-width: 0; }
.cm-hero-pick-sel .bd-select { min-height: 48px; padding-top: 11px; padding-bottom: 11px;
                         font-size: 13px; font-weight: 700; background-color: #fff; }
.cm-hero-pick-go       { min-height: 48px; padding: 0 18px; border-radius: 11px;
                         display: inline-flex; align-items: center; justify-content: center; gap: 7px;
                         background: var(--accent); color: #fff !important; font-size: 13px;
                         font-weight: 800; text-decoration: none; white-space: nowrap;
                         box-shadow: 0 5px 13px rgba(211,16,39,.20); transition: .15s ease; }
.cm-hero-pick-go:hover { transform: translateY(-1px); background: #b90d21; }
.cm-hero-pick-go.is-idle { background: var(--ink); box-shadow: none; }
.cm-hero-stats-band    { width: 100%; border-top: 1px solid var(--rule);
                         border-bottom: 1px solid var(--rule); background: #f5f6f8; }
.cm-hero-stats-band-inner { max-width: 1200px; min-height: 78px; margin: 0 auto;
                         padding: 11px 40px; display: grid; align-items: center;
                         grid-template-columns: 260px 300px minmax(0,1fr); gap: 0; }
.cm-hero-stats         { display: contents; margin: 0; padding: 0; border: 0; }
.cm-hero-stats > div   { min-width: 0; }
.cm-hero-stat-2,
.cm-hero-stat-3        { border-left: 1px solid var(--rule); padding-left: 32px; }
.cm-hero-stat-lbl      { color: var(--muted); font-size: 10px; font-weight: 800;
                         letter-spacing: .08em; }
.cm-hero-stat-row      { display: flex; align-items: baseline; gap: 7px; margin-top: 3px; }
.cm-hero-stat-fig      { font-family: var(--font-display); color: var(--ink); font-size: 28px;
                         font-weight: 800; line-height: 1.05; white-space: nowrap; }
.cm-hero-stat-sub      { max-width: none; color: var(--muted); font-size: 11px; line-height: 1.25;
                         white-space: nowrap; }

/* The picker: two dropdowns, a rate readout that holds its height, one button. */
.cm-hero-picker        { margin-top: 26px; padding: 20px; border-radius: 16px; background: #fff;
                         border: 1px solid var(--rule); box-shadow: var(--shadow-lg); max-width: 560px; }
.cm-hero-picker-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-hero-picker-fields:has(.cm-hero-field:only-child) { grid-template-columns: 1fr; }
.cm-hero-field         { display: block; min-width: 0; }
.cm-hero-field-lbl     { display: block; font-size: 11px; font-weight: 700; color: var(--muted);
                         letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 7px; }
.cm-hero-field .bd-select-wrap { display: block; }
/* Readout: one fixed-height strip. Neutral prompt until both answers are in, so
   the button never jumps down the page when the price appears. */
.cm-hero-rate          { display: flex; align-items: center; min-height: 62px; margin-top: 14px;
                         padding: 12px 14px; border-radius: 12px; background: var(--paper-2);
                         border: 1px solid var(--rule); }
.cm-hero-rate-prompt   { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cm-hero-rate-live     { display: grid; grid-template-columns: auto 1fr; column-gap: 12px;
                         align-items: baseline; width: 100%; }
.cm-hero-rate-city     { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.cm-hero-rate-fig      { font-family: var(--font-display); font-weight: 800; font-size: 30px;
                         letter-spacing: -0.015em; line-height: 1.1; color: var(--ink); }
.cm-hero-rate-note     { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.cm-hero-go            { width: 100%; justify-content: center; margin-top: 12px; font-size: 15px; }
.cm-hero-alt           { display: block; text-align: center; margin-top: 12px; font-size: 12.5px;
                         font-weight: 600; color: var(--ink-2); text-decoration: none; }
.cm-hero-alt:hover     { color: var(--accent); }

/* 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 hero action (desktop): "Select your edition → Continue", which lands on
   that edition's /compare page to choose the ad format. It REPLACES the two-button
   row on desktop; on mobile that row comes back (the sticky rate sheet owns the city
   picker there). :has() keeps the old buttons if a paper has no bookable edition and
   the picker never renders. */
.cm-obit-edition       { margin-top: 26px; }
.cm-obit-edition-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
                         text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cm-obit-edition-row   { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cm-obit-edition-select { appearance: none; -webkit-appearance: none; font: inherit; font-weight: 600;
                         font-size: 15px; color: var(--ink); cursor: pointer;
                         /* Fixed width: left to size itself, the select grows to fit the
                            longest edition name and pushes the row onto two lines. */
                         width: 240px; max-width: 100%;
                         padding: 14px 42px 14px 16px; border: 1.5px solid var(--rule);
                         border-radius: 12px; background-color: #fff;
                         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234b5161' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                         background-repeat: no-repeat; background-position: right 16px center; }
.cm-obit-edition-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* .cat-quiet prefix on the two links is load-bearing, not decoration: tokens.css
   carries `.theme-editorial a { color: inherit }`, which out-specifies a lone class
   and left the filled button with near-black text on its slate fill. */
.cat-quiet .cm-obit-edition-go  { padding: 15px 26px; border-radius: 12px; background: var(--accent);
                         color: #fff; font-weight: 700; font-size: 15px; display: inline-flex;
                         align-items: center; gap: 8px; text-decoration: none; }
.cat-quiet .cm-obit-edition-go:hover { background: var(--ink); }
/* Nothing is preselected, so Continue reads as "not yet" until a city is chosen —
   muted, but still focusable and clickable (it sends focus back to the picker).
   Not `disabled`/pointer-events:none: a dead control gives no feedback on why. */
.cat-quiet .cm-obit-edition-go.is-idle        { background: var(--paper-2); color: var(--muted);
                                                border: 1.5px solid var(--rule); padding: 13.5px 24.5px; }
.cat-quiet .cm-obit-edition-go.is-idle:hover  { background: var(--paper-2); color: var(--ink-2); }
/* The picker replaces the old two-button row on desktop. :has() on the hero grid, not
   on one child, because the two now live in different grid children. */
.cm-hero-grid:has(.cm-obit-edition) .cm-obit-cta-btns { display: none !important; }

/* 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; }

  /* Commercial supplement hero on mobile: copy + picker first, the printed page
     under it (a 216px-wide scan is a poor thing to lead a phone screen with, and
     the two dropdowns are what the visitor came for). The picker lives in the hero
     on mobile too, so the old duplicate mobile CTA block stays hidden here. */
  .cm-hero-supplement .cm-hero-grid  { display: flex !important; flex-direction: column; gap: 26px !important; }
  .cm-hero-supplement .cm-hero-copy   { order: 1; }
  .cm-hero-supplement .cm-hero-visual { order: 2; width: 100%; }
  .cm-hero-supplement .cm-hero-mobile-cta { display: none !important; }
  .cm-hero-supplement .cm-hero-picker { padding: 16px; margin-top: 20px; }
  .cm-hero-supplement .cm-hero-picker-fields { grid-template-columns: 1fr; gap: 10px; }
  .cm-hero-supplement .cm-paper-board { padding: 26px 18px 20px; }
  .cm-hero-supplement .cm-paper-mount img { max-width: 216px; }
  .cm-hero-supplement .cm-hero-clips  { width: 100%; max-width: 340px; }
  .cm-hero-supplement .cl-hero-inner  { padding: 26px 20px 28px; }
  .cm-hero-supplement .cm-hero-copy   { width: 100%; }
  /* The shared category-mobile stylesheet assigns `order` to .cl-hero-title.
     Define the complete sequence here so un-ordered description/check blocks
     cannot jump above the headline. */
  .cm-hero-supplement .cm-hero-eyebrow { order: 1; }
  .cm-hero-supplement .cl-hero-title  { order: 2; font-size: 30px; }
  .cm-hero-supplement .cm-hero-support { display: none; }
  .cm-hero-supplement .cm-hero-checks { order: 4; grid-template-columns: 1fr; gap: 7px; }
  .cm-hero-supplement .cm-hero-pick { display: none !important; }
  .cm-hero-supplement .cm-hero-pick-row { grid-template-columns: 1fr; }
  .cm-hero-supplement .cm-hero-pick-go { min-height: 48px; }
  .cm-hero-supplement .cm-hero-pick-step { display: none; }
  .cm-hero-supplement .cm-hero-stats-band-inner { min-height: 0; padding: 12px 20px;
                                                   display: block; }
  .cm-hero-supplement .cm-hero-stats { display: grid !important; grid-template-columns:1fr 1fr;
                                        gap: 0 !important; margin: 0 !important; }
  .cm-hero-supplement .cm-hero-stat-2 { padding-left: 14px; }
  .cm-hero-supplement .cm-hero-stat-3 { display: none; }
  .cm-hero-supplement .cm-hero-stat-row { flex-direction: column; align-items:flex-start; gap:3px; }
  .cm-hero-supplement .cm-hero-stat-fig { font-size: 23px; }
  .cm-hero-supplement .cm-hero-stat-sub { white-space: normal; }

  /* 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) 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-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; }
  /* The desktop edition picker gives way to the single "Compose the Ad" button —
     the sticky rate sheet at the foot of the page carries the city picker on mobile. */
  .cm-obit-edition              { display: none !important; }
  .cm-hero-grid:has(.cm-obit-edition) .cm-obit-cta-btns { display: flex !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 */
}

/* ============================================================
   Design-first planning sections (pricing / publish / language).
   Static today; the markup is isolated so live rates and dates can replace the
   sample values without disturbing the existing calculators.
   ============================================================ */
.cm-plan-section {
  --accent: #d31027;
  border-top: 1px solid var(--rule);
}
.cm-plan-price,
.cm-plan-language {
  background: #f4f6f9;
}
.cm-plan-publish {
  background: #fff;
}
.cm-plan-section .cl-section-inner {
  max-width: 1200px;
}
.cm-plan-head {
  width: 100%;
  max-width: none;
  margin-bottom: 22px;
}
.cm-plan-head--wide {
  max-width: none;
}
.cm-plan-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.cm-plan-title {
  margin: 7px 0 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.35vw, 31px);
  font-weight: 850;
  line-height: 1.09;
  letter-spacing: -0.026em;
  color: var(--ink);
}
.cm-plan-title em {
  color: var(--accent);
  font-style: normal;
}
.cm-plan-head p {
  margin: 10px 0 0;
  max-width: none;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.52;
}
.cm-price-stack {
  display: grid;
  gap: 18px;
}
.cm-price-format {
  overflow: hidden;
  border: 1.5px solid #d9e2ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(28, 36, 50, 0.055);
}
.cm-price-format--text {
  border-color: #bfd3ea;
}
.cm-price-format--display {
  border-color: rgba(211, 16, 39, 0.25);
}
.cm-price-format-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 18px 10px;
  border-bottom: 1px solid #e7ebf1;
}
.cm-format-title,
.cm-format-rate {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.cm-format-title span {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cm-format-title strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 850;
  color: var(--ink);
}
.cm-format-title small {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.cm-format-rate {
  flex-shrink: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f6f8fb;
}
.cm-format-rate span {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
}
.cm-format-rate small {
  font-size: 10px;
  color: #7a8798;
  font-weight: 700;
}
.cm-format-rate strong {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--accent);
}
.cm-format-rate--text {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cm-format-rate--display {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cm-price-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.22fr 0.96fr;
  gap: 18px;
  padding: 18px;
  align-items: stretch;
}
.cm-price-layout--text {
  grid-template-columns: 0.88fr 1.18fr 0.94fr;
}
.cm-price-layout--display {
  grid-template-columns: 0.88fr 1.18fr 0.94fr;
}
.cm-paper-look,
.cm-print-sample,
.cm-cost-card {
  min-width: 0;
}
.cm-paper-look {
  display: flex;
  flex-direction: column;
}
.cm-paper-label,
.cm-print-head span,
.cm-cost-kicker,
.cm-proof-top span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cm-paper-thumb {
  overflow: hidden;
  height: 124px;
  margin-top: 9px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #dadde4;
}
.cm-paper-thumb picture,
.cm-paper-thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.cm-paper-thumb img {
  object-fit: cover;
  object-position: top;
}
.cm-paper-look p {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.42;
}
.cm-paper-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e7ebf1;
}
.cm-paper-note strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7c8795;
}
.cm-paper-note span {
  display: block;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.45;
}
.cm-paper-tip {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f8fb;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}
.cm-print-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 9px;
}
.cm-print-head small {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cm-news-clip,
.cm-display-clip,
.cm-proof-paper {
  border: 1px dashed #d9d0c1;
  border-radius: 8px;
  background: #fbf7ef;
  color: #15120e;
  font-family: Georgia, "Times New Roman", serif;
}
.cm-news-clip {
  padding: 12px;
}
.cm-clip-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.cm-clip-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.cm-clip-top .cm-clip-kicker {
  margin-bottom: 0;
}
.cm-clip-measure {
  color: #7f7a70;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cm-clip-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(88, 76, 58, 0.16);
  font-size: 11.5px;
  line-height: 1.35;
}
.cm-clip-row span {
  color: #8b8072;
  font-family: var(--font-mono);
  font-size: 9px;
}
.cm-clip-row p {
  margin: 0;
}
.cm-clip-row strong {
  color: #7b7469;
  font-size: 10.5px;
}
.cm-clip-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(17, 58, 112, 0.08);
  color: #113a70 !important;
  font-family: var(--font-mono);
  font-size: 8px !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cm-clip-flag.is-extra {
  background: rgba(211, 16, 39, 0.09);
  color: var(--accent) !important;
}
.cm-clip-footnote {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(88, 76, 58, 0.14);
  color: #6f685c;
  font-size: 10.5px;
  line-height: 1.45;
}
.cm-clip-row.is-muted {
  color: #6c6f77;
}
.cm-clip-row.is-hot p,
.cm-clip-row.is-hot strong {
  color: var(--accent);
}
.cm-display-clip {
  display: grid;
  grid-template-columns: 1fr 86px;
  gap: 14px;
  min-height: 116px;
  padding: 13px;
}
.cm-display-clip--measured {
  display: block;
  min-height: 0;
  padding: 12px 14px;
}
.cm-display-clip-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(88, 76, 58, 0.18);
}
.cm-display-clip-top strong {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.05em;
}
.cm-display-clip-top span {
  color: #7f7a70;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cm-display-clip-body {
  display: grid;
  grid-template-columns: 1fr 118px;
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}
.cm-display-clip-copy strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.cm-display-clip-copy p {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
.cm-display-meter-top {
  margin-bottom: 6px;
  color: #7f7a70;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cm-display-meter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cm-display-meter-card {
  width: 56px;
  height: 96px;
  border: 1px solid #cbbca3;
  border-radius: 4px;
  background:
    linear-gradient(rgba(17, 58, 112, 0.12), rgba(17, 58, 112, 0.12)) top 8px left 8px / 40px 18px no-repeat,
    linear-gradient(rgba(211, 16, 39, 0.08), rgba(211, 16, 39, 0.08)) top 30px left 8px / 40px 58px no-repeat,
    linear-gradient(90deg, rgba(203, 188, 163, 0.35) 1px, transparent 1px) 0 0 / 11px 11px,
    linear-gradient(rgba(203, 188, 163, 0.35) 1px, transparent 1px) 0 0 / 11px 11px,
    #f6efe2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
}
.cm-display-meter-card span {
  display: inline-block;
  max-width: 38px;
  color: #1f2430;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.cm-display-meter-side {
  color: #7f7a70;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.cm-display-clip-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(88, 76, 58, 0.14);
  color: #6f685c;
  font-size: 10.5px;
  line-height: 1.45;
}
.cm-display-clip strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.cm-display-clip p {
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
.cm-display-clip > span {
  display: grid;
  place-items: center;
  border: 1px solid #d7c7ab;
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, #efe7d5 0 9px, #f8f2e6 9px 18px);
  color: #8b7856;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.cm-size-controls {
  display: grid;
  grid-template-columns: 1fr 28px auto 28px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid #e7ebf1;
  border-radius: 8px;
  background: #f8fafc;
}
.cm-size-controls span,
.cm-size-controls strong {
  font-size: 11.5px;
  color: var(--ink-2);
}
.cm-size-controls button {
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px #e0e5ec;
}
.cm-size-controls--text {
  grid-template-columns: 1fr 30px auto 30px;
  margin-top: 10px;
}
.cm-cost-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 2px 0 0;
}
.cm-cost-card--text {
  padding-top: 0;
}
.cm-cost-card--display {
  padding-top: 0;
}
.cm-cost-intro {
  margin: 8px 0 0;
  color: #667085;
  font-size: 11.5px;
  line-height: 1.45;
}
.cm-cost-row,
.cm-total-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #ebeff4;
}
.cm-cost-row span {
  max-width: 170px;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.35;
}
.cm-cost-row strong {
  flex-shrink: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 850;
}
.cm-total-row {
  align-items: baseline;
  margin-top: auto;
  border-bottom: 0;
  padding-top: 13px;
}
.cm-total-row span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.cm-total-row strong {
  color: #123b72;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -0.035em;
}
.cm-total-note {
  margin-top: -2px;
  color: #64748b;
  font-size: 10.5px;
  line-height: 1.4;
}
.cm-total-row.is-red strong {
  color: var(--accent);
}
.cm-plan-cta,
.cm-plan-cta:link,
.cm-plan-cta:visited,
.cm-plan-cta:hover,
.cm-plan-cta svg {
  color: #fff !important;
}
.cm-plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(20, 48, 83, 0.16);
}
.cm-plan-cta--navy {
  background: #113a70;
}
.cm-plan-cta--red {
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(211, 16, 39, 0.18);
}
.cm-plan-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.cm-plan-notes > div {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 2px 8px;
  padding: 13px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
}
.cm-plan-notes svg {
  grid-row: span 2;
  margin-top: 1px;
  color: var(--good);
}
.cm-plan-notes strong {
  color: var(--ink);
  font-size: 12px;
}
.cm-plan-notes span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.36;
}
.cm-week-kicker {
  margin-bottom: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cm-date-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.cm-date-chip {
  min-height: 72px;
  padding: 10px 8px;
  border: 1px solid #e4e9f0;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  box-shadow: 0 4px 12px rgba(35, 43, 56, 0.035);
}
.cm-date-chip span,
.cm-date-chip small {
  display: block;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.cm-date-chip span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.cm-date-chip strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 900;
}
.cm-date-chip small {
  min-height: 12px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.cm-date-chip-rules {
  display: grid;
  gap: 2px;
  justify-items: center;
  margin-top: 6px;
}
.cm-date-chip-rules i {
  display: block;
  width: 30px;
  height: 2px;
  border-radius: 999px;
  background: #cdd5df;
}
.cm-date-chip.is-selected {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 10px 26px rgba(211, 16, 39, 0.1);
}
.cm-date-chip.is-selected span,
.cm-date-chip.is-selected strong,
.cm-date-chip.is-selected small {
  color: var(--accent);
}
.cm-publish-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.82fr;
  gap: 16px;
  align-items: stretch;
}
.cm-publish-card,
.cm-deadline-card,
.cm-language-proof {
  border: 1px solid #e3e8ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(35, 43, 56, 0.045);
}
.cm-publish-card {
  padding: 18px 20px;
}
.cm-publish-card.is-recommended {
  border-color: var(--accent);
  background: #fffafb;
}
.cm-publish-card.is-secondary .cm-publish-card-head span {
  background: #f5f7fa;
  color: #94a3b8;
}
.cm-publish-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6ebf2;
}
.cm-publish-card-head strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 850;
}
.cm-publish-card-head span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(211, 16, 39, 0.08);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cm-publish-card dl {
  display: grid;
  gap: 11px;
  margin: 13px 0 0;
}
.cm-publish-card dl > div {
  padding-top: 10px;
  border-top: 1px solid #edf1f5;
}
.cm-publish-card dl > div:first-child {
  padding-top: 0;
  border-top: 0;
}
.cm-publish-card dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cm-publish-card dd {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}
.cm-deadline-card {
  padding: 18px;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cm-deadline-kicker {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cm-deadline-card h3 {
  margin: 6px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.cm-deadline-card h4 {
  margin: 6px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.cm-deadline-stage {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.cm-deadline-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  border: 2px solid #8c97a7;
  flex-shrink: 0;
}
.cm-deadline-dot.is-live {
  border-color: var(--accent);
  background: var(--accent);
}
.cm-deadline-copy {
  min-width: 0;
}
.cm-deadline-copy strong {
  display: block;
  color: var(--ink);
  font-size: 11.5px;
}
.cm-deadline-copy p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.38;
}
.cm-deadline-foot {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #e4e9f0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.42;
}
.cm-deadline-foot svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent);
}
.cm-free-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 163, 122, 0.1);
  color: var(--good);
  font-size: 11px;
  font-weight: 800;
}
.cm-lang-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.cm-lang-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #dfe6ee;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 800;
}
.cm-lang-pills span.is-active {
  border-color: var(--accent);
  background: #fff7f8;
  color: var(--accent);
}
.cm-language-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.cm-language-proof {
  padding: 18px;
}
.cm-language-proof--vernacular {
  background: #fffdf7;
}
.cm-proof-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.cm-proof-top small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cm-proof-paper {
  min-height: 128px;
  padding: 18px;
}
.cm-proof-paper strong {
  display: block;
  color: #15120e;
  font-size: 13px;
  letter-spacing: 0.03em;
}
.cm-proof-paper p {
  margin: 11px 0 0;
  color: #262018;
  font-size: 13px;
  line-height: 1.55;
}
.cm-language-proof ul {
  display: grid;
  gap: 8px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.cm-language-proof li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.38;
}
.cm-language-proof li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--good);
}
.cm-proof-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.cm-proof-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  color: #8a7050;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cm-plan-notes--language {
  margin-top: 16px;
}

@media (max-width: 1040px) {
  .cm-price-layout {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .cm-price-layout--text {
    grid-template-columns: 0.92fr 1.08fr;
  }
  .cm-price-layout--display {
    grid-template-columns: 0.92fr 1.08fr;
  }
  .cm-cost-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.2fr;
    gap: 0 16px;
    align-items: end;
  }
  .cm-cost-kicker {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }
  .cm-cost-intro,
  .cm-total-note {
    grid-column: 1 / -1;
  }
  .cm-cost-row,
  .cm-total-row {
    border-bottom: 0;
  }
  .cm-plan-cta {
    grid-column: 1 / -1;
  }
  .cm-publish-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cm-deadline-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .cm-plan-section .cl-section-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .cm-price-format-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .cm-format-title {
    flex-wrap: wrap;
    gap: 5px 10px;
  }
  .cm-format-title strong {
    flex-basis: 100%;
    font-size: 18px;
  }
  .cm-format-rate {
    width: 100%;
    justify-content: space-between;
  }
  .cm-format-rate--text {
    justify-content: flex-start;
  }
  .cm-format-rate--display {
    justify-content: flex-start;
  }
  .cm-price-layout,
  .cm-cost-card,
  .cm-publish-grid,
  .cm-language-grid,
  .cm-plan-notes {
    grid-template-columns: 1fr;
  }
  .cm-price-layout {
    padding: 14px;
  }
  .cm-paper-thumb {
    height: 142px;
  }
  .cm-paper-note,
  .cm-paper-tip {
    margin-top: 12px;
  }
  .cm-cost-card {
    display: flex;
  }
  .cm-display-clip-body {
    grid-template-columns: 1fr;
  }
  .cm-display-meter-wrap {
    justify-content: flex-start;
  }
  .cm-cost-row,
  .cm-total-row {
    border-bottom: 1px solid #ebeff4;
  }
  .cm-total-row {
    border-bottom: 0;
  }
  .cm-date-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    padding-bottom: 0;
  }
  .cm-date-chip {
    min-height: 64px;
    padding: 8px 3px;
  }
  .cm-date-chip span { font-size: 7.5px; }
  .cm-date-chip strong { font-size: 17px; }
  .cm-date-chip small { font-size: 6px; letter-spacing: 0.04em; }
  .cm-date-chip-rules i { width: 24px; }
  .cm-deadline-card {
    grid-column: auto;
  }

  /* Emotional pages use ordered flex children on mobile. Keep this new planning
     sequence after samples/rates and before proof/FAQ instead of letting it float
     up with the default order:0 group. */
  .cat-quiet > .cm-plan-section { order: 5; }
  .cat-quiet .cm-obit-order-proof { order: 6; }
  .cat-quiet .cm-obit-order-faq { order: 7; }
  .cat-quiet .cm-obit-order-trust { order: 8; }
}

@media (max-width: 540px) {
  .cm-plan-title {
    font-size: 25px;
  }
  .cm-display-clip-top {
    flex-wrap: wrap;
  }
  .cm-display-clip {
    grid-template-columns: 1fr;
  }
  .cm-display-clip > span {
    min-height: 72px;
  }
  .cm-size-controls {
    grid-template-columns: 1fr 26px auto 26px;
  }
}