/*
 * leapsteps.ai: the shared stylesheet of the home, legal, support, joined
 * and 404 pages. The invitation page (/invite) keeps its own inline styles.
 *
 * White surfaces, carbon anchors, signal orange for the one primary
 * action per page, rust for links, green only for completion.
 */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/sora-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-700-normal.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  --page: #FFFFFF;
  --band: #F0F2EF;
  --surface: #FFFFFF;
  --ink: #171A18;
  --ink-secondary: #3A403C;
  --border: #CFD3CF;
  --control-border: #727A74;
  --link: #A33B0C;
  --focus: #171A18;
  --primary: #FF8936;
  --primary-hover: #F68535;
  --primary-pressed: #EC8034;
  --on-primary: #171A18;
  --success: #286140;
  --on-success: #FFFFFF;
  /* A timer break: the app's green on a light surface. The app's Do card
     is dark in both modes, so it shows the dark mint there; this page's
     face follows the page, so light mode takes the light green. */
  --break: #286140;
  --error: #A3263D;
  --anchor: #171A18;
  --on-anchor: #FFFFFF;
  --on-anchor-secondary: #CFD3CF;
  --footer: #171A18;
  --on-footer: #FFFFFF;
  --on-footer-secondary: #CFD3CF;

  --shadow-lifted: 0 1px 2px rgba(23, 26, 24, 0.06),
    0 8px 24px rgba(23, 26, 24, 0.08), 0 24px 56px rgba(23, 26, 24, 0.07);
  --primary-glow: 0 1px 2px rgba(23, 26, 24, 0.14),
    0 4px 14px rgba(255, 137, 54, 0.3);
  --primary-glow-hover: 0 1px 2px rgba(23, 26, 24, 0.16),
    0 8px 24px rgba(255, 137, 54, 0.45);

  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --gutter: 16px;
  --content: 1120px;
}

/* Dark mode uses the app's own dark palette: page
   #121412, raised surface #1C1F1D, subtle surface #282B29, divider
   #3A3E3B, secondary text #A8AFA9 and orange links #F4A472, so screenshots
   of the app sit on the app's own background. It follows the device, or
   the visitor's choice in the header switch (see theme.js), which sets
   data-theme on the root; every dark block below has a twin for that. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #121412;
    --band: #1C1F1D;
    --surface: #282B29;
    --ink: #F0F2EF;
    --ink-secondary: #A8AFA9;
    --border: #3A3E3B;
    --control-border: #8E9B90;
    --link: #F4A472;
    --focus: #F0F2EF;
    --primary-hover: #FF8E3E;
    --break: #8AD4A1;
    --error: #FF9BAD;
    --anchor: #F0F2EF;
    --on-anchor: #171A18;
    --on-anchor-secondary: #3A403C;
    --footer: #0B0D0B;

    --shadow-lifted: 0 1px 2px rgba(0, 0, 0, 0.4),
      0 12px 32px rgba(0, 0, 0, 0.35), 0 32px 64px rgba(0, 0, 0, 0.25);
    --primary-glow: 0 1px 2px rgba(0, 0, 0, 0.4),
      0 4px 16px rgba(255, 137, 54, 0.22);
    --primary-glow-hover: 0 1px 2px rgba(0, 0, 0, 0.4),
      0 8px 26px rgba(255, 137, 54, 0.36);
  }
}

:root[data-theme="dark"] {
  --page: #121412;
  --band: #1C1F1D;
  --surface: #282B29;
  --ink: #F0F2EF;
  --ink-secondary: #A8AFA9;
  --border: #3A3E3B;
  --control-border: #8E9B90;
  --link: #F4A472;
  --focus: #F0F2EF;
  --primary-hover: #FF8E3E;
  --break: #8AD4A1;
  --error: #FF9BAD;
  --anchor: #F0F2EF;
  --on-anchor: #171A18;
  --on-anchor-secondary: #3A403C;
  --footer: #0B0D0B;

  --shadow-lifted: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 12px 32px rgba(0, 0, 0, 0.35), 0 32px 64px rgba(0, 0, 0, 0.25);
  --primary-glow: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 4px 16px rgba(255, 137, 54, 0.22);
  --primary-glow-hover: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 8px 26px rgba(255, 137, 54, 0.36);
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}

h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
}

p,
ul,
ol {
  margin: 0;
}

/* Elements styled with their own display stay hidden while [hidden]. */
[hidden] {
  display: none !important;
}

a {
  color: var(--link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2.5px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
.choice:has(:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--anchor);
  color: var(--on-anchor);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

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

/* Header and footer */

.site-header {
  padding-block: 20px;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  display: inline-flex;
  border-radius: 8px;
}

.wordmark img {
  display: block;
  width: auto;
  height: 34px;
}

.site-header .wordmark-reverse {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .wordmark-primary {
    display: none;
  }

  :root:not([data-theme="light"]) .site-header .wordmark-reverse {
    display: block;
  }
}

:root[data-theme="dark"] .site-header .wordmark-primary {
  display: none;
}

:root[data-theme="dark"] .site-header .wordmark-reverse {
  display: block;
}

.site-footer {
  margin-top: 0;
  padding-block: 48px;
  background: var(--footer);
  color: var(--on-footer);
}

.site-footer .container {
  display: grid;
  gap: 24px;
}

.site-footer .wordmark img {
  height: 30px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--on-footer);
  font-weight: 600;
}

.footer-note {
  color: var(--on-footer-secondary);
  font-size: 0.9375rem;
}

/* Home: hero */

.hero {
  padding-block: 32px 64px;
}

.hero .container {
  display: grid;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 4.4vw + 1rem, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

/* Keeps a hyphenated word whole, so a line never ends on "to-". */
.no-break {
  white-space: nowrap;
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hero-lead {
  max-width: 36rem;
  margin-top: 20px;
  color: var(--ink-secondary);
  font-size: 1.25rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* The hero's app demo: the real app's screens drawn in HTML, played by
   assets/demo.js. Sizes are in the app's own points through --u, so the
   phone keeps its proportions at any width. */

.demo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  margin: 0;
}

/* Shown when reduced motion keeps the demo from starting by itself. */
.demo-play {
  position: absolute;
  top: 38%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 22px 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--primary-glow-hover);
  cursor: pointer;
  transform: translateX(-50%);
}

.demo-play:hover {
  background: var(--primary-hover);
}

.demo-play-icon {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
}

.phone {
  --screen-w: min(78vw, 300px);
  --u: calc(var(--screen-w) / 390);
  padding: 9px;
  border-radius: 46px;
  background: #0E100F;
  box-shadow: inset 0 0 0 1.5px #3A403C, 0 2px 4px rgba(23, 26, 24, 0.12),
    0 18px 40px rgba(23, 26, 24, 0.18), 0 40px 80px rgba(23, 26, 24, 0.14);
}

.app-screen {
  --app-bg: #FFFFFF;
  --app-ink: #171A18;
  --app-ink-2: #595F5B;
  --app-line: #CFD3CF;
  --app-control: #727A74;
  --app-chip: #F0F2EF;
  --app-carbon: #161A17;
  --app-on-carbon: #FFFFFF;
  --app-green: #286140;
  --app-on-green: #FFFFFF;
  --app-rust: #A33B0C;
  --app-orange: #FF8936;
  --app-sheet: #FFFFFF;
  --app-scrim: rgba(23, 26, 24, 0.5);
  --app-soft: #F0F2EF;
  --app-tab-on: #161A17;
  --app-tab-on-ink: #FFFFFF;
  --app-icon-filter: none;
  --app-icon-on-filter: invert(1);

  position: relative;
  width: var(--screen-w);
  height: calc(var(--u) * 884);
  overflow: hidden;
  border-radius: 38px;
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: var(--font-ui);
  font-size: calc(var(--u) * 16);
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-screen {
    --app-bg: #121412;
    --app-ink: #F0F2EF;
    --app-ink-2: #A8AFA9;
    --app-line: #3A3E3B;
    --app-control: #8E9B90;
    --app-chip: #1C1F1D;
    --app-carbon: #161A17;
    --app-on-carbon: #F0F2EF;
    --app-green: #8AD4A1;
    --app-on-green: #121412;
    --app-rust: #F4A472;
    --app-sheet: #1C1F1D;
    --app-scrim: rgba(0, 0, 0, 0.6);
    --app-soft: #303A32;
    --app-tab-on: #2E322F;
    --app-tab-on-ink: #F0F2EF;
    --app-icon-filter: invert(1);
    --app-icon-on-filter: invert(1);
  }

  :root:not([data-theme="light"]) .phone {
    box-shadow: inset 0 0 0 1.5px #46524A, 0 18px 40px rgba(0, 0, 0, 0.45),
      0 40px 80px rgba(0, 0, 0, 0.35);
  }

  :root:not([data-theme="light"]) .app-screen .app-button-dark {
    background: #F0F2EF;
    color: #121412;
  }
}

:root[data-theme="dark"] .app-screen {
  --app-bg: #121412;
  --app-ink: #F0F2EF;
  --app-ink-2: #A8AFA9;
  --app-line: #3A3E3B;
  --app-control: #8E9B90;
  --app-chip: #1C1F1D;
  --app-carbon: #161A17;
  --app-on-carbon: #F0F2EF;
  --app-green: #8AD4A1;
  --app-on-green: #121412;
  --app-rust: #F4A472;
  --app-sheet: #1C1F1D;
  --app-scrim: rgba(0, 0, 0, 0.6);
  --app-soft: #303A32;
  --app-tab-on: #2E322F;
  --app-tab-on-ink: #F0F2EF;
  --app-icon-filter: invert(1);
  --app-icon-on-filter: invert(1);
}

:root[data-theme="dark"] .phone {
  box-shadow: inset 0 0 0 1.5px #46524A, 0 18px 40px rgba(0, 0, 0, 0.45),
    0 40px 80px rgba(0, 0, 0, 0.35);
}

:root[data-theme="dark"] .app-screen .app-button-dark {
  background: #F0F2EF;
  color: #121412;
}

.app-screen svg {
  display: block;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  flex: none;
}

.app-screen p,
.app-screen ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The status bar, with the camera island over it. */
.app-status {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 34);
  font-size: calc(var(--u) * 15);
  font-weight: 700;
}

.app-status::after {
  content: "";
  position: absolute;
  top: calc(var(--u) * 11);
  left: 50%;
  width: calc(var(--u) * 104);
  height: calc(var(--u) * 30);
  border-radius: 999px;
  background: #0E100F;
  transform: translateX(-50%);
}

.app-status-icons {
  display: flex;
  gap: calc(var(--u) * 5);
}

.app-status-icons i {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 10);
  border-radius: calc(var(--u) * 3);
  background: currentColor;
}

.app-status-icons i:first-child {
  width: calc(var(--u) * 15);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  border-radius: 0;
}

.app-status-icons i:last-child {
  width: calc(var(--u) * 24);
  border: calc(var(--u) * 1.5) solid currentColor;
  background: linear-gradient(90deg, currentColor 70%, transparent 70%) content-box;
  padding: calc(var(--u) * 1.5);
}

/* The desktop window's caption band and sidebar exist only in the
   desktop demo (see the 1100px block below). */
.app-caption,
.app-sidebar {
  display: none;
}

/* Each screen fills the space between the status bar and the tabs. */
.app-scene {
  position: absolute;
  top: calc(var(--u) * 48);
  right: 0;
  bottom: calc(var(--u) * 80);
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s linear 0.4s, visibility 0s linear 0.4s;
}

/* The new screen fades in on top of the old one, which stays in place
   until it is covered, so there is never a blank frame between them. */
[data-scene="plan"] .app-scene-plan,
[data-scene="do"] .app-scene-do,
[data-scene="progress"] .app-scene-progress {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}

.app-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
  flex: none;
  height: calc(var(--u) * 56);
  padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 18);
}

.app-title {
  font-size: calc(var(--u) * 21);
  font-weight: 600;
}

.app-bar-actions {
  display: flex;
  gap: calc(var(--u) * 16);
  margin-left: auto;
}

.app-icon {
  position: relative;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  flex: none;
}

.app-menu {
  background: linear-gradient(currentColor 0 0) 0 22% / 100% 9% no-repeat,
    linear-gradient(currentColor 0 0) 0 50% / 100% 9% no-repeat,
    linear-gradient(currentColor 0 0) 0 78% / 100% 9% no-repeat;
}

.app-back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8%;
  width: 55%;
  height: 55%;
  border-bottom: calc(var(--u) * 2.2) solid currentColor;
  border-left: calc(var(--u) * 2.2) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.app-back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  width: 85%;
  height: calc(var(--u) * 2.2);
  background: currentColor;
  transform: translateY(-50%);
}

/* Tabs */
.app-tabs {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 80);
  padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 14);
  border-top: 1px solid var(--app-line);
  background: var(--app-bg);
}

.app-tab {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 14);
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 12.5);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.app-tab img {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  opacity: 0.7;
  filter: var(--app-icon-filter);
}

[data-scene="plan"] .app-tab-plan,
[data-scene="do"] .app-tab-do,
[data-scene="progress"] .app-tab-inspire {
  background: var(--app-tab-on);
  color: var(--app-tab-on-ink);
  font-weight: 700;
}

[data-scene="plan"] .app-tab-plan img,
[data-scene="do"] .app-tab-do img,
[data-scene="progress"] .app-tab-inspire img {
  opacity: 1;
  filter: var(--app-icon-on-filter);
}

/* Shared controls */
.app-check {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  flex: none;
  border: calc(var(--u) * 2) solid var(--app-control);
  border-radius: 50%;
  color: var(--app-on-green);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.app-check svg {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.3s ease 0.1s;
}

.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
  min-height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 14);
  font-size: calc(var(--u) * 16);
  font-weight: 600;
}

.app-button svg {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
}

.app-button-orange {
  background: var(--app-orange);
  color: #171A18;
}

.app-button-dark {
  background: var(--app-carbon);
  color: #FFFFFF;
}

.app-button-outline {
  border: calc(var(--u) * 1.5) solid var(--app-control);
  background: var(--app-soft);
}

