/* ProperHabitWeb · styles.css
 * Landing page. Direction: bottle green, dark, premium.
 *
 * Depth strategy: one system — a lighter surface plus a hairline plus a soft
 * dark shadow. No dramatic jumps, no decorative gradients on flat surfaces.
 * Gradients appear in exactly three places: the brand mark, the primary CTA,
 * and the hero light. Everywhere else the colour is flat and the structure is
 * carried by hairline borders.
 *
 * Palette and every translucent layer live in tokens.css. There is not one raw
 * colour literal in this file — `grep -nE '#[0-9a-f]{3}|rgba?\('` returns only
 * prose. A component asks for `--sheen`, `--scrim`, `--edge` or `--ink-72` by
 * role, so a palette change is a one-file edit.
 */

/* ----------------------------------------------------------------------
 * SECTION INDEX — in file order, with the line each section starts on.
 * Regenerate the numbers after a large edit; nothing else depends on them.
 *   reset            line 43
 *   utils            line 122
 *   buttons          line 198
 *   nav              line 292
 *   hero             line 439
 *   phone mockup     line 589
 *   sections         line 735
 *   cards            line 843
 *   demo             line 979
 *   code             line 1232
 *   screens          line 1334
 *   bento            line 1413
 *   device split     line 1461
 *   week story       line 1631
 *   table            line 1700
 *   plans            line 1784
 *   inspector        line 2012
 *   faq              line 2053
 *   cta band         line 2143
 *   footer           line 2233
 *   sticky cta       line 2323
 *   modal            line 2355
 * ---------------------------------------------------------------------- */

/* ------------------------------------------------------------- reset ---- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
summary {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* ------------------------------------------------------------- utils ---- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 999;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.skip-link:focus {
  top: 0.75rem;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--xs {
  width: 1rem;
  height: 1rem;
}

.icon--sm {
  width: 1.125rem;
  height: 1.125rem;
}

.icon--off {
  opacity: 0.4;
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------ buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out),
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out),
    opacity var(--dur-short) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  color: var(--on-accent);
  box-shadow: 0 1px 2px var(--shade-2), 0 12px 28px -14px var(--accent-55);
}

.btn--primary:hover {
  box-shadow: 0 2px 4px var(--shade-2), 0 18px 40px -16px var(--accent-70);
}

.btn--light {
  background: var(--ink);
  color: var(--bg);
}

.btn--light:hover {
  background: var(--pure);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--glass);
  border-color: var(--line-3);
}

.btn--glass {
  background: var(--veil-2);
  border-color: var(--edge-strong);
  color: var(--ink);
  backdrop-filter: blur(8px);
}

.btn--glass:hover {
  background: var(--edge);
}

.btn--gold {
  background: var(--grad-gold);
  color: var(--on-gold);
  box-shadow: 0 1px 2px var(--shade-2), 0 14px 32px -16px var(--gold-60);
}

.btn--gold:hover {
  box-shadow: 0 2px 4px var(--shade-2), 0 20px 44px -18px var(--gold-75);
}

.btn--lg {
  min-height: 3rem;
  padding: 0.8125rem 1.5rem;
  font-size: var(--text-md);
}

.btn--sm {
  min-height: var(--tap);
  padding: 0.4375rem 0.9375rem;
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--surface-glass);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: var(--page-max);
  min-height: var(--nav-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

/* The real app icon, corner-masked before it ever reaches the browser so the
   opaque navy corners of the 1024px master never show against the header. */
/* <picture> wraps the icon so AVIF/WebP can be offered; it must not become a
   layout box of its own. */
.brand picture {
  display: inline-flex;
  flex: none;
}

.brand__logo {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 0.6875rem;
}

.brand__logo--sm {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
}

.brand__name {
  font-size: var(--text-md);
}

.nav__links {
  display: none;
  gap: 0.25rem;
  margin-inline: auto;
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink-2);
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.nav__links a:hover {
  color: var(--ink);
  background: var(--glass);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.nav__actions .btn--light {
  display: none;
}

.nav__burger {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav__menu[hidden] {
  display: none;
}

.nav__menu {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-sm) var(--gutter) var(--space-md);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.nav__menu a {
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--ink-2);
}

.nav__menu a:hover {
  background: var(--glass);
  color: var(--ink);
}

.nav__menu-cta {
  margin-top: 0.5rem;
  color: var(--on-accent) !important;
}

@media (min-width: 60rem) {
  .nav__links,
  .nav__actions .btn--light {
    display: flex;
  }

  .nav__burger {
    display: none;
  }

  .nav__menu {
    display: none !important;
  }
}

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

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem);
}

