/*
  The client portal's look, shape B: a blue panel down the side on a tablet and a laptop; on a
  phone a blue bar whose menu button drops the same panel down, only as tall as it holds. MD's own
  tokens (tokens.css, made from the site's global.css), on paper, phone first. One blue,
  Fraunces for the big lines, Hanken for everything else. A box is a 1 px ring, radius 12, no
  shadow, and a screen holds at most two.
*/
@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/fraunces.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Hanken Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/hanken-grotesk.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 94%;
  descent-override: 24%;
}
@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial"), local("Arimo"), local("Liberation Sans");
  size-adjust: 102%;
  ascent-override: 98%;
  descent-override: 27%;
}

/* Portal tiers: title 26/30/32, section 22, row 15, meta 14, small 13, tiny 12, micro 11. */
:root {
  --p-panel-w: 0px;
  --p-bar-h: 56px;
  --p-col: 640px;
  --p-side: 272px;
  --p-gutter: 20px;
  --p-title: 1.625rem;
  --p-h2: 1.375rem;
  --p-row: 0.9375rem;
  --p-meta: 0.875rem;
  --p-small: 0.8125rem;
  --p-tiny: 0.75rem;
  --p-micro: 0.6875rem;
  --p-measure: 640px; /* the widest a question or a list of parts runs */
  --p-figure: 2.25rem;
  --p-lead: 1.75rem; /* the recap's goal, the one line set big */
  --p-goal-m: 1.5rem; /* a longer goal steps down, so it still sits in Home's box */
  --p-goal-l: 1.3125rem;
  --p-sheet-pad: 20px;
  --p-gap-head: 28px;
  --p-gap-block: 40px; /* content to the next section rule */
  --p-under-rule: 24px; /* rule to its section head */
  --p-gap-h2: 16px;
  --p-row-h: 68px;
  --p-nav-h: 48px;
  --p-field-h: 52px;
  --p-radius-row: 8px;
  --p-axis: 12px;
  --p-tint: color-mix(in srgb, var(--on-blue) 14%, transparent);
  --p-tint-hover: color-mix(in srgb, var(--on-blue) 8%, transparent);
  --p-pick: color-mix(in srgb, var(--ink) 5%, var(--white));
  --p-hover: color-mix(in srgb, var(--ink) 3%, var(--white));
  --p-foot: calc(env(safe-area-inset-bottom) + 48px);
  --p-slant: calc(100vw * var(--slope, 0.08));
  --p-scrim: color-mix(in srgb, var(--ink) 46%, transparent);
}
@media (min-width: 48em) {
  :root {
    --p-title: 1.875rem;
    --p-lead: 2rem;
    --p-goal-m: 1.75rem;
    --p-goal-l: 1.5rem;
    --p-sheet-pad: 28px;
    --p-gutter: 40px;
    --p-gap-head: 32px;
    --p-gap-block: 48px;
  }
}
@media (min-width: 64em) {
  :root {
    --p-title: 2rem;
    --p-col: 880px;
    --p-gutter: 48px;
    --p-gap-head: 36px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1,
h2,
p,
ul,
ol,
dl,
dd,
fieldset,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}
img {
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nowrap {
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus-visible {
  left: 12px;
  top: 12px;
  z-index: 50;
  padding: 8px 12px;
  border-radius: var(--p-radius-row);
  background: var(--white);
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
#main:focus {
  outline: none;
}
.ic {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Lockup ---------- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  color: var(--blue);
  text-decoration: none;
}
.lockup-mark {
  width: 26px;
  height: 30px;
  flex: none;
  fill: currentColor;
}
.lockup-name {
  height: 14px;
  width: auto;
  aspect-ratio: 17342 / 1400;
  color: var(--ink);
  fill: currentColor;
}
.lockup.on-blue,
.lockup.on-blue .lockup-name {
  color: var(--on-blue);
}

/* ---------- Type tiers ---------- */
.title,
.h2,
.ask-title {
  font-family: var(--font-display);
  font-weight: 540;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.015em;
  word-spacing: 0.02em;
  text-wrap: balance;
}
.title {
  font-size: var(--p-title);
  line-height: 1.12;
}
.lede {
  max-width: 34em;
  margin-top: 8px;
  color: var(--muted);
  font-size: 1rem;
  text-wrap: pretty;
}
.h2 {
  margin-bottom: var(--p-gap-h2);
  font-size: var(--p-h2);
  line-height: 1.2;
}
.lead-in {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: var(--on-blue);
  font: inherit;
  font-size: var(--p-row);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-out);
}
.btn:active {
  background: var(--blue-deep);
}
.btn-wide {
  width: 100%;
}
.btn-small {
  min-height: 40px;
  padding: 0 18px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--p-row);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--blue-deep);
  }
  .text-link:hover {
    text-decoration-color: var(--ink);
  }
}

/* Pressed: every tap answers the moment a finger lands, and stays answered until the next page
   paints (portal.js holds .is-pressed from pointerdown; :active alone drops on release, before
   the page has changed, which read as "no response"). */
.text-link:is(:active, .is-pressed),
a.row:is(:active, .is-pressed),
.bar-exit:is(:active, .is-pressed),
a.bar-biz:is(:active, .is-pressed),
a.who-biz:is(:active, .is-pressed),
.who-out:is(:active, .is-pressed),
.reach-row:is(:active, .is-pressed),
.ask-back:is(:active, .is-pressed),
.choice:is(:active, .is-pressed) .choice-face,
.mark:is(:active, .is-pressed) .mark-text {
  opacity: 0.6;
}
a.row.is-pressed {
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.btn.is-pressed {
  background: var(--blue-deep);
  scale: 0.98;
}
.bar-menu:is(:active, .is-pressed) {
  background: var(--p-tint);
}
a.nav-row:is(:active, .is-pressed),
button.nav-row:is(:active, .is-pressed),
a.switch:is(:active, .is-pressed) {
  background: var(--p-tint);
  color: var(--on-blue);
}

/* ---------- Pills: one status set, and the Soon tag ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  flex: none;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: var(--p-small);
  font-weight: 600;
  white-space: nowrap;
}
.pill-turn {
  background: var(--blue);
  color: var(--on-blue);
}
.pill-with {
  box-shadow: inset 0 0 0 1px var(--ink);
  color: var(--ink);
}
.pill-done {
  background: var(--wall);
  color: var(--muted);
}
/* How many things wait on them: a filled dot with the count. */
.dot {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--white);
  font-size: var(--p-micro);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Phone frame: blue bar on top, its menu button drops the menu ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-height: calc(var(--p-bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  background: var(--blue);
  color: var(--on-blue);
}
.bar-mark {
  display: grid;
  justify-items: start;
  align-items: center;
  height: var(--tap);
  color: var(--on-blue);
}
.bar-mark .lockup-mark {
  width: 22px;
  height: 26px;
}
.bar-biz {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: var(--tap);
  font-size: var(--p-row);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.bar-name,
.who-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-biz .ic {
  width: 16px;
  height: 16px;
  color: var(--on-blue-muted);
}
.bar-word .lockup-name {
  height: 12px;
  color: var(--on-blue);
}
/* The site's own round menu button; its two lines turn into a cross while the menu is down. */
.bar-menu {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: -2px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--on-blue-soft);
  color: var(--on-blue);
  transition: background-color var(--dur-press) var(--ease-out);
}
.bar-lines {
  display: grid;
  gap: 6px;
  width: 18px;
}
.bar-lines span {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-menu-in, 240ms) var(--ease-out-expo);
}
.is-menu .bar-lines span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.is-menu .bar-lines span:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}
/* The pill is 36 tall; the tap around it is 48. */
.bar-exit::before {
  content: "";
  position: absolute;
  inset: -6px 0;
}
.bar-exit {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  box-shadow: inset 0 0 0 1px var(--on-blue-soft);
  color: var(--on-blue);
  font-size: var(--p-meta);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.out-form {
  display: contents;
}
.bar a:focus-visible,
.bar button:focus-visible,
.panel a:focus-visible,
.panel button:focus-visible,
.si-art a:focus-visible {
  outline-color: var(--on-blue);
}

/* ---------- The panel: the side of a tablet and a laptop, the More sheet on a phone ---------- */
.panel {
  display: none;
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--blue);
  color: var(--on-blue);
}
.panel::after,
.si-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--grain-tile);
  background-size: 160px;
  opacity: var(--grain);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.panel > :not(.panel-art) {
  position: relative;
  z-index: 1;
}
.panel-art {
  position: absolute;
  z-index: 0;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding-left: var(--p-axis);
}
.drawer-close {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-pill);
  color: var(--on-blue);
}
.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px var(--p-axis);
  border-radius: var(--p-radius-row);
  color: var(--on-blue);
  text-decoration: none;
}
.switch-name {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}
.switch-ic {
  color: var(--on-blue-muted);
}
.nav-list {
  display: grid;
  gap: 2px;
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--p-nav-h);
  padding: 0 var(--p-axis);
  border: 0;
  border-radius: var(--p-radius-row);
  background: none;
  color: var(--on-blue-muted);
  font-size: var(--p-row);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-row[aria-current="page"] {
  background: var(--p-tint);
  color: var(--on-blue);
}
.nav-row .dot {
  margin-left: auto;
  background: var(--on-blue);
  color: var(--blue);
}
.nav-tick {
  display: none;
  margin-left: auto;
}
.nav-row .dot + .nav-tick {
  margin-left: 0;
}
.panel-reach {
  padding: 0 var(--p-axis);
}
.reach-title {
  margin-bottom: 4px;
  color: var(--on-blue);
  font-size: var(--p-meta);
  font-weight: 600;
}
.reach-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--p-nav-h);
  color: var(--on-blue);
  font-size: var(--p-meta);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--link-line-blue);
  text-underline-offset: 3px;
}
.reach-row .ic {
  color: var(--on-blue-muted);
}
.reach-quiet {
  color: var(--on-blue-muted);
  font-weight: 400;
}
.panel-who {
  display: none;
}
.who-line {
  padding: 0 var(--p-axis);
  color: var(--on-blue-muted);
  font-size: var(--p-small);
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  a.nav-row:not([aria-current]):hover,
  button.nav-row:hover,
  a.switch:hover {
    background: var(--p-tint-hover);
    color: var(--on-blue);
  }
  a.row:hover .row-name {
    text-decoration: underline;
    text-decoration-color: var(--link-line);
    text-underline-offset: 3px;
  }
}

