/* ================================================================
   Barometer product page.

   Built on the Glitter Jar / Cross Count pattern (APP-PAGES.md): main.css
   carries the header, the footer, the fonts, the FAQ, the phones and the
   floating hero art; this file carries only what is particular to this
   page, with bm- prefixes wherever main.css already owns the plain name.

   LOADED SECOND, and relatively, so the page previews from disk.

   A MID-TONE GROUND. The app is dark felt, and on the page's first
   #101a16 every phone melted into the ground it stood on ("the background
   needs to be lighter... so the app will stand out", Anna, 22 Sep 2026).
   Warm cream paper came next and was "too light and kind of ugly" the same
   day; then dusty sage, then this medium sage, each picked from options
   rendered side by side. Sky and night were tried against it later that
   day and she kept the sage. The felt itself comes back as the stats band
   and the final band.

   WHAT MAKES THE PHONES POP on a ground this close to their own colour is
   light, not hue: every phone stands in a pale pool (--pool), the hero
   phone is 340px, and the bands are flat so nothing competes with them.

   A MID-TONE GROUND CANNOT HOLD COLOURED TEXT. The gold labels and links
   were #7a5716, which measured 2.91:1 here and 2.55:1 on the band; the
   heading gradient's middle stop was 2.84:1. All of them were darkened
   until they cleared 4.5:1 (text) and 3:1 (headings) on both grounds.
   ================================================================ */

/* The palette. main.css's :root[data-app="barometer"] block is the dark
   one; these win because this sheet loads after it. */
