/* =====================================================================
   WASHTRON PHONE STYLES (merged 10 Nov 2026)
   This one file replaces mobile-compact-01.css ... mobile-compact-08.css.
   The 8 files are copied in here one after another, in the same order,
   with nothing changed inside them, so the site looks exactly the same.
   Every page loads this file in the place where mobile-compact-01.css was.
   Parts 06 and 08 only change the Home page and part 07 only the Site
   Requirements page (their rules start with body[data-page="..."]), so it
   is safe for every page to load all 8 parts.
   ===================================================================== */

/* ---------- part 01 (was css/mobile-compact-01.css) ---------- */
/* Washtron Mobile Compact 01
   Mobile-only refinements. Desktop (>= 761px) is untouched.
   No changes to original assets, animations, navigation, or page content. */
@media screen and (max-width: 760px) {
  /* Shared vertical rhythm and readable type */
  body .wrap.roomy { padding-top: 46px; padding-bottom: 46px; }
  
  body .h-lg { font-size: clamp(29px, 7.8vw, 39px); line-height: 1.09; }
  body .h-md { font-size: clamp(24px, 6.5vw, 32px); line-height: 1.12; }
  body .lead { font-size: clamp(14px, 3.8vw, 16px); line-height: 1.55; }
  body .label, body .chap { letter-spacing: .12em; }
  body .btn { font-size: 12px; padding: 12px 18px; }

  /* Home: preserve video frame and existing mobile hero layout */
  body[data-page="home"] #top.h360 .caps { padding-top: 12px; padding-bottom: 16px; }
  body[data-page="home"] #top.h360 .cap h1 { font-size: clamp(27px, 7.7vw, 34px); line-height: 1.08; }
  body[data-page="home"] #top.h360 .cap p { font-size: 14px; line-height: 1.5; }
  body[data-page="home"] #top.h360 .hbtns { gap: 10px; }
  body[data-page="home"] #top.h360 .hprom { gap: 8px; }
  body[data-page="home"] #top.h360 .hprom li { padding: 12px !important; min-width: 0; }
  body[data-page="home"] #top.h360 .hprom b { font-size: 13px; line-height: 1.25; }
  body[data-page="home"] #top.h360 .hprom li > span { font-size: 11px; line-height: 1.4; }

  /* FAQ: tighter tabs and answer panel, unchanged tab functionality */
  body .fq8 h2 { font-size: clamp(29px, 8vw, 39px); margin-top: 14px; }
  body .fq8 .sub { margin-top: 12px; }
  body .fq9 { gap: 18px; }
  body .fq9 .fq8-tabs { margin-top: 18px; }
  body .fq9 .fq8-tabs button { padding: 9px 13px; font-size: 12px; }
  body .fq9 .fq8-pane { padding: 20px; border-radius: 16px; }
  body .fq9 .fq8-pane h3 { font-size: 25px; }
  body .fq9 .fq8-q summary { font-size: 14px; padding: 12px 0; }
  body .fq9 .a7 { font-size: 14px; }

  /* Subpages: shorter cinematic intros without altering media */
  body:not([data-page="home"]) .cine { height: min(680px, 86svh); min-height: 480px; }
  body:not([data-page="home"]) .cine.short { height: min(560px, 76svh); min-height: 420px; }
  body:not([data-page="home"]) .cine-copy { padding-bottom: 35px; }
  body:not([data-page="home"]) .cine-copy h1,
  body:not([data-page="home"]) .cine.short .cine-copy h1 {
    font-size: clamp(32px, 8.7vw, 44px); line-height: 1.02;
  }
  body:not([data-page="home"]) .cine-copy .lead { margin-top: 14px; }
  body:not([data-page="home"]) .cine-copy .actions { margin-top: 20px; gap: 12px; }

  /* Contact and supporting pages: reduce oversized whitespace */
  body .chead { margin-bottom: 22px; }
  body .ways { gap: 12px; }
  body .way { padding: 18px; }
  body .pillars { gap: 14px; }
  body .legaldoc { font-size: 14px; line-height: 1.65; }
  body .glance { padding-top: 38px; padding-bottom: 38px; }
}

