/* OROS — sales site.

   Layout, spacing and type scale follow superfocus.me: white ground, one very
   dark ink, pill buttons, big tight-tracked headings, alternating feature rows
   with a square product panel beside each one.

   The typefaces are the app's own, not Superfocus's: Cal Sans carries the
   headings and Inter — the Coss interface font — does everything else, so the
   site and the product read as one thing. */

:root {
  /* ---------------------------------------------- ink and ground */
  --ink: #101010;
  --ink-2: #3a3a3e;
  --muted: #616165;
  --bg: #f6f6ea;
  --surface: #eaeade;
  --surface-2: #dedecf;
  --border: #dadace;
  --border-strong: #bfbfb3;
  --border-soft: rgba(0, 0, 0, .07);
  --action: #101010;
  --action-hover: #2b2b2e;

  /* The app's own goal palette, used in the product panels so a color on the
     site is the same color in the product. */
  --g-ink: #2f6fed;
  --g-moss: #1f8a5f;
  --g-clay: #c2571a;
  --g-plum: #8b3fa8;
  --g-teal: #0f7d8c;
  --g-rose: #c23b63;
  --g-slate: #4a5a6a;

  /* ---------------------------------------------- type */
  --font: "Inter", ui-sans-serif, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Cal Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  /* The face the logo's wordmark is drawn in. It has capitals only, so it is
     used on the one headline and nowhere that needs lowercase. */
  --font-logo: "Wild Pines Park", var(--font-heading);

  /* ---------------------------------------------- shape */
  --r-card: 28px;
  --r-panel: 24px;
  --r-inner: 14px;
  --shadow-panel: 0 1px 2px rgba(45, 42, 38, .06), 0 30px 60px -28px rgba(45, 42, 38, .30);
  --nav-h: 76px;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

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

/* The logo's wordmark face, sitting beside this file so the page stays
   self-contained. If it is missing, the heading stack falls back and the
   hero simply reads in Cal Sans. */
@font-face {
  font-family: "Wild Pines Park";
  src: url("fonts/WildPinesPark-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

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

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

/* Cal Sans ships in one weight; asking for 600 gets it synthesized and muddy
   at display size, so the headings ask for its own weight and get their
   presence from size and tracking instead. */
@supports (font-variation-settings: normal) {
  h1, h2, h3 { font-weight: 400; }
}

/* The hero headline, set in the logo's own face. That face is capitals only,
   so this is the one heading that is uppercase — and caps want the tracking
   opened back up rather than pulled tight the way the lowercase headings
   below are. */
.display-xl {
  font-family: var(--font-logo);
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.04;
  letter-spacing: .005em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Caps in this face run about a third wider than the lowercase they replaced,
   so the shared measure leaves "around" stranded on a line of its own. The
   width is set in em rather than pixels so it keeps pace with the clamped
   font size instead of needing a breakpoint of its own. */
.display-xl.measure { max-width: 16.5em; }

.display-lg {
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.heading-md {
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.body-md {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.body-lg {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- layout */

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow { max-width: 880px; }

.section { padding: 96px 0; }
.section-tight { padding: 72px 0; }

@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .section-tight { padding: 48px 0; }
}

.center { text-align: center; }
.stack-sm > * + * { margin-top: 16px; }
.measure { max-width: 680px; margin-inline: auto; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}

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

/* The waitlist button is the yellow from the palette. It is a light color, so
   the label goes dark rather than white — white on this yellow is unreadable. */
.btn-primary {
  background: #f7e369;
  color: var(--ink);
}
.btn-primary:hover { background: #efd744; }

/* The four things the product is built on. This section replaced five blocks
   of feature description, so it is deliberately plain: no panels, no
   screenshots, one number and one claim each, and a lot of room between
   them. The simplicity is the point. */

.beliefs {
  max-width: 780px;
  margin: 72px auto 0;
  display: grid;
  gap: 64px;
}
@media (max-width: 760px) { .beliefs { margin-top: 48px; gap: 44px; } }

.belief-n {
  font-family: var(--font-logo);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.belief h3 { margin-bottom: 16px; }
.belief .body-lg { max-width: 62ch; }

/* ------------------------------------------------- bolder product panels

   The four panels beside the benefits are standing in for product
   screenshots, so they have to read at a glance from across the page. That
   means bigger type than the app really uses, fewer rows, more color, and one
   obvious thing per panel — not a faithful copy of a dense UI. */

.panel-bold .panel-body { padding: 20px; gap: 0; }
.panel-bold .pane-h {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

/* A week, seven columns, blocks sitting where the hours are. Reads as a
   calendar from ten feet away, which the meters it replaced did not. */
.wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wk-day {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
}
.wk-track {
  position: relative;
  height: 190px;
  border-radius: 8px;
  background: var(--surface);
}
.wk-track i {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 5px;
  background: var(--b, var(--g-ink));
}
.wk-col.is-kept .wk-track { background: #fff; box-shadow: inset 0 0 0 2px var(--g-clay); }
.wk-col.is-kept .wk-day { color: var(--g-clay); }

/* One day, blown up, so a single protected block is unmissable. */
.bigday { display: grid; gap: 8px; }
.bigday .b {
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  background: var(--b, var(--g-ink));
  display: flex;
  align-items: center;
  gap: 13px;
}

/* The place on the list. A ranking needs its numbers to line up in a column
   and to sit behind the thing they are numbering, so they are a fixed width,
   tabular, and held back to about half strength. */
.bigday .rank {
  flex: none;
  width: 22px;
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  opacity: .5;
}

/* A hairline between the number and what it is ranking. */
.bigday .b::after {
  content: none;
}

/* The little picture on a row. Emoji rather than an icon set, because these
   are the things in someone's actual life and an emoji reads as a person's
   shorthand rather than a product's iconography. Hidden from screen readers,
   since the words next to it already say what it is. */
.bigday .ic {
  flex: none;
  font-size: 26px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.bigday .b b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.bigday .b small { font-size: 13px; opacity: .85; }
.bigday .b.is-quiet {
  background: var(--surface);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.bigday .b.is-quiet b { color: var(--ink-2); }

/* A goal with its hours, at a size you can read across the room. */
.goal-big { display: grid; gap: 6px; margin-bottom: 18px; }
.goal-big .t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.goal-big .t b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.goal-big .t span { font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-big .bar { height: 10px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.goal-big .bar i { display: block; height: 100%; border-radius: 999px; background: var(--b, var(--g-moss)); }

/* The one big state a panel is about. */
.verdict { text-align: center; padding: 8px 0 4px; }
.verdict .n {
  font-family: var(--font-heading);
  font-size: 68px;
  line-height: 1;
  letter-spacing: -.04em;
}
.verdict .l { font-size: 14px; color: var(--muted); margin-top: 6px; }

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface); }

.btn-sm { height: 40px; padding: 0 20px; }

/* A finger needs about forty-four pixels to hit reliably, so the small button
   in the header grows to that on a touch screen. */
@media (max-width: 620px) {
  .btn-sm { height: 44px; }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.textlink {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}
.textlink:hover { border-color: var(--ink); }

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

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246, 246, 234, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}

.nav.is-stuck { border-bottom-color: var(--border); }

/* Three columns, with the outer two sharing the leftover space equally, so
   the links sit on the true center of the bar. Flexbox with auto margins
   could not: it centers the links in whatever is left between the logo and
   the button, and those are different widths, so the links came out 148px
   to the left. */
.nav-inner {
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.02em;
}

/* The logo is now an image rather than a drawn mark, so it is sized by
   height and lets its own width follow. */
.brand-logo {
  width: auto;
  height: 30px;
  flex: none;
}

.nav-links {
  display: flex;
  gap: 28px;
  justify-self: center;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color .16s ease;
}
.nav-links a:hover { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
}

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

.hero { padding: 96px 0 0; }

@media (max-width: 760px) { .hero { padding-top: 56px; } }

.hero h1 { margin-bottom: 28px; }

/* The hand-drawn underline under the last words, as on the reference site. */
.underlined { position: relative; white-space: nowrap; }

/* The squiggle is drawn across one unbroken line, so the phrase is held on
   one line to match. In the logo's capitals that phrase is far too wide for a
   phone, so below this width it is allowed to wrap and the squiggle steps
   aside rather than underlining half a sentence. */
@media (max-width: 760px) {
  .underlined { white-space: normal; }
  .underlined svg { display: none; }
}
.underlined svg {
  position: absolute;
  left: 0;
  bottom: -.22em;
  width: 100%;
  height: .3em;
  overflow: visible;
  color: var(--g-teal);
}

.underlined path {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 1.1s .35s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.hero-actions { margin-top: 36px; }

.hero-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

.hero-shot {
  margin-top: 64px;
  position: relative;
}

/* Cropped at the bottom the way the reference hero is, so the panel reads as
   a window onto something bigger rather than a floating picture. */
.hero-shot .panel {
  max-height: 520px;
  overflow: hidden;
}

.hero-shot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
  pointer-events: none;
}

/* ---------------------------------------------------------------- features */

.feature-list {
  margin-top: 88px;
  display: grid;
  gap: 96px;
}

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.feature .feature-copy { max-width: 560px; }
.feature h3 { margin-top: 18px; }
.feature .body-md { margin-top: 20px; }
.feature .btn { margin-top: 28px; }

.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--ink);
}

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

/* A hand-drawn note beside each benefit, in place of a boxed icon.

   These are FILLED outlines, not stroked lines, which is the whole trick. A
   stroked path has one width along its entire length and reads as something a
   computer drew. A filled outline can be fat in the middle of a stroke and
   thin where the pen lifts, which is what a real pen does. Every doodle below
   is therefore a closed shape with two edges that do not stay parallel. */
.doodle {
  color: var(--g-teal);
  margin-bottom: 22px;
  height: 52px;
}
.doodle svg { width: auto; height: 52px; overflow: visible; }
.doodle path { fill: currentColor; stroke: none; }

/* Handwriting, for notes in the margin. Naturalist is the app's own hand, so
   an annotation on a screenshot looks like the same person wrote it. */
@font-face {
  font-family: "Naturalist";
  src: url("fonts/Naturalist-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

.hand {
  font-family: "Naturalist", var(--font);
  color: var(--g-teal);
  font-size: 19px;
  line-height: 1.3;
}

/* A note pinned beside a panel, with a small drawn arrow pointing at it. */
.note-pin {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 190px;
  pointer-events: none;
}
.note-pin svg { flex: none; width: 34px; height: 30px; color: var(--g-teal); }
.note-pin svg path { fill: currentColor; stroke: none; }

.feature-media { position: relative; }

@media (max-width: 900px) { .note-pin { display: none; } }

.feature.reverse .feature-media { order: -1; }

@media (max-width: 900px) {
  .feature-list { margin-top: 56px; gap: 64px; }
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature.reverse .feature-media { order: 0; }
}

/* ---------------------------------------------------------------- the panels
   Every product picture on this page is real markup styled with the app's own
   design system, not a screenshot — so it stays sharp and stays true when the
   app changes. */

.panel {
  border-radius: var(--r-panel);
  border: 1px solid var(--border-strong);
  background: #fff;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  font-size: 13.5px;
  color: var(--ink-2);
}

.panel-square { aspect-ratio: 1 / 1; }

.panel-bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-soft);
  background: #fcfcfd;
}

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); flex: none; }

.panel-title {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .01em;
}

.panel-body { padding: 16px; }

/* A square panel is a fixed box, so its contents are laid out to fill it
   rather than left to land wherever they happen to end. */
.panel-square { display: flex; flex-direction: column; }
.panel-square .panel-bar { flex: none; }
.panel-square .panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.panel-square .panel-body > * { margin-top: 0; }

/* Narrower than this, a square would have to be about 340px on a side, and the
   contents no longer fit inside it. Holding the shape would mean quietly
   clipping the bottom off, so the panel gives up being square instead and
   grows as tall as it needs to be. */
@media (max-width: 620px) {
  .panel-square { aspect-ratio: auto; }
  .panel-square .panel-body { justify-content: flex-start; }
}

/* three-pane day */

.panes {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  height: 100%;
}

.pane { padding: 16px; border-right: 1px solid var(--border-soft); background: #fff; }
.pane:last-child { border-right: 0; background: #fcfcfd; }

/* On a phone three panes side by side is three unreadable columns. The hours
   that never move are the whole point of the picture, so that pane goes first,
   the day follows it, and the week's readouts drop out; the crop at the bottom
   of the hero does the rest. */
@media (max-width: 820px) {
  .panes { grid-template-columns: 1fr; }
  .pane { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .panes > .pane:nth-child(1) { order: 1; }
  .panes > .pane:nth-child(2) { order: 2; }
  .panes > .pane:nth-child(3) { display: none; }
}

.pane-h {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.goal-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: #fff;
  margin-bottom: 8px;
}

.goal-row.is-key { box-shadow: inset 3px 0 0 var(--row-color); }

.swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--row-color, var(--g-slate));
  flex: none;
}

.goal-name { font-weight: 500; color: var(--ink); font-size: 11.5px; }
.goal-meta { margin-left: auto; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* day column */

.day {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
}

.hours { display: grid; }
.hours span {
  height: 44px;
  font-size: 9.5px;
  color: var(--muted);
  text-align: right;
  padding-right: 2px;
  font-variant-numeric: tabular-nums;
}

.slots { position: relative; }
.slot { height: 44px; border-top: 1px solid var(--border-soft); }

.block {
  position: absolute;
  left: 0;
  right: 4px;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--blk);
  background: color-mix(in srgb, var(--blk) 11%, #fff);
  border: 1px solid color-mix(in srgb, var(--blk) 26%, transparent);
  box-shadow: inset 2.5px 0 0 var(--blk);
  overflow: hidden;
}

.block small { display: block; font-weight: 400; opacity: .75; font-size: 9.5px; }

.block.is-cal {
  --blk: var(--g-slate);
  background: var(--surface);
  border-style: dashed;
}

.block.is-done { opacity: .45; }
.block.is-done .block-t { text-decoration: line-through; }

.nowline {
  position: absolute;
  left: -4px;
  right: 0;
  height: 0;
  border-top: 1.5px solid #d92d20;
  z-index: 3;
}
.nowline::before {
  content: "";
  position: absolute;
  left: -3px; top: -3.5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #d92d20;
}

/* capacity readout */

.readout { margin-bottom: 14px; }

.readout-k {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 5px;
}
.readout-k b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.meter {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--meter, var(--ink)); }

.stat {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  margin-top: 14px;
}
.stat-n { font-family: var(--font-heading); font-size: 26px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.stat-l { font-size: 10.5px; color: var(--muted); margin-top: 5px; }

/* the 168 bar */

.bar168 {
  display: flex;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.bar168 span {
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}

.legend { display: grid; gap: 9px; margin-top: 16px; }
.legend-row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
.legend-row i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend-row b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.callout {
  margin-top: 18px;
  border-radius: var(--r-inner);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 14px;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.callout b { color: var(--ink); }

/* week grid
   Blocks are placed on the column by top and height, the way the real grid
   places them, so the week reads as a week rather than as a stack of chips. */

.week { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.week-head, .week-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.week-grid { flex: 1; min-height: 0; margin-top: 6px; }

.week-d {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-soft);
}

.wcol {
  position: relative;
  border-radius: 6px;
  /* One hairline per hour, ten hours to the column. */
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(10% - 1px),
    var(--border-soft) calc(10% - 1px) 10%
  );
}

.wblock {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--blk);
  background: color-mix(in srgb, var(--blk) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--blk) 24%, transparent);
  box-shadow: inset 2px 0 0 var(--blk);
  overflow: hidden;
}

.wblock small { display: block; font-weight: 400; opacity: .7; }

.wblock.is-cal {
  --blk: var(--g-slate);
  background: var(--surface);
  border-style: dashed;
}

/* Five columns in a phone-width panel leaves about sixty pixels each. */
@media (max-width: 560px) {
  .wblock { font-size: 8.5px; padding: 3px 4px; }
  .wblock small { display: none; }
}

/* Once the panel stops being square the grid has no height to fill, so it
   claims its own — a week with no height is not a calendar. */
@media (max-width: 620px) {
  .week-grid { min-height: 260px; }
}

/* wrap-up rows */

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  margin-bottom: 8px;
  background: #fff;
  font-size: 11.5px;
}
.check-row .swatch { width: 8px; height: 8px; }
.tick {
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  font-size: 10px;
  font-weight: 700;
}
.tick.yes { background: #e7f6ef; color: #047857; }
.tick.some { background: #fdf3e2; color: #d92d20; }
.tick.no { background: var(--surface-2); color: var(--muted); }
.check-row.missed .goal-name { text-decoration: line-through; color: var(--muted); }
.instead { font-size: 10px; color: var(--muted); }

/* ---------------------------------------------------------------- quote */

.quote-card {
  border-radius: var(--r-card);
  background: var(--surface);
  padding: clamp(28px, 5vw, 64px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
}

.quote-mark {
  width: 120px;
  height: 120px;
  border-radius: 30px;
  background: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
}
/* The logo is a 2:1 image, so it is sized by width and its height follows.
   This tile is dark, so it takes the cream-ink version of the file. */
.quote-mark img { width: 86px; height: auto; }

.quote-card blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--ink);
}

.quote-by { margin-top: 18px; font-size: 13px; color: var(--muted); }
.quote-by b { color: var(--ink); font-weight: 600; }

@media (max-width: 760px) {
  .quote-card { grid-template-columns: 1fr; gap: 24px; }
  .quote-mark { width: 76px; height: 76px; border-radius: 22px; }
  .quote-mark svg { width: 34px; height: 34px; }
}

/* ---------------------------------------------------------------- principles */

.principles {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.principle {
  border-radius: var(--r-panel);
  border: 1px solid var(--border);
  background: #fff;
  padding: 28px;
}
.principle h4 {
  margin: 16px 0 8px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -.02em;
}
.principle p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

@media (max-width: 900px) { .principles { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- integrations */

.integrations {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.integration {
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 24px 20px;
  text-align: center;
}
.integration .logo { height: 34px; display: grid; place-items: center; margin-bottom: 14px; }
.integration .logo svg { height: 30px; width: auto; }
.integration-name { font-size: 14px; font-weight: 600; }
.integration-state { font-size: 12px; color: var(--muted); margin-top: 3px; }
.integration.soon { opacity: .62; }

/* ---------------------------------------------------------------- pricing */

.price-card {
  margin: 44px auto 0;
  max-width: 560px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: #fff;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-panel);
}

.price-tag {
  display: inline-flex;
  border-radius: 999px;
  background: #e7f6ef;
  color: #047857;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
}

.price-amount {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 46px);
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 20px 0 6px;
}

.price-sub { font-size: 14px; color: var(--muted); margin: 0; }

.included {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.included li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.45;
}

.included svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #047857; }

.included-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 30px 0 0;
}

.price-card .btn { width: 100%; margin-top: 28px; }

.refund {
  margin: 24px auto 0;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

/* ---------------------------------------------------------------- waitlist form */

.waitlist {
  display: flex;
  gap: 10px;
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
}

.waitlist input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 0 22px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.waitlist input::placeholder { color: var(--muted); }
.waitlist input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }

.waitlist-msg {
  margin: 14px auto 0;
  font-size: 13px;
  color: var(--muted);
  min-height: 20px;
  text-align: center;
}
.waitlist-msg.ok { color: #047857; font-weight: 500; }
.waitlist-msg.err { color: #b42318; }

@media (max-width: 520px) {
  .waitlist { flex-direction: column; border-radius: 24px; }
  .waitlist .btn { width: 100%; }
}

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

.faq { margin-top: 44px; max-width: 800px; margin-inline: auto; }

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

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }

.faq p {
  margin: 0;
  padding: 0 40px 26px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------------- closing */

.closing {
  border-radius: var(--r-card);
  background: var(--ink);
  color: #fff;
  padding: clamp(40px, 6vw, 80px) 24px;
  text-align: center;
}
.closing h2 { color: #fff; }
.closing .body-lg { color: rgba(255, 255, 255, .68); margin-top: 18px; }
.closing .btn-primary { background: #fff; color: var(--ink); margin-top: 32px; }
.closing .btn-primary:hover { background: rgba(255, 255, 255, .88); }

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

.footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
  margin-top: 96px;
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.footer-links { margin-left: auto; display: flex; gap: 22px; }
.footer-links a:hover { color: var(--ink); }

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

/* Nothing on this page starts hidden.

   This used to be a bare `opacity: 0` waiting on a class, which meant every
   panel and every section was invisible until a script came along and fired —
   and washed out for the whole length of the fade. The content is now visible
   from the moment it loads, and the fade is an animation that plays as a
   section arrives. A blocked script costs the page an animation, not its
   contents. */

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.reveal.in { animation: rise .7s cubic-bezier(.22, 1, .36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .reveal.in { animation: none; }
  .underlined path { stroke-dashoffset: 0; animation: none; }
}

/* ------------------------------------------------- the setup panel

   The first benefit panel is not one screen, it is the whole move the product
   makes, played out as you scroll past it: it asks what you value, it works
   for a moment, and then the year, the quarter and the week it built appear
   under each answer.

   Everything here is written so the finished state is the plain CSS. The
   animation only hides things earlier in the scroll and hands them back, so a
   browser without scroll-driven animation, a phone, or a reader who has asked
   for less motion sees the built version straight away. */

/* Only one answer opens at a time now, so the panel is sized to hold two: the
   one being opened and the one still easing shut behind it. Fixing the height
   this way means moving from row to row never resizes the panel. */
.askpanel { aspect-ratio: 1 / 0.95; display: flex; flex-direction: column; }
.askpanel .panel-bar { flex: none; }
.askpanel .panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

/* The bar's name changes once the plan exists, so the panel reads as a screen
   that moved on rather than one that sat still. Both words share a cell so the
   swap does not nudge anything sideways. */
.askpanel .panel-title { display: inline-grid; }
.askpanel .panel-title > span { grid-area: 1 / 1; transition: opacity .3s ease; }
.askpanel .panel-title .t2 { opacity: 0; }

.ask-q {
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}

.ask-list { display: grid; gap: 10px; }

/* An answer. The same colored row the other panels use, cut back to the value
   itself, because at this point it is a word somebody typed and not yet
   anything on a calendar. */
/* Built like the blocks on the calendar in the hero, because that is what they
   are: pale inside, the color saved for the edge, the text and the bar down
   the left side. A block of solid color reads as a label; this reads as
   something sitting on a calendar. */
.ask-v .b {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 11px 14px;
  color: var(--b);
  background: color-mix(in srgb, var(--b) 9%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--b) 40%, transparent);
  box-shadow: inset 3px 0 0 var(--b);
  /* Settling back is quicker than lifting, the way a real object would. */
  transition:
    transform .26s cubic-bezier(.4, 0, 1, 1),
    background-color .26s ease,
    border-color .26s ease,
    box-shadow .26s ease;
}

.ask-v:hover .b {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--b) 15%, #fff);
  border-color: color-mix(in srgb, var(--b) 62%, transparent);
  box-shadow: inset 3px 0 0 var(--b), 0 9px 20px -10px color-mix(in srgb, var(--b) 55%, transparent);
  transition:
    transform .36s cubic-bezier(.16, .84, .3, 1) .04s,
    background-color .32s ease .04s,
    border-color .32s ease .04s,
    box-shadow .36s ease .04s;
}
.ask-v .b b { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.ask-v .b .ic {
  flex: none;
  font-size: 21px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.ask-v .b .tick { margin-left: auto; font-size: 12px; opacity: .5; }

/* What got built from it: a year, a quarter and a week, which is the app's
   real nesting, so one word visibly becomes a plan with dates on it. It waits
   closed until the panel is asked to show it, and eases shut again after. */
/* Opening and closing are the same transition running in two directions, not
   an animation one way and a transition back. That is what lets it be caught
   half open and sent the other way, which is the difference between a panel
   that feels handled and one that plays a clip at you.

   Closing is the quicker of the two and starts at once. Opening waits nine
   hundredths of a second first: long enough that dragging the pointer down the
   list does not set all four off, short enough that stopping on one feels
   immediate. */
.built {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height .3s cubic-bezier(.4, 0, 1, 1),
    opacity .16s ease;
}
.ask-v:hover .built,
.ask-v.is-open .built {
  max-height: 110px;
  opacity: 1;
  transition:
    max-height .44s cubic-bezier(.16, .84, .3, 1) .09s,
    opacity .3s ease .16s;
}
.rgs {
  display: grid;
  gap: 2px;
  margin-left: 7px;
  padding: 8px 0 2px 14px;
  border-left: 2px solid var(--b);
}
.rg { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
.rg i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--b);
  margin-right: 7px;
}

/* The line at the foot says three things in turn: how to start it, that the
   app is working, and what the work came to. All three share one cell so the
   panel does not resize as they replace each other. */
.ask-status { display: grid; }
.ask-status > * { grid-area: 1 / 1; align-self: end; margin: 0; }

/* The invitation. A mouse hovers and a phone taps, and the panel has to say
   which one it wants, so it carries both sentences and shows whichever suits
   the pointer that turned up. */
.hint { font-size: 11.5px; color: var(--muted); transition: opacity .3s ease; }
.hint .on-tap { display: none; }
@media (hover: none) {
  .hint .on-hover { display: none; }
  .hint .on-tap { display: inline; }
}

.done { opacity: 0; transition: opacity .42s ease; }

.work {
  display: flex;
  opacity: 0;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--muted);
}
.work .track {
  flex: none;
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.work .track i {
  display: block;
  height: 100%;
  background: var(--ink-2);
  transform-origin: left;
  transform: scaleX(0);
}

@media (max-width: 620px) {
  .askpanel { aspect-ratio: auto; }
  .askpanel .panel-body { justify-content: flex-start; }
}

/* Opening a box by animating its height means naming the open height, because
   "auto" cannot be animated to. All four of these are three lines, so one
   number covers them; 80px is a little more than they need, which is the safe
   side to be wrong on — too small would quietly crop the last line. */
@keyframes ask-open { from { max-height: 0; opacity: 0; } to { max-height: 110px; opacity: 1; } }
@keyframes ask-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The working line comes up, holds while the bar fills, and goes again, which
   is three moves in one property and so has to be a keyframe rather than a
   transition. */
@keyframes ask-work {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  76%  { opacity: 1; }
  100% { opacity: 0; }
}

/* --------------------------------------- the panel plays on hover, or a tap

   A mouse hovering over the panel starts it. A phone has no hover, so a tap
   does the same thing and a second tap puts it back; that is the `is-built`
   class, and a few lines in main.js are all it takes. Both routes end in the
   same state, so the sequence is written once against both selectors. */

.askpanel:hover .hint,
.askpanel.is-built .hint { opacity: 0; }

.askpanel:hover .work,
.askpanel.is-built .work { animation: ask-work 1.5s linear forwards; }

.askpanel:hover .work .track i,
.askpanel.is-built .work .track i { animation: ask-fill 1.12s cubic-bezier(.35, .08, .28, 1) .1s forwards; }

.askpanel:hover .panel-title .t1,
.askpanel.is-built .panel-title .t1 { opacity: 0; transition-delay: .86s; }
.askpanel:hover .panel-title .t2,
.askpanel.is-built .panel-title .t2 { opacity: 1; transition-delay: 1s; }

/* One answer at a time. The plan belongs to the answer you are pointing at, so
   hovering a row opens that row and leaves the other three shut. The rule that
   does it sits with the closed state further up, where the two halves of the
   transition can be read together. */

.askpanel:hover .done,
.askpanel.is-built .done { opacity: 1; transition-delay: 1.86s; }

/* Asked for less motion, the panel skips the performance and simply shows the
   finished plan, since the plan is the part worth reading. */
@media (prefers-reduced-motion: reduce) {
  .askpanel { aspect-ratio: auto; }
  .askpanel .built { max-height: 110px; opacity: 1; transition: none; animation: none; }
  .askpanel .done { opacity: 1; transition: none; }
  .askpanel .hint, .askpanel .work { display: none; }
  .askpanel .panel-title .t1 { opacity: 0; }
  .askpanel .panel-title .t2 { opacity: 1; }
}

/* ------------------------------------------------- the week that fills in

   The same panel, one section later and one step further on. The four answers
   have already been given, so they sit at the top as small chips, and what the
   hover builds this time is the week itself: a block for each of them, drawn a
   day at a time, with the hours counted underneath. */

/* Nothing in this one changes height when it plays — the blocks grow inside a
   week that is already the size it will be, and the lines underneath are
   always there, just clear. So it is left to be as tall as its contents rather
   than held to a shape, which would crop it wherever the column is narrow. */
.askcal { aspect-ratio: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
/* The same build as the answer rows above, at chip size. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--b);
  background: color-mix(in srgb, var(--b) 9%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--b) 40%, transparent);
  transition:
    transform .38s cubic-bezier(.22, .61, .36, 1),
    background-color .38s ease,
    border-color .38s ease,
    box-shadow .38s ease;
}
.chip:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--b) 15%, #fff);
  border-color: color-mix(in srgb, var(--b) 62%, transparent);
  box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--b) 55%, transparent);
}
.chip .ic {
  font-size: 14px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* A week that is actually a week: the hours labeled down the left, a rule
   every three of them, and each of the four answers sitting on it at the time
   it really happens, with its name on it. */
.cal {
  display: grid;
  grid-template-columns: 26px repeat(7, 1fr);
  gap: 0 3px;
}
.cal-day {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  padding-bottom: 6px;
}

/* The hour marks sit at the height of the line they name, so the label and the
   rule are the same thing read two ways. */
.cal-times { position: relative; height: 210px; }
.cal-times span {
  position: absolute;
  right: 5px;
  font-size: 8.5px;
  line-height: 1;
  color: var(--muted);
  transform: translateY(-50%);
}

.cal-track {
  position: relative;
  height: 210px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(to bottom,
      var(--border-soft) 0 1px,
      transparent 1px 39.4px),
    #fff;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}

.cal-ev {
  position: absolute;
  left: 2px;
  right: 2px;
  /* A column is about seventy pixels wide, so a longer name is cut with an
     ellipsis rather than wrapping onto a second line the block has no room
     for. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 4px;
  padding: 1px 3px 1px 5px;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--b);
  background: color-mix(in srgb, var(--b) 13%, #fff);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--b) 40%, transparent),
    inset 2px 0 0 var(--b);

  /* Same two-direction transition as the answer rows, so leaving the panel
     part way through takes the week back rather than cutting it off. */
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  transition: transform .26s cubic-bezier(.4, 0, 1, 1), opacity .2s ease;
}

/* On a phone a day column is about thirty pixels across, which is not enough
   for a word: every label came out as two letters and an ellipsis, which reads
   worse than no label at all. So the names come off, the blocks keep their
   color and their place, and the list underneath the calendar is what says
   what they are. */
@media (max-width: 620px) {
  .cal { grid-template-columns: 20px repeat(7, 1fr); gap: 0 2px; }
  .cal-ev { font-size: 0; padding: 0; }
  .cal-day { font-size: 9px; padding-bottom: 4px; }
  .cal-times span { font-size: 8px; right: 3px; }
}

/* Work is in the week before anybody asks for anything, so it is there from
   the start and never goes. It sits back in gray, and steps back a little
   further as the four colored ones arrive, so those read first. */
.cal-ev.is-work,
.cal-ev.is-life {
  padding-left: 4px;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  transform: none;
  opacity: .68;
  transition: opacity .5s ease;
}
.askcal:hover .cal-ev.is-work,
.askcal:hover .cal-ev.is-life,
.askcal.is-built .cal-ev.is-work,
.askcal.is-built .cal-ev.is-life {
  transform: none;
  opacity: .42;
  transition: opacity .5s ease 1.1s;
}

/* On a phone the gray blocks lose their names, so their fill is all that is
   left of them — and at the opacity a big screen uses, that fill all but
   vanishes and the week reads as empty. Which is the opposite of the point:
   the job is already in there, and these four went in anyway. So they hold
   more of their color on a small screen, and still sit behind.

   This has to come after the rules above rather than with the rest of the
   phone layout, because it is overriding them and they carry the same
   weight — whichever is written last is the one that counts. */
@media (max-width: 620px) {
  .cal-ev.is-work,
  .cal-ev.is-life {
    opacity: 1;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border-strong);
  }
  .askcal:hover .cal-ev.is-work,
  .askcal:hover .cal-ev.is-life,
  .askcal.is-built .cal-ev.is-work,
  .askcal.is-built .cal-ev.is-life { opacity: .85; }
}

/* One line per answer, so the blocks on the grid are tied back to the word
   that produced them and carry the week's hours with them. */
/* These are paragraphs, so they arrive carrying a line of margin above and
   below each one. In a grid those do not collapse, which is what was pushing
   the list to nearly three times the height it needed. */
.built-lines { display: grid; gap: 6px; margin-top: 14px; }
.bl {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
.bl i { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--b); }
.bl b { font-weight: 600; color: var(--ink); }
.bl span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }

/* Work gets a line too, because the point of the picture is what these four
   have to fit around. It is held back the same way the blocks are. */
.bl.is-work { color: var(--muted); }
.bl.is-work b { color: var(--muted); }
.bl.is-work i { background: var(--surface-2); }

/* The blocks are built the same way as the answer rows and as the calendar in
   the hero: pale inside, the color on the edge and down the left. Like the
   rows, they go in and come back out on one transition, so leaving the panel
   half way through takes the week back rather than cutting it off. */
.askcal .wk-track i {
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  transition: transform .26s cubic-bezier(.4, 0, 1, 1), opacity .2s ease;
  border-radius: 4px;
  background: color-mix(in srgb, var(--b, var(--g-ink)) 16%, #fff);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--b, var(--g-ink)) 42%, transparent),
    inset 2px 0 0 var(--b, var(--g-ink));
}
.askcal .bl { opacity: 0; transition: opacity .42s ease; }
.askcal .bl.is-work { opacity: 1; }

.askcal:hover .cal-ev,
.askcal.is-built .cal-ev {
  transform: scaleY(1);
  opacity: 1;
  transition: transform .46s cubic-bezier(.16, .84, .3, 1), opacity .3s ease;
}

/* The week fills in a day at a time, left to right, so it reads as the app
   placing things rather than a picture fading up. The hours down the side are
   the grid's first column, so Monday is the second child and Sunday the
   eighth. */
.askcal:hover .cal-col:nth-child(2) .cal-ev,
.askcal.is-built .cal-col:nth-child(2) .cal-ev { transition-delay: .98s; }
.askcal:hover .cal-col:nth-child(3) .cal-ev,
.askcal.is-built .cal-col:nth-child(3) .cal-ev { transition-delay: 1.1s; }
.askcal:hover .cal-col:nth-child(4) .cal-ev,
.askcal.is-built .cal-col:nth-child(4) .cal-ev { transition-delay: 1.22s; }
.askcal:hover .cal-col:nth-child(5) .cal-ev,
.askcal.is-built .cal-col:nth-child(5) .cal-ev { transition-delay: 1.34s; }
.askcal:hover .cal-col:nth-child(6) .cal-ev,
.askcal.is-built .cal-col:nth-child(6) .cal-ev { transition-delay: 1.46s; }
.askcal:hover .cal-col:nth-child(7) .cal-ev,
.askcal.is-built .cal-col:nth-child(7) .cal-ev { transition-delay: 1.58s; }
.askcal:hover .cal-col:nth-child(8) .cal-ev,
.askcal.is-built .cal-col:nth-child(8) .cal-ev { transition-delay: 1.7s; }

.askcal:hover .bl, .askcal.is-built .bl { opacity: 1; }
.askcal:hover .bl:nth-child(1), .askcal.is-built .bl:nth-child(1) { transition-delay: 1.86s; }
.askcal:hover .bl:nth-child(2), .askcal.is-built .bl:nth-child(2) { transition-delay: 1.98s; }
.askcal:hover .bl:nth-child(3), .askcal.is-built .bl:nth-child(3) { transition-delay: 2.1s; }
.askcal:hover .bl:nth-child(4), .askcal.is-built .bl:nth-child(4) { transition-delay: 2.22s; }

.askcal:hover .done, .askcal.is-built .done { transition-delay: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  .askcal .cal-ev { transform: none; opacity: 1; }
  .askcal .bl { opacity: 1; transition: none; }
}