:root[data-app="barometer"] {
  --ground: #9db2a3;          /* medium sage: "try a more medium background
                                 color", Anna, 22 Sep 2026; one step deeper
                                 than the #b7c7bb dusty sage, picked from four */
  --paper: #e3eae4;           /* cards */
  --mint-soft: #96ac9c;       /* the alternate band */
  --ink: #1b2a23;
  --ink-soft: #304038;
  --muted: #2f3f37;
  --felt: #173a2c;            /* the app's felt, for the two dark bands */
  --head: #173a2c;            /* headings and bold text: felt, on the light looks */
  --pool: rgba(246, 250, 246, .95);   /* the light each phone stands in */
  --pool-2: rgba(236, 244, 237, .45);
  --float-o: .85;
  --felt-deep: #0f271d;
  --lamp: #e0c48a;            /* the app's lamp gold, on dark */
  --lamp-deep: #4f390e;       /* the same gold, dark enough to read on sage:
                                 #7a5716 was 2.91:1 on the ground, 2.55 on the band */
  --mint: #c9a45a;
  --mint-deep: #4f390e;       /* links */
  --mint-ink: #1f4a37;        /* solid buttons: felt green */
  --on-mint: #fffcf5;
  --on-mint-ink: #fbf3df;
  --apricot: #e0c48a; --apricot-deep: #4f390e;
  /* --grad-* are unused on this page: every section heading runs the whole
     ladder instead (see "the headings" below). Kept for main.css's sake. */
  --grad-a: #683db0; --grad-b: #2455a0; --grad-c: #196328;
  --line: rgba(23, 58, 44, .14);
  --line-strong: rgba(23, 58, 44, .30);
  --bezel: #0b110e; --bezel-edge: #26342d;
  --shadow: 0 16px 38px rgba(23, 58, 44, .16);
  --shadow-lift: 0 26px 56px rgba(15, 39, 29, .30);
  --kicker-glow: none;
  --sage: #7d9c80; --sage-deep: #2f5236; --sage-pale: #e3ece2;
  --r: 20px;
  /* THE APP'S PAPER (4 Oct 2026): its Light look, and the paper the report
     prints on, from the app's own paper palette (scripts/ui.gd,
     paper_table). The third surface, beside the sage and the felt. */
  --paper-bg: #e9dfcb;
  --paper-well: #e0d5bf;
  --paper-surface: #f2ebdd;
  --paper-ink: #0e1411;
  --paper-dim: #2b3530;
  /* THE STANDARD ORDER, cold to hot: the app's ten official colors
     (content.gd STANDARD_COLORS), every one of its ladders a slice of them.
     Always all ten, always in order, never cropped to a few. */
  --ladder: linear-gradient(90deg,
    #371f63 0 10%, #6b3fb5 10% 20%, #2f6fd0 20% 30%, #5aa9e6 30% 40%,
    #f2efe8 40% 50%, #2fb84a 50% 60%, #e3cf2b 60% 70%, #ffa500 70% 80%,
    #ff0000 80% 90%, #9c0000 90% 100%);
  color-scheme: light;
}
:root[data-app="barometer"] body { background: var(--ground); color: var(--ink); }

/* The pools of light behind the phones are wider than the phones, on
   purpose; at phone width they ran past the screen's edge and gave the page
   a sideways scroll. Clip them at the page's edges (clip, where the
   browser has it, so main is not made a scroll container). */
/* Scoped to the product page and its policy (body.bm): the guide loads this
   sheet for its palette (4 Oct 2026) and keeps its own lists and columns. */
.bm main#main { overflow-x: hidden; overflow-x: clip; }
/* :where keeps these at an element's weight, so a class (.trust's
   margin, a card's list spacing) still wins over them */
:where(.bm main) figure { margin: 0; }
:where(.bm main) ul { margin: 0; padding: 0; max-width: none; }
:where(.bm main) .wrap.narrow { max-width: 820px; }
:where(.bm main) .wrap.narrow > * { max-width: none; }

.bm h1, .bm h2, .bm h3 { color: var(--head); }
.bm h2 { font-size: clamp(1.85rem, 4.2vw, 2.75rem); line-height: 1.14; margin-bottom: 14px; }

/* THE HEADINGS: felt letters, and the phrase that matters underlined in one
   hand-drawn stroke of the app's mood ladder -- purple, blue, green,
   yellow, orange, red -- in its TRUE colours (Anna, 22 Sep 2026, picked
   from four effects: "let's do the hand drawn ladder underline").

   Why not colour the letters: that was tried every way round the same day
   and none worked. On a mid-tone ground every hue has to darken to the
   same murk before it can be read (the app's green is 1.07:1 on sage). An
   underline is decoration, not text, so the colours can be the real ones.

   The stroke is an SVG drawn to the width of the phrase: a gentle wave,
   non-scaling so it stays one pen-width however long the phrase, cloned
   onto each line if the phrase wraps. */
.bm .section h2 { color: var(--head); line-height: 1.22; }
.bm .section h2 .grad {
  -webkit-text-fill-color: currentColor; color: inherit;
  --cover: var(--ground);
  background-image: linear-gradient(var(--cover), var(--cover)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%236b3fb5'/%3E%3Cstop offset='.2' stop-color='%232f6fd0'/%3E%3Cstop offset='.42' stop-color='%232fb84a'/%3E%3Cstop offset='.62' stop-color='%23e3cf2b'/%3E%3Cstop offset='.8' stop-color='%23ffa500'/%3E%3Cstop offset='1' stop-color='%23ff2a1a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 13 C 60 6, 120 17, 180 10 S 270 7, 296 11' fill='none' stroke='url(%23g)' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 100% 100%, 0 100%;
  background-size: 0% .34em, 100% .34em;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-bottom: .2em;
}

/* DRAWN IN, left to right, as the heading scrolls into view. A cover in the
   band's own flat colour sits over the stroke and shrinks away to the right,
   so the pen reveals the line rather than stretching it (animating the
   stroke's own width squashed the wave). Only where the browser can tie an
   animation to scrolling, and only for anyone who has not asked for less
   motion; everywhere else the line is simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bm .section h2 .grad {
      animation: bmPen linear both;
      animation-timeline: view(); animation-range: entry 15% cover 38%;
    }
    @keyframes bmPen {
      from { background-size: 100% .34em, 100% .34em; }
      to   { background-size: 0% .34em, 100% .34em; }
    }
  }
}
/* the deep gold (4.9:1 on sage). Briefly felt green on 4 Oct; the review
   the same day put the color back: with every heading one green, the page
   had no second color in any title. On tan bands, the app's lamp ink. */
.bm .kicker { color: var(--lamp-deep); letter-spacing: 2.4px; }
.bm .section { padding: 92px 0; position: relative; }
@media (max-width: 720px) { .bm .section { padding: 60px 0; } }
.bm-head { margin-bottom: 40px; max-width: 760px; }
.bm-head .lead { max-width: 60ch; color: var(--ink-soft); }
.bm .lead b { color: var(--ink); }
.bm .fine { color: var(--muted); font-size: .85rem; }
::selection { background: rgba(224, 196, 138, .45); }

/* the buttons: felt green, lit a little at the top, the lamp as the glow */
.bm .btn {
  background: linear-gradient(180deg, #2a5f47, var(--mint-ink));
  color: var(--on-mint-ink); border-color: transparent;
  box-shadow: 0 6px 18px rgba(31, 74, 55, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.bm .btn:hover { color: var(--on-mint-ink); filter: brightness(1.1); }
.bm .btn.ghost { background: transparent; color: var(--mint-ink); border-color: var(--mint-ink); box-shadow: none; }
.bm .btn.ghost:hover { background: var(--mint-soft); filter: none; }

/* ---------------- hero ---------------- */

.bm-hero { position: relative; padding: 44px 0 30px; overflow: hidden; }
@media (max-width: 860px) { .bm-hero { padding-top: 24px; } }

/* the mood rungs, drawn as weather, in the gutters and never over the copy;
   34 to 58px like Glitter Jar's charms */
.bm-hero .hero-float img { opacity: var(--float-o); filter: drop-shadow(0 8px 14px rgba(15, 39, 29, .22)); }
.bm-hero .hero-float img.fl-1 { top: 10%; left: 1.5%; width: 56px; }
.bm-hero .hero-float img.fl-2 { top: 64%; left: 2.5%; width: 46px; }
.bm-hero .hero-float img.fl-3 { top: 16%; right: 1.5%; left: auto; width: 52px; }
.bm-hero .hero-float img.fl-4 { top: 60%; right: 2.5%; left: auto; width: 44px; }
.bm-hero .hero-float img.fl-5 { top: 38%; left: 4%; width: 36px; opacity: .4; }
.bm-hero .hero-float img.fl-6 { top: 86%; right: 6%; left: auto; width: 38px; opacity: .45; }

.bm-hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px; align-items: center;
}
.bm-hero-grid > * { min-width: 0; }
@media (max-width: 1000px) { .bm-hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* colour behind the eyebrow: the lamp, with felt-dark type */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; font-size: .75rem;
  color: var(--felt-deep);
  border: 1px solid #b8914a;
  background: linear-gradient(180deg, #f0dcae, var(--lamp) 60%, #cfae6c);
  padding: 7px 15px; border-radius: 999px;
  margin: 0 0 22px;
  box-shadow: 0 6px 18px rgba(184, 145, 74, .32);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--felt); }
@media (max-width: 480px) { .eyebrow { letter-spacing: 1.4px; font-size: .68rem; padding: 6px 12px; } }
@media (prefers-reduced-motion: no-preference) {
  .eyebrow .dot { animation: bmPulse 2.4s infinite; }
  @keyframes bmPulse {
    0%   { box-shadow: 0 0 0 0 rgba(23, 58, 44, .5); }
    70%  { box-shadow: 0 0 0 9px rgba(23, 58, 44, 0); }
    100% { box-shadow: 0 0 0 0 rgba(23, 58, 44, 0); }
  }
  .bm-hero h1 { animation: bmIn 1.1s cubic-bezier(.2, .8, .25, 1) both; }
  @keyframes bmIn {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to   { opacity: 1; transform: none; }
  }
}
.bm-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4rem); margin-bottom: 4px; }
/* "In closed testing on Android · iPhone and iPad soon after" is long:
   a little less tracking keeps it on one line beside the fan */
.bm-hero .eyebrow { letter-spacing: 1.3px; max-width: none; }
/* The dial alone, on transparency: a web page would show the icon's whole
   square of felt, where a phone trims it to a circle. Its shadow is a
   drop-shadow FILTER, which follows the dial's round edge; a box-shadow
   would draw the square back around it. */
.bm-hero h1 .title-icon {
  width: 1.3em; height: 1.3em; vertical-align: -.22em; margin-right: .3em;
  filter: drop-shadow(0 4px 9px rgba(15, 39, 29, .30));
}

.tagline { font-size: 1.14rem; color: var(--muted); max-width: 560px; margin: 20px 0 26px; }
.tagline em { color: var(--head); font-style: normal; font-weight: 800; }

.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.trust { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin-top: 24px; }
.trust li {
  font-size: .82rem; font-weight: 800; color: var(--sage-deep);
  border: 1px solid var(--sage); border-radius: 999px; padding: 6px 13px 6px 10px;
  background: var(--sage-pale);
}
.trust li::before { content: '✓ '; color: var(--sage-deep); }

/* ---------------- the hero device ---------------- */

.hero-device { justify-self: center; width: 100%; max-width: 340px; }
@media (max-width: 1000px) { .hero-device { max-width: 260px; } }
.device {
  position: relative; padding: 11px; border-radius: 30px;
  background: linear-gradient(160deg, #2c3d35, var(--bezel) 55%, #050806);
  box-shadow: 0 30px 60px rgba(15, 39, 29, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.device::before {
  content: ''; position: absolute; inset: -6% -38% -12%; z-index: -1;
  background: radial-gradient(circle, var(--pool) 0%, var(--pool) 24%, var(--pool-2) 48%, transparent 72%);
  filter: blur(30px);
}
.device::after {
  content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .2);
}
/* three real screens of one day's use, cross-fading: the home screen, a day
   part-logged, and the stretch it adds up to */

@media (prefers-reduced-motion: no-preference) {
  /* started a second IN, so the first screen is already showing when the
     page opens rather than fading up from nothing */
  
  
  
  
  @keyframes bmFade {
    0% { opacity: 0; } 6% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; }
  }
  .device::before { animation: bmBreathe 7s ease-in-out infinite; }
  @keyframes bmBreathe {
    0%, 100% { transform: scale(.94); opacity: .75; }
    50%      { transform: scale(1.06); opacity: 1; }
  }
}

/* ---------------- stats: a band of felt ---------------- */

/* Plain felt, lit a little from above. It used to carry faint isobars --
   two repeating radial gradients meant as a weather map's pressure lines --
   and at screen size they rendered as a shimmering wood grain ("I don't
   like the weird texture", Anna, 22 Sep 2026). */

/* the numbers lit like the final band's name, each over a short rule of the
   app's ten colors, so the band reads as headings, not a table */

/* ---------------- split ---------------- */

.split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.split > * { min-width: 0; }
@media (max-width: 940px) {
  .split, .split.flip { grid-template-columns: 1fr; gap: 36px; }
  .split.flip .bm-shot { order: -1; }
}
.split-copy p { margin-bottom: 14px; color: var(--ink-soft); font-size: 1.02rem; max-width: 60ch; }
.split-copy p b { color: var(--head); }
.bm-shot { position: relative; text-align: center; }
/* Every phone on the page stands in a pool of light -- the thing that makes
   a dark screen read as an object on the page rather than a hole in it.
   isolation keeps the pool behind its own phone and nothing else. */
.bm .shot, .bm-shot { position: relative; isolation: isolate; }
.bm .shot::before, .bm-shot::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 44%; width: 150%; max-width: 560px; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--pool) 0%, var(--pool) 22%, var(--pool-2) 46%, transparent 70%);
  filter: blur(18px);
}
.bm-shot .phone, .bm .shot .phone { position: relative; }
.bm-shot figcaption { position: relative; color: var(--muted); font-size: .88rem; margin-top: 16px; }
.bm figcaption { text-wrap: balance; }
.bm-shot figcaption b { color: var(--head); }
.bm .shot figcaption b { color: var(--head); }

