/* marvelmoms.com
   Palette, type and shapes come from Mumble's "Night Desk" design
   (fe-web/design/README.md and lib/theme/night_desk_colors.dart).
   Dark is the app's default; light follows the visitor's system setting. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (Night Desk) ---------- */
:root {
  color-scheme: dark;
  --bg: #111310;
  --side: #0d0f0c;
  --page: #141612;
  --line: #272b24;
  --line2: #3a3f35;
  --text: #ecebe3;
  --reader-text: #e6e4da;
  --sec: #8f9385;
  --sec2: #b9bbaf;
  --accent: #a9c69b;
  --ink: #ecebe3;
  --on-ink: #111310;
  --rec: #e07a5f;
  --hl: rgba(232, 217, 168, 0.28);
  --cite: rgba(169, 198, 155, 0.58);
  --wave: #3a3f35;
  --wave-on: #b9bbaf;
  --bezel: #1c1f19;
  --bezel-edge: #3a3f35;
  --nav-bg: rgba(17, 19, 16, 0.8);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 5vw, 48px);
  --max: 1120px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f3f1e9;
    --side: #ebe8de;
    --page: #f8f6ef;
    --line: #dedbd0;
    --line2: #c9c5b8;
    --text: #1b1d17;
    --reader-text: #22241e;
    --sec: #6a6e60;
    --sec2: #43473c;
    --accent: #4e6b42;
    --ink: #1b1d17;
    --on-ink: #f3f1e9;
    --rec: #b5482e;
    --hl: rgba(214, 186, 92, 0.38);
    --cite: rgba(78, 107, 66, 0.58);
    --wave: #cfccbf;
    --wave-on: #43473c;
    --bezel: #1b1d17;
    --bezel-edge: #1b1d17;
    --nav-bg: rgba(243, 241, 233, 0.82);
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
}
::selection {
  background: var(--hl);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Global nav ---------- */
.gnav {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--line);
}
.gnav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}
.brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding: 12px 0;
}
.gnav ul {
  display: flex;
  gap: clamp(18px, 4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gnav ul a {
  display: inline-block;
  padding: 12px 0;
  font-size: 15px;
  color: var(--sec2);
  text-decoration: none;
}
.gnav ul a:hover,
.gnav ul a[aria-current="page"] {
  color: var(--text);
}

/* Product nav (sticky, like Apple's product pages) */
.pnav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid var(--line);
}
.pnav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.pnav-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------- Buttons and links ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 26px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.2s var(--ease), opacity 0.2s;
}
.pill:hover {
  opacity: 0.9;
}
.pill:active {
  transform: scale(0.97);
}
.pill-sm {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  font-size: 14px;
}
.textlink {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  padding: 14px 4px;
}
.textlink:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
}

/* ---------- Type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(52px, 10.5vw, 136px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 72;
}
.display em,
.h2 em,
.verdict em {
  font-style: italic;
  color: var(--accent);
}
.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.lead {
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.45;
  color: var(--sec2);
  max-width: 34em;
  text-wrap: pretty;
}
.body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--sec2);
  max-width: 30em;
  text-wrap: pretty;
}
.body + .body {
  margin-top: 1em;
}
.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec);
}
.label-accent {
  color: var(--accent);
}
.fine {
  font-size: 14px;
  color: var(--sec);
}

/* ---------- Heroes ---------- */
.hero {
  text-align: center;
  padding-block: clamp(88px, 16vw, 200px) clamp(72px, 12vw, 152px);
}
.hero .lead {
  margin: clamp(24px, 3vw, 36px) auto 0;
}
.hero .actions {
  margin-top: clamp(32px, 4vw, 44px);
}
.hero-line {
  display: block;
}

/* The waveform: the one orchestrated moment on the product page. */
.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: clamp(40px, 6vw, 64px);
  max-width: 520px;
  margin: clamp(36px, 5vw, 56px) auto 0;
}
.wave > i {
  flex: 1;
  min-width: 0;
  border-radius: 1px;
  background: var(--wave-on);
}
@media (prefers-reduced-motion: no-preference) {
  .wave > i {
    animation: speak 0.9s var(--ease) both;
    animation-delay: calc(0.35s + var(--i) * 28ms);
  }
  @keyframes speak {
    from {
      transform: scaleY(0.12);
      background: var(--wave);
    }
    to {
      transform: scaleY(1);
      background: var(--wave-on);
    }
  }
}

