/*
  japa.life

  The palette is the app's, converted rather than re-chosen: every value below
  is a `JapaTheme` colour at the same components, so a practice that is sage in
  the app is the same sage here. Two rules carry over with it.

  Gold means finished. `--gold` appears on the dial when a round is told and on
  the finished days of the month, and nowhere else — not on a button, not as a
  highlight. The moment it is decoration it stops saying anything.

  Text colours are split from fill colours the same way the app splits
  `saffron` from `saffronText`: the tint that reads beautifully as a bead is
  under 4.5:1 as a caption, so text gets the deeper step.
*/

:root {
  --highlight: #fefaf2;
  --ground: #f7f2e8;
  --shade: #f1e7d8;
  --dusk: #eadac3;
  --card: #fffefa;
  --ink: #1f1c1a;
  --ink-2: #615950;
  --hairline: rgba(31, 28, 26, 0.08);
  --saffron: #b84a0d;
  --saffron-text: #9e3d0a;
  --on-accent: #ffffff;
  --gold: #b8852a;
  --gold-text: #8c6314;

  --t-saffron: #b84a0d;
  --t-sage: #407859;
  --t-sand: #916638;
  --t-lotus: #b34561;
  --t-sky: #336e8f;
  --t-plum: #6b4782;
  --t-indigo: #47549a;

  --serif: ui-serif, "New York", "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  /* A modular scale on a perfect fourth from a 17px body. */
  --s-1: 0.8125rem;
  --s0: 1.0625rem;
  --s1: 1.375rem;
  --s2: 1.8125rem;
  --s3: clamp(2rem, 1.4rem + 2.4vw, 2.5rem);
  --s4: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);

  --tint: var(--t-saffron);
  --measure: 34rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --highlight: #1b1816;
    --ground: #131210;
    --shade: #0b0b0a;
    --dusk: #070706;
    --card: #24211f;
    --ink: #f5f0e6;
    --ink-2: #b3aba0;
    --hairline: rgba(255, 245, 230, 0.1);
    --saffron: #ff9145;
    --saffron-text: #ff9145;
    --on-accent: #14110d;
    --gold: #f2c261;
    --gold-text: #f2c261;

    --t-saffron: #ff9145;
    --t-sage: #78bf94;
    --t-sand: #d6ab73;
    --t-lotus: #ff7d9e;
    --t-sky: #73b3e6;
    --t-plum: #bf91db;
    --t-indigo: #99a6f2;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/*
  The page is a day. It opens in the light the app's screens open in — the lit
  end of `JapaBackground` — and deepens toward evening as you read down, so the
  questions and the footer sit at dusk. In dark mode the same gradient runs
  from late night into the small hours.