.app-button-soft {
  background: var(--app-soft);
}

.app-generate {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  color: var(--app-rust);
  font-weight: 600;
}

.app-generate svg {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
}

/* The placeholder, the typed text and the filled-in text share one grid
   cell, so a field grows to fit whichever is longest. */
.app-field {
  position: relative;
  display: grid;
  align-content: start;
  min-height: calc(var(--u) * 62);
  padding: calc(var(--u) * 14) calc(var(--u) * 18);
  border: calc(var(--u) * 1.5) solid var(--app-control);
  border-radius: calc(var(--u) * 16);
  font-size: calc(var(--u) * 15.5);
}

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

.app-field > * {
  grid-area: 1 / 1;
}

.app-fill {
  background: var(--app-sheet);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* A new goal for a task: the New Goal sheet slides up over Plan. */
.app-scrim {
  position: absolute;
  inset: calc(var(--u) * -48) 0 calc(var(--u) * -80);
  z-index: 2;
  background: var(--app-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.sheet-open .app-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

.app-sheet {
  position: absolute;
  right: 0;
  bottom: calc(var(--u) * -80);
  left: 0;
  z-index: 3;
  display: grid;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 26);
  border-radius: calc(var(--u) * 28) calc(var(--u) * 28) 0 0;
  background: var(--app-sheet);
  visibility: hidden;
  transform: translateY(105%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s linear 0.35s;
}

.sheet-open .app-sheet {
  visibility: visible;
  transform: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}

.app-handle {
  justify-self: center;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 4);
  border-radius: 999px;
  background: var(--app-line);
}

.app-sheet-title {
  font-size: calc(var(--u) * 15);
  font-weight: 600;
}

.app-field-long {
  min-height: calc(var(--u) * 92);
  font-size: calc(var(--u) * 17);
  font-weight: 600;
}

.app-typed {
  position: relative;
}

.app-typed:has(.js-goal-text:not(:empty)),
.is-typing .app-typed {
  background: var(--app-sheet);
}

.app-caret {
  display: inline-block;
  width: calc(var(--u) * 2);
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--app-orange);
  opacity: 0;
}

.is-typing .app-typed .app-caret,
.task-typing .app-quick-typed .app-caret {
  opacity: 1;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.app-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * -4);
  font-size: calc(var(--u) * 15);
}

.app-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 14);
  margin-top: calc(var(--u) * 8);
}

.has-mid .app-fill-mid,
.has-short .app-fill-short {
  opacity: 1;
}

/* The field the picked option lands in glows once, so the eye follows it. */
.has-mid .app-field:has(> .app-fill-mid),
.has-short .app-field:has(> .app-fill-short) {
  animation: landed 1s ease-out;
}

.has-mid .app-field:has(> .app-fill-mid) .app-fill,
.has-short .app-field:has(> .app-fill-short) .app-fill {
  background: transparent;
}

.has-mid .app-field:has(> .app-fill-mid) .app-placeholder,
.has-short .app-field:has(> .app-fill-short) .app-placeholder {
  visibility: hidden;
}

@keyframes landed {
  0% {
    border-color: var(--app-orange);
    background: color-mix(in srgb, var(--app-orange) 16%, var(--app-sheet));
  }
}

/* The AI dialog, and its options */
.app-dialog-scrim {
  position: absolute;
  inset: calc(var(--u) * -48) 0 calc(var(--u) * -80);
  z-index: 4;
  background: rgba(15, 18, 16, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.ai-open .app-dialog-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

.app-dialog {
  position: absolute;
  top: calc(var(--u) * 46);
  right: calc(var(--u) * 24);
  left: calc(var(--u) * 24);
  z-index: 5;
  display: grid;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 22) calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 22);
  background: var(--app-sheet);
  box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 48) rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--u) * 10)) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s linear 0.28s;
}

.ai-open .app-dialog {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s;
}

/* The hint, the loading bars and the options share one cell of a fixed
   height, so the dialog never changes size; they cross-fade instead. */
.app-results {
  display: grid;
  min-height: calc(var(--u) * 222);
}

.app-results > * {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.app-results-hint {
  align-self: center;
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 13.5);
  text-align: center;
}

.ai-open:not(.ai-loading):not(.ai-options):not(.ai-short) .app-hint-mid,
.ai-open.ai-short:not(.ai-loading):not(.ai-options) .app-hint-short,
.ai-loading .app-skeleton,
.ai-options:not(.ai-short) .app-options-mid,
.ai-options.ai-short .app-options-short {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

.app-dialog-title {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 22);
  font-weight: 700;
  text-align: center;
}

.app-dialog-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--u) * 8);
  font-size: calc(var(--u) * 14);
}

.app-input {
  position: relative;
  display: grid;
  min-width: 0;
}

.app-input > * {
  grid-area: 1 / 1;
}

.app-dialog-help {
  margin-top: calc(var(--u) * -6);
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 11.5);
  line-height: 1.3;
}

.app-input,
.app-select {
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border: calc(var(--u) * 1.5) solid var(--app-control);
  border-radius: calc(var(--u) * 12);
  color: var(--app-ink-2);
}

.app-select {
  background: var(--app-chip);
  color: var(--app-ink);
  font-weight: 700;
}

.app-skeleton,
.app-options {
  display: grid;
  gap: calc(var(--u) * 10);
}

.app-skeleton i {
  height: calc(var(--u) * 64);
  border-radius: calc(var(--u) * 14);
  background: linear-gradient(90deg, var(--app-chip) 30%, var(--app-soft) 50%,
      var(--app-chip) 70%) 0 0 / 220% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

.app-options li {
  display: flex;
  align-items: center;
  min-height: calc(var(--u) * 64);
  padding: calc(var(--u) * 10) calc(var(--u) * 16);
  border: calc(var(--u) * 1.5) solid var(--app-line);
  border-radius: calc(var(--u) * 14);
  font-size: calc(var(--u) * 14.5);
  line-height: 1.3;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ai-options .app-options li {
  animation: rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ai-options .app-options li:nth-child(2) {
  animation-delay: 0.07s;
}

.ai-options .app-options li:nth-child(3) {
  animation-delay: 0.14s;
}

.ai-picked .app-options li:first-child {
  border-color: var(--app-orange);
  background: color-mix(in srgb, var(--app-orange) 12%, var(--app-sheet));
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* Plan, with the app's row metrics: 18 px section titles, 16 px task
   titles over a 13 px due line, and a 144 px slot for the row's icons
   (which is why a long title wraps on a phone). */
.app-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 16);
  border-bottom: 1px solid var(--app-line);
  font-size: calc(var(--u) * 18);
  font-weight: 700;
}

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

.app-screen .app-day {
  padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 2);
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 12);
}

.app-section-quiet {
  color: var(--app-ink-2);
}

.app-chevron {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  margin-right: calc(var(--u) * 6);
  border-top: calc(var(--u) * 2) solid currentColor;
  border-left: calc(var(--u) * 2) solid currentColor;
  color: var(--app-ink-2);
  transform: rotate(45deg);
}

.app-chevron-right {
  transform: rotate(135deg);
}

.app-rows {
  display: grid;
}

.app-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) calc(var(--u) * 144);
  align-items: center;
  gap: calc(var(--u) * 12);
  min-height: calc(var(--u) * 74);
  padding: calc(var(--u) * 10) calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * 16);
  border-bottom: 1px solid var(--app-line);
}

.app-row-text {
  display: grid;
  gap: calc(var(--u) * 2);
}

.app-row-title {
  position: relative;
  justify-self: start;
  font-size: calc(var(--u) * 16);
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.app-row-sub {
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 13);
}

.app-row-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 6);
}

/* The subtask and goal buttons on a row; filled while their panel is open. */
.app-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border-radius: calc(var(--u) * 10);
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 13);
  transition: background-color 0.2s ease;
}

.app-chip svg {
  width: calc(var(--u) * 21);
  height: calc(var(--u) * 21);
  color: var(--app-ink);
}

.subs-open .js-sub-chip,
.crumb-open .js-goal-btn {
  background: var(--app-soft);
}

/* A task shows the goal icon once it is linked to a goal. */
.app-screen:not(.linked) .js-goal-btn {
  display: none;
}

.linked .js-goal-btn {
  animation: landed-icon 0.9s ease-out;
}

@keyframes landed-icon {
  0% {
    background: color-mix(in srgb, var(--app-orange) 30%, transparent);
    transform: scale(0.6);
  }

  40% {
    transform: scale(1.1);
  }
}

/* The goal breadcrumb and the subtask list under a row. They slide open
   from zero height, the way the app expands them. */
.app-plan-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.crumb-open .app-crumb,
.subs-open .app-subs {
  grid-template-rows: 1fr;
}

.app-expand-clip {
  min-height: 0;
  overflow: hidden;
}

.app-expand-body {
  display: grid;
  border-bottom: 1px solid var(--app-line);
  border-left: calc(var(--u) * 1.5) solid var(--app-line);
}

/* Positions from the app at 390 dp: the goal's line at 37, its dots at
   61 and its text at 82; the subtasks' line at 28, their circles at 52. */
.app-crumb .app-expand-body {
  margin-left: calc(var(--u) * 36);
  padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 10) calc(var(--u) * 44);
}

.app-subs .app-expand-body {
  margin-left: calc(var(--u) * 27);
  padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 23.5);
}

.app-screen .app-tier {
  position: relative;
  display: grid;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 11) 0;
}

.app-tier::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 15.5);
  left: calc(var(--u) * -24.5);
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: var(--app-control);
}

/* The line from each dot down to the next tier's. */
.app-tier:not(.app-tier-now)::after {
  content: "";
  position: absolute;
  top: calc(var(--u) * 26);
  bottom: calc(var(--u) * -9);
  left: calc(var(--u) * -21.75);
  width: calc(var(--u) * 1.5);
  background: var(--app-line);
}

.app-tier-now::before {
  top: calc(var(--u) * 12.5);
  left: calc(var(--u) * -27.5);
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  border: calc(var(--u) * 2) solid var(--app-rust);
  background: radial-gradient(circle, var(--app-rust) 30%, transparent 34%);
}

.app-tier-label {
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 12);
}

.app-tier-now .app-tier-label {
  color: var(--app-rust);
}

.app-tier-text {
  font-size: calc(var(--u) * 14.5);
}

.app-screen .app-subs-head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 14) 0 calc(var(--u) * 6);
  font-size: calc(var(--u) * 14.5);
}

.app-subs-head b {
  font-weight: 600;
}

.app-subs-head span {
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 12);
}

.app-screen .app-sub {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 14) 0;
  font-size: calc(var(--u) * 15);
}

.app-check-sm {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  border-width: calc(var(--u) * 1.6);
}

.app-screen .app-add-sub {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 14) 0 calc(var(--u) * 18);
  color: var(--app-rust);
  font-size: calc(var(--u) * 15);
}

.app-screen .app-add-sub svg {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
}

/* Checking a task off: the app's "+10 XP" burst pops 16 px above the
   end of the title for 0.9 s, then the done task moves under the open ones
   with an X to archive it. */
.app-xp {
  position: absolute;
  top: calc(var(--u) * -16);
  right: calc(var(--u) * -4);
  padding: calc(var(--u) * 3) calc(var(--u) * 8);
  border-radius: 999px;
  background: var(--app-green);
  color: var(--app-on-green);
  font-size: calc(var(--u) * 12);
  font-weight: 700;
  opacity: 0;
}

.plan-done .app-xp {
  animation: xp 0.9s ease-out both;
}

@keyframes xp {
  0% {
    opacity: 0;
    transform: translateY(calc(var(--u) * 8)) scale(0.8);
  }

  20%,
  70% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: translateY(calc(var(--u) * -16));
  }
}

.plan-done .js-plan-check,
.do-done .js-do-check {
  border-color: var(--app-green);
  background: var(--app-green);
}

.plan-done .js-plan-check svg,
.do-done .js-do-check svg {
  stroke-dashoffset: 0;
}

.plan-done .app-row-done .app-row-title {
  color: var(--app-ink-2);
  text-decoration: line-through;
}

.app-archive {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.app-screen .app-archive svg {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
}

.plan-done .app-archive {
  opacity: 1;
}

.done-moved .app-row-done {
  order: 1;
  animation: rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The task typed into the quick-add box, dropping into Today. */
.is-scripted .app-screen:not(.task-added) .app-row-added {
  display: none;
}

.task-added .app-row-added {
  animation: rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.app-quick-add {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  margin-top: auto;
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border-top: 1px solid var(--app-line);
}

.app-quick-add img {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  filter: var(--app-icon-filter);
}

.app-quick-input {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: calc(var(--u) * 12) calc(var(--u) * 18);
  border: calc(var(--u) * 1.5) solid var(--app-control);
  border-radius: 999px;
  color: var(--app-ink-2);
  white-space: nowrap;
}

.app-quick-typed {
  color: var(--app-ink);
}

.task-typing .app-quick-placeholder,
.app-quick-input:has(.js-task-text:not(:empty)) .app-quick-placeholder {
  display: none;
}

.app-quick-plus {
  position: relative;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 12);
  background: var(--app-orange)
    linear-gradient(#171A18 0 0) center / 36% calc(var(--u) * 2) no-repeat;
}

.app-quick-plus::after {
  content: "";
  position: absolute;
  inset: 32% calc(50% - var(--u)) 32%;
  background: #171A18;
}

/* Do */
.app-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(var(--u) * 6) calc(var(--u) * 20) 0;
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 14);
  background: var(--app-chip);
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 15);
  text-align: center;
}

.app-segments span {
  padding: calc(var(--u) * 8) 0;
  border-radius: calc(var(--u) * 10);
}

.app-segments .is-on {
  background: var(--app-bg);
  color: var(--app-ink);
}

.app-timer {
  display: grid;
  justify-items: center;
  align-content: start;
  flex: 1;
  margin: calc(var(--u) * 26) calc(var(--u) * 20) 0;
  padding: calc(var(--u) * 34) calc(var(--u) * 22);
  border: 1px solid var(--app-line);
  border-radius: calc(var(--u) * 24);
  background: var(--app-carbon);
  color: #FFFFFF;
}

