/* ============================================================
   Rejournal — marketing site
   Dark by default. Mirage for headings (Medium + Bold only —
   no italic cuts, so headings are never italic). Red Hat Display,
   the app's own typeface, for body and for the in-phone UI.
   ============================================================ */

@font-face {
  font-family: "Mirage";
  src: url("../assets/MirageMedium.otf") format("opentype");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Mirage";
  src: url("../assets/MirageBold.otf") format("opentype");
  font-weight: 600 800;
  font-display: swap;
}

/* One "point" of the app's layout, scaled to whatever width a phone
   mockup is drawn at (see .phone). Registered so it computes once,
   on the phone, and inherits as a plain length. */
@property --u {
  syntax: "<length>";
  inherits: true;
  initial-value: 0.8px;
}

:root {
  --bg: #0a0b0d;
  --bg-raise: #0f1115;
  --card: #15171c;
  --card-2: #1d2026;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --line-strong: rgba(255, 255, 255, 0.14);

  --fg: #f2efe9;
  --fg-soft: #a9acb4;
  --fg-mute: #777a82;

  --blue: #355fb2; /* brand — buttons */
  --blue-hover: #3f6dc9;
  --blue-deep: #2a4d94; /* the app's highlighter in dark mode */
  --accent: #7da0e8; /* readable blue on dark */
  --gold: #f5bf4c;

  /* the app's four-point scale, worst to best */
  --sat-1: #ce2c31;
  --sat-2: #dd633b;
  --sat-3: #b9c066;
  --sat-4: #5ec18e;

  /* the app's own dark surfaces, for the phone mockups */
  --app-bg: #000;
  --app-card: #202020;
  --app-line: #3a3a3a;
  --app-float: #3a3a3a;
  --app-fg: #fff;
  --app-fg-2: #bbb;
  --app-fg-3: #767676;

  --serif: "Mirage", "New York", Georgia, serif;
  --sans:
    "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --radius: 20px;
  --radius-lg: 28px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--fg-soft);
  font-family: var(--sans);
  font-size: 1.04rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--accent);
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
}

/* every icon on the page is a stroked glyph from the sprite */
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sprite {
  position: absolute;
}

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

::selection {
  background: rgba(53, 95, 178, 0.55);
  color: #fff;
}

/* ---------- type ---------- */

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.h2 {
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}
.h2--center {
  text-align: center;
}

.lead {
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 33em;
  text-wrap: pretty;
}
.lead--center {
  margin-inline: auto;
  text-align: center;
}

.kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.kicker--center {
  text-align: center;
}
.kicker .num {
  display: inline-block;
  margin-right: 0.6em;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

.stars {
  color: var(--gold);
  letter-spacing: 0.12em;
}

/* A sentence kept, the way the app marks one: a solid block of the
   deeper brand blue with white text. The headline wears the same mark. */
.mark {
  color: #fff;
  background: linear-gradient(var(--blue-deep), var(--blue-deep)) no-repeat 0
    58% / 100% 82%;
  padding: 0 0.14em;
  margin: 0 -0.14em;
  border-radius: 0.09em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.js .mark {
  animation: mark-sweep 0.9s 0.45s var(--ease) both;
}
@keyframes mark-sweep {
  from {
    background-size: 0% 82%;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: var(--blue);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.btn:hover {
  background: var(--blue-hover);
  transform: translateY(-1px);
}

.btn--sm {
  font-size: 0.88rem;
  padding: 0.55em 1.25em;
}
.btn--lg {
  font-size: 1.04rem;
  padding: 0.9em 1.65em;
  box-shadow: 0 10px 34px rgba(53, 95, 178, 0.35);
}
.btn--lg:hover {
  box-shadow: 0 14px 40px rgba(53, 95, 178, 0.45);
}

.apple-glyph {
  width: 1em;
  height: 1em;
  margin-top: -0.15em;
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem clamp(1.2rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.nav__icon {
  border-radius: 9px;
}
.nav__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.28rem;
  color: var(--fg);
}

.nav__links {
  display: flex;
  gap: 2rem;
}
.nav__links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--fg-soft);
  transition: color 0.2s ease;
}
.nav__links a:hover {
  color: var(--fg);
}

@media (max-width: 700px) {
  .nav__links {
    display: none;
  }
}

/* ---------- phone mockups ----------
   .phone is a size container, so everything drawn inside one is sized
   in --u: one point of a 390pt-wide iPhone screen plus its 10pt bezel.
   The same markup then works at any width, from the hero's side phones
   to the full demo. */

.phone {
  container-type: inline-size;
  width: 100%;
}
.phone__body {
  padding: calc(10 * var(--u));
  border-radius: calc(58 * var(--u));
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px #000,
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
@supports (width: 1cqw) {
  .phone__body {
    --u: calc(100cqw / 410);
  }
}
.phone__body > img {
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: calc(48 * var(--u));
}

.screen {
  position: relative;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  overflow: clip;
  border-radius: calc(48 * var(--u));
  background: var(--app-bg);
  color: var(--app-fg);
  font-family: var(--sans);
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.screen h3,
.screen h4,
.screen h5 {
  letter-spacing: 0;
  text-wrap: wrap;
}

.statusbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(52 * var(--u));
  padding: calc(8 * var(--u)) calc(30 * var(--u)) 0 calc(40 * var(--u));
  font-size: calc(16 * var(--u));
}
.statusbar b {
  font-weight: 700;
}
.statusbar svg {
  width: calc(70 * var(--u));
  height: calc(14 * var(--u));
}

/* A step of the summary flow. They sit on top of each other and fade
   over, as the app's do. */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(56 * var(--u)) calc(14 * var(--u)) 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.28s ease,
    visibility 0s 0.28s;
}
.scene.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease 0.16s;
}

.appbar {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(36 * var(--u));
  margin-bottom: calc(16 * var(--u));
}
.appbar__grow {
  flex: 1;
}

.progress {
  flex: 1;
  height: calc(5 * var(--u));
  border-radius: 99px;
  background: #242424;
  overflow: hidden;
}
.progress i {
  display: block;
  width: var(--p, 30%);
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 0.7s var(--ease);
}

.cbtn {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: 50%;
  background: var(--app-float);
  color: #eee;
  transition: transform 0.15s ease;
}
.cbtn svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  stroke-width: 2.4;
}
.cbtn--huge {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.5);
}
.cbtn--huge svg {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}
.cbtn--primary {
  background: var(--blue);
  color: #fff;
}

