/* Timewell website. One light theme: warm paper, ink, and the app's blue. */

:root {
  --paper: #f9f7f4;
  --panel: #f2eee8;
  --panel-edge: #e7e1d8;
  --ink: #161514;
  --ink-2: #3b3834;
  --ink-3: #66615a;
  --line: #e4ded5;
  --accent: #405bff;
  --accent-hover: #2f48e6;
  --night: #161514;
  --on-night: #f4f1ec;
  --on-night-2: #b4aea5;
  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --max: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --inset: clamp(8px, 1.6vw, 24px);
  --panel-radius: clamp(20px, 2.6vw, 32px);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

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

a {
  color: inherit;
}

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

::selection {
  background: rgb(64 91 255 / 18%);
}

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

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

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

.skip-link:focus {
  top: 12px;
}

/* App mark: the icon's white glyph on the app's blue. */

.mark {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size, 32px);
  aspect-ratio: 1;
  border-radius: 22.5%;
  background: linear-gradient(180deg, #4a66ff, #3a57f7);
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 12%);
}

/* The glyph's scale and offset from the app icon's layer in AppIcon.icon. */
.mark img {
  width: 100%;
  height: auto;
  translate: -0.3% -0.7%;
  scale: 1.029;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(249 247 244 / 86%);
  backdrop-filter: saturate(180%) blur(16px);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

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

.nav-links a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.nav-links a:hover {
  color: var(--ink);
  background: rgb(22 21 20 / 5%);
}

.nav-links a[aria-current="page"] {
  color: var(--ink);
}

@media (width <= 560px) {
  .nav-links {
    display: none;
  }
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}

.button--dark {
  background: var(--ink);
  color: var(--paper);
}

.button--dark:hover {
  background: #33312e;
}

.button--accent {
  background: var(--accent);
  color: #fff;
}

.button--accent:hover {
  background: var(--accent-hover);
}

.button--quiet {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px #cfc8bd;
}

.button--quiet:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* Apple's badge artwork, shown unmodified at its own proportions. */
.app-store-badge {
  display: inline-block;
  border-radius: 10px;
}

.app-store-badge img {
  width: auto;
  height: 56px;
}

.app-store-badge:hover img {
  opacity: 0.82;
}

.button--large {
  min-height: 56px;
  padding: 0 28px;
  border-radius: 12px;
  font-size: 17px;
}

/* Type */

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

/* Starts each sentence of a headline on its own line at every width. */
.display-line {
  display: block;
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.lede {
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  text-wrap: pretty;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.arrow-link::after {
  content: "→";
  transition: translate 0.2s;
}

.arrow-link:hover::after {
  translate: 3px 0;
}

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  margin-inline: var(--inset);
  overflow: hidden;
  border-radius: var(--panel-radius);
  background: var(--panel);
  text-align: center;
}

/* The Grain Gradient shader's canvas, behind the hero's content and clipped by its corners. */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-copy {
  padding: clamp(56px, 9vw, 120px) var(--gutter) 0;
}

.hero h1 {
  font-size: clamp(52px, 10vw, 120px);
}

.hero .lede {
  max-width: 34ch;
  margin: clamp(20px, 2.5vw, 28px) auto 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 40px);
}

.hero-note {
  margin: 16px 0 0;
  color: var(--ink-3);
  font-size: 15px;
}

/* Product composition: a phone cropped by the panel edge, with system surfaces around it. */

.showcase {
  --phone-w: clamp(244px, 25vw, 300px);

  position: relative;
  max-width: 980px;
  height: calc(var(--phone-w) * 1.6);
  margin: clamp(56px, 7vw, 88px) auto 0;
}

.phone {
  container-type: inline-size;
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--phone-w);
  aspect-ratio: 300 / 620;

  /* A percentage would follow the showcase's width, not the phone's. */
  padding: calc(var(--phone-w) * 0.034);
  border-radius: 17% / 8.2%;
  background: #1b1b1d;
  box-shadow:
    inset 0 0 0 1.5px #3a3a3d,
    0 40px 80px -30px rgb(60 45 25 / 35%);
  translate: -50% 0;
}

/* Paper Shaders injects these rules inline, which the CSP blocks. */
[data-paper-shader] {
  isolation: isolate;
}

[data-paper-shader] canvas {
  contain: strict;
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 7cqw;
  border-radius: 14.6% / 6.8%;
  background: #fff;
  color: #000;
  font-family: var(--font);
  text-align: center;
}