*/
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--ground);
  background-image: linear-gradient(
    180deg,
    var(--highlight) 0%,
    var(--ground) 30%,
    var(--shade) 70%,
    var(--dusk) 100%
  );
  font: 400 var(--s0) / 1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a { color: var(--saffron-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

.muted { color: var(--ink-2); }

/* ------------------------------------------------------------ top of page */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.25rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: var(--s1);
}
.mark img { width: 34px; height: 34px; border-radius: 8px; }

.get {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.get:hover { text-decoration: none; transform: translateY(-1px); }
.get:active { transform: scale(0.98); }
.get svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.get.quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
  padding-inline: 1.1rem;
}

/* -------------------------------------------------------------- the dial */

.hero {
  position: relative;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(4rem, 9vw, 7rem);
  isolation: isolate;
}

/* The practice's own colour, washed very faintly across the top of the page —
   what the app does behind a practice screen. It turns gold, and only gold,
   when the round is told. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: -12rem 0 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.hero::before {
  background: radial-gradient(var(--wash-size, 45% 60%) at var(--wash-x, 70%) var(--wash-y, 45%), color-mix(in oklab, var(--tint) 14%, transparent), color-mix(in oklab, var(--tint) 0%, transparent) 70%);
}
.hero::after {
  background: radial-gradient(var(--wash-size, 45% 60%) at var(--wash-x, 70%) var(--wash-y, 45%), color-mix(in oklab, var(--gold) 26%, transparent), color-mix(in oklab, var(--gold) 0%, transparent) 72%);
  opacity: 0;
}
.hero.is-complete::after { opacity: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.intro h1 {
  font-size: var(--s4);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  max-width: 16ch;
}
.intro .lede {
  font-size: var(--s1);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 26rem;
  margin-bottom: 2rem;
}
.intro .fine { font-size: var(--s-1); color: var(--ink-2); margin: 0.9rem 0 0; }

.stage {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
}

.dial {
  --d: min(30rem, 100%);
  position: relative;
  width: var(--d);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dial:active { transform: scale(0.985); transition-duration: 0.08s; }
.dial:focus-visible { outline-offset: 6px; border-radius: 50%; }

.dial .disc {
  position: absolute;
  inset: 3.2%;
  border-radius: 50%;
  background: color-mix(in oklab, var(--card) 88%, transparent);
  box-shadow:
    inset 0 0 0 1px var(--hairline),
    0 28px 56px -18px color-mix(in oklab, var(--tint) 32%, transparent);
  transition: box-shadow 1s ease;
}
.hero.is-complete .dial .disc {
  box-shadow:
    inset 0 0 0 1px var(--hairline),
    0 30px 70px -14px color-mix(in oklab, var(--gold) 55%, transparent);
}

.dial svg.beads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bead { fill: var(--tint); opacity: 0.14; transition: fill 0.9s ease, opacity 0.25s ease; }
.bead.told { opacity: 1; }
.guru { fill: var(--tint); fill-opacity: 0.14; stroke: var(--tint); stroke-opacity: 0.35; stroke-width: 1; transition: fill 0.9s ease, fill-opacity 0.6s ease, stroke-opacity 0.6s ease; }
.hero.is-closed .guru { fill-opacity: 1; stroke-opacity: 0; }
.thumb, .thumb-light { fill: var(--tint); transition: fill 0.9s ease; }
.thumb-light { opacity: 0.45; filter: blur(7px); }
.guru-halo { fill: var(--gold); opacity: 0; filter: blur(12px); transition: opacity 1s ease; }

.hero.is-complete .bead,
.hero.is-complete .guru,
.hero.is-complete .thumb,
.hero.is-complete .thumb-light { fill: var(--gold); stroke: var(--gold); }
.hero.is-complete .guru-halo { opacity: 0.55; animation: breathe 3.4s ease-in-out infinite alternate; }

@keyframes breathe { from { opacity: 0.3; } to { opacity: 0.7; } }

/* A bead settling under the thumb: born slightly too large. */
.thumb.settle { animation: settle 0.42s cubic-bezier(0.34, 1.7, 0.64, 1); transform-box: fill-box; transform-origin: center; }
@keyframes settle { from { transform: scale(1.6); } to { transform: scale(1); } }

/* The light passing once round the string when the round closes. */
.sweep { fill: none; stroke: var(--gold); opacity: 0; }
.sweep.run { animation: sweep 1.1s ease-in-out forwards; }
@keyframes sweep {
  0% { opacity: 0.95; stroke-dashoffset: 0; }
  85% { opacity: 0.9; }
  100% { opacity: 0; stroke-dashoffset: var(--sweep-end); }
}

.ripple, .halo {
  position: absolute;
  inset: 3.2%;
  border-radius: 50%;
  pointer-events: none;
}
.ripple { box-shadow: 0 0 0 1.5px var(--tint); animation: ripple 0.8s ease-out forwards; }
@keyframes ripple { from { opacity: 0.45; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }
.halo { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--gold) 55%, transparent); animation: halo 2s 0.2s ease-out forwards; opacity: 0; }
@keyframes halo { from { opacity: 0.8; transform: scale(1.03); } to { opacity: 0; transform: scale(1.45); } }