.pillbtn {
  display: inline-flex;
  align-items: center;
  height: calc(34 * var(--u));
  padding: 0 calc(17 * var(--u));
  border-radius: 99px;
  background: var(--blue);
  color: #fff;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  transition: transform 0.15s ease;
}

[data-act] {
  cursor: pointer;
}
[data-act]:active {
  transform: scale(0.94);
}

.overline {
  font-size: calc(13 * var(--u));
  font-weight: 700;
  color: var(--app-fg-2);
}
.apptitle {
  font-family: var(--serif);
  font-weight: 500;
  font-size: calc(30 * var(--u));
  line-height: 1.14;
  color: var(--app-fg);
  margin-top: calc(1 * var(--u));
}
.appinfo {
  margin-top: calc(4 * var(--u));
  font-size: calc(14.5 * var(--u));
  color: var(--app-fg-2);
}

/* ----- the deck: one card per topic ----- */

.deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(18 * var(--u));
}
.deck__stack {
  position: relative;
  width: calc(312 * var(--u));
  height: calc(387 * var(--u));
}

.tcard {
  position: absolute;
  inset: 0 0 calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  padding: calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--app-card);
  border: 1px solid #3d3d3d;
  transform-origin: 50% 100%;
  transition:
    transform 0.4s var(--ease),
    opacity 0.4s ease;
  will-change: transform;
}
/* each card back is a little smaller, and shows under the one on it */
.tcard[data-depth="0"] {
  z-index: 4;
  touch-action: pan-y;
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.45);
}
.tcard[data-depth="1"] {
  z-index: 3;
  transform: translateY(calc(8 * var(--u))) scale(0.95);
}
.tcard[data-depth="2"] {
  z-index: 2;
  opacity: 0.6;
  transform: translateY(calc(16 * var(--u))) scale(0.9);
}
.tcard[data-depth="3"] {
  z-index: 1;
  opacity: 0;
  transform: translateY(calc(24 * var(--u))) scale(0.85);
}
.tcard[data-depth="out"] {
  display: none;
}
[data-demo] .tcard[data-depth="0"] {
  cursor: grab;
}
.tcard.is-dragging {
  transition: none;
  cursor: grabbing;
}
/* the cards further back are blank until they're next */
.tcard[data-depth="2"] > *,
.tcard[data-depth="3"] > * {
  opacity: 0;
}
.deck__stack {
  transition: opacity 0.3s ease;
}
.tcard > * {
  transition: opacity 0.3s ease;
}

.tcard__top {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.cicon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(45 * var(--u));
  height: calc(45 * var(--u));
  border-radius: calc(9 * var(--u));
  background: #333;
  font-size: calc(22 * var(--u));
  line-height: 1;
  opacity: calc(1 - var(--deeper, 0));
}
.tcard h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: calc(19 * var(--u));
  line-height: 1.2;
  color: var(--app-fg);
}
.tcard small {
  display: block;
  font-size: calc(13 * var(--u));
  color: var(--app-fg-3);
}
.tcard__change {
  margin-top: calc(12 * var(--u));
  font-size: calc(13 * var(--u));
  color: var(--app-fg-3);
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: calc(2 * var(--u));
  height: calc(44 * var(--u));
  margin-top: calc(6 * var(--u));
}
.bars i {
  flex: 1;
  height: max(calc(var(--v) * 44 * var(--u)), calc(4 * var(--u)));
  border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0;
  background: var(--blue);
}
.bars i[style*=": 0;"],
.bars i[style$=": 0"] {
  opacity: 0.22;
}
.bars__labels {
  display: flex;
  justify-content: space-between;
  margin-top: calc(3 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 700;
  color: var(--app-fg-3);
}

/* whatever doesn't fit is cut off, under a fade */
.tcard__written {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: calc(12 * var(--u));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.tcard__written:has(+ .tcard__suggest) {
  -webkit-mask-image: none;
  mask-image: none;
}
.tcard__written h5 {
  font-family: var(--sans);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  color: var(--app-fg-2);
  margin-bottom: calc(2 * var(--u));
}
.tcard__written p {
  font-size: calc(15 * var(--u));
  line-height: 1.42;
  color: #e6e6e6;
}
.tcard__written p + h5 {
  margin-top: calc(10 * var(--u));
}
.tcard__suggest {
  margin-top: calc(8 * var(--u));
  font-size: calc(13 * var(--u));
  font-style: italic;
  text-align: center;
  color: var(--app-fg-3);
}

/* stamped on as a card is dragged: a check for going deeper, in place
   of the icon, and a cross for skipping */
.stamp {
  position: absolute;
  top: calc(12 * var(--u));
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(45 * var(--u));
  height: calc(45 * var(--u));
  border-radius: 50%;
  color: #fff;
  pointer-events: none;
}
.tcard > .stamp {
  transition: none;
}
.stamp svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  stroke-width: 2.6;
}
.stamp--deeper {
  left: calc(12 * var(--u));
  background: var(--blue);
  opacity: var(--deeper, 0);
}
.stamp--skip {
  right: calc(12 * var(--u));
  background: #666;
  opacity: var(--skip, 0);
}
.tcard:not([data-depth="0"]) > .stamp {
  opacity: 0;
}

.deck__buttons {
  display: flex;
  gap: calc(16 * var(--u));
  margin-top: calc(10 * var(--u));
}
.deck__status {
  margin-top: calc(13 * var(--u));
  font-size: calc(13 * var(--u));
  color: var(--app-fg-3);
}

/* ----- a topic: its entries, with every sentence tappable ----- */

.entries {
  flex: 1;
  min-height: 0;
  margin-top: calc(10 * var(--u));
  overflow: hidden;
  overflow: clip;
}

/* Rows that can close up: an entry with nothing kept from it, and the
   two versions of an entry's text (all of it, or just what's kept) */
.entry,
.fold {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows 0.55s var(--ease),
    opacity 0.35s ease;
}
.entry__in,
.fold > * {
  min-height: 0;
  overflow: hidden;
}
.entry__pad {
  padding: calc(12 * var(--u)) 0 calc(13 * var(--u));
  border-top: 1px solid #2c2c2c;
  transition: border-color 0.3s ease;
}
.entry.is-first .entry__pad {
  border-top-color: transparent;
}
.entry__date {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-bottom: calc(3 * var(--u));
  font-family: var(--serif);
  font-weight: 500;
  font-size: calc(18.5 * var(--u));
  color: var(--app-fg);
}
.entry__date svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  stroke-width: 3;
  color: #5c5c5c;
}
.entry p,
.entry li {
  font-size: calc(16.5 * var(--u));
  line-height: 1.58;
  color: var(--app-fg-2);
}