/* ---------- part 02 (was css/mobile-compact-02.css) ---------- */
/* Washtron Mobile Compact 02 — mobile-only sizing and vertical rhythm.
   Desktop CSS, JS, original media and content are unchanged. */
@media screen and (max-width:760px) {
  /* Inner pages: override high-specificity desktop typography scale */
  :root body:not([data-page="home"]) main h1 {font-size:clamp(29px,8vw,37px);line-height:1.08}
  :root body:not([data-page="home"]) main h2,
  :root body:not([data-page="home"]) main p.big {font-size:clamp(25px,6.8vw,31px);line-height:1.14}
  :root body:not([data-page="home"]) main h3 {font-size:clamp(18px,5vw,22px);line-height:1.22}
  :root body:not([data-page="home"]) main p,
  :root body:not([data-page="home"]) main .chead p,
  :root body:not([data-page="home"]) main .lhead p,
  :root body:not([data-page="home"]) main .copy p {font-size:14px;line-height:1.55}
  :root body:not([data-page="home"]) main p.lead,
  :root body:not([data-page="home"]) main .lead {font-size:15px;line-height:1.5}
  :root body:not([data-page="home"]) main .label,
  :root body:not([data-page="home"]) main p.label {font-size:10px;letter-spacing:.12em}
  :root body:not([data-page="home"]) main .topic h2,
  :root body:not([data-page="home"]) main .prose h2,
  :root body:not([data-page="home"]) main .row3 h2,
  :root body:not([data-page="home"]) main .listhead h2 {font-size:21px}
  :root body:not([data-page="home"]) main .stg h3,
  :root body:not([data-page="home"]) main .lux h3,
  :root body:not([data-page="home"]) main .doc h3,
  :root body:not([data-page="home"]) main .desk h3,
  :root body:not([data-page="home"]) main .hqrow h3,
  :root body:not([data-page="home"]) main .top h3 {font-size:17px}

  /* Tall subpage hero and scroll spacing; retain existing image and overlay */
  body:not([data-page="home"]) .cine,
  body:not([data-page="home"]) .cine.short {height:auto;min-height:0;margin-bottom:0}
  body:not([data-page="home"]) .cine-pin {height: min(590px,79svh);min-height:420px}
  body:not([data-page="home"]) .cine.short .cine-pin {height:min(530px,72svh);min-height:400px}
  body:not([data-page="home"]) .cine-copy {padding-bottom:26px}
  body:not([data-page="home"]) .cine-copy h1 {margin-top:12px}
  body:not([data-page="home"]) .cine-copy .lead {margin-top:10px}
  body:not([data-page="home"]) .cine-copy .actions {margin-top:15px;gap:10px 14px}
  body:not([data-page="home"]) .cine-copy .btn {padding:11px 16px;font-size:11px}

  /* About, Contact, Site Requirements: remove oversized vertical padding */
  body:not([data-page="home"]) .roomy,
  body:not([data-page="home"]) .wrap.roomy {padding-top:34px;padding-bottom:34px}
  body:not([data-page="home"]) .statement {min-height:0;padding-block:45px}
  body:not([data-page="home"]) .statement .label {margin-bottom:14px}
  body:not([data-page="home"]) .chain {padding-top:35px;padding-bottom:35px}
  body:not([data-page="home"]) .chead {margin-bottom:16px}
  body:not([data-page="home"]) .chead h2 {margin-top:8px}
  body:not([data-page="home"]) .points,
  body:not([data-page="home"]) .nexts,
  body:not([data-page="home"]) .vm,
  body:not([data-page="home"]) .ways,
  body:not([data-page="home"]) .pillars {gap:10px}
  body:not([data-page="home"]) .way,
  body:not([data-page="home"]) .nexts a,
  body:not([data-page="home"]) .points > *,
  body:not([data-page="home"]) .formcard {padding:15px}
  :root body:not([data-page="home"]) main .ways .v {font-size:17px}
  :root body:not([data-page="home"]) main .nexts a b {font-size:19px}
  body:not([data-page="home"]) .fields {gap:12px}
  body:not([data-page="home"]) .field {gap:5px}
  body:not([data-page="home"]) .form input,
  body:not([data-page="home"]) .form select,
  body:not([data-page="home"]) .form textarea {font-size:16px;min-height:42px}
  body:not([data-page="home"]) .form textarea {min-height:90px}
  body:not([data-page="home"]) .msg {gap:20px}
  body:not([data-page="home"]) .close {min-height:380px}
  body:not([data-page="home"]) .close .wrap {padding-block:42px;gap:14px}
  body:not([data-page="home"]) .bayscene .copy {padding-block:24px}
  body:not([data-page="home"]) .glance {padding-block:28px}

  /* Explicit inline large spacers in Contact and Site Requirements */
  body[data-page="contact"] main section[aria-labelledby="h-touch"] {padding-top:34px !important}
  body[data-page="contact"] main #message {padding-bottom:42px !important}
  body[data-page="site-requirements"] main section[aria-label="Four site principles"] {padding-bottom:24px !important}

  /* Home: retain hero video dimensions, make content and cards more app-like */
  body[data-page="home"] #top.h360 .cap h1 {font-size:clamp(25px,7vw,31px);line-height:1.08}
  body[data-page="home"] #top.h360 .cap p {font-size:13px;line-height:1.45}
  body[data-page="home"] #top.h360 .caps {padding-top:10px;padding-bottom:12px}
  body[data-page="home"] #top.h360 .hprom {gap:8px}
  body[data-page="home"] #top.h360 .hprom li {padding:10px !important}
  body[data-page="home"] #top.h360 .hprom b {font-size:12px}
  body[data-page="home"] #top.h360 .hprom li > span {font-size:11px}
  body[data-page="home"] .fq9 .fq8-pane {padding:15px}
  body[data-page="home"] .fq9 .fq8-tabs button {padding:8px 11px;font-size:11px}
  body[data-page="home"] .fq9 .fq8-q summary {font-size:13px;padding:10px 0}
  body[data-page="home"] .wrap.roomy {padding-block:36px}

  /* Small-screen controls remain tappable */
  body .btn, body button, body input, body select {max-width:100%}
}