/* ---------- Product feature sections ---------- */
.feature {
  padding-block: clamp(80px, 12vw, 168px);
}
.feature > .wrap {
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 8vw, 104px);
}
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
.split .copy .h2 + .body {
  margin-top: 24px;
}
.split .art {
  display: flex;
  justify-content: center;
}
@media (min-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(56px, 7vw, 112px);
  }
  .split.flip .copy {
    order: 2;
  }
}

/* What Mumble listens for */
.measures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 36px;
  max-width: 30em;
}
.measures div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.measures dt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.3;
}
.measures dd {
  color: var(--sec2);
  font-size: 16px;
  line-height: 1.5;
  padding-top: 2px;
}

/* Sample feedback */
.coach-head {
  text-align: center;
}
.coach-head .body {
  margin: 24px auto 0;
}
.sample {
  margin: clamp(56px, 8vw, 96px) auto 0;
  max-width: 920px;
}
.sample .label {
  text-align: center;
}
.verdict {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-align: center;
  margin-top: 20px;
  text-wrap: balance;
  font-variation-settings: "opsz" 60;
}
.points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 40px;
  margin-top: clamp(40px, 6vw, 64px);
}
.points > div {
  border-top: 1px solid var(--line);
  padding: 18px 0 24px;
}
.points p {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.5;
}
@media (min-width: 760px) {
  .points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Your takes stay yours */
.quiet {
  text-align: center;
}
.quiet .body {
  margin: 24px auto 0;
}
.quiet .textlink {
  display: inline-block;
  margin-top: 20px;
}

/* Closing call to action */
.closing {
  text-align: center;
  padding-block: clamp(96px, 14vw, 184px);
  background: var(--side);
  border-top: 1px solid var(--line);
}
.closing .actions {
  margin-top: 36px;
}
.closing .fine {
  margin-top: 20px;
}

/* ---------- Company home ---------- */
.tile {
  background: var(--side);
  border-block: 1px solid var(--line);
  text-align: center;
  padding-top: clamp(64px, 9vw, 112px);
  overflow: hidden;
}
.tile-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(64px, 11vw, 132px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 72;
}
.tile-line {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-top: 12px;
}
.tile .body {
  margin: 18px auto 0;
}
.tile .actions {
  margin-top: 32px;
}
.tile-art {
  margin-top: clamp(48px, 7vw, 80px);
  display: flex;
  justify-content: center;
  height: clamp(440px, 52vw, 560px);
  overflow: hidden;
}
.tile-art .device {
  align-self: flex-start;
}

/* ---------- Simple pages (privacy, 404) ---------- */
.simple {
  padding-block: clamp(88px, 14vw, 168px);
}
.simple .h2 + .lead {
  margin-top: 24px;
}
.todo {
  margin-top: 40px;
  max-width: 40em;
  padding: 20px 24px;
  border: 1px dashed var(--line2);
  border-radius: 12px;
  color: var(--sec2);
}
.todo strong {
  color: var(--rec);
}
.todo ul {
  margin: 12px 0 0;
  padding-left: 1.2em;
}
.todo li + li {
  margin-top: 6px;
}
.simple .actions {
  justify-content: flex-start;
  margin-top: 40px;
}

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding-block: 28px 40px;
  font-size: 14px;
  color: var(--sec);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
}
.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot a {
  display: inline-block;
  padding: 12px 0;
  color: var(--sec2);
  text-decoration: none;
}
.foot a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Scroll reveals (only when JS runs and motion is welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  .js .reveal:not(.in) {
    opacity: 0;
    transform: translateY(28px);
  }
}

/* ======================================================================
   Device mockups: Mumble's real screens, recreated in HTML from the
   Night Desk frames (fe-web/design/*.dc.html). Every size is in design
   pixels (393 x 852 phone) multiplied by --p, so the phone scales as one.
   ====================================================================== */