.s,
.sp {
  background: linear-gradient(var(--blue-deep), var(--blue-deep)) no-repeat 0 0 /
    0% 100%;
  transition:
    background-size 0.32s var(--ease),
    color 0.2s ease;
}
.s {
  padding: calc(1.5 * var(--u)) 0;
  border-radius: calc(3 * var(--u));
}
.s.is-kept,
.sp.is-kept {
  background-size: 100% 100%;
  color: #fff;
}
/* sentences kept one after another read as one mark */
.s.is-kept:has(+ .sp.is-kept) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.sp.is-kept + .s.is-kept {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.sp {
  padding: calc(1.5 * var(--u)) 0;
  transition-duration: 0.12s, 0.2s;
}
[data-demo] .s {
  cursor: pointer;
}

.entry__kept {
  grid-template-rows: 0fr;
  opacity: 0;
}
.entry__kept ul {
  list-style: none;
  display: grid;
  gap: calc(4 * var(--u));
}
.entry__kept li {
  position: relative;
  padding-left: calc(15 * var(--u));
  font-style: italic;
}
.entry__kept li::before {
  content: "•";
  position: absolute;
  left: calc(1 * var(--u));
  font-style: normal;
}

/* "Show only highlights": entries with nothing kept fade out, and the
   rest shrink to their kept sentences */
.is-narrow .entry:not(.has-kept) {
  grid-template-rows: 0fr;
  opacity: 0;
}
.is-narrow .entry__full {
  grid-template-rows: 0fr;
  opacity: 0;
}
.is-narrow .entry__kept {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 0s, 0.18s;
}

/* the page fades out into the summary's input */
.scene--topic::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: calc(120 * var(--u));
  background: linear-gradient(transparent, #000 62%);
  pointer-events: none;
  z-index: 2;
}

.drawer {
  position: absolute;
  left: calc(14 * var(--u));
  right: calc(14 * var(--u));
  bottom: calc(22 * var(--u));
  z-index: 3;
  height: calc(50 * var(--u));
  border-radius: calc(25 * var(--u));
  background: #1d1d1d;
  border: 1px solid #404040;
  box-shadow: 0 0 calc(18 * var(--u)) rgba(0, 0, 0, 0.7);
  transition: height 0.32s cubic-bezier(0.17, 0.59, 0.4, 0.77);
}
.drawer__text {
  height: 100%;
  padding: calc(12.5 * var(--u)) calc(18 * var(--u));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(16.5 * var(--u));
  line-height: 1.5;
  color: var(--app-fg);
}
.drawer__ph {
  color: #5d5d5d;
}
.drawer.has-draft .drawer__ph {
  display: none;
}
.drawer.has-kept:not(.is-writing) .drawer__text {
  padding-right: calc(150 * var(--u));
}
.drawer.is-writing {
  height: calc(140 * var(--u));
}
.drawer.is-writing .drawer__text {
  white-space: normal;
  line-height: 1.55;
  padding-top: calc(14 * var(--u));
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.18em;
  border-radius: 1px;
  background: var(--accent);
  animation: caret 1.1s steps(1) infinite;
}
.drawer .caret {
  display: none;
  width: calc(2 * var(--u));
}
.drawer.is-writing .caret {
  display: inline-block;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* how many sentences are kept, with the switch that narrows the page
   down to them. Beside the input, or above it while writing. */
.hltoggle {
  position: absolute;
  right: calc(7 * var(--u));
  bottom: calc(6.5 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  height: calc(35 * var(--u));
  padding: 0 calc(6 * var(--u)) 0 calc(12 * var(--u));
  border-radius: 99px;
  background: #3a3a3a;
  border: 1px solid transparent;
  color: var(--app-fg-2);
  font-size: calc(13 * var(--u));
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s var(--ease),
    bottom 0.32s cubic-bezier(0.17, 0.59, 0.4, 0.77),
    right 0.32s cubic-bezier(0.17, 0.59, 0.4, 0.77),
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.drawer.has-kept .hltoggle {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.drawer.has-kept .hltoggle[data-act]:active {
  transform: scale(0.95);
}
.drawer.is-writing .hltoggle {
  right: calc(-1 * var(--u));
  bottom: calc(100% + 5 * var(--u));
  background: var(--app-card);
  border-color: #404040;
  box-shadow: calc(1 * var(--u)) calc(3 * var(--u)) calc(8 * var(--u))
    rgba(0, 0, 0, 0.6);
}

.switch {
  position: relative;
  width: calc(38 * var(--u));
  height: calc(23 * var(--u));
  border-radius: 99px;
  background: #5a5a5a;
  transition: background 0.25s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: calc(2 * var(--u));
  left: calc(2 * var(--u));
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.35);
  transition: transform 0.25s var(--ease);
}
.is-narrow .switch {
  background: var(--blue);
}
.is-narrow .switch::after {
  transform: translateX(calc(15 * var(--u)));
}

/* a fingertip, for the taps the demo makes on its own */
.tapdot {
  position: absolute;
  z-index: 10;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  margin: calc(-20 * var(--u)) 0 0 calc(-20 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
}
.tapdot.is-on {
  animation: tap 0.55s ease-out;
}
@keyframes tap {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  35% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* ----- the daily reflection's tag step -----
   The day's paragraphs, plain while it's being written. On the tag
   step each one gets a card with its tags under it, and a tag that's
   added is hashtagged in the text itself. */

.heads {
  position: relative;
  /* its titles are absolutely placed, so without this it collapses
     when the cards run past the bottom of the screen */
  flex: none;
  height: calc(62 * var(--u));
}
.head {
  position: absolute;
  inset: 0;
  transition:
    opacity 0.3s ease,
    transform 0.45s var(--ease);
}
.head--tags {
  opacity: 0;
  transform: translateX(calc(14 * var(--u)));
}
.is-tagging .head--write {
  opacity: 0;
  transform: translateX(calc(-14 * var(--u)));
}
.is-tagging .head--tags {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}
.appinfo--dim {
  font-weight: 600;
  color: #7c7c7c;
}

.tparas {
  display: grid;
  gap: calc(6 * var(--u));
  margin: calc(4 * var(--u)) calc(-8 * var(--u)) 0;
}
.heads,
.tparas {
  transition: opacity 0.3s ease;
}
.is-resetting .heads,
.is-resetting .tparas {
  opacity: 0;
}
.tpara {
  padding: calc(9 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(10 * var(--u));
  background: transparent;
  transition: background 0.45s ease;
}
.is-tagging .tpara {
  background: var(--app-card);
}
.tpara p {
  font-size: calc(16.5 * var(--u));
  line-height: 1.58;
  color: var(--app-fg);
}
.tpara .fold {
  grid-template-rows: 0fr;
  opacity: 0;
}
.is-tagging .tpara .fold {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 0s, 0.2s;
}
.tpara .caret {
  display: none;
  width: calc(2 * var(--u));
}
.is-typing .tpara .caret {
  display: inline-block;
}

/* A word that's a tag, once the tag is added: it takes a # and the
   hashtag blue. Tags with no word of their own in the paragraph are
   written in at its end instead. */
.ht {
  transition: color 0.35s ease;
}
.ht::before {
  content: "#";
  font-size: 0;
  transition: font-size 0.3s var(--ease);
}
.ht.is-on {
  color: #5a88e6;
}
.ht.is-on::before {
  font-size: 1em;
}
.ht--end {
  font-size: 0;
  opacity: 0;
  transition:
    font-size 0.3s var(--ease),
    opacity 0.3s ease,
    color 0.35s ease;
}
.ht--end::before {
  content: none;
}
.ht--end.is-on {
  font-size: 1em;
  opacity: 1;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(6 * var(--u));
}
/* a suggestion: dashed, with a plus. Added, it's the solid white tag
   with its icon and a cross to take it off again. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  height: calc(27 * var(--u));
  margin-top: calc(7 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: 1px dashed #555;
  border-radius: 99px;
  background: transparent;
  color: #cfcfcf;
  font-family: var(--sans);
  font-size: calc(13 * var(--u));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.15s ease;
}
.chip:active {
  transform: scale(0.94);
}
.chip svg {
  flex: none;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  stroke-width: 3;
}
.chip__i {
  display: none;
  font-size: calc(12 * var(--u));
}
.chip__x {
  display: none;
  margin-left: calc(3 * var(--u));
}
.chip.is-on {
  border-style: solid;
  border-color: #fff;
  background: #fff;
  color: #000;
}
.chip.is-on .chip__plus {
  display: none;
}
.chip.is-on .chip__i {
  display: inline;
}
.chip.is-on .chip__x {
  display: block;
}
.chip--more {
  padding: 0 calc(2 * var(--u));
  border-color: transparent;
  color: #5a88e6;
  font-weight: 700;
  cursor: default;
}

/* ----- an entry, and a comment being added to it -----
   Comments read as a continuation of the post: the same text, straight
   on the page, with a line and a date between them. */

.post {
  position: relative;
  margin: calc(-2 * var(--u)) calc(-4 * var(--u)) 0;
  padding: 0 calc(8 * var(--u));
  border-radius: 0 calc(5 * var(--u)) calc(5 * var(--u)) 0;
  transition:
    background 0.35s ease,
    padding 0.35s var(--ease);
}
/* while a comment is written the post is set off as a quote */
.post__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-3 * var(--u));
  width: calc(3 * var(--u));
  border-radius: calc(5 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u))
    calc(5 * var(--u));
  background: #505050;
  opacity: 0;
  transform: translateX(calc(-8 * var(--u)));
  transition:
    opacity 0.3s ease,
    transform 0.35s var(--ease);
}
.is-composing .post {
  padding-block: calc(10 * var(--u));
  background: #181818;
}
.is-composing .post__bar {
  opacity: 1;
  transform: none;
}

.posttitle {
  font-family: var(--serif);
  font-weight: 500;
  font-size: calc(28 * var(--u));
  line-height: 1.16;
  color: var(--app-fg);
}
.postmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: calc(5 * var(--u)) 0 calc(6 * var(--u));
  font-size: calc(14.5 * var(--u));
  font-weight: 600;
  color: #6f6f6f;
}
.postmeta svg {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  color: #a8a8a8;
}
.posttext {
  font-size: calc(16.5 * var(--u));
  line-height: 1.58;
  color: var(--app-fg);
}
.posttext .tag {
  color: #5a88e6;
}

.comment {
  padding: 0 calc(4 * var(--u));
}
.comment .postmeta {
  margin-top: calc(11 * var(--u));
  margin-bottom: calc(2 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid #303030;
}
/* a comment joins the entry once it's saved */
.comment--new {
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(calc(12 * var(--u)));
  transition:
    grid-template-rows 0.45s var(--ease),
    opacity 0.45s ease,
    transform 0.45s var(--ease);
}
.comment--new.is-in {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(6 * var(--u));
  margin-top: calc(16 * var(--u));
}
.stat {
  padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--app-card);
}
.stat small {
  display: block;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  color: var(--app-fg);
}
.stat b {
  display: inline-block;
  font-size: calc(26 * var(--u));
  font-weight: 500;
  line-height: 1.15;
  color: #a6a6a6;
}
.stat b.is-bumped {
  animation: bump 0.6s var(--ease);
}
@keyframes bump {
  30% {
    color: #fff;
    transform: scale(1.18);
  }
}

.addcomment {
  position: absolute;
  left: 50%;
  bottom: calc(30 * var(--u));
  z-index: 3;
  display: flex;
  align-items: center;
  height: calc(46 * var(--u));
  padding: 0 calc(30 * var(--u));
  border-radius: 99px;
  background: #262626;
  border: 1px solid #3a3a3a;
  box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  transition:
    opacity 0.25s ease,
    transform 0.35s var(--ease);
}
.is-composing .addcomment {
  opacity: 0;
  transform: translate(-50%, calc(14 * var(--u)));
}

/* the comment's input, which comes up from the bottom of the screen */
.cdrawer {
  position: absolute;
  left: calc(8 * var(--u));
  right: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  z-index: 4;
  min-height: calc(150 * var(--u));
  padding: calc(13 * var(--u)) calc(16 * var(--u));
  border-radius: calc(25 * var(--u)) calc(25 * var(--u)) calc(40 * var(--u))
    calc(40 * var(--u));
  background: #1d1d1d;
  border: 1px solid #404040;
  box-shadow: 0 0 calc(24 * var(--u)) rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translateY(110%);
  transition:
    opacity 0.25s ease,
    transform 0.4s var(--ease);
}
.is-composing .cdrawer {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
.cdrawer__text {
  font-size: calc(16.5 * var(--u));
  line-height: 1.58;
  color: var(--app-fg);
}
.cdrawer__text .tag {
  color: #5a88e6;
}
.cdrawer__ph {
  color: #5d5d5d;
}
.cdrawer.has-draft .cdrawer__ph {
  display: none;
}
.cdrawer .caret {
  width: calc(2 * var(--u));
}
.cdrawer__btn {
  position: absolute;
  right: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
}
.cdrawer__btn .is-check,
.cdrawer.has-draft .cdrawer__btn .is-x {
  display: none;
}
.cdrawer.has-draft .cdrawer__btn .is-check {
  display: block;
}

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

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  /* full-bleed section so the bottom rule spans the page; inner
     padding recreates the centered 1160px column */
  padding: clamp(3rem, 6vw, 5rem)
    max(clamp(1.2rem, 4vw, 3rem), calc((100% - 1160px) / 2)) 0;
  /* clip, not hidden: nothing here should be scrollable to (see body) */
  overflow: hidden;
  overflow: clip;
  background: #000;
  border-bottom: 1px solid var(--line);
}
/* a glow behind the phones, in the brand blue */
.hero::before {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -45%;
  width: 75%;
  aspect-ratio: 1;
  background: radial-gradient(
    closest-side,
    rgba(53, 95, 178, 0.34),
    rgba(53, 95, 178, 0.08) 60%,
    transparent
  );
  pointer-events: none;
}
.hero > * {
  position: relative;
}

.hero__copy {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hero__title {
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.08;
  margin-bottom: 1.5rem;
  text-wrap: wrap;
}

.hero__sub {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  max-width: 28em;
  margin-bottom: 2.3rem;
  text-wrap: pretty;
}

.hero__note {
  font-size: 0.88rem;
  color: var(--fg-mute);
  margin-top: 1.1rem;
}

/* The phones stand in a line, front to back: each one a size down
   from the one before it and tucked in behind it */
.herostack {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 640px;
  margin-inline: auto;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  pointer-events: none;
}

.phone--1 {
  width: 50%;
  z-index: 3;
}
.phone--1 .phone__body {
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.75),
    0 0 0 1px #000,
    0 0 140px rgba(53, 95, 178, 0.22);
}
.phone--2 {
  width: 42%;
  margin-left: -17%;
  z-index: 2;
}
.phone--2 .phone__body {
  filter: brightness(0.74);
}
.phone--3 {
  width: 35%;
  margin-left: -10%;
  z-index: 1;
}
.phone--3 .phone__body {
  filter: brightness(0.52);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero::before {
    right: -20%;
    width: 140%;
    bottom: -30%;
  }
  .hero__copy {
    padding-bottom: 1.5rem;
  }
  .hero__title {
    text-wrap: balance;
  }
  .hero__br {
    display: none;
  }
  .hero__sub {
    margin-inline: auto;
  }
  /* on a phone the line runs off the edge, so the front one stays
     big enough to read */
  .herostack {
    width: 116%;
    max-width: 600px;
    margin-inline: 0 auto;
    justify-content: flex-start;
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .herostack {
    width: 100%;
    margin-inline: auto;
    justify-content: center;
  }
}

/* ---------- loop statement ---------- */

.loop {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7.5rem) 1.5rem clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.loop__title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

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

.feature {
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.2rem, 4vw, 3rem);
}
.feature--alt {
  background: var(--bg-raise);
  border-block: 1px solid var(--line-soft);
}

.feature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.feature__grid--flip .feature__copy {
  order: 2;
}
.feature__grid--flip .feature__visual {
  order: 1;
}

@media (max-width: 860px) {
  .feature__grid {
    grid-template-columns: 1fr;
  }
  .feature__grid--flip .feature__copy {
    order: 1;
  }
  .feature__grid--flip .feature__visual {
    order: 2;
  }
  .feature__copy,
  .feature__visual {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
}

.phone--shot {
  width: min(320px, 82vw);
  margin-inline: auto;
}

/* Write and Expand show the top two-thirds of the screen. The phone is
   cut flat and stands on the section's bottom edge, so it reads as
   rising out of it (the reveal lifts it up through that edge). What the
   app pins to the bottom of the screen, Add comment and its input,
   stays pinned to the cut. */
.feature--crop {
  padding-bottom: 0;
  overflow: hidden;
  overflow: clip;
}
.feature--crop .feature__visual {
  align-self: end;
}
.feature--crop .phone__body {
  padding-bottom: 0;
  border-bottom: 0;
  border-radius: calc(58 * var(--u)) calc(58 * var(--u)) 0 0;
}
.feature--crop .screen {
  aspect-ratio: 390 / 563;
  border-radius: calc(48 * var(--u)) calc(48 * var(--u)) 0 0;
}
.feature--crop .cdrawer {
  bottom: calc(12 * var(--u));
  min-height: calc(100 * var(--u));
  border-radius: calc(25 * var(--u));
}

/* ---------- 01 editor mockup ---------- */

.editor {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.editor__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.editor__day {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--fg);
  font-size: 1.4rem;
}
.editor__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fg-mute);
  white-space: nowrap;
}
.editor__loc svg {
  width: 1em;
  height: 1em;
}
@media (max-width: 480px) {
  .editor {
    padding: 1.25rem 1.2rem 1.1rem;
    border-radius: 22px;
  }
  .editor__day {
    font-size: 1.18rem;
  }
}

.editor__para {
  padding: 0.95rem 0;
  border-top: 1px solid var(--line-soft);
}
.editor__para:last-child {
  padding-bottom: 0.2rem;
}
.editor__para p {
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--fg-soft);
  margin-bottom: 0.6rem;
}
.editor__para--active p {
  color: var(--fg);
}

.topicchip {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(53, 95, 178, 0.18);
  border-radius: 999px;
  padding: 0.28em 0.9em;
}
.topicchip--suggest {
  background: var(--blue);
  color: #fff;
}
.topicchip--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: var(--fg-mute);
}

.suggestrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.suggestrow small {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}
/* the suggestion arrives a beat after the paragraph it's for */
.js .reveal .topicchip--suggest {
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.4s ease 0.9s,
    transform 0.5s cubic-bezier(0.34, 1.5, 0.64, 1) 0.9s;
}
.js .reveal.is-in .topicchip--suggest {
  opacity: 1;
  transform: none;
}

/* ---------- 03 summarize: the live demo ---------- */

.summarize {
  position: relative;
  padding: clamp(4rem, 8vw, 7.5rem) clamp(1.2rem, 4vw, 3rem);
  background: #000;
  overflow: hidden;
  overflow: clip;
}
.summarize::before {
  content: "";
  position: absolute;
  top: 50%;
  right: max(-12%, calc((100% - 1700px) / 2));
  width: min(900px, 90%);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(
    closest-side,
    rgba(53, 95, 178, 0.3),
    rgba(53, 95, 178, 0.07) 62%,
    transparent
  );
  pointer-events: none;
}

.summarize__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.steps {
  list-style: none;
  display: grid;
  gap: 0.3rem;
  margin: 2.2rem 0 0 -1rem;
  max-width: 34rem;
}
.step {
  display: flex;
  gap: 1rem;
  width: 100%;
  padding: 0.95rem 1rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  transition:
    background 0.35s ease,
    border-color 0.35s ease;
}
.step:hover {
  background: rgba(255, 255, 255, 0.035);
}
.step.is-active {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--line);
}
.step__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--fg-mute);
  font-size: 0.85rem;
  font-weight: 700;
  transition:
    background 0.35s ease,
    color 0.35s ease;
}
.step.is-active .step__n {
  background: var(--blue);
  color: #fff;
}
.step__title {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.25;
  color: var(--fg-mute);
  transition: color 0.35s ease;
}
.step__short {
  display: none;
}
.step__text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5d6067;
  transition: color 0.35s ease;
}
.step.is-active .step__title {
  color: var(--fg);
}
.step.is-active .step__text {
  color: var(--fg-soft);
}

