/* ============================================================
   Simple Roots Therapy
   Zero JavaScript. Zero external requests. CSS-only motion.
   Light theme only. Reduced motion fully respected.

   The site renders light for every visitor, regardless of their
   system setting. There is no dark palette and no
   prefers-color-scheme switch.

   Type follows the brand kit. Colour uses the supplied sage /
   slate / linen / ochre palette, with darker steps on the same
   hues wherever the original fails WCAG AA as text — the
   substitutions are listed in README.md.
   ============================================================ */

@view-transition { navigation: auto; }

:root{
  /* Supplied palette. Every value below is one of these five, or a
     darkened step on the same hue where the original fails WCAG AA
     as text — see README.md. */
  --sage:       #6A8D95;   /* Calming Eucalyptus Green */
  --slate:      #2B3A4A;   /* Clinical Trust Slate     */
  --linen:      #F7F5F0;   /* Soothing Warm Neutral    */
  --ochre:      #D4A373;   /* Gentle Warmth Accent     */
  --white:      #FFFFFF;   /* Card background          */

  color-scheme: light;

  /* Applied roles */
  --paper:      var(--linen);   /* page background        */
  --paper-deep: var(--white);   /* raised bands and cards */
  --card:       var(--white);
  --ink:        var(--slate);   /* headings               */
  --ink-body:   #4A5568;        /* body copy              */
  --ink-soft:   #55636F;
  --ink-faint:  #5F6E79;        /* eyebrows, captions     */
  --rule:       #E0DCD2;
  --rule-soft:  #EBE7DE;

  /* Sage measures 3.29:1 on linen — fine for graphics at the 3:1
     threshold, below the 4.5:1 floor for text. Text and buttons use the
     darker step, 4.53:1 on linen and 4.94:1 on white — a shade under the
     supplied hover value, which measured 4.43:1 on linen and just missed.
     Graphics use the sage itself. */
  --accent:     #58757C;        /* links, buttons         */
  --accent-lift:#496167;        /* hover                  */
  --on-accent:  var(--white);
  --structure:  var(--sage);    /* strokes, icons, rules  */
  --warm:       var(--ochre);   /* decorative fills only  */

  --capacity:   #E4EAEA;
  --demand:     var(--slate);

  --measure: 34rem;
  /* No webfonts: loading one would break the zero-external-requests
     property. Georgia is the kit's own first-choice serif and is
     near-universal; the sans stack prefers the kit's picks when the
     visitor happens to have them, then falls back to the system UI face. */
  --sans: "Inter", "Open Sans", Aptos, Frutiger, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Source Serif Pro", "Freight Text", "Iowan Old Style",
           Palatino, "Times New Roman", serif;
}

@media (prefers-contrast: more){
  :root{ --ink-body:var(--ink); --ink-soft:var(--ink); --ink-faint:var(--ink); --rule:var(--ink-faint); }
}

/* Windows High Contrast and other forced-colours modes. The OS palette
   replaces ours, which is correct — the job here is to make sure nothing
   disappears when it does. Backgrounds and borders that were carrying
   meaning through colour alone get an explicit system colour, and the
   SVG diagrams are told to follow the system text colour rather than
   rendering as invisible tinted shapes. */