.hero__glow {
  position: absolute;
  inset: -30% -10% auto;
  height: 90%;
  z-index: -2;
  background:
    radial-gradient(58% 52% at 22% 42%, var(--accent-22) 0%, transparent 68%),
    radial-gradient(46% 46% at 82% 12%, var(--bottle-55) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.hero__grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: radial-gradient(72% 58% at 50% 0%, var(--mask) 0%, transparent 72%);
  opacity: 0.5;
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--glass);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-2);
}

.pill--accent {
  border-color: var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent-bright);
}

.pill--tiny {
  padding: 0.125rem 0.5rem;
  font-size: var(--text-2xs);
}

.dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}

.dot--pulse {
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2.4s var(--ease-out) infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-bright-50); }
  70% { box-shadow: 0 0 0 0.5rem var(--accent-bright-0); }
  100% { box-shadow: 0 0 0 0 var(--accent-bright-0); }
}

.hero__title {
  margin-top: var(--space-md);
  font-size: var(--text-hero);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.hero__lead {
  margin-top: var(--space-md);
  max-width: 34rem;
  font-size: var(--text-lead);
  color: var(--ink-2);
}

.hero__lead strong {
  color: var(--ink);
  font-weight: 650;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-lg);
}

.hero__note {
  margin-top: var(--space-sm);
  max-width: 32rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-lg);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.6875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  font-size: var(--text-xs);
  font-weight: 550;
  color: var(--ink-2);
}

.chip .icon {
  color: var(--accent);
}

/* ------------------------------------------------------- phone mockup ---- */

.hero__device {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 2rem;
}

.phone {
  position: relative;
  width: min(20rem, 82vw);
}

.phone__frame {
  position: relative;
  padding: 0.6875rem;
  border-radius: 3rem;
  background: var(--grad-hardware);
  box-shadow:
    0 0 0 1px var(--veil-2),
    0 2px 3px var(--shade-3),
    0 40px 90px -40px var(--shade-4),
    0 0 90px -30px var(--accent-28);
}

.phone__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 19.2;
  padding: 2.25rem 0.875rem 0.875rem;
  border-radius: 2.4375rem;
  background: var(--grad-screen);
}

.phone__island {
  position: absolute;
  top: 0.6875rem;
  left: 50%;
  translate: -50% 0;
  width: 5.25rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--hardware-island);
  box-shadow: inset 0 0 0 1px var(--sheen-2);
}

/* The hero screen holds a real capture from the app. The image carries its own
   aspect ratio (660x1434) so nothing is cropped, and the screen keeps only the
   hardware island — the capture has no status bar of its own. */
.phone__screen--shot {
  padding: 0;
  aspect-ratio: 660 / 1434;
  background: var(--screen-2);
}

.phone__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}





/* floating cards */

.float {
  position: absolute;
  display: flex;
  border: 1px solid var(--line-2);
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}

.float--widget {
  top: 5.5rem;
  left: -1.5rem;
  flex-direction: column;
  gap: 0.5rem;
  width: 9.5rem;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
}

.float__label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.float__bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.375rem;
}

.float__bars i {
  height: 1.5rem;
  border-radius: 0.375rem;
  background: var(--surface-3);
}

.float__bars i.is-on {
  background: var(--grad-brand);
}

.float__text {
  font-size: var(--text-xs);
  font-weight: 600;
}

.float--live {
  right: -0.5rem;
  bottom: 6rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}