/* ---------- part 03 (was css/mobile-compact-03.css) ---------- */
/* Mobile Compact 03: deliberately scoped to phones; desktop remains untouched. */
@media screen and (max-width:760px) {
  body main .h-xl, body main .h-lg {font-size:clamp(22px,6.5vw,26px);line-height:1.12}
  body main .h-md {font-size:clamp(19px,5.6vw,23px);line-height:1.15}
  body main .lead, body main .sub, body main .copy p {font-size:12.5px;line-height:1.5}
  body main .wrap.roomy {padding-block:22px}
  body main .btn {font-size:11px;padding:10px 13px}
  body main .chap {font-size:10px}
  body:not([data-page="home"]) main h1 {font-size:clamp(23px,6.8vw,27px)!important}
  body:not([data-page="home"]) main h2, body:not([data-page="home"]) main p.big {font-size:clamp(19px,5.8vw,23px)!important}
  body:not([data-page="home"]) main h3 {font-size:clamp(15px,4.6vw,18px)!important}
  body:not([data-page="home"]) main p, body:not([data-page="home"]) main .lead {font-size:12.5px;line-height:1.5}
  body:not([data-page="home"]) .roomy, body:not([data-page="home"]) .wrap.roomy {padding-block:24px}
  body:not([data-page="home"]) .statement {padding-block:26px}
  body:not([data-page="home"]) .chain {padding-block:24px}
  body:not([data-page="home"]) .glance {padding-block:18px}
  body:not([data-page="home"]) .cine-pin {height:min(490px,66svh);min-height:340px}
  body:not([data-page="home"]) .cine.short .cine-pin {height:min(440px,60svh);min-height:320px}
  body:not([data-page="home"]) .cine-copy {padding-bottom:18px}
  body:not([data-page="home"]) .cine-copy .actions {margin-top:10px;gap:8px}
  body:not([data-page="home"]) .formcard {padding:12px}
  body:not([data-page="home"]) .fields {gap:8px}
  body:not([data-page="home"]) .field {gap:3px}
  body:not([data-page="home"]) .form input, body:not([data-page="home"]) .form select {min-height:40px;padding-block:8px;font-size:16px}
  body:not([data-page="home"]) .form textarea {min-height:76px;font-size:16px}
  body[data-page="contact"] main #message {padding-bottom:22px!important}
  body[data-page="contact"] main section[aria-labelledby="h-touch"] {padding-top:20px!important}
  body[data-page="contact"] main .msg {gap:12px}
  body[data-page="site-requirements"] main section[aria-label="Four site principles"] {padding-bottom:8px!important}
  body[data-page="site-requirements"] .pillars {gap:6px}
  body[data-page="site-requirements"] .bayscene {height:145svh!important;min-height:0}
  body[data-page="site-requirements"] .bayscene .pin {height:78svh!important;min-height:0;top:60px;padding-top:6px;gap:6px;align-content:center}
  body[data-page="site-requirements"] .bayscene .copy {padding-block:6px}
  body[data-page="site-requirements"] .bayscene .copy h2 {margin:3px 0}
  body[data-page="site-requirements"] .bayview svg, body[data-page="site-requirements"] .baystack {max-height:42svh}
  body[data-page="site-requirements"] .bayscene .bayview {min-height:0}
  body[data-page="terms"] .legaldoc, body[data-page="privacy"] .legaldoc {font-size:12.5px;line-height:1.48}
  body[data-page="terms"] .legaldoc summary, body[data-page="privacy"] .legaldoc summary {font-size:15px!important;line-height:1.25;padding-block:12px!important}
  body[data-page="terms"] .legaldoc h2, body[data-page="privacy"] .legaldoc h2 {font-size:16px!important;line-height:1.3}
  body[data-page="terms"] .legaldoc p, body[data-page="privacy"] .legaldoc p {font-size:12.5px!important;line-height:1.5}
  body[data-page="terms"] main section.wrap, body[data-page="privacy"] main section.wrap {padding-bottom:26px!important}
  body[data-page="home"] .fr5 {min-height:0}
  body[data-page="home"] .fr-in {padding-block:26px;gap:12px}
  body[data-page="home"] .fr-in h2 {font-size:clamp(22px,6.2vw,26px);line-height:1.1}
  body[data-page="home"] .fr-in p {font-size:12px;line-height:1.42}
  body[data-page="home"] .fr6-form {padding:12px;border-radius:10px}
  body[data-page="home"] .fr6-form h3 {font-size:17px}
  body[data-page="home"] .fr6-form>p {font-size:11px;margin-top:3px}
  body[data-page="home"] .fr6-f {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0}
  body[data-page="home"] .fr6-f label {min-width:0}
  body[data-page="home"] .fr6-f label:first-child, body[data-page="home"] .fr6-f label:last-child {grid-column:1/-1}
  body[data-page="home"] .fr6-f input {min-width:0;height:42px;padding:16px 9px 5px;font-size:16px;border-radius:7px}
  body[data-page="home"] .fr6-f span {left:9px;top:12px;font-size:11px}
  body[data-page="home"] .fr6-f input:focus+span, body[data-page="home"] .fr6-f input:not(:placeholder-shown)+span {font-size:10px;transform:translateY(-7px)}
  body[data-page="home"] .fr6-form .btn {padding:10px;font-size:11px}
  body[data-page="home"] .fq8 h2 {font-size:24px}
  body[data-page="home"] .fq9 .fq8-pane h3 {font-size:18px}
  body[data-page="home"] .fq9 .fq8-pane {padding:12px}
  body[data-page="home"] .fq9 .fq8-q summary {font-size:12px;padding:8px 0}
  /* A smaller sticky film window, while retaining all original frames and scroll steps. */
  body[data-page="home"] .howfilm {height:350svh}
  body[data-page="home"] .howfilm .hf-pin {height:62svh;top:72px;border-radius:0;overflow:hidden}
  body[data-page="home"] .howfilm .hf-pin .chap {top:12px;left:16px;right:16px;font-size:10px}
  body[data-page="home"] .howfilm .hf-title {top:42px;left:16px;right:16px;font-size:20px}
  body[data-page="home"] .howfilm .hf-caps {left:16px;right:16px;width:auto;bottom:66px}
  body[data-page="home"] .howfilm .hcap h3 {font-size:clamp(24px,6.5vw,29px);margin-top:4px}
  body[data-page="home"] .howfilm .hcap .n {font-size:10px}
  body[data-page="home"] .howfilm .hcap p:last-child {font-size:12px;margin-top:4px;line-height:1.35}
  body[data-page="home"] .howfilm .hf-rail {left:16px;right:16px;bottom:22px;gap:5px}
  body[data-page="home"] .howfilm .hf-rail li {font-size:0;padding-top:8px}
}