/* The menu, on a phone: MD's own site menu. The blue drops from under the bar with the site's
   slant on its lower edge, stops at what it holds, and the page behind dims. Its rows rise in
   one after another. It stays in the page while closed, so closing plays too. */
.scrim {
  display: none;
}
@media not all and (min-width: 64em) {
  .bar {
    z-index: 40;
  }
  .panel {
    display: flex;
    visibility: hidden;
    z-index: 35;
    inset: calc(var(--p-bar-h) + env(safe-area-inset-top)) 0 auto 0;
    max-height: calc(85svh - var(--p-bar-h));
    padding: 12px max(var(--p-gutter), calc((100vw - var(--p-col)) / 2))
      calc(28px + var(--p-slant));
    overflow-y: auto;
    overscroll-behavior: contain;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition:
      clip-path var(--dur-menu-out, 240ms) var(--ease-in),
      visibility 0s linear var(--dur-menu-out, 240ms);
  }
  .is-menu {
    overflow: hidden;
  }
  .is-menu .panel {
    visibility: visible;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--p-slant)), 0 100%);
    transition:
      clip-path 420ms var(--ease-out-expo),
      visibility 0s;
  }
  .panel > * {
    opacity: 0;
    translate: 0 8px;
    transition:
      opacity 160ms var(--ease-in),
      translate 160ms var(--ease-in);
  }
  .is-menu .panel > * {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 240ms var(--ease-out) calc(120ms + var(--i, 0) * 40ms),
      translate 240ms var(--ease-out) calc(120ms + var(--i, 0) * 40ms);
  }
  .panel > .nav-list {
    --i: 0;
  }
  .panel > .switch {
    --i: 1;
  }
  .panel > .panel-reach {
    --i: 2;
  }
  .panel > .panel-who {
    --i: 3;
  }
  .scrim {
    display: block;
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--ink) 68%, transparent);
    opacity: 0;
    transition:
      opacity var(--dur-menu-out, 240ms) var(--ease-in),
      visibility 0s linear var(--dur-menu-out, 240ms);
  }
  .is-menu .scrim {
    visibility: visible;
    opacity: 1;
    transition:
      opacity 320ms var(--ease-out),
      visibility 0s;
  }
  /* The bar above already holds the mark and the cross, so the panel's own head stays away. */
  .panel-head,
  .panel-art,
  .switch-solo {
    display: none;
  }
  .nav-list {
    order: 1;
    gap: 0;
    margin-bottom: 8px;
  }
  .switch {
    order: 2;
  }
  .panel-reach {
    order: 3;
  }
  .panel-who {
    order: 4;
  }
  /* Each page is a row in the serif, as on the site; the page you are on is full white. */
  .panel .nav-row {
    min-height: 52px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: color-mix(in srgb, var(--on-blue) 72%, transparent);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .panel .nav-row .ic {
    display: none;
  }
  .panel .nav-row[aria-current="page"] {
    background: none;
    color: var(--on-blue);
  }
  .panel .nav-row[aria-current="page"]::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 12px;
    border-radius: 50%;
    background: var(--on-blue);
  }
  .panel .nav-row .dot {
    margin-left: 12px;
  }
  .switch,
  .panel-reach,
  .panel-who {
    padding-top: 8px;
    border-top: 1px solid var(--on-blue-line);
  }
  /* The first section under the bar needs no rule above it. */
  .panel:not(:has(.nav-list)) .switch:not(.switch-solo),
  .panel:not(:has(.nav-list, a.switch)) .panel-reach {
    border-top: 0;
  }

  .switch {
    gap: 12px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    min-height: 56px;
  }
  .switch-label {
    order: 2;
    font-size: 1rem;
    font-weight: 500;
  }
  .switch-name {
    display: none;
  }
  .switch-ic {
    order: 1;
  }
  .panel-reach {
    padding-left: 0;
    padding-right: 0;
  }
  .panel-reach .reach-title {
    display: none;
  }
  .panel-reach .reach-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
  }
  .panel-reach .reach-row {
    min-height: var(--tap);
    font-size: var(--p-row);
  }
  .panel-reach .reach-row .ic {
    display: none;
  }
  .panel-who {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .panel-who .nav-row {
    width: auto;
    min-height: var(--tap);
    font-family: var(--font-body);
    font-size: var(--p-row);
    color: var(--on-blue);
  }
  .panel-who .nav-row .ic {
    display: block;
  }
  .panel-who .who-line {
    padding: 0;
    text-align: right;
  }
}

/* ---------- Content ---------- */
.main {
  padding: calc(var(--p-bar-h) + env(safe-area-inset-top) + 28px)
    var(--p-gutter) var(--p-foot);
}
.col {
  position: relative;
  max-width: var(--p-col);
  margin: 0 auto;
}
.who,
.who-biz {
  display: none;
}
.page-head {
  margin-bottom: var(--p-gap-head);
}
.page-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 20px;
}
.stack {
  display: grid;
  gap: 16px;
}

/* Sections: one rule over each, its head 24 px under it */
.block {
  margin-top: var(--p-gap-block);
  padding-top: var(--p-under-rule);
  border-top: 1px solid var(--line);
}
.block-first {
  margin-top: 0;
}
.block-head {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.block-head .h2 {
  margin-bottom: 0;
}
.block-line {
  max-width: 36em;
  color: var(--muted);
  font-size: var(--p-row);
  text-wrap: pretty;
}

/* The one box: what we need from them, or where it stands */
.due {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.due-name {
  margin-top: 12px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}
.due-meta {
  max-width: 30em;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--p-meta);
  text-wrap: pretty;
}
/* The figure, in the serif: how far along they are. */
.due-amount {
  font-family: var(--font-display);
  font-size: var(--p-figure);
  font-weight: 520;
  font-variation-settings: "opsz" 40;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.due-of {
  color: var(--muted);
  font-size: 0.5em;
  letter-spacing: -0.005em;
}
.due .btn {
  width: 100%;
  min-height: 56px;
}
/* On a phone the parts sit under their figure, and the button closes the box. */
.due-count .btn,
.due-count .text-link {
  order: 1;
}
.due .text-link {
  justify-self: start;
  margin: -8px 0;
}
/* Progress, drawn one way on every screen: a track per part, filled as far as it has got. */
.tracks {
  display: flex;
  gap: 6px;
}
.track {
  display: flex;
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--wall);
}
.track > span {
  flex: 1;
}
.track > .on {
  background: var(--ink);
}
.track > .now {
  background: var(--blue);
}
/* Home's box names the four parts under their tracks. */
.due-parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}
/* Each part is a track, its name and its count; the rows are shared, so counts line up
   under names of one line or two. */