.island {
  position: absolute;
  left: 50%;
  top: 3.4cqw;
  width: 31cqw;
  height: 9.4cqw;
  border-radius: 99px;
  background: #000;
  translate: -50% 0;
}

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 16cqw;
  padding: 0 3cqw;
  font-size: 5.1cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.statusbar-icons {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}

.statusbar-icons span {
  display: block;
  border-radius: 1cqw;
  background: #000;
}

.statusbar-icons .signal {
  width: 5.6cqw;
  height: 3.6cqw;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  border-radius: 0.4cqw;
}

.statusbar-icons .battery {
  position: relative;
  width: 8.2cqw;
  height: 3.9cqw;
  border-radius: 1.2cqw;
}

/* The Focus tab, after the app's duration picker. */

.screen-title {
  margin-top: 1cqw;
  font-size: 5.4cqw;
  font-weight: 600;
}

.screen-category {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 1.6cqw;
  height: 10.5cqw;
  margin-top: 6cqw;
  padding: 0 4cqw;
  border-radius: 99px;
  background: #efeff1;
  font-size: 4.6cqw;
  font-weight: 600;
}

.screen-category svg {
  width: 4.8cqw;
  stroke: #ff9500;
}

.screen-category .chevrons {
  width: 3.6cqw;
  stroke: #8a8a8e;
  stroke-width: 2.2;
}

.screen-duration {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-top: 13cqw;
}

.screen-minutes {
  flex: 1;
  font-size: 40cqw;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
}

.stepper {
  position: relative;
  flex: none;
  width: 14cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #efeff1;
}

.stepper::before,
.stepper--plus::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 5cqw;
  height: 0.9cqw;
  border-radius: 99px;
  background: #000;
  translate: -50% -50%;
}

.stepper--plus::after {
  rotate: 90deg;
}

.screen-unit {
  margin-top: 1cqw;
  color: #8a8a8e;
  font-size: 5.6cqw;
  font-weight: 500;
}

.screen-end {
  margin-top: 0.6cqw;
  color: #8a8a8e;
  font-size: 4.2cqw;
  font-variant-numeric: tabular-nums;
}

.presets {
  display: flex;
  gap: 1.8cqw;
  margin-top: 10cqw;
}

.presets span {
  display: grid;
  flex: 1;
  place-items: center;
  height: 10cqw;
  border-radius: 99px;
  background: #efeff1;
  font-size: 4.4cqw;
  font-weight: 600;
}

.screen-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  height: 15cqw;
  margin-top: 12cqw;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-size: 5.7cqw;
  font-weight: 700;
}

.screen-start::before {
  content: "";
  width: 3.8cqw;
  height: 4.2cqw;
  background: currentcolor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Line icons drawn on a 16-point grid, such as the stopwatch. */
.screen-category svg,
.week-card-label svg,
.lock-widget svg,
.quick-item svg {
  flex: none;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.week-card-label svg,
.lock-widget svg,
.quick-item svg {
  stroke: currentcolor;
}

.progress {
  height: 2cqw;
  margin-top: 10cqw;
  overflow: hidden;
  border-radius: 99px;
  background: #e5e5ea;
}

.progress span {
  display: block;
  width: var(--progress, 25%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.6s ease;
}

/* Live Activity, after the widget's Lock Screen layout */

.live-activity {
  display: grid;
  gap: 10px;
  padding: 18px 20px 20px;
  border-radius: 26px;
  background: rgb(28 28 30 / 94%);
  color: #fff;
  text-align: left;
  backdrop-filter: blur(20px);
}

.la-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  line-height: 1.25;
}

.la-top strong {
  color: #8c9bff;
  font-weight: 700;
}

.la-top span {
  color: #a1a1a6;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.la-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.la-time {
  font-size: 52px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.la-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 99px;
  background: rgb(255 255 255 / 16%);
  font-size: 15px;
  font-weight: 600;
}

.la-end::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentcolor;
}

.live-activity .progress {
  height: 5px;
  margin-top: 2px;
  background: rgb(255 255 255 / 20%);
}

.live-activity .progress span {
  width: var(--progress, 75%);
  background: #5b72ff;
}

/* Week card, after the app's Stats tab */

.week-card {
  padding: 16px 18px 14px;
  border-radius: 22px;
  background: #fff;
  color: #000;
  text-align: left;
}

.week-card-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #5856d6;
  font-size: 13px;
  font-weight: 600;
}