@media (forced-colors: active){
  .card, .cluster, .example, .urgent, .band-fill{
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .btn{ border: 2px solid ButtonText; }
  .btn-solid{ background: ButtonFace; color: ButtonText; }
  .pl-ring, .cluster .gl{ stroke: CanvasText; }
  .pl-fill, .pl-core{ fill: transparent; }
  .pl-label, .pl-sub, .pl-centre, .cap-tag{ fill: CanvasText; }
  .demand-line{ stroke: CanvasText; }
  .cap-band{ fill: transparent; stroke: CanvasText; stroke-width: 1; }
  .node{ fill: Canvas; stroke: CanvasText; }
  .stem, .cap-edge{ stroke: CanvasText; }
  .legend .sw-line{ background: CanvasText; }
  .legend .sw-band{ background: transparent; border: 1px solid CanvasText; }
  .ticks li::before{ background: CanvasText; }
  :focus-visible{ outline: 3px solid Highlight; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0; background:var(--paper); color:var(--ink-body);
  font-family:var(--serif); font-size:1rem; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{ width:min(100% - 2.5rem, 64rem); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--sans); font-size:0.875rem; font-weight:600;
  padding:0.7rem 1.1rem; text-decoration:none;
}
.skip:focus{ left:0.75rem; top:0.75rem; }

/* ---------- Type ----------
   Sans title / serif story. Sans for structural anchors — headings,
   buttons, labels; serif for narrative and descriptive copy. */
.eyebrow{
  font-family:var(--sans); font-size:0.75rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 0.9rem;
}
h1,h2,h3{ font-family:var(--sans); font-weight:600; color:var(--ink); }
h1{ font-size:clamp(2.1rem,4.8vw,3.5rem); line-height:1.1; letter-spacing:-0.02em; margin:0 0 1.15rem; max-width:22ch; }
h2{ font-size:clamp(1.4rem,2.5vw,1.75rem); line-height:1.2; letter-spacing:-0.015em; margin:0 0 1rem; }
h3{ font-size:1rem; line-height:1.35; margin:0 0 0.4rem; }
p{ margin:0 0 1.1rem; max-width:var(--measure); }
.lede{
  font-family:var(--serif); font-size:1.3125rem; line-height:1.55;
  color:var(--ink-body); max-width:38rem;
}

a{ color:var(--accent); text-decoration:none; background-image:linear-gradient(currentColor,currentColor);
   background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
   transition:background-size 180ms ease; padding-bottom:1px; }
a:hover{ color:var(--accent-lift); background-size:0% 1px; background-position:100% 100%; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* WCAG 2.2 SC 2.5.8 Target Size (Minimum): a standalone control needs a
   24x24 CSS-pixel target. Links sitting inside a sentence are exempt and
   are left alone; everything below is a navigation or list link, where the
   exemption does not apply. This matters more than usual for a practice
   that treats gross and fine motor difficulties. */
.nav a, .foot-nav a, .foot-meta a, .crumbs a, .next a, .back,
.contact-lines a, .ticks li > a{
  display:inline-block;
  min-height:24px;
  padding-block:0.15rem;
}

/* ---------- Header ---------- */
.masthead{ border-bottom:1px solid var(--rule); padding:1.15rem 0; background:var(--paper); }
.masthead .wrap{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.brand{ display:flex; flex-direction:column; gap:0.12rem; }
.wordmark{
  font-family:var(--sans); font-weight:600; font-size:1.0625rem; letter-spacing:-0.01em;
  color:var(--ink); background-image:none;
}
.masthead .role{
  font-family:var(--sans); font-size:0.75rem; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);
}
.nav{
  display:flex; flex-wrap:wrap; gap:0.35rem 1.3rem;
  font-family:var(--sans); font-size:0.875rem; font-weight:500;
}
.nav a{ color:var(--ink-soft); background-image:none; }
.nav a:hover{ color:var(--accent); }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:600; }

/* ---------- Hero ---------- */
.hero{ padding:4.5rem 0 3rem; }
.hero .lede{ margin-bottom:1.4rem; }

/* ---------- Three pillars ---------- */
.pillars{ margin:2.4rem 0 0; }
.pillars svg{ display:block; width:100%; max-width:44rem; height:auto; margin:0 auto; overflow:visible; }
.pl-ring{ fill:none; stroke:var(--structure); stroke-width:1.6; }
.pl-fill{ fill:var(--structure); opacity:0.10; }
.pl-core{ fill:var(--warm); opacity:0.22; }
.pl-label{ font-family:var(--sans); font-size:15px; font-weight:600; fill:var(--ink); text-anchor:middle; }
.pl-sub{ font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:0.06em; fill:var(--ink-faint); text-anchor:middle; text-transform:uppercase; }
.pl-centre{ font-family:var(--sans); font-size:13px; font-weight:600; fill:var(--ink); text-anchor:middle; }

.pillar-notes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.4rem; margin-top:1.8rem; }
.pillar-notes h3{ font-size:0.8125rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.35rem; }
.pillar-notes p{ font-size:0.9375rem; color:var(--ink-soft); margin:0; max-width:none; }

/* ---------- Demand vs capacity graphic ---------- */
.day{ margin:0 0 1rem; }
.day svg{ display:block; width:100%; height:auto; overflow:visible; }
.cap-band{ fill:var(--capacity); }
.cap-edge{ stroke:var(--rule); stroke-width:1; stroke-dasharray:3 5; fill:none; }
.demand-line{ fill:none; stroke:var(--demand); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.node{ fill:var(--paper); stroke:var(--demand); stroke-width:2; }
.stem{ stroke:var(--rule); stroke-width:1; }
.cap-tag{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; fill:var(--ink-faint); }

.day-marks{ display:grid; grid-template-columns:repeat(5,1fr); gap:0.9rem; margin-top:0.2rem; }
.day-marks div{ padding-top:0.15rem; }
.day-marks dt{
  font-family:var(--sans); font-size:0.75rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); margin-bottom:0.25rem;
}
.day-marks dd{ margin:0; font-size:0.875rem; line-height:1.45; color:var(--ink-soft); }

.legend{
  font-family:var(--sans); font-size:0.8125rem; color:var(--ink-faint);
  margin:1.5rem 0 0; max-width:46rem; line-height:1.9;
}
.legend .key{ margin-right:1.7rem; white-space:nowrap; }
.legend b{ display:inline-block; vertical-align:middle; width:1.5rem; margin-right:0.5rem; }
.legend .sw-line{ height:2.5px; background:var(--demand); border-radius:2px; }
.legend .sw-band{ height:0.6rem; background:var(--capacity); border:1px solid var(--rule); border-radius:1px; }
.legend .note{ display:block; margin-top:0.3rem; color:var(--ink-soft); }

/* ---------- Buttons ---------- */
.actions{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.btn{
  font-family:var(--sans); font-size:0.9375rem; font-weight:600;
  padding:0.8rem 1.5rem; border-radius:3px; border:1.5px solid var(--accent);
  display:inline-block; background-image:none;
  transition:background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn-solid{ background:var(--accent); color:var(--on-accent); }
.btn-solid:hover{ background:var(--accent-lift); color:var(--on-accent); transform:translateY(-1px); }
.btn-line{ background:transparent; color:var(--accent); }
.btn-line:hover{ background:var(--paper-deep); color:var(--accent); transform:translateY(-1px); }
.btn-lg{ font-size:1rem; padding:0.95rem 1.8rem; }

/* ---------- Sections ---------- */
.band{ border-top:1px solid var(--rule); padding:3.25rem 0; }
.band-fill{ background:var(--paper-deep); }
.cols{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:2.5rem; }
.cols > :last-child > :last-child{ margin-bottom:0; }

.ticks{ list-style:none; margin:0 0 1.1rem; padding:0; max-width:var(--measure); }
.ticks li{ padding:0.5rem 0 0.5rem 1.4rem; position:relative; border-bottom:1px solid var(--rule-soft); }
.ticks li:last-child{ border-bottom:0; }
.ticks li::before{ content:""; position:absolute; left:0; top:1.05em; width:0.55rem; height:1px; background:var(--structure); }

/* ---------- Clusters ---------- */
.clusters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1.6rem; margin:1.4rem 0 1.6rem; }
.cluster{ background:var(--card); border:1px solid var(--rule-soft); border-radius:3px; padding:1.15rem 1.2rem; }
.cluster svg{ display:block; margin-bottom:0.75rem; }
.cluster .gl{ fill:none; stroke:var(--structure); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cluster h3{ font-size:0.9375rem; margin-bottom:0.45rem; }
.cluster ul{ list-style:none; margin:0; padding:0; }
.cluster li{ font-size:0.875rem; line-height:1.6; color:var(--ink-soft); }

/* ---------- Process sequence ---------- */
.steps{ counter-reset:step; list-style:none; margin:0 0 1.4rem; padding:0; max-width:40rem; }
.steps li{ counter-increment:step; position:relative; padding:0 0 1.5rem 3.1rem; border-left:1px solid var(--rule); margin-left:0.85rem; }
.steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps li::before{
  content:counter(step); position:absolute; left:-0.85rem; top:-0.1rem;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--accent); color:var(--accent);
  font-family:var(--sans); font-size:0.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.band-fill .steps li::before{ background:var(--paper-deep); }
.steps h3{ margin-bottom:0.3rem; }
.steps p{ margin:0; font-size:0.9375rem; color:var(--ink-soft); }

/* ---------- Fees ---------- */
.fees{ width:100%; border-collapse:collapse; max-width:42rem; margin-bottom:1.4rem; }
.fees th,.fees td{ text-align:left; padding:0.72rem 0.9rem 0.72rem 0; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
.fees caption{ text-align:left; caption-side:top; }
.fees td:first-child{ font-family:var(--sans); font-size:0.9375rem; font-weight:600; width:38%; }

/* ---------- Definition rows ---------- */
.creds{ margin:0; max-width:42rem; }
.creds > div{ display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:1rem; padding:0.68rem 0; border-bottom:1px solid var(--rule-soft); }
.creds dt{ font-family:var(--sans); font-size:0.75rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); padding-top:0.2rem; }
.creds dd{ margin:0; font-size:0.9375rem; }

/* ---------- Contact ---------- */
.contact-lines{ list-style:none; margin:0 0 1.2rem; padding:0; }
.contact-lines li{ padding:0.58rem 0; border-bottom:1px solid var(--rule-soft); font-size:1.0625rem; }
.contact-lines span{
  font-family:var(--sans); font-size:0.75rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:0.1rem;
}

/* ---------- Home cards ---------- */
.section-lead{
  font-family:var(--sans); font-size:0.75rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 1.4rem;
}
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1rem; }
.card{
  display:block; background:var(--card); border:1px solid var(--rule-soft);
  border-radius:3px; padding:1.3rem 1.4rem; background-image:none;
  transition:border-color 160ms ease, transform 160ms ease;
}
.card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.card h2{ font-size:1rem; margin-bottom:0.45rem; }
.card p{ font-size:0.9375rem; color:var(--ink-soft); margin:0 0 0.85rem; max-width:none; }
.card-go{ font-family:var(--sans); font-size:0.8125rem; font-weight:600; color:var(--accent); }

/* ---------- Illustrative examples ---------- */
.examples{ display:grid; gap:1rem; margin:1.4rem 0 0; }
.example{
  background:var(--card); border:1px solid var(--rule-soft);
  border-left:3px solid var(--accent); border-radius:3px; padding:1.1rem 1.2rem;
}
.example h3{ font-size:0.9375rem; margin-bottom:0.65rem; }
.ex-line{ font-size:0.9375rem; line-height:1.55; color:var(--ink-soft); margin:0 0 0.65rem; max-width:none; }
.ex-line:last-child{ margin-bottom:0; }
.ex-line span{
  display:block; font-family:var(--sans); font-size:0.6875rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:0.1rem;
}

/* ---------- FAQ ---------- */
.faq{ max-width:42rem; }
.qa{ padding:1rem 0; border-bottom:1px solid var(--rule-soft); }
.qa:first-child{ padding-top:0; }
.qa:last-child{ border-bottom:0; padding-bottom:0; }
.qa h2{ font-size:1rem; margin-bottom:0.35rem; }
.qa p{ margin:0; font-size:0.9375rem; color:var(--ink-soft); max-width:40rem; }

.sub{ margin-top:1.9rem; font-size:0.9375rem; }

/* ---------- Breadcrumbs ---------- */
.crumbs{ font-family:var(--sans); font-size:0.8125rem; margin:0 0 1.3rem; }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0.5rem; }
.crumbs li{ color:var(--ink-faint); }
.crumbs li + li::before{ content:"/"; margin-right:0.5rem; color:var(--rule); }
.crumbs [aria-current="page"]{ color:var(--ink-soft); }

/* ---------- Forward link ---------- */
.next{
  margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid var(--rule-soft);
  font-family:var(--sans); font-size:0.9375rem; font-weight:600; max-width:none;
}

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--rule); padding:2.5rem 0 3.5rem; font-size:0.875rem; color:var(--ink-soft); background:var(--paper); }
.foot p{ max-width:44rem; }
.urgent{ border-left:3px solid var(--accent); padding:0.9rem 0 0.9rem 1.1rem; margin:0 0 1.8rem; background:var(--paper-deep); max-width:44rem; }
.urgent p{ margin:0; font-size:0.9375rem; }
.foot-nav{
  display:flex; flex-wrap:wrap; gap:0.55rem 1.4rem;
  font-family:var(--sans); font-size:0.8125rem; font-weight:500;
  padding-bottom:1.4rem; margin-bottom:1.4rem;
  border-bottom:1px solid var(--rule-soft);
}
.foot-nav a{ color:var(--ink-soft); background-image:none; }
.foot-nav a:hover{ color:var(--accent); }
.foot-meta{ display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; font-family:var(--sans); font-size:0.8125rem; }