.device {
  width: min(340px, 84vw);
  padding: calc(min(340px, 84vw) * 0.03);
  border-radius: calc(min(340px, 84vw) * 0.17);
  background: var(--bezel);
  box-shadow: 0 0 0 1px var(--bezel-edge), 0 30px 70px rgba(0, 0, 0, 0.22);
  flex: none;
}
.screen {
  --p: calc(100cqw / 393);
  container-type: inline-size;
  position: relative;
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border-radius: calc(min(340px, 84vw) * 0.14);
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.35;
  user-select: none;
}
.screen > * {
  font-size: calc(var(--p) * 16);
}
.s-island {
  position: absolute;
  top: calc(var(--p) * 11);
  left: 50%;
  width: calc(var(--p) * 124);
  height: calc(var(--p) * 36);
  margin-left: calc(var(--p) * -62);
  border-radius: calc(var(--p) * 20);
  background: #000;
  z-index: 5;
}
.s-status {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--p) * 54);
  padding: 0 calc(var(--p) * 30) 0 calc(var(--p) * 44);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(var(--p) * 17);
  font-weight: 600;
  z-index: 4;
}
.s-status svg {
  width: calc(var(--p) * 62);
  height: calc(var(--p) * 14);
  fill: currentColor;
}
.s-home {
  position: absolute;
  bottom: calc(var(--p) * 8);
  left: 50%;
  width: calc(var(--p) * 134);
  height: calc(var(--p) * 5);
  margin-left: calc(var(--p) * -67);
  border-radius: calc(var(--p) * 3);
  background: var(--text);
  z-index: 6;
}
.s-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.s-label {
  font-size: calc(var(--p) * 12);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sec);
}
.s-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.s-rule {
  height: 1px;
  background: var(--line);
  flex: none;
}
.s-serif {
  font-family: var(--serif);
}
.s-sec {
  color: var(--sec);
}
.s-sec2 {
  color: var(--sec2);
}
.s-accent {
  color: var(--accent);
}
.s-pill {
  display: inline-flex;
  align-items: center;
  height: calc(var(--p) * 52);
  padding: 0 calc(var(--p) * 24);
  border-radius: calc(var(--p) * 26);
  background: var(--ink);
  color: var(--on-ink);
  font-size: calc(var(--p) * 16);
  font-weight: 600;
}

/* Today */
.today {
  padding: calc(var(--p) * 72) calc(var(--p) * 24) 0;
}
.today .greet {
  font-family: var(--serif);
  font-size: calc(var(--p) * 42);
  line-height: calc(var(--p) * 44);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-top: calc(var(--p) * 8);
}
.today .greet i {
  color: var(--accent);
}
.today .title {
  font-family: var(--serif);
  font-size: calc(var(--p) * 31);
  line-height: calc(var(--p) * 36);
  margin-top: calc(var(--p) * 10);
}
.today .desc {
  font-size: calc(var(--p) * 16);
  line-height: calc(var(--p) * 24);
  color: var(--sec2);
  margin-top: calc(var(--p) * 8);
}
.today .begin {
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 16);
  margin-top: calc(var(--p) * 20);
  font-size: calc(var(--p) * 14);
  color: var(--sec);
}
.today .mods {
  margin-top: calc(var(--p) * 8);
}
.today .mod {
  display: grid;
  grid-template-columns: calc(var(--p) * 34) 1fr auto;
  padding: calc(var(--p) * 9) 0;
  font-size: calc(var(--p) * 16);
  color: var(--sec);
}
.today .mod i {
  font-family: var(--serif);
}
.today .mod.on {
  color: var(--text);
  font-weight: 600;
}
.tabs {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--p) * 84);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: calc(var(--p) * 14);
  text-align: center;
  font-size: calc(var(--p) * 14);
  color: var(--sec);
}
.tabs .on {
  color: var(--text);
  font-weight: 600;
  position: relative;
}
.tabs .on::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--p) * 24);
  width: calc(var(--p) * 4);
  height: calc(var(--p) * 4);
  margin-left: calc(var(--p) * -2);
  border-radius: 50%;
  background: var(--accent);
}