/* ---------------- what you log: the cards ---------------- */

.bm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1020px) { .bm-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bm-cards { grid-template-columns: 1fr; } }
.bm-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bm-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.bm-card img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 12px; }
.bm-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.bm-card p { color: var(--muted); font-size: .95rem; margin: 0 0 16px; }
.bm-card p b { color: var(--ink); }

/* a rung ladder drawn in the app's own colours, under a card's words */
.ladder { display: flex; gap: 3px; margin: -2px 0 16px; }
.ladder i { flex: 1; height: 10px; border-radius: 3px; }
.ladder i:first-child { border-radius: 5px 3px 3px 5px; }
.ladder i:last-child { border-radius: 3px 5px 5px 3px; }

.bm-note {
  max-width: 720px; margin: 44px auto 0; padding: 20px 24px;
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--lamp);
  border-radius: 14px; color: var(--ink-soft);
}
.bm-note p { margin: 0; }
.bm-note b { color: var(--head); }

/* ---------------- the six sheep ---------------- */

/* Sleep quality as the app draws it: six sheep faces in the app's own
   order, Very good to Didn't sleep, each with the colour the app gives that
   answer as a bar beneath its name (Anna, 22 Sep 2026: "feature all six sheep icons ... just the sheep
   faces, they don't necessarily have to be square buttons"). */
