/* =====================================================================
   Lodgemark landing (checkpoint 18; polish pass rounds 1+2, 17 Aug).
   Palette = the app's own tokens (frontend/src/styles/tokens.css,
   promoted from the badge pack's design-tokens-badges.md): two greens
   split by role, warm paper, brass for provenance. No light green
   anywhere — the pack's own rule. Mobile-first; the grid widens at
   720px.

   Rounds 1+2 (DESIGN-NOTES.md, DESIGN-NOTES-2.md) applied with one
   standing amendment: the hero stays typographic — round 1's
   hero-scene section (the lodge scene bleeding out of the hero band)
   is NOT applied. The lodge scene appears exactly once, contained and
   hairline-framed, inside "What Lodgemark is" (round 2 #2) — its
   figcaption is literally "Your lodge, as Lodgemark sees it." Round
   2's Africa dot field (round 2 #1) is the hero's only new art:
   decorative, sub-text contrast, drops at 390.

   Fragment-card styling (the frag-* rules below) was diffed against
   the real app (frontend/src/styles/tokens.css, SceneCanvas.vue,
   VerificationPage.vue, RoomDetailCard.vue) on this pass — confirmed
   accurate, no drift found: --radius is 10px everywhere in the app
   (no 14px), shadows are rgb(62 58 47 / N%), the scene frame border/
   radius/backdrop match SceneCanvas.vue's .scene-canvas exactly.
   ===================================================================== */
/* Self-hosted variable font (latin subset) — no external requests on the
   front door. One file covers weights 400–900. IBM Plex Mono (below) is
   NOT self-hosted — the stack falls back to system mono by design, so
   the zero-external-requests rule still holds. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
}

:root {
  --brand: #4C6B3F;
  --brand-deep: #22331C;
  --band: #1B2716;        /* structural dark — hero, footer */
  --ink: #3E3A2F;
  --ink-soft: #6E6549;
  --line: #E2DAC4;
  --paper: #F1EADA;
  --surface: #FBF7EC;
  --brass: #9A7532;       /* provenance accent — citations */
  --on-dark: #F4F2E6;

  /* Band ladder (round 1 #3) — two more tones from design-tokens.md so
     the six bands actually alternate instead of two 4%-apart creams. */
  --app-bg: #F3EEE2;      /* "app background" in design-tokens.md */
  --scene-back: #F6F1E4;  /* "scene backdrop" */

  /* Spacing scale (round 1 #9) — three tiers instead of one flat 48px. */
  --band-sm: 40px;
  --band-md: 56px;
  --band-lg: 72px;

  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Measured figures only (round 2 #2) — same name/stack as the app's
     own tokens.css. System-mono fallback is deliberate, not a stopgap
     (round 2 Flagged #2, decided 17 Aug): no new font file. */
  --font-fig: 'IBM Plex Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}

.measure { max-width: 680px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; }
/* Two heading tiers (round 1 #5): the two arguments (problem, covenant)
   take the big tier below; everything else gets this one. */
h2 {
  font-size: 1.7rem;
  letter-spacing: -.015em;
  line-height: 1.14;
  color: var(--brand-deep);
  margin-bottom: 16px;
}
.problem h2, .covenant h2 {
  font-size: 2.05rem;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 20px;
}

section { padding: var(--band-md) 0; }          /* was a flat 48px */
.problem, .covenant { padding: var(--band-lg) 0; }

/* --- header ---------------------------------------------------------- */
.site-header {
  background: var(--surface);      /* lightest — band ladder (round 1 #3) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;                 /* 3-item nav drops to its own row on a
                                       narrow phone rather than a hamburger
                                       (1 Sep nav) — see the ≥720px override,
                                       which forces one row once there's room */
  row-gap: 8px;
  padding: 16px 20px;
  max-width: 1040px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);   /* the page starts on an edge (round 1 #9) */
}
.wordmark { height: 24px; width: auto; display: block; }

/* Right-aligned nav (1 Sep 2026) — Field Notes · FAQs · Member sign in,
   one shared block synced across pages by ops/sync-nav, never hand-
   duplicated. The two plain links are deliberately muted; Member sign in
   keeps the existing .header-signin look so it stays the one link that
   visibly leads OUT of the marketing site. */
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 auto;         /* takes the full second row at mobile width */
}
.site-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--brand); text-decoration: underline; }
.site-nav a + a::before {
  content: "·";
  margin: 0 8px;
  color: var(--line);
}
.header-signin,
.site-nav a.header-signin {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.header-signin:hover,
.site-nav a.header-signin:hover { color: var(--brand-deep); text-decoration: underline; }

/* --- hero -------------------------------------------------------------
   Typographic — no artwork in or bleeding from the band (standing
   amendment, 17 Aug). The one exception is the dot field below (round 2
   #1): sub-text contrast, carries no information, drops at 390. */
.hero {
  position: relative;
  overflow: hidden;          /* the dot field can never spill into .problem */
  background: var(--band);
  color: var(--on-dark);
  padding: 60px 0 44px;      /* was 72px 0 64px */
}
.hero .measure { position: relative; }   /* copy sits above the dot field */
.hero h1 {
  font-size: 2.55rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.06;
  margin-bottom: 18px;
}
.hero-sub {
  font-size: 1.12rem;
  line-height: 1.58;
  color: rgba(244, 242, 230, 0.88);
  max-width: 56ch;
  margin-bottom: 26px;
}
/* Single button since the FAQs ghost button moved into the nav (1 Sep
   2026) — flex: 0 0 auto (was 1, sized to share the row with a second
   button) so "Apply to join" sizes to its own content instead of
   stretching to the full column width now that it's alone. */
.cta-row { display: flex; flex-wrap: nowrap; gap: 10px; }
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 8px;
  display: inline-block;
  flex: 0 0 auto;
  text-align: center;
}
.btn-primary {
  background: var(--brand);
  color: var(--on-dark);
  box-shadow: inset 0 1px 0 rgba(244, 242, 230, .16),
              0 10px 20px -10px rgba(0, 0, 0, .65);
}
.btn-primary:hover { background: var(--brand-deep); }
.btn-ghost {
  color: var(--on-dark);
  border: 1px solid rgba(244, 242, 230, 0.34);
}
.btn-ghost:hover { border-color: var(--on-dark); }

