/* meCove — mecove.com
   One stylesheet, no framework, no build step.

   Colours are meCove's own design tokens, read from Ryan's Paper board and recorded in
   ../tech-design/design-board.md § B-3. They are copied here by value because this site
   has no build step and cannot import them; if the board moves, this file is corrected.

   The type scale is NOT the board's application scale. The board's app scale — 14px body,
   22/28/34 headings — is sized for dense screens a professional works in all day. Ryan's
   two site artboards (W1 desktop 1440, W2 phone 390) set their own marketing scale, and
   the sizes below are read off those two artboards and interpolated with clamp() so a
   width between them lands between them. Every clamp is anchored on Ryan's own two
   numbers: the lower bound is the 390 value and the upper bound is the 1440 value.

   Rewritten 20 September 2026 from those two artboards. What changed: the header carries
   the cove mark and drops the "by Let's Attune" byline, the footer is light rather than
   deep, and the front page is a marketing page with illustrations rather than two
   text panels. The five other pages keep their own components untouched. */

/* ---------- fonts, self-hosted ---------- */

/* Self-hosted rather than loaded from Google Fonts, on purpose: this site's whole claim
   is that it is careful with people's data, and a font request to a third party tells
   that party the IP address of everyone who reads the privacy policy. Two files per
   family, both variable. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */

:root {
  /* colour — meCove's design tokens, by value */
  --color-canvas: #f1f5f6;
  --color-inset: #edf5f8;
  --color-surface: #ffffff;
  --color-ink: #16232b;
  --color-secondary: #3c474d;
  --color-muted: #667279;
  /* The board's second muted grey, minted for text sitting on --color-canvas rather
     than on white. Used here for the small print, where #667279 on #F1F5F6 measures
     4.50:1 — passing, but on the line. */
  --color-muted-canvas: #5a656b;
  --color-subtle: #646e74;
  --color-border: #dde4e6;
  --color-border-strong: #c8d2d5;
  --color-border-subtle: #e7ecee;
  --color-primary: #0f566e;
  --color-deep: #093b4d;
  --color-tint: #d6e8ee;
  --color-nav-active: #cde7eb;
  --color-signal: #e56b4e;
  --color-signal-deep: #a93f26;
  --color-signal-tint: #fbeae4;
  --color-warm: #f6e4dc;
  --color-warm-ink: #a9603f;

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;

  /* Interpolated between Ryan's phone (390) and desktop (1440) values. */
  --step-hero: clamp(2.25rem, 1.879rem + 1.524vw, 3.25rem); /* 36 → 52 */
  --step-h2: clamp(1.875rem, 1.643rem + 0.952vw, 2.5rem); /* 30 → 40 */
  --step-h2-sm: clamp(1.875rem, 1.782rem + 0.381vw, 2rem); /* 30 → 32 */
  --step-closing: clamp(1.875rem, 1.55rem + 1.333vw, 2.75rem); /* 30 → 44 */
  --step-cardtitle: clamp(1.25rem, 1.064rem + 0.762vw, 1.75rem); /* 20 → 28 */
  --step-coltitle: clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem); /* 20 → 24 */
  --step-lead: clamp(1rem, 0.93rem + 0.286vw, 1.1875rem); /* 16 → 19 */
  --step-body: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem); /* 16 → 17 */
  --step-small: 0.9375rem; /* 15 */
  --step-tiny: 0.8125rem; /* 13 */

  /* spacing — the board's four steps, extended upward for a page rather than a panel */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  /* Ryan sets 150px between the big front-page sections on desktop and 56px on the
     phone board; this interpolates the two. */
  --space-band: clamp(56px, 21px + 8.95vw, 150px);

  --radius-chip: 8px;
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;

  --measure: 34rem;
  --page: 68rem;
  --page-wide: 90rem; /* 1440 */
}

/* ---------- base ---------- */

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

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

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

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-secondary);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-hero);
}
h2 {
  font-size: var(--step-h2);
}
h3 {
  font-size: var(--step-coltitle);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

p {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
}

ul,
ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.35em;
  max-width: var(--measure);
}

li {
  margin-bottom: var(--space-2);
}

li::marker {
  color: var(--color-muted);
}

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

a:hover {
  color: var(--color-deep);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-signal-deep);
  outline-offset: 3px;
  border-radius: var(--radius-chip);
}

strong {
  color: var(--color-ink);
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

img {
  max-width: 100%;
  height: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  z-index: 10;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-chip);
  text-decoration: none;
  transition: top 120ms ease;
}

.skip-link:focus {
  top: var(--space-3);
  color: #fff;
}

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

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Ryan's front page is 1248 of content inside 1440, i.e. 96px of gutter, and 342 inside
   390, i.e. 24px. The clamp lands on 96 at 1440 and on 26 at 390; it never falls below
   20, which is what keeps 320 from scrolling sideways. */