.float__pip {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

@media (max-width: 47.99rem) {
  .float {
    display: none;
  }
}

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

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

.section--raised {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-block: 1px solid var(--line);
}

.section--ink {
  background: var(--surface-inset);
  border-block: 1px solid var(--line);
}

.section--cta {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.section__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section__inner--narrow {
  max-width: 56rem;
}

.section__inner--faq {
  max-width: 48rem;
}

.section__head {
  max-width: 46rem;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head .lead {
  margin-top: var(--space-sm);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.h2 {
  font-size: var(--text-section);
  font-weight: 800;
  letter-spacing: -0.032em;
}

.h2--sm {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
}

.h2--xl {
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
}

.h2--center {
  text-align: center;
}

.h3 {
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  font-weight: 750;
}

.h4 {
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  font-weight: 700;
}

.lead {
  font-size: var(--text-lead);
  color: var(--ink-2);
}

.lead--center {
  text-align: center;
}

.body {
  margin-top: var(--space-2xs);
  color: var(--muted);
}

.body--lg {
  font-size: var(--text-md);
}

/* -------------------------------------------------------------- cards ---- */

.cards-3 {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

@media (min-width: 52rem) {
  .cards-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  position: relative;
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.card--row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.card--row > div {
  flex: 1 1 18rem;
}

.badge-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.badge-icon--done {
  background: var(--accent);
  color: var(--on-accent);
}

.badge-icon--skip {
  background: var(--surface-3);
  color: var(--ink-2);
}

.badge-icon--miss {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-icon--solid {
  background: var(--grad-brand);
  color: var(--on-accent);
}

.badge-icon--quiet {
  background: var(--glass);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.badge-icon--glass {
  background: var(--line-2);
  color: var(--ink);
}

.badge-icon--health {
  background: var(--danger-soft);
  color: var(--health-bright);
}

.tag-pill {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tag-pill--glass {
  border-color: var(--edge-2);
  background: var(--veil-2);
  color: var(--ink-85);
}

.inline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: var(--space-md);
}

.inline-tag {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--ink-2);
}

.inline-tag--solid {
  border-color: var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent-bright);
}

.mono-pill {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--muted);
}

/* --------------------------------------------------------------- demo ---- */

.demo {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 60rem) {
  .demo {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.panel {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.panel__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel__streak {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink-2);
}

.panel__streak .grad-text {
  font-size: var(--text-lg);
  font-weight: 800;
}

.panel__readout {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
  margin-top: var(--space-md);
  /* script.js fills this on load; reserving the height keeps the CLS at zero. */
  min-height: 5.5rem;
}

.week__day {
  display: grid;
  gap: 0.375rem;
  justify-items: stretch;
}

.week__toggle {
  display: grid;
  gap: 0.1875rem;
  justify-items: center;
  padding: 0.5rem 0.25rem 0.375rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.week__toggle:hover {
  border-color: var(--line-3);
}

.week__toggle b {
  font-size: var(--text-2xs);
  font-weight: 650;
  color: var(--muted);
}

.week__toggle i {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 700;
}

.week__marker {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: transparent;
}

.week__day--scheduled .week__toggle,
.week__day--done .week__toggle,
.week__day--miss .week__toggle {
  border-color: var(--accent-line);
  background: var(--surface-3);
}

.week__day--scheduled .week__marker,
.week__day--done .week__marker {
  background: var(--accent);
}

.week__day--skip .week__toggle {
  background: transparent;
  border-style: dashed;
}

.week__day--is-today .week__toggle {
  box-shadow: 0 0 0 1px var(--accent);
}

.week__state {
  min-height: 1.75rem;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xs);
  background: transparent;
  font-size: 0.625rem;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.week__state:hover {
  background: var(--glass);
  color: var(--ink);
}

.week__state--info,
.week__state--info:hover {
  border-color: transparent;
  background: transparent;
  color: var(--faint);
  cursor: default;
  font-style: normal;
}

.week__day--done .week__state {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
}

.week__day--miss .week__state {
  border-color: transparent;
  background: var(--danger-soft);
  /* --danger itself is 3.99:1 on this chip; --danger-text is 6.8:1. */
  color: var(--danger-text);
}

.week__day--skip .week__state {
  visibility: hidden;
}

/* Phones: seven columns cannot hold a 44px target, and a 3-letter day label
   squeezed into 30px was unreadable anyway. One row per day instead. */
@media (max-width: 40rem) {
  .week {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .week__day {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
  }

  .week__toggle {
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    justify-items: start;
    gap: 0.625rem;
    min-height: var(--tap);
    padding: 0.5rem 0.75rem;
  }

  .week__toggle b {
    font-size: var(--text-sm);
  }

  .week__marker {
    display: none;
  }

  .week__state {
    min-width: 5rem;
    min-height: var(--tap);
    padding: 0.5rem 0.75rem;
    font-size: var(--text-2xs);
  }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--muted);
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.25rem;
}

.swatch--done {
  background: var(--accent);
}

.swatch--scheduled {
  border: 1px solid var(--accent-line);
  background: var(--surface-3);
}

.swatch--skip {
  border: 1px dashed var(--line-2);
}

.swatch--miss {
  background: var(--danger-soft);
}

/* --------------------------------------------------------------- code ---- */

.code {
  position: relative;
  overflow: hidden;
  padding: var(--space-lg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  background: var(--surface-inset);
  box-shadow: var(--shadow-md);
}

.code__glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 70%;
  background: radial-gradient(50% 60% at 30% 40%, var(--accent-16) 0%, transparent 70%);
  pointer-events: none;
}

.code__label {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.code__block {
  position: relative;
  overflow-x: auto;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--shade-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.8;
  color: var(--ink);
  tab-size: 4;
}

.code__block .c {
  color: var(--faint);
}

.code__out {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.code__pill {
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  background: var(--accent-dim);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-bright);
}

.code__hint {
  font-size: var(--text-xs);
  color: var(--muted);
}

.code__aha {
  position: relative;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.code__aha strong {
  color: var(--ink);
}

.code-line {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-80);
}

.code-line span {
  float: right;
  font-weight: 700;
  color: var(--ink);
}

/* ------------------------------------------------------------ screens ---- */

/* Two real captures of the month view and the trend view. On phones the row
   scrolls sideways with snap points, because two stacked 660px-tall images
   would make the page enormous. */

.screens__grid {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.shot {
  margin: 0;
}

.shot__frame {
  padding: 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-2xl);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}

.shot__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

.shot figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--muted);
}

.shot figcaption b {
  color: var(--ink);
  font-weight: 650;
}

.screens__hint {
  display: none;
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--faint);
}

@media (min-width: 40rem) {
  .screens__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
    justify-items: center;
  }

  .shot {
    width: min(22rem, 100%);
  }
}

@media (max-width: 39.99rem) {
  .screens__grid {
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-xs);
  }

  .shot {
    scroll-snap-align: center;
  }

  .screens__hint {
    display: block;
  }
}

/* -------------------------------------------------------------- bento ---- */

.bento {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

@media (min-width: 48rem) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento__cell--wide {
    grid-column: span 2;
  }
}

.bento__cell {
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
}

.bento__cell--brand {
  border-color: var(--line-2);
  background: var(--grad-brand-soft);
}

/* On the brand gradient the muted step measures 2.95:1, so body copy there
   steps up one level: --ink-2 clears 5.0:1 against the lightest stop. */
.bento__cell--brand .body,
.bento__cell--brand .code-line {
  color: var(--ink-2);
}

.bento__cell--dark {
  border-color: var(--line-2);
  background: var(--surface-inset);
}

.bento__cell--brand .body,
.bento__cell--dark .body {
  color: var(--ink-80);
}

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

.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 58rem) {
  .split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .split--middle {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

.device-doc {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
}

.widget-stack {
  display: grid;
  gap: var(--space-sm);
  width: min(20rem, 88vw);
}

.widget-tile {
  padding: var(--space-md);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: 0 0 0 1px var(--sheen), var(--shadow-md);
}

.widget-tile__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.widget-tile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.widget-tile__row b {
  color: var(--faint);
}

.widget-tile__row.is-done {
  border-color: var(--accent-line);
  background: var(--accent-dim);
}

.widget-tile__row.is-done b {
  color: var(--accent-bright);
}

.widget-tile--grid {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
}

.widget-tile__bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.375rem;
  margin-top: var(--space-sm);
}

.widget-tile__bars i {
  height: 2.25rem;
  border-radius: 0.375rem;
  background: var(--surface-3);
}

.widget-tile__bars i.is-on {
  background: var(--grad-brand);
}

.widget-tile--live {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-color: var(--accent-line);
  background: linear-gradient(135deg, var(--bottle-deep) 0%, var(--bottle) 100%);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--veil), var(--shadow-md);
}

.widget-tile--live span {
  font-weight: 800;
}
.doc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}

.feature-list {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--space-lg);
}

.feature-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.feature-list__meta {
  display: grid;
  gap: 0.125rem;
}

.feature-list__meta b {
  font-size: var(--text-base);
  font-weight: 650;
}

.feature-list__meta i {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--muted);
}

