/* Self-hosted fonts (latin subset) - no external font requests. Inter is a variable font covering 400-600. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/anton-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2'); }

/* MANWRD — landing page
   Visual direction updated 2026-09-08: bold condensed display type,
   dark editorial photography, restrained amber accent, desert closing
   sequence. Palette: obsidian near-black / warm ivory / restrained amber. */

:root {
  --obsidian: #07070a;
  --obsidian-2: #0d0e13;
  --panel: #121319;
  --ivory: #f3ede1;
  --ivory-dim: #c9c2b3;
  --steel: #6c86a3;
  --steel-dim: #3f5266;
  --amber: #d99a4e;
  --amber-dim: #8a6636;
  --sage: #8fae7a; /* matches the actual app's "You" label / active-state green */
  --line: rgba(243, 237, 225, 0.12);
  --max-w: 1180px;
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body-font: "Inter", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--body-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

/* ---------------- OVERSIZED CONDENSED DISPLAY TYPE ---------------- */
.display-xl, .display-lg, .display-md {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.002em;
  line-height: 0.96;
  color: var(--ivory);
  margin: 0 0 0.32em;
}
.display-xl { font-size: clamp(44px, 8vw, 92px); }
.display-lg { font-size: clamp(34px, 5.6vw, 60px); }
.display-md { font-size: clamp(28px, 4vw, 44px); max-width: 16ch; }

p { line-height: 1.6; color: var(--ivory-dim); margin: 0 0 1em; }

a { color: var(--ivory); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--amber); color: var(--obsidian);
  padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------- HEADER ---------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: linear-gradient(to bottom, rgba(7,7,10,0.9), transparent);
  padding: 20px 0;
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.header-logo { height: 26px; width: auto; opacity: 0.95; }
.header-nav { display: flex; gap: 28px; }
.header-nav a {
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; color: var(--ivory-dim); transition: color .2s;
}
.header-nav a:hover { color: var(--ivory); }
.header-cta {
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--ivory); color: var(--obsidian); background: var(--ivory);
  padding: 9px 20px; border-radius: 999px; text-decoration: none; transition: all .2s;
}
.header-cta:hover { background: var(--amber); border-color: var(--amber); }

@media (max-width: 720px) {
  .header-nav { display: none; }
}

/* ---------------- 01 · HERO ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 148px 24px 72px;
  overflow: hidden;
  background: var(--obsidian);
}
/* Desktop: portrait lives in its own right-hand panel (not full-bleed) so the
   headline sits on clean negative space, closer to the reference layout, and
   the source photo isn't cropped as tightly. Mobile reverts to full-bleed
   below (existing behaviour, unchanged in spirit). */
.hero-media {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 60%; height: 100%;
}
.hero-portrait {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 54% 14%;
  will-change: transform;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(7,7,10,1) 0%, rgba(7,7,10,0.92) 8%, rgba(7,7,10,0.4) 26%, rgba(7,7,10,0) 46%),
    linear-gradient(to top, rgba(7,7,10,0.5) 0%, rgba(7,7,10,0) 42%);
}
.hero-copy {
  position: relative; z-index: 2;
  max-width: 620px;
}
.section-eyebrow {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 16px; font-weight: 600;
}
.hero-lede { font-size: 17px; max-width: 46ch; margin-bottom: 26px; }
.hero-secondary-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px; color: var(--ivory-dim);
}
.hero-secondary-cta:hover { color: var(--ivory); }

@media (prefers-reduced-motion: no-preference) {
  .hero-portrait { animation: hero-kenburns 22s ease-in-out infinite alternate; }
}
@keyframes hero-kenburns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.045); }
}

@media (max-width: 860px) {
  .hero { align-items: flex-end; padding: 128px 20px 48px; min-height: 100svh; }
  .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-portrait { object-position: 62% 18%; }
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(7,7,10,0.97) 0%, rgba(7,7,10,0.55) 46%, rgba(7,7,10,0.15) 68%, rgba(7,7,10,0.05) 100%);
  }
  .hero-copy { max-width: 100%; }
  .hero-lede { max-width: 100%; }
}

.static-fallback {
  padding: 140px 24px 80px; max-width: 760px; margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .hero-portrait { animation: none; }
}