.wrap--wide {
  width: 100%;
  max-width: var(--page-wide);
  margin: 0 auto;
  padding-left: clamp(20px, 6.6667vw, 96px);
  padding-right: clamp(20px, 6.6667vw, 96px);
}

.section {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.section--surface {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.section--warm {
  background: var(--color-warm);
  border-top: 1px solid rgba(169, 96, 63, 0.14);
  border-bottom: 1px solid rgba(169, 96, 63, 0.14);
}

/* ---------- header ----------

   Read off Ryan's W1 nav (20 Sep 2026): the cove mark at 34, the wordmark "meCove" at
   20/24 bold in --color-deep, four links at 15 medium, and one filled pill on the right.

   Two things about it are departures from what this site carried before, and both are
   deliberate rather than accidental — see docs/build-tracker.md and the finding issues.
   The byline "by Let's Attune" is gone, because the drawn header does not have one; and
   the phone board's hamburger is not built, because no menu is drawn behind it, so the
   four links wrap onto their own row exactly as they did before. */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
}

.site-header .wrap,
.site-header .wrap--wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}

.brand-mark {
  display: block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-deep);
}

.brand:hover .brand-name {
  color: var(--color-primary);
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  max-width: none;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--color-secondary);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-tint);
}

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

/* Returning professionals sign in to the web app at app.mecove.com (San, 07 Oct 2026). A
   quiet link beside the button, so the button stays the one call to action. Clients sign in
   in the phone app, so the label names who it is for. */
.header-signin {
  flex-shrink: 0;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.header-signin:hover {
  color: var(--color-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.header-cta {
  flex-shrink: 0;
}

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

/* Ryan draws one shape: a filled pill, and an outlined pill for the quieter of two. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-small);
  line-height: 1.2;
  text-decoration: none;
  padding: 13px var(--space-4);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-primary);
}

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

.btn--lg {
  font-size: 1rem;
  padding: 17px 30px;
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  padding: 15px var(--space-4);
}

.btn--outline:hover {
  background: var(--color-inset);
  color: var(--color-deep);
  border-color: var(--color-deep);
}

/* ---------- page head (inner pages) ---------- */

.page-head {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.page-head h1 {
  font-size: clamp(1.875rem, 1.643rem + 0.952vw, 2.5rem);
}

.page-head p {
  font-size: var(--step-lead);
  color: var(--color-muted);
  margin-bottom: 0;
}

/* ---------- cards (inner pages) ---------- */

.cards {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
  max-width: none;
}

@media (min-width: 40rem) {
  .cards--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin: 0;
}

.section--surface .card {
  background: var(--color-inset);
  border-color: var(--color-border-subtle);
}

.card h3 {
  margin-bottom: var(--space-2);
}

.card p:last-child,
.card ul:last-child {
  margin-bottom: 0;
}

/* ========================================================================
   The front page
   Every number below is read off Ryan's W1 (1440) and W2 (390) artboards.

   One colour substitution, made deliberately and measured rather than guessed:
   wherever the board sets small text in --color-muted #667279, this page sets
   --color-muted-canvas #5A656B instead. Every muted use on this page is under
   16px, and #667279 measures 4.94:1 on white and exactly 4.50:1 on --color-canvas
   — at or barely above the 4.5:1 floor. #5A656B measures 5.99:1 and 5.45:1 for the
   same two grounds. Both are the board's own tokens; nothing was invented.
   ======================================================================== */

.front {
  background: var(--color-surface);
}

.band {
  padding-top: var(--space-band);
}

/* the small uppercase label above a heading */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step-tiny);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
  max-width: none;
}

.eyebrow--dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow--dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-signal);
  flex-shrink: 0;
}

.front h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-h2);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-deep);
  margin: 0 0 var(--space-4);
  max-width: 820px;
}

.front .prose-lead {
  font-size: var(--step-body);
  line-height: 1.6;
  color: var(--color-secondary);
  max-width: 820px;
  margin: 0;
}

/* ---------- hero ----------
   The headline says who meCove is for; the line under it says it is one platform for
   both sides. Then the flow (San's sketch, 29 Sep 2026): the professional and the client
   converge on one session. The paragraph follows as its caption. Every colour is an
   existing token. */

.hero {
  background: var(--color-surface);
  padding-top: clamp(32px, 20px + 3.05vw, 56px);
}

/* the headline block is centred over the three boxes (San, 29 Sep 2026) */
.hero-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero .eyebrow {
  margin-bottom: var(--space-3);
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-hero);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-deep);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

/* the line under the headline: the headline says what meCove is, this says what is
   different about it (San, 28 Sep 2026) */
.hero .hero-what {
  margin: 0 0 var(--space-3);
  max-width: none;
  font-family: var(--font-sans);
  font-size: var(--step-coltitle);
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-primary);
}