/* ---------- Long-form pages ---------- */
.doc{ padding:3.5rem 0 1rem; }
.doc h1{ max-width:24ch; margin-bottom:0.6rem; }
.doc h2{ margin-top:2.4rem; }
.doc p,.doc li{ max-width:40rem; }
.doc ul{ padding-left:1.1rem; }
.doc li{ margin-bottom:0.5rem; }
.updated{ font-family:var(--sans); font-size:0.8125rem; color:var(--ink-faint); margin-bottom:2rem; }
.back{ font-family:var(--sans); font-size:0.875rem; font-weight:600; }
.promise{
  font-family:var(--sans); font-size:0.8125rem; line-height:1.7;
  color:var(--ink-faint); margin:1.1rem 0 0; max-width:none;
}
.promise strong{ color:var(--ink-soft); font-weight:600; }

/* ---------- Sticky contact bar, small screens only ---------- */
.sticky-cta{ display:none; }

/* ============================================================
   MOTION — one entrance sequence, on load, once.
   Deliberately no scroll-linked reveals: content that fades in
   on scroll is unpredictable, easy to miss, and can strand text
   faded for anyone landing mid-page on an anchor link. Do not
   reintroduce them.
   Every rule below is disabled under prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  .cap-band,.cap-edge{ opacity:0; animation:fadeIn 700ms ease-out 120ms forwards; }
  .cap-tag{ opacity:0; animation:fadeIn 700ms ease-out 420ms forwards; }
  .demand-line{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1500ms cubic-bezier(.33,.68,.42,1) 380ms forwards; }
  .stem{ opacity:0; animation:fadeIn 500ms ease-out forwards; }
  .node{ opacity:0; transform-box:fill-box; transform-origin:center; animation:pop 480ms cubic-bezier(.2,.9,.3,1.2) forwards; }

  .n1{ animation-delay:1020ms; } .n2{ animation-delay:1180ms; }
  .n3{ animation-delay:1340ms; } .n4{ animation-delay:1500ms; }
  .n5{ animation-delay:1660ms; }

  .pl-ring,.pl-fill,.pl-core,.pl-label,.pl-sub,.pl-centre{ opacity:0; animation:fadeIn 700ms ease-out forwards; }
  .pl-core{ animation-delay:120ms; }
  .p1{ animation-delay:320ms; } .p2{ animation-delay:520ms; } .p3{ animation-delay:720ms; }

  .hero .eyebrow{ animation:rise 620ms ease-out both; }
  .hero h1{ animation:rise 680ms ease-out 60ms both; }
  .hero .lede{ animation:rise 680ms ease-out 140ms both; }
  .hero .actions{ animation:rise 680ms ease-out 260ms both; }
}

@keyframes fadeIn{ to{ opacity:1; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .demand-line{ stroke-dasharray:none; stroke-dashoffset:0; }
  .cap-band,.cap-edge,.cap-tag,.stem,.node{ opacity:1; }
  .pl-ring,.pl-fill,.pl-core,.pl-label,.pl-sub,.pl-centre{ opacity:1; }
  .pl-fill{ opacity:0.10; } .pl-core{ opacity:0.22; }
}

/* ---------- Responsive ---------- */
@media (max-width: 52rem){
  .day svg{ min-height:200px; }
}
@media (max-width: 46rem){
  .masthead .wrap{ flex-direction:column; align-items:flex-start; gap:0.55rem; }
  .cols{ grid-template-columns:1fr; gap:1rem; }
  .day-marks{ grid-template-columns:1fr 1fr; gap:0.5rem 0.9rem; margin-top:1.1rem; }
  .day-marks div{ border-top:1px solid var(--rule-soft); padding-top:0.5rem; }
  .creds > div{ grid-template-columns:1fr; gap:0.15rem; }
  .hero{ padding:3rem 0 2.5rem; }
  .band{ padding:2.5rem 0; }

  .sticky-cta{
    display:flex; gap:0.5rem; position:fixed; z-index:50;
    left:0; right:0; bottom:0;
    padding:0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
    background:var(--paper); border-top:1px solid var(--rule);
  }
  .sticky-cta .btn{ flex:1 1 auto; text-align:center; padding:0.72rem 0.6rem; font-size:0.875rem; }
  body{ padding-bottom:4.75rem; }
}
@media (max-width: 30rem){
  .day-marks{ grid-template-columns:1fr; }
  .actions .btn{ width:100%; text-align:center; }
}

@media print{
  body{ background:#fff; color:#000; padding-bottom:0; }
  .btn,.skip,.nav,.sticky-cta{ display:none; }
  .band{ page-break-inside:avoid; }
}