.sheep-row { margin: 56px auto 0; text-align: center; }
.sheep {
  list-style: none; padding: 0; margin: 0 auto; max-width: 860px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 18px;
}
.sheep li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sheep picture { display: block; }
.sheep img {
  width: 104px; height: 104px; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(15, 39, 29, .22));
  transition: transform .25s ease;
}
.sheep li:hover img { transform: translateY(-6px) rotate(-4deg); }
.sheep span { font-size: .88rem; font-weight: 800; color: var(--head); line-height: 1.2; }
.sheep li::after {
  content: ''; width: 44px; height: 6px; border-radius: 3px;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(23, 58, 44, .18);
}
.sheep-row figcaption { margin-top: 18px; color: var(--muted); font-size: .92rem; }
.sheep-row figcaption b { color: var(--head); }
@media (max-width: 720px) {
  .sheep { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .sheep img { width: 88px; height: 88px; }
}

/* ---------------- the report, as paper ---------------- */

/* ---------------- the promise pair ---------------- */

.promise { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 860px) { .promise { grid-template-columns: 1fr; } }
.promise-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px 28px; box-shadow: var(--shadow); position: relative;
}
.promise-card.headline { border: 2px solid var(--lamp); }
.promise-card .ribbon {
  position: absolute; top: -13px; left: 24px; font-size: .7rem; font-weight: 900;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--felt-deep);
  background: var(--lamp); border-radius: 999px; padding: 4px 12px;
}
.promise-card h3 { font-size: 1.4rem; margin-bottom: 4px; }
.promise-card header { margin-bottom: 16px; }
.promise-card ul { list-style: none; display: grid; gap: 10px; margin-bottom: 22px; }
.promise-card li { position: relative; padding-left: 26px; color: var(--ink-soft); }
.promise-card li b { color: var(--ink); }
.promise-card.headline li::before { content: '✓'; position: absolute; left: 2px; color: var(--sage-deep); font-weight: 900; }
.promise-card.nots li::before { content: '—'; position: absolute; left: 0; color: var(--lamp-deep); font-weight: 900; }

/* ---------------- the FAQ ---------------- */

.bm .faq summary:hover { color: var(--head); }

/* ---------------- crisis note ---------------- */

.crisis {
  display: flex; gap: 18px; align-items: flex-start;
  max-width: 760px; margin: 36px auto 0; padding: 20px 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
}
.crisis img { width: 44px; height: 44px; flex: none; }
.crisis p { margin: 0; color: var(--ink-soft); }
.crisis b { color: var(--head); }

/* ---------------- the final band: felt again ---------------- */

.final {
  position: relative;
  text-align: center; padding: 84px 0 76px; color: #e7ece8;
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(224, 196, 138, .18), transparent 70%),
    linear-gradient(180deg, var(--felt), var(--felt-deep));
}
/* THE HEADINGS ON FELT (4 Oct 2026: "the headers on the dark green are too
   plain"). The name in the lamp's gold, lit from above as the app's lamp
   lights its own page, with the page's hand-drawn ladder stroke under it:
   the same stroke every heading on the light bands carries. */