.hero .lead {
  font-size: var(--step-lead);
  line-height: 1.58;
  color: var(--color-secondary);
  margin: 0;
  max-width: 44rem;
}

/* ---------- the flow: two people converging on one session ----------
   San's sketch, 29 Sep 2026. On a desktop the professional sits top left and the client
   bottom left; a curve runs from each into the session on the right. A coral dot travels
   each curve. Hovering one side lights its curve, lifts its drawing and quietens the other
   side; hovering the session lights both. All of it is CSS and inline SVG: no script. */

.flow {
  display: grid;
  gap: 20px;
  margin-top: var(--space-5);
  grid-template-areas:
    "pro"
    "session"
    "client";
}

.flow-side--pro { grid-area: pro; }
.flow-side--client { grid-area: client; }
.flow-session { grid-area: session; }
.flow-curve { display: none; }

.flow p {
  margin: 0;
  max-width: none;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--color-secondary);
}

/* a side: its drawing and title, then a speech bubble with what they get */
.flow-side {
  display: grid;
  gap: 12px;
  transition: opacity 0.3s ease;
}

.flow-who {
  display: grid;
  justify-items: start;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-control);
}

.flow-who:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* the drawings' canvases carry empty space above the figures; the frame is aligned to
   the bottom so only that space is clipped */
.flow-art {
  display: grid;
  place-items: end center;
  height: 128px;
  overflow: hidden;
}

.flow-art img {
  height: 128px;
  width: auto;
  max-width: none;
  transition: transform 0.35s ease;
}

.flow-title {
  font-family: var(--font-serif);
  font-size: var(--step-coltitle);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--color-deep);
}

.flow-title::after {
  content: "\00a0→";
  font-family: var(--font-sans);
  font-size: 0.8em;
  color: var(--color-primary);
}