.face {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  width: 64%;
  text-align: center;
  pointer-events: none;
}
.face .words {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 0.8rem + 1.5vw, 1.7rem);
  line-height: 1.35;
  margin-bottom: 0.1rem;
  min-height: 2.7em;
  display: grid;
  place-items: center;
}
.face .words[dir="rtl"] { font-size: clamp(1.25rem, 0.9rem + 1.6vw, 1.8rem); }
.face .roman { font-family: var(--serif); font-style: italic; font-size: var(--s-1); color: var(--ink-2); min-height: 1.3em; }
.face .count {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.5rem, 2rem + 6vw, 6.25rem);
  line-height: 1;
  margin-top: 0.45rem;
  font-variant-numeric: lining-nums;
}
.face .caption { font-size: var(--s-1); color: var(--ink-2); transition: color 0.6s ease; }
.hero.is-complete .face .caption { color: var(--gold-text); }

.under {
  font-family: var(--serif);
  font-size: var(--s1);
  color: var(--ink-2);
  min-height: 1.5em;
  margin: -0.25rem 0 0;
  text-align: center;
  transition: color 0.6s ease;
}
.hero.is-complete .under { color: var(--ink); }

.practices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.practices button {
  font: inherit;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.practices .bell::before { content: none; }
.practices button::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--chip);
  flex: none;
}
.practices button:hover { background: color-mix(in oklab, var(--chip) 7%, transparent); }
.practices button[aria-pressed="true"] {
  background: color-mix(in oklab, var(--chip) 12%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--chip) 40%, transparent);
}

.bell {
  font: inherit;
  font-size: var(--s-1);
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
}
.bell svg { width: 16px; height: 16px; }
.bell[aria-pressed="true"] { color: var(--ink); }
.bell .slash { transition: opacity 0.2s ease; }
.bell[aria-pressed="true"] .slash { opacity: 0; }

/* ----------------------------------------------------------- the sections */

section.band { padding-block: clamp(3.5rem, 8vw, 6rem); }

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head h2 { font-size: var(--s3); margin-bottom: 1rem; }
.section-head p { font-size: 1.125rem; color: var(--ink-2); max-width: var(--measure); }

/* Every path. Each string is drawn with its real number of beads, so the
   difference between a mala and a tasbih is something you can see. */
.strings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.string { display: grid; grid-template-rows: auto 1fr; gap: 1.25rem; }
.string svg { width: 100%; max-width: 11rem; height: auto; overflow: visible; }
.string .bead-s { fill: var(--c); opacity: 0.45; }
.string .guru-s { fill: var(--c); }
.string .script { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.75rem); line-height: 1.4; margin: 0 0 0.35rem; }
.string .script[dir="rtl"] { font-size: 2rem; text-align: left; }
.string .roman { font-family: var(--serif); font-style: italic; color: var(--ink-2); margin: 0 0 0.75rem; }
.string .about { font-size: 0.95rem; color: var(--ink-2); margin: 0 0 0.75rem; }
.string .try {
  font: inherit;
  font-size: 0.95rem;
  background: none;
  border: 0;
  padding: 0.35rem 0;
  min-height: 44px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--c) 60%, transparent);
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
}
.string .try:hover { text-decoration-thickness: 2.5px; }

/* What it does: two columns of plain prose, not a grid of cards. */
.does {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem clamp(2rem, 6vw, 6rem);
  margin: 0;
}
.does div { max-width: var(--measure); }
.does dt { font-family: var(--serif); font-size: var(--s1); margin-bottom: 0.4rem; }
.does dd { margin: 0; color: var(--ink-2); }

/* A gentle intention. A month of practice where a missed day is simply a
   day — no cross, no red, no broken chain. */