.final h2 {
  position: relative; margin: 14px 0 22px; padding-bottom: .28em;
  font-size: clamp(2.6rem, 5.6vw, 3.6rem); letter-spacing: -.015em;
  background: linear-gradient(180deg, #fff6df 0%, #f0dcae 45%, #d9b46a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #f0dcae;
  filter: drop-shadow(0 6px 18px rgba(224, 196, 138, .22));
}
.final h2::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: .3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%236b3fb5'/%3E%3Cstop offset='.2' stop-color='%232f6fd0'/%3E%3Cstop offset='.42' stop-color='%232fb84a'/%3E%3Cstop offset='.62' stop-color='%23e3cf2b'/%3E%3Cstop offset='.8' stop-color='%23ffa500'/%3E%3Cstop offset='1' stop-color='%23ff2a1a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 13 C 60 6, 120 17, 180 10 S 270 7, 296 11' fill='none' stroke='url(%23g)' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 100%;
}
.final h2 + p { font-size: 1.15rem; color: #dfe6e1; }
.final p { color: #c3ccc7; max-width: 56ch; margin: 0 auto 18px; }
.final .final-icon { width: 96px; height: 96px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .45)); }
.final .btn { background: linear-gradient(180deg, #f0dcae, var(--lamp)); color: var(--felt-deep); }
.final .btn:hover { color: var(--felt-deep); }
.final .fine { color: #97a69e; }
.final p.fine { max-width: none; text-wrap: balance; }
.final a:not(.btn) { color: var(--lamp); }
.final .back { color: var(--lamp); }

/* centred as a column: the icon is a <picture>, which is inline and sat at
   the left edge while the text beneath it centred */
.final-in { display: flex; flex-direction: column; align-items: center; }
.final picture { display: block; }
.paper-note { text-align: center; max-width: 60ch; margin: 34px auto 0; }

/* ================================================================
   THE PAGE REBUILT FOR CLOSED TESTING (4 Oct 2026,
   BAROMETER-PAGE-SPEC.md section 9). Three surfaces, all the app's own:
   the sage page, the felt bands, and the app's paper under the report.
   ================================================================ */

.final::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--ladder);
}
.final-links { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.bm-center { text-align: center; margin-inline: auto; }
/* a centered head's kicker on the heading's own axis: it carried the
   page's reading measure and sat at the block's left, off center */
.bm .bm-center .kicker { max-width: none; margin-inline: auto; }
.bm-center .lead { margin-inline: auto; }

/* ---------------- the hero: one phone ---------------- */

/* One upright phone, the Dials screen (4 Oct review: three fanned phones
   read as slivers behind the front one). The home screen's dial is the
   title's own icon. */
.bm-screen {
  position: relative; aspect-ratio: 430 / 880; width: 100%;
  border-radius: 20px; overflow: hidden; background: var(--felt-deep);
}
.bm-screen picture, .bm-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bm-hero-cap { text-align: center; margin: 18px auto 0; font-size: .92rem; font-weight: 700; color: var(--ink-soft); max-width: none; }
/* main.css hides the floating art at 1280 and under; from 1250 there is
   room for it in this page's gutters without touching the copy */
@media (min-width: 1250px) and (max-width: 1280px) { .bm-hero .hero-float { display: block; } }

/* ---------------- the flow band: the app's own head bar ---------------- */

/* The app's Stats head is a dark bar of four cells, each icon over its
   word, the current one lit. The band draws exactly that between the Log
   and Customize doors, because the phases on the page must match the
   app's tabs and their icons (APP-PAGES.md), and the most faithful way to
   match is to draw the bar. Dials is lit: it is where Stats opens. */

/* ---------------- what you log: the fact chips ---------------- */

/* a fact, not a decoration: in the trust chips' style, at each card's foot */

.bm-us { margin-top: 80px; }

/* ---------------- the pins ---------------- */

/* Inside What you log, between the cards and the sheep, with a caption that
   says what they are (4 Oct review: a bare strip of icons between two
   sections read as decoration). The same family as the sheep: their
   shadow, their lift. */

/* ---------------- what it shows: the charts themselves ---------------- */

/* Crops of the app's own charts at page size, from its PAPER walk (4 Oct
   review: dark crops in cream cards read as pasted screenshots). Each sits
   on a paper card with a hairline, centred when its neighbour is taller.
   Never shown past 1.2x its pixels. */
.bm-charts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px; max-width: 1000px; margin-inline: auto;
}
.bm-chart {
  display: flex; flex-direction: column; margin: 0;
  background: var(--paper-surface); border: 1px solid rgba(14, 20, 17, .10); border-radius: var(--r);
  padding: 16px 16px 18px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bm-chart:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.bm-charts-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.bm-stack { display: grid; gap: inherit; grid-template-columns: minmax(0, 1fr); align-content: start; }
.bm-chart .crop { flex: 1; display: flex; align-items: center; justify-content: center; }
.bm-chart picture { display: block; width: 100%; max-width: 496px; }
.bm-chart img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(14, 20, 17, .10);
}
.bm-chart figcaption { color: var(--paper-dim); font-size: .92rem; margin-top: 14px; text-align: center; }
.bm-chart figcaption b { color: var(--paper-ink); }
@media (max-width: 560px) {
  .bm-charts { grid-template-columns: minmax(0, 1fr); }
}
/* the key, beside the copy that says how to read the bars */

/* ---------------- two looks: felt and paper, side by side ---------------- */

/* Half sage, half the app's paper with its grain: the dark phone on the
   page's own sage (on felt it sank, the 22 Sep problem again), the light
   one on paper, each in a pool of light. Stacked on a phone. */
.bm .bm-looks { padding-bottom: 0; }
.bm-looks .bm-head { margin-bottom: 44px; }
.bm-looks-split {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: linear-gradient(90deg, var(--ground) 50%, var(--paper-bg) 50%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.bm-looks-split::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 50%; right: 0;
  background: url("../assets/apps/barometer/art/paper-grain.png") repeat;
  background-size: 512px 512px; opacity: .35;
}
.bm-look { position: relative; isolation: isolate; margin: 0; padding: 64px 20px 56px; text-align: center; }
.bm-look::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 46%; width: min(560px, 120%); aspect-ratio: 1; transform: translate(-50%, -50%);
  filter: blur(22px);
}
.bm-look.dark::before { background: radial-gradient(circle, var(--pool) 0%, var(--pool) 20%, var(--pool-2) 44%, transparent 68%); }
.bm-look.light::before { background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .35) 42%, transparent 68%); }
.bm-look figcaption { margin-top: 18px; font: 800 .82rem var(--body); letter-spacing: 2.4px; text-transform: uppercase; }
.bm-look.dark figcaption, .bm-look.dark figcaption b { color: var(--head); }
.bm-look.light figcaption, .bm-look.light figcaption b { color: var(--paper-ink); }
@media (max-width: 700px) {
  .bm-looks-split {
    grid-template-columns: minmax(0, 1fr);
    background: linear-gradient(180deg, var(--ground) 50%, var(--paper-bg) 50%);
  }
  .bm-looks-split::after { top: 50%; left: 0; }
}

/* ---------------- the tan bands ---------------- */

/* THE PAGE ALTERNATES TAN AND GREEN (Anna, 4 Oct 2026). The tan is the
   app's own paper, grain and all: its Light look, and the paper the report
   prints on. Tiled, never stretched, at a whisper. Cream as the WHOLE
   ground was "too light and kind of ugly" (22 Sep); as every other band it
   is what Cross Count does with its linens.

   On tan, color can go in letters (it could not on sage): the kicker in
   the app's lamp ink, the heading's key phrase in the app's green pressed
   dark enough to read (#1e7a3a: 4.1:1 on tan, 4.5:1 on the cards; Anna, 4 Oct:
   green, not the deep blue it was first), card titles the same green. */