.demo {
  width: clamp(290px, 28vw, 340px);
  justify-self: center;
}
.demo__caption {
  display: none;
}
.demo__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
  font-size: 0.82rem;
  color: var(--fg-mute);
}
.demo__play {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.42em 0.95em 0.42em 0.75em;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-soft);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.demo__play:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--fg);
}
.demo__play svg {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 2.6;
}

@media (max-width: 860px) {
  .summarize__grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .summarize__copy,
  .demo {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
  .summarize::before {
    top: auto;
    bottom: -8%;
    right: -30%;
    width: 160%;
    transform: none;
  }

  /* the steps shrink to a row of pills, and the one that's showing is
     spelled out above the phone instead */
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    max-width: none;
    margin: 1.8rem 0 0;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
  }
  .step {
    justify-content: center;
    padding: 0.5rem 0.2rem;
    border: 0;
    border-radius: 999px;
  }
  .step.is-active {
    background: var(--blue);
  }
  .step__n {
    display: none;
  }
  .step__title {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--fg-soft);
  }
  .step.is-active .step__title {
    color: #fff;
  }
  .step__long,
  .step__text {
    display: none;
  }
  .step__short {
    display: inline;
  }

  .demo__caption {
    display: block;
    min-height: 5.6em;
    margin-bottom: 1.2rem;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--fg-soft);
  }
  .demo__caption b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--fg);
    margin-bottom: 0.15rem;
  }
  .demo .phone {
    width: min(330px, 86%);
    margin-inline: auto;
  }
}