.feature-list__preview {
  flex: none;
  font-size: var(--text-xs);
  color: var(--accent);
}

/* The one ask that sits right after the reader has just tested the rule. */
.code__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.code__cta span {
  font-size: var(--text-sm);
  color: var(--ink-2);
}

/* ---------------------------------------------------------- week story ---- */

.week-story {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

@media (min-width: 40rem) {
  .week-story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .week-story {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.day-card {
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.day-card--muted {
  background: transparent;
  border-style: dashed;
}

.day-card--gold {
  border-color: var(--gold-line);
  background: var(--gold-soft);
}

.day-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
}

.day-card__top b {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.day-card--gold .day-card__top {
  color: var(--gold);
}

.day-card h3 {
  margin-top: 0.625rem;
  font-size: var(--text-base);
  font-weight: 700;
}

.day-card p {
  margin-top: 0.375rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ------------------------------------------------------------- table ---- */

.table-wrap {
  margin-top: var(--space-xl);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
}
/* The wrapper is focusable so a keyboard user can scroll the table too. */
.table-wrap:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Shown only where the table genuinely overflows its container. */
.table-wrap__hint {
  display: none;
  margin: 0;
  padding: 0.5rem var(--space-md);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--faint);
}

@media (max-width: 40rem) {
  .table-wrap__hint {
    display: block;
  }
}

.table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: 0.75rem var(--space-sm);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.table thead th {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}

.table tbody th {
  font-weight: 600;
  color: var(--ink);
}

.table tbody td {
  color: var(--muted);
}

.table .is-premium {
  color: var(--accent-bright);
  font-weight: 600;
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: 0;
}

.table td .icon {
  color: var(--accent);
}

.table-note {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
}

/* ------------------------------------------------------------- plans ---- */

.plans {
  display: grid;
  gap: var(--space-md);
  align-items: stretch;
  margin-top: var(--space-xl);
}

@media (min-width: 58rem) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
}

.plan--popular {
  border-color: var(--accent-line);
}

.plan__flag {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  translate: -50% 0;
  padding: 0.1875rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan__name--gold {
  color: var(--gold);
}

.plan__price {
  margin-top: var(--space-xs);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.plan__price span {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

.plan__price--big {
  font-size: 2.625rem;
}

.plan__sub {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

.plan__note {
  margin-top: var(--space-md);
  padding: var(--space-sm);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  background: var(--gold-soft);
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--ink-2);
}

.plan__note strong {
  color: var(--gold);
}

.plan__list {
  display: grid;
  gap: 0.625rem;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.plan__list li::before {
  content: "✓";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  display: grid;
  place-items: center;
  margin-top: 0.1875rem;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.625rem;
  font-weight: 800;
}

.plan__list--strong li {
  font-weight: 600;
}

.plan__cta {
  margin-top: auto;
  margin-block-start: var(--space-lg);
  width: 100%;
}

.plan__foot {
  margin-top: 0.625rem;
  font-size: var(--text-2xs);
  text-align: center;
  color: var(--faint);
}

.plan--gold {
  padding: 1.5px;
  border: 0;
  background: linear-gradient(140deg, var(--gold-line) 0%, var(--gold-15) 45%, var(--accent-28) 100%);
  box-shadow: var(--shadow-gold);
}

.plan__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(var(--space-lg) - 1.5px);
  border-radius: calc(var(--radius-xl) - 1.5px);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg-2) 100%);
}

.plan__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
}

.plan__badge {
  padding: 0.1875rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--grad-gold);
  color: var(--on-gold);
  font-size: var(--text-2xs);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 62rem) {
  .plan--gold {
    margin-block: -0.5rem;
  }
}

.fine-print {
  margin-top: var(--space-lg);
  max-width: 52rem;
  margin-inline: auto;
  font-size: var(--text-2xs);
  line-height: 1.7;
  text-align: center;
  color: var(--faint);
}

.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 46rem;
  margin: var(--space-lg) auto 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  font-size: var(--text-sm);
  color: var(--muted);
}

.callout strong {
  color: var(--ink);
}

.callout__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent-bright);
}