.week-card-total {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Units beside a number, as the app's Stats set them. */
.week-card-total small,
.stats-tile strong small {
  margin-left: 1px;
  font-size: 0.45em;
  font-weight: 600;
  opacity: 0.75;
}

.bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.bars li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 84px;
  color: #8a8a8e;
  font-size: 11px;
  font-weight: 500;
}

.bars li::before {
  content: "";
  width: 100%;
  height: var(--h);
  min-height: 3px;
  border-radius: 4px;
  background: #5856d6;
}

.bars li:nth-child(1) {
  --h: 55%;
}

.bars li:nth-child(2) {
  --h: 80%;
}

.bars li:nth-child(3) {
  --h: 30%;
}

.bars li:nth-child(4) {
  --h: 92%;
}

.bars li:nth-child(5) {
  --h: 0;
}

.bars li:nth-child(6) {
  --h: 68%;
}

.bars li:nth-child(7) {
  --h: 0;
}

.bars li.is-empty::before {
  background: #e5e5ea;
}

.bars li.is-today {
  color: #000;
  font-weight: 700;
}

/* A hairline and a close shadow keep a white card's edge visible over white, such as
   the phone screen it overlaps, with the soft shadow lifting it off the panel. */
.lifted {
  box-shadow:
    0 0 0 0.5px rgb(40 30 15 / 14%),
    0 2px 8px -2px rgb(40 30 15 / 16%),
    0 24px 48px -18px rgb(60 45 25 / 32%);
}

/* Sections */

.section {
  padding-block: clamp(72px, 10vw, 136px);
}

/* Adjacent sections share one gap instead of adding their paddings together. */
.section + .section {
  padding-top: 0;
}

.section-head {
  display: grid;
  gap: 20px;
  max-width: 720px;
  margin-bottom: clamp(48px, 7vw, 88px);
}

.section-head .lede {
  max-width: 46ch;
}

/* Lock Screen */