/* ---------- ladder / compression funnel ---------- */

.ladder {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) 1.5rem;
  text-align: center;
}
.ladder .lead {
  margin-bottom: 3.2rem;
}

.funnel {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.funnel__row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 1.2rem;
  align-items: center;
}
/* each level settles in after the one it's made from */
.js .funnel .funnel__row {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.6s ease,
    transform 0.6s var(--ease);
}
.js .funnel.is-in .funnel__row {
  opacity: 1;
  transform: none;
}
.funnel__row:nth-child(2) {
  transition-delay: 0.22s;
}
.funnel__row:nth-child(3) {
  transition-delay: 0.44s;
}
.funnel__row:nth-child(4) {
  transition-delay: 0.66s;
}
.funnel__row:nth-child(5) {
  transition-delay: 0.9s;
}

.funnel__label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  text-align: right;
  white-space: nowrap;
}
.funnel__label b {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0;
  color: var(--fg);
  line-height: 1.1;
}

.funnel__cells {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  margin-inline: auto;
}

/* each level narrower than the last — the funnel silhouette */
.funnel__row--days .funnel__cells {
  width: 100%;
  gap: 3px;
  display: grid;
  grid-template-columns: repeat(62, 1fr);
  justify-items: center;
}
.funnel__row--days .f-day {
  width: 100%;
  max-width: 6px;
  height: auto;
  aspect-ratio: 1;
}
.funnel__row--weeks .funnel__cells {
  width: 84%;
  gap: 4px;
  display: grid;
  grid-template-columns: repeat(26, 1fr);
}
.funnel__row--weeks .f-week {
  width: auto;
}
.funnel__row--months .funnel__cells {
  width: 66%;
  gap: 5px;
  flex-wrap: nowrap;
}
.funnel__row--quarters .funnel__cells {
  width: 48%;
  gap: 6px;
  flex-wrap: nowrap;
}