.flow-who:hover .flow-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.bubble {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px 22px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* each bubble makes one point, in one line, a size up from body text (San, 04 Oct 2026:
   the hero was too texty; the detail lives in the sections below) */
.flow .bubble-line {
  font-size: var(--step-lead);
  line-height: 1.45;
  color: var(--color-ink);
}

.bubble--pro {
  background: var(--color-tint);
}

.bubble--client {
  background: var(--color-canvas);
}

/* the session, where both paths arrive */
.flow-session {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 20px 24px;
  border-radius: 24px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.flow-session .flow-who {
  justify-items: center;
  text-align: center;
}

.flow-session .flow-art {
  height: 132px;
}

.flow-session .flow-art img {
  height: 176px;
}

/* on a phone the three stack, joined by a short dashed line */
@media (max-width: 59.99rem) {
  .flow-session {
    position: relative;
  }

  .flow-session::before,
  .flow-session::after {
    content: "";
    position: absolute;
    left: 50%;
    height: 20px;
    border-left: 2px dashed var(--color-signal);
  }

  .flow-session::before {
    top: -22px;
  }

  .flow-session::after {
    bottom: -22px;
  }


  .flow {
    margin-top: 24px;
  }

  /* the drawing sits beside its title, so both ways in come sooner */
  .flow-side .flow-who {
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: end;
    gap: 12px;
  }

  .flow-side .flow-art {
    height: 96px;
  }

  .flow-side .flow-art img {
    height: 96px;
  }
}

@media (min-width: 60rem) {
  .flow {
    grid-template-columns: minmax(0, 1fr) clamp(64px, 7vw, 120px) minmax(0, 0.6fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "pro cpro session"
      "client cclient session";
    gap: 16px 0;
    align-items: center;
  }

  .flow-side {
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
  }

  .flow-who {
    justify-items: center;
    text-align: center;
  }

  /* each bubble's tail points back at its person */
  .bubble::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    width: 16px;
    height: 16px;
    background: inherit;
    border-left: inherit;
    border-bottom: inherit;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 0 0 0 4px;
  }

  .flow-curve {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .flow-curve--pro { grid-area: cpro; }
  .flow-curve--client { grid-area: cclient; }

  /* the curve runs from the side's middle to the session's middle, which is where the
     two rows meet */
  .flow-curve--pro { align-self: stretch; margin-bottom: -8px; }
  .flow-curve--client { align-self: stretch; margin-top: -8px; }

  .curve-line,
  .curve-dot {
    fill: none;
    vector-effect: non-scaling-stroke;
  }

  .curve-line {
    stroke: var(--color-border-strong);
    stroke-width: 2;
    stroke-dasharray: 1.2 1.6;
    transition: stroke 0.3s ease;
  }

  .curve-dot {
    stroke: var(--color-signal);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 0.01 99.99;
    stroke-dashoffset: 100;
    animation: flow-dot 3.6s linear infinite;
  }

  .flow-curve--client .curve-dot {
    animation-delay: -1.8s;
  }
}

@keyframes flow-dot {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

/* hovering a side: its path lights, its drawing lifts, the other side quietens */
.flow-side:hover .flow-art img {
  transform: translateY(-6px);
}

.flow-side:hover .bubble,
.flow-session:hover {
  border-color: var(--color-signal);
  box-shadow: 0 12px 32px rgba(9, 59, 77, 0.08);
}

.flow:has(.flow-side--pro:hover) .flow-curve--pro .curve-line,
.flow:has(.flow-side--client:hover) .flow-curve--client .curve-line,
.flow:has(.flow-session:hover) .curve-line {
  stroke: var(--color-signal);
  stroke-dasharray: none;
}

.flow:has(.flow-side--pro:hover) .flow-curve--pro .curve-dot,
.flow:has(.flow-side--client:hover) .flow-curve--client .curve-dot,
.flow:has(.flow-session:hover) .curve-dot {
  animation-duration: 1.6s;
}

.flow:has(.flow-side--pro:hover) .flow-side--client,
.flow:has(.flow-side--client:hover) .flow-side--pro {
  opacity: 0.45;
}

.flow:has(.flow-side:hover) .flow-session,
.flow:has(.flow-session:hover) .flow-session {
  border-color: var(--color-signal);
}

@media (prefers-reduced-motion: reduce) {
  .curve-dot {
    animation: none;
    stroke-dashoffset: 50;
  }

  .flow-art img,
  .flow-side,
  .bubble,
  .flow-session,
  .curve-line {
    transition: none;
  }

  .flow-side:hover .flow-art img {
    transform: none;
  }
}

.door-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.door-offer {
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--color-deep);
}

/* Using meCove alone is a real way in, so it reads as a callout rather than fine print
   (San, 28 Sep 2026). Warm ground from the set; ink on it measures well above 4.5:1. */
.solo-note,
.flow .solo-note {
  justify-self: start;
  display: inline-block;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  background: var(--color-warm);
  color: var(--color-ink);
  font-size: var(--step-small);
  line-height: 1.4;
}

.solo-note strong {
  color: var(--color-signal-deep);
}

/* On a desktop screen the hero, including the whole flow, fits in one screenful
   (San, 29 Sep 2026): less air above, a one-line headline where the width allows, a
   wider paragraph, and shorter drawings. The drawings' own canvases carry empty space
   above the figures, so the frame is aligned to the bottom and clips only that space. */
@media (min-width: 60rem) {
  .hero {
    padding-top: 18px;
  }

  .hero .eyebrow {
    margin-bottom: 10px;
  }

  .hero-head {
    max-width: 1200px;
  }

  .hero h1 {
    font-size: clamp(2.25rem, 1.4rem + 1.6vw, 3rem);
    margin-bottom: 10px;
  }

  .hero .hero-what {
    margin-bottom: 0;
  }


  .flow {
    margin-top: 20px;
  }
}

/* one invented week, shown twice */

.pair {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
  justify-items: center;
}

@media (min-width: 60rem) {
  .pair {
    grid-template-columns: minmax(0, 1.45fr) auto minmax(0, 0.8fr);
    align-items: center;
    gap: var(--space-4);
  }
}

.pair p {
  margin: 0;
  max-width: none;
}

.pair-side {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 640px;
}

.pair-side--client {
  justify-items: center;
}

.pair .pair-role {
  font-size: var(--step-tiny);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pair-side--client .pair-role {
  color: var(--color-signal-deep);
}

.pair-browser {
  border-radius: var(--radius-card);
  border: 1px solid rgba(9, 59, 77, 0.12);
  background: var(--color-surface);
  box-shadow:
    0 2px 6px rgba(9, 59, 77, 0.08),
    0 24px 60px rgba(9, 59, 77, 0.1);
  overflow: hidden;
}

.pair-bridge {
  display: grid;
  gap: 8px;
  padding: clamp(16px, 12px + 1vw, 24px);
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--color-secondary);
}

.pair .pair-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.pair-title b {
  font-size: 1.0625rem;
  color: var(--color-ink);
}

.pair-title span {
  font-size: var(--step-tiny);
  color: var(--color-muted-canvas);
}

.pair .pair-sent {
  font-size: var(--step-tiny);
  background: var(--color-tint);
  color: var(--color-deep);
  border-radius: var(--radius-chip);
  padding: 8px 12px;
}

.pair .pair-label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-canvas);
}

.pair-bridge blockquote {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--color-signal);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-ink);
}

/* the join between the two screens: points up on a phone, left on a desktop,
   because the professional's screen is above or to the left */
.pair .pair-link {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 150px;
  text-align: center;
  font-size: var(--step-tiny);
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-muted-canvas);
}

