/* BCC Field Guide System v1.1 — cream masthead and explicit surface roles.
   Shared identity and editorial layer, loaded after each experience's own CSS.
   Preserve scientific palettes, canvas geometry and task-specific control layouts. */
:root {
 --bcc-paper: #faf8f2;
 --bcc-cream: #efe5d2;
 --bcc-panel: #efede4;
 --bcc-ink: #222722;
 --bcc-pine: #203d33;
 --bcc-copper: #934c2e;
 --bcc-sandstone: #dcaa7d;
 --bcc-muted: #596157;
 --bcc-rule: #b9beb3;
 --bcc-reading: 68ch;
 --bcc-columns: 12;
 --bcc-gap: 24px;
 --bcc-unit: 8px;
 --paper: var(--bcc-paper);
 --paper-2: var(--bcc-panel);
 --paper-3: #e4e1d5;
 --card: #fffefa;
 --ink: var(--bcc-ink);
 --ink-2: #424a42;
 --ink-3: var(--bcc-muted);
 --forest: var(--bcc-pine);
 --night: #152b25;
 --clay: var(--bcc-copper);
 --clay-2: #b66542;
 --focus: var(--bcc-copper);
 --rule: #22272226;
 --rule-2: #22272245;
 --serif: Gelasio, Georgia, 'Times New Roman', serif;
 --sans: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
 --max: 1240px;
 --gutter: clamp(20px, 4vw, 48px);
}
body[data-bcc-field-guide="site"] {
 --max: 1240px;
 --paper: var(--bcc-paper);
 --forest: var(--bcc-pine);
 --clay: var(--bcc-copper);
 --ink-3: var(--bcc-muted);
 background: var(--paper);
 color: var(--ink);
}
.bcc-grid { display: grid; grid-template-columns: repeat(var(--bcc-columns), minmax(0, 1fr)); gap: var(--bcc-gap); }
.bcc-reading { max-width: var(--bcc-reading); }