.due-part {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 2px;
  font-size: var(--p-tiny);
  line-height: 1.35;
}
.due-part .track {
  height: 6px;
  margin-bottom: 6px;
}
.due-part-name {
  font-weight: 600;
}
.due-part-n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.due-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: -8px 0 -12px;
}
.due .due-links .text-link {
  margin: 0;
}

/* Before the first answer there is nothing to draw, so the four parts are named in a line. */
/* The four parts as a tight list, no separators to strand at a line's end. */
.due-part-list {
  display: grid;
  gap: 2px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--p-meta);
}
/* A name that must not break across lines. */
.nb {
  white-space: nowrap;
}
/* Once the recap is written the box opens on their goal, in the serif: the one sentence the
   plan hangs on. The server picks the size from its length. */
.goal {
  max-width: 22em;
  font-family: var(--font-display);
  font-size: var(--p-lead);
  font-weight: 400;
  font-variation-settings: "opsz" 40;
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* One weight: the recap's own page is where a phrase is set bold. */
.goal strong {
  font-weight: inherit;
}
.goal-m {
  font-size: var(--p-goal-m);
}
.goal-l {
  font-size: var(--p-goal-l);
}
.due-goal > .due-meta {
  margin-top: 0;
}

/* Their business in their own words: the second box, filling in as they answer. */
.plate {
  display: grid;
  gap: 16px;
  margin-top: var(--p-gap-block);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.plate-name {
  margin-bottom: 0;
}
.plate-rows {
  display: grid;
  gap: 14px;
}
.plate-row dt {
  color: var(--muted);
  font-size: var(--p-small);
}
.plate-row dd {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: var(--p-row);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
/* The words they picked for how the business should come across lead, in the serif. */
.plate-feel {
  margin-top: -8px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-variation-settings: "opsz" 36;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.plate-what {
  font-size: var(--p-row);
  line-height: 1.45;
  text-wrap: pretty;
}
.plate-empty {
  color: var(--muted);
  font-size: var(--p-meta);
}
/* The link's tap height reaches past its words, so the box's foot matches its other sides. */
.plate .text-link {
  justify-self: start;
  margin: -12px 0 -14px;
}
/* Getting started keeps to the measure, so its rules and its rows end on one edge. */
.hub {
  max-width: var(--p-measure);
}
/* Home's sections are set apart by space; rules stay between the rows of a list. */
.home-main .block {
  padding-top: 0;
  border-top: 0;
}

/* Home: the box and what happens next, then the side column */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Rows: name and pill on one line, meta under, all the same height */
.rows > li + li > .row {
  border-top: 1px solid var(--line);
}
.rows-top > li:first-child > .row {
  border-top: 1px solid var(--line);
}
.row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  grid-template-areas: "ic name pill" "ic meta meta";
  align-items: center;
  gap: 2px 14px;
  min-height: var(--p-row-h);
  padding: 12px 0;
  text-decoration: none;
}
.row-ic,
.row-mark {
  grid-area: ic;
  color: var(--muted);
}
.row .row-name {
  grid-area: name;
}
.row .pill {
  grid-area: pill;
}
.row .row-meta {
  grid-area: meta;
}
.row-name {
  font-size: var(--p-row);
  font-weight: 500;
  line-height: 1.35;
}
.row-meta {
  color: var(--muted);
  font-size: var(--p-meta);
  line-height: 1.35;
  text-wrap: pretty;
}
/* Where a step stands: a check when done, a filled ring on their turn, a ring otherwise. */
.row-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.row-mark[data-state="done"] {
  background: var(--ink);
  box-shadow: none;
  color: var(--white);
}
.row-mark[data-state="done"] .ic {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}
.row-mark[data-state="now"] {
  box-shadow: inset 0 0 0 5px var(--ink);
}
.row-mark[data-state="wait"] {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
/* The step things stand on wears the filled ring, whoever has it (their turn or with us). */
[aria-current="step"] > .row-mark[data-state="wait"] {
  box-shadow: inset 0 0 0 5px var(--ink);
}
.row-mark[data-state="later"] {
  box-shadow: none;
  border: var(--edge-dash);
}
.row-go,
.row-menu {
  min-height: 56px;
}
.row-go {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name pill";
}
.row-menu {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  grid-template-areas: "ic name pill";
}
/* The list of businesses: each says where it stands under its name. */
.rows-pick .row-go {
  grid-template-areas: "name pill" "meta pill";
  min-height: var(--p-row-h);
}
.row-chev {
  grid-area: pill;
  color: var(--muted);
}
/* A part of the questions: its name, how many are answered, and a thin bar of them. */
.row-part {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name count" "bar bar";
  gap: 8px 14px;
  min-height: 60px;
}
.row-count {
  grid-area: count;
  color: var(--muted);
  font-size: var(--p-meta);
  font-variant-numeric: tabular-nums;
}
.part-bar {
  grid-area: bar;
  display: flex;
}
.parts {
  margin-top: 16px;
}

/* The door's foot. A signed-in page has none: reach and privacy live in the panel. */
.si-foot {
  display: grid;
  gap: 4px;
  margin-top: var(--p-gap-block);
  color: var(--muted);
  font-size: var(--p-small);
}
.si-foot {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.foot-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
}
.si-foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-underline-offset: 3px;
}
/* ---------- Fields ---------- */
.field {
  display: grid;
  gap: 6px;
}
.field-label {
  font-size: var(--p-meta);
  font-weight: 600;
}
.input {
  width: 100%;
  min-height: var(--p-field-h);
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  appearance: none;
}
.input::placeholder {
  color: var(--muted);
}
.input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.input[aria-invalid="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.input[aria-invalid="true"]:focus {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.input-long {
  min-height: 132px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}
.input-code {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}
.input-code::placeholder {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}
.field-error,
.notice-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink);
  font-size: var(--p-meta);
  font-weight: 600;
  line-height: 1.4;
}
.field-error {
  margin-top: 8px;
}
.field-error::before,
.notice-error::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--white);
  font-size: var(--p-tiny);
  font-weight: 700;
}
.notice {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--wall);
  font-size: var(--p-row);
}
.notice-error {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.keep-box {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: var(--tap);
  cursor: pointer;
}
.keep-box input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--ink);
}
.keep-title {
  display: block;
  font-size: var(--p-row);
  font-weight: 600;
  line-height: 1.35;
}
.keep-line {
  display: block;
  color: var(--muted);
  font-size: var(--p-meta);
}