/* ---------------- SHARED SECTION LAYOUT ---------------- */
.section { padding: 88px 24px; border-bottom: 1px solid var(--line); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section-inner.center { text-align: center; }
/* A block-level heading with its own max-width doesn't get centered by
   text-align alone (it just shrinks and stays flush left) — this was leaving
   .display-md headings stranded on the left inside otherwise-centered
   sections (e.g. Pricing). Force the box itself to center. */
.section-inner.center h2,
.section-inner.center .section-lede,
.section-inner.center .pricing-meta { margin-left: auto; margin-right: auto; }
.section-inner.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.section-inner.two-col.reverse { direction: rtl; }
.section-inner.two-col.reverse > * { direction: ltr; }
@media (max-width: 860px) {
  .section { padding: 72px 20px; }
  .section-inner.two-col { grid-template-columns: 1fr; gap: 40px; }
  .section-inner.two-col.reverse { direction: ltr; }
  .section-inner.two-col.reverse > *:first-child { order: 2; }
}

.section h2 { color: var(--ivory); }
.section-lede { font-size: 18px; max-width: 56ch; }
.accent-line {
  color: var(--amber); font-size: 15px; letter-spacing: 0.02em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 14px;
}

/* scroll-reveal (restrained, respects prefers-reduced-motion) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------- STORE BADGES (real store-button styling) ---------------- */
.store-badges { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 10px; }
.store-badge {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--ivory); border-radius: 8px;
  background: var(--ivory); color: var(--obsidian);
  padding: 9px 16px; text-decoration: none;
  opacity: 0.96; transition: transform .15s ease, opacity .15s ease;
  cursor: default;
}
.store-badge:hover { opacity: 1; transform: translateY(-1px); }
.store-badge svg { width: 22px; height: 22px; fill: var(--obsidian); flex: none; }
.store-badge-text { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; line-height: 1.25; }
.store-badge-text em { font-style: normal; font-size: 9.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(7,7,10,0.65); }
.store-note { font-size: 13px; color: var(--ivory-dim); opacity: 0.7; margin-top: 4px; }
.center .store-badges { justify-content: center; }

/* light-on-dark badges look the same (already dark-on-light); on the desert
   photo section we want them to read clearly against a bright sky, same style. */
.store-badge-light { border-color: var(--ivory); }

/* "Coming soon" state (2026-09-16): the App Store badge is now a non-interactive <div>,
   not an <a href="#">, so it cannot be mistaken for a working/broken download link. */
.store-badge-soon { cursor: default; }

/* ---------------- SAFETY / DISCLAIMER ---------------- */
.section-safety { background: var(--obsidian-2); }
.safety-copy { max-width: 62ch; margin-left: auto; margin-right: auto; font-size: 15px; }
.safety-copy-note { font-size: 12px; opacity: 0.6; margin-top: 20px; }