/* Light surface: the original two-color mark sits directly on warm cream. */
.site-header, .page-index .site-header.is-overlay {
 background: var(--bcc-cream);
 color: var(--bcc-pine);
 border-top: 0;
 border-bottom: 1px solid var(--bcc-copper);
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
}
.header-inner { min-height: 112px; padding-block: 12px; }
.site-header .brand img { width: 220px; filter: none; }
.site-header .site-nav a, .site-header .menu-toggle { color: var(--bcc-pine); }
.identity-caption { border-color: var(--bcc-rule); }
.identity-caption span { color: var(--bcc-muted); }
.site-header .site-nav a:hover, .site-header .site-nav a[aria-current] {
 color: var(--bcc-copper); border-color: var(--bcc-copper);
}
.site-header .site-nav .nav-contact, .site-header .menu-toggle { border-color: var(--bcc-pine); }
.site-header .site-nav .nav-contact { border-radius: 20px; }
.site-header .site-nav .nav-contact:hover { background: var(--bcc-pine); color: var(--bcc-paper); }
.site-header :focus-visible { outline-color: var(--bcc-copper); }
.site-footer { background: var(--bcc-pine); border-top: 1px solid var(--bcc-sandstone); padding-block: 56px 24px; }
.site-footer .footer-brand .brand { position: relative; display: inline-block; background: transparent; border-radius: 0; padding: 0; margin-bottom: 24px; }
.site-footer .brand img { display: block; width: 220px; background: transparent; filter: brightness(0) invert(1); }
@supports (mask-image: url("assets/bcc-logo-600.webp")) or (-webkit-mask-image: url("assets/bcc-logo-600.webp")) {
 .site-footer .brand::before { content: ''; position: absolute; inset: 0; background: var(--bcc-cream); -webkit-mask: url("assets/bcc-logo-600.webp") center / contain no-repeat; mask: url("assets/bcc-logo-600.webp") center / contain no-repeat; }
 .site-footer .brand img { opacity: 0; filter: none; }
}
.site-footer .footer-brand p, .site-footer .footer-legal, .site-footer a { color: var(--bcc-cream); }
.site-footer a:hover { color: #f1c39d; }
.site-footer :focus-visible { outline: 2px solid var(--bcc-sandstone); outline-offset: 6px; }
.site-footer .footer-legal { border-color: #efe5d24d; }

/* Narrative headings are Gelasio; navigation, controls, captions and data use Inter. */
body[data-bcc-field-guide="site"] main h1,
body[data-bcc-field-guide="site"] .page-intro h1,
body[data-bcc-field-guide="site"] .page-heading h1,
body[data-bcc-field-guide="site"] .landmark-head h2,
body[data-bcc-field-guide="site"] .card-section-head h2,
body[data-bcc-field-guide="site"] :is(.section-topline, .app-head, .rocks-head, .conservancy, .product-story, .task-rows, .purpose-section) h2 {
 font-family: var(--serif); font-weight: 500; letter-spacing: -.025em;
}
body[data-bcc-field-guide="site"] :is(.page-intro, .page-heading, .visit-intro, .travel-intro, .vp-hero, .sky-masthead, .lm-heading, .lab-masthead, .collection-intro, .lb-hero) h1 {
 font-size: clamp(38px, 5vw, 64px); line-height: 1.1;
}
body[data-bcc-field-guide="site"] .card-title { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; }
body[data-bcc-field-guide="site"] .pack-content :is(h1,h2,h3) { font-family: var(--serif); }
body[data-bcc-field-guide="site"] :is(.eyebrow,.lab-kicker,.lm-kicker,.vp-kicker,.landmark-kicker) {
 font-family: var(--sans); font-weight: 600; letter-spacing: .1em;
}
.page-intro .lead, .page-heading .lead { max-width: 42em; }
.prose { max-width: var(--bcc-reading); }
.page-intro, .page-heading, .collection-intro { padding-top: clamp(40px, 5vw, 64px); }

/* BCC's chapter cue: a vertical copper rule, with the landscape left open. */
.landmark-head > div:first-child {
 border-top: 0; border-left: 3px solid var(--bcc-copper); padding: 0 0 0 18px;
}
.landmark-kicker span { background: var(--bcc-pine); }
.card-section-head, .section-topline { border-top: 0; border-left: 3px solid var(--bcc-copper); padding: 0 0 0 18px; }
.card-section-head h2, .section-topline h2 { margin-block: 0; }
.product-story, .work-feature { border-top: 0; border-left: 3px solid var(--bcc-copper); }
.fold-section, .collection-reading, .collection-note { border-top-color: var(--bcc-rule); }
body[data-bcc-field-guide="site"] :is(.sky-guide,.sky-before-you-go,.sky-methods,.travel-drive,.travel-reading,.travel-sources,.vp-library,.vp-comparison,.vp-preparation,.vp-method,.lm-method,.lm-section-heading,.lb-section) > h2 {
 border-left: 3px solid var(--bcc-copper); padding-left: 18px;
}

/* Preserve the approved landscape / phone composition on the homepage. */
.page-index .hero { --hero-card-width: clamp(220px, 21vw, 280px); }
.page-index .hero-copy { background: var(--bcc-pine); border: 0; border-radius: 20px; left: var(--edge); bottom: 48px; width: min(590px, calc(100% - 2 * var(--edge) - var(--hero-card-width) - 32px)); }
.page-index .hero-app-name { font-family: var(--serif); }
.home-model-nav { border-color: var(--bcc-copper); }
.hero-store-label { background: var(--bcc-pine); }
.page-index .hero-copy :focus-visible { outline-color: #f1c39d; }

/* Shared reading surfaces. Specialized scientific colors retain their meanings. */
.travel-page { --map-paper: var(--bcc-panel); --map-clay: var(--bcc-copper); --map-green: var(--bcc-pine); }
.lb-main { --lb-green: var(--bcc-pine); --lb-muted: var(--bcc-muted); }
.page-visit-planner { --vp-muted: var(--bcc-muted); }
.page-main > .lab-page { max-width: calc(var(--max) + 2 * var(--gutter)); }
.guide-spread, .purpose-section, .product-story, .work-feature, .visit-feature, .visit-before,
.landmark-head, .landmark-plates, .collection-grid, .journey-columns, .lb-grid {
 column-gap: var(--bcc-gap);
}
.card-media, .card-link, .card-media img, .product-landscape, .collection-card,
.collection-image, .visit-figure img, .vp-hero img, .landmark-stage, .landmark-card { border-radius: 0; }
.btn, .button, .hub-paths a, .collection-filters button, .collection-tools input,
.vp-button, .travel-button, .product-chapters a { border-radius: 0; }
.btn, .button, .collection-filters button, .vp-button { min-height: 44px; }
.collection-filters button[aria-pressed="true"] { background: var(--bcc-pine); color: var(--card); }
.collection-tools input { border-color: #596157; }
.landmark-facts dt, .landmark-facts dd { font-family: var(--sans); }
.landmark-plate > figcaption { font-family: var(--sans); line-height: 1.6; }

@media (max-width: 999px) { :root { --bcc-columns: 8; --bcc-gap: 20px; } }
@media (max-width: 900px) {
 .site-header .brand img { width: 180px; }
 .header-inner { min-height: 96px; }
 .js .site-header .site-nav { background: var(--bcc-cream); border-color: var(--bcc-rule); }
 .js .site-header .site-nav a[aria-current] { background: var(--bcc-panel); border-color: var(--bcc-copper); }
 .js .site-header .site-nav .nav-contact { background: var(--bcc-pine); color: var(--bcc-paper); border-radius: 20px; }
}
@media (max-width: 699px) { :root { --bcc-columns: 4; --bcc-gap: 16px; } }
@media (max-width: 540px) {
 .card-section-head, .section-topline, .landmark-head > div:first-child { padding-left: 14px; }
 body[data-bcc-field-guide="site"] .page-intro h1, body[data-bcc-field-guide="site"] .page-heading h1 { font-size: clamp(34px, 9vw, 42px); }
}
html:not(.js) .page-index .site-header.is-overlay { background: var(--bcc-cream); }
@media (prefers-reduced-motion: reduce) {
 .card-link:hover .card-media img { transform: none; }
}
@media print {
 body[data-bcc-field-guide="site"] { background: white; color: black; }
 .site-header, .site-footer { background: white; color: black; }
 .site-header .brand img, .site-footer .brand img { filter: none; opacity: 1; }
 .site-footer .brand::before { display: none; }
 .site-footer .footer-brand p, .site-footer .footer-legal, .site-footer a { color: var(--bcc-ink); }
 .card-section-head, .section-topline, .landmark-head > div:first-child { break-after: avoid; }
}

/* Organization-first identity and a responsive app destination. */
html { scroll-padding-top: calc(var(--site-header-height, 112px) + 24px); }
.site-header { position: sticky; top: 0; }
.page-index .site-header.is-overlay { position: fixed; inset: 0 0 auto; }
.header-inner { gap: 24px; }
.header-identity { margin-right: auto; }
.header-utilities { display: flex; align-items: center; gap: 12px; }
.header-app-slot { display: block; width: 140px; height: 60px; }
.header-app-link { display: flex; width: 140px; height: 60px; padding: 10px; align-items: center; justify-content: center; }
.app-store-badge { display: block; width: 120px; height: 40px; max-width: none; border-radius: 0; filter: none; }
.header-app-link:focus-visible { outline: 2px solid var(--bcc-copper); outline-offset: 1px; }
.page-index .hero-store-label {
 display: flex; align-items: center; justify-content: center; min-height: 60px;
 margin: 4px auto 0; padding: 10px; background: transparent; box-shadow: none;
}
.page-index .hero-phone-link:hover .hero-store-label { background: transparent; }
.page-index .hero-vision { margin: 0 0 16px; font: 500 clamp(20px, 1.8vw, 25px)/1.35 var(--serif); color: #f1c39d; }
.page-index .hero h1 { font-size: clamp(42px, 4.2vw, 62px); margin-bottom: 20px; }
.page-index .hero-copy { padding: 32px; }
.page-index .hero-kicker { margin-bottom: 14px; }
.page-index .hero-lede { margin-bottom: 24px; font: 400 17px/1.6 var(--sans); color: var(--bcc-paper); }
.page-index .hero-location { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 0; font: 400 18px/1.5 var(--sans); color: var(--bcc-cream); }
.page-index .hero-location > span:first-child { flex: 0 0 auto; }
.page-index .hero-distinction { margin: 10px 0 0; font: 400 15px/1.5 var(--sans); color: var(--bcc-cream); }
.page-index .hero-distinction dfn { font: 600 18px/1.25 var(--serif); }
.page-index .hero-definition { font: italic 400 15px/1.5 var(--serif); }
@media (max-width: 900px) {
 html { scroll-padding-top: max(155px, calc(var(--site-header-height, 112px) + 24px)); }
 .header-inner { gap: 16px; }
 .header-identity { min-width: 0; }
 .header-identity .brand { flex-shrink: 1; min-width: 0; }
 .site-header .brand img { max-width: 100%; }
 .header-utilities { flex-direction: column; align-items: flex-end; gap: 0; flex-shrink: 0; }
 .header-app-slot:has([hidden]) { display: none; }
 .site-header .site-nav { order: 3; }
 .js .site-header .site-nav { top: 100%; }
 .page-index .hero-app { width: clamp(146px, 25vw, 210px); }
}
@media (max-width: 360px) {
 .header-inner { gap: 12px; }
 .header-app-slot, .header-app-link { width: 128px; height: 48px; }
 .header-app-link { padding: 4px; }
}
@media (max-aspect-ratio: 1/1) {
 .page-index .hero h1 { font-size: clamp(36px, 8.5vw, 60px); }
 .page-index .hero-copy { padding-block: 26px 32px; }
}
html:not(.js) .page-index .site-header.is-overlay { position: relative; }
@media (max-width: 900px) {
 html:not(.js) .header-inner { flex-wrap: wrap; }
 html:not(.js) .header-identity { width: auto; flex: 1; }
 html:not(.js) .site-nav { flex-basis: 100%; }
}
@media print {
 .site-header, .page-index .site-header.is-overlay { position: relative; }
 .header-utilities { display: none; }
}

/* A compact app card connects the landscape to the primary App Store action. */
.page-index .hero-app {
 width: var(--hero-card-width); top: auto; bottom: 48px; padding: 24px 20px 16px;
 background: var(--bcc-cream); border: 0; border-radius: 20px;
 box-shadow: 0 12px 32px #182a2126;
}
.page-index .hero-app .iphone-mockup { --device-width: clamp(152px, 13vw, 184px); width: var(--device-width); max-width: none; margin-inline: auto; }
.hero-app-description { display: block; margin: 0; font: 400 14px/1.55 var(--sans); color: var(--bcc-pine); }
.page-index .hero-phone-link { display: flex; flex-direction: column; gap: 16px; align-items: center; border-radius: 12px; }
.page-index .hero-app-description { text-align: center; max-width: 22ch; }
.page-index .hero-store-label { margin: 0; padding: 4px 0; min-height: 48px; }
.page-index .hero-lede { margin-bottom: 0; }
.hoodoo-hero h1 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -.025em; }
.hoodoo-hero .product-promise { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; }
.hoodoo-hero .product-landscape { height: 440px; }
.conservancy-app { display: grid; grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr); gap: 32px; align-items: center; padding-block: 48px; border-top: 1px solid var(--bcc-rule); }
.conservancy-app h2 { max-width: 18ch; font: 500 clamp(30px, 3.5vw, 44px)/1.15 var(--serif); color: var(--bcc-pine); margin: 14px 0 22px; }
.conservancy-app .app-intro { max-width: 44em; }
.conservancy-app figure { margin: 0; justify-self: center; max-width: 180px; }
.conservancy-app figure img { display: block; width: 100%; height: auto; border: 1px solid var(--bcc-rule); }
.conservancy-app figcaption { margin-top: 12px; font: 400 11px/1.5 var(--sans); color: var(--bcc-muted); }
.conservancy-app .app-availability { margin-block: 20px; }
@media (max-width: 680px) {
 .hoodoo-hero h1 { font-size: clamp(34px, 8vw, 48px); }
 .hoodoo-hero .product-landscape { height: 290px; }
 .conservancy-app { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 36px; }
 .conservancy-app figure { max-width: 144px; justify-self: start; }
}

/* Read the promise first, then meet the app against the landscape. */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
 .page-index .hero {
  --hero-copy-radius: 20px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(340px, auto);
  height: auto; min-height: 0; padding-top: var(--site-header-height, 99px);
 }
 .page-index .hero-copy {
  grid-area: 1 / 1; position: relative; inset: auto; width: auto; margin: 0;
  padding: 28px var(--gutter) 32px; border-left: 0; border-radius: 0 0 var(--hero-copy-radius) var(--hero-copy-radius);
 }
 .page-index .hero h1 { font-size: clamp(34px, 8.5vw, 52px); }
 /* Paint the landscape through the card's rounded cutouts, including before WebGL loads. */
 .page-index .hero-poster, .page-index .hero-canvas { grid-area: 2 / 1; inset: calc(-1 * var(--hero-copy-radius)) 0 0; height: calc(100% + var(--hero-copy-radius)); }
 .page-index .hero-poster img { inset: 0; height: 100%; }
 .page-index .hero-app {
  grid-area: 2 / 1; position: relative; inset: auto; align-self: center; justify-self: center;
  width: min(340px, calc(100% - 2 * var(--gutter))); margin: 28px var(--gutter); padding: 20px;
 }
 .page-index .hero-phone-link { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px 16px; align-items: center; }
 .page-index .hero-app .iphone-mockup { --device-width: 148px; grid-column: 1; grid-row: 1 / 3; width: var(--device-width); margin: 0; }
 .page-index .hero-app-description { grid-column: 2; align-self: end; margin: 0; font-size: 13px; text-align: left; }
 .page-index .hero-store-label { grid-column: 2; align-self: start; min-height: 48px; margin: 0; padding: 4px 0; }
 html:not(.js) .page-index .hero { padding-top: 0; }
}
@media (max-width: 380px) {
 .page-index .hero-app { padding: 20px; }
 .page-index .hero-phone-link { display: flex; gap: 16px; }
 .page-index .hero-app .iphone-mockup { --device-width: 144px; margin-inline: auto; }
 .page-index .hero-app-description { align-self: center; text-align: center; }
 .page-index .hero-store-label { align-self: center; }
}

/* Three brief visitor benefits; keep the complete 3D exhibits next. */
.app-benefits { display: block; padding-block: clamp(32px, 4vw, 52px); border-top: 0; }
.app-benefits-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px 40px; margin-bottom: 30px; }
.app-benefits h2 { max-width: 22ch; margin: 10px 0 0; }
.app-benefits .app-intro { max-width: 35em; margin: 0; color: var(--bcc-muted); }
.app-benefits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.app-benefit { display: grid; grid-template-columns: minmax(72px, 100px) minmax(0, 1fr); gap: 20px; align-items: center; padding-top: 22px; border-top: 1px solid var(--bcc-rule); }
.app-benefit > img { display: block; width: 100%; height: auto; border: 1px solid var(--bcc-rule); }
.app-benefit h3 { font: 500 clamp(21px, 2vw, 26px)/1.2 var(--serif); color: var(--bcc-pine); margin: 0 0 12px; }
.app-benefit p { font-size: 14px; line-height: 1.6; margin: 0; }
.app-benefit .app-benefit-number { font: 600 11px/1.3 var(--sans); color: var(--bcc-copper); margin-bottom: 10px; }
.app-benefits-footer { display: flex; align-items: end; justify-content: space-between; gap: 20px 40px; margin-top: 28px; }
.app-benefits-status { margin: 0 0 8px; font-size: 13px; color: var(--bcc-muted); }
.app-benefits .app-availability { margin: 0 0 12px; padding: 0; border: 0; background: none; }
.app-screens-note { max-width: 33em; margin: 0; font: 400 12px/1.6 var(--sans); color: var(--bcc-muted); }
@media (max-width: 1100px) {
 .app-benefits-grid { gap: 20px; }
 .app-benefit { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 800px) {
 .app-benefits-heading { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }
 .app-benefits-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
 .app-benefit { grid-template-columns: 80px minmax(0, 1fr); gap: 24px; }
 .app-benefit h3 { font-size: 23px; }
 .app-benefits-footer { flex-direction: column; align-items: start; }
}
@media print { .page-index .hero { padding-top: 0; } }

/* A thin device rim preserves the genuine screen's native proportions. */
.iphone-mockup {
 --device-width: 184px; width: var(--device-width); padding: calc(var(--device-width) * .032);
 border: 1px solid #737570; border-radius: calc(var(--device-width) * .16);
 background: #17191a; box-shadow: 0 12px 24px #10201833;
}
.iphone-mockup::before, .iphone-mockup::after, .iphone-island { display: none; }
.iphone-mockup img { display: block; width: 100%; height: auto; border-radius: calc(var(--device-width) * .125); }

/* One description and one screen. Details stay in the lower information area. */
.app-page-hero { grid-template-columns: 1fr 1fr; gap: 64px; padding-block: 48px; }
.app-page-hero h1 { max-width: 18ch; margin: 0; font-size: clamp(36px, 4vw, 60px); line-height: 1.15; color: var(--bcc-pine); }
.app-page-hero .hoodoo-hero-copy { padding: 0; border: 0; }
.app-preview-stage { display: flex; justify-content: center; align-items: center; padding: 36px; background: var(--bcc-pine); border-radius: 20px; }
.app-preview .iphone-mockup { --device-width: 200px; }
.app-overview { position: relative; padding-block: 12px 40px; }
.app-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.app-overview-grid article { position: relative; padding-top: 20px; border-top: 1px solid var(--bcc-rule); }
.app-overview-grid h3 { font: 500 26px/1.2 var(--serif); color: var(--bcc-pine); margin: 0 0 12px; }
.app-overview-grid p { margin: 0; font: 400 16px/1.6 var(--sans); }
.app-ready { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 64px; padding-block: 40px; border-top: 1px solid var(--bcc-rule); }
.app-ready-intro { position: relative; }
.app-ready h2 { font: 500 clamp(28px, 3vw, 38px)/1.15 var(--serif); color: var(--bcc-pine); margin: 0 0 24px; }
.app-ready-intro > p { max-width: 30em; }
.app-ready .app-availability { margin-block: 24px; }
.app-questions { position: relative; min-width: 0; }
.app-questions details { margin: 0; padding: 0; border-top: 0; }
.app-questions summary { padding-block: 20px; font-size: 16px; }
.app-questions details > p { font-size: 15px; line-height: 1.65; }
.app-offline { margin: 0 0 18px; font-size: 15px; line-height: 1.65; }
.app-offline > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; margin-bottom: 14px; }
.app-offline dt { font-weight: 600; color: var(--bcc-pine); }
.app-offline dd { margin: 0; }
.app-about { padding-block: 12px 32px; font: 400 14px/1.6 var(--sans); color: var(--bcc-muted); }
@media (max-width: 900px) {
 .app-page-hero, .app-ready { gap: 32px; }
 .app-preview-stage { padding: 28px; }
 .app-preview .iphone-mockup { --device-width: 184px; }
}
@media (max-width: 700px) {
 .app-page-hero { grid-template-columns: minmax(0, 1fr); padding-block: 32px; }
 .app-page-hero h1 { font-size: 38px; }
 .app-overview-grid, .app-ready { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 .app-overview { padding-bottom: 32px; }
 .app-ready { padding-block: 32px; }
 .site-footer .brand img { width: 200px; }
}
@media (max-width: 360px) {
 .app-page-hero h1 { font-size: 34px; }
 .app-offline > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}