/* ---------- part 04 (was css/mobile-compact-04.css) ---------- */
/* Mobile Compact 04 — targeted phone layout refinements.
   Existing media, scripts, desktop styling, nav bar and footer preserved. */
@media screen and (max-width:760px) {
  /* Traditional vs Washtron: fit both comparison cards in one phone viewport. */
  body[data-page="home"] #compare.vs6 {
    padding-block:12px !important;
    gap:7px !important;
    align-content:center;
    min-height:0;
  }
  body[data-page="home"] #compare .vs6-card {
    padding:12px 15px !important;
    border-radius:9px;
  }
  body[data-page="home"] #compare .vs6-k {font-size:9px;letter-spacing:.16em}
  body[data-page="home"] #compare .vs6-card h3 {
    font-size:19px !important;line-height:1.13;margin:4px 0 9px;
  }
  body[data-page="home"] #compare .vs6-card ul {gap:5px}
  body[data-page="home"] #compare .vs6-card li {
    font-size:11.5px;line-height:1.32;padding-left:23px;
  }
  body[data-page="home"] #compare .vs6-card li::before {
    width:16px;height:16px;font-size:9px;top:0;
  }
  body[data-page="home"] #compare .vs6-vs {
    width:34px;height:34px;font-size:10px;
  }

  /* App section: retain all three original phone images and animations. */
  body[data-page="home"] .app8 {padding:16px 0 20px !important}
  body[data-page="home"] .app8 .chap {font-size:9px}
  body[data-page="home"] .app8 h2 {
    font-size:23px !important;line-height:1.1;margin-top:10px;
  }
  body[data-page="home"] .app8 .sub {
    font-size:11.5px !important;line-height:1.4;margin-top:8px;
  }
  body[data-page="home"] .app8-stage {
    height:min(350px,46svh) !important;
    margin:14px auto 0 !important;
  }
  body[data-page="home"] .app8 .chips8 li {
    font-size:9px;padding:6px 8px;
  }
  body[data-page="home"] .app8 .app8-dl {
    margin-top:12px;gap:8px;
  }
  body[data-page="home"] .app8 .app8-dl img {width:48px;height:48px}

  /* Mobile menu: same overlay, colours, logo, links and close action;
     smaller links, moved upwards to avoid a huge unused top area. */
  .mmenu {align-content:start;padding:clamp(115px,19svh,160px) 28px 30px}
  .mmenu a {font-size:clamp(20px,6vw,25px);line-height:1.35}
  .mmenu a + a {margin-top:3px}

  /* Site requirements: original page uses data-page="site", not
     data-page="site-requirements". Correct the selector. */
  body[data-page="site"] section[aria-label="Four site principles"] {
    padding-top:8px !important;padding-bottom:0 !important;
  }
  body[data-page="site"] .pillars {gap:8px !important}
  body[data-page="site"] .pillars div {padding-top:7px;gap:2px}
  body[data-page="site"] .pillars b {font-size:16px !important;line-height:1.2}
  body[data-page="site"] .pillars span {font-size:10px}
  body[data-page="site"] .bayscene {
    height:110svh !important;min-height:0 !important;
  }
  body[data-page="site"] .bayscene .pin {
    height:calc(100svh - 68px) !important;
    min-height:0 !important;
    top:68px !important;
    padding-top:0 !important;
    gap:12px !important;
    align-content:center !important;
    grid-template-columns:1fr !important;
  }
  body[data-page="site"] .bayscene .copy {
    gap:7px !important;padding:0 !important;
  }
  body[data-page="site"] .bayscene .copy h2 {margin:0 !important;font-size:22px !important}
  body[data-page="site"] .bayscene .bayview {min-height:0 !important}
  body[data-page="site"] .baystack,
  body[data-page="site"] .bayview svg {
    max-height:40svh !important;
  }
  body[data-page="site"] .bayscene .progress {margin:0}
}