/* days: the raw, colourful noise of a life being written down */
.f-day {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.9;
}
.f-day--red {
  background: var(--sat-1);
}
.f-day--orange {
  background: var(--sat-2);
}
.f-day--yellow {
  background: var(--sat-3);
}
.f-day--green {
  background: var(--sat-4);
}

/* each step up is calmer and more deliberate, and a little more of it
   is the blue of what was kept */
.f-week {
  aspect-ratio: 1;
  border-radius: 3px;
  background: #1f283b;
  border: 1px solid rgba(125, 160, 232, 0.2);
}
.f-month {
  flex: 1;
  height: 26px;
  border-radius: 8px;
  background: #1e2a44;
  border: 1px solid rgba(125, 160, 232, 0.2);
}
.f-quarter {
  flex: 1;
  height: 34px;
  border-radius: 10px;
  background: #24386a;
  border: 1px solid rgba(125, 160, 232, 0.26);
}

.funnel__year {
  width: min(38%, 100%);
  min-width: 210px;
  margin-inline: auto;
  background: var(--blue);
  color: #fff;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  text-align: center;
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 12px 40px rgba(53, 95, 178, 0.4);
}

@media (max-width: 560px) {
  .funnel__row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .funnel__row--days .funnel__cells {
    grid-template-columns: repeat(37, 1fr);
  }
  .funnel__label {
    text-align: left;
  }
  .funnel__label b {
    display: inline;
    font-size: 1.05rem;
    margin-right: 0.35em;
  }
  .funnel__row--weeks .funnel__cells,
  .funnel__row--months .funnel__cells,
  .funnel__row--quarters .funnel__cells {
    margin-inline: 0;
  }
  .funnel__year {
    margin-inline: 0;
  }
}

.ladder__cap {
  margin-top: 2.6rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--fg-soft);
}

/* ---------- 04 track: screenshot + a check-in to tap ---------- */

.trackstack {
  position: relative;
  width: min(320px, 82vw);
  margin-inline: auto;
}
.trackstack .phone--shot {
  width: 100%;
}