.intention {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.intention h2 { font-size: var(--s3); margin-bottom: 1rem; }
.intention p { color: var(--ink-2); max-width: var(--measure); font-size: 1.0625rem; }

.month {
  justify-self: center;
  width: min(26rem, 100%);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 28px;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.month-title { font-family: var(--serif); font-size: var(--s1); margin: 0 0 1rem; }
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.month-grid .wd { font-size: 0.75rem; color: var(--ink-2); text-align: center; padding-bottom: 0.35rem; }
.day { aspect-ratio: 1; display: grid; place-items: center; position: relative; font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.day svg { position: absolute; inset: 8%; width: 84%; height: 84%; transform: rotate(-90deg); }
.day .track { fill: none; stroke: var(--hairline); stroke-width: 2.5; }
.day .arc { fill: none; stroke: var(--t-sage); stroke-width: 2.5; stroke-linecap: round; }
.day.done { color: var(--ink); }
.day.done svg .fill { fill: color-mix(in oklab, var(--gold) 22%, transparent); stroke: var(--gold); stroke-width: 2.5; }
.day.today { color: var(--ink); font-weight: 600; }
.month-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.1rem 0 0; font-size: var(--s-1); color: var(--ink-2); }
.month-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.month-key i { width: 0.75rem; height: 0.75rem; border-radius: 50%; display: inline-block; }
.month-key .k-done { background: color-mix(in oklab, var(--gold) 22%, transparent); box-shadow: inset 0 0 0 2px var(--gold); }
.month-key .k-part { box-shadow: inset 0 0 0 2px var(--t-sage); clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%); }
.month-key .k-none { box-shadow: inset 0 0 0 2px var(--hairline); }

/* Private. One sentence, set large, because it is the whole policy. */
.private { text-align: center; }
.private h2 {
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin: 0 auto 1.5rem;
}
.private p { color: var(--ink-2); max-width: 36rem; margin-inline: auto; font-size: 1.125rem; }

/* Languages. The names are the design: each in its own script, run together
   the way the picker lists them. */
.languages .section-head { margin-inline: auto; text-align: center; }
.languages .section-head p { margin-inline: auto; }
.tongues {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 60rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.6rem 1.6rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 1.9rem);
  line-height: 1.5;
}
.tongues li { white-space: nowrap; }
.tongues li:nth-child(3n + 2) { color: var(--ink-2); }

/* Free and Lifetime. Two columns of plain lists; the price of counting is
   the headline because it is nothing. */
.tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}
.tier h3 { font-size: var(--s2); margin-bottom: 0.4rem; }
.tier .sub { color: var(--ink-2); margin-bottom: 1.25rem; }
.tier ul { margin: 0; padding: 0; list-style: none; }
.tier li { padding: 0.55rem 0 0.55rem 1.6rem; position: relative; }
.tier li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.05rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--saffron);
  opacity: 0.8;
}

/* Questions. */
.faq { max-width: 46rem; }
.faq details { box-shadow: 0 1px 0 var(--hairline); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0;
  position: relative;
  font-family: var(--serif);
  font-size: var(--s1);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 0 1.5rem; color: var(--ink-2); max-width: 40rem; }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer strong { color: var(--ink); font-weight: 600; }

.contact {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  max-width: 46rem;
}
.contact h3 { font-size: var(--s2); margin-bottom: 0.6rem; }
.contact p { color: var(--ink-2); max-width: var(--measure); }

.closing {
  text-align: center;
  padding-block: clamp(4rem, 10vw, 7rem) clamp(3rem, 6vw, 4rem);
}
.closing img { width: 88px; height: 88px; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 18px 40px -16px rgba(120, 70, 20, 0.35); }
.closing h2 { font-size: var(--s3); margin-bottom: 1.75rem; }

footer.foot {
  padding-block: 2rem 3rem;
  font-size: var(--s-1);
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  justify-content: center;
}
footer.foot a { color: var(--ink-2); }

/* ------------------------------------------------------------- the prose */