.pair-arrow {
  position: relative;
  width: 2px;
  height: 40px;
  background: var(--color-signal);
}

.pair-arrow::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -2px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom: 8px solid var(--color-signal);
}

@media (min-width: 60rem) {
  .pair-arrow {
    width: 72px;
    height: 2px;
  }

  .pair-arrow::before {
    left: -2px;
    top: -5px;
    border: 6px solid transparent;
    border-left: 0;
    border-right: 8px solid var(--color-signal);
  }
}

.pair-phone {
  width: 100%;
  max-width: 300px;
  display: grid;
  gap: 10px;
  padding: 28px 22px 26px;
  border-radius: 36px;
  border: 1px solid rgba(9, 59, 77, 0.12);
  background: var(--color-canvas);
  box-shadow:
    0 4px 12px rgba(9, 59, 77, 0.06),
    0 32px 64px rgba(9, 59, 77, 0.12);
}

.pair-week {
  display: grid;
  gap: 12px;
}

.pair-week p {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  align-items: baseline;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-ink);
}

.pair-week b {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-canvas);
}

.pair .pair-threads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pair-threads span {
  font-size: var(--step-tiny);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-warm);
  color: var(--color-ink);
}

/* ---------- for you, between sessions ---------- */

.for-you-copy .solo-note {
  margin-top: var(--space-4);
}

.for-you {
  scroll-margin-top: var(--space-4);
}

.for-you-grid {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
}

@media (min-width: 62rem) {
  .for-you-grid {
    grid-template-columns: minmax(0, 560px) 390px;
    gap: 80px;
    align-items: center;
    justify-content: space-between;
    justify-items: stretch;
  }
}

.for-you-copy {
  max-width: 560px;
}

.for-you-copy h2 {
  max-width: 560px;
}

.dot-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  max-width: none;
  display: grid;
  gap: 12px;
}

.dot-list li {
  position: relative;
  padding-left: 18px;
  margin: 0;
  font-size: var(--step-body);
  line-height: 1.6;
  color: var(--color-secondary);
}

.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-signal);
}

/* ---------- the phone screen, drawn rather than photographed ---------- */

.phone {
  width: 100%;
  max-width: 390px;
  border-radius: 36px;
  border: 1px solid rgba(9, 59, 77, 0.12);
  background: var(--color-canvas);
  box-shadow:
    0 4px 12px rgba(9, 59, 77, 0.06),
    0 32px 64px rgba(9, 59, 77, 0.12);
  overflow: hidden;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-ink);
}

.phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 22px 8px;
}

.phone-top h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}

.phone-icons {
  display: flex;
  gap: 18px;
  color: var(--color-subtle);
}

.phone-body {
  padding: 8px 22px 0;
  display: grid;
  /* minmax(0,…) so the 296px thread cards cannot widen the track past the phone */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.phone-body > * {
  min-width: 0;
}

.week-card {
  background: var(--color-surface);
  border-radius: 24px 24px 0 0;
  box-shadow:
    0 1px 2px rgba(9, 59, 77, 0.05),
    0 8px 24px rgba(9, 59, 77, 0.06);
  position: relative;
  overflow: hidden;
  padding: 14px 16px 0;
  height: 158px;
}

.week-card .wk-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 16px;
  position: relative;
  z-index: 1;
}

.week-card .wk-head b {
  font-weight: 600;
  color: var(--color-ink);
}

.week-card .wk-head span {
  font-weight: 500;
  color: var(--color-muted-canvas);
}

.week-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.week-days {
  position: absolute;
  left: 0;
  top: 40px;
  width: 100%;
  height: 118px;
  display: flex;
  padding: 0 10px;
  z-index: 1;
}

.week-days > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.week-days .d {
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  color: var(--color-muted-canvas);
}

.week-days .n {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-ink);
}

/* Dot heights: classes, not inline styles, because the site policy (default-src 'self') drops inline styles. */
.week-days .h7 { height: 7px; }
.week-days .h11 { height: 11px; }
.week-days .h14 { height: 14px; }
.week-days .h24 { height: 24px; }
.week-days .h25 { height: 25px; }
.week-days .h52 { height: 52px; }
.week-days .h58 { height: 58px; }

.week-days .pip {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.week-days .pip--open {
  width: 10px;
  height: 10px;
  background: var(--color-surface);
  border: 1.5px solid rgba(15, 86, 110, 0.4);
}

.week-days .pip--today {
  width: 14px;
  height: 14px;
  background: var(--color-signal);
  box-shadow: 0 0 0 5px rgba(229, 107, 78, 0.18);
}

.week-days .today .d,
.week-days .today .n {
  color: var(--color-signal-deep);
  font-weight: 700;
}

.week-foot {
  display: block;
  width: 100%;
  height: 26px;
}

.week-caption {
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--color-muted-canvas);
  margin: 10px 0 0;
  max-width: none;
}