/* Africa dot field (round 2 #1) — decorative only, role="presentation"
   in the markup. Dropped at 390: the headline needs the whole band, and
   the scene figure already sits below in "What Lodgemark is" — a second
   piece of art in the hero at phone width would fight both. */
.hero-dots { display: none; }

/* --- the problem ------------------------------------------------------ */
.problem { background: var(--paper); }    /* sunken — weight (round 1 #3) */
.problem p, .what p, .badge-copy p { color: #55503F; }   /* ink secondary */

/* Citation ladder (round 1 #4) — one rail, three rungs instead of three
   competing 3px brass borders. */
.cite-ladder {
  border-left: 1px solid #D0C4A4;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.cite { border-left: 0; position: relative; padding: 0 0 0 20px; margin: 0; }
.cite::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 14px; height: 2px;
  background: var(--brass);
}
.cite blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.45;
}
.cite figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.pivot { font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; margin-top: 34px; }

/* --- why this matters now ---------------------------------------------
   Light section (18 Aug addition), same "exhale" tone as .what — sits
   between .problem (sunken) and .what so the ladder keeps moving. */
.why-now { background: var(--surface); }
.why-now p { margin-bottom: 16px; }
.why-now p:last-child { margin-bottom: 0; }

/* --- what ------------------------------------------------------------- */
.what { background: var(--surface); }     /* exhale (round 1 #3) */
.what p { margin-bottom: 16px; }
.frontline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--brand-deep);
  border-left: 2px solid var(--brand);
  padding-left: 20px;
}

/* Scene figure (round 2 #2) — the lodge scene's one appearance on the
   page. Fully contained, no band bleed. */
.scene-figure { position: relative; margin: 22px 0 44px; }

.scene-frame {                    /* SceneCanvas.vue:60-61 — the app's own scene container, verified 17 Aug */
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--scene-back);
  padding: 8px;
}
.scene-frame img { display: block; width: 100%; }

.scene-figure figcaption {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .84rem;
  color: var(--ink-soft);
}