.app-timer-label {
  color: var(--app-orange);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 24);
}

.app-timer-time {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 78);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.app-timer-track {
  width: 100%;
  height: calc(var(--u) * 4);
  margin-top: calc(var(--u) * 14);
  border-radius: 999px;
  background: #727A74;
}

.app-timer-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--app-orange);
}

.app-timer-meta {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: calc(var(--u) * 14);
  font-size: calc(var(--u) * 14.5);
  font-weight: 600;
}

.app-timer-meta span + span {
  color: #CFD3CF;
}

.app-check-on-dark {
  border-color: #CFD3CF;
}

.app-multitask {
  justify-items: stretch;
  align-content: start;
  padding: calc(var(--u) * 24) calc(var(--u) * 18);
  text-align: center;
}

.app-multitask .app-timer-time {
  font-size: calc(var(--u) * 66);
}

.app-mt-group {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--u) * 18);
  padding-bottom: calc(var(--u) * 6);
  border-bottom: 1px solid #3A403C;
  color: #CFD3CF;
  font-size: calc(var(--u) * 13);
  text-align: left;
}

.app-mt-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 9) 0;
  border-bottom: 1px solid #2A302C;
  text-align: left;
  animation: rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.app-mt-title {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 16);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 0.3s ease;
}

.do-done .js-do-title {
  opacity: 0.6;
  text-decoration: line-through;
}

/* The AI pill: a dashed outline until the task is handed over, then a
   green pill with a pulsing dot and how long the AI has had it. */
.app-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 7);
  border: 1px dashed #46524A;
  border-radius: 999px;
  color: #A8AFA9;
  font-size: calc(var(--u) * 12);
  font-weight: 700;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.app-pill svg {
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 15);
}

.app-pill-dot,
.app-pill-time {
  display: none;
}

.ai-handed .js-ai-pill {
  border: 1px solid #3F7A55;
  background: rgba(40, 97, 64, 0.45);
  color: #8AD4A1;
  box-shadow: 0 0 calc(var(--u) * 12) rgba(138, 212, 161, 0.25);
}

.ai-handed .js-ai-pill .app-pill-dot {
  display: block;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.6s ease-in-out infinite;
}

.ai-handed .js-ai-pill .app-pill-time {
  display: inline;
}

.app-mt-hint {
  margin-top: calc(var(--u) * 8);
  color: #CFD3CF;
  font-size: calc(var(--u) * 13);
  text-align: left;
}

.ai-handed .app-mt-hint {
  display: none;
}

@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}

.app-do-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 8);
  margin: calc(var(--u) * 18) calc(var(--u) * 20) calc(var(--u) * 20);
}

.app-do-actions-four {
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 6);
}

.app-do-actions-four .app-button {
  padding: 0;
  font-size: calc(var(--u) * 14);
}

/* The goal, moving */
.app-goal-title {
  margin: calc(var(--u) * 8) calc(var(--u) * 16) 0;
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  border: calc(var(--u) * 1.5) solid var(--app-control);
  border-radius: calc(var(--u) * 16);
  background: var(--app-chip);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 27);
  line-height: 1.15;
}

.app-stat {
  display: flex;
  justify-content: space-between;
  margin: calc(var(--u) * 12) calc(var(--u) * 16) 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border: calc(var(--u) * 1.5) solid var(--app-line);
  border-radius: calc(var(--u) * 14);
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 14.5);
}

.app-stat-done {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  color: var(--app-ink);
  font-weight: 600;
}

.app-stat-done svg {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  color: var(--app-green);
}

.goal-count .js-count {
  animation: bump 0.45s ease;
}

@keyframes bump {
  40% {
    transform: scale(1.12);
  }
}

.app-term {
  display: grid;
  gap: calc(var(--u) * 10);
  margin: calc(var(--u) * 12) calc(var(--u) * 16) 0;
  padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 16);
  border: calc(var(--u) * 1.5) solid var(--app-line);
  border-radius: calc(var(--u) * 16);
}

.app-term .app-field {
  min-height: calc(var(--u) * 52);
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
}

.app-term .app-fill {
  background: var(--app-bg);
  opacity: 1;
}

.app-term-head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: calc(var(--u) * 13);
  letter-spacing: 0.02em;
}

.app-term-head > span:first-child {
  margin-right: auto;
}

.app-term-done {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  font-size: calc(var(--u) * 14);
}

.app-term-done-ring {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border: calc(var(--u) * 1.8) solid currentColor;
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.step-done .app-term-short .app-term-done-ring {
  border-color: var(--app-green);
  background: var(--app-green);
}

.step-done .app-term-short .app-fill {
  opacity: 0;
  transition: opacity 0.35s ease 0.25s;
}

.step-done .app-term-short .app-generate {
  animation: glow 1.2s ease-in-out 0.6s 2;
}

@keyframes glow {
  50% {
    opacity: 0.4;
  }
}

.app-achieved {
  display: grid;
  gap: calc(var(--u) * 8);
  margin: calc(var(--u) * 14) calc(var(--u) * 18) 0;
  opacity: 0;
  transform: translateY(calc(var(--u) * -10));
  transition: opacity 0.35s ease 0.45s, transform 0.35s ease 0.45s;
}

.step-done .app-achieved {
  opacity: 1;
  transform: none;
}

.app-achieved-title {
  font-size: calc(var(--u) * 15);
  font-weight: 700;
}

.app-achieved-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  color: var(--app-ink-2);
  font-size: calc(var(--u) * 14.5);
}

.app-achieved-row svg {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  color: var(--app-green);
}

/* The finger: a ripple wherever the demo taps. */
.app-tap {
  position: absolute;
  z-index: 8;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  margin: calc(var(--u) * -23) 0 0 calc(var(--u) * -23);
  border-radius: 50%;
  background: rgba(255, 137, 54, 0.4);
  box-shadow: 0 0 0 calc(var(--u) * 3) rgba(255, 137, 54, 0.85),
    0 0 calc(var(--u) * 18) rgba(255, 137, 54, 0.55);
  opacity: 0;
  pointer-events: none;
}

.app-tap.is-tapping {
  animation: tap 0.6s ease-out;
}

@keyframes tap {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }

  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

/* Jumping to a step shows its end state without replaying transitions. */
.no-motion,
.no-motion * {
  transition: none !important;
  animation: none !important;
}

/* The steps under the phone: one bar per step, filling while it plays. */
.demo-caption {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 12px;
  width: min(100%, 360px);
}

.demo-say {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 3.2em;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.35;
  text-wrap: balance;
}

.js-say.is-new {
  animation: say-in 0.35s ease-out;
}

@keyframes say-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.demo-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-step {
  display: block;
  width: 100%;
  min-height: 24px;
  padding: 10px 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.demo-step-bar {
  position: relative;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.demo-step-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

.demo-step[aria-current="step"] .demo-step-bar::after {
  transform: none;
}

.is-playing .demo-step.is-running .demo-step-bar::after {
  animation: fill var(--step-length, 4s) linear both;
}

@keyframes fill {
  from {
    transform: scaleX(0);
  }
}

.demo-step-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.demo-step:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.demo-toggle {
  min-height: 24px;
  padding: 4px 10px;
  border: 1.5px solid var(--control-border);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

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

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* Waitlist */

.waitlist {
  display: grid;
  gap: 10px;
  max-width: 34rem;
  margin-top: 32px;
}

.field-label {
  font-weight: 700;
}

.field-row {
  display: grid;
  gap: 10px;
}

.field-row input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--control-border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.field-row input[aria-invalid="true"] {
  border-color: var(--error);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.1s ease;
}

.button-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--primary-glow);
}

.button-primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--primary-glow-hover);
}

.button-primary:active {
  background: var(--primary-pressed);
  transform: translateY(1px);
}

.button[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.75;
}

.waitlist-status {
  min-height: 1.6em;
  font-weight: 600;
}

.waitlist-status[data-tone="error"] {
  color: var(--error);
}

.waitlist-status:focus {
  outline: none;
}

.waitlist-note {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.notify-fields {
  display: grid;
  gap: 10px;
}

/* The devices to hear about, as tickable tiles. */
.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}

.choices legend {
  margin-bottom: 8px;
  padding: 0;
}

.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice:hover {
  border-color: var(--control-border);
}

.choice:has(:checked) {
  border-color: var(--ink);
  background: var(--band);
}

.choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--anchor);
}

/* The whole tile shows keyboard focus instead of the small box. */
.choice input:focus-visible {
  outline: none;
}

.button-secondary {
  border: 1.5px solid var(--control-border);
  background: transparent;
  color: var(--ink);
}

.button-secondary:hover {
  border-color: var(--ink);
}

/* Home: getting the app. Each platform is a button until its store
   listing is live, then the store's own badge. */

.get {
  display: grid;
  gap: 12px;
  max-width: 34rem;
  margin-top: 32px;
}

.get-title {
  font-size: 1.125rem;
  line-height: 1.4;
}

.get-note {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.stores {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  height: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1.5px solid var(--control-border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(23, 26, 24, 0.06);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.1s ease;
}

.store:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-lifted);
}

.store:active {
  transform: translateY(1px);
}

.store-icon {
  grid-row: span 2;
  width: 24px;
  height: 24px;
}

.store-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Shown only in the "coming-soon" variant of the A/B test in
   experiment.js. */
.store-state {
  display: none;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

[data-variant="coming-soon"] .store-state {
  display: block;
}

/* A store the app is out in: it names the store in every variant. */
.store-state.is-live {
  display: block;
}

.is-yours .store-state {
  color: var(--on-primary);
}

/* The visitor's own device: the page's one orange action. */
.is-yours .store {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--primary-glow);
}

.is-yours .store:hover {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  box-shadow: var(--primary-glow-hover);
}

/* The home page's first screen, on a device LeapSteps is made for: one big
   button for the visitor's own store and the other stores as a line of
   links under it. waitlist.js adds has-yours; without it, the four buttons
   show as they do on every other page. */
.stores[data-focus].has-yours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
}

.stores[data-focus].has-yours > .is-yours {
  flex: 0 0 100%;
  margin-bottom: 8px;
}

.stores[data-focus].has-yours > .is-yours .store {
  max-width: 24rem;
  min-height: 64px;
  padding: 12px 18px;
}