/* --------------------------------------------------------- inspector ---- */

.inspector {
  padding: var(--space-md);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  background: var(--surface-inset);
  box-shadow: var(--shadow-md);
}

.inspector__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.inspector__screen {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--shade-1);
  font-size: var(--text-xs);
  line-height: 1.9;
}

.inspector__screen hr {
  margin-block: 0.625rem;
  border: 0;
  border-top: 1px solid var(--line);
}

.is-faint {
  color: var(--faint);
  font-size: 0.6875rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------- faq ---- */

.faq {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--space-xl);
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  overflow: hidden;
}

.faq__item[open] {
  border-color: var(--line-2);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-short) var(--ease-out);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  background: var(--glass);
}

.faq__plus {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--glass);
}

.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: var(--ink-2);
  border-radius: 1px;
  transition: rotate var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

.faq__plus::before {
  width: 0.625rem;
  height: 1.5px;
}

.faq__plus::after {
  width: 1.5px;
  height: 0.625rem;
}

.faq__item[open] .faq__plus {
  background: var(--accent-dim);
}

.faq__item[open] .faq__plus::before,
.faq__item[open] .faq__plus::after {
  background: var(--accent-bright);
}

.faq__item[open] .faq__plus::after {
  opacity: 0;
}

.faq__body {
  padding: 0 var(--space-md) var(--space-md);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ----------------------------------------------------------- cta band ---- */

.cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-2xl);
  background: var(--grad-brand-soft);
  box-shadow: var(--shadow-md);
}