.threads-head {
  padding: 0 4px;
}

.threads-head b {
  display: block;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--color-ink);
}

.threads-head span {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-muted-canvas);
}

.threads {
  display: flex;
  gap: 12px;
  margin: 10px -22px 0;
  padding: 2px 22px 10px;
  overflow: hidden;
}

.thread {
  width: 296px;
  flex-shrink: 0;
  background: var(--color-surface);
  border-radius: 16px;
  padding: 13px 16px 15px;
  box-shadow:
    0 1px 2px rgba(9, 59, 77, 0.05),
    0 8px 24px rgba(9, 59, 77, 0.06);
}

.thread > b {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.thread-row {
  display: flex;
  gap: 12px;
}

.thread-rail {
  width: 10px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.thread-rail i {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(15, 86, 110, 0.45);
  flex-shrink: 0;
}

.thread-rail .line {
  flex: 1;
  width: 1.5px;
  background: rgba(15, 86, 110, 0.3);
  margin: 4px 0;
}

.thread-rail .line--dashed {
  width: 0;
  background: none;
  border-left: 1.5px dashed rgba(15, 86, 110, 0.28);
}

.thread-rail .now {
  width: 9px;
  height: 9px;
  background: var(--color-signal);
}

.thread-rail .open {
  width: 8px;
  height: 8px;
  background: var(--color-surface);
  border: 1.5px solid rgba(15, 86, 110, 0.4);
}

.thread-items {
  flex: 1;
  display: grid;
  gap: 8px;
}

.thread-items .when {
  display: block;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-canvas);
  margin-bottom: 2px;
}

.thread-items .when--now {
  color: var(--color-signal-deep);
}

.thread-items .then {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 21px;
  color: var(--color-muted-canvas);
  margin: 0;
  max-width: none;
}

.thread-items .now-said {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 23px;
  color: var(--color-ink);
  margin: 0;
  max-width: none;
}

.thread-items .nothing {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-muted-canvas);
  margin: 0;
  max-width: none;
}

.notice {
  background: var(--color-tint);
  border-radius: 22px 22px 0 0;
  padding: 20px 22px 6px;
}

.notice .label {
  display: block;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.notice p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 25px;
  color: var(--color-ink);
  margin: 0;
  max-width: none;
}

.notice-foot {
  display: block;
  width: 100%;
  height: 46px;
}

.phone-export {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 18px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--color-primary);
}

.phone-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px 24px;
  background: var(--color-surface);
  box-shadow:
    0 -1px 0 rgba(9, 59, 77, 0.06),
    0 -8px 24px rgba(9, 59, 77, 0.04);
}

.phone-tabs > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-muted-canvas);
}

.phone-tabs .pill {
  width: 56px;
  height: 32px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-tabs .on {
  color: var(--color-signal-deep);
  font-weight: 700;
}

.phone-tabs .on .pill {
  background: var(--color-signal-tint);
}

/* ---------- before your next session ---------- */

.steps {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  max-width: none;
  display: grid;
  gap: 0;
}

.steps li {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) 0;
  border-top: 1.5px solid var(--color-tint);
}

.steps li:last-child {
  border-bottom: 1.5px solid var(--color-tint);
}

.steps .num {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 24px;
  color: var(--color-signal-deep);
  width: 28px;
  flex-shrink: 0;
}

.steps p {
  margin: 0;
  max-width: none;
  font-size: var(--step-small);
  line-height: 1.53;
  color: var(--color-secondary);
}

@media (min-width: 62rem) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
  .steps li {
    flex-direction: column;
    gap: 12px;
    padding: 18px 0 0;
    border-top: 1.5px solid var(--color-primary);
  }
  .steps li:last-child {
    border-bottom: 0;
  }
  .steps .num {
    font-size: 40px;
    line-height: 40px;
    width: auto;
  }
  .steps p {
    font-size: 1rem;
    line-height: 25px;
    color: var(--color-ink);
  }
}

.caption {
  font-size: var(--step-tiny);
  line-height: 18px;
  color: var(--color-muted-canvas);
  margin: 12px 0 0;
  max-width: 342px;
}

/* ---------- for coaches, counsellors and therapists ---------- */

.for-practice {
  scroll-margin-top: var(--space-4);
}

.for-practice-head {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 62rem) {
  .for-practice-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-5);
  }
  .for-practice-head h2 {
    max-width: 720px;
    margin-bottom: 0;
  }
}

.for-practice .prose-lead {
  margin-top: var(--space-3);
}

/* The list of what a professional gets, and the sentence about seats, are the old
   front page's professional half put back — every line of it was already checked
   against the spec that owns it on 16 Sep 2026. Two columns at desktop so the block
   does not become a wall under Ryan's one-line lead. */
.dot-list--two {
  margin-top: var(--space-5);
}