/* ---------- A question: one focused task ---------- */
.ask {
  max-width: var(--p-measure);
}
.ask-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--tap);
}
.ask-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  margin-left: -4px;
  color: var(--ink);
  font-size: var(--p-row);
  font-weight: 600;
  text-decoration: none;
}
.ask-where {
  color: var(--muted);
  font-size: var(--p-meta);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.segs {
  margin-top: 8px;
}
.ask-private {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
}
.ask-private .ic {
  flex: none;
  width: 14px;
  height: 14px;
}
.ask-form {
  margin-top: 32px;
}
.ask-title {
  font-size: var(--p-title);
  line-height: 1.15;
}
.ask-hint {
  margin-top: 10px;
  color: var(--muted);
  font-size: 1rem;
}
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-left: 4px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--wall);
  color: var(--muted);
  font-size: var(--p-tiny);
  font-weight: 600;
  vertical-align: 1px;
}
.tag-suggest {
  margin-left: 6px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
}
.ask-why {
  margin-top: 16px;
  font-size: var(--p-row);
  text-wrap: pretty;
}
.ask-example {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--p-row);
  text-wrap: pretty;
}
.notice-md {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--p-meta);
}
.md-glyph {
  flex: none;
  width: 12px;
  height: 20px;
  color: var(--blue);
  fill: currentColor;
}
.ask-form > .notice {
  margin-top: 16px;
}
/* The choices: one list on one white surface, hairlines between rows, the picked row tinted. */
.choices {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}
.choice {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  /* One line sits centered in the row; a longer face keeps its box on the title's line. */
  align-content: center;
  align-items: start;
  gap: 14px;
  min-height: 56px;
  padding: 12px 16px;
  cursor: pointer;
}
.choice + .choice {
  border-top: 1px solid var(--line);
}
/* The real box covers its whole row, unseen: the row is the tap. The recap's lines too. */
.choice-input,
.mark-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: transparent;
  transition:
    box-shadow var(--dur-press) var(--ease-out),
    background-color var(--dur-press) var(--ease-out);
}
.choice-input[type="checkbox"] + .choice-mark {
  border-radius: var(--radius-sm);
}
.choice-mark .ic,
.said-mark .ic {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}
.choice-input:checked + .choice-mark {
  background: var(--blue);
  box-shadow: none;
  color: var(--on-blue);
}
.choice:has(.choice-input:checked) {
  background: var(--p-pick);
}
.choice:has(.choice-input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
/* Where :has isn't known, the box itself takes the ring. */
@supports not selector(:has(a)) {
  .choice-input:focus-visible + .choice-mark,
  .mark-input:focus-visible + .mark-face {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
}
.choice:has(.choice-input:disabled) {
  cursor: default;
}
.choice:has(.choice-input:disabled) .choice-face,
.choice:has(.choice-input:disabled) .choice-mark {
  opacity: 0.5;
}
.max-note {
  margin-top: 12px;
}
.choice:has(.choice-input:disabled) .choice-mark {
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.choice-face {
  display: grid;
  gap: 2px;
}
.choice-label {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}
.choice-line {
  color: var(--muted);
  font-size: var(--p-meta);
  line-height: 1.35;
}
@media (hover: hover) and (pointer: fine) {
  .choice:not(:has(.choice-input:checked, .choice-input:disabled)):hover {
    background: var(--p-hover);
  }
}
.ask-form > .field,
.reveal {
  margin-top: 20px;
}
.add-words {
  margin-top: 16px;
}
.add-words-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  font-size: var(--p-row);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.add-words-open::-webkit-details-marker {
  display: none;
}
.add-words-opt {
  color: var(--muted);
  font-weight: 400;
}
.add-words[open] .add-words-open .ic {
  transform: rotate(45deg);
}
.add-words .field {
  margin-top: 8px;
}
.saved {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--p-meta);
}
.voice {
  margin-top: 16px;
}
.voice-list {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}
.voice-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--muted);
  font-size: var(--p-meta);
}
.voice-audio {
  width: 100%;
  max-width: 360px;
  height: 40px;
}
.voice-button {
  gap: 10px;
}
.voice-live {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}
.voice-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--blue);
}
.voice-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.t-meta,
.review-follow-q,
.note-when {
  color: var(--muted);
  font-size: var(--p-meta);
}
.ask-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 32px;
}
.ask-actions .text-link {
  justify-content: center;
  min-width: var(--tap);
}
.ask-actions .btn {
  min-width: 140px;
  min-height: var(--p-field-h);
}
/* On a phone the way forward stays in reach however long the choices run. */
@media not all and (min-width: 48em) {
  .ask-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 20px calc(var(--p-gutter) * -1) 0;
    padding: 12px var(--p-gutter) calc(env(safe-area-inset-bottom) + 12px);
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .is-focus {
    --p-foot: 0px;
  }
  /* The small viewport stays put while Safari's bar folds away, so the page never resizes
     under a scrolling thumb. */
  .is-focus .ask {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--p-bar-h) - env(safe-area-inset-top) - 28px);
  }
  .ask-form {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  .ask-form::after {
    content: "";
    flex: 1 0 20px;
    order: 1;
  }
  .ask-form > .ask-actions {
    order: 2;
    margin-top: 0;
  }
  .input-long {
    resize: none;
  }
  .btn-block-phone {
    width: 100%;
  }
}

/* ---------- Check your answers ---------- */
.tally {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.tally + .block {
  padding-top: 0;
  border-top: 0;
}
.tally-count {
  color: var(--muted);
  font-size: 1rem;
}
.tally-count strong {
  margin-right: 6px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 520;
  font-variation-settings: "opsz" 40;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}
.tally-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
}
.tally-go .btn {
  min-height: 48px;
}
.review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "q act" "a act";
  align-items: center;
  gap: 2px 16px;
  padding: 14px 0;
}
.review-row + .review-row {
  border-top: 1px solid var(--line);
}
.review-q {
  grid-area: q;
  color: var(--muted);
  font-size: var(--p-meta);
  line-height: 1.35;
}
.review-a {
  grid-area: a;
  display: grid;
  gap: 4px;
  font-size: var(--p-row);
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.review-act {
  grid-area: act;
  align-self: start;
}
.review-rest .review-act {
  align-self: center;
}
.review-n {
  display: block;
  color: var(--muted);
  font-size: var(--p-meta);
}
/* What a part still has open, in one row. */
.review-rest .review-q {
  grid-row: 1 / -1;
  font-size: var(--p-row);
}
.review-rest .review-q:has(.review-n) {
  color: var(--ink);
  font-weight: 500;
}
.review-follow {
  display: grid;
  font-weight: 400;
}
.review-voice {
  color: var(--muted);
  font-size: var(--p-meta);
  font-weight: 400;
}
.send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: var(--p-gap-block);
}
.send .btn {
  min-height: var(--p-field-h);
}
.send-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--p-meta);
}
.send-note .ic {
  width: 16px;
  height: 16px;
}
.notes {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.note {
  display: grid;
  gap: 2px;
  font-size: var(--p-row);
  overflow-wrap: anywhere;
}
.note-box .notice {
  margin-bottom: 16px;
}

/* ---------- Here's what we heard: tap any line we got wrong ---------- */
/* The recap sits on one sheet, a short document under the business's name. */
.sheet {
  max-width: calc(var(--p-measure) + 2 * var(--p-sheet-pad));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.sheet-head {
  margin: 0 var(--p-sheet-pad);
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--line);
}
.sheet-name {
  font-family: var(--font-display);
  font-size: var(--p-title);
  font-weight: 540;
  font-variation-settings: "opsz" 36;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.sheet-date {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--p-row);
}
/* Inside the sheet the group names step down, so the name, the goal and the groups are three
   tiers. */
.sheet .recap-head .h2 {
  font-size: 1.25rem;
}
/* On a phone the goal steps down a size, so its last words stay together. */
.sheet .recap-lead .mark-text {
  font-size: var(--p-goal-m);
}
.sheet .recap {
  max-width: none;
  padding: 20px var(--p-sheet-pad) var(--p-sheet-pad);
}
/* What follows the sheet keeps its width and needs no rule of its own. */
.heard .recap-send,
.heard .said {
  max-width: calc(var(--p-measure) + 2 * var(--p-sheet-pad));
  padding-top: 0;
  border-top: 0;
}
/* Each group's name is a section head, a tier over its lines. */
.recap-head {
  margin-top: var(--p-gap-block);
  padding-bottom: 12px;
}
.recap-head:first-child,
.recap-intro + .recap-head {
  margin-top: 0;
}
.recap-head .h2 {
  margin-bottom: 0;
}
/* The recap's own opening line is part of the letter, in ink; the page's lede is the grey one. */
.recap-intro {
  padding-bottom: var(--p-gap-head);
  font-size: 1rem;
  text-wrap: pretty;
}
/* The first line is their goal: the one sentence the whole plan hangs on, set big. */
.recap-lead .mark-text {
  font-family: var(--font-display);
  font-size: var(--p-lead);
  font-weight: 400;
  font-variation-settings: "opsz" 40;
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.recap-lead .mark-text strong {
  font-weight: 600;
  white-space: nowrap;
}
.recap-lead .mark-face {
  padding: 20px 0 28px;
}
.recap-line {
  border-top: 1px solid var(--line);
}
.mark {
  position: relative;
  display: block;
  cursor: pointer;
}
.mark-face {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  min-height: 56px;
  padding: 14px 0;
}
.mark-text {
  font-size: 1rem;
  line-height: 1.45;
  text-wrap: pretty;
}
/* The whole line is the tap. At rest it wears one quiet ring; marked, a tag says so. */
.mark-tag {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-size: var(--p-small);
  font-weight: 600;
  white-space: nowrap;
}
.mark-rest {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.mark-on {
  display: none;
}
.mark-on,
.is-off .mark-tag {
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--ink);
}
.mark-input:checked + .mark-face .mark-rest {
  display: none;
}
.mark-input:checked + .mark-face .mark-on {
  display: inline-flex;
}
.mark-input:checked + .mark-face .mark-text,
.is-off .mark-text {
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}
.mark:has(.mark-input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.recap-send {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.recap-more .field {
  margin-top: 8px;
}
.change-open {
  list-style: none;
}
.change-open::-webkit-details-marker {
  display: none;
}
.recap-send .btn {
  justify-self: start;
  min-height: var(--p-field-h);
}
/* With the script on, one button shows at a time. */
.recap-form.is-live:not(.has-marks) [data-recap-change],
.recap-form.is-live.has-marks [data-recap-yes] {
  display: none;
}
.said {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--p-row);
  font-weight: 500;
}
.said-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--white);
}
.heard > .notice {
  margin-top: 24px;
}
.quote {
  margin-top: 12px;
  padding-left: 16px;
  color: var(--muted);
  font-size: var(--p-row);
  overflow-wrap: anywhere;
}

/* The line under the bar, at every size: the business on the left; on its right who is signed
   in (from a laptop up) or, on a question, Save and exit. */
.who-end {
  display: flex;
  align-items: center;
  gap: 16px;
}
.who-out {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--p-meta);
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-underline-offset: 3px;
  cursor: pointer;
}
.is-focus .who-out {
  font-weight: 600;
}