.prose { max-width: 40rem; padding-block: clamp(2rem, 6vw, 4rem) clamp(4rem, 8vw, 6rem); }
.prose h1 { font-size: var(--s4); margin-bottom: 0.75rem; }
.prose .lede { font-size: var(--s1); color: var(--ink-2); line-height: 1.45; margin-bottom: 2.5rem; }
.prose h2 { font-size: var(--s2); margin: 2.75rem 0 0.75rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { font-weight: 600; }

/* ----------------------------------------------------------------- narrow */

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero { --wash-x: 50%; --wash-y: 70%; --wash-size: 70% 32%; }
  .intro h1, .intro .lede { margin-inline: auto; }
  .intro h1 { max-width: 14ch; }
  .intro .lede { font-size: 1.125rem; margin-bottom: 1.5rem; }
  .hero-grid { gap: 2.5rem; }
  .intro { order: 0; }
  .stage { order: 1; }
  .strings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .does, .tiers, .intention { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .strings { grid-template-columns: 1fr; }
  .string { grid-template-columns: 6.5rem 1fr; grid-template-rows: none; align-items: start; }
  .top .get span.long { display: none; }
  .face .words { min-height: 2.6em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
  }
  .ripple, .halo, .sweep.run { display: none; }
  .get:hover { transform: none; }
}

/* The bell sits at the end of the practice row, but it is a switch, not a
   practice: no dot, no outline. */
.practices .bell { box-shadow: none; color: var(--ink-2); padding-inline: 0.6rem; }
.practices .bell[aria-pressed="true"] { color: var(--ink); background: transparent; }

.top .get { gap: 0.25em; }

/* Product pages share the app's palette and the landing page's quiet rhythm.
   Screenshots keep their full aspect ratio: practice text is never cropped. */
.eyebrow { font: 500 var(--s-1) / 1.6 var(--sans); color: var(--ink-2); margin-bottom: 1rem; }
.text-link { display: inline-block; padding-block: 0.75rem; }
.demo-note, .demo-invite { font-size: var(--s-1); color: var(--ink-2); text-align: center; margin: 0; max-width: 30rem; }
.demo-invite[hidden] { display: none; }
.audience-links { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 1.5rem 0 2.5rem; }
.audience-links a { border: 1px solid var(--hairline); border-radius: 999px; padding: 0.65rem 1rem; background: var(--card); text-decoration: none; font-size: 0.9375rem; }
.audience-links a:hover { text-decoration: underline; }
.screens-tour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 4vw, 4rem); }
.screens-tour figure { margin: 0; text-align: center; }
.phone-shot { display: block; width: min(100%, 17rem); height: auto; margin-inline: auto; border: 1px solid var(--hairline); border-radius: 1.8rem; box-shadow: 0 16px 40px rgba(31,28,26,0.08); }
.screens-tour figcaption { max-width: 20rem; margin: 1.75rem auto 0; }
.screens-tour h3 { font-size: var(--s2); margin-bottom: 0.65rem; }
.screens-tour p { color: var(--ink-2); }
.watch-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-top: 4rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--card); border: 1px solid var(--hairline); border-radius: 2rem; }
.watch-shot { display: block; width: min(100%, 14rem); height: auto; margin: auto; border-radius: 2.5rem; background: #000; }
.watch-feature h2 { font-size: var(--s3); margin-bottom: 1rem; }
.watch-feature p:not(.eyebrow) { color: var(--ink-2); max-width: 35rem; }
.audience-screen { margin: 0; text-align: center; }
.audience-screen .phone-shot { width: min(100%, 18rem); }
.audience-screen .watch-shot { width: min(100%, 19rem); }
.audience-screen figcaption { margin-top: 1rem; font-size: var(--s-1); color: var(--ink-2); }
.closing .fine { font-size: var(--s-1); color: var(--ink-2); margin-top: 1rem; }
@media (max-width: 650px) {
  .screens-tour { grid-template-columns: 1fr; gap: 2.5rem; }
  .screens-tour figure { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; text-align: left; }
  .screens-tour figcaption { margin: 0; }
  .screens-tour h3 { font-size: var(--s1); }
  .screens-tour p { font-size: 0.9375rem; }
  .phone-shot { border-radius: 1rem; }
  .watch-feature { grid-template-columns: 1fr; }
  .watch-feature .watch-shot { width: 10rem; }
  .audience-hero .intro h1 { max-width: 18ch; }
}

.browser-counter { padding-block: clamp(3rem, 7vw, 6rem); scroll-margin-top: 1rem; }
.counter-settings h2 { font-size: var(--s3); margin-bottom: 1.25rem; }
.counter-settings .fine { font-size: var(--s-1); color: var(--ink-2); margin-top: 0.6rem; }
.counter-field label, .counter-sizes legend { font-weight: 600; }
.counter-field select { display: block; width: 100%; margin-top: 0.5rem; padding: 0.8rem; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--ink-2); border-radius: 0.6rem; }
.counter-sizes { padding: 0; margin: 1.5rem 0 0; border: 0; }
.counter-sizes label { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem 0.5rem 0; gap: 0.4rem; }
.counter-sizes input { accent-color: var(--saffron); width: 1.1rem; height: 1.1rem; }
.practice-words { font-size: var(--s2); line-height: 1.7; white-space: pre-line; margin: 1.5rem 0 0.5rem; }
.practice-roman { white-space: pre-line; color: var(--ink-2); font-family: var(--serif); }
.counter-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.counter-actions button { min-height: 44px; padding: 0.6rem 1rem; border-radius: 2rem; border: 1px solid var(--ink-2); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.counter-actions button:disabled { opacity: 0.5; cursor: default; }
.session-total { margin: 0; text-align: center; font-variant-numeric: tabular-nums; }
.browser-counter [hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ------------------------------------------------- generated library pages

   The practice and observance pages come out of Scripts/GenerateSitePages.swift,
   which reads the app's own library. These four rules are the only styling they
   need that the hand-written pages had not already asked for. */

.collection-links {
  margin: 1rem 0 2rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.15rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.collection-links li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: var(--s-1);
  line-height: 1.5;
}

.collection-links li a {
  color: var(--ink);
  font-size: var(--s0);
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.2em;
}

.collection-links .count { color: var(--ink-2); white-space: nowrap; }

/* Citations are the reason these pages are worth reading rather than merely
   indexable, so they are set to be read, not hidden in a footnote. */
.references {
  margin: 1rem 0 2rem;
  padding-left: 1.2rem;
  color: var(--ink-2);
  font-size: var(--s-1);
  line-height: 1.7;
  max-width: var(--measure);
}

.references li { margin: 0.35rem 0; }

.observance-dates {
  margin: 1rem 0 2rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.observance-dates li {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  background: var(--card);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* A year that has already gone recedes rather than disappearing: the table
   reaches to 2030 and seeing where it started is part of trusting it.
   It recedes by losing its card and softening its rule, not by fading: an
   opacity low enough to read as past took these dates to 2.7:1, and they are
   information, not decoration. --ink-2 holds 6.2:1 light and 8.0:1 dark. */
.observance-dates li.past {
  background: none;
  color: var(--ink-2);
  border-style: dashed;
}

/* ------------------------------------------------------------- breath pacer

   The app's Breathe tab carries a turn of the breath with an arc and a haptic.
   The web has no haptic, so the word does the work the haptic did and the ring
   moves continuously rather than in steps. */

.pacer {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  padding: 2.5rem 0 1rem;
}

.pacer-stage {
  position: relative;
  width: min(17rem, 68vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.pacer-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent);
  transform: scale(0.34);
  will-change: transform;
}

.pacer-face { position: relative; text-align: center; }
.pacer-phase { font-family: var(--serif); font-size: var(--s1); margin: 0; }
.pacer-remaining {
  font-family: var(--serif);
  font-size: var(--s2);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  margin: 0.15rem 0 0;
  min-height: 1.2em;
}

.pacer-meta { color: var(--ink-2); font-size: var(--s-1); margin: 0; }

/* The ring is the only thing on the page that moves for a long time, so it is
   the one thing that must stop moving when the reader has asked for less. The
   script also pins it to each phase's end scale. */
@media (prefers-reduced-motion: reduce) {
  .pacer-ring { transition: none; }
}

/* The next date an observance falls on, picked in the reader's clock by
   dates.js rather than baked in when the page was generated. */
.observance-dates li.next {
  border-color: color-mix(in srgb, var(--saffron) 45%, transparent);
  color: var(--ink);
}