@media (min-width: 62rem) {
  .dot-list--two {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    row-gap: 14px;
  }
}

.caption--wide {
  max-width: 62ch;
  font-size: var(--step-small);
  line-height: 1.6;
  margin-top: var(--space-4);
}

/* "What meCove is not" had its own band and its own heading before the redesign, and
   the redesign left the sentence in place but took the heading away, which turned it
   into fine print. The heading is back and the sentence is at body size; it keeps
   Ryan's position rather than re-adding a band. */
.not-block {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.not-block h3 {
  font-family: var(--font-sans);
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-canvas);
  margin: 0 0 var(--space-2);
}

.not-block p {
  margin: 0;
  max-width: none;
  font-size: var(--step-body);
  line-height: 1.6;
  color: var(--color-secondary);
}

/* ---------- the browser screen, drawn rather than photographed ---------- */

.browser {
  display: none;
}

@media (min-width: 62rem) {
  .browser {
    display: block;
    margin-top: var(--space-4);
    border-radius: 16px;
    border: 1px solid rgba(9, 59, 77, 0.12);
    background: var(--color-surface);
    box-shadow:
      0 2px 6px rgba(9, 59, 77, 0.08),
      0 24px 60px rgba(9, 59, 77, 0.1);
    overflow: hidden;
  }
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: var(--color-inset);
}

.browser-bar i {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.browser-bar span {
  padding-left: 12px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-muted-canvas);
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 20px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.app-topbar .mark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.app-topbar .mark img {
  display: block;
}

.app-topbar .who {
  display: flex;
  align-items: center;
  gap: 9px;
}

.app-topbar .avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-warm);
  /* The board sets --color-warm-ink #A9603F here. Measured on --color-warm #F6E4DC it
     is 3.85:1, under the 4.5:1 floor, so this uses --color-signal-deep #A93F26 from the
     same family — 4.98:1 — and the pair is raised as a finding. */
  color: var(--color-signal-deep);
  font-size: 11px;
  line-height: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-topbar .name {
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: var(--color-ink);
}

.app {
  display: flex;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-ink);
}

.app-side {
  width: 240px;
  flex-shrink: 0;
  padding: 20px 12px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.app-side .label {
  display: block;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-canvas);
  padding: 6px 10px 10px;
}

.app-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: 2px;
}

.app-side li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  margin: 0;
  border-radius: 12px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

.app-side li.on {
  background: var(--color-nav-active);
  color: var(--color-deep);
  font-weight: 600;
}

.app-side .count {
  margin-left: auto;
  background: var(--color-signal-deep);
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 2px 7px;
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 22px 24px 28px;
  background: var(--color-canvas);
  display: grid;
  gap: 14px;
  align-content: start;
}

.app-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

.app-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.app-title h4 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-title .range {
  background: var(--color-tint);
  color: var(--color-deep);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.app-title p {
  margin: 7px 0 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-secondary);
}

.app-title .acts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
}

.app-title .acts b {
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  border-radius: 10px;
  padding: 12px 18px;
}

.app-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
}

.app-chips .chip {
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-ink);
  font-weight: 500;
}

.app-chips .chip.on {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
  font-weight: 600;
}

.app-chips .aside {
  padding-left: 6px;
  color: var(--color-muted-canvas);
}

.app-cols {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.app-report {
  flex: 1;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  padding: 24px;
  display: grid;
  gap: 18px;
}

.app-report > .meta-line {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-muted-canvas);
  margin: 0;
  max-width: none;
}

.app-report .label {
  display: block;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 7px;
}

.app-report p {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 23px;
  color: var(--color-secondary);
}

.app-quote {
  padding-left: 14px;
  border-left: 2px solid var(--color-tint);
  margin-bottom: 10px;
}

.app-quote q {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 27px;
  color: var(--color-ink);
}

.app-quote .when {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-muted-canvas);
}

.app-notes {
  width: 300px;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  padding: 20px;
  display: grid;
  gap: 12px;
}

.app-notes .tabs {
  display: flex;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
}

.app-notes .tabs span {
  border-radius: var(--radius-chip);
  padding: 6px 11px;
  color: var(--color-muted-canvas);
  font-weight: 500;
}

.app-notes .tabs .on {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-weight: 600;
}

.app-notes .pad {
  min-height: 150px;
  background: var(--color-canvas);
  border: 1px solid var(--color-tint);
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
  line-height: 21px;
  color: var(--color-ink);
}

.app-notes .save {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  line-height: 14px;
  color: var(--color-muted-canvas);
}

.app-notes .save b {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
}

