/* Mobile layer (phones, up to 767px). Loaded last on every page, so it can set how the site feels on a phone without touching the desktop rules.
   Principles: one column, a thumb-zone action, 44px targets, swipe where a row beats a stack, full-width image cards where the image is the content,
   tighter rhythm, and a phone-sized scale for reading. Desktop and tablet are not changed by this file. */

/* the bottom action bar is built by chrome.js and the How it works story is phone-only; neither shows above phone width */
.cs-mbar, .hw-story { display: none; }

@media (max-width: 767px) {
  :root { --cs-section-y: 48px; --cs-gutter: 20px; }

  /* ---- rhythm and reading ---- */
  main > .cs-section:not(.hm-hero):not(.cp-hero):not(.nf-hero):not(.hm-close) { padding-top: 48px; padding-bottom: 48px; }
  .cs-lead { font-size: 18px; line-height: 1.45; margin-top: 18px; }
  .cp-tag, .ex-card .cp-tag { font-size: 14px; }
  .bl-meta, .ex-where { font-size: 14px; }
  .mo-hide { --mo-distance: 14px; }

  /* ---- targets: nothing you tap is under 44px ---- */
  .cs-btn { min-height: 52px; }
  .cs-btn--small, .cs-nav .cs-btn { min-height: 44px; }
  .bl-chip, .ex-select { min-height: 44px; }
  .hm-help-link, .cs-footer-link, .cs-foot-col a, .cs-foot-legal a { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .cs-link, .hm-close-link { display: inline-flex; align-items: center; min-height: 44px; }

  .hm-quick-btn { min-height: 44px; }
  .hm-illustrative { font-size: 11px; }

  /* featured cards (blog, case studies, cool ads, videos): image, then a snug text block */
  .au-case { margin-top: 0; border-radius: 22px; }
  .au-case-media { min-height: 0; aspect-ratio: 16 / 10; }
  .au-case-body { padding: 22px 20px 26px; }
  .au-case-title { font-size: clamp(26px, 8vw, 34px); }

  /* ---- chip rows swipe sideways instead of wrapping into a block ---- */
  .bl-chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--cs-gutter) * -1); padding-inline: var(--cs-gutter); scrollbar-width: none; }
  .bl-chips::-webkit-scrollbar { display: none; }
  .bl-chip { flex: none; scroll-snap-align: start; }
  .ex-chiprow { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .ex-select { width: 100%; }

  /* ---- "more like this" rows become swipeable rails with the next card peeking ---- */
  .cp-grid--compact { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--cs-gutter); margin-inline: calc(var(--cs-gutter) * -1); padding: 0 var(--cs-gutter) 8px; scrollbar-width: none; }
  .cp-grid--compact::-webkit-scrollbar { display: none; }
  .cp-grid--compact > li { flex: 0 0 80%; scroll-snap-align: start; }
  .cp-grid--compact .cp-card { flex-direction: column; height: 100%; }
  .cp-grid--compact .cp-card-media { flex: none; aspect-ratio: 16 / 10; }

  /* ---- hubs where the image is the content (cool ads, customer videos): full-width cards ---- */
  .cp-grid--feed { gap: 28px; }
  .cp-grid--feed .cp-card { flex-direction: column; padding: 0; border: 0; background: none; border-radius: 0; }
  .cp-grid--feed .cp-card-media { flex: none; aspect-ratio: 16 / 10; border-radius: 18px; }
  .cp-grid--feed .cp-card-body { padding: 14px 2px 0; }
  .cp-grid--feed .cp-card-title { font-size: 22px; }
  .cp-grid--feed .cp-card-sub { -webkit-line-clamp: 2; }

  /* ---- experts: compact rows, a square logo, two tags ---- */
  .ex-card .cp-card-media { flex: 0 0 88px; aspect-ratio: 1; align-self: flex-start; margin: 14px 0 14px 14px; border-radius: 14px; }
  .ex-card .hb-stamp { display: none; }
  .ex-card .cp-card-body { padding: 14px 16px 14px 14px; }
  .ex-card .cp-tags { gap: 6px; margin-top: 10px; }
  .ex-card .cp-tag:nth-child(n+3) { display: none; }
  .ex-tile img { width: 70%; height: 70%; margin-top: 0; }

  /* ---- the thumb-zone action bar (chrome.js): appears after the first screen, hides near the closing panel and the footer ---- */
  .cs-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(0, 22, 30, .94); backdrop-filter: blur(14px); border-top: 1px solid var(--cs-border-strong); transform: translateY(110%); transition: transform .45s var(--cs-spring); }
  .cs-mbar.is-on { transform: none; }
  .cs-mbar .cs-btn { flex: 1 1 auto; width: auto; min-height: 48px; }
  .cs-mbar-demo { flex: none; padding: 0 10px; font-weight: 800; font-size: 16px; color: var(--cs-text); text-decoration: none; }
  html.has-mbar .cs-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* ---- the prototype's locale switcher: one small chip, tap to open; it sits above the bar ---- */
  html .cs-dev { left: 10px; right: auto; bottom: calc(var(--cs-mbar-h, 0px) + 10px); opacity: .9; }
  html .cs-dev:not(.is-open) a:not(.on) { display: none; }
  html .cs-dev a { min-height: 32px; display: inline-flex; align-items: center; }
}
/* ============ Portrait redesigns (phones). These sections are re-laid out for a tall, narrow screen, not reflowed from desktop. ============ */
@media (max-width: 767px) {

  /* ---- The budget calculator (Home, Pricing, board-type pages) ----
     One hero: the answer. Everything else is quiet. Green means "the result" and nothing else; selected states are pale.
     Order: the answer, the board (swipe pills, price in grey), the budget (one row and a slider), quick amounts, historical price context, then the small print. */
  .hm-calc { display: flex; flex-direction: column; margin-top: 28px; padding: 24px 18px 22px; border-radius: 24px; border: 1.5px solid rgba(59, 214, 43, .35); box-shadow: none; }
  .hm-calc-grid, .hm-readout { display: contents; }
  .hm-calc-title, .hm-readout::after, .hm-readout .hm-panel-tag, .hm-odo-unit, .hm-readout-note, .hm-ticks, .hm-scale,
  .hm-calc-input .hm-panel-tag { display: none; }

  .hm-readout > .hm-calc-label { order: 1; font-size: 12px; }
  /* the alarm clock: five slots across the full width in a dark inset window; unused leading slots are dim zeros */
  .hm-odo { order: 2; justify-content: space-between; margin: 6px 0 0; padding: 14px 14px 12px; border-radius: 18px; font-size: calc((100vw - 112px) / 3.45); border: 1px solid rgba(37, 242, 26, .28);
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), linear-gradient(180deg, #031017, #05202a); box-shadow: inset 0 2px 18px rgba(0, 0, 0, .5); }
  .hm-odo .od-col { flex: 1 1 0; width: auto; }
  .hm-odo .od-sep { flex: 0 0 .3em; }
  .hm-odo .is-ghost { opacity: .16; }
  .hm-readout-row { order: 3; margin: 6px 0 0; padding: 0; border: 0; font-size: 15px; gap: 2px 10px; color: var(--cs-text-faint); }
  .hm-readout-row b { color: var(--cs-text-soft); }
  .hm-readout-key { font-size: 11px; }
  .hm-calc-input { order: 5; display: grid; grid-template-columns: 1fr auto; align-items: baseline; margin-top: 16px; }
  .hm-calc > .cs-footnote { order: 7; margin-top: 10px; font-size: 13px; }

  .hm-calc-label { grid-column: 1; margin: 0; font-size: 12px; }
  .hm-calc-budget { grid-column: 2; margin: 0; font-size: 34px; letter-spacing: -0.03em; text-align: right; }
  /* the slider: a 12px track whose green fill ends exactly under the thumb (--f is set by calc.js); a 44px touch area around it */
  .hm-calc-range { grid-column: 1 / -1; width: 100%; height: 44px; margin: 8px 0 0; padding: 0; background: none; box-shadow: none; -webkit-appearance: none; appearance: none; }
  .hm-calc-range::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--cs-green-bright) calc(16px + (100% - 32px) * var(--f, .04)), #12313a 0); box-shadow: inset 0 0 0 1px var(--cs-dark4); }
  .hm-calc-range::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 32px; height: 32px; margin-top: -10px; border: 4px solid var(--cs-green-bright); border-radius: 50%; background: var(--cs-pale); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
  .hm-calc-range::-moz-range-track { height: 12px; border-radius: 6px; background: #12313a; box-shadow: inset 0 0 0 1px var(--cs-dark4); }
  .hm-calc-range::-moz-range-progress { height: 12px; border-radius: 6px; background: var(--cs-green-bright); }
  .hm-calc-range::-moz-range-thumb { box-sizing: border-box; width: 32px; height: 32px; border: 4px solid var(--cs-green-bright); border-radius: 50%; background: var(--cs-pale); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
  .hm-quick { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; gap: 8px; margin: 14px -18px 0; padding: 2px 18px 4px; border: 0; border-radius: 0; background: none; overflow-x: auto; scrollbar-width: none; }
  .hm-quick::-webkit-scrollbar { display: none; }
  .hm-quick-btn { flex: none; padding: 0 18px; border: 1.5px solid var(--cs-dark4); background: none; box-shadow: none; color: var(--cs-text-soft); }
  .hm-quick-btn.is-on { background: var(--cs-pale); border-color: var(--cs-pale); color: var(--cs-dark1); box-shadow: none; }

  /* ---- Home hero stage: the whole globe on top, the live notes underneath (not floating over it) ---- */
  .hm-stage { height: 500px; margin-top: 24px; }
  .hm-notes { left: 0; right: 0; bottom: 34px; width: auto; padding: 0 var(--cs-gutter); }
  .hm-note--old { display: none; }
  .hm-note--mid { opacity: .75; }
  .hm-stage > .hm-illustrative { left: 0; right: 0; bottom: 8px; text-align: center; z-index: 3; }

  /* ---- How it works on a phone: four swipeable cards instead of four long sections ----
     One card is one screen: the step, the title, the picture, one line for you and one for me. Dots and a Next button below; the last card ends in "Start now".
     The long sections (and their copy) are for larger screens. */
  .hw-hero .hw-index { display: none; }
  .hw-hero { padding-bottom: 20px; }
  .hw-section { display: none; }
  .hw-story { display: block; padding: 4px 0 44px; }
  .hw-story-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cs-gutter); margin-inline: calc(var(--cs-gutter) * -1); padding: 0 var(--cs-gutter) 6px; scrollbar-width: none; }
  .hw-story-track::-webkit-scrollbar { display: none; }
  .hw-card { flex: 0 0 calc(100% - 36px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; }
  .hw-card-head { display: flex; align-items: center; gap: 12px; }
  .hw-card-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cs-green-bright); color: var(--cs-dark1); font-weight: 800; font-size: 19px; line-height: 1; }
  .hw-card-k { font-family: var(--cs-font-label); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-green); }
  .hw-card h2 { font-size: 30px; line-height: 1.04; letter-spacing: -0.03em; }
  .hw-card-pic { display: flex; justify-content: center; align-items: center; height: 398px; padding: 12px 10px 10px; border-radius: 22px; overflow: hidden; background: radial-gradient(60% 60% at 50% 40%, rgba(59, 214, 43, .14), transparent 70%), #0a1f27; border: 1.5px solid var(--cs-dark4); }
  .hw-card-pic .sc { width: 100%; }   /* full width keeps the scene's own proportions; the frame is as tall as the tallest scene */
  .hw-yi { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.45; color: var(--cs-text-soft); }
  .hw-yi b { flex: none; min-width: 52px; font-family: var(--cs-font-label); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-text); }
  .hw-yi--me b { color: var(--cs-green-bright); }
  .hw-story-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
  .hw-dots { display: flex; gap: 4px; }
  .hw-dots button { width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
  .hw-dots button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px; background: var(--cs-dark4); transition: width .35s var(--cs-spring), margin .35s var(--cs-spring), background .2s; }
  .hw-dots button.is-on::after { width: 22px; margin-left: -11px; background: var(--cs-green-bright); }
  .hw-story-nav .cs-btn { width: auto; min-width: 132px; }
  .hw-story-nav [hidden] { display: none !important; }
  .hw-card[data-card="4"] .sc-toast { display: none; }   /* the title already says it; this keeps the picture inside its frame */

  /* every swipe row snaps with the side padding respected, so the first card does not sit on the screen edge */
  .au-ladder, .au-reasons, .au-sibs, .bp-rows, .ct-feat, .cp-grid--compact, .ct-tabs, .hw-story-track, .hm-quick, .bl-chips { scroll-padding-inline: var(--cs-gutter); }

  .cp-grid > [hidden] { display: none !important; }
  .cp-showmore { width: 100%; margin-top: 24px; }
  .bl-more { margin-top: 24px; }
  .bl-more .cs-btn { width: 100%; }

  /* ---- Expert page: sample work as a swipe row ---- */
  .ex-work-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 22px calc(var(--cs-gutter) * -1) 0; padding: 0 var(--cs-gutter) 8px; scroll-padding-inline: var(--cs-gutter); scrollbar-width: none; }
  .ex-work-grid::-webkit-scrollbar { display: none; }
  .ex-work-grid a { flex: 0 0 78%; scroll-snap-align: start; }

  /* ---- Pricing: the by-board list as quick two-line rows (name and price, then the bar with its range), and a tighter "why it moves" ---- */
  .pr-rows { margin-top: 24px; }
  .pr-rows .pr-desc { display: none; }
  .pr-rows .pr-row { grid-template-columns: 1fr auto; align-items: center; gap: 12px 16px; padding: 16px 2px 18px; }
  .pr-rows .pr-title { font-size: 20px; line-height: 1.1; }
  .pr-rows .pr-typical span { display: none; }
  .pr-rows .pr-typical b { font-size: 30px; }
  .pr-rows .pr-range { display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; }
  .pr-rows .pr-track { flex: 1; height: 8px; }
  .pr-rows .pr-dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 0 10px rgba(214, 255, 210, .6); }
  .pr-rows .pr-range-text { margin: 0; flex: none; width: 136px; text-align: right; font-size: 13px; color: var(--cs-text-faint); white-space: nowrap; } /* one width, so every bar's track is the same length and the bars compare */
  .pr-why { margin-top: 40px; }
  .pr-why-title { font-size: 26px; }
  .pr-why-list { gap: 10px; margin-top: 18px; }
  .pr-why-list li { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; }
  .pr-why-icon { width: 20px; height: 20px; padding: 10px; border-radius: 14px; }
  .pr-why-list p { font-size: 15px; line-height: 1.45; }
  .pr-why-list b { display: block; margin-bottom: 2px; font-size: 18px; }
  .pr-guess { gap: 28px; }
  .pr-ticket-wrap { transform: rotate(0deg); width: 100%; }
  .pr-ticket { padding: 20px 20px 34px; }
  .pr-t-v { font-size: 15px; }

  /* ---- Industry diagrams as printed objects ----
     The diagrams used the page's own dark teal and green, so they read as more cards. Here each one becomes an object on paper (the receipt on Pricing is the
     model): a pale surface with ink type and a deeper green, plus a shape that fits it. One "paper" scope re-themes the shared colour variables inside. */
  .au-org, .au-clone, .au-map, .au-rung, .au-phase, .au2h-card, .au2-gantt, .au2-spaces, .au2-sched {
    --cs-text: #06222c; --cs-text-soft: rgba(6, 34, 44, .76); --cs-text-faint: rgba(6, 34, 44, .58);
    --cs-border: rgba(6, 34, 44, .14); --cs-border-strong: rgba(6, 34, 44, .2); --cs-dark3: rgba(6, 34, 44, .07); --cs-dark4: rgba(6, 34, 44, .17);
    --cs-green: #1a7f12; --cs-green-bright: #1f9a14; --cs-pale: #0e5a0a; --cs-grad-panel: #f1f7ec; --cs-shadow-glow: none;
    color: #06222c; }
  .au-org, .au-map, .au2h-card, .au2-gantt, .au2-spaces, .au2-sched { background: #f1f7ec; border: 0; border-radius: 22px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
  .au-org { padding: 20px 16px; }
  .au-map { padding: 0; overflow: hidden; }
  .au2h-card, .au2-gantt, .au2-spaces, .au2-sched { padding: 22px 18px; }

  /* events: the timeline becomes ticket stubs with notched sides */
  .au-phases { padding-left: 0; gap: 12px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
  .au-phases::before, .au-phase::before { display: none; }
  .au-phase { background: #f1f7ec; border: 0; border-radius: 14px; opacity: 1; animation: none; padding: 16px 22px 16px 26px;
    -webkit-mask: radial-gradient(circle 9px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 9px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
  .au-phase-ad { background: #06222c; color: #d6ffd2; }

  /* startups: the three budgets become punched price tags */
  .au-ladder { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
  .au-rung { background: #f1f7ec; border: 0; border-radius: 16px;
    -webkit-mask: radial-gradient(circle 8px at calc(100% - 22px) 22px, #0000 97%, #000);
    mask: radial-gradient(circle 8px at calc(100% - 22px) 22px, #0000 97%, #000); }
  .au-rung:nth-child(odd) { transform: rotate(-1.2deg); } .au-rung:nth-child(even) { transform: rotate(1deg); }
  .au-rung-bar { background: rgba(6, 34, 44, .12); }
  .au-rung-bar::after { background: linear-gradient(90deg, #6fd35f, #1f9a14); }

  /* agencies: the account structure is an app sheet; the clones are paper copies of a plan */
  .au-org-top { background: #06222c; color: #d6ffd2; box-shadow: none; }
  .au-org-trunk { background: rgba(6, 34, 44, .2); }
  .au-org-clients { background: none; border-top-color: rgba(6, 34, 44, .2); }
  .au-org-client { background: #fff; border-color: rgba(6, 34, 44, .12); }
  .au-org-roles i { border-color: rgba(6, 34, 44, .28); color: #06222c; }
  .au-clone { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
  .au-clone-src, .au-clone-copy { background: #f1f7ec; border-color: rgba(6, 34, 44, .12); box-shadow: none; }
  .au-clone-src { border: 2px solid #1f9a14; }
  .au-clone-copy:nth-child(2) { transform: rotate(.8deg); }
  .au-clone-row--new b { background: #1f9a14; color: #f1f7ec; }
  .au-clone-arrow span { color: #d6ffd2; border-color: rgba(214, 255, 210, .7); }   /* the chip sits on the dark page, between the papers */

  /* maps: a paper map, white roads on pale ground, ink labels, folded in four */
  .au-map-svg > rect:first-child { fill: #e8f0e3; }
  .au-map-svg g[stroke] { stroke: #d2dfcd; }
  .au-map-svg path[stroke], .au-route { stroke: #ffffff; }
  .au-ring { stroke: rgba(6, 34, 44, .28); }
  .au-pin circle { fill: #1f9a14; filter: none; }
  .au-pin--near circle { fill: #06222c; } .au-pin--around circle { fill: #e8f0e3; stroke: #1f9a14; }
  .au-label { fill: #06222c; }
  .au-venue { filter: none; } .au-venue circle { fill: #06222c; }
  .au-map { position: relative; }
  .au-map .hm-illustrative { margin: 0; padding: 4px 16px 12px; }
  .au-map::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(6, 34, 44, .1) 50%, transparent calc(50% + 1px)), linear-gradient(0deg, transparent calc(50% - 1px), rgba(6, 34, 44, .1) 50%, transparent calc(50% + 1px)); }

  /* retail: the weekly hours grid is a paper planner (it used to float on the dark page with no container) */
  main:has(.au-hero) .sc-sched { --cs-text: #06222c; --cs-text-soft: rgba(6, 34, 44, .76); --cs-text-faint: rgba(6, 34, 44, .58); --cs-dark4: rgba(6, 34, 44, .17); --cs-green: #1a7f12; --cs-green-bright: #1f9a14;
    background: #f1f7ec; border-radius: 22px; padding: 1.4em 1.2em 1.2em; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); color: #06222c; }
  main:has(.au-hero) .sc-sched .sc-cell { background: rgba(6, 34, 44, .07); border-color: rgba(6, 34, 44, .08); }
  main:has(.au-hero) .sc-sched .sc-pace { background: #fff; border-color: rgba(6, 34, 44, .12); }
  main:has(.au-hero) .sc-sched .sc-pace-track { background: rgba(6, 34, 44, .12); }
  main:has(.au-hero) .sc-sched .sc-pace-fill { box-shadow: none; }

  /* the wrapper is a "map" only when it holds a map: for the schedule and spaces cards the card itself is the paper */
  .au-map:has(.au2-spaces, .au2-gantt, .au2-sched) { background: none; box-shadow: none; overflow: visible; border-radius: 0; }
  .au-map:has(.au2-spaces, .au2-gantt, .au2-sched)::after { display: none; }
  .au2-lane-track, .au2-space-meter { background: rgba(6, 34, 44, .1); box-shadow: none; }
  .au2-lane-bar { box-shadow: none; }

  /* the ticket in the hero cards: ink with pale type, so it stands out from the paper card around it */
  .au2h-card .au2-ticket { background: #06222c; color: #d6ffd2; box-shadow: 0 10px 24px rgba(6, 34, 44, .3); }
  .au2h-card .au2-ticket::after { border-left-color: rgba(214, 255, 210, .4); }

  /* education: the chart's hand-coloured marks (pale green on the dark card) get paper colours; the year planner is stacked so its bars have room and always draw */
  .au2h-card--chart path[stroke="#d6ffd2"] { stroke: #1a7f12; }
  .au2h-card--chart .au2h-flag path { fill: #1a7f12; }
  .au2h-card--chart path[stroke="#2b3d44"] { stroke: rgba(6, 34, 44, .35); }
  .au2h-card--chart text.au-label { fill: #06222c; }
  .au2-months { margin: 14px 0 6px; }
  .au2-lane { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; }
  .au2-lane-l { flex: none; font-size: 16px; }
  .au2-lane-track { flex: none; width: 100%; height: 28px; }
  .au2-lane-bar { animation: none; }

  /* agencies: compact. The account tree is a row of three small client chips; the clone is one source line and two short copy lines showing only what changed. */
  .au-org { padding: 16px 14px 18px; }
  .au-org-top { padding: 12px 24px; border-radius: 16px; }
  .au-org-top b { font-size: 20px; }
  .au-org-trunk { height: 22px; }
  .au-org-clients { grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; }
  .au-org-client { padding: 10px 10px 12px; gap: 4px; border-radius: 14px; }
  .au-org-client b { font-size: 15px; line-height: 1.1; }
  .au-org-client > span { display: none; }
  .au-org-roles { gap: 4px; margin-top: 4px; flex-direction: column; align-items: flex-start; }
  .au-org-roles i { padding: 2px 7px; font-size: 10px; }
  .au-clone { grid-template-columns: 1fr; gap: 10px; }
  .au-clone-src, .au-clone-copy { padding: 14px 16px; border-radius: 16px; }
  .au-clone-name { margin-bottom: 4px; font-size: 16px; }
  .au-clone-row { padding: 3px 0; font-size: 13px; }
  .au-clone-copy .au-clone-row:not(.au-clone-row--new) { display: none; }
  .au-clone-copy { opacity: 1; transform: none; animation: none; }   /* always drawn: the copies used to fade in and out of a loop */
  .au-clone-copies { gap: 10px; }
  .au-clone-arrow { justify-items: start; }

  /* cards that drain, tick or list: dark meters become light tracks */
  .au2h-meter { background: rgba(6, 34, 44, .1); box-shadow: none; }
  .au2h-meter-fill { box-shadow: none; }
  .au2h-card .au2h-ticks i { background: rgba(6, 34, 44, .16); }
  .au2h-btn { border-color: rgba(6, 34, 44, .2); }

  /* ---- Industry pages (shared template): a swipe row for the three budgets, compact numbered reasons, tighter cost block ---- */
  .au-hero { padding-bottom: 36px; }
  .au-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .au-hero-grid > * { min-width: 0; }
  .au-ladder { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--cs-gutter) * -1); padding: 2px var(--cs-gutter) 8px; scrollbar-width: none; }
  .au-ladder::-webkit-scrollbar { display: none; }
  .au-rung { flex: 0 0 64%; scroll-snap-align: start; grid-template-columns: 1fr; grid-template-areas: 'label' 'budget' 'bar' 'plays'; gap: 8px; padding: 18px; }
  .au-rung-budget { font-size: 36px; }
  /* the three reasons: a swipe row of cards (one idea each) instead of three stacked paragraphs */
  .au-reasons { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 24px calc(var(--cs-gutter) * -1) 0; padding: 0 var(--cs-gutter) 8px; border-top: 0; scrollbar-width: none; }
  .au-reasons::-webkit-scrollbar { display: none; }
  .au-reason { flex: 0 0 82%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 20px; border: 1.5px solid var(--cs-dark4); border-radius: 22px; background: rgba(10, 32, 40, .55); }
  .au-reason-num { grid-row: auto; font-size: 36px; -webkit-text-stroke-width: 1.5px; }
  .au-reason-title { grid-column: 1; grid-row: auto; font-size: 24px; }
  .au-reason-text { grid-column: 1; grid-row: auto; font-size: 16px; line-height: 1.5; }
  .au-cost-top { grid-template-columns: 1fr; gap: 24px; }
  .au-example { grid-template-columns: repeat(3, 1fr); gap: 10px 12px; padding: 18px 16px; }
  .au-example-item b { font-size: 26px; }
  .au-example-item span { font-size: 11px; }
  .au-case-stats { gap: 10px; margin-top: 22px; padding-top: 18px; }

  /* case study card: short text, three stats across */
  .au-case-body { padding: 20px 18px 22px; }
  .au-case-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; margin-top: 12px; }
  .au-case-stats, .au-case-stats--two { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; padding-top: 16px; }
  .au-case-stats b { font-size: 22px; }
  .au-case-stats span { margin-top: 4px; font-size: 11px; letter-spacing: .03em; }
  .au-others-label { margin-top: 28px; }

  /* "who else is on the map": a swipe row of cards, three logos each, no intro line */
  .cs-lead:has(+ .au-sibs) { display: none; }
  .au-sibs { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 22px calc(var(--cs-gutter) * -1) 0; padding: 0 var(--cs-gutter) 8px; border-top: 0; scrollbar-width: none; }
  .au-sibs::-webkit-scrollbar { display: none; }
  .au-sib-item { flex: 0 0 78%; scroll-snap-align: start; border: 0; }
  .au-sib { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; padding: 18px; border: 1.5px solid var(--cs-dark4); border-radius: 22px; background: rgba(10, 32, 40, .55); }
  .au-sib-arrow { display: none; }
  .au-sib-logos .au-logo:nth-child(n+4) { display: none; }
  .au-sib-logos { gap: 14px 22px; }

  /* the closing panel, on every page: smaller, with the pills on one line and no sign-off joke */
  .hm-close-panel { padding: 36px 20px 30px; }
  .hm-close-title { font-size: 38px; }
  .hm-close-pills { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
  .hm-close-pill { padding: 8px 14px; font-size: 12px; }
  .hm-smile { display: none; }
  .hm-help { margin-top: 20px; gap: 0 28px; }

  /* ---- Board types hub: a catalogue, so two columns of image tiles with the typical price ---- */
  .cp-grid--tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cp-grid--tiles .cp-card { flex-direction: column; height: 100%; padding: 8px; border-radius: 20px; }
  .cp-grid--tiles .cp-card-media { flex: none; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--cs-dark3); }
  .cp-grid--tiles .cp-card-media img { object-fit: contain; padding: 6px; }
  .cp-grid--tiles .cp-card-body { padding: 10px 6px 6px; }
  .cp-grid--tiles .cp-brand, .cp-grid--tiles .cp-card-sub, .cp-grid--tiles .cp-card-link { display: none; }
  .cp-grid--tiles .cp-card-title { margin: 0; font-size: 17px; line-height: 1.15; }
  .cp-grid--tiles .cp-card-stats { display: block; margin-top: 6px; padding: 0; border: 0; }
  .cp-grid--tiles .cp-card-stats li:nth-child(2) { display: none; }
  .cp-grid--tiles .cp-card-stats li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .cp-grid--tiles .cp-card-stats b { font-size: 18px; color: var(--cs-green-bright); }
  .cp-grid--tiles .cp-card-stats span { margin: 0; font-size: 12px; color: var(--cs-text-faint); text-transform: none; letter-spacing: 0; }

  /* "why it works" points: a swipe row of cards (one point each), like the industry reasons */
  .bp-rows { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 24px calc(var(--cs-gutter) * -1) 0; padding: 0 var(--cs-gutter) 8px; border-top: 0; scrollbar-width: none; }
  .bp-rows::-webkit-scrollbar { display: none; }
  .bp-rowitem { flex: 0 0 82%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 20px; border: 1.5px solid var(--cs-dark4); border-radius: 22px; background: rgba(10, 32, 40, .55); }
  .bp-row-t { font-size: 24px; }
  .bp-row-d { grid-column: 1; font-size: 16px; }

  /* ---- Cities: country chips, one list at a time, names in a two-column grid ---- */
  .ct-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--cs-gutter) * -1) 18px; padding: 0 var(--cs-gutter); scrollbar-width: none; }
  .ct-tabs::-webkit-scrollbar { display: none; }
  .ct-tabs .bl-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--cs-dark4); background: transparent; color: var(--cs-text-soft); font: 800 14px/1 var(--cs-font-label); cursor: pointer; }
  .ct-tabs .bl-chip i { font-style: normal; font-weight: 700; font-size: 12px; color: var(--cs-text-faint); }
  .ct-tabs .bl-chip.is-on { background: var(--cs-green-bright); border-color: var(--cs-green-bright); color: var(--cs-dark1); }
  .ct-tabs .bl-chip.is-on i { color: var(--cs-dark1); opacity: .65; }
  .ct-group.is-off { display: none; }
  .ct-tabs ~ .ct-group .ct-country { display: none; }
  .ct-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 0; }
  .ct-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--cs-dark4); border-radius: 16px; background: rgba(10, 32, 40, .55); }
  .ct-row-n, .ct-row-geo { display: none; }
  .ct-row-name { font-size: 17px; line-height: 1.15; }

  /* ---- City page: the featured boards as a swipe row of image cards ---- */
  .ct-feat { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 22px calc(var(--cs-gutter) * -1) 0; padding: 0 var(--cs-gutter) 8px; scrollbar-width: none; }
  .ct-feat::-webkit-scrollbar { display: none; }
  .ct-feat-item { flex: 0 0 76%; scroll-snap-align: start; }
  .ct-feat-media { aspect-ratio: 4 / 3; }
  .ct-feat-name { font-size: 18px; }

  /* ---- Board-type pages: "what your ad needs" as a clean list of sizes (each with a small shape at its real proportions) ---- */
  .bp-fit2 .bp-cards { display: grid; grid-template-columns: 1fr; justify-items: stretch; align-items: stretch; gap: 0; margin-top: 22px; padding: 0; border-radius: 0; background: none; border-top: 1px solid var(--cs-border-strong); }
  .bp-card { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--cs-border-strong); transform: none; }
  .bp-card-box { grid-row: 1 / 3; justify-self: center; width: calc(72px * min(1, var(--ar, 1))) !important; height: calc(72px / max(1, var(--ar, 1))) !important; border-width: 3px; border-radius: 8px; box-shadow: none; }
  .bp-card-mark { display: none; }
  .bp-card-tick { top: -9px; right: -9px; width: 20px; height: 20px; font-size: 11px; }
  .bp-card-label { margin-top: 0; align-self: end; font-size: 15px; letter-spacing: .06em; }
  .bp-card-sub { align-self: start; font-size: 14px; }
  .bp-card--bad .bp-card-box { border-width: 2px; }
  .bp-stamp { display: none; }

  /* ---- Home: "Whatever you're promoting" ----
     Eight tall rows with a hover state become a two-column grid of tiles: scan, tap, go. */
  .hm-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; border-top: 0; }
  .hm-row-item { border: 0; }
  .hm-row { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; min-height: 156px; padding: 16px 14px 18px; border: 1.5px solid var(--cs-dark4); border-radius: 20px; background: rgba(10, 32, 40, .55); }
  .hm-row:active { background: rgba(59, 214, 43, .16); border-color: var(--cs-green-bright); }
  .hm-row-icon { width: 22px; height: 22px; padding: 11px; border-radius: 14px; }
  .hm-row-kicker { margin-top: 6px; font-size: 12px; letter-spacing: .06em; line-height: 1.2; }
  .hm-row-title { font-size: 20px; line-height: 1.1; }
  .hm-row-text { display: none; }
  .hm-row-arrow { position: absolute; top: 14px; right: 14px; font-size: 20px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .cs-mbar { transition: none; } }

/* Article templates share the same reading surface and metadata rail. */
@media (max-width: 767px) {
  .cp-body3 { gap: 28px; }
  .cp-body3 .cp-rail { order: 2; grid-template-columns: 1fr; padding: 24px 0 0; border-bottom: 0; border-top: 1px solid var(--cs-border); gap: 18px; }
  .cp-body3 .cp-prose { min-width: 0; font-size: 18px; line-height: 1.65; overflow-wrap: anywhere; }
  .cp-body3 .cp-prose h2 { font-size: 28px; margin-top: 1.8em; padding-top: .8em; }
  .cp-body3 .cp-prose blockquote { padding-left: 18px; font-size: 22px; }
  .cp-body3 .cp-prose img { max-height: none; object-fit: contain; border-radius: 12px; }
  .cp-body3 .cp-prose table { display: block; max-width: 100%; overflow-x: auto; }
  .cp-body3 .cp-prose pre { overflow-x: auto; white-space: pre; }
  .bl-top .cp-title { font-size: clamp(32px, 9vw, 46px); line-height: 1.08; overflow-wrap: anywhere; }
  .bl-top .bl-topic { transform: none; box-shadow: none; margin-bottom: 16px; }
  .bl-byline { margin-top: 22px; }
  .bl-by-row b { font-size: 16px; }

  /* Full-width navigation rows borrow the homepage's industry-table rhythm. */
  .cs-nav-drawer { max-height: calc(100dvh - 64px); overscroll-behavior: contain; padding: 12px 0 calc(28px + env(safe-area-inset-bottom)); }
  .cs-drawer-group { border-bottom: 1px solid var(--cs-border-strong); }
  .cs-drawer-group > .cs-drawer-label { display: flex; align-items: center; justify-content: space-between; min-height: 72px; margin: 0; color: var(--cs-text); font: 800 28px/1.1 var(--cs-font); letter-spacing: -.03em; text-transform: none; cursor: pointer; list-style: none; }
  .cs-drawer-label::-webkit-details-marker { display: none; }
  .cs-drawer-group > summary::after { content: '+'; font-size: 28px; color: var(--cs-green-bright); }
  .cs-drawer-group[open] > summary::after { content: '−'; }
  .cs-drawer-group[open] > summary { color: var(--cs-green-bright); }
  .cs-nav-drawer .cs-nav-menu { display: block; padding: 0 0 16px; }
  .cs-nav-drawer .cs-nav-menu li a { display: flex; gap: 14px; align-items: center; min-height: 68px; padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--cs-border); font-size: 18px; }
  .cs-nav-drawer .cs-nav-menu li a::after { content: '↗'; margin-left: auto; color: var(--cs-green-bright); }
  .cs-nav-drawer .cs-nt { min-width: 0; }
  .cs-nav-drawer .cs-nt b { font-size: 18px; }
  .cs-nav-drawer .cs-nt > span { white-space: normal; font-size: 14px; line-height: 1.35; }
  .cs-drawer-actions { border-top: 1px solid var(--cs-border); padding-top: 20px; margin-top: 24px; }
  .cs-drawer-actions .cs-btn { flex: 1; }

  .cs-footer { padding-top: 36px; }
  .cs-foot-top { gap: 32px; }
  .cs-foot-say { max-width: 20ch; font-size: 30px; margin-top: 20px; }
  .cs-foot-cols { gap: 28px 20px; padding-top: 28px; border-top: 1px solid var(--cs-border-strong); }
  .cs-foot-intro .cs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cs-foot-intro .cs-link { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
  .cs-foot-title { color: var(--cs-green-bright); }
  .cs-mk { gap: 12px; padding: 20px 0; }
  .cs-mk-cities { gap: 4px 20px; }
  .cs-mk-cities a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
  .cs-foot-mark { margin-top: 12px; }
  .cs-foot-col ul { margin-top: 10px; }
  .cs-foot-col a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 15px; line-height: 1.3; }
  .cs-foot-markets { margin-top: 32px; }
  .cs-foot-bottom { align-items: flex-start; gap: 16px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .cs-foot-legal { gap: 0 20px; }
  .cs-foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Both step stories use one bounded illustration frame; no desktop absolute-positioned stack. */
@media (max-width: 767px) {
  .hm-stepper.has-phone-story { display: none; }
  .hw-story--home { margin-top: 26px; padding: 0; }
  .hw-card { min-width: 0; }
  .hw-card-head h3 { font-size: 24px; line-height: 1.1; letter-spacing: -.03em; }
  .hw-card-pic { position: relative; height: 350px; align-items: flex-start; padding: 14px 12px 32px; }
  .hw-card-pic .sc { font-size: 11px; }
  .hw-illustrative { position: absolute; bottom: 10px; right: 14px; font: 700 10px/1 var(--cs-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--cs-text-faint); }
  .hw-card-pic .sc-pick { display: grid; gap: 8px; aspect-ratio: auto; }
  .hw-card-pic .sc-mapcard { position: relative; width: 100%; height: 108px; border-radius: 12px; }
  .hw-card-pic .sc-search { top: 8px; left: 8px; font-size: 11px; padding: 7px 10px; }
  .hw-card-pic .sc-typed { width: 12.4ch; animation: none; border-right: 0; }
  .hw-card-pic .sc-cursor { display: none; }
  /* The selection list becomes a paper docket, using the existing receipt material. */
  .hw-card-pic .sc-cards { position: static; width: auto; padding: 6px 10px; gap: 0; background: #f1f7ec; border-radius: 8px; box-shadow: 0 8px 18px #0003; }
  .hw-card-pic .sc-card { opacity: 1; animation: none; transform: none; margin: 0; padding: 6px 0; border: 0; border-bottom: 1px dashed #06222c33; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .hw-card-pic .sc-card:last-child { border-bottom: 0; }
  .hw-card-pic .sc-card-img { width: 36px; height: 28px; }
  .hw-card-pic .sc-card-type { color: #47604d; font-size: 8px; }
  .hw-card-pic .sc-card-name { color: #06222c; font-size: 11px; }
  .hw-card-pic .sc-bar { position: static; width: auto; opacity: 1; animation: none; margin: 0; padding: 7px; font-size: 11px; }
  .hw-card-pic .sc-sched { padding-top: 8px; }
  .hw-card-pic .sc-live { gap: 10px; }
}
@media (max-width: 767px) {
  .hw-card-pic .bb--live { width: 80%; margin-inline: auto; }
}

@media (max-width: 767px) {
  .hm-price-top { gap: 24px; }
  .hm-play-block { margin-top: 24px; padding-top: 20px; }
  .hm-play-text { margin-top: 10px; font-size: 17px; }
  .hm-play-turns { gap: 8px; margin-top: 12px; }
  .hm-play-ad { padding: 6px; border-width: 3px; border-radius: 10px; font-size: 21px; }
  .hm-play-turn-label { font-size: 12px; line-height: 1.25; margin-top: 8px; }
  .hm-play-count { font-size: 15px; }
  .hm-play-count--other { font-size: 12px; }
  .hm-play-receipt.hm-receipt { margin-top: 20px; padding: 14px 16px; }
  .hm-play-receipt .hm-receipt-label { font-size: 10px; }
  .hm-play-receipt .hm-receipt-key { font-size: 14px; }
  .hm-play-receipt .hm-receipt-val { font-size: 23px; }
  .hm-play-caption { margin-top: 14px; font-size: 12px; }
}

@media (max-width: 767px) {
  /* Price context follows the controls; the play definition stays before the calculator. */
  .hm-price-context { order: 6; margin-top: 20px; }
  .hm-price-context .hm-legend { gap: 8px; }
  .hm-price-context .hm-legend-item { flex: 1; justify-content: center; gap: 6px; padding: 8px; }
  .hm-price-context .hm-legend-price { font-size: 20px; }
  .hm-price-context .hm-legend-name { font-size: 11px; }
}

@media (max-width: 767px) {
  .hm-estimate-context.hm-receipt { order: 6; margin-top: 18px; padding: 16px; }
  .hm-price-context { order: 7; }
  .hm-calc > .cs-footnote { order: 8; }
}

/* One compact planning docket, with price detail available on demand. */
@media (max-width: 767px) {
  .hm-estimate-context.hm-receipt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 16px; }
  .hm-airtime, .hm-schedule-rate { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 0; border: 0; }
  .hm-airtime { grid-column: 1; grid-row: 1; }
  .hm-schedule-rate { grid-column: 2; grid-row: 1; padding-left: 14px; border-left: 1px dotted #06222c33; }
  .hm-airtime > b, .hm-schedule-rate > b { font-size: 34px; }
  .hm-airtime > span, .hm-schedule-rate > span { font-size: 12px; }
  .hm-airtime small, .hm-schedule-rate small { margin-top: 2px; font-size: 10px; }
  .hm-schedule-label { grid-column: 1 / -1; margin: 0; padding-top: 10px; font-size: 10px; }
  .hm-spread-diagram { grid-column: 1 / -1; margin: 0; gap: 6px; }
  .hm-spread-part { gap: 5px; }
  .hm-spread-caption { font-size: 12px; }
  .hm-estimate-assumption { grid-column: 1 / -1; margin: 0; font-size: 10px; }
  .hm-estimate-details { order: 8; margin-top: 6px; }
  .hm-estimate-details .hm-price-context { margin-top: 8px; }
  .hm-estimate-details .hm-panel-tag { display: none; }
  .hm-estimate-details .cs-footnote { margin-top: 12px; font-size: 12px; }
}

@media (max-width: 767px) {
  .hm-formats-head { display: block; margin-bottom: 24px; }
  .hm-formats-head .cs-link { margin-top: 16px; font-size: 16px; }
  .hm-formats-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cs-gutter); margin-inline: calc(var(--cs-gutter) * -1); padding: 0 var(--cs-gutter) 8px; scrollbar-width: none; }
  .hm-formats-rail::-webkit-scrollbar { display: none; }
  .hm-format { display: flex; flex-direction: column; flex: 0 0 88%; min-width: 0; scroll-snap-align: start; }
  .hm-format-photo { height: auto; aspect-ratio: 4 / 3; border-radius: 20px; }
  .hm-format-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 0 0; }
  .hm-format-name { font-size: 24px; }
  .hm-format-description { font-size: 16px; }
  .hm-format-caption .cs-link { font-size: 16px; }
}

@media (max-width: 767px) {
  .hm-formats-actions { align-items: flex-start; gap: 0; }
  .hm-formats-controls { display: none; }
}

@media (max-width: 767px) {
  .hm-hangtag--format { width: 84px; top: 12px; right: 12px; }
  .hm-hangtag--format .hm-hangtag-price { font-size: 24px; }
  .hm-hangtag--format .hm-hangtag-body { padding-top: 27px; }
}

@media (max-width: 767px) {
  /* Contact is one short introduction, two useful routes, then the form. */
  .fm-wrap { gap: 28px; }
  .fm-copy .cs-display { font-size: clamp(48px, 13vw, 72px); }
  .fm-copy .cs-lead { margin-top: 18px; font-size: 19px; }
  .fm-alt { margin-top: 24px; }
  .fm-alt-item { padding: 12px 0; }
  .fm-panel { padding: 24px 20px; }
  .fm-panel-title { font-size: 28px; }
  .fm-form { gap: 18px; }
  .fm-submit .cs-btn { width: 100%; }
}