.lock-screen {
  display: grid;
  justify-items: center;
  align-content: start;
  width: min(100%, 380px);
  padding: 30px 18px 22px;
  border-radius: 36px;
  background:
    radial-gradient(120% 80% at 20% 0%, #4a5fd9 0%, transparent 60%),
    radial-gradient(90% 70% at 100% 100%, #2a1f5c 0%, transparent 70%), #121633;
  color: #fff;
}

.lock-date {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  opacity: 0.85;
}

/* The inline widget, which takes the rest of the date line. */
.lock-widget {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.lock-widget svg {
  width: 15px;
}

.lock-time {
  margin-top: -2px;
  font-family: var(--font-display);
  font-size: clamp(76px, 9vw, 96px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.lock-screen .live-activity {
  width: 100%;
  margin-top: 28px;
}

/* Lock Screen widgets: the time left as a ring around the stopwatch, and as a countdown
   with a draining bar. */

.lock-widgets {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.lock-circular {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
}

.lock-circular .ring {
  position: absolute;
  inset: 5px;
  width: auto;
  height: auto;
  background: conic-gradient(
    #fff var(--progress, 75%),
    rgb(255 255 255 / 28%) 0
  );
  mask: radial-gradient(
    closest-side,
    transparent calc(100% - 4px),
    #000 calc(100% - 3.5px)
  );
}

.lock-circular svg {
  width: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.lock-rectangular {
  display: grid;
  width: 150px;
  text-align: left;
}

.lock-rectangular strong {
  font-size: 14px;
  font-weight: 700;
}

.lock-rectangular span {
  font-size: 30px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.lock-rectangular .progress {
  height: 4px;
  margin-top: 6px;
  background: rgb(255 255 255 / 25%);
}

.lock-rectangular .progress span {
  width: var(--progress, 75%);
  background: #fff;
}

/* Home Screen, with the app's small widget, or with its quick action menu open over the
   blurred icons. Sized in container units so the widget and the menu keep their
   proportions to the icons at every width. */

.home-screen {
  container-type: inline-size;
  display: grid;
  width: min(100%, 380px);
  overflow: hidden;
  border-radius: 36px;
  background:
    radial-gradient(90% 60% at 0% 10%, #c79a68 0%, transparent 70%),
    radial-gradient(80% 70% at 100% 90%, #3d3129 0%, transparent 70%), #7d6654;
}

.home-grid,
.quick-action {
  grid-area: 1 / 1;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5cqw 5.4cqw;
  padding: 8cqw 6.6cqw 9cqw;
}

.home-screen--menu .home-grid {
  filter: blur(3px);
  opacity: 0.7;
}

.home-widget {
  display: grid;
  grid-column: span 2;
  grid-row: span 2;
  gap: 1.8cqw;
}

.widget {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: 4.2cqw 4.4cqw;
  border-radius: 6.4cqw;
  background: #fff;
  color: #000;
  text-align: left;
}

.widget strong {
  color: var(--accent);
  font-size: 4cqw;
  font-weight: 700;
}

.widget-time {
  margin-top: auto;
  font-size: 10.6cqw;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.widget-end {
  margin-top: 1.2cqw;
  color: #8a8a8e;
  font-size: 3.2cqw;
  font-variant-numeric: tabular-nums;
}

.widget .progress {
  height: 1.3cqw;
  margin-top: 3cqw;
}

.widget .progress span {
  width: var(--progress, 75%);
}

.home-label {
  color: #fff;
  font-size: 3.4cqw;
  font-weight: 500;
  text-align: center;
}

/* Positioned, so it paints above the blurred icons, whose filter and opacity would
   otherwise lift them over the menu. */
.quick-action {
  position: relative;
  display: grid;
  justify-items: start;
  align-content: end;
  gap: 3cqw;
  padding: 8cqw 6.6cqw 9cqw;
}

.quick-menu {
  width: 72cqw;
  overflow: hidden;
  border-radius: 5cqw;
  background: rgb(255 255 255 / 92%);
  color: #000;
  text-align: left;
}

.quick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  margin: 0;
  padding: 3.4cqw 4.6cqw;
  font-size: 4.2cqw;
  line-height: 1.3;
}

.quick-item span {
  color: #6c6c70;
  font-size: 3.6cqw;
}

.quick-item strong {
  display: block;
  color: #000;
  font-size: 4.4cqw;
  font-weight: 500;
}

.quick-item svg {
  width: 5.4cqw;
}

.quick-action .mark {
  --size: 17.6cqw;
}

/* Other apps stay unnamed: a frosted icon and the line where its name would be. */
.app {
  display: grid;
  gap: 2.4cqw;
  justify-items: center;
}

.app::before {
  content: "";
  width: 100%;
  aspect-ratio: 1;
  border-radius: 24%;
  background: rgb(255 255 255 / 32%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%);
}

.app::after {
  content: "";
  width: 62%;
  height: 1.8cqw;
  border-radius: 99px;
  background: rgb(255 255 255 / 42%);
}

/* Stats, after the app's Stats tab: one column of cards, or two beside each other with
   Consistency on the right once there's room. */

.stats-board {
  display: grid;
  align-items: center;
  gap: 16px;
  padding: clamp(20px, 4vw, 48px);
  border-radius: var(--panel-radius);
  background: var(--panel);
}

@media (width > 760px) {
  .stats-board {
    grid-template-areas:
      "tiles heat"
      "week heat";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px clamp(16px, 3vw, 40px);
  }

  .stats-board .stats-tiles {
    grid-area: tiles;
  }

  .stats-board .week-card {
    grid-area: week;
  }

  .stats-board .consistency {
    grid-area: heat;
  }
}

.stats-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stats-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 168px;
  padding: 14px 12px;
  border-radius: 20px;
  background: #fff;
  color: #000;
  text-align: center;
}

.stats-tile-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

/* The increased-contrast system yellow and orange the app uses for these titles. */
.stats-tile-title--today {
  color: #b25000;
}

.stats-tile-title--streak {
  color: #c93400;
}

.stats-tile strong {
  font-size: clamp(40px, 4.4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  white-space: nowrap;
}

.stats-tile span {
  color: #8a8a8e;
  font-size: 13px;
  line-height: 1.3;
}

.stats-tile .stats-tile-unit {
  color: #000;
  font-size: 20px;
  font-weight: 600;
}

/* Built into iOS: four pictured system surfaces */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 40px clamp(20px, 3vw, 32px);
}

/* Tiles side by side share their rows, so their pictures match in height. */
.tile {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}

.tile > h3 {
  margin: 24px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.tile > p {
  max-width: 44ch;
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1.5;
}

.tile-visual {
  display: grid;
  place-items: center;
  min-height: clamp(300px, 32vw, 380px);
  padding: clamp(20px, 3vw, 36px);
  overflow: hidden;
  border-radius: var(--panel-radius);
  background: var(--panel);
}

/* Spans the gallery, with the Home Screen and Lock Screen beside each other, or one
   above the other once they don't fit. */
.tile--wide {
  grid-column: 1 / -1;
}

.tile-visual--widgets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 32px);
}

/* Siri's answer, after its snippet, above the actions the Shortcuts app lists. */

.siri-stack {
  display: grid;
  gap: 12px;
  width: min(100%, 380px);
}

.siri {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 26px;
  background: #fff;
  color: #000;
  text-align: left;
}

.siri p {
  margin: 0;
}

.siri-said {
  justify-self: end;
  padding: 8px 14px;
  border-radius: 18px;
  background: #efeff1;
  font-size: 16px;
}

.siri-reply {
  font-size: 17px;
  font-weight: 600;
}

.siri-result {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 12px;
  border-radius: 16px;
  background: #f4f4f6;
}

.siri-result .mark {
  --size: 40px;
}

.siri-result p {
  color: #6c6c70;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.siri-result strong {
  display: block;
  color: var(--accent);
  font-size: 16px;
}

.shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shortcuts li {
  display: flex;
  align-items: flex-end;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgb(40 30 15 / 14%);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

/* The top of a phone running another app, with the countdown in the compact Dynamic
   Island: a ring of time left beside the camera, and the time after it. */

.tile-visual--island {
  align-items: end;
  padding-bottom: 0;
}

.phone-top {
  width: min(100%, 400px);
  height: clamp(250px, 26vw, 300px);
  padding: 10px 10px 0;
  border-radius: 56px 56px 0 0;
  background: #1b1b1d;
  box-shadow: inset 0 0 0 1.5px #3a3a3d;
}

.phone-top-screen {
  height: 100%;
  padding: 10px 10px 0;
  overflow: hidden;
  border-radius: 46px 46px 0 0;
  background: #fff;
}

.island-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(62%, 230px);
  height: 36px;
  margin-inline: auto;
  padding: 0 14px 0 9px;
  border-radius: 99px;
  background: #000;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ring {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(
    #5b72ff var(--progress, 75%),
    rgb(91 114 255 / 28%) 0
  );
  mask: radial-gradient(circle, transparent 6.5px, #000 7px);
}

.page-lines {
  display: grid;
  gap: 10px;
  padding: 24px 14px 0;
}

.page-lines span {
  height: 9px;
  border-radius: 5px;
  background: #ececef;
}

.page-lines span:nth-child(1) {
  width: 46%;
  height: 14px;
  margin-bottom: 4px;
  background: #dcdce0;
}

.page-lines span:nth-child(3) {
  width: 88%;
}

.page-lines span:nth-child(5) {
  width: 64%;
}

/* Consistency, after the app's Stats card: one column per week, one row per weekday. */

.consistency {
  --weeks: 18;

  width: 100%;
  padding: 16px;
  border-radius: 22px;
  background: #fff;
  color: #000;
  text-align: left;
}

.consistency-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
}

.consistency-head p {
  margin: 0;
}

.consistency-title {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #246f2c;
  font-size: 13px;
  font-weight: 600;
}

.consistency-title svg {
  fill: currentcolor;
}

.consistency-summary {
  color: #8a8a8e;
  font-size: 12px;
}

.heat-months,
.heat {
  display: grid;
  grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
  column-gap: 3px;
}

.heat-months {
  margin-top: 12px;
  color: #8a8a8e;
  font-size: 11px;
}

.heat-months span {
  grid-row: 1;
  white-space: nowrap;
}

.heat-months .from-2 {
  grid-column-start: 2;
}

.heat-months .from-6 {
  grid-column-start: 6;
}

.heat-months .from-11 {
  grid-column-start: 11;
}

.heat-months .from-15 {
  grid-column-start: 15;
}

.heat {
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  row-gap: 3px;
  margin-top: 4px;
}

.heat i,
.heat-legend i {
  display: block;
  aspect-ratio: 1;
  border-radius: 17%;
  background: #e5e5ea;
}

.heat .is-future {
  visibility: hidden;
}

.heat .l1,
.heat-legend .l1 {
  background: #abe6ac;
}

.heat .l2,
.heat-legend .l2 {
  background: #6bc670;
}

.heat .l3,
.heat-legend .l3 {
  background: #409d48;
}

.heat .l4,
.heat-legend .l4 {
  background: #246f2c;
}

.heat-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 12px;
  color: #8a8a8e;
  font-size: 11px;
}

.heat-legend i {
  width: 12px;
}

.heat-legend i:first-of-type {
  margin-left: 3px;
}

.heat-legend i:last-of-type {
  margin-right: 3px;
}

/* Details list */

.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0 clamp(24px, 3vw, 40px);
  margin: clamp(56px, 7vw, 80px) 0 0;
  padding: 0;
  list-style: none;
}

.details li {
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
}

.details h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.details p {
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1.5;
}

/* Privacy band */

.night {
  margin-inline: var(--inset);
  border-radius: var(--panel-radius);
  background: var(--night);
  color: var(--on-night);
}

.night .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding-block: clamp(64px, 9vw, 128px);
}

.night .title {
  font-size: clamp(36px, 5.4vw, 64px);
}

.night .lede {
  max-width: 44ch;
  margin-top: 24px;
  color: var(--on-night-2);
}

.night .arrow-link {
  margin-top: 16px;
  color: #a9b4ff;
}

/* After the App Privacy label of an App Store listing, in dark appearance. */

.app-privacy {
  display: grid;
  justify-items: center;
  justify-self: end;
  width: 100%;
  max-width: 400px;
  padding: 24px 24px 28px;
  border-radius: 18px;
  background: #272522;
  text-align: center;
}

.app-privacy h3 {
  margin: 0 0 20px;
  color: var(--on-night-2);
  font-size: 15px;
  font-weight: 600;
}

.app-privacy strong {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-privacy p {
  max-width: 26ch;
  margin: 4px 0 0;
  color: var(--on-night-2);
  font-size: 14px;
  line-height: 1.4;
}

@media (width <= 860px) {
  .night .wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-privacy {
    justify-self: stretch;
    max-width: none;
  }
}

/* Download */

.download {
  display: grid;
  justify-items: center;
  margin-inline: var(--inset);
  padding: clamp(72px, 10vw, 128px) var(--gutter);
  border-radius: var(--panel-radius);
  background: var(--panel);
  text-align: center;
}

/* Below the privacy band, apart from it by the panels' own side inset. */
.night + .download {
  margin-top: var(--inset);
}

.download .mark {
  --size: clamp(96px, 11vw, 128px);

  box-shadow:
    inset 0 0 0 0.5px rgb(0 0 0 / 12%),
    0 24px 48px -20px rgb(64 91 255 / 55%);
}

.download .title {
  margin-top: 32px;
}

.download .lede {
  margin-top: 12px;
}

.download .app-store-badge {
  margin-top: 32px;
}

/* Footer */

.site-footer {
  padding-block: clamp(48px, 6vw, 72px) 40px;
  color: var(--ink-3);
  font-size: 15px;
}

.site-footer .brand {
  color: var(--ink);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 48px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: -10px -12px 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: block;
  padding: 10px 12px;
  color: var(--ink-2);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.footer-bottom p {
  margin: 0;
}

/* Document pages: privacy, support, not found */

.page-head {
  margin-inline: var(--inset);
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 72px);
  border-radius: var(--panel-radius);
  background: var(--panel);
}

.page-head .wrap,
.prose {
  max-width: calc(720px + var(--gutter) * 2);
}

.page-head h1 {
  font-size: clamp(44px, 6.4vw, 76px);
}

.page-head .lede {
  margin-top: 18px;
}

.page-meta {
  margin: 18px 0 0;
  color: var(--ink-3);
  font-size: 15px;
}

.prose {
  margin-inline: auto;
  padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(72px, 10vw, 128px);
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.65;
}

.prose h2 {
  margin: 2.4em 0 0.5em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.prose > :first-child {
  margin-top: 0;
}

.prose p,
.prose ul {
  margin: 0 0 1em;
}

.prose ul {
  padding-left: 1.2em;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose a:not(.button) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:not(.button):hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

.summary {
  margin-bottom: 1em;
  padding: clamp(22px, 3vw, 28px);
  border-radius: 20px;
  background: var(--panel);
  color: var(--ink);
}

.summary p {
  margin: 0;
}

.summary strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.015em;
}

/* Support */

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 24px;
  margin-bottom: 20px;
  padding: clamp(22px, 3vw, 28px);
  border-radius: 20px;
  background: var(--panel);
  color: var(--ink);
}

.contact p {
  margin: 0;
}

.contact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.015em;
}

.contact span {
  color: var(--ink-3);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.faq {
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 20px 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

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

.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  rotate: 45deg;
  translate: 0 -3px;
  transition:
    rotate 0.2s,
    translate 0.2s;
}

.faq details[open] summary::after {
  rotate: 225deg;
  translate: 0 2px;
}

.faq summary:hover {
  color: var(--accent);
}

.faq details > p {
  margin: -4px 0 22px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}