/* ---------------- LEGAL / UTILITY PAGES ---------------- */
.legal-hero { padding: 148px 24px 32px; max-width: 760px; margin: 0 auto; }
.legal-content { max-width: 760px; margin: 0 auto; padding: 0 24px 110px; }
.legal-content h2 {
  font-family: var(--body-font); font-weight: 600; text-transform: none;
  letter-spacing: 0; font-size: 19px; color: var(--ivory); margin: 40px 0 12px;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { margin-bottom: 14px; }
.legal-placeholder-note {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; font-size: 13px; color: var(--amber); margin: 0 0 36px;
}
.legal-back {
  display: inline-block; margin-top: 4px; font-size: 13px; color: var(--ivory-dim);
  text-decoration: underline; text-underline-offset: 4px;
}
.legal-back:hover { color: var(--ivory); }

/* Footer nav now has 6 links (was 3) — allow wrap on narrow viewports so it never
   overlaps the social icons or overflows horizontally. */
@media (max-width: 640px) {
  .footer-inner { justify-content: center; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
}

/* ---------------- 02 · WHAT'S HOLDING YOU BACK ---------------- */
.section-challenge { background: var(--obsidian-2); }
.challenge-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.challenge-tab {
  font-family: var(--body-font); font-size: 13px; letter-spacing: 0.02em;
  background: transparent; border: 1px solid var(--line); color: var(--ivory-dim);
  padding: 11px 20px; border-radius: 999px; cursor: pointer; transition: all .2s ease;
}
.challenge-tab:hover { border-color: var(--ivory-dim); color: var(--ivory); }
.challenge-tab.is-active { border-color: var(--amber); color: var(--obsidian); background: var(--amber); font-weight: 600; }

.mock-panel-label {
  text-align: center; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: 0.75; margin: 0 0 14px;
}
.mock-panel-caption {
  text-align: center; font-size: 12px; color: var(--ivory-dim); opacity: 0.6; margin: 14px 0 0;
}
.mock-phone.mock-phone-convo { min-height: 360px; background: #0a0b10; }
.mock-phone-topbar {
  display: flex; justify-content: center; padding: 4px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.mock-phone-brand { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-dim); }
.mock-conversation { position: relative; min-height: 150px; }
.mock-conversation-set {
  display: none; flex-direction: column; gap: 10px;
  animation: mock-fade-in .35s ease;
}
.mock-conversation-set.is-active { display: flex; }
@keyframes mock-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------- MOCK PHONE PANEL ---------------- */
/* flex-direction:column — .mock-panel now also wraps a label above and a
   caption below the phone (added in the 2026-09-09 revision); without this
   the default row direction placed them BESIDE the phone and squeezed its
   width down to ~285px regardless of the width set on .mock-phone. */
.mock-panel { display: flex; flex-direction: column; align-items: center; }
.mock-phone {
  width: 360px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 28px; padding: 22px 18px; position: relative;
}
/* The challenge/conversation section has more unused space than the other
   mock-phone sections (tabs above, nothing below) — give it a noticeably
   bigger phone so the example conversation is easier to read without
   zooming (client note, 2026-09-10). */
.mock-phone.mock-phone-convo { width: 440px; }
@media (max-width: 1080px) {
  .mock-phone.mock-phone-convo { width: 380px; }
}
.mock-phone-notch {
  width: 60px; height: 6px; background: var(--line); border-radius: 4px;
  margin: 0 auto 20px;
}
.mock-phone-screenshot { padding: 22px 18px 0; overflow: hidden; }
/* Ratio-box via padding-top, NOT the `aspect-ratio` CSS property — found live
   (2026-09-09) that `aspect-ratio` was silently not taking effect in at least
   one real rendering context, which let the img's own HTML height attribute
   win as the box height (its full natural pixel height, hugely taller than
   intended). object-fit:cover then had to blow the image up to cover that
   wrongly-tall box, cropping ~70% of the width away — the "giant, cut-off
   text" defect. padding-top percentage sizing has no such dependency. */
.mock-phone-frame { position: relative; width: 100%; padding-top: 182.22%; /* 16.4/9 */
  border-radius: 0 0 20px 20px; overflow: hidden; }
.mock-phone-img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
.mock-phone-img-areas { object-position: 0% 62%; }
.mock-bubble {
  padding: 12px 14px; border-radius: 4px; font-size: 14px; margin-bottom: 0;
  max-width: 92%; background: transparent; color: var(--ivory-dim);
}
.mock-bubble-user { margin-left: auto; text-align: right; }
.mock-bubble-manwrd { text-align: left; color: var(--ivory); }
.mock-meta {
  display: block; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--amber); opacity: 0.85; margin-bottom: 4px;
}
.mock-bubble-user .mock-meta { color: var(--sage); }

@media (max-width: 860px) {
  .mock-panel { margin-top: 8px; }
  .mock-phone { width: 100%; max-width: 350px; }
  .mock-phone.mock-phone-convo { width: 100%; max-width: 350px; }
}

/* ---------------- PILLARS ---------------- */
/* Deliberately asymmetric (real screenshot + vertical list) rather than the
   generic small-card grid every other section uses — gives this section its
   own visual rhythm and a real product visual, per the 2026-09-09 revision
   ("several consecutive sections feel similar... larger product visuals"). */
.pillars-layout { align-items: start; }
.pillar-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.pillar-list li {
  display: flex; align-items: baseline; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.pillar-num { font-family: var(--display); color: var(--amber-dim); font-size: 20px; flex: none; width: 2ch; }
.pillar-list h3 { color: var(--ivory); font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em; font-family: var(--body-font); margin: 0 0 3px; }
.pillar-list p { font-size: 14px; margin: 0; }
@media (max-width: 860px) {
  .pillar-list { margin-top: 24px; }
  .pillars-layout > .mock-panel { order: 2; margin-top: 32px; }
}

/* ---------------- HOW IT WORKS ---------------- */
/* Oversized numerals + a rule under each — much stronger visual weight than
   a plain small-label grid, and reads distinctly from the Pillars list above
   it and the Pricing cards below it (2026-09-09 revision). */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
.how-index { font-family: var(--display); color: var(--amber); font-size: clamp(40px, 6vw, 64px); line-height: 1; display: block; }
.how-rule { height: 2px; width: 36px; background: var(--amber-dim); margin: 18px 0 22px; }
.how-step h3 { font-family: var(--body-font); font-size: 18px; margin-top: 0; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---------------- PRICING ---------------- */
.section-pricing .display-md { max-width: 26ch; }
.pricing-meta { font-size: 14px; }

.pricing-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 20px;
  justify-content: center; margin: 36px 0 8px;
}
@media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; max-width: 260px; margin-left: auto; margin-right: auto; } }
.pricing-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 28px 22px; text-align: left;
  background: var(--panel);
}
.pricing-card-featured { border-color: var(--amber); background: rgba(217,154,78,0.06); }
.pricing-tier {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-dim);
  margin: 0 0 12px;
}
.pricing-card-featured .pricing-tier { color: var(--amber); }
.pricing-figure { font-family: var(--display); font-weight: 400; font-size: 32px; color: var(--ivory); margin: 0 0 10px; }
.pricing-figure span { font-family: var(--body-font); font-size: 14px; color: var(--ivory-dim); font-weight: 400; text-transform: none; }
.pricing-limit { font-size: 13px; color: var(--ivory-dim); margin: 0; line-height: 1.5; }
.pricing-note { font-size: 12px; color: var(--ivory-dim); opacity: 0.65; max-width: 52ch;
  margin: 28px auto 6px; line-height: 1.6; }