/* Recording */
.rec {
  padding: calc(var(--p) * 60) calc(var(--p) * 24) 0;
}
.rec .top {
  height: calc(var(--p) * 44);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rec .top > span:first-child {
  color: var(--sec);
  width: calc(var(--p) * 56);
}
.rec .top > span:last-child {
  width: calc(var(--p) * 56);
}
.rec .dot {
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 8);
}
.rec .dot::before {
  content: "";
  width: calc(var(--p) * 7);
  height: calc(var(--p) * 7);
  border-radius: 50%;
  background: var(--rec);
}
.rec .name {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--p) * 17);
  color: var(--sec);
  text-align: center;
  margin-top: calc(var(--p) * 34);
}
.rec .timer {
  font-family: var(--serif);
  font-size: calc(var(--p) * 112);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.03em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin-top: calc(var(--p) * 4);
  font-variation-settings: "opsz" 72;
}
.rec .of {
  text-align: center;
  font-size: calc(var(--p) * 14);
  color: var(--sec);
  margin-top: calc(var(--p) * 4);
}
.rec .wave {
  height: calc(var(--p) * 44);
  max-width: none;
  margin: calc(var(--p) * 26) 0 0;
  gap: calc(var(--p) * 3);
}
.rec .wave > i {
  animation: none;
  transform: scaleY(0.9);
}
.rec .wave > i:nth-child(n + 37) {
  background: var(--wave);
}
.rec .said {
  flex: 1;
  margin-top: calc(var(--p) * 24);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 40%);
  mask-image: linear-gradient(transparent, #000 40%);
  font-family: var(--serif);
  font-size: calc(var(--p) * 23);
  line-height: calc(var(--p) * 33);
}
.rec .said span {
  color: var(--sec);
}
.rec .ctrl {
  padding: calc(var(--p) * 20) calc(var(--p) * 8) calc(var(--p) * 44);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-weight: 500;
}
.rec .ctrl > span:last-child {
  justify-self: end;
}
.rec .stop {
  width: calc(var(--p) * 76);
  height: calc(var(--p) * 76);
  border-radius: 50%;
  background: var(--ink);
  display: grid;
  place-items: center;
}
.rec .stop::after {
  content: "";
  width: calc(var(--p) * 24);
  height: calc(var(--p) * 24);
  border-radius: calc(var(--p) * 4);
  background: var(--on-ink);
}