/* ---------- part 05 (was css/mobile-compact-05.css) ---------- */
/* Mobile Compact 05: scoped adjustments; desktop untouched. */
@media (max-width:760px) {
  /* Site requirements: remove the tall pinned-stage blank space. */
  body[data-page="site"] section[aria-label="Four site principles"] {padding:10px 0 8px!important}
  body[data-page="site"] .pillars {margin:0!important;gap:9px!important}
  body[data-page="site"] .pillars div {padding-top:7px!important}
  body[data-page="site"] .bayscene {height:auto!important;min-height:0!important;padding:12px 0 22px!important}
  body[data-page="site"] .bayscene .pin {position:relative!important;top:auto!important;height:auto!important;min-height:0!important;padding:0!important;align-content:start!important;gap:13px!important}
  body[data-page="site"] .bayscene .copy {padding:0!important;gap:8px!important}
  body[data-page="site"] .bayscene .copy .label {margin:0!important}
  body[data-page="site"] .bayscene .bayview {margin:0!important}
  body[data-page="site"] .bayscene .baystack {max-height:none!important}
  body[data-page="site"] .bayscene .progress {margin:0!important}
  body[data-page="site"] .dims {margin-top:12px!important}
  /* Consistent type roles on mobile; preserve bold/color treatment. */
  body[data-page="home"] .chap,body[data-page="home"] .chap span,
  body[data-page="site"] main .label {font-size:10px!important;letter-spacing:.12em!important}
  body[data-page="home"] .app8 h2 {font-size:25px!important;line-height:1.12!important}
  body[data-page="home"] .app8 .sub {font-size:13px!important;line-height:1.45!important}
  body[data-page="home"] #compare .vs6-card h3 {font-size:19px!important}
  body[data-page="home"] #compare .vs6-card li {font-size:12px!important;line-height:1.35!important}
  body[data-page="home"] #compare .vs6-k {font-size:10px!important}
  /* Both comparison panels stay together; don't overlap neighbouring sections. */
  body[data-page="home"] #compare.vs6 {grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:12px 0!important;min-height:0!important}
  body[data-page="home"] #compare .vs6-card {padding:12px 14px!important}
  body[data-page="home"] #compare .vs6-card ul {gap:5px!important}
  body[data-page="home"] #compare .vs6-vs {width:32px!important;height:32px!important}
  body[data-page="home"] .app8-dl {gap:7px!important;margin-top:15px!important;padding-inline:12px}
  body[data-page="home"] .app8-dl .btn {font-size:10px!important;padding:10px 12px!important;min-height:38px!important;letter-spacing:.05em!important}
  body[data-page="home"] .app8-dl img {width:42px!important;height:42px!important}
  /* Keep the film canvas untouched, but match the surrounding letterbox to the film's dark palette. */
  body[data-page="home"] .howfilm,body[data-page="home"] .howfilm .hf-pin {background-color:#100c09!important}
}

/* ---------- part 06 (was css/mobile-compact-06.css) ---------- */
/* Mobile Compact 06: readable comparison cards; no app phone-image changes. */
@media screen and (max-width:760px) {
  body[data-page="home"] #compare.vs6 {
    gap:14px!important;
    padding:24px 0 30px!important;
  }
  body[data-page="home"] #compare .vs6-card {
    padding:22px 20px!important;
  }
  body[data-page="home"] #compare .vs6-k {
    font-size:10px!important;
    line-height:1.5!important;
    margin-bottom:10px!important;
  }
  body[data-page="home"] #compare .vs6-card h3 {
    font-size:21px!important;
    line-height:1.25!important;
    margin:0 0 20px!important;
  }
  body[data-page="home"] #compare .vs6-card ul {
    gap:12px!important;
  }
  body[data-page="home"] #compare .vs6-card li {
    font-size:13px!important;
    line-height:1.55!important;
    padding-left:32px!important;
  }
  body[data-page="home"] #compare .vs6-vs {
    width:40px!important;
    height:40px!important;
  }
}