.bm-tan {
  isolation: isolate; background: var(--paper-bg); color: var(--paper-ink);
  border-top: 1px solid rgba(14, 20, 17, .10); border-bottom: 1px solid rgba(14, 20, 17, .10);
}
.bm-tan::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/apps/barometer/art/paper-grain.png") repeat;
  background-size: 512px 512px; opacity: .35;
}
.bm .bm-tan h2 { color: var(--paper-ink); }
.bm .bm-tan h2 .grad { --cover: var(--paper-bg); color: #1e7a3a; }
.bm .bm-tan .kicker { color: #6a4810; }
.bm-tan .lead, .bm-tan .fine, .bm-tan figcaption { color: var(--paper-dim); }
.bm-tan .lead b, .bm-tan figcaption b { color: var(--paper-ink); }
.bm-tan .bm-card, .bm-tan .bm-note, .bm-tan .crisis {
  background: var(--paper-surface); border-color: rgba(14, 20, 17, .12);
}
.bm-tan .bm-card h3 { color: #1e7a3a; }
.bm-tan .bm-card p, .bm-tan .bm-note, .bm-tan .crisis p { color: var(--paper-dim); }
.bm-tan .bm-card p b, .bm-tan .bm-note b, .bm-tan .crisis b { color: var(--paper-ink); }
.bm-tan .faq details, .bm-tan .faq details:last-of-type { border-color: rgba(14, 20, 17, .14); }
.bm-tan .faq summary { color: var(--paper-ink); }
.bm-tan .faq .answer p { color: var(--paper-dim); }
.bm-tan .split-copy p { color: var(--paper-dim); }
.bm-tan .split-copy p b { color: var(--paper-ink); }
.bm-tan .sheep span { color: var(--paper-ink); }

.bm-report-phone .phone, .bm .split .phone { max-width: 260px; }

/* one detail of the numbers page, at about twice the sheets' scale */

/* ================================================================
   THE SECOND PASS (5 Oct 2026, BAROMETER-PAGE-SPEC-2.md)
   ================================================================ */

/* ---------------- the hero ---------------- */

/* the eyebrow as a plain gold line: the pill was the loudest object in
   the hero and said the least */
.bm .eyebrow {
  background: none; border: 0; box-shadow: none; padding: 0;
  color: var(--lamp-deep); font-size: .78rem; letter-spacing: 2px; margin-bottom: 16px;
}
.bm .eyebrow .dot { display: none; }
.bm-hero .tagline { font-size: 1.3rem; line-height: 1.45; max-width: 34ch; color: var(--ink-soft); }
.bm-hero .hero-copy { position: relative; z-index: 1; }

/* the two sheep in the gutters, where the weather was */
.bm-hero .hero-float img.fl-1 { top: 14%; left: 2%; width: 60px; opacity: .9; }
.bm-hero .hero-float img.fl-4 { top: 58%; right: 2.5%; left: auto; width: 56px; opacity: .9; }

/* the paper the day becomes, tucked behind the phone */
.hero-device { position: relative; isolation: isolate; }
.bm-sheet-behind {
  position: absolute; z-index: -1; width: 250px; top: 70px; left: -118px;
  transform: rotate(-6deg); border-radius: 4px; background: #fff;
  border: 1px solid rgba(23, 58, 44, .16);
  box-shadow: 0 2px 0 #fff, 0 22px 44px rgba(15, 39, 29, .28);
}
.bm-sheet-behind picture, .bm-sheet-behind img { display: block; width: 100%; height: auto; border-radius: 4px; }
@media (max-width: 1000px) { .bm-sheet-behind { display: none; } }

/* ---------------- the live demo ---------------- */

.bm-try {
  margin-top: 52px; padding: 28px 30px 24px;
  background: var(--paper-surface); border: 1px solid rgba(14, 20, 17, .12);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.bm-try-lead { color: var(--paper-dim); max-width: 64ch; margin: 0 0 20px; font-size: 1.1rem; }
.bm-try-lead b { color: var(--paper-ink); }
.bm-try-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 10px; }
.bm-try-name { margin: 0; font: 800 .78rem var(--body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--paper-dim); }
.bm .bm-tiles {
  list-style: none; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px; padding: 0; margin: 0; max-width: none;
}
.bm-tiles li {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px 7px; border-radius: 10px; min-height: 84px;
  background: var(--paper-bg); border: 1px solid rgba(14, 20, 17, .14);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, transform .12s ease;
}
.bm-tiles li:hover { transform: translateY(-2px); }
.bm-tiles img { width: 40px; height: 40px; object-fit: contain; }
.bm-tiles span { font-size: .7rem; font-weight: 700; color: var(--paper-ink); text-align: center; line-height: 1.12; }
.bm-tiles li::after { content: ''; width: 26px; height: 3px; border-radius: 2px; background: var(--c); margin-top: auto; }
.bm-tiles li[aria-selected="true"] {
  background: var(--c); border-color: rgba(14, 20, 17, .35);
  box-shadow: 0 0 0 2px var(--paper-surface), 0 0 0 4px var(--c);
}
.bm-tiles li[aria-selected="true"] span { color: var(--on, #fff); }
.bm-tiles li[aria-selected="true"]::after { background: var(--on, #fff); opacity: .5; }
.bm-tiles li:focus-visible { outline: 3px solid var(--head); outline-offset: 3px; }
.bm-try-out { display: flex; align-items: center; gap: 18px; margin-top: 16px; min-height: 96px; padding-left: 88px; }
/* one square per dial, as the app draws a day: one color for one answer,
   split corner to corner for two, the lower answer below */
.bm-try-squares { display: flex; gap: 14px; flex: none; }
.bm-try-sq { margin: 0; text-align: center; }
.bm-try-sq[hidden], .bm-try-out[hidden] { display: none; }
.bm-try-sq .sq {
  position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(14, 20, 17, .2), 0 8px 18px rgba(15, 39, 29, .18);
}
.bm-try-sq i { position: absolute; inset: 0; }
.bm-try-sq .lo { background: var(--lo); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.bm-try-sq .hi { background: var(--hi); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bm-try-sq figcaption { margin-top: 6px; font: 800 .7rem var(--body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--paper-dim); }
.bm-try-say { margin: 0; color: var(--paper-dim); font-size: 1.15rem; }
.bm-try-say b { color: var(--paper-ink); }
.bm-try-note { margin: 4px 0 0; font-size: .82rem; color: var(--paper-dim); opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .bm-try-sq:not([hidden]) .sq { animation: bmGrow .15s ease-out; }
  @keyframes bmGrow { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 720px) {
  .bm .bm-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bm-try-row { grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px; }
  .bm-try-out { padding-left: 0; }
  .bm-try { padding: 22px 16px 18px; }
}
@media (max-width: 480px) { .bm-tiles img { width: 32px; height: 32px; } }

/* ---------------- the stats line ---------------- */

.bm-statsline {
  position: relative; overflow: hidden; margin-top: 44px; padding: 34px 24px 30px;
  border-radius: var(--r); text-align: center;
  background:
    radial-gradient(120% 140% at 50% -40%, rgba(224, 196, 138, .16), transparent 60%),
    linear-gradient(170deg, var(--felt), var(--felt-deep));
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.bm-statsline::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ladder); }
.bm-statsline p {
  margin: 0 auto; max-width: none; text-wrap: balance;
  font: 700 clamp(1.35rem, 2.6vw, 2rem)/1.3 var(--display);
  background: linear-gradient(180deg, #fff6df 0%, #f0dcae 45%, #d9b46a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #f0dcae;
}
.bm-statsline .nw { white-space: nowrap; }

/* ---------------- the report, as a desk ---------------- */

/* One sheet large, two tucked under it, and a lens pulled out of the
   summary's Mood row. A fixed 1000 x 820 stage above 1060px, so the
   line from the row to the lens lands where it is drawn; stacked below. */
.bm-desk { position: relative; width: 1000px; height: 900px; margin: 18px auto 0; }
.bm-desk .page {
  position: absolute; display: block; background: #fff; border-radius: 4px;
  border: 1px solid rgba(60, 40, 10, .16);
  box-shadow: 0 2px 0 #fff, 0 3px 0 rgba(60, 40, 10, .10), 0 24px 48px rgba(60, 40, 10, .22);
  overflow: hidden; transition: transform .3s ease;
}
.bm-desk .page picture, .bm-desk .page img { display: block; width: 100%; height: auto; }
.bm-desk .sheet-big { left: 0; top: 20px; width: 600px; transform: rotate(-2deg); z-index: 3; }
.bm-desk .sheet-under.a { left: 380px; top: 0; width: 400px; transform: rotate(3deg); z-index: 2; }
.bm-desk .sheet-under.b { left: 440px; top: 44px; width: 400px; transform: rotate(7deg); z-index: 1; }
.bm-desk:hover .sheet-under.a { transform: rotate(4deg) translateX(14px); }
.bm-desk:hover .sheet-under.b { transform: rotate(9deg) translateX(26px); }
.bm-lens-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.bm-lens-line line { stroke: rgba(60, 40, 10, .55); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.bm-lens-line ellipse { fill: none; stroke: rgba(60, 40, 10, .7); stroke-width: 2; }
.bm-lens { position: absolute; z-index: 5; left: 700px; top: 520px; width: 280px; margin: 0; }
.bm-lens-glass {
  position: relative; width: 230px; height: 230px; border-radius: 50%; overflow: hidden; background: #fff;
  border: 1px solid rgba(60, 40, 10, .25);
  box-shadow: 0 20px 44px rgba(60, 40, 10, .32), inset 0 0 0 7px #fff, inset 0 0 0 8px rgba(60, 40, 10, .12);
}
.bm-lens-glass picture { position: absolute; left: 14px; top: 81px; width: 540px; }
.bm-lens-glass img { display: block; width: 100%; height: auto; }
.bm-lens figcaption { margin-top: 16px; color: var(--paper-dim); font-size: .95rem; text-wrap: pretty; }
.bm-lens figcaption b { display: block; color: var(--paper-ink); font: 700 1.35rem/1.2 var(--display); margin-bottom: 4px; }
.bm-tan .paper-note { text-align: center; margin: 26px auto 0; color: var(--paper-dim); }
@media (max-width: 1060px) {
  .bm-desk { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 0; }
  .bm-desk .page.sheet-big { position: relative; left: auto; top: auto; width: min(560px, 100%); transform: rotate(-1deg); }
  .bm-desk .sheet-under, .bm-lens-line { display: none; }
  .bm-lens { position: relative; left: auto; top: auto; margin-top: -70px; width: min(300px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
}

/* ---------------- What you log: the pins on the cards ---------------- */

/* the marquee went (5 Oct 2026); the pins are the cards' own now: a
   large one at the head of each card and three of its kind at its foot */
.bm-card img.lead-pin { width: 96px; height: 96px; margin-bottom: 10px; }
.bm-card .pins { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; }
.bm-card .pins img {
  width: 40px; height: 40px; margin: 0; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(15, 39, 29, .18)); transition: transform .2s ease;
}
.bm-card:hover .pins img:nth-child(2) { transform: translateY(-3px) rotate(-6deg); }

/* crop rows of three, and a single wide one */
.bm-charts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; align-items: start; }
.bm-charts.one { grid-template-columns: minmax(0, 520px); justify-content: center; }
@media (max-width: 1000px) { .bm-charts.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bm-charts.three, .bm-charts.one { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- What it shows: the Stats head as tabs ---------------- */

.bm-tabs {
  display: grid; grid-template-columns: repeat(4, 134px); justify-content: center; width: max-content;
  padding: 6px; margin: 8px auto 10px; border-radius: 18px;
  background: linear-gradient(180deg, #1c4031, var(--felt-deep));
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow-lift);
}
.bm-tabs button {
  appearance: none; background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .12);
  padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #e7ece8; font: 700 .95rem var(--body); cursor: pointer; border-radius: 12px;
}
.bm-tabs button:first-child,
.bm-tabs button[aria-selected="true"],
.bm-tabs button[aria-selected="true"] + button { border-left-color: transparent; }
.bm-tabs button:hover { background: rgba(255, 255, 255, .06); }
.bm-tabs button[aria-selected="true"] { background: #f2efe8; color: var(--felt); font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.bm-tabs img { width: 36px; height: 36px; object-fit: contain; }
.bm-tabs button:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
.bm-tabs-note { text-align: center; color: var(--muted); font-size: .88rem; margin: 0 auto 30px; max-width: none; }
.bm-pane[hidden] { display: none; }
.bm-pane .lead { max-width: 62ch; margin: 0 auto 24px; text-align: center; }
.bm-pane .bm-charts { max-width: 1000px; }
@media (max-width: 600px) {
  .bm-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); width: auto; }
  .bm-tabs button { font-size: .76rem; padding: 10px 2px 8px; }
  .bm-tabs img { width: 28px; height: 28px; }
}

/* ---------------- the big moment ---------------- */

/* "Built to be trusted with the worst weeks", the page's best line, on a
   felt band of its own at the final band's size, the promise pair under it */
.bm-moment {
  position: relative; padding: 96px 0 88px; text-align: center;
  background:
    radial-gradient(800px 380px at 50% 0%, rgba(224, 196, 138, .16), transparent 70%),
    linear-gradient(180deg, var(--felt), var(--felt-deep));
}
.bm-moment::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ladder); }
.bm .bm-moment .kicker { color: var(--lamp); text-align: center; margin: 0 auto; max-width: none; }
.bm .bm-moment h2 {
  display: block; max-width: 15ch; margin: 14px auto 52px;
  font-size: clamp(2.5rem, 5.4vw, 3.6rem); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance;
  background: linear-gradient(180deg, #fff6df 0%, #f0dcae 45%, #d9b46a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #f0dcae;
  filter: drop-shadow(0 6px 18px rgba(224, 196, 138, .22));
}
.bm-moment .promise { text-align: left; }
.bm-moment .promise-card { box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }

/* ---------------- type: three sizes of text, three of heading ---------------- */

.bm .section h2 { font-size: clamp(1.9rem, 3.4vw, 2.35rem); }
.bm .lead, .bm-head .lead { font-size: 1.2rem; line-height: 1.55; }
.bm .split-copy p, .bm-card p, .promise-card li, .bm .faq .answer p, .bm-note p { font-size: 1.05rem; }
.bm .split-copy p, .bm-card p, .promise-card li { color: var(--ink-soft); }
.bm figcaption, .bm .fine { font-size: .9rem; }

/* ---------------- the ladder walks down the page ---------------- */

/* Each section's kicker takes the next rung of the standard order, cold
   at the top to warm at the foot, darkened only as far as 4.5:1 on its own
   ground needs; white is skipped, the felt bands keep the gold. So the
   hand-drawn underline is retired from the section headings (it was
   wallpaper by the third) and stays on the felt bands' headings alone. */
.bm .section[data-rung="0"] { --rung: #371f63; }
.bm .section[data-rung="1"] { --rung: #5a30a0; }
.bm .section[data-rung="2"] { --rung: #1a3d80; }
.bm .section[data-rung="3"] { --rung: #133a5e; }
.bm .section[data-rung="5"] { --rung: #1e6e36; }
.bm .section[data-rung="6"] { --rung: #6b5600; }
.bm .section[data-rung] .kicker { color: var(--rung); }
.bm .section h2 .grad { background: none; padding-bottom: 0; animation: none; }

/* ---------------- the privacy policy: clean and brief ---------------- */

/* Anna, 5 Oct 2026: "keep the privacy page clean and brief". Small
   headings, even spacing, one reading column. */
.bm .bm-policy h1 { font-size: clamp(2.2rem, 4.6vw, 3rem); margin-bottom: 6px; }
.bm .bm-policy .lead { font-size: 1rem; color: var(--muted); }
.bm .bm-policy .note { margin: 22px 0 8px; max-width: none; }
.bm .bm-policy h2 { font-size: 1.2rem; line-height: 1.3; margin: 30px 0 6px; }
.bm .bm-policy p { font-size: 1.02rem; color: var(--ink-soft); max-width: 66ch; }
.bm .bm-policy .back { display: inline-flex; margin-top: 18px; }

/* ---------------- the film ---------------- */

/* the film in the hero, in the phone's place and at its size */
.hero-film { justify-self: center; }
.bm-film-video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  border-radius: 26px; background: var(--felt-deep);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .42), 0 0 0 1px rgba(224, 196, 138, .18);
}