.cta-band__glow {
  position: absolute;
  inset: -60% -10% auto;
  height: 130%;
  background: radial-gradient(46% 50% at 78% 26%, var(--accent-bright-28) 0%, transparent 70%);
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 54rem) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-lg);
}

.cta-band__meta {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  /* was an alpha composite that only reached 3.30:1 on the gradient. */
  color: var(--ink-2);
}

.try-card {
  padding: var(--space-md);
  border: 1px solid var(--edge-2);
  border-radius: var(--radius-lg);
  background: var(--scrim-screen-soft);
  backdrop-filter: blur(10px);
}

.try-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.try-card__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: var(--sheen-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.try-card__row--done {
  justify-content: space-between;
  border-color: var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent-bright);
}

.try-card__foot {
  margin-top: var(--space-sm);
  font-size: var(--text-2xs);
  color: var(--ink-66);
}

/* ------------------------------------------------------------ footer ---- */

.footer {
  padding-block: var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.footer__inner {
  display: grid;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 52rem) {
  .footer__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
  }
}

.brand--footer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__h {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__links {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
}

.footer__links a {
  color: var(--ink-2);
  transition: color var(--dur-short) var(--ease-out);
}

.footer__links a:hover {
  color: var(--accent-bright);
}

.footer__legal-id {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  font-style: normal;
  line-height: 1.8;
  color: var(--muted);
  /* The publisher address contains Ł and ź. Rendering those two glyphs in the
     webfont makes an English page download the whole 84 kB latin-ext subset, so
     the identification block uses the system stack instead: same information,
     no download, and Polish diacritics stay correct. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.footer__legal-id a {
  color: var(--accent);
}

.footer__trademark {
  margin-top: var(--space-sm);
  font-size: var(--text-2xs);
  line-height: 1.7;
  color: var(--faint);
}

.footer__links a,
.footer__legal-id a,
.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
}

.footer__bottom {
  max-width: var(--page-max);
  margin: var(--space-lg) auto 0;
  padding: var(--space-md) var(--gutter) 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-2xs);
  color: var(--faint);
}

/* -------------------------------------------------------- sticky cta ---- */

.sticky-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-2);
  background: var(--scrim-screen);
  backdrop-filter: blur(16px);
}

.sticky-cta__main {
  flex: 1;
}

.sticky-cta__alt {
  flex: none;
}

.sticky-cta[hidden] {
  display: none;
}

@media (min-width: 60rem) {
  .sticky-cta {
    display: none;
  }
}

/* ------------------------------------------------------------- modal ---- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-sm);
}

.modal[hidden] {
  display: none;
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(6px);
}

.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(64rem, 100%);
  height: min(85vh, 54rem);
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  animation: modal-in var(--dur-med) var(--ease-out);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.99); }
  to { opacity: 1; transform: none; }
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--line);
}

.modal__title {
  font-size: var(--text-md);
  font-weight: 700;
}

.modal__close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.modal__close:hover {
  background: var(--glass);
}

.modal__body {
  flex: 1;
  min-height: 0;
  background: var(--surface-inset);
}

.modal__body iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.modal__foot {
  padding: 0.625rem var(--space-md);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
}

.modal__open {
  color: var(--accent);
  font-weight: 600;
}

.modal__open:hover {
  color: var(--accent-bright);
}

body.is-locked {
  overflow: hidden;
}