/* ---------------- FAQ ---------------- */
.faq-list { margin-top: 32px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-item summary {
  cursor: pointer; font-size: 16px; color: var(--ivory);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--amber); font-size: 20px; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin-top: 14px; font-size: 14px; }

/* ---------------- FINAL CINEMATIC DESERT CTA ---------------- */
.section-desert {
  position: relative;
  border-bottom: none;
  min-height: 72vh;
  display: flex; align-items: flex-end;
  padding: 90px 24px 90px;
  overflow: hidden;
}
.desert-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
.desert-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,7,10,0.92) 0%, rgba(7,7,10,0.35) 45%, rgba(7,7,10,0.05) 70%);
}
.desert-inner { position: relative; z-index: 2; }
.section-desert .display-lg { max-width: 20ch; }
.desert-support { max-width: 42ch; font-size: 15px; margin: 0 0 22px; }
.desert-brandline { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: 0.7; margin: 22px 0 0; }

@media (max-width: 720px) {
  .section-desert { min-height: 78vh; padding: 64px 20px; }
}

/* ---------------- FOOTER ---------------- */
.site-footer { padding: 48px 24px; }
.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-logo { height: 13px; width: auto; align-self: flex-start; opacity: 0.8; }
.footer-desc { font-size: 12px; color: var(--ivory-dim); opacity: 0.6; margin: 0; max-width: 32ch; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: var(--ivory-dim); text-decoration: none; }
.footer-copy { font-size: 12px; color: var(--ivory-dim); opacity: 0.6; margin: 0; width: 100%; text-align: center; }
@media (min-width: 721px) { .footer-copy { width: auto; text-align: left; } }
@media (max-width: 720px) { .footer-brand { align-items: center; text-align: center; } .footer-desc { max-width: none; } }


/* ---------------- LEGAL PAGES: client-supplied content (2026-09-21) ---------------- */
.legal-updated { font-size: 13px; color: var(--ivory-dim); opacity: 0.75; margin: 0 0 28px; }
.legal-content ul { margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-content p, .legal-content li { overflow-wrap: anywhere; }
.legal-table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 10px; }
.legal-content table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.legal-content th, .legal-content td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal-content th { color: var(--ivory); font-weight: 600; background: var(--panel); }
.legal-content tr:last-child td { border-bottom: 0; }

/* footer: six legal links + support email */
.footer-email { margin: 0; font-size: 13px; }
.footer-email a { color: var(--ivory-dim); text-decoration: underline; text-underline-offset: 3px; }
.footer-links { max-width: 620px; row-gap: 8px; }
@media (max-width: 720px) { .footer-links { max-width: none; } }


/* ---------------- COPY PASS 2026-09-21: contact / support / 404 + fallback ---------------- */
.static-fallback-title { font-family: var(--display); text-transform: uppercase; font-size: clamp(36px, 7vw, 64px); line-height: 1.05; color: var(--ivory); margin: 0 0 16px; }
.legal-content .legal-lead { font-size: 19px; color: var(--ivory); margin-bottom: 22px; }
.legal-content a.legal-button {
  display: inline-block; background: var(--ivory); color: var(--obsidian); text-decoration: none;
  padding: 13px 26px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.03em;
}
.legal-content a.legal-button:hover { background: #fff; }
.contact-address { font-size: 18px; color: var(--ivory); margin: 4px 0 36px; user-select: all; }
.operator-block { border-top: 1px solid var(--line); padding-top: 24px; margin-bottom: 28px; }
.operator-block p { margin-bottom: 6px; font-size: 14px; }
.legal-content .legal-note { font-size: 13px; opacity: 0.75; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 28px; }

/* tone headline is longer than the 16ch display-md cap: allow one line per sentence where the width permits */
.section-tone .display-md { max-width: 26ch; }