/* ---------- Tablet up: the content widens (the frame changes at 64em) ---------- */
@media (min-width: 48em) {
  .block-head {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  /* The parts keep to a readable measure, so a name and its count read as one row. */
  .parts {
    max-width: var(--p-measure);
  }
  .due {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 28px;
    padding: 24px 28px;
  }
  .due-count .due-text {
    grid-column: 1 / -1;
  }
  .due .btn {
    order: 0;
    width: auto;
    min-width: 132px;
    min-height: 48px;
  }
  .due-parts {
    grid-column: 1 / -1;
    gap: 16px 24px;
  }
  .due-links {
    grid-column: 1 / -1;
    margin: -12px 0;
  }
  .due-part-list {
    grid-column: 1 / -1;
  }
  .due-goal {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .due-goal .btn {
    justify-self: start;
  }
  .sheet .recap-lead .mark-text {
    font-size: var(--p-lead);
  }
  .plate {
    padding: 24px;
  }
  .due .text-link {
    order: 0;
    margin: 0;
  }
  .row-part {
    grid-template-columns: minmax(0, 1fr) 96px 56px;
    grid-template-areas: "name bar count";
    min-height: var(--p-field-h);
  }
  .row-count {
    text-align: right;
  }
  .tally {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 20px 24px;
    padding: 24px 28px;
  }
  .tally-go {
    grid-column: 1 / -1;
  }
}
/* The top frame from a laptop up (a tablet keeps the phone's bar and menu). */
@media (min-width: 64em) {
  .bar,
  .scrim,
  .menu-pages,
  .menu-out,
  .drawer-close {
    display: none;
  }
  .menu-pages + .block:not(.menu-pages),
  .menu-pages + .menu-pages + .block {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .panel {
    display: flex;
    width: var(--p-panel-w);
    height: 100vh;
    height: 100dvh;
    padding: 20px 12px;
  }
  .switch {
    margin-top: 16px;
  }
  .switch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .nav-list {
    margin-top: 10px;
  }
  .panel-reach {
    margin-top: 28px;
  }
  .panel-art {
    width: 470px;
    left: -70px;
    bottom: -2px;
  }
  .main {
    margin-left: var(--p-panel-w);
    padding: 104px var(--p-gutter) 80px;
  }
  .who {
    position: absolute;
    top: -76px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    color: var(--muted);
    font-size: var(--p-meta);
  }
}

/* ---------- Laptop: the full panel, Home in two columns ---------- */
@media (min-width: 64em) {
  .panel {
    padding: 24px 16px;
  }
  .switch {
    margin-top: 20px;
  }
  .nav-list {
    margin-top: 12px;
  }
  .panel-art {
    width: 600px;
    left: -80px;
  }
  .main {
    padding: 108px var(--p-gutter) 96px;
  }
  .who {
    top: -80px;
  }
  .home-grid {
    grid-template-columns: minmax(0, 1fr) var(--p-side);
    align-items: start;
    gap: 0 48px;
  }
  .home-side .plate {
    margin-top: 0;
  }
  .due {
    padding: 24px;
  }
}

/* ---------- Tablet only: the panel is a rail, and the business moves to the top row ---------- */
@media (min-width: 48em) and (max-width: 63.99em) {
  .row-part {
    grid-template-columns: minmax(0, 1fr) 160px 56px;
  }
}

/* A mouse can aim smaller than a thumb: the laptop's menu rows tighten only for one. */
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  :root {
    --p-nav-h: 40px;
  }
}
@media (min-width: 64em) and (max-height: 52em) and (hover: hover) and (pointer: fine) {
  :root {
    --p-nav-h: 36px;
  }
}

/* ---------- The door: sign-in ---------- */
.signin {
  min-height: 100vh;
  min-height: 100svh;
}
.si-art {
  position: relative;
  height: 24vh;
  min-height: 184px;
  overflow: hidden;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
}
.si-ribbons {
  position: absolute;
  left: -40px;
  bottom: -10px;
  width: 560px;
  max-width: none;
  height: auto;
}
.si-lockup {
  position: absolute;
  z-index: 1;
  top: calc(env(safe-area-inset-top) + 14px);
  left: 20px;
}
.si-main {
  padding: 28px var(--p-gutter) calc(env(safe-area-inset-bottom) + 32px);
}
.si-form {
  max-width: 360px;
  margin: 0 auto;
}
.si-fields {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.si-fields .btn {
  min-height: var(--p-field-h);
}
.si-help,
.si-note {
  color: var(--muted);
  font-size: var(--p-meta);
  text-wrap: pretty;
}
.si-note {
  margin-top: 24px;
}
.si-help a,
.si-note a {
  /* At 200% text the address is wider than a phone: let it break. */
  overflow-wrap: anywhere;
  padding-block: var(--inline-tap);
  color: var(--ink);
  text-decoration-color: var(--link-line);
  text-underline-offset: 3px;
}
.si-foot {
  margin-top: 32px;
}
.door .lede {
  text-wrap: balance;
}
.cf-turnstile:empty {
  display: none;
}
@media (min-width: 48em) {
  .si-art {
    height: 36vh;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), 0 100%);
  }
  /* The ribbons cross the cut on their way up; none of them runs along it. */
  .si-ribbons {
    left: -180px;
    bottom: -190px;
    width: 1000px;
  }
  .si-lockup {
    top: 28px;
    left: 40px;
  }
  .si-main {
    padding-top: 40px;
  }
}
@media (min-width: 64em) {
  .signin {
    display: grid;
    grid-template-columns: 50% 50%;
  }
  .si-art {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    clip-path: none;
  }
  .si-ribbons {
    width: 1400px;
    left: -300px;
    bottom: -120px;
  }
  .si-lockup {
    top: 36px;
    left: 48px;
  }
  .si-main {
    display: grid;
    align-items: center;
    padding: 64px 48px;
  }
  .si-form {
    width: 360px;
  }
}

/* ---------- Page changes: the frame holds still, the page arrives ---------- */
@view-transition {
  navigation: auto;
}
.bar {
  view-transition-name: bar;
}
@media (min-width: 64em) {
  .panel {
    view-transition-name: panel;
  }
}
::view-transition-group(bar),
::view-transition-group(panel) {
  animation: none;
}
::view-transition-old(root) {
  animation: page-out 120ms var(--ease-in) both;
}
::view-transition-new(root) {
  animation: page-in 280ms var(--ease-out-expo) 100ms both;
}
/* One question to the next slides; Back slides the other way. The old one is gone before the
   new one starts, so two questions never show at once. Back, the count, the progress track and
   the buttons hold still (CD concept, round 7: "Next stays put"). */
.ask-form {
  view-transition-name: ask;
}
.ask-top {
  view-transition-name: ask-top;
}
.ask .tracks {
  view-transition-name: ask-track;
}
.ask-actions {
  view-transition-name: ask-go;
}
::view-transition-group(ask-top),
::view-transition-group(ask-track),
::view-transition-group(ask-go),
::view-transition-old(ask-track),
::view-transition-new(ask-track),
::view-transition-old(ask-go),
::view-transition-new(ask-go) {
  animation: none;
}
/* The count changes with the question, never ahead of it. */
::view-transition-old(ask-top):not(:only-child) {
  animation: page-out 140ms var(--ease-in) both;
}
::view-transition-new(ask-top):not(:only-child) {
  animation: page-out 160ms var(--ease-out) 120ms reverse both;
}
::view-transition-old(ask-track):not(:only-child),
::view-transition-old(ask-go):not(:only-child) {
  display: none;
}
/* Into the questions from another page, or out of them: these come and go with the page. */
::view-transition-new(ask-top):only-child,
::view-transition-new(ask-track):only-child,
::view-transition-new(ask-go):only-child {
  animation: page-in 280ms var(--ease-out-expo) 100ms both;
}
::view-transition-old(ask-top):only-child,
::view-transition-old(ask-track):only-child,
::view-transition-old(ask-go):only-child,
::view-transition-old(ask):only-child {
  animation: page-out 120ms var(--ease-in) both;
}
::view-transition-group(ask) {
  animation: none;
}
::view-transition-old(ask) {
  animation: ask-out 140ms var(--ease-in) both;
}
::view-transition-new(ask) {
  animation: ask-in 280ms var(--ease-out-expo) 120ms both;
}
html:active-view-transition-type(back)::view-transition-old(ask) {
  animation-name: ask-out-back;
}
html:active-view-transition-type(back)::view-transition-new(ask) {
  animation-name: ask-in-back;
}
@keyframes page-out {
  to {
    opacity: 0;
  }
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes ask-out {
  to {
    opacity: 0;
    transform: translateX(-24px);
  }
}
@keyframes ask-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}
@keyframes ask-out-back {
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}
@keyframes ask-in-back {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
}

.btn-on-blue {
  margin-top: 12px;
  background: var(--on-blue);
  color: var(--blue);
}
.btn-on-blue.is-pressed,
.btn-on-blue:active {
  background: color-mix(in srgb, var(--on-blue) 86%, var(--blue));
}

/* Their answers just went in: the count rises and each part fills, once. */
.due-arrive .due-amount {
  animation: arrive 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.due-arrive .track > .on {
  transform-origin: left;
  animation: fill 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.due-arrive .due-part:nth-child(2) .on {
  animation-delay: 80ms;
}
.due-arrive .due-part:nth-child(3) .on {
  animation-delay: 160ms;
}
.due-arrive .due-part:nth-child(4) .on {
  animation-delay: 240ms;
}
@keyframes arrive {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}
@keyframes fill {
  from {
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  @view-transition {
    navigation: none;
  }
}
@media print {
  .bar,
  .panel,
  .scrim,
  .who {
    display: none !important;
  }
  :root {
    --p-panel-w: 0px;
  }
  .main {
    margin: 0;
    padding: 0;
  }
}

/* ---------- Round 8: one tracker, what we found, one job a question ---------- */

/* Home's one tracker: the three steps in order, inside the box, the live one marked. */
.trail {
  display: grid;
  gap: 0;
  margin: -4px 0 4px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.trail-step {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  grid-template-areas: "ic name state" ". meta meta";
  align-items: center;
  column-gap: 12px;
  min-height: 32px;
  padding: 4px 0;
}
.trail-step .row-mark {
  grid-area: ic;
}
.trail-name {
  grid-area: name;
  color: var(--muted);
  font-size: var(--p-meta);
  font-weight: 500;
  line-height: 1.3;
}
.trail-state {
  grid-area: state;
  color: var(--muted);
  font-size: var(--p-meta);
  font-weight: 600;
}
.trail-meta {
  grid-area: meta;
  color: var(--muted);
  font-size: var(--p-meta);
  line-height: 1.35;
}
.trail-step[aria-current="step"] .trail-name {
  color: var(--ink);
  font-weight: 600;
}
.trail-step[data-state="now"][aria-current="step"] .trail-state {
  color: var(--blue);
}
.due-name {
  margin-top: 0;
}

/* What we found: each guess a row, its source under it, one tap to fix it. Rules sit only
   between rows, never over the first one. */
.found > li + li {
  border-top: 1px solid var(--line);
}
.found-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-areas: "q go" "a go" "src go";
  align-items: center;
  gap: 2px 16px;
  padding: 16px 0;
  color: var(--ink);
  text-decoration: none;
}
.found-q {
  grid-area: q;
  color: var(--muted);
  font-size: var(--p-meta);
  line-height: 1.35;
}
.found-a {
  grid-area: a;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* A follow-up's answer reads as an answer, in ink; only its question is gray. */
.found-more {
  display: block;
  color: var(--ink);
  font-size: var(--p-row);
  font-weight: 400;
}
.found-src {
  grid-area: src;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--blue);
  font-size: var(--p-meta);
  font-weight: 600;
}
.found-go {
  grid-area: go;
  color: var(--muted);
}
.found-go .ic {
  width: 18px;
  height: 18px;
}
a.found-row:is(:active, .is-pressed) {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.found-go-form {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}
.found-then {
  color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  a.found-row:hover .found-go {
    color: var(--ink);
  }
}
/* On a phone, "Looks right" stays in reach at the foot, as Next does. */
@media not all and (min-width: 48em) {
  .found-go-form {
    position: sticky;
    bottom: 0;
    margin: 20px calc(var(--p-gutter) * -1) calc(var(--p-foot) * -1);
    padding: 12px var(--p-gutter) calc(env(safe-area-inset-bottom) + 12px);
    border-top: 1px solid var(--line);
    background: var(--paper, var(--white));
  }
  .found-go-form .btn {
    width: 100%;
  }
}

/* A guess opened from what we found says so, once, in place of the hint. */
.ask-because {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--p-row);
}
.ask-guess {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--p-row);
}
.ask-hint .ask-example {
  margin: 0;
  font-size: inherit;
}

/* Our guess, as a tag on review. */
.tag-guess {
  justify-self: start;
  margin: 0 0 2px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
}
.tally-guess {
  color: var(--muted);
  font-weight: 400;
}
/* Review rows open with a tap anywhere on them; a chevron says so. */
.review-tap {
  position: relative;
}
.review-tap .review-change {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: -12px;
  color: var(--muted);
}
.review-tap .review-change::after {
  content: "";
  position: absolute;
  inset: 0;
}
.review-tap:has(.review-change:is(:active, .is-pressed)) {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.send-note + .send-note {
  margin-top: 4px;
}

/* Touch targets: every button a thumb can reach is at least 44 px tall. */
.btn-small {
  min-height: 44px;
}
.bar-exit {
  min-height: 44px;
}
/* A button that sent its form says so while the next page comes. */
.btn.is-busy {
  background: var(--blue-deep);
  cursor: progress;
}

/* "Something else" and follow-up lines never open under the pinned Next bar. */
html:has(body.is-focus) {
  scroll-padding-bottom: 96px;
}

/* Motion on taps: a pick lands with a small pop, progress fills as it grows. */
.choice-input:checked + .choice-mark {
  animation: pick 160ms var(--ease-out);
}
@keyframes pick {
  50% {
    scale: 1.14;
  }
}
.segs .track > .on,
.segs .track > .now {
  transform-origin: left;
  animation: fill 300ms var(--ease-out);
}

/* Your answers so far: the laptop's blue panel fills in as they answer. */
.panel-plan {
  display: none;
}
@media (min-width: 64em) {
  .panel-plan {
    display: block;
    margin-top: 28px;
    padding: 0 var(--p-axis);
  }
  .plan-title {
    margin-bottom: 8px;
    color: var(--on-blue-muted);
    font-size: var(--p-meta);
    font-weight: 600;
    letter-spacing: 0;
  }
  .plan-list {
    display: grid;
    gap: 12px;
  }
  .plan-row dt {
    color: var(--on-blue-muted);
    font-size: var(--p-meta);
  }
  .plan-row dd {
    color: var(--on-blue);
    font-size: var(--p-meta);
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .plan-row {
    animation: arrive 300ms var(--ease-out) both;
  }
  .plan-empty {
    color: var(--on-blue-muted);
    font-size: var(--p-meta);
    line-height: 1.4;
  }
}

/* Round 8 fixes after the critic */
.trail {
  grid-column: 1 / -1;
}
.found-src {
  margin-top: 8px;
  color: var(--muted);
  font-weight: 500;
}
.due-part-name,
.due-part-n {
  font-size: var(--p-meta);
}
/* On a tablet and a laptop the main button stays in view at the foot, as on a phone. */
@media (min-width: 48em) {
  .ask-actions,
  .found-go-form {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-inline: -16px;
    padding: 14px 16px 18px;
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .found-go-form {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 24px;
  }
}
/* The example waits behind one tap, so the choices start high on a phone. */
.ask-ex {
  margin-top: 6px;
}
.ask-ex-open {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink);
  font-size: var(--p-meta);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.ask-ex-open::-webkit-details-marker {
  display: none;
}
.ask-ex .ask-example {
  margin-top: 4px;
  max-width: 34em;
}

/* Round 8, UX pass 2: choices hold still while a form is on its way; small targets reach 44px. */
form.is-sending .choice,
form.is-sending .choice-input {
  pointer-events: none;
}
.bar-mark {
  min-width: var(--tap);
}
.ask-ex-open {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Round 8, critic and creative director pass 2. */
/* Progress is one blue, however far it has got. */
.track > .on {
  background: var(--blue);
}
p,
li,
dd,
dt,
h1,
h2 {
  text-wrap: pretty;
}
/* What we found runs the page's full column, grouped by where we looked (Jason, 2026-11-11:
   "why is it off to the left side"). */
.found-group + .found-group {
  margin-top: 28px;
}
.found-from {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--p-meta);
  font-weight: 600;
  letter-spacing: 0;
}
.found-more-q {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--p-meta);
}
/* The pinned bar's rule runs the width of the column, never past it. */
@media (min-width: 48em) {
  .ask-actions,
  .found-go-form {
    margin-inline: 0;
    padding-inline: 0;
  }
}
/* Laptop, open to type: the box sits beside the question, in the answer's place. */
@media (min-width: 64em) {
  .found-inline[open] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 20px;
    column-gap: 24px;
  }
  .found-inline[open] > summary {
    grid-area: 1 / 1 / 2 / -1;
  }
  .found-inline[open] > .found-edit {
    position: relative;
    z-index: 1;
    grid-area: 1 / 2 / 2 / 3;
    padding-top: 14px;
  }
}
/* On a phone the main button fills its row, on every pinned bar. */
@media not all and (min-width: 48em) {
  .ask-actions .btn {
    flex: 1 1 auto;
  }
}
/* "We'd suggest" sits under the card's line, the same place on every card, never wrapping
   under a long name. */
.choice-face > .tag-suggest {
  justify-self: start;
  margin: 6px 0 0;
}
/* Send answers and Back to Home fill their row on a phone too; "Answer the next one" sits under. */
@media not all and (min-width: 48em) {
  .tally-go .btn,
  .send .btn {
    width: 100%;
  }
}
/* The steps still to come are named quietly, under the step names. */
.trail-step:not([aria-current="step"]) .trail-state {
  font-weight: 500;
}

/* Round 8, pass 2 (Jason's answers, 2026-11-11). */

/* What we found and Check your answers: one quiet list. The place we looked is a band inside
   the list, not a heading floating over a gap; from a tablet up the question sits beside its
   answer. */
/* The first band opens the list on its own: no rule over it (Jason, 2026-11-11). */
.found-list.is-grouped .found {
  border-top: 0;
}
.found-group + .found-group {
  margin-top: 0;
}
/* Where we looked is a soft gray band over its lines (Jason, round 8.1: "It looked nice before");
   only the thin rule that sat above the first band is gone. */
.found-from {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--wall);
  color: var(--muted);
  font-size: var(--p-meta);
  font-weight: 600;
}
.found-group:first-child .found-from {
  margin-top: 0;
}
.found-list.is-grouped .found > li:first-child {
  border-top: 0;
}
.found-row {
  padding: 14px 0;
}
.found-done {
  grid-area: src;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--p-meta);
  font-weight: 600;
}
.found-done .ic {
  width: 16px;
  height: 16px;
  color: var(--blue);
}
.is-just .found-done {
  animation: arrive 420ms var(--ease-out) both;
}
.is-just .found-done .ic {
  animation: pick 320ms var(--ease-out) 200ms both;
}
/* The fresh tint reaches past the column so the words keep the column line and still have
   room inside it. */
.is-just > .found-row,
.is-just > .found-inline > .found-row {
  position: relative;
  isolation: isolate;
}
.is-just > .found-row::before,
.is-just > .found-inline > .found-row::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  opacity: 0;
  animation: just-fixed 1600ms var(--ease-out);
}
@keyframes just-fixed {
  from {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-just .found-done,
  .is-just .found-done .ic,
  .is-just > .found-row::before,
  .is-just > .found-inline > .found-row::before {
    animation: none;
  }
}
.found-inline {
  display: none;
}
.found-inline > summary {
  list-style: none;
  cursor: pointer;
}
.found-inline > summary::-webkit-details-marker {
  display: none;
}
.found-inline[open] .found-go {
  rotate: 90deg;
}
.found-edit {
  display: grid;
  gap: 12px;
  padding: 0 0 18px;
}
.found-edit-go {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
}
/* Open to type: the box takes the answer's place, so the row shows only the question. */
.found-inline[open] > summary .found-a,
.found-inline[open] > summary .found-done,
.found-inline[open] > summary .found-src {
  display: none;
}
@media (min-width: 48em) {
  .found-row,
  .review-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 20px;
    grid-template-areas: "q a go" "q src go";
    column-gap: 24px;
    align-items: baseline;
  }
  .review-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    grid-template-areas: "q a act";
  }
  .review-rest {
    grid-template-areas: "q q act";
  }
  /* The arrow lines up with the answer's first line, never the middle of a tall row. */
  .found-go {
    align-self: start;
    margin-top: 2px;
  }
  .review-act {
    align-self: start;
    margin-top: -10px;
  }
  .review-rest .review-act {
    align-self: baseline;
    margin-top: 0;
  }
  .found-q,
  .review-q {
    grid-row: 1 / -1;
    font-size: var(--p-row);
  }
  .review-rest .review-q {
    grid-row: auto;
  }
  .found-src {
    margin-top: 8px;
  }
  .found-done {
    margin-top: 2px;
  }
}
@media (min-width: 64em) {
  .found-link {
    display: none;
  }
  .found-inline {
    display: block;
  }
}
/* Check your answers: each part is its heading over a framed list; no rule and gap twice. */
.review-part.block {
  margin-top: 36px;
  padding-top: 0;
  border-top: 0;
}
.review-list {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.review-rest .review-q {
  color: var(--muted);
}

/* Home: the phone menu button is the website's: a 40px ring inside a 48px tap, on the gutter. */
@media not all and (min-width: 64em) {
  .bar {
    padding-inline: max(var(--p-gutter), calc((100vw - var(--p-col)) / 2));
  }
}
.bar-menu {
  position: relative;
  margin-right: -4px;
  box-shadow: none;
}
.bar-menu::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--on-blue-soft);
}
/* Focus shows on every ground: white rings on blue. */
.btn-on-blue:focus-visible,
.found-inline > summary:focus-visible {
  outline: 2px solid var(--on-blue);
  outline-offset: 3px;
}
.found-inline > summary:focus-visible,
.found-row:focus-visible,
.review-change:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- The website's header (Jason, 2026-11-11) ----------
   Phones and tablets keep the blue bar: the lockup and the site's round menu button, on every
   screen, questions too. From a laptop up the header is the site's own on paper, measured from
   mainspringdigital.com at 1440: the ink lockup with its blue mark, and the white capsule with
   hairline edge, links at 78% that firm up on hover, the page you're on underlined, and Text us
   in blue past a rule. It scrolls away with the page. */