/* --- data-card fragments ---------------------------------------------------
   Grounded in the app, not inferred: frontend/src/styles/tokens.css gives
   --radius: 10px (there is NO 14px in the app — verified against
   VerificationPage.vue's .cert-frame and SceneCanvas.vue), and
   RoomDetailCard.vue's shadows are written rgb(62 58 47 / N%), only ever
   on lifted surfaces — which these are. The brass provenance mark is
   deliberately absent on Diesel: tokens.css's .tuu-spine-rail is for
   Tuu-authored, not-yet-human-confirmed content — "Verified/computed
   data carries NONE; that contrast IS the AI/HLB fence" — and this
   fragment says "evidence attached", the opposite case. -------------------- */
.frag {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;                        /* --radius, app value */
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgb(62 58 47 / 18%);
}

/* Labels are NOT mono. tokens.css states the rule outright for .tuu-fig:
   "apply ONLY to data values read from / derived from the platform …
   NEVER for labels, buttons, or decoration." */
.frag-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

/* Measured figures — mono, weight 500, matching .tuu-fig. */
.frag-value {
  font-family: var(--font-fig);
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1;
  color: var(--ink);
}
.frag-value span { font-size: .7rem; color: var(--ink-soft); margin-left: 3px; }

.frag-note {                                  /* prose, so not mono */
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #EDE5CE;              /* --lm-divider, the inner hairline */
  font-size: .72rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* 390: two fragments, one per side, clear of the caption */
.frag-rain   { left: -10px; bottom: 34px; }
.frag-water  { right: -10px; top: 26px; }
.frag-diesel { display: none; }
.frag-rain .frag-note { display: none; }

/* --- how it works ------------------------------------------------------ */
.how { background: var(--app-bg); border-top: 1px solid var(--line); }   /* mid — cards lift off it (round 1 #3/#6) */
.how-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
.how-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(62, 58, 47, .05),
              0 10px 22px -14px rgba(62, 58, 47, .26);
}
.how-step {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 6px;
}
.how-card h3 { font-size: 1.1rem; color: var(--brand-deep); margin-bottom: 8px; }
.how-card p { font-size: 0.95rem; color: var(--ink-soft); }
.how-video { margin: 22px 0 0; }
.how-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;              /* recorded at 1440×900 */
  background: var(--band);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(62, 58, 47, .05),
              0 12px 26px -14px rgba(62, 58, 47, .3);
}
.how-video figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--ink-soft); }
.what .explainer { margin: 22px 0 36px; }          /* sits between the intro and the frontline paragraph */
.how .scene-figure { margin: 22px 0 32px; }        /* heads the section, above the three cards */