.logcard {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 8%;
  padding: 0.85rem 0.9rem 0.9rem;
  border-radius: 18px;
  background: rgba(24, 24, 24, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  color: #fff;
}
.logcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.55rem;
  font-family: var(--serif);
  font-size: 1.15rem;
}
.logcard__head small {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--app-fg-3);
}
.logrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.42rem 0;
}
.logrow + .logrow {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.logrow__name {
  font-size: 0.9rem;
  font-weight: 700;
}
/* The choices for one tracking. Once one is picked the others fade and
   close up, and it shrinks to a pill at the end of the row in its
   colour, as in the app. Tapping it again brings them all back. */
.logrow__opts {
  display: flex;
  justify-content: flex-end;
  width: 11.2rem;
}
.logrow__opts button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  height: 1.9rem;
  margin-left: 0.35rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #343434;
  color: #9a9a9a;
  cursor: pointer;
  transition:
    flex-grow 0.34s var(--ease),
    flex-basis 0.34s var(--ease),
    margin 0.34s var(--ease),
    opacity 0.2s ease,
    background 0.3s ease,
    color 0.3s ease,
    transform 0.15s ease;
}
.logrow__opts button:first-child {
  margin-left: 0;
}
.logrow__opts button[data-v="2"],
.logrow__opts button[data-v="3"] {
  flex-grow: 0.7;
}
.logrow__opts button:nth-child(2) {
  transition-delay: 0s, 0s, 0s, 0.03s, 0s, 0s, 0s;
}
.logrow__opts button:nth-child(3) {
  transition-delay: 0s, 0s, 0s, 0.06s, 0s, 0s, 0s;
}
.logrow__opts button:nth-child(4) {
  transition-delay: 0s, 0s, 0s, 0.09s, 0s, 0s, 0s;
}
.logrow__opts button:hover {
  background: #404040;
  color: #ddd;
}
.logrow__opts button:active {
  transform: scale(0.92);
}
.logrow__opts svg {
  flex: none;
  width: 0.82rem;
  height: 0.82rem;
  stroke-width: 2.4;
}
.logrow__opts svg.down {
  transform: rotate(180deg);
}

.logrow__opts[data-value] button {
  flex: 0 0 0;
  margin-left: 0;
  opacity: 0;
  pointer-events: none;
}
.logrow__opts[data-value] button[aria-pressed="true"] {
  flex-basis: 3.1rem;
  opacity: 1;
  pointer-events: auto;
  color: #fff;
}
.logrow__opts button[aria-pressed="true"][data-v="1"] {
  background: var(--sat-1);
}
.logrow__opts button[aria-pressed="true"][data-v="2"] {
  background: var(--sat-2);
}
.logrow__opts button[aria-pressed="true"][data-v="3"] {
  background: var(--sat-3);
}
.logrow__opts button[aria-pressed="true"][data-v="4"] {
  background: var(--sat-4);
}
.logrow__opts button[aria-pressed="true"][data-v="yes"] {
  background: var(--blue);
}
.logrow__opts button[aria-pressed="true"][data-v="no"] {
  background: #4a4a4a;
}

@media (max-width: 560px) {
  .logcard {
    bottom: 6%;
  }
}

/* ---------- more grid ---------- */

.more {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 4vw, 3rem);
}
.more .h2--center {
  margin-bottom: 2.8rem;
}

.more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 860px) {
  .more__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .more__grid {
    grid-template-columns: 1fr;
  }
}

.morecard {
  background: linear-gradient(180deg, var(--card), #111317);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.morecard__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(53, 95, 178, 0.2);
  color: var(--accent);
  margin-bottom: 1rem;
}
.morecard__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}
.morecard h3 {
  font-size: 1.22rem;
  margin-bottom: 0.35rem;
}
.morecard p {
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ---------- reviews ---------- */

.reviews {
  background: var(--bg-raise);
  border-block: 1px solid var(--line-soft);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.2rem, 4vw, 3rem);
}
.reviews__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 2.4rem;
}
.reviews__num {
  font-family: var(--serif);
  font-size: clamp(3rem, 5.4vw, 4.4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--fg);
}
.stars--lg {
  font-size: 1.15rem;
}
.reviews__sub {
  font-size: 0.84rem;
  color: var(--fg-mute);
}

.reviews__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .reviews__row {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

.quote {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.quote p {
  flex: 1;
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.45;
  color: var(--fg);
  margin-bottom: 1rem;
}
.quote cite {
  font-size: 0.8rem;
  color: var(--fg-mute);
  font-style: normal;
}

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

.cta {
  position: relative;
  text-align: center;
  padding: clamp(4.5rem, 10vw, 9rem) 1.5rem;
  overflow: hidden;
  overflow: clip;
}
.cta::before {
  content: "";
  position: absolute;
  inset: auto 0 -40%;
  height: 120%;
  background: radial-gradient(
    ellipse 60% 55% at 50% 100%,
    rgba(53, 95, 178, 0.36),
    transparent 70%
  );
  pointer-events: none;
}
.cta > * {
  position: relative;
}

.cta__icon {
  margin: 0 auto 1.7rem;
  border-radius: 22px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--line);
}

.cta__title {
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  line-height: 1.08;
  margin-bottom: 2.1rem;
}
.cta__privacy {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--fg-mute);
}

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

.footer {
  border-top: 1px solid var(--line-soft);
  padding: 3rem clamp(1.2rem, 4vw, 3rem) 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto 2.5rem;
}
@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer__brand img {
  border-radius: 8px;
}
.footer__brand span {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--fg);
}

.footer__col h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  margin-bottom: 0.8rem;
}
.footer__col a {
  display: block;
  font-size: 0.93rem;
  color: var(--fg-soft);
  padding: 0.22rem 0;
  transition: color 0.2s ease;
}
.footer__col a:hover {
  color: var(--fg);
}

.footer__legal {
  max-width: 1080px;
  margin: 0 auto;
  font-size: 0.8rem;
  color: var(--fg-mute);
}

/* ---------- reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s var(--ease);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal,
  .js .funnel .funnel__row,
  .js .reveal .topicchip--suggest {
    opacity: 1;
    transform: none;
  }
  .demo__play,
  .demo__hint {
    display: none;
  }
}