/* Feedback */
.fb {
  padding: calc(var(--p) * 56) 0 0;
}
.fb .back {
  height: calc(var(--p) * 48);
  padding: 0 calc(var(--p) * 18);
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 6);
  color: var(--sec2);
}
.fb .back svg,
.rd .back svg {
  width: calc(var(--p) * 20);
  height: calc(var(--p) * 20);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.fb .main {
  flex: 1;
  overflow: hidden;
  padding: calc(var(--p) * 10) calc(var(--p) * 24) 0;
  display: flex;
  flex-direction: column;
}
.fb .verdict-s {
  font-family: var(--serif);
  font-size: calc(var(--p) * 30);
  line-height: calc(var(--p) * 36);
  letter-spacing: -0.01em;
  margin-top: calc(var(--p) * 12);
}
.fb .verdict-s i {
  color: var(--accent);
}
.fb .s-rule {
  margin: calc(var(--p) * 24) 0 calc(var(--p) * 18);
}
.axis {
  position: relative;
  height: calc(var(--p) * 46);
  margin-top: calc(var(--p) * 14);
}
.axis::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--p) * 22);
  height: 1px;
  background: var(--sec);
}
.axis b {
  position: absolute;
  top: calc(var(--p) * 12);
  height: calc(var(--p) * 20);
  width: 2px;
  border-radius: 1px;
  background: var(--sec2);
}
.axis b.span {
  top: calc(var(--p) * 21);
  height: calc(var(--p) * 3);
}
.axis b.sel {
  background: var(--accent);
}
.axis b::after {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: calc(var(--p) * 18);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--p) * 13);
  color: var(--sec);
}
.axis b.span::after {
  top: calc(var(--p) * 9);
}
.axis b.sel::after {
  color: var(--accent);
}
.axis b.a {
  left: 5.6%;
  width: 11.1%;
}
.axis b.b {
  left: 8.3%;
}
.axis b.c {
  left: 17.6%;
}
.axis b.d {
  left: 64.8%;
  width: 22.2%;
}
.legend {
  margin-top: calc(var(--p) * 6);
}
.legend div {
  display: grid;
  grid-template-columns: calc(var(--p) * 20) 1fr auto;
  padding: calc(var(--p) * 6) 0;
  font-size: calc(var(--p) * 15);
  color: var(--sec);
  font-variant-numeric: tabular-nums;
}
.legend i {
  font-family: var(--serif);
}
.legend .sel {
  color: var(--text);
  font-weight: 600;
}
.clip {
  font-family: var(--serif);
  font-size: calc(var(--p) * 19);
  line-height: calc(var(--p) * 28);
  margin-top: calc(var(--p) * 12);
}
.clip mark {
  background: var(--hl);
  color: inherit;
  padding: 0 calc(var(--p) * 3);
}
.fb .point {
  font-size: calc(var(--p) * 17);
  line-height: calc(var(--p) * 25);
  margin-top: calc(var(--p) * 8);
}
.fb sup,
.rd .margin {
  color: var(--accent);
  font-weight: 700;
  font-size: calc(var(--p) * 11);
}
.fb .bar {
  padding: calc(var(--p) * 12) calc(var(--p) * 24) calc(var(--p) * 40);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  font-weight: 600;
}