.bar-lockup,
.bar-nav,
.plan-side {
  display: none;
}
@media (min-width: 64em) {
  :root {
    --p-bar-h: 72px;
  }
  .bar {
    display: grid;
    position: absolute;
    inset: 0 0 auto;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    min-height: var(--p-bar-h);
    /* The bar's ends line up with the page's column. */
    padding: 0 max(var(--p-gutter), calc((100vw - var(--p-col)) / 2));
    background: none;
    color: var(--text);
  }
  .bar-mark,
  .bar-biz,
  .bar-menu {
    display: none;
  }
  .bar-lockup {
    display: inline-flex;
    grid-column: 1;
  }
  .bar .bar-lockup,
  .bar .bar-lockup .lockup-name {
    color: var(--text);
  }
  .bar .bar-lockup .lockup-mark {
    width: 14px;
    height: 24px;
    color: var(--blue);
  }
  .bar-lockup .lockup-name {
    height: 15px;
  }
  .bar-nav,
  .bar-exit {
    grid-column: 3;
  }
  .bar-exit {
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text);
  }
  .bar a:focus-visible,
  .bar button:focus-visible {
    outline-color: var(--ink);
  }
  /* The line under the bar: the business on the left, who is signed in (or Save and exit) on
     the right. */
  .who {
    justify-content: space-between;
  }
  .who .who-biz {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: var(--tap);
    color: var(--ink);
    font-size: var(--p-meta);
    font-weight: 600;
    text-decoration: none;
  }
  .who-end {
    margin-left: auto;
  }
  .bar-nav {
    display: flex;
    align-items: center;
    height: var(--tap);
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .bar-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 1.1rem;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: var(--text-ui);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 6px;
    opacity: 0.78;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition:
      opacity var(--dur-hover) var(--ease-out),
      text-decoration-color var(--dur-hover) var(--ease-out);
  }
  .bar-link[aria-current="page"] {
    opacity: 1;
    text-decoration-color: currentColor;
  }
  .bar-cta {
    color: var(--blue);
    opacity: 1;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    box-shadow: inset 1px 0 0 var(--line);
  }
  .bar-link:focus-visible {
    outline-offset: -4px;
  }
  body.app .panel,
  body.app .scrim {
    display: none;
  }
  .main {
    margin-left: 0;
    padding-top: calc(var(--p-bar-h) + 88px);
  }
  .who {
    top: -76px;
  }
}
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  .bar-link:hover {
    opacity: 1;
  }
}
/* Laptop: what they've said so far sits beside the question, quiet, on the page. */
@media (min-width: 64em) {
  /* The question and the list beside it share the page's one column, so nothing moves when
     they start answering. */
  .main:has(.plan-side) {
    display: grid;
    grid-template-columns: minmax(0, calc(var(--p-col) - 304px)) 240px;
    justify-content: center;
    column-gap: 64px;
  }
  .main:has(.plan-side) > .col {
    width: 100%;
    margin: 0;
  }
  /* The line under the header still runs the page's whole column, so Save and exit ends on
     the capsule's edge as Sign out does on Home. */
  .main:has(.plan-side) .who {
    right: -304px;
  }
  .plan-side {
    display: block;
    position: sticky;
    top: 32px;
    align-self: start;
    /* Its rule meets the question's progress line. */
    margin-top: 56px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .plan-side .plan-title {
    margin-bottom: 12px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--p-meta);
    font-weight: 600;
    letter-spacing: 0;
  }
  .plan-side .plan-list {
    display: grid;
    gap: 14px;
  }
  .plan-side .plan-row dt,
  .plan-side .plan-empty {
    color: var(--muted);
    font-size: var(--p-small);
  }
  .plan-side .plan-row dd {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    font-size: var(--p-meta);
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
/* Phone menu: Text us is the site's white button, Email us and Privacy sit small under it. */
@media not all and (min-width: 64em) {
  .panel-reach .reach-list {
    align-items: center;
    row-gap: 4px;
  }
  .panel-reach .reach-cta {
    flex: 1 0 100%;
    margin-bottom: 8px;
  }
  .panel-reach .reach-cta .btn {
    width: 100%;
  }
}
/* A tablet's menu keeps Text us at a button's width, not the screen's. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .panel-reach .reach-cta .btn {
    width: auto;
    min-width: 240px;
  }
}
@media (min-width: 48em) {
  .due-part-list {
    grid-template-columns: repeat(2, max-content);
  }
}

/* One lockup at every size, as on the website; on a phone the business is named on the page. */
@media not all and (min-width: 64em) {
  .bar-mark,
  .bar-biz {
    display: none;
  }
  .bar-lockup {
    display: inline-flex;
    grid-column: 1 / 3;
  }
  .bar-lockup .lockup-mark {
    width: 20px;
    height: 24px;
  }
  .bar-lockup .lockup-name {
    height: 13px;
  }
  .who {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
  }
  .who .who-biz {
    display: flex;
    min-width: 0;
    color: var(--ink);
    font-size: var(--p-meta);
    font-weight: 600;
  }
  .who-end {
    display: none;
  }
  /* On a question the row holds the way out; its 48px tap reaches into the space above. */
  .is-focus .who {
    margin: -14px 0 -2px;
  }
  .is-focus .who-end {
    display: flex;
  }
  /* The menu's rows are all white, as the site's; the page you are on is underlined. */
  .panel .nav-row {
    color: var(--on-blue);
  }
  .panel .nav-row[aria-current="page"] .nav-word {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
  .panel .nav-row[aria-current="page"]::after {
    display: none;
  }
  .panel-who .who-line {
    color: color-mix(in srgb, var(--on-blue) 80%, transparent);
    font-size: var(--p-meta);
  }
}

/* Design system 1.1: one white card on a light ground. Home's card is the tracker; the business
   sits on the page under a rule, no box. */
.plate,
.home-side .plate {
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

/* The steps, their line and the words under them share the box's own edge at every width, as on
   a phone (critic, round 8.1 fourth pass: a shorter tracker left three right edges in one box). */
@media (min-width: 48em) {
  .due-meta {
    max-width: 40em;
  }
}

/* Just sent: a blue disc with a white check beside the title, on the title's own line. It scales
   in and the check draws, once (Jason, round 8.1: "a more prominent success message"; then "it's
   sitting there on its own row, which doesn't really make too much sense"). */
.title:has(.sent-mark) {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* The line under it keeps the same room below the check as above it (critic, round 8.1 third pass). */
.title:has(.sent-mark) + .lede {
  margin-top: 14px;
}
.sent-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: var(--on-blue);
  animation: sent-pop 600ms var(--ease-out) 100ms both;
}
.sent-mark svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
  animation: sent-draw 340ms var(--ease-out) 380ms forwards;
}
@media (min-width: 48em) {
  .title:has(.sent-mark) {
    gap: 18px;
  }
  .sent-mark {
    width: 56px;
    height: 56px;
  }
  .sent-mark svg {
    width: 32px;
    height: 32px;
  }
}
/* Round 8.1, third pass, the ideas Jason picked: one soft ring leaves the check as it lands, once;
   the tracker's Done tick wears the same blue; on a phone the receipt line sits in the box. */
.sent-mark {
  position: relative;
}
.sent-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--blue);
  opacity: 0;
  animation: sent-ring 900ms var(--ease-out) 680ms;
}
@keyframes sent-ring {
  from {
    transform: scale(1);
    opacity: 0.35;
  }
  to {
    transform: scale(1.3);
    opacity: 0;
  }
}
/* Home's tracker in blue: Done ticks match the big check, and the step we're on wears a soft
   blue ring, so the blue walks down the steps as things move (Jason's picks, round 8.1). */
.trail .row-mark[data-state="done"] {
  background: var(--blue);
  color: var(--on-blue);
}
.trail [aria-current="step"] > .row-mark {
  box-shadow:
    inset 0 0 0 5px var(--blue),
    0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent);
}
.due-receipt {
  text-wrap: balance;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--p-meta);
  font-weight: 500;
  line-height: 1.4;
}
@media (max-width: 47.99em) {
  .title:has(.sent-mark) + .lede {
    display: none;
  }
}
@media (min-width: 48em) {
  .due-receipt {
    display: none;
  }
}
/* Never instant (Jason, round 8.1 sixth pass: "There's no reason for things to be just instant
   and ... unpolished looking"). One calm order, done in about 1.4 s: the words rise, the disc grows
   in with a soft settle, the check draws as it lands, the box rises in with its words (never shown
   empty), then the ring leaves the disc. */
@keyframes sent-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  55% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.title:has(.sent-mark) > span:last-child,
.due-arrive {
  animation: sent-rise 560ms var(--ease-out) 40ms both;
}
.due-arrive {
  animation-delay: 300ms;
}
@keyframes sent-rise {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
}
@keyframes sent-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sent-mark,
  .title:has(.sent-mark) > span:last-child,
  .due-arrive {
    animation: none;
  }
  .sent-mark::after {
    animation: none;
  }
  .sent-mark svg {
    animation: none;
    stroke-dashoffset: 0;
  }
}