.stores[data-focus].has-yours > li:nth-child(2)::before {
  content: "Also on";
  margin-right: 16px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.stores[data-focus].has-yours > li:not(.is-yours) .store {
  display: inline-block;
  height: auto;
  min-height: 0;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stores[data-focus].has-yours > li:not(.is-yours) .store:hover {
  box-shadow: none;
  text-decoration-thickness: 2px;
}

.stores[data-focus].has-yours > li:not(.is-yours) .store-icon,
.stores[data-focus].has-yours > li:not(.is-yours) .store-state {
  display: none;
}

.stores[data-focus].has-yours > li:not(.is-yours) .store-name {
  font-size: inherit;
  font-weight: 600;
}

/* The "email me" dialog */

html:has(.notify-dialog[open]) {
  overflow: hidden;
}

.notify-dialog {
  width: min(100% - 2 * var(--gutter), 30rem);
  max-height: calc(100% - 2 * var(--gutter));
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lifted);
}

.notify-dialog::backdrop {
  background: rgba(15, 18, 16, 0.6);
}

/* Fills the dialog, so a click outside it lands on the backdrop. */
.notify-body {
  position: relative;
  padding: 28px 24px 24px;
}

.notify-title {
  padding-right: 40px;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.notify-dialog .waitlist {
  margin-top: 20px;
}

.notify-done {
  justify-self: start;
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.dialog-close:hover {
  background: var(--band);
}

.dialog-close svg {
  width: 22px;
  height: 22px;
}

@media (prefers-reduced-motion: no-preference) {
  .notify-dialog[open] {
    animation: rise 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .notify-dialog[open]::backdrop {
    animation: fade 0.2s ease-out;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

/* Bots fill every field they find; people never see this one. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Home: sections */

.section {
  padding-block: 64px;
}

.section-band {
  background: var(--band);
}

.section h2 {
  max-width: 40rem;
  font-size: clamp(1.75rem, 2.2vw + 1rem, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.section-lead {
  max-width: 40rem;
  margin-top: 12px;
  color: var(--ink-secondary);
  font-size: 1.125rem;
}

.how {
  display: grid;
  margin-top: 40px;
  padding: 0;
  list-style: none;
  counter-reset: how;
}

.how-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  row-gap: 4px;
  padding-block: 24px;
  border-top: 1.5px solid var(--border);
  counter-increment: how;
}

.how-step:last-child {
  border-bottom: 1.5px solid var(--border);
}

.how-step::before {
  content: counter(how);
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--anchor);
  color: var(--on-anchor);
  font-family: var(--font-display);
  font-weight: 700;
}

.how-step h3 {
  align-self: center;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.how-step p {
  max-width: 40rem;
  color: var(--ink-secondary);
  font-size: 1.125rem;
}

.how-step > * {
  grid-column: 2;
}

.how-step p + p {
  margin-top: 8px;
}

/* Home: features, as lifted cards */

.features {
  display: grid;
  gap: 16px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.feature {
  padding: 24px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--band);
  color: var(--ink);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature h3 {
  margin-top: 16px;
}

.feature p {
  margin-top: 6px;
  color: var(--ink-secondary);
}

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--anchor);
  color: var(--on-anchor);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  vertical-align: 0.15em;
}

/* Home: trust */

.trust {
  display: grid;
  gap: 28px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.trust li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-content: start;
  column-gap: 14px;
  row-gap: 4px;
}

.trust svg {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  color: var(--ink);
}

.trust p {
  max-width: 34rem;
  color: var(--ink-secondary);
}

/* Home: the problem */

.pains {
  display: grid;
  gap: 16px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.pain {
  padding: 22px 24px;
  border-left: 4px solid var(--anchor);
  border-radius: 4px 16px 16px 4px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.pain h3 {
  font-size: 1.1875rem;
}

.pain p {
  margin-top: 8px;
  color: var(--ink-secondary);
}

.bridge {
  max-width: 40rem;
  margin-top: 36px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Home: the research behind the bridge, in one line */

.research-note {
  max-width: 44rem;
  margin-top: 20px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Home: the smaller features, as a short list under how it works */

.also {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1.5px solid var(--border);
}

.also-list {
  display: grid;
  gap: 18px 32px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.also-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 12px;
  align-items: start;
}

.also-list svg {
  width: 24px;
  height: 24px;
  margin-top: 1px;
}

.also-list p {
  color: var(--ink-secondary);
}

.also-list b {
  color: var(--ink);
}

@media (min-width: 640px) {
  .also-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Home: how it works, with real screens */

.showcase {
  display: grid;
  gap: 72px;
  margin-top: 48px;
}

.show {
  display: grid;
  gap: 32px;
  align-items: center;
}

.show-copy h3 {
  max-width: 30rem;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.show-copy > p:not(.kicker) {
  max-width: 34rem;
  margin-top: 14px;
  color: var(--ink-secondary);
  font-size: 1.125rem;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  font-weight: 700;
}

.kicker span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--anchor);
  color: var(--on-anchor);
  font-family: var(--font-display);
}

.ticks {
  display: grid;
  gap: 10px;
  max-width: 34rem;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 30px;
  font-weight: 600;
}

.ticks li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success);
}

.ticks li::after {
  content: "";
  position: absolute;
  top: calc(0.3em + 5px);
  left: 6px;
  width: 6px;
  height: 4px;
  border-bottom: 2px solid var(--on-success);
  border-left: 2px solid var(--on-success);
  transform: rotate(-45deg);
}

/* A real screenshot in a phone frame. */
.device {
  justify-self: center;
  width: min(72vw, 288px);
  margin: 0;
  padding: 8px;
  border-radius: 40px;
  background: #0E100F;
  box-shadow: inset 0 0 0 1.5px #3A403C, 0 2px 4px rgba(23, 26, 24, 0.12),
    0 18px 40px rgba(23, 26, 24, 0.16), 0 40px 80px rgba(23, 26, 24, 0.12);
}

.device img {
  display: block;
  width: 100%;
  height: auto;
}

.device img {
  border-radius: 32px;
  background: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .device {
    box-shadow: inset 0 0 0 1.5px #46524A, 0 18px 40px rgba(0, 0, 0, 0.45),
      0 40px 80px rgba(0, 0, 0, 0.35);
  }

  :root:not([data-theme="light"]) .device img {
    background: #121412;
  }
}

:root[data-theme="dark"] .device {
  box-shadow: inset 0 0 0 1.5px #46524A, 0 18px 40px rgba(0, 0, 0, 0.45),
    0 40px 80px rgba(0, 0, 0, 0.35);
}

:root[data-theme="dark"] .device img {
  background: #121412;
}

.device > figcaption {
  padding: 12px;
  color: var(--on-footer-secondary);
  font-size: 0.9375rem;
}

/* A screenshot of the Windows app: a window, not a phone. The capture
   already holds the app's own caption band. */
.device-window {
  justify-self: stretch;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  box-shadow: var(--shadow-lifted);
}

.device-window img {
  border-radius: 0;
}

.device-window figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .device-window {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] .device-window {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Home: what the desktop app adds. */
.desk {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.desk-item {
  padding: 18px 20px;
  border-left: 4px solid var(--primary);
  border-radius: 4px 14px 14px 4px;
  background: var(--surface);
}

.desk-item h3 {
  font-size: 1.125rem;
}

.desk-item p {
  margin-top: 6px;
  color: var(--ink-secondary);
}

.desk-more {
  margin-top: 28px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .desk {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* On wide screens the steps show the Windows app: the screenshot gets the
   wider column and becomes a window. */
@media (min-width: 1100px) {
  .show:has(.device-adaptive),
  .show:has(.device-window) {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: 48px;
  }

  .show:nth-child(even):has(.device-adaptive),
  .show:nth-child(even):has(.device-window) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  }

  .device-adaptive {
    justify-self: stretch;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
  }

  .device-adaptive img {
    border-radius: 0;
  }
}

/* Home: before and after */

.contrast {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.contrast-col {
  padding: 26px 24px;
  border-radius: 20px;
}

.contrast-col h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.contrast-col ul {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.contrast-col li {
  position: relative;
  padding-left: 32px;
}

.contrast-col li::before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.contrast-before {
  border: 1.5px solid var(--border);
  color: var(--ink-secondary);
}

.contrast-before li::before {
  background: linear-gradient(var(--ink-secondary) 0 0) center / 10px 2px
      no-repeat,
    var(--band);
  box-shadow: inset 0 0 0 1.5px var(--control-border);
}

.contrast-after {
  background: var(--anchor);
  color: var(--on-anchor);
  box-shadow: var(--shadow-lifted);
}

.contrast-after li {
  font-weight: 600;
}

.contrast-after li::before {
  background: var(--primary);
}

.contrast-after li::after {
  content: "";
  position: absolute;
  top: calc(0.25em + 6px);
  left: 6px;
  width: 7px;
  height: 4px;
  border-bottom: 2px solid #171A18;
  border-left: 2px solid #171A18;
  transform: rotate(-45deg);
}



/* Two plain sections in a row get a rule between them. */
.section:not(.section-band) + .section:not(.section-band) {
  border-top: 1.5px solid var(--border);
}

/* Home: links to the pages for each kind of goal */

.segments {
  display: grid;
  gap: 16px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.segment {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 22px 24px 24px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.segment:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-lifted);
}

.segment-kicker {
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.segment-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
}

.segment-title::after {
  content: " \2192";
}

.segment-text {
  color: var(--ink-secondary);
}

/* Home: the plans and guides, as a line under the goal cards */

.segments-more {
  max-width: 44rem;
  margin-top: 24px;
  color: var(--ink-secondary);
}

/* The guides library: a section split into smaller groups of cards */

.library-group {
  margin-top: 40px;
}

.library-group .segments {
  margin-top: 16px;
}

/* Segment pages: the closing link back to the full overview */

.cta-more {
  margin-top: 18px;
  font-weight: 600;
}


/* Research behind the app: one card per study, with links to the source. */

.studies {
  display: grid;
  gap: 16px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.study {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px 22px 22px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.study-who {
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.study h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.study > p:not(.study-who) {
  color: var(--ink-secondary);
}

.study-link {
  justify-self: start;
  margin-top: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.study-link::after {
  content: " \2192";
}

.studies-note {
  max-width: 44rem;
  margin-top: 24px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

/* Home: the app on Windows, a tablet and a phone. */

.lineup {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}

.lineup figure {
  margin: 0;
}

.lineup img {
  display: block;
  width: 100%;
  height: auto;
}

.lineup figcaption {
  margin-top: 10px;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

/* A Windows 11 window: the capture already holds the app's caption band. */
.lineup-window picture {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lifted);
}

.lineup-tablet picture,
.lineup-phone picture {
  display: block;
  padding: 10px;
  background: #0E100F;
  box-shadow: inset 0 0 0 1.5px #3A403C, var(--shadow-lifted);
}

.lineup-tablet picture {
  border-radius: 28px;
}

.lineup-tablet img {
  border-radius: 18px;
}

.lineup-phone {
  justify-self: center;
  width: min(60vw, 240px);
}

.lineup-phone picture {
  padding: 7px;
  border-radius: 34px;
}

.lineup-phone img {
  border-radius: 27px;
}

@media (min-width: 640px) {
  .studies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An odd last card spans both columns instead of sitting alone. */
  .studies > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .lineup {
    grid-template-columns: minmax(0, 1fr) 200px;
    align-items: end;
  }

  .lineup-window {
    grid-column: 1 / -1;
  }

  .lineup-phone {
    width: 100%;
  }
}

@media (min-width: 960px) {
  .studies {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .studies > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  /* The tablet and phone overlap the window's lower edge. */
  .lineup {
    position: relative;
    display: block;
    padding-bottom: 120px;
  }

  .lineup-window {
    width: 82%;
  }

  .lineup-tablet {
    position: absolute;
    right: 9%;
    bottom: 0;
    width: 42%;
  }

  .lineup-phone {
    position: absolute;
    right: 0;
    bottom: 24px;
    width: 15%;
  }

  .lineup-window figcaption {
    text-align: left;
  }
}

/* The /no-count page: whether this browser is counted, and the button that
   changes it. */
.count-status {
  font-weight: 700;
}

.count-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Header navigation: the links sit in a row on wide screens and move into
   a Menu disclosure on narrower ones. Both work without JavaScript, and
   only one of the two lists is shown, so only one is read out. On the
   narrowest phones "Get the app" moves into the menu too. */

.site-header .wordmark {
  margin-right: auto;
}

.site-nav {
  display: none;
}

.nav-links {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink-secondary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.header-cta {
  display: none;
  min-height: 44px;
  padding: 8px 18px;
  text-decoration: none;
}

.nav-menu {
  position: relative;
}

.nav-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--control-border);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

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

.nav-menu summary:hover,
.nav-menu[open] summary {
  border-color: var(--ink);
}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.nav-menu-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.nav-menu-panel a:hover,
.nav-menu-panel a[aria-current="page"] {
  background: var(--band);
}

/* The light and dark switch: an icon button in the header from 640 px, a
   row in the Menu below that, where the header has no room for it. Both
   need theme.js, so they stay hidden until it marks the page `theme-js`.
   The moon shows while the page is light, the sun while it's dark. */

.theme-toggle,
.nav-menu-theme {
  display: none;
}

.theme-toggle {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* No outline at rest, so the icon sits in the nav like a link; a soft
   circle on hover shows it's a button. */
.theme-toggle:hover {
  background: var(--band);
}

.theme-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.theme-toggle-row:hover {
  background: var(--band);
}

[data-theme-toggle] svg {
  flex: none;
}

[data-theme-toggle] .icon-sun,
[data-theme-toggle][aria-pressed="true"] .icon-moon {
  display: none;
}

[data-theme-toggle][aria-pressed="true"] .icon-sun {
  display: block;
}

.theme-js .nav-menu-theme {
  display: list-item;
}

@media (min-width: 640px) {
  .theme-js .theme-toggle {
    display: inline-flex;
  }

  .theme-js .nav-menu-theme {
    display: none;
  }
}

@media (min-width: 480px) {
  .header-cta {
    display: inline-flex;
  }

  .nav-menu-get {
    display: none;
  }
}

@media (min-width: 1100px) {
  .site-nav {
    display: block;
  }

  .nav-menu {
    display: none;
  }

  /* The switch's 44 px button leaves 12 px of empty space around its
     20 px icon. Pulling it in puts the icon 28 px from the last link, the
     same as the links' own spacing and the gap to "Get the app". */
  .theme-toggle {
    margin-left: -12px;
  }
}

/* Home: questions */

.faq-list {
  max-width: 48rem;
  margin-top: 32px;
  border-bottom: 1.5px solid var(--border);
}

.faq-item {
  border-top: 1.5px solid var(--border);
}

.faq-item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding-block: 18px;
  border-radius: 8px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

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

.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  max-width: 40rem;
  padding-bottom: 20px;
  color: var(--ink-secondary);
}

/* Home: the last call to action */

.cta {
  text-align: center;
}

.cta h2,
.cta .section-lead {
  margin-inline: auto;
}

.cta .button {
  margin-top: 28px;
  text-decoration: none;
}

.plans {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}

.plan {
  padding-top: 20px;
  border-top: 1.5px solid var(--border);
}

.plan-pro {
  /* The thicker rule keeps the heading on Free's baseline. */
  padding-top: 17.5px;
  border-top: 4px solid var(--anchor);
}

.plan h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.plan-summary {
  margin-top: 6px;
  color: var(--ink-secondary);
}

.plan-price {
  margin-top: 4px;
  font-weight: 700;
}

.plan ul {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.plan li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
}

.plan li svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--ink-secondary);
}

/* Prose pages: privacy, terms, support, joined, 404 */

.page-main {
  padding-block: 32px 72px;
}

.prose {
  max-width: 44rem;
}

.prose h1 {
  font-size: clamp(2.125rem, 2.6vw + 1.2rem, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.prose .updated {
  margin-top: 12px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.prose h2 {
  scroll-margin-top: 24px;
  margin-top: 44px;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.prose h3 {
  margin-top: 28px;
  font-size: 1.125rem;
}

.prose p,
.prose ul,
.prose ol,
.prose table {
  margin-top: 14px;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose li + li {
  margin-top: 6px;
}

.prose .lead {
  margin-top: 16px;
  color: var(--ink-secondary);
  font-size: 1.1875rem;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.prose th,
.prose td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose th {
  font-weight: 700;
}

.table-scroll {
  overflow-x: auto;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375em;
  overflow-wrap: anywhere;
}

.prose pre {
  margin-top: 14px;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--band);
  font-size: 0.875rem;
  line-height: 1.5;
}

.prose pre code {
  overflow-wrap: normal;
}

.contents {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
}

.contents h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
}

.contents ol {
  margin-top: 8px;
}

.faq {
  margin-top: 8px;
}

.faq h2 {
  margin-top: 36px;
  font-size: 1.25rem;
}

/* Press kit: the fact sheet, descriptions, logo files and screenshots. */

.press-contact {
  margin-top: 14px;
  font-weight: 700;
}

.press-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.press-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 16px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.press-nav a:hover {
  border-color: var(--ink);
}

.press-section {
  margin-top: 64px;
}

.press-section h2 {
  scroll-margin-top: 24px;
  font-size: clamp(1.625rem, 1.2vw + 1.2rem, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.press-section-lead {
  max-width: 44rem;
  margin-top: 10px;
  color: var(--ink-secondary);
}

.fact-sheet {
  width: 100%;
  max-width: 48rem;
  margin-top: 20px;
  border-collapse: collapse;
}

.fact-sheet th,
.fact-sheet td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.fact-sheet tr:first-child > * {
  border-top: 1px solid var(--border);
}

.fact-sheet th {
  width: 34%;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* The Store link is one long word. */
.fact-sheet td {
  overflow-wrap: anywhere;
}

.blurbs {
  display: grid;
  gap: 20px;
  max-width: 48rem;
  margin-top: 24px;
}

.blurb {
  padding: 22px 24px 24px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.blurb h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 1.125rem;
}

.blurb-count {
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 600;
}

.blurb-text p {
  margin-top: 12px;
}

.kit {
  display: grid;
  gap: 20px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.kit-item {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

/* Each logo sits on the background it is drawn for, in either theme. */
.kit-preview {
  display: grid;
  place-items: center;
  min-height: 176px;
  padding: 32px 28px;
  border-bottom: 1px solid var(--border);
}

.kit-preview img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

.kit-preview-icon {
  background: var(--band);
}

.kit-preview-icon img {
  width: 112px;
  border-radius: 24px;
  box-shadow: var(--shadow-lifted);
}

.kit-preview-light {
  background: #F0F2EF;
}

.kit-preview-dark {
  background: #171A18;
}

.kit-body {
  padding: 18px 20px 20px;
}

.kit-body h3 {
  font-size: 1.0625rem;
}

.kit-body p {
  margin-top: 4px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-weight: 700;
}

.download svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.shots {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}

.shots figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}

.shots figcaption > span {
  flex: 1 1 14rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kit-preview-light,
  :root:not([data-theme="light"]) .kit-preview-dark {
    border-bottom-color: transparent;
  }
}

:root[data-theme="dark"] .kit-preview-light,
:root[data-theme="dark"] .kit-preview-dark {
  border-bottom-color: transparent;
}

@media (min-width: 640px) {
  .kit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kit-item:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .press-section {
    margin-top: 88px;
  }

  .kit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kit-item:first-child {
    grid-column: auto;
  }

  .shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
}

/* A breadcrumb trail above a prose page's heading, as on What's new: the
   trail stays one row, not a spaced-out list. */

.prose .crumbs li + li {
  margin-top: 0;
}

.prose .crumbs + h1 {
  margin-top: 20px;
}

/* A fact still to be filled in before launch. A soft tint keeps it
   visible without overpowering the surrounding text. */
mark {
  padding: 0 0.2em;
  border-radius: 4px;
  background: #FFF4D1;
  color: #171A18;
  text-decoration: underline dashed var(--link);
  text-underline-offset: 0.15em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) mark {
    background: rgba(255, 196, 0, 0.14);
    color: var(--ink);
  }
}

:root[data-theme="dark"] mark {
  background: rgba(255, 196, 0, 0.14);
  color: var(--ink);
}

/* Goal plans (/goals/...) and goal guides (/guides/...): one goal or one
   method per page, built from the home page's sections and cards. */

.crumbs {
  padding-top: 4px;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  padding: 0;
  list-style: none;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  font-weight: 600;
}

.crumbs li + li::before {
  content: "/";
  margin-inline: 10px;
  color: var(--ink-secondary);
}

.guide-head {
  padding-block: 20px 8px;
}

.guide-head .eyebrow {
  margin-top: 28px;
  margin-bottom: 10px;
}

.guide-head h1 {
  max-width: 50rem;
  font-size: clamp(2.25rem, 3.4vw + 1rem, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.guide-lead {
  max-width: 42rem;
  margin-top: 20px;
  color: var(--ink-secondary);
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
  line-height: 1.55;
}

.guide-meta {
  margin-top: 16px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

/* On this page: a row of jump links. */
.guide-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.guide-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.guide-toc a:hover {
  border-color: var(--ink);
}

.guide section[id] {
  scroll-margin-top: 16px;
}

.guide-text {
  max-width: 42rem;
  margin-top: 20px;
}

.guide-text p + p {
  margin-top: 14px;
}

.guide-text * + h3 {
  margin-top: 28px;
}

.guide-text h3 + p {
  margin-top: 6px;
}

/* The goal as the app's three tiers, with today's task under them. */
.plan-layout {
  display: grid;
  gap: 32px;
  align-items: start;
  margin-top: 36px;
}

.ladder {
  max-width: 36rem;
  padding: 24px 24px 22px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.ladder-title {
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.rungs {
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.rung {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 0 0 22px 34px;
}

/* Each tier's dot, with a line down to the next one. */
.rung::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 2px;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
}

.rung::after {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 2px;
  left: 10px;
  width: 2px;
  border-radius: 1px;
  background: var(--border);
}

.rung:last-child {
  padding-bottom: 0;
}

.rung:last-child::after {
  display: none;
}

/* The short-term step: the one to start on now. */
.rung-now::before {
  background: var(--ink);
}

.rung-label {
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.rung-text {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ladder-today {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1.5px dashed var(--border);
}

.ladder-today::before {
  content: "";
  grid-row: span 2;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid var(--control-border);
  border-radius: 50%;
}

.ladder-today-label {
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.ladder-today-text {
  font-weight: 700;
}

.ladder-note {
  max-width: 36rem;
  margin-top: 18px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

/* Where the app's own draft for this goal goes: a real screenshot, never
   text made to look like AI output. */
.shot-slot {
  display: grid;
  place-items: center;
  min-height: 320px;
  margin: 0;
  padding: 24px;
  border: 2px dashed var(--control-border);
  border-radius: 16px;
  color: var(--ink-secondary);
  text-align: center;
}

.shot-slot p {
  max-width: 22rem;
}

/* The first week: short tasks, each with the time it takes. */
.week {
  display: grid;
  gap: 12px;
  max-width: 46rem;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.week li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.week li::before {
  content: "";
  grid-row: span 2;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 2px solid var(--control-border);
  border-radius: 50%;
}

.week-task {
  font-weight: 700;
  line-height: 1.45;
}

.week-why {
  grid-column: 2 / -1;
  color: var(--ink-secondary);
}

.mins {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--band);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Rules and figures, each with its source. */
.facts {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.fact {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px 24px 24px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.fact h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.fact ul {
  display: grid;
  gap: 8px;
  padding-left: 1.2em;
  color: var(--ink-secondary);
}

.fact-source {
  justify-self: start;
  font-size: 0.9375rem;
  font-weight: 600;
}

.fact-source::after {
  content: " \2192";
}

.checked {
  max-width: 44rem;
  margin-top: 24px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

/* Time frames: what long, mid and short-term mean in LeapSteps. */
.tiers {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.tier {
  padding: 22px 24px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.tier-when {
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 700;
}

.tier h3 {
  margin-top: 6px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.tier p:not(.tier-when) {
  margin-top: 8px;
  color: var(--ink-secondary);
}

/* Short-term goals examples: one ladder per story, then a longer list. */
.ladders {
  display: grid;
  gap: 16px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.ladders .ladder {
  max-width: none;
  height: 100%;
}

.examples {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}

.example-group h3 {
  font-size: 1.125rem;
}

.example-group ul,
.example-group ol {
  margin-top: 10px;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--border);
}

.example-group li {
  display: grid;
  gap: 2px;
  padding-block: 12px;
  border-bottom: 1.5px solid var(--border);
}

/* A numbered run of ideas, as on the New Year page: the number comes before
   the idea and the first step sits under it. The list's start attribute keeps
   the count going from one group to the next. */
.example-group ol {
  list-style: decimal inside;
}

.example-group ol > li {
  display: list-item;
}

.example-group ol > li::marker {
  color: var(--ink-secondary);
  font-weight: 700;
}

.example-group ol .example-for {
  display: block;
  margin-top: 2px;
}

.example-lead {
  margin-top: 6px;
  color: var(--ink-secondary);
}

.example-goal {
  font-weight: 700;
}

.example-for {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.guide-get .get {
  margin-top: 28px;
}

/* Under the plan: the way down to the store buttons. */
.plan-link {
  margin-top: 28px;
}

.plan-link {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.plan-link .button {
  color: var(--ink);
  text-decoration: none;
  white-space: normal;
}

/* The page's main call to action, beside the way down: the store button of
   the platform that's out. */
.plan-link .button-primary {
  color: var(--on-primary);
}

/* The quick answer under the heading: the summary that answers the search
   on its own, labelled so a reader skimming for it finds it. */
.quick-answer {
  max-width: 44rem;
  margin-top: 20px;
  padding: 16px 22px 20px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.quick-answer-label {
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 700;
}

.quick-answer .guide-lead {
  margin-top: 6px;
  color: var(--ink);
}

/* A grade from A to D in a graded comparison of approaches. */
.grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 8px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
}

.firsthand {
  max-width: 42rem;
  margin-top: 20px;
}

/* Options: the real choices for one goal on the same criteria. A card per
   option on narrow screens, each cell under its column's name; a table from
   720px. The roles keep the table's meaning where display changes it. */
.options {
  display: grid;
  gap: 16px;
  width: 100%;
  margin-top: 32px;
  border-collapse: collapse;
}

.options thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.options tbody {
  display: grid;
  gap: 16px;
}

.options tr {
  display: grid;
  gap: 12px;
  padding: 22px 24px 24px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.options th,
.options td {
  display: block;
  text-align: left;
  vertical-align: top;
}

.options tbody th {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.options td {
  color: var(--ink-secondary);
}

.options td::before {
  content: attr(data-label);
  content: attr(data-label) / "";
  display: block;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
}

.options-note {
  max-width: 44rem;
  margin-top: 24px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

/* How we build these plans: a short note under the questions. */
.method {
  max-width: 48rem;
  margin-top: 48px;
  padding: 22px 24px 24px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.method h2 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.method p {
  margin-top: 8px;
  color: var(--ink-secondary);
}

@media (min-width: 640px) {
  .facts,
  .ladders,
  .tiers,
  .pains.pains-pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ladders > :last-child:nth-child(odd),
  .tiers > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .examples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 48px;
  }
}

@media (min-width: 720px) {
  .options {
    display: table;
  }

  .options thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .options tbody {
    display: table-row-group;
  }

  .options tr {
    display: table-row;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .options th,
  .options td {
    display: table-cell;
    padding: 14px 20px 14px 0;
    border-bottom: 1px solid var(--border);
  }

  .options thead th {
    border-top: 1px solid var(--border);
    color: var(--ink-secondary);
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .options tbody th {
    width: 22%;
    font-size: 1.0625rem;
  }

  /* Two columns, as in the New Year page's Top 10: an even split. */
  .options-pair tbody th {
    width: 50%;
  }

  .options td::before {
    content: none;
  }
}

@media (min-width: 960px) {
  .guide-head {
    padding-block: 32px 16px;
  }

  .plan-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
  }

  .shot-slot {
    min-height: 420px;
  }

  .ladders,
  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ladders > :last-child:nth-child(odd),
  .tiers > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Free tools (/tools/...): one job per page, done in the browser. The
   goal setting worksheet is a form and the sheet it fills, which is all
   that prints (see the print styles at the end). */

/* The form needs the worksheet's script, which adds .has-js before first
   paint; without it the page is a blank sheet to print. */
html:not(.has-js) .needs-js {
  display: none;
}

.has-js .tool-nojs {
  display: none;
}

.tool-layout {
  display: grid;
  gap: 40px;
  align-items: start;
  margin-top: 36px;
}

.tool-form {
  display: grid;
  gap: 24px;
  max-width: 34rem;
}

.tool-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tool-field label,
.tool-field legend {
  padding: 0;
  font-weight: 700;
}

.tool-hint {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tool-field input {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1.5px solid var(--control-border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.tool-field input[aria-invalid="true"] {
  border-color: var(--error);
}

.tool-error {
  color: var(--error);
  font-weight: 600;
}

.tool-tasks ol {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 0;
  list-style: none;
}

.tool-tasks li {
  display: grid;
  grid-template-columns: 3.25em minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.tool-tasks label {
  color: var(--ink-secondary);
  font-weight: 600;
}

.tool-tasks input {
  margin-top: 0;
}

.tool-actions {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.tool-actions .button {
  white-space: normal;
}

.tool-status {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.tool-nojs {
  max-width: 40rem;
  margin-bottom: 20px;
  font-weight: 600;
}

/* The sheet: a page on the desk on screen, the whole page in print. */
.sheet {
  padding: 28px 22px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}

.sheet-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.sheet-started,
.sheet-by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.sheet-by {
  margin-top: 10px;
}

/* A date: what was typed, or a line to write it on. */
.sheet-blank {
  min-width: 10em;
  min-height: 1.6em;
  border-bottom: 1px solid var(--control-border);
  color: var(--ink);
  font-weight: 700;
}

.sheet-tiers {
  display: grid;
  gap: 22px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.sheet-label,
.sheet-subtitle {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
}

.sheet-when {
  margin-left: 6px;
  color: var(--ink-secondary);
  font-weight: 600;
}

/* Two lines to write on, which typed text sits on. */
.sheet-line {
  position: relative;
  min-height: 3.6em;
  border-bottom: 1px solid var(--control-border);
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.8em;
  overflow-wrap: anywhere;
}

.sheet-line::before {
  content: "";
  position: absolute;
  top: 1.8em;
  right: 0;
  left: 0;
  border-top: 1px solid var(--border);
}

.sheet-subtitle {
  margin-top: 26px;
}

.sheet-week {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  table-layout: fixed;
}

.sheet-week th {
  padding: 0 8px 6px 0;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: left;
}

.sheet-week th:first-child {
  width: 3.25rem;
}

.goal-template-sheet .sheet-week th:first-child {
  width: 34%;
}

.sheet-week th:last-child {
  width: 30%;
}

.sheet-week td {
  height: 3.25rem;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--control-border);
  vertical-align: bottom;
  overflow-wrap: anywhere;
}

.sheet-box {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 4px;
}

.sheet-review {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: end;
  column-gap: 12px;
  margin: 6px 0 0;
}

.sheet-review dt {
  padding-bottom: 4px;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.sheet-review dd {
  min-height: 2.75rem;
  margin: 0;
  border-bottom: 1px solid var(--control-border);
  overflow-wrap: anywhere;
}

.sheet-foot {
  margin-top: 22px;
  color: var(--ink-secondary);
  font-size: 0.8125rem;
}

/* Under the sheet: the one small way into the app. */
.tool-after {
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* The vision board template: six tiles in the form, six on the board. */
.board-hints {
  display: grid;
  gap: 8px;
}

.board-fields {
  gap: 14px;
  padding: 16px 18px 18px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
}

.board-fields legend {
  padding: 0 6px;
  font-family: var(--font-display);
}

.board-field {
  display: grid;
  gap: 2px;
}

.tool-field .board-field label {
  font-weight: 600;
}

/* The picture field: our own "Add a picture" button, so every visitor sees
   the same words, whatever language their browser draws its file control
   in. The real file input stays in the page, hidden only from sight, so it
   keeps its place in the Tab order and its name for screen readers; its
   label is the button. */
.board-picker {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 4px;
}

.tool-field .board-file {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tool-field .board-field .board-choose {
  min-height: 44px;
  padding: 8px 18px;
  font-weight: 700;
}

.board-file:focus-visible + .board-choose {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.board-file-name {
  flex: 1 1 8em;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-picker .tool-error {
  flex-basis: 100%;
}

.board-remove {
  justify-self: start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.board {
  padding: 24px 18px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}

.board-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.board-made {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.board-tiles {
  display: grid;
  gap: 20px 16px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.board-tile {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

/* A 2:1 frame: the visitor's picture, or a dashed space to glue one in.
   The canvas is drawn at the same 2:1, so nothing is stretched. */
.board-picture {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1.5px dashed var(--control-border);
  border-radius: 10px;
  background: var(--band);
}

.board-picture.has-picture {
  border-style: solid;
  border-color: transparent;
}

.board-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.board-placeholder {
  padding: 8px;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  text-align: center;
}

.board-area {
  margin-top: 4px;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.board-wish {
  min-height: 2.7em;
  border-bottom: 1px solid var(--control-border);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.board-step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: var(--ink-secondary);
  font-size: 0.875rem;
}

.board-blank {
  flex: 1;
  min-width: 6em;
  min-height: 1.5em;
  border-bottom: 1px solid var(--control-border);
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.board-foot {
  margin-top: 22px;
  color: var(--ink-secondary);
  font-size: 0.8125rem;
}

/* The to-do list template: the worksheet's sheet, with a third column on
   each task row for the goal it moves. */
.todo-tasks li {
  grid-template-columns: 3.75em minmax(0, 1fr) 6.75rem;
}

.tool-field select {
  width: 100%;
  min-height: 52px;
  padding: 12px 10px;
  border: 1.5px solid var(--control-border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.todo-week th:last-child {
  width: 4.5rem;
}

.todo-week td:last-child {
  font-weight: 700;
  text-align: center;
}

/* The weekly planner: the to-do list's sheet, then a box for each day with
   three task rows, and one for notes. Never more than two boxes in a row,
   so each day's tasks keep room to be read. */
.week-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(13rem, 40%), 1fr));
  gap: 14px;
  margin-top: 26px;
}

.week-day {
  min-width: 0;
  padding: 12px 14px 4px;
  border: 1.5px solid var(--control-border);
  border-radius: 12px;
}

.week-day-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
}

.week-tasks {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.week-tasks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 1.25rem;
  column-gap: 10px;
  align-items: end;
  min-height: 2.75rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--control-border);
  font-size: 0.9375rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.week-tasks [data-fill^="goal-for-"] {
  font-weight: 700;
  text-align: center;
}

/* The daily planner: the weekly planner's task rows, with the goals
   across the top and the day in two columns below, the hourly schedule
   beside the top three, a short to-do list and notes. daily-planner.js
   shows the hour rows from the day's start up to its end. */
.day-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.day-range > div {
  display: grid;
  gap: 6px;
}

.tool-field select[aria-invalid="true"] {
  border-color: var(--error);
}

.day-schedule-fields li {
  grid-template-columns: 5em minmax(0, 1fr);
}

.day-todo-fields li {
  grid-template-columns: 3.75em minmax(0, 1fr);
}

.day-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 28px;
}

.day-columns > div {
  min-width: 0;
}

.day-hours {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.day-hours li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: 10px;
  align-items: end;
  min-height: 2.75rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--control-border);
  font-size: 0.9375rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.day-hour {
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.day-todos li {
  grid-template-columns: 20px minmax(0, 1fr);
}

/* The habit tracker: the worksheet's sheet, with habits down the side and
   the month's days across. On narrow screens the grid scrolls sideways
   inside the sheet rather than squeezing 31 days into a phone's width. */
.tool-month-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: 12px;
  margin-top: 4px;
}

.tool-month-fields > div {
  display: grid;
  gap: 6px;
}

/* Lets the result column shrink below the grid's width, so the grid
   scrolls inside the sheet instead of widening the page. */
.tool-result {
  min-width: 0;
}

.habit-scroll {
  margin-top: 6px;
  overflow-x: auto;
}

/* 31 days need the full content width, so on a desktop the tracker sits
   below the form rather than beside it. Narrower screens scroll the grid. */
.tool-layout.tool-layout-stacked {
  grid-template-columns: minmax(0, 1fr);
}

.habit-grid {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.875rem;
}

.habit-grid th,
.habit-grid td {
  border: 1px solid var(--control-border);
  text-align: center;
}

.habit-grid thead th {
  padding: 4px 0;
  color: var(--ink-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.habit-grid thead th:first-child {
  width: 9rem;
  padding-left: 6px;
  text-align: left;
}

.habit-grid thead th:nth-child(2) {
  width: 2.75rem;
}

.habit-date,
.habit-weekday {
  display: block;
}

.habit-weekday {
  min-height: 1.2em;
  font-weight: 600;
}

.habit-grid tbody th {
  height: 2.5rem;
  padding: 4px 6px;
  font-weight: 600;
  text-align: left;
  overflow-wrap: anywhere;
}

.habit-grid tbody td:nth-child(2) {
  font-weight: 700;
}

/* Days the month doesn't have: day d is column d + 2. The whole column
   goes, so the other days widen to fill the row. */
.habit-grid.days-30 :is(th, td):nth-child(33),
.habit-grid.days-29 :is(th, td):nth-child(n+32),
.habit-grid.days-28 :is(th, td):nth-child(n+31) {
  display: none;
}

/* The Pomodoro timer: a disc that shrinks as the block runs, the time left
   in large numbers, and the settings beside it. The timer comes first, so
   on a phone Start is the first thing under the heading. */
.timer {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 22px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
  text-align: center;
}

/* The face starts and pauses the timer on a click, so it shows a pointer
   and a darker rim on hover. */
.timer-dial {
  width: min(100%, 17rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.timer-disc {
  display: block;
  width: 100%;
  height: auto;
}

.timer-face {
  fill: var(--surface);
  stroke: var(--control-border);
  stroke-width: 1;
  transition: stroke 0.15s ease;
}

.timer-dial:hover .timer-face {
  stroke: var(--ink);
}

/* The slice of the disc still to go, redrawn by focus-timer.js. */
.timer-wedge {
  fill: var(--primary);
}

/* A minute scale on a ring around the disc, as on a kitchen timer: 60
   marks, longer every five. They stay outside the slice, and there's no
   centre dot, so the face doesn't read as a clock missing its hands. */
.timer-marks {
  stroke: var(--control-border);
  stroke-width: 0.6;
  stroke-linecap: round;
}

.timer-marks-five {
  stroke-width: 1.2;
}

/* A break is green, as in the app's Do timer. */
.timer[data-phase="break"] .timer-wedge {
  fill: var(--break);
}

.timer-phase {
  margin-top: 8px;
  color: var(--ink-secondary);
  font-weight: 700;
}

.timer-clock {
  font-family: var(--font-display);
  font-size: clamp(3rem, 14vw, 4.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.timer-task {
  max-width: 24rem;
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.timer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.timer-actions .button {
  min-width: 8.5rem;
}

.timer-blocks {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
}

.timer .tool-status {
  min-height: 1.5em;
}

.timer-lengths {
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  margin: 4px 0 0;
}

/* The tiles keep the waitlist's look: the form's full-width text-field
   rules would otherwise stretch the radio buttons and bold the labels. */
.tool-field .choice {
  font-weight: 600;
}

.tool-field .choice input,
.timer-chime input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.timer-chime {
  justify-self: start;
}

/* The custom length: a short number field under the length tiles, shown
   once Custom is picked. */
.timer-custom {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.timer-custom[hidden] {
  display: none;
}

.timer-custom input {
  max-width: 8rem;
}

.timer-custom .tool-hint[data-tone="error"] {
  color: var(--error);
  font-weight: 600;
}

/* The SMART goal template: a letter beside each question, the sentence
   above the buttons, and on the sheet the sentence, the five letters and
   two steps. */
.smart-field label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smart-letter {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--anchor);
  color: var(--on-anchor);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.smart-preview {
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.smart-preview-label {
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.smart-preview-text {
  margin-top: 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.smart-preview-text.is-empty {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  font-weight: 400;
}

.tool-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The sentence on the sheet, or three lines to write it on. */
.smart-goal {
  margin-top: 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--control-border);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.8em;
  overflow-wrap: anywhere;
}

.smart-goal:empty {
  position: relative;
  height: 5.4em;
  padding-bottom: 0;
}

.smart-goal:empty::before,
.smart-goal:empty::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  border-top: 1px solid var(--border);
}

.smart-goal:empty::before {
  top: 1.8em;
}

.smart-goal:empty::after {
  top: 3.6em;
}

.smart-letters {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
}

.smart-letters div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: end;
  column-gap: 10px;
}

.smart-letters dt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.smart-letters dt .smart-letter {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8125rem;
}

.smart-letters dd {
  display: flex;
  align-items: flex-end;
  min-height: 2.75rem;
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--control-border);
  overflow-wrap: anywhere;
}

.smart-steps th:nth-child(2) {
  width: 6.5rem;
}

.smart-steps th:last-child {
  width: auto;
}

.smart-steps tbody th {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--control-border);
  vertical-align: bottom;
}

/* The filled-in examples below the template, on the SMART goal template
   and the goal tracker. */
.smart-examples,
.tracker-examples {
  display: grid;
  gap: 24px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.smart-example,
.tracker-example {
  padding: 24px 22px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lifted);
}

.smart-example h3,
.tracker-example h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.smart-example-goal,
.tracker-example-result {
  margin-top: 12px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--border);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.55;
}

.smart-example-answers,
.tracker-example-answers {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 12px;
  margin: 16px 0 0;
  font-size: 0.9375rem;
}

.smart-example-answers dt,
.tracker-example-answers dt {
  font-weight: 700;
}

.smart-example-answers dd,
.tracker-example-answers dd {
  margin: 0;
  color: var(--ink-secondary);
}

.tracker-example-note {
  margin-top: 16px;
  font-size: 0.9375rem;
}

@media (min-width: 960px) {
  .smart-examples,
  .tracker-examples {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The goal tracker: in the form, a group per goal with its numbers, a box
   for each of 12 weeks and a bar for the progress so far; on the sheet, a
   block per goal with the 12 weeks in a row, or two rows of six on a
   phone. */
.tracker-goal-fields {
  gap: 18px;
}

.tracker-goal-fields > legend {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.tracker-numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tracker-week-fields ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 8px;
  margin-top: 4px;
  padding: 0;
  list-style: none;
}

.tracker-week-fields li {
  display: grid;
  align-content: start;
  min-width: 0;
}

.tracker-week-fields label {
  display: grid;
  font-size: 0.875rem;
  line-height: 1.3;
}

.tracker-week-fields .tracker-week-end {
  min-height: 1.3em;
  color: var(--ink-secondary);
  font-weight: 400;
}

.tracker-week-fields input {
  min-height: 44px;
  padding: 8px 6px;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Spin buttons would leave a box too narrow for six digits. */
.tracker-week-fields input::-webkit-inner-spin-button,
.tracker-week-fields input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.tracker-progress {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.tracker-bar {
  height: 10px;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

/* Progress takes the app's green (mint in dark mode, as the timer's
   break does); goal-tracker.js sets the width. */
.tracker-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--break);
  transition: width 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .tracker-bar-fill {
    transition: none;
  }
}

.tracker-percent {
  font-weight: 700;
  line-height: 1.45;
}

.tracker-pace {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tracker-howto {
  margin-top: 12px;
  color: var(--ink-secondary);
  font-size: 0.875rem;
}

.tracker-goal {
  margin-top: 24px;
}

.tracker-goal-title {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.tracker-letter {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--anchor);
  color: var(--on-anchor);
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1;
}

/* What was typed, or a line to write it on. */
.tracker-goal-text {
  flex: 1;
  min-width: 0;
  min-height: 1.75rem;
  border-bottom: 1px solid var(--control-border);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Each fact's label sits above its line, so the line gets the column's
   whole width. */
.tracker-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 10px 0 0;
}

.tracker-facts div {
  display: grid;
  align-content: end;
  min-width: 0;
}

.tracker-facts dt {
  color: var(--ink-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.tracker-facts dd {
  min-height: 1.75rem;
  margin: 0;
  border-bottom: 1px solid var(--control-border);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

/* The weeks share their borders: each box overlaps the one before it by
   a border's width. */
.tracker-weeks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 12px 1px 1px 0;
  padding: 0;
  list-style: none;
}

.tracker-weeks li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  margin: 0 -1px -1px 0;
  border: 1px solid var(--control-border);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
}

.tracker-week-name {
  padding-top: 4px;
  color: var(--ink-secondary);
  font-weight: 700;
}

.tracker-weeks .tracker-week-end {
  min-height: 1.3em;
  color: var(--ink-secondary);
}

.tracker-week-box {
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  margin-top: 4px;
  border-top: 1px solid var(--control-border);
  font-size: 0.9375rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tracker-step {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: end;
  column-gap: 10px;
  margin-top: 12px;
}

.tracker-step-label {
  padding-bottom: 2px;
  color: var(--ink-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
}

.tracker-step-text {
  min-height: 1.75rem;
  border-bottom: 1px solid var(--control-border);
  overflow-wrap: anywhere;
}

/* The monthly planner: the weekly planner's sheet, with a goals table that
   gives each goal its milestone for the month, a calendar of the month and
   the weekly planner's boxes for the to-do list and notes. On narrow
   screens the calendar scrolls sideways inside the sheet rather than
   squeezing seven days into a phone's width. */
.month-dates li {
  grid-template-columns: 4.5em minmax(0, 1fr);
}

.sheet-month {
  font-family: var(--font-display);
  font-size: 1.125rem;
}

.month-goals th:first-child {
  width: 1.5rem;
}

.month-goals th:last-child {
  width: 3.25rem;
}

.month-goals tbody th {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--control-border);
  color: var(--ink);
  vertical-align: bottom;
}

.month-scroll {
  margin-top: 22px;
  overflow-x: auto;
}

.month-grid {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.8125rem;
}

.month-grid th {
  padding: 4px 6px;
  color: var(--ink-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
}

.month-grid td {
  height: 4.75rem;
  padding: 4px 6px;
  border: 1px solid var(--control-border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* Days before the 1st and after the month's last day. */
.month-grid td.is-outside {
  background: var(--band);
}

.month-day {
  display: block;
  font-weight: 700;
}

.month-note {
  display: block;
  line-height: 1.25;
}

@media (min-width: 480px) {
  .tracker-week-fields ol {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .tracker-facts {
    grid-template-columns: 2fr 1fr 1fr 2fr;
  }

  .tracker-weeks {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .tool-layout.tool-layout-timer {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

@media (min-width: 440px) {
  .board-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .tool-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
  }

  .sheet {
    padding: 36px 40px;
  }

  .board {
    padding: 32px 32px 28px;
  }
}

/* Wider screens */

@media (min-width: 360px) {
  .stores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }

  .field-row {
    grid-template-columns: 1fr auto;
  }

  .features,
  .trust,
  .contrast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .features-three > :last-child {
    grid-column: 1 / -1;
  }

  .trust {
    gap: 36px 48px;
  }

  .plans {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .site-footer .container {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .footer-note {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  :root {
    --gutter: 32px;
  }

  .hero {
    padding-block: 56px 112px;
  }

  .hero .container {
    grid-template-columns: 1.08fr 1fr;
    gap: 64px;
  }

  .section {
    padding-block: 96px;
  }

  .features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .segments {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .features-three > :last-child {
    grid-column: auto;
  }

  .features-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pains {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .showcase {
    gap: 112px;
    margin-top: 72px;
  }

  .show {
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
  }

  .show:nth-child(even) .device {
    order: -1;
  }


  .phone {
    --screen-w: 300px;
  }
}

/* Wide screens: the hero copy sits on one row above the demo, and the
   demo plays in the Windows app's window: the caption band the app draws,
   the sidebar, and the wide layouts, at 1280 x 800 of the app's points. */
@media (min-width: 1100px) {
  .hero .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 64px;
  }

  .hero-copy > :not(.get) {
    grid-column: 1;
  }

  .hero-copy .get {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    margin-top: 0;
  }

  .demo-caption {
    width: min(100%, 560px);
  }

  .phone {
    --desk-w: min(1040px, 100vw - 80px);
    --u: calc(var(--desk-w) / 1280);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    box-shadow: var(--shadow-lifted);
  }

  .app-screen {
    width: var(--desk-w);
    height: calc(var(--u) * 800);
    border-radius: 11px;
  }

  .app-status {
    display: none;
  }

  /* The caption band: transparent, with Windows' three buttons. */
  .app-caption {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 7;
    display: flex;
    justify-content: flex-end;
    height: calc(var(--u) * 32);
    pointer-events: none;
  }

  .app-caption-button {
    position: relative;
    width: calc(var(--u) * 46);
  }

  .app-caption-button::before,
  .app-caption-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--u) * 10);
    height: calc(var(--u) * 10);
    transform: translate(-50%, -50%);
  }

  .app-caption-min::before {
    height: 0;
    border-top: 1px solid var(--app-ink);
  }

  .app-caption-min::after,
  .app-caption-close::before,
  .app-caption-close::after {
    display: none;
  }

  .app-caption-restore::before {
    width: calc(var(--u) * 8);
    height: calc(var(--u) * 8);
    margin: calc(var(--u) * 1) 0 0 calc(var(--u) * -1);
    border: 1px solid var(--app-ink);
  }

  .app-caption-restore::after {
    width: calc(var(--u) * 8);
    height: calc(var(--u) * 8);
    margin: calc(var(--u) * -1) 0 0 calc(var(--u) * 1);
    border-top: 1px solid var(--app-ink);
    border-right: 1px solid var(--app-ink);
  }

  .app-caption-close {
    background: linear-gradient(45deg, transparent calc(50% - 0.5px), var(--app-ink) calc(50% - 0.5px), var(--app-ink) calc(50% + 0.5px), transparent calc(50% + 0.5px)) center / calc(var(--u) * 10) calc(var(--u) * 10) no-repeat,
      linear-gradient(-45deg, transparent calc(50% - 0.5px), var(--app-ink) calc(50% - 0.5px), var(--app-ink) calc(50% + 0.5px), transparent calc(50% + 0.5px)) center / calc(var(--u) * 10) calc(var(--u) * 10) no-repeat;
  }

  /* The sidebar: workspaces, lists, projects and the app pages. */
  .app-sidebar {
    position: absolute;
    top: 0;
    bottom: calc(var(--u) * 80);
    left: 0;
    z-index: 1;
    display: grid;
    align-content: start;
    width: calc(var(--u) * 300);
    padding: calc(var(--u) * 34) calc(var(--u) * 14) 0;
    border-right: 1px solid var(--app-line);
    background: var(--app-bg);
    font-size: calc(var(--u) * 16);
  }

  .app-sidebar img {
    width: calc(var(--u) * 22);
    height: calc(var(--u) * 22);
    filter: var(--app-icon-filter);
  }

  .app-screen .app-side-brand {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 12);
    margin: 0 calc(var(--u) * 8) calc(var(--u) * 14);
    font-size: calc(var(--u) * 21);
    font-weight: 600;
  }

  .app-side-brand img,
  .app-side-me img {
    width: calc(var(--u) * 32);
    height: calc(var(--u) * 32);
    filter: none;
  }

  .app-screen .app-side-head {
    display: flex;
    justify-content: space-between;
    margin: calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 4);
    color: var(--app-ink-2);
    font-size: calc(var(--u) * 12.5);
    letter-spacing: 0.04em;
  }

  .app-side-head span {
    font-size: calc(var(--u) * 18);
    line-height: 1;
  }

  .app-screen .app-side-item {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 16);
    padding: calc(var(--u) * 7) calc(var(--u) * 12);
    border-radius: calc(var(--u) * 12);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .app-side-on-text {
    color: var(--app-rust);
  }

  .app-side-dot {
    width: calc(var(--u) * 7);
    height: calc(var(--u) * 7);
    margin-left: auto;
    border-radius: 50%;
    background: var(--app-rust);
  }

  [data-scene="plan"] .app-side-plan {
    background: var(--app-tab-on);
    color: var(--app-tab-on-ink);
  }

  [data-scene="plan"] .app-side-plan img {
    filter: var(--app-icon-on-filter);
  }

  .app-screen .app-side-note {
    padding: calc(var(--u) * 6) calc(var(--u) * 22);
    color: var(--app-ink-2);
    font-size: calc(var(--u) * 15);
  }

  .app-screen .app-side-me {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 12);
    padding: calc(var(--u) * 14) calc(var(--u) * 16);
    border-top: 1px solid var(--app-line);
  }

  .app-side-me span {
    display: grid;
    color: var(--app-ink-2);
    font-size: calc(var(--u) * 13);
  }

  .app-side-me b {
    color: var(--app-ink);
    font-size: calc(var(--u) * 17);
    font-weight: 600;
  }

  /* Screens sit right of the sidebar, under the band, above the tabs. */
  .app-scene {
    top: calc(var(--u) * 32);
    left: calc(var(--u) * 300);
  }

  .app-scrim,
  .app-dialog-scrim {
    inset: calc(var(--u) * -32) 0 calc(var(--u) * -80) calc(var(--u) * -300);
  }

  .app-tap {
    z-index: 9;
  }

  /* Wide pages center their content, as the app does. */
  .app-scene-plan > .app-bar,
  .app-plan-body,
  .app-quick-add,
  .app-scene-do > *,
  .app-scene-progress > * {
    width: min(100% - var(--u) * 48, var(--u) * 760);
    margin-right: auto;
    margin-left: auto;
  }

  .app-plan-body {
    flex: 1;
  }

  .app-scene-plan .app-menu,
  .app-scene-do .app-menu {
    display: none;
  }

  .app-scene-plan .app-bar {
    height: calc(var(--u) * 76);
    padding: 0 calc(var(--u) * 16);
  }

  .app-scene-plan .app-title {
    font-family: var(--font-display);
    font-size: calc(var(--u) * 34);
    font-weight: 700;
  }

  .app-quick-add {
    border-top: 1px solid var(--app-line);
  }

  .app-scene-do .app-bar {
    padding: 0 calc(var(--u) * 4);
  }

  .app-scene-do .app-segments {
    margin: calc(var(--u) * 4) auto 0;
  }

  .app-scene-do .app-timer {
    margin-top: calc(var(--u) * 18);
  }

  .app-scene-do .app-do-actions {
    margin-bottom: calc(var(--u) * 18);
  }

  .app-scene-progress .app-bar {
    padding: 0;
  }

  /* The New Goal sheet and the AI dialog keep their phone widths. */
  .app-sheet {
    right: auto;
    left: calc(50% - var(--u) * 320);
    width: calc(var(--u) * 640);
  }

  .app-dialog {
    top: calc(var(--u) * 60);
    right: auto;
    left: calc(50% - var(--u) * 270);
    width: calc(var(--u) * 540);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .store,
  .choice {
    transition: none;
  }

  .app-screen *,
  .app-screen *::before,
  .js-say.is-new {
    animation: none !important;
    transition: none !important;
  }
}

/* Printing the goal setting worksheet: the sheet alone, black on white,
   on one A4 or Letter page. With 12 mm margins Letter leaves 255 mm of
   height and A4 186 mm of width, so the sheet is drawn to fit inside
   both and cut off at 255 mm rather than spill onto a second page. */
@media print {
  @page {
    margin: 12mm;
  }

  .prints-sheet {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.35;
  }

  .prints-sheet > :not(main),
  .prints-sheet main > :not(#worksheet),
  .prints-sheet #worksheet .container > :not(.tool-layout),
  .prints-sheet .tool-layout > :not(.tool-result),
  .prints-sheet .tool-result > :not(.sheet) {
    display: none !important;
  }

  .prints-sheet #worksheet,
  .prints-sheet #worksheet .container,
  .prints-sheet .tool-layout {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .sheet {
    max-height: 255mm;
    overflow: hidden;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    break-inside: avoid;
  }

  .sheet,
  .sheet * {
    color: #000000 !important;
    border-color: #000000 !important;
  }

  .sheet-head {
    padding-bottom: 3mm;
    border-bottom-width: 0.6mm;
  }

  .sheet-title {
    font-size: 18pt;
  }

  .sheet-started,
  .sheet-by,
  .sheet-label,
  .sheet-subtitle,
  .sheet-week th,
  .sheet-review dt {
    font-size: 10pt;
  }

  .sheet-when {
    font-weight: 400;
  }

  .sheet-tiers {
    gap: 5mm;
    margin-top: 6mm;
  }

  .sheet-blank {
    min-width: 60mm;
    min-height: 6mm;
    border-bottom-width: 0.75pt;
  }

  .sheet-line {
    height: 18mm;
    min-height: 0;
    overflow: hidden;
    border-bottom-width: 0.75pt;
    font-size: 13pt;
    line-height: 9mm;
  }

  .sheet-line::before {
    top: 9mm;
    border-top: 0.5pt solid #000000;
  }

  .sheet-by {
    margin-top: 2mm;
  }

  .sheet-subtitle {
    margin-top: 7mm;
  }

  .sheet-week {
    margin-top: 1.5mm;
  }

  .sheet-week th {
    padding-bottom: 1.5mm;
  }

  .sheet-week th:first-child {
    width: 14mm;
  }

  .sheet-week td {
    height: 12mm;
    padding: 1.5mm 2mm 1.5mm 0;
    border-bottom-width: 0.75pt;
    font-size: 12pt;
  }

  .sheet-box {
    width: 5mm;
    height: 5mm;
    border-width: 0.5mm;
    border-radius: 1mm;
  }

  .sheet-review {
    margin-top: 1.5mm;
  }

  .sheet-review dd {
    min-height: 10mm;
    border-bottom-width: 0.75pt;
  }

  .sheet-foot {
    margin-top: 6mm;
    font-size: 8pt;
  }
}

/* Printing the vision board: the board alone, on the same one A4 or
   Letter page as the worksheet (186 x 255 mm inside the margins). Each
   picture prints 40 mm tall across its 90 mm column, cropped a little from
   the 2:1 canvas, so three rows of tiles fit with a two-line title and
   two-line steps; the board is cut off at 255 mm rather than spill onto a
   second page. Pictures keep their colors. */
@media print {
  .prints-board {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.35;
  }

  .prints-board > :not(main),
  .prints-board main > :not(#template),
  .prints-board #template .container > :not(.tool-layout),
  .prints-board .tool-layout > :not(.tool-result),
  .prints-board .tool-result > :not(.board) {
    display: none !important;
  }

  .prints-board #template,
  .prints-board #template .container,
  .prints-board .tool-layout {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .board {
    max-height: 255mm;
    overflow: hidden;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    break-inside: avoid;
  }

  .board,
  .board * {
    color: #000000 !important;
    border-color: #000000 !important;
  }

  .board-head {
    padding-bottom: 3mm;
    border-bottom-width: 0.6mm;
  }

  .board-title {
    font-size: 18pt;
  }

  .board-made,
  .board-area,
  .board-step,
  .board-placeholder {
    font-size: 9pt;
  }

  .board-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4mm 6mm;
    margin-top: 4mm;
  }

  .board-tile {
    gap: 1.5mm;
    break-inside: avoid;
  }

  .board-picture {
    height: 40mm;
    aspect-ratio: auto;
    border-width: 0.3mm;
    border-radius: 2mm;
    background: none;
  }

  .board-canvas {
    object-fit: cover;
  }

  .board-area {
    margin-top: 0.5mm;
  }

  .board-wish {
    height: 10mm;
    min-height: 0;
    overflow: hidden;
    border-bottom-width: 0.75pt;
    font-size: 11pt;
    line-height: 5mm;
  }

  .board-step {
    max-height: 9mm;
    overflow: hidden;
    line-height: 4.5mm;
  }

  .board-blank {
    min-height: 4.5mm;
    border-bottom-width: 0.75pt;
  }

  .board-foot {
    margin-top: 4mm;
    font-size: 8pt;
  }
}

/* Printing the to-do list: the sheet alone, with the worksheet's print
   styles above (black on white, cut off at 255 mm). Goals, ten task rows
   and a notes line fit one A4 or Letter page. */
@media print {
  .prints-todo {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.35;
  }

  .prints-todo > :not(main),
  .prints-todo main > :not(#template),
  .prints-todo #template .container > :not(.tool-layout),
  .prints-todo .tool-layout > :not(.tool-result),
  .prints-todo .tool-result > :not(.sheet) {
    display: none !important;
  }

  .prints-todo #template,
  .prints-todo #template .container,
  .prints-todo .tool-layout {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .todo-week th:last-child {
    width: 16mm;
  }

  .todo-week td {
    font-size: 11pt;
  }
}

/* Printing the weekly planner: the sheet alone, with the worksheet's print
   styles above (black on white, cut off at 255 mm). Goals, the top three,
   seven day boxes of three rows and a notes box fit one A4 or Letter page,
   with room left for a few tasks that run to two lines. */
@media print {
  .prints-week {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.35;
  }

  .prints-week > :not(main),
  .prints-week main > :not(#template),
  .prints-week #template .container > :not(.tool-layout),
  .prints-week .tool-layout > :not(.tool-result),
  .prints-week .tool-result > :not(.sheet) {
    display: none !important;
  }

  .prints-week #template,
  .prints-week #template .container,
  .prints-week .tool-layout {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .prints-week .sheet-subtitle {
    margin-top: 4mm;
  }

  .prints-week .sheet-review dd {
    min-height: 8mm;
  }

  .prints-week .todo-week td {
    height: 9mm;
    font-size: 11pt;
  }

  .week-days {
    grid-template-columns: 1fr 1fr;
    gap: 3mm;
    margin-top: 4mm;
  }

  .week-day {
    padding: 1.5mm 3mm 0.5mm;
    border-width: 0.75pt;
    border-radius: 2mm;
    break-inside: avoid;
  }

  .week-day-title {
    font-size: 10pt;
  }

  .week-tasks li {
    grid-template-columns: 4mm minmax(0, 1fr) 4mm;
    column-gap: 2mm;
    min-height: 8mm;
    padding: 1mm 0 0.75mm;
    border-bottom-width: 0.5pt;
    font-size: 10pt;
    line-height: 1.25;
  }

  .week-tasks .sheet-box {
    width: 3.5mm;
    height: 3.5mm;
    border-width: 0.4mm;
    border-radius: 0.75mm;
  }
}

/* Printing the daily planner: the sheet alone, with the worksheet's print
   styles above (black on white, cut off at 255 mm). The goals run across
   the top, then the schedule sits beside the lists. The hour rows share
   170 mm, at most 16 mm each, so a whole 24-hour day still fits; up to 17
   rows keep room for two lines each. The lists stay shorter than the
   schedule with every field at its longest, so the page always ends with
   its foot. */
@media print {
  .prints-day {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.35;
  }

  .prints-day > :not(main),
  .prints-day main > :not(#template),
  .prints-day #template .container > :not(.tool-layout),
  .prints-day .tool-layout > :not(.tool-result),
  .prints-day .tool-result > :not(.sheet) {
    display: none !important;
  }

  .prints-day #template,
  .prints-day #template .container,
  .prints-day .tool-layout {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .prints-day .sheet-subtitle {
    margin-top: 4mm;
  }

  .prints-day .sheet-review dd {
    min-height: 8mm;
  }

  .day-columns {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 6mm;
    margin-top: 4mm;
  }

  .prints-day .day-columns .sheet-subtitle:first-child {
    margin-top: 0;
  }

  .day-hours {
    display: flex;
    flex-direction: column;
    height: 170mm;
    margin-top: 1.5mm;
  }

  /* A row too short for two lines keeps its hour and its last line,
     losing the first line rather than the hour. */
  .day-hours li {
    flex: 1 1 0;
    align-content: end;
    min-height: 0;
    max-height: 16mm;
    overflow: hidden;
    grid-template-columns: 15mm minmax(0, 1fr);
    column-gap: 2mm;
    padding: 0.75mm 0;
    border-bottom-width: 0.5pt;
    font-size: 10pt;
    line-height: 1.25;
  }

  .day-hour {
    font-size: 9pt;
  }

  .day-todos li {
    grid-template-columns: 4mm minmax(0, 1fr);
  }
}

/* Printing the habit tracker: the sheet alone, with the worksheet's print
   styles above (black on white, cut off at 255 mm). Ten habits by 31 days
   fit the 186 mm width in portrait: a 44 mm name column, a 7 mm goal
   column and 31 day columns of about 4.3 mm. */
@media print {
  .prints-habit {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.35;
  }

  .prints-habit > :not(main),
  .prints-habit main > :not(#template),
  .prints-habit #template .container > :not(.tool-layout),
  .prints-habit .tool-layout > :not(.tool-result),
  .prints-habit .tool-result > :not(.sheet) {
    display: none !important;
  }

  .prints-habit #template,
  .prints-habit #template .container,
  .prints-habit .tool-layout {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .habit-scroll {
    overflow: visible;
  }

  .habit-grid {
    min-width: 0;
    font-size: 9pt;
  }

  .habit-grid th,
  .habit-grid td {
    border-width: 0.5pt;
  }

  .habit-grid thead th {
    padding: 0.8mm 0;
    font-size: 7pt;
  }

  .habit-grid thead th:first-child {
    width: 44mm;
    padding-left: 1.5mm;
  }

  .habit-grid thead th:nth-child(2) {
    width: 7mm;
  }

  .habit-grid tbody th {
    height: 9mm;
    padding: 0.5mm 1.5mm;
    font-size: 9.5pt;
    line-height: 1.2;
  }

  .habit-grid tbody td:nth-child(2) {
    font-size: 9.5pt;
  }
}

/* Printing the SMART goal template: the sheet alone, with the worksheet's
   print styles above (black on white, cut off at 255 mm). The sentence,
   the five letters, two steps and the check on the date fit one A4 or
   Letter page with every field at its longest. */
@media print {
  .prints-smart {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.35;
  }

  .prints-smart > :not(main),
  .prints-smart main > :not(#template),
  .prints-smart #template .container > :not(.tool-layout),
  .prints-smart .tool-layout > :not(.tool-result),
  .prints-smart .tool-result > :not(.sheet) {
    display: none !important;
  }

  .prints-smart #template,
  .prints-smart #template .container,
  .prints-smart .tool-layout {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .smart-goal {
    margin-top: 4mm;
    padding-bottom: 1.5mm;
    border-bottom-width: 0.75pt;
    font-size: 12pt;
    line-height: 6.5mm;
  }

  .smart-goal:empty {
    height: 22.5mm;
    padding-bottom: 0;
  }

  .smart-goal:empty::before,
  .smart-goal:empty::after {
    border-top: 0.5pt solid #000000;
  }

  .smart-goal:empty::before {
    top: 7.5mm;
  }

  .smart-goal:empty::after {
    top: 15mm;
  }

  .prints-smart .sheet-subtitle {
    margin-top: 5mm;
  }

  .smart-letters {
    gap: 1.5mm;
    margin-top: 1.5mm;
  }

  .smart-letters div {
    grid-template-columns: 31mm minmax(0, 1fr);
    column-gap: 3mm;
  }

  .smart-letters dt {
    gap: 2mm;
    padding-bottom: 1mm;
    font-size: 10pt;
  }

  .smart-letters dt .smart-letter {
    width: 6mm;
    height: 6mm;
    border: 0.4mm solid #000000;
    background: none;
    font-size: 9pt;
  }

  .smart-letters dd {
    min-height: 8.5mm;
    padding-bottom: 1mm;
    border-bottom-width: 0.75pt;
    font-size: 10.5pt;
    line-height: 1.3;
  }

  .smart-steps th:nth-child(2) {
    width: 24mm;
  }

  .smart-steps tbody th {
    padding: 1.5mm 2mm 1.5mm 0;
    border-bottom-width: 0.75pt;
  }

  .smart-steps td {
    font-size: 11pt;
  }
}

/* Printing the goal tracker: the sheet alone, with the worksheet's print
   styles above (black on white, cut off at 255 mm). Three goals, each with
   its 12 weeks in one row across the 186 mm width, and the two lines for
   after the 12 weeks fit one A4 or Letter page with every field at its
   longest. */
@media print {
  .prints-tracker {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.35;
  }

  .prints-tracker > :not(main),
  .prints-tracker main > :not(#template),
  .prints-tracker #template .container > :not(.tool-layout),
  .prints-tracker .tool-layout > :not(.tool-result),
  .prints-tracker .tool-result > :not(.sheet) {
    display: none !important;
  }

  .prints-tracker #template,
  .prints-tracker #template .container,
  .prints-tracker .tool-layout {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .tracker-howto {
    margin-top: 2mm;
    font-size: 9pt;
  }

  .tracker-goal {
    margin-top: 5mm;
    break-inside: avoid;
  }

  .tracker-goal-title {
    gap: 3mm;
    font-size: 12pt;
  }

  .tracker-letter {
    width: 6.5mm;
    height: 6.5mm;
    border: 0.4mm solid #000000;
    background: none;
    font-size: 10pt;
  }

  .tracker-goal-text {
    min-height: 6.5mm;
    border-bottom-width: 0.75pt;
    line-height: 1.3;
  }

  .tracker-facts {
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 0 4mm;
    margin-top: 2.5mm;
  }

  .tracker-facts dt {
    font-size: 8pt;
  }

  .tracker-facts dd {
    min-height: 6mm;
    border-bottom-width: 0.75pt;
    font-size: 10pt;
    line-height: 1.3;
  }

  .tracker-weeks {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin: 3mm 0.5pt 0.5pt 0;
  }

  .tracker-weeks li {
    margin: 0 -0.5pt -0.5pt 0;
    border-width: 0.5pt;
    font-size: 7.5pt;
    line-height: 1.25;
  }

  .tracker-week-name {
    padding-top: 0.8mm;
  }

  /* 8pt keeps the longest number, 99,999.99, on one line in a 15.5 mm
     box. */
  .tracker-week-box {
    min-height: 9mm;
    margin-top: 0.8mm;
    border-top-width: 0.5pt;
    font-size: 8pt;
  }

  .tracker-step {
    column-gap: 2.5mm;
    margin-top: 3mm;
  }

  .tracker-step-label {
    font-size: 9pt;
  }

  .tracker-step-text {
    min-height: 6.5mm;
    border-bottom-width: 0.75pt;
    font-size: 10.5pt;
    line-height: 1.3;
  }

  .prints-tracker .sheet-subtitle {
    margin-top: 5mm;
  }

  .prints-tracker .sheet-review dd {
    min-height: 7mm;
  }

  .prints-tracker .sheet-foot {
    margin-top: 4mm;
  }
}

/* Printing the monthly planner: the sheet alone, with the worksheet's print
   styles above (black on white, cut off at 255 mm). In portrait, the goals
   table, a calendar across the 186 mm width and the to-do and notes boxes
   fit one A4 or Letter page with every field at its longest. The calendar
   is about 102 mm tall whatever its rows: 4 rows of 25.5 mm, 5 of 20.5 mm
   or 6 of 17 mm, each day 26 mm wide with room for a three-line key date. */
@media print {
  .prints-month {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.35;
  }

  .prints-month > :not(main),
  .prints-month main > :not(#template),
  .prints-month #template .container > :not(.tool-layout),
  .prints-month .tool-layout > :not(.tool-result),
  .prints-month .tool-result > :not(.sheet) {
    display: none !important;
  }

  .prints-month #template,
  .prints-month #template .container,
  .prints-month .tool-layout {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  .prints-month .sheet-subtitle {
    margin-top: 3mm;
  }

  .sheet-month {
    font-size: 13pt;
  }

  .month-goals th:first-child {
    width: 6mm;
  }

  .month-goals th:last-child {
    width: 12mm;
  }

  .month-goals td,
  .month-goals tbody th {
    height: 8mm;
    padding: 1mm 2mm 1mm 0;
    border-bottom-width: 0.75pt;
    font-size: 10pt;
    line-height: 1.25;
  }

  .month-scroll {
    margin-top: 3mm;
    overflow: visible;
  }

  .month-grid {
    min-width: 0;
    font-size: 8pt;
  }

  .month-grid th {
    padding: 0 1.25mm 1mm;
    font-size: 9pt;
  }

  .month-grid td {
    height: 17mm;
    padding: 1mm 1.25mm;
    border-width: 0.5pt;
    line-height: 1.2;
  }

  .month-grid.rows-5 td {
    height: 20.5mm;
  }

  .month-grid.rows-4 td {
    height: 25.5mm;
  }

  .month-grid td.is-outside {
    background: none;
  }

  .month-day {
    font-size: 9pt;
  }

  .prints-month .week-days {
    margin-top: 3mm;
  }

  .prints-month .sheet-foot {
    margin-top: 4mm;
  }

  .prints-month .week-tasks li {
    min-height: 7mm;
  }
}

/* Keep the goal-tracker headline in coherent phrases at desktop widths. */
@media (min-width: 960px) {
  .hero h1.goal-tracker-headline {
    font-size: clamp(2.5rem, 3.6vw + 1rem, 3.75rem);
  }
}