.app-notes hr {
  margin: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.app-notes .fineprint {
  margin: 0;
  max-width: none;
  font-size: 11px;
  line-height: 18px;
  color: var(--color-muted-canvas);
}

/* ---------- what you keep ---------- */

.keep-cols {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

@media (min-width: 62rem) {
  .keep-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

.keep-cols li {
  margin: 0;
}

.keep-cols h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-coltitle);
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0 0 10px;
}

.keep-cols p {
  margin: 0;
  max-width: none;
  font-size: var(--step-body);
  line-height: 1.6;
  color: var(--color-secondary);
}

/* ---------- when and where ---------- */

.when-grid {
  display: grid;
  gap: var(--space-5);
  padding-bottom: clamp(56px, 20px + 8.9vw, 120px);
}

@media (min-width: 62rem) {
  .when-grid {
    grid-template-columns: 620px minmax(0, 1fr);
    gap: 80px;
    align-items: start;
  }
  .when-note {
    padding-top: 36px;
  }
}

.when-grid h2 {
  max-width: 620px;
  margin-bottom: 0;
}

.when-note p {
  max-width: none;
  font-size: var(--step-body);
  line-height: 1.6;
  color: var(--color-secondary);
  margin: 0 0 14px;
}

.when-note .fineprint {
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--color-muted-canvas);
  margin: 0;
}

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

.closing-panel {
  background: var(--color-tint);
  border-radius: 32px 32px 0 0;
  padding: 36px clamp(24px, 4.45vw, 64px) 0;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.closing-panel h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-closing);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-deep);
  margin: 0;
  max-width: 520px;
}

.closing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
}

.closing-cta .mail {
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--color-primary);
}

.closing-art {
  display: block;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 318 / 250;
  object-fit: cover;
  object-position: 50% 65%;
}

@media (min-width: 62rem) {
  .closing-panel {
    grid-template-columns: 520px minmax(0, 1fr);
    align-items: end;
    justify-items: start;
    text-align: left;
    gap: var(--space-5);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 440px;
  }
  .closing-copy {
    display: grid;
    gap: 22px;
    padding-bottom: 72px;
    align-self: end;
  }
  .closing-cta {
    justify-content: flex-start;
  }
  .closing-art {
    justify-self: end;
    align-self: end;
    aspect-ratio: 600 / 440;
    object-position: 50% 62%;
  }
}

/* ---------- plain prose pages ---------- */

.prose {
  max-width: 42rem;
}

.prose h2 {
  margin-top: var(--space-5);
  font-size: var(--step-coltitle);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.prose h3 {
  margin-top: var(--space-4);
  font-size: var(--step-body);
}

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

.prose p,
.prose ul,
.prose ol {
  max-width: none;
}

.note {
  background: var(--color-inset);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-chip);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.note p:last-child {
  margin-bottom: 0;
}

.note :is(h2, h3) {
  margin-top: 0;
  font-size: var(--step-body);
  font-family: var(--font-sans);
  font-weight: 700;
}

.meta {
  font-size: var(--step-small);
  color: var(--color-muted-canvas);
}

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

.faq {
  max-width: 42rem;
}

.faq h2 {
  font-family: var(--font-sans);
  font-size: var(--step-coltitle);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.faq > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.faq p,
.faq ul {
  max-width: none;
}

/* ---------- contact ---------- */

.contact-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  max-width: 34rem;
  display: grid;
  gap: var(--space-3);
}

.contact-list li,
.contact-list > div {
  margin: 0;
}

.contact-list dd {
  margin: 0;
  color: var(--color-ink);
  font-weight: 500;
}

.contact-list dt,
.contact-label {
  display: block;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--color-muted-canvas);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

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

   Ryan's W1 footer is light rather than deep: the registered name on the left at 13px in
   --color-muted, four links on the right at 13px medium in --color-secondary. The one
   thing added to it here is hello@mecove.com, which this site is required to carry and
   which the drawn footer leaves out because the block above it on the front page says it.
   The other five pages have no such block. */

.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
  font-size: var(--step-tiny);
  line-height: 18px;
}

.site-footer .wrap,
.site-footer .wrap--wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: 0;
  margin: 0;
  max-width: none;
  order: 2;
}

.footer-links li {
  margin: 0;
}

.footer-links a {
  font-weight: 500;
  color: var(--color-secondary);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.footer-legal {
  margin: 0;
  max-width: none;
  color: var(--color-muted-canvas);
  order: 1;
}

.footer-legal a {
  color: var(--color-primary);
  font-weight: 500;
}

/* ---------- D4: the invitation link opened on a laptop (open-on-your-phone.html) ---------- */

.d4 {
  padding-block: var(--space-7);
}

.d4-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  max-width: 34rem;
}

.d4-mark {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.d4-wrap h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.5rem + 1vw, 1.875rem);
  line-height: 1.33;
  color: var(--color-ink);
}

.d4-wrap p {
  margin: 0;
}

.d4-lead {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-secondary);
}

.d4-stores {
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--color-muted-canvas);
}