/* ---------- part 07 (was css/mobile-compact-07.css) ---------- */
/* Mobile Compact 07: balanced Site Requirements spacing and seamless film letterbox. */
@media screen and (max-width:760px) {
  /* Preserve compact layout without crushing the boundary between sections. */
  body[data-page="site"] main section[aria-label="Four site principles"] {
    padding:16px 20px 28px!important;
  }
  body[data-page="site"] main section[aria-label="Four site principles"] .pillars {
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    gap:14px 12px!important;
  }
  body[data-page="site"] main section[aria-label="Four site principles"] .pillars > div {
    min-width:0!important;
    padding-top:9px!important;
  }
  body[data-page="site"] .bayscene {
    padding:16px 0 28px!important;
  }
  body[data-page="site"] .bayscene .pin.wrap {
    padding-left:20px!important;
    padding-right:20px!important;
    box-sizing:border-box!important;
  }
  body[data-page="site"] .bayscene .copy {
    margin-bottom:10px!important;
  }
  /* Match the native film letterbox, not an unrelated dark brown. */
  body[data-page="home"] .howfilm,
  body[data-page="home"] .howfilm .hf-pin,
  body[data-page="home"] .howfilm .hf-pin::before,
  body[data-page="home"] .howfilm .hf-pin::after {
    background-color:#080808!important;
  }
  body[data-page="home"] .howfilm .hf-pin {
    background-image:none!important;
  }
}

/* ---------- part 08 (was css/mobile-compact-08.css) ---------- */
/* Mobile Compact 08 — How It Works and review typography only. */
@media screen and (max-width:760px) {
  /* The actual film's letterbox is black: match it exactly. */
  html body[data-page="home"] section.howfilm,
  html body[data-page="home"] section.howfilm .hf-pin,
  html body[data-page="home"] section.howfilm .hf-pin::before,
  html body[data-page="home"] section.howfilm .hf-pin::after {
    background:#000 !important;
    background-image:none !important;
  }
  /* Keep the scroll-controlled five-stage film, without the oversized
     blank run after its pinned viewport. */
  html body[data-page="home"] section.howfilm { height:260svh !important; }
  html body[data-page="home"] section.howfilm .hf-pin { height:calc(100svh - 72px) !important; top:72px !important; }
  html body[data-page="home"] #stations .pp.rvc blockquote,
  html body[data-page="home"] #stations.flat .pp.rvc blockquote {
    font-size:17px !important;
    line-height:1.48 !important;
    letter-spacing:0 !important;
  }
  html body[data-page="home"] #stations .pp.rvc .who b { font-size:15px !important; }
  html body[data-page="home"] #stations .pp.rvc .who span { font-size:13px !important; }
}