/* --- badge ------------------------------------------------------------- */
.badge { background: var(--paper); }      /* sunken — panel lifts (round 1 #3) */
.badge-flex { display: flex; flex-direction: column; gap: 24px; }
.badge-art {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  gap: 0;
  justify-content: center;
  padding: 22px 14px;
  box-shadow: 0 1px 2px rgba(62, 58, 47, .05),
              0 14px 30px -16px rgba(62, 58, 47, .30);
}
.badge-art figure { flex: 1; margin: 0; text-align: center; }
.badge-art figure + figure { border-left: 1px solid var(--line); }
.badge-art img { width: 112px; height: auto; display: block; margin: 0 auto; }
.badge-art figcaption {
  margin-top: 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: var(--font-display);
}
.badge-copy p { margin-bottom: 14px; }
.verified-line {
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* --- practitioner slot (hidden until a real quote exists) -------------- */
.practitioner { background: var(--surface); }
.cite-member blockquote { font-size: 1.2rem; }

/* --- covenant -----------------------------------------------------------
   A third rule signature (round 1 #8): brass hairlines BETWEEN the
   lines, one small brass diamond per line — distinct from the citation
   ladder's rail+rung, so the covenant's bluntest promises don't read as
   more quoting. */
.covenant { background: var(--band); color: var(--on-dark); }
.covenant h2 { color: var(--on-dark); }
.covenant-lines { list-style: none; margin: 0; }
.covenant-lines li {
  display: flex;
  gap: 14px;
  border-left: 0;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid rgba(154, 117, 50, .32);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.5;
}
.covenant-lines li:first-child { border-top: 0; padding-top: 0; }
.covenant-lines li:last-child { padding-bottom: 0; }
.covenant-lines li::before {
  content: "";
  flex: 0 0 7px;
  width: 7px; height: 7px;
  background: var(--brass);
  transform: rotate(45deg);
  margin-top: 10px;
}
.covenant-link {
  display: inline-block;
  margin-top: 28px;
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(154, 117, 50, .95);
  text-underline-offset: 5px;
}

/* --- policy pages (privacy/terms, 18 Aug) -------------------------------
   Plain paper reading page — same measure/type system as the rest of the
   site, no new components. Header wordmark links home (these aren't the
   front door). */
.policy-header {
  background: var(--surface);
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.policy-header .wordmark { height: 24px; width: auto; display: block; }
.policy {
  background: var(--paper);
  padding: var(--band-md) 0;
}
.policy h1 {
  font-size: 1.9rem;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--brand-deep);
  margin-bottom: 24px;
}
.policy h2 { font-size: 1.15rem; margin-top: 28px; margin-bottom: 10px; }
.policy p { color: #55503F; margin-bottom: 16px; }
.policy ul { margin: 0 0 16px 20px; color: #55503F; }
.policy li { margin-bottom: 8px; }
.policy .updated {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.policy .back-link {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.policy .back-link:hover { color: var(--brand-deep); text-decoration: underline; }

/* --- footer -------------------------------------------------------------
   An ending, not a trailing off (round 1 #10): statement + fine print
   separated, rule between the two dark greens. */
.site-footer {
  background: var(--brand-deep);
  color: rgba(244, 242, 230, 0.75);
  padding: 30px 20px 40px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.6;
  border-top: 1px solid rgba(244, 242, 230, .14);
}
.wordmark-footer { height: 20px; width: auto; margin-bottom: 14px; opacity: 0.9; }
.site-footer p:first-of-type {
  font-size: .86rem;
  color: rgba(244, 242, 230, .85);
  margin-bottom: 6px;
}
.site-footer p:last-of-type { font-size: .78rem; color: rgba(244, 242, 230, .5); }
.site-footer a { color: inherit; text-decoration: underline; text-decoration-color: rgba(244, 242, 230, .4); }
.site-footer a:hover { text-decoration-color: rgba(244, 242, 230, .85); }

/* --- field notes (1 Sep 2026) --------------------------------------------
   /notes index + post. No new visual system: the header/prose column reuse
   .policy-header/.policy/.measure as-is; the two quote treatments below
   are the citation ladder's own brass/display-font language (.cite,
   .frontline, above), just sized for a lead dek vs. a mid-body break. */

.notes-meta {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.notes-meta .notes-section {
  color: var(--brass);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.notes-meta .notes-sep { margin: 0 6px; }

/* Magazine-style: placed where the text refers to it (the "emblematic
   object" paragraph), not a lead image — the post opens straight from the
   title into the dek and text. Mobile-first here is centred, own line;
   the float is a ≥720px-only override below. Width is set, height is
   never — aspect-ratio (a real 552×1200 screenshot) does that job so nei-
   ther dimension can fight the other and squash it. */
.notes-float-image {
  width: 55%;
  max-width: 220px;   /* keeps ~55% from ballooning on a wide "mobile" viewport near 720px */
  margin: 28px auto;
}
.notes-float-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 552 / 1200;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgb(62 58 47 / 18%);   /* soft — an object on the page, not a card */
}
.notes-float-image figcaption {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: center;
}

/* The dek, directly under the title — a quote, not a subheading: italic,
   not bold, no heading-weight display type. */
.notes-lead-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--brand-deep);
  border-left: 2px solid var(--brass);
  padding-left: 18px;
  margin: 22px 0 32px;
}

.notes-post p { color: #55503F; margin-bottom: 18px; }
.notes-post em { font-style: italic; }

/* Set large within the body — the citation ladder's .frontline weight/
   colour, wider and unindented so it reads as a break, not a sidebar. */
.notes-pull-quote {
  clear: both;   /* must never ride alongside the floated image on desktop */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--brand-deep);
  border-left: 2px solid var(--brand);
  padding-left: 22px;
  margin: 36px 0;
}

.notes-byline {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --- notes index --------------------------------------------------------
   Built to hold a dozen entries without redesign; with one, the intro
   line keeps the page from reading as broken/empty rather than sparse. */
.notes-intro { color: #55503F; margin-bottom: 8px; }
.notes-index-list {
  margin-top: 28px;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
}
.notes-index-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.notes-index-list .notes-index-item:first-child { padding-top: 0; }
.notes-index-item h2 { font-size: 1.3rem; margin-bottom: 6px; }
.notes-index-item h2 a { color: var(--brand-deep); text-decoration: none; }
.notes-index-item h2 a:hover { color: var(--brand); text-decoration: underline; }
.notes-index-date {
  display: block;
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.notes-index-preview { color: #55503F; margin: 0; }

/* --- ≥720px ------------------------------------------------------------- */
@media (min-width: 720px) {
  :root { --band-md: 88px; --band-lg: 120px; }

  body { font-size: 17px; }
  .measure { max-width: 720px; padding: 0 40px; }        /* was 680 / 20px */
  .how .measure, .badge .measure, .site-header { max-width: 1040px; }
  .site-header { padding: 20px 40px; flex-wrap: nowrap; }
  .site-nav a { font-size: 0.95rem; }
  .site-nav a + a::before { margin: 0 14px; }
  .wordmark { height: 28px; }

  section { padding: var(--band-md) 0; }

  .hero { padding: 96px 0 72px; }
  .hero h1 { font-size: 3.6rem; letter-spacing: -.028em; line-height: 1.02; }
  .hero-sub { font-size: 1.24rem; max-width: 54ch; }
  .cta-row .btn { flex: 0 0 auto; padding: 15px 30px; font-size: 1.05rem; }

  .hero-dots {
    display: block;
    position: absolute;
    right: 2.5%;
    top: 50%;
    transform: translateY(-50%);
    height: 86%;
    width: auto;
    opacity: .68;
    pointer-events: none;
  }

  h2 { font-size: 2rem; }
  .problem h2, .covenant h2 { font-size: 2.5rem; }

  .cite-ladder { margin-top: 44px; gap: 34px; }
  .cite { padding-left: 26px; }
  .cite::before { width: 18px; top: 14px; }
  .cite blockquote { font-size: 1.28rem; }
  .pivot { font-size: 1.32rem; margin-top: 46px; }

  .frontline { font-size: 1.5rem; padding-left: 26px; }

  .what .measure { max-width: 1040px; }
  .what h2, .what > .measure > p { max-width: 640px; }

  .scene-frame { padding: 10px; }
  .scene-figure figcaption { margin-top: 16px; font-size: .9rem; }

  .frag { padding: 14px 18px; box-shadow: 0 12px 32px rgb(62 58 47 / 18%); }
  .frag-label { font-size: .7rem; margin-bottom: 7px; }
  .frag-value { font-size: 1.52rem; }
  .frag-value span { font-size: .78rem; margin-left: 4px; }

  .frag-rain   { left: -22px; top: 44px; bottom: auto; }
  .frag-rain .frag-note { display: block; }
  .frag-water  { right: -22px; top: -16px; }
  .frag-diesel {
    display: flex;
    align-items: baseline;
    gap: 10px;
    right: 56px;
    bottom: -20px;
    padding: 12px 16px;
  }
  .frag-diesel .frag-label { margin-bottom: 0; }
  .frag-diesel .frag-value { font-size: .92rem; }

  .how-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .how-card { padding: 26px; }

  .badge-flex { flex-direction: row; align-items: center; gap: 48px; }
  .badge-art { flex: 0 0 340px; padding: 26px 16px; }
  .badge-art img { width: 118px; }
  .badge-copy { max-width: 52ch; flex: 1 1 auto; }

  .covenant-lines li { gap: 18px; padding: 20px 0; font-size: 1.2rem; }
  .covenant-lines li::before { flex-basis: 8px; width: 8px; height: 8px; margin-top: 12px; }

  /* grid, so no wrapper div is needed around the two p's */
  .site-footer {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: 24px;
    row-gap: 6px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 34px 40px 42px;
    text-align: right;
  }
  .wordmark-footer { grid-row: 1 / span 2; align-self: end; margin: 0; }
  .site-footer p { grid-column: 2; margin: 0; }

  .notes-lead-quote { font-size: 1.3rem; }
  .notes-pull-quote { font-size: 1.6rem; }

  /* Float right, text wraps left — a phone screenshot in the margin, not
     a hero image. 180px = roughly a quarter of the 720px measure. */
  .notes-float-image {
    float: right;
    width: 180px;
    max-width: none;
    margin: 4px 0 24px 28px;
  }
  .notes-index-item h2 { font-size: 1.5rem; }
}