/* Reader */
.rd {
  padding-top: calc(var(--p) * 56);
}
.rd .head {
  height: calc(var(--p) * 48);
  padding: 0 calc(var(--p) * 16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  color: var(--sec2);
}
.rd .back {
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 6);
}
.rd .tools {
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 18);
}
.rd .tools .aa {
  font-family: var(--serif);
  font-size: calc(var(--p) * 19);
}
.rd .tools svg {
  width: calc(var(--p) * 18);
  height: calc(var(--p) * 18);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.rd .page {
  flex: 1;
  overflow: hidden;
  padding: calc(var(--p) * 22) calc(var(--p) * 28) 0 calc(var(--p) * 50);
}
.rd .text {
  margin-top: calc(var(--p) * 14);
  font-family: var(--serif);
  font-size: calc(var(--p) * 19);
  line-height: calc(var(--p) * 30);
  color: var(--reader-text);
}
.rd .text p + p {
  text-indent: 1.4em;
}
.rd .cited {
  position: relative;
  text-decoration: underline 1px var(--cite);
  text-underline-offset: calc(var(--p) * 6);
}
.rd .margin {
  position: absolute;
  left: calc(var(--p) * -22);
  top: calc(var(--p) * 2);
  text-indent: 0;
  font-family: var(--sans);
  line-height: 1.6;
}
.rd .foot-r {
  padding: calc(var(--p) * 14) calc(var(--p) * 24) calc(var(--p) * 38);
  border-top: 1px solid var(--line);
  font-size: calc(var(--p) * 13);
  color: var(--sec);
}
.rd .progress {
  position: relative;
  height: 2px;
  background: var(--line);
  margin-bottom: calc(var(--p) * 12);
}
.rd .progress::before {
  content: "";
  position: absolute;
  inset: 0 76% 0 0;
  background: var(--text);
}
.rd .progress::after {
  content: "";
  position: absolute;
  left: 22%;
  top: -3px;
  width: 2px;
  height: 8px;
  background: var(--accent);
}

/* Small screens: keep the phone comfortably inside a 320 px viewport */
@media (max-width: 400px) {
  .device {
    width: min(300px, 82vw);
    padding: calc(min(300px, 82vw) * 0.03);
    border-radius: calc(min(300px, 82vw) * 0.17);
  }
  .screen {
    border-radius: calc(min(300px, 82vw) * 0.14);
  }
  .measures div {
    grid-template-columns: 6.5em 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
  .pill {
    transition: none;
  }
}

/* Waveform bar heights: the app's sample waveform (fe-web assets/content/app.json "wave"). Generated. */
.wave > i:nth-child(1){height:36.8%;--i:0}
.wave > i:nth-child(2){height:57.9%;--i:1}
.wave > i:nth-child(3){height:78.9%;--i:2}
.wave > i:nth-child(4){height:47.4%;--i:3}
.wave > i:nth-child(5){height:68.4%;--i:4}
.wave > i:nth-child(6){height:89.5%;--i:5}
.wave > i:nth-child(7){height:73.7%;--i:6}
.wave > i:nth-child(8){height:52.6%;--i:7}
.wave > i:nth-child(9){height:63.2%;--i:8}
.wave > i:nth-child(10){height:10.5%;--i:9}
.wave > i:nth-child(11){height:7.9%;--i:10}
.wave > i:nth-child(12){height:68.4%;--i:11}
.wave > i:nth-child(13){height:84.2%;--i:12}
.wave > i:nth-child(14){height:94.7%;--i:13}
.wave > i:nth-child(15){height:78.9%;--i:14}
.wave > i:nth-child(16){height:57.9%;--i:15}
.wave > i:nth-child(17){height:73.7%;--i:16}
.wave > i:nth-child(18){height:89.5%;--i:17}
.wave > i:nth-child(19){height:78.9%;--i:18}
.wave > i:nth-child(20){height:63.2%;--i:19}
.wave > i:nth-child(21){height:52.6%;--i:20}
.wave > i:nth-child(22){height:68.4%;--i:21}
.wave > i:nth-child(23){height:78.9%;--i:22}
.wave > i:nth-child(24){height:89.5%;--i:23}
.wave > i:nth-child(25){height:73.7%;--i:24}
.wave > i:nth-child(26){height:57.9%;--i:25}
.wave > i:nth-child(27){height:68.4%;--i:26}
.wave > i:nth-child(28){height:78.9%;--i:27}
.wave > i:nth-child(29){height:63.2%;--i:28}
.wave > i:nth-child(30){height:52.6%;--i:29}
.wave > i:nth-child(31){height:73.7%;--i:30}
.wave > i:nth-child(32){height:84.2%;--i:31}
.wave > i:nth-child(33){height:68.4%;--i:32}
.wave > i:nth-child(34){height:57.9%;--i:33}
.wave > i:nth-child(35){height:78.9%;--i:34}
.wave > i:nth-child(36){height:89.5%;--i:35}
.wave > i:nth-child(37){height:94.7%;--i:36}
.wave > i:nth-child(38){height:84.2%;--i:37}
.wave > i:nth-child(39){height:100.0%;--i:38}
.wave > i:nth-child(40){height:89.5%;--i:39}
.wave > i:nth-child(41){height:94.7%;--i:40}
.wave > i:nth-child(42){height:100.0%;--i:41}
.wave > i:nth-child(43){height:89.5%;--i:42}
.wave > i:nth-child(44){height:94.7%;--i:43}
.wave > i:nth-child(45){height:84.2%;--i:44}
.wave > i:nth-child(46){height:100.0%;--i:45}
.wave > i:nth-child(47){height:78.9%;--i:46}
.wave > i:nth-child(48){height:68.4%;--i:47}
.wave > i:nth-child(49){height:63.2%;--i:48}
.wave > i:nth-child(50){height:73.7%;--i:49}
.wave > i:nth-child(51){height:57.9%;--i:50}
.wave > i:nth-child(52){height:47.4%;--i:51}
.wave > i:nth-child(53){height:36.8%;--i:52}
.wave > i:nth-child(54){height:26.3%;--i:53}
.today .r1 {
  margin: calc(var(--p) * 26) 0 calc(var(--p) * 20);
}
.today .r2 {
  margin: calc(var(--p) * 28) 0 calc(var(--p) * 18);
}
.closing .fine {
  color: var(--sec2);
}
.points p.label {
  margin-top: 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
.device {
  text-align: left;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}