/*
 * Local-only homepage presentation study.
 *
 * Production remains untouched. This layer contains the approved typography
 * direction and the Morrow-derived palette trial for main-content sections.
 */

:root {
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-brand: 'Fraunces', Georgia, serif;
  --font-apple-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;

  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-semibold: 600;
  --type-weight-bold: 700;

  --type-tracking-display: -0.055em;
  --type-tracking-heading: -0.035em;
  --type-tracking-label: 0.08em;
  --type-tracking-hero: -0.04em;
  --type-leading-hero: 1.02;

  /* Hero: a quiet, opaque surface instead of the page-level glass gradient. */
  --hero-surface: var(--bg);

  /* Header Morrow: one size controls the art and its layout stage. */
  --brand-icon-size: 3.5rem;
  --brand-icon-width: calc(var(--brand-icon-size) * 0.828);
  --brand-icon-stage-width: var(--brand-icon-size);

  /* Canonical Morrow character palette. */
  --morrow-mint-highlight: #ADE5C8;
  --morrow-green-core: #72B18F;
  --morrow-green-deep: #3D7059;
  --morrow-face-cream: #F1E2CA;
  --morrow-cheek: #EF999B;
  --morrow-star: #F2D58F;
  --morrow-feature-ink: #263029;

  /* Accessible, theme-aware applications of the character palette. */
  --morrow-accent-readable: var(--morrow-green-deep);
  --morrow-palette-line: color-mix(in srgb, var(--morrow-green-deep) 24%, transparent);
  --morrow-section-mint: color-mix(in srgb, var(--morrow-mint-highlight) 18%, var(--bg));
  --morrow-section-cream: color-mix(in srgb, var(--morrow-face-cream) 24%, var(--white));
  --morrow-panel-mint: color-mix(in srgb, var(--morrow-mint-highlight) 16%, var(--glass-panel-strong));
  --morrow-panel-cream: color-mix(in srgb, var(--morrow-face-cream) 16%, var(--glass-panel-strong));
  --morrow-section-dark: color-mix(in srgb, var(--morrow-green-deep) 42%, var(--bg-dark));
}

html.dark {
  /* Dark mode is the same Morrow palette at a lower luminance. */
  --bg: #101713;
  --bg-warm: #18211C;
  --bg-dark: #0B100D;
  --white: #1C2721;
  --ink: #F3EEE7;
  --ink-soft: #C8BFB5;
  --ink-faint: #A79E95;
  --accent: #83C79F;
  --accent-hover: #A2DDBB;
  --accent-light: color-mix(in srgb, var(--morrow-green-core) 16%, var(--bg));
  --accent-line: color-mix(in srgb, var(--morrow-mint-highlight) 54%, transparent);
  --accent-line-soft: color-mix(in srgb, var(--morrow-mint-highlight) 24%, transparent);
  --border: #32423A;
  --glass-control: rgba(31, 45, 38, 0.74);
  --glass-control-hover: rgba(42, 60, 50, 0.86);
  --glass-panel: rgba(27, 39, 33, 0.78);
  --glass-panel-strong: rgba(31, 43, 37, 0.9);
  --glass-panel-opaque: #1C2721;
  --glass-section: rgba(19, 29, 24, 0.92);
  --glass-section-warm: rgba(29, 36, 31, 0.92);
  --glass-border: rgba(173, 229, 200, 0.16);
  --glass-border-subtle: rgba(173, 229, 200, 0.1);
  --glass-highlight: rgba(241, 226, 202, 0.12);

  /* Black-led hierarchy: dark surfaces are intentionally hue-free. */
  --home-dark-canvas: #0C0C0C;
  --home-dark-section: #101010;
  --home-dark-section-alt: #121212;
  --home-dark-panel: #1A1A1A;
  --home-dark-panel-raised: #242424;
  --home-dark-control: #2D2D2D;
  --home-dark-control-hover: #383838;
  --home-dark-line: rgba(255, 255, 255, 0.1);
  --home-dark-line-strong: rgba(255, 255, 255, 0.17);

  /* Exact live-site dark canvas, reserved for the Question Workbench scene. */
  --home-dark-question-canvas:
    radial-gradient(circle at 12% 4%, rgba(70, 143, 107, 0.22), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(115, 101, 188, 0.2), transparent 34rem),
    radial-gradient(circle at 52% 62%, rgba(167, 102, 60, 0.1), transparent 40rem),
    #161311;

  /* The founder/Morrow scene keeps its warmer character-led environment. */
  --home-dark-founder: #1D1A18;
  --home-dark-founder-panel: #252525;
  --home-dark-founder-line: rgba(241, 226, 202, 0.18);

  /* Footer stays visually identical to its light-mode treatment. */
  --home-dark-chrome: #1A1614;
  --home-dark-chrome-line-soft: rgba(255, 255, 255, 0.12);
  --home-dark-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.26);

  --ink-on-dark: #C8BFB5;
  --ink-on-accent: #0B110E;
  --ink-inverse-strong: #F3EEE7;
  --ink-inverse-muted: rgba(243, 238, 231, 0.68);
  --ink-inverse-faint: rgba(243, 238, 231, 0.5);

  --morrow-accent-readable: var(--morrow-mint-highlight);
  --morrow-palette-line: color-mix(in srgb, var(--morrow-mint-highlight) 20%, transparent);
  --morrow-section-mint: color-mix(in srgb, var(--morrow-green-deep) 18%, var(--bg));
  --morrow-section-cream: color-mix(in srgb, var(--morrow-face-cream) 6%, var(--bg));
  --morrow-panel-mint: color-mix(in srgb, var(--morrow-green-deep) 18%, var(--glass-panel-strong));
  --morrow-panel-cream: color-mix(in srgb, var(--morrow-face-cream) 8%, var(--glass-panel-strong));
  --morrow-section-dark: color-mix(in srgb, var(--morrow-green-deep) 30%, var(--bg-dark));
}

body {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: var(--type-weight-regular);
}

/* Keep the handwritten build-status note legible without changing header geometry. */
.homepage .nav-build-status-callout {
  font-size: var(--text-sm);
  line-height: 1.1;
}

@media (min-width: 85rem) {
  .homepage .nav-build-status-callout {
    font-size: var(--text-base);
  }
}

.homepage body {
  background-color: var(--bg);
  background-image: none;
  background-attachment: scroll;
}

.homepage .hero-reimagined {
  background: var(--hero-surface);
}

.hero-copy h1 {
  font-family: var(--font-brand);
  font-style: normal;
  font-weight: var(--type-weight-regular);
  letter-spacing: var(--type-tracking-hero);
  line-height: var(--type-leading-hero);
  text-wrap: balance;
}

.homepage main :where(h2, h3, h4),
.not-line,
.not-payoff,
.site-page .page-header h1,
.site-page .blog-header h1,
.site-page .policy-header h1,
.blog-article-page .post-header h1,
.site-page .notfound-code,
.notfound-code,
.notfound-title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-heading);
}

.production-example .example-intro .section-title {
  font-family: var(--font-brand);
  font-weight: var(--type-weight-regular);
  letter-spacing: var(--type-tracking-hero);
  line-height: 1.08;
  text-wrap: balance;
}

.nav-wordmark,
.footer-wordmark,
.founder-pullquote,
.founder .pullquote {
  font-family: var(--font-brand);
  font-weight: var(--type-weight-regular);
}

.site-navigation a:not(.nav-wordmark),
.text-link {
  font-weight: var(--type-weight-medium);
}

.btn,
button,
.eyebrow,
.section-label,
.question-demo-label,
.question-source-kind,
.workbench-medication-brand-label {
  font-weight: var(--type-weight-semibold);
}

.eyebrow,
.section-label,
.question-demo-label,
.question-source-kind {
  letter-spacing: var(--type-tracking-label);
}

/* The product demo deliberately follows native iOS typography. */
.v4-workbench {
  --workbench-font-ui: var(--font-apple-ui);
  font-family: var(--workbench-font-ui);
  font-style: normal;
  font-weight: var(--type-weight-regular);
}

.v4-workbench :where(h3, h4, strong, dt),
.v4-workbench .workbench-medication-brand-label,
.v4-workbench .workbench-medication-edit,
.v4-workbench .workbench-report-error {
  font-weight: var(--type-weight-semibold);
}

.v4-workbench :where(p, dd, small, button) {
  font-style: normal;
}

/* Keep a single device outline; the inherited inset ring doubled the frame at
   the top and bottom and picked up a green cast in dark mode. */
.homepage .iphone-frame::after {
  content: none;
}

/* The hero demo is a column within the hero, not the legacy full-width
   `.example` section. Remove the inherited chapter rules above and below it. */
.homepage .hero-grid > .production-example {
  border-bottom: 0;
  border-top: 0;
}

/* The visit overview uses a native-style navigation row without a divider. */
.homepage .workbench-header {
  border-bottom: 0;
}

.homepage .workbench-attach {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.homepage .workbench-attach-icon {
  height: 1.25rem;
  width: 1.25rem;
}

.homepage .workbench-attach:hover {
  background: transparent;
  border-color: transparent;
  color: var(--accent-hover);
}

.homepage .workbench-attach:active {
  box-shadow: none;
  opacity: 0.62;
  transform: scale(0.92);
}

.homepage .workbench-attach:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: -0.25rem;
}

.v4-workbench .workbench-recorded {
  font-style: italic;
}

.founder-story-details {
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
}

.founder-story-prompt {
  color: var(--promo);
  font-size: var(--text-xs);
  font-weight: var(--type-weight-regular);
  letter-spacing: var(--type-tracking-label);
  margin: 0;
  text-transform: uppercase;
}

.founder-story-details summary {
  align-items: center;
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--type-weight-semibold);
  list-style: none;
  min-height: var(--control-min-size);
  padding: var(--space-3) 0;
}

.founder-story-action {
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--type-weight-regular);
  margin-left: auto;
  transition: color var(--duration-fast) var(--ease-smooth);
  white-space: nowrap;
}

.founder-story-details summary:hover,
.founder-story-details summary:focus-visible {
  color: var(--accent);
}

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

.founder-story-details summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: var(--type-weight-regular);
  line-height: 1;
  margin-left: var(--space-2);
}

.founder-story-details[open] summary::after {
  content: '−';
}

.founder-story-details summary:focus-visible {
  border-radius: var(--radius-sm);
  outline: 3px solid var(--accent-line-soft);
  outline-offset: 3px;
}

.founder-story-expanded {
  padding: var(--space-2) 0 var(--space-6);
}

.founder-story-expanded > p {
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--home-section-copy-size);
  font-weight: var(--type-weight-regular);
  line-height: var(--leading-body);
}

.founder-story-expanded > p + p {
  margin-top: var(--space-4);
}

.founder-story-expanded .founder-story-ending {
  color: var(--ink);
}

.founder-closing {
  background: var(--accent-light);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-light) 88%, var(--glass-panel)),
    color-mix(in srgb, var(--glass-panel) 92%, transparent)
  );
  border: 1px solid var(--accent-line-soft);
  border-radius: var(--radius-2xl);
  box-shadow: 0 1.25rem 3rem rgba(44, 36, 32, 0.08);
  isolation: isolate;
  margin: var(--space-8) auto 0;
  max-width: 38rem;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 2.75rem);
  position: relative;
  width: 100%;
}

.founder-closing::before {
  color: var(--accent);
  content: '“';
  font-family: var(--font-brand);
  font-size: clamp(4.5rem, 11vw, 6.75rem);
  font-weight: var(--type-weight-regular);
  left: clamp(1rem, 3vw, 1.6rem);
  line-height: 1;
  opacity: 0.2;
  position: absolute;
  top: clamp(0.35rem, 1vw, 0.65rem);
  z-index: 0;
}

.founder-closing p {
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-style: normal;
  font-weight: var(--type-weight-regular);
  letter-spacing: -0.03em;
  line-height: 1.35;
  margin: 0;
  padding-top: clamp(1rem, 2vw, 1.4rem);
  position: relative;
  text-wrap: balance;
  z-index: 1;
}

.continuity-layout {
  display: flex;
  flex-direction: column;
  margin-block: clamp(var(--space-8), 5vw, var(--space-12));
}

.continuity-card {
  background-color: var(--bg-dark);
  background-image: url('../assets/continuity-visit-history.jpg');
  background-position: 71% center;
  background-size: cover;
  border: 1px solid var(--glass-border-subtle);
  border-radius: var(--radius-glass-shell);
  box-shadow: var(--shadow-glass-panel);
  margin: 0;
  min-height: clamp(18rem, 78vw, 28rem);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.continuity-copy {
  margin-top: var(--space-8);
  max-width: 40rem;
}

.continuity-copy h2 {
  color: var(--ink);
  margin: 0;
  max-width: 13ch;
}

.continuity-copy p {
  color: var(--ink-soft);
  font-size: var(--home-section-copy-size);
  line-height: var(--leading-body);
  margin: var(--space-5) 0 0;
  max-width: 55ch;
}

.continuity-copy .text-link {
  color: var(--ink);
  display: inline-flex;
  margin-top: var(--space-6);
}

.continuity-copy .text-link:hover {
  color: var(--nav-build-status-color);
}

@media (min-width: 48rem) {
  .continuity-layout {
    align-items: center;
    flex-direction: row;
  }

  .continuity-card {
    flex: 1.15 1 0;
    min-height: clamp(24rem, 36vw, 32rem);
  }

  .continuity-copy {
    flex: 0.85 1 0;
    margin-left: clamp(2rem, 5vw, 5rem);
    margin-top: 0;
  }
}

html:not(.dark) .homepage .waitlist-box .form-group input,
html:not(.dark) .homepage .waitlist-box .form-group select,
html:not(.dark) .homepage .waitlist-box .form-group textarea {
  background: var(--bg);
  border-color: var(--border);
  box-shadow: none;
  caret-color: var(--ink);
  color: var(--ink);
  color-scheme: light;
}

html:not(.dark) .homepage .waitlist-box .form-group input::placeholder,
html:not(.dark) .homepage .waitlist-box .form-group textarea::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

html:not(.dark) .homepage .waitlist-box .select-wrap::after {
  color: var(--ink-faint);
}

.homepage .question-demo-heading {
  max-width: var(--layout-content-max);
}

.homepage .question-source-item p {
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  margin: var(--space-2) 0 0;
}

.homepage .question-reference-link {
  align-items: center;
  align-self: flex-start;
  color: var(--accent);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--type-weight-semibold);
  line-height: var(--leading-compact);
  margin-top: var(--space-3);
  min-height: var(--control-compact-size);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--space-1);
}

.homepage .question-reference-link:hover {
  color: var(--ink);
}

.homepage .question-card-reason {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
  margin: var(--space-3) 0 0;
}

.homepage .question-card-source {
  border-left: 2px solid var(--accent-line-soft);
  padding-left: var(--space-3);
}

@media (min-width: 64rem) {
  .homepage .question-demo-context {
    flex-basis: min(28rem, 40%);
  }
}

.footer-consent-row {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-2);
  width: 100%;
}

@media (max-width: 39.9375rem) {
  .footer-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .footer-brand {
    flex: 0 0 100%;
    margin-bottom: var(--space-8);
  }

  .footer-col {
    flex: 0 0 50%;
    min-width: 0;
  }

  .footer-brand + .footer-col {
    padding-right: var(--space-2);
  }

  .footer-col + .footer-col {
    margin-left: 0;
    margin-top: 0;
    padding-left: var(--space-2);
  }
}

@media (min-width: 48rem) {
  .footer-consent-row {
    justify-content: flex-end;
  }
}

/*
 * Morrow palette trial.
 * Header, footer, founder environment, and product-demo category colours
 * deliberately retain their existing treatments. The hero uses its flat surface token above.
 */
.homepage main .question-demo-section {
  background:
    radial-gradient(
      circle at 12% 18%,
      color-mix(in srgb, var(--morrow-mint-highlight) 30%, transparent),
      transparent 28rem
    ),
    radial-gradient(
      circle at 88% 84%,
      color-mix(in srgb, var(--morrow-star) 12%, transparent),
      transparent 24rem
    ),
    var(--morrow-section-mint);
  border-color: var(--morrow-palette-line);
}

.homepage main .question-demo-shell {
  background: var(--morrow-panel-mint);
  border-color: var(--morrow-palette-line);
}

.homepage main .question-demo-context {
  background: color-mix(in srgb, var(--morrow-mint-highlight) 22%, var(--morrow-panel-mint));
  border-color: var(--morrow-palette-line);
}

.homepage main .question-demo-output {
  background: var(--morrow-panel-cream);
  border-color: var(--morrow-palette-line);
}

.homepage main .question-source-item,
.homepage main .question-card {
  border-color: var(--morrow-palette-line);
}

.homepage main .question-card-kind {
  color: var(--morrow-accent-readable);
}

.homepage main .availability-section {
  background: var(--morrow-section-cream);
  border-color: var(--morrow-palette-line);
}

.homepage main .continuity-card {
  background-color: var(--morrow-feature-ink);
  background-image: url('../assets/continuity-visit-history.jpg');
  border-color: var(--morrow-palette-line);
}

.homepage main .privacy-section {
  background: var(--morrow-section-mint);
  border-bottom: 1px solid var(--morrow-palette-line);
  border-top: 1px solid var(--morrow-palette-line);
  color: var(--ink);
}

.homepage main .privacy-section .privacy-grid h2 {
  color: var(--ink);
}

.homepage main .privacy-section .privacy-details,
.homepage main .privacy-section .privacy-details p {
  border-color: var(--morrow-palette-line);
}

.homepage main .privacy-section .privacy-details p {
  color: var(--ink-soft);
}

.homepage main .privacy-section .text-link {
  color: var(--ink);
}

.homepage main .privacy-section .text-link:hover {
  color: var(--morrow-accent-readable);
}

.homepage main .faq-section {
  background: var(--morrow-section-cream);
}

.homepage main .waitlist-section {
  background:
    radial-gradient(
      circle at 82% 18%,
      color-mix(in srgb, var(--morrow-mint-highlight) 12%, transparent),
      transparent 30rem
    ),
    var(--morrow-section-dark);
}

.homepage main .waitlist-box {
  background: var(--morrow-panel-cream);
  border-color: var(--morrow-palette-line);
}

/*
 * Homepage dark-mode surface ownership.
 * Only the navigation and continuity card retain glass/elevated treatments;
 * the remaining body sections use a restrained four-surface hierarchy.
 */
html.dark.homepage body,
html.dark.homepage .hero-reimagined {
  background: var(--home-dark-canvas);
}

html.dark.homepage main {
  --ink: #F5F5F7;
  --ink-soft: #C7C7CC;
  --ink-faint: #8E8E93;
}

/* Dark product demo: own the complete device surface palette here instead of
   inheriting the live site's green-tinted glass variables. */
html.dark.homepage .iphone-frame {
  background: #070707;
  border-color: var(--home-dark-line-strong);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.48);
}

html.dark.homepage .iphone-frame__island,
html.dark.homepage .iphone-frame__side {
  background: #050505;
  border-color: var(--home-dark-line);
}

html.dark.homepage .v4-workbench {
  --workbench-bg: var(--home-dark-canvas);
  --workbench-surface: var(--home-dark-panel);
  --workbench-surface-soft: var(--home-dark-panel-raised);
  --workbench-border: var(--home-dark-line);
  --workbench-ink: #F5F5F7;
  --workbench-ink-soft: #C7C7CC;
  --workbench-ink-faint: #8E8E93;
  --workbench-control-bg: var(--home-dark-panel-raised);
  background: var(--workbench-bg);
}

html.dark.homepage .v4-workbench::after {
  content: none;
}

html.dark.homepage .workbench-audio:hover,
html.dark.homepage .workbench-understand button:hover,
html.dark.homepage .workbench-detail-list button:hover {
  background: var(--home-dark-control-hover);
}

html.dark.homepage footer {
  background: var(--home-dark-chrome);
  border-top: 0;
  color: var(--ink-on-dark);
}

html.dark.homepage footer .footer-wordmark,
html.dark.homepage footer .footer-col a:hover,
html.dark.homepage footer .footer-bottom-links a:hover {
  color: var(--ink-inverse-strong);
}

html.dark.homepage footer .footer-tagline,
html.dark.homepage footer .footer-col a {
  color: var(--ink-on-dark);
}

html.dark.homepage footer .footer-heading,
html.dark.homepage footer .footer-col h3,
html.dark.homepage footer .footer-bottom-links a,
html.dark.homepage footer .footer-copy {
  color: var(--ink-inverse-muted);
}

html.dark.homepage footer .footer-bottom {
  border-top-color: var(--home-dark-chrome-line-soft);
}

html.dark.homepage main .privacy-section,
html.dark.homepage main .waitlist-section {
  background: var(--home-dark-section);
  border-color: var(--home-dark-line);
}

html.dark.homepage main .founder-section--hero {
  background: var(--home-dark-founder);
  border-color: var(--home-dark-founder-line);
}

html.dark.homepage main .question-demo-section {
  background: var(--home-dark-question-canvas);
  border-color: var(--home-dark-line);
}

html.dark.homepage main .availability-section,
html.dark.homepage main .faq-section {
  background: var(--home-dark-canvas);
  border-color: var(--home-dark-line);
}

html.dark.homepage main .question-demo-shell,
html.dark.homepage main .waitlist-box {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--home-dark-panel);
  border-color: var(--home-dark-line-strong);
  box-shadow: var(--home-dark-shadow);
}

html.dark.homepage main .question-demo-shell {
  background: var(--home-dark-panel) !important;
}

html.dark.homepage main .founder-closing {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--home-dark-founder-panel);
  border-color: var(--home-dark-founder-line);
  box-shadow: var(--home-dark-shadow);
}

html.dark.homepage main .question-demo-context {
  background: var(--home-dark-panel) !important;
  border-color: var(--home-dark-line);
  box-shadow: none;
}

html.dark.homepage main .question-source-item {
  background: var(--home-dark-panel-raised) !important;
  border-color: var(--home-dark-line);
  box-shadow: none;
}

html.dark.homepage main .question-demo-output {
  background: var(--home-dark-panel) !important;
  border-color: var(--home-dark-line);
  box-shadow: none;
}

html.dark.homepage main .question-card {
  background: var(--home-dark-panel-raised) !important;
  border-color: var(--home-dark-line);
  box-shadow: none;
}

html.dark.homepage main .privacy-section .privacy-details,
html.dark.homepage main .privacy-section .privacy-details p,
html.dark.homepage main .faq-item,
html.dark.homepage main .founder-story-details {
  border-color: var(--home-dark-line);
}

html.dark.homepage main .faq-item summary::after,
html.dark.homepage main .form-group input,
html.dark.homepage main .form-group select,
html.dark.homepage main .form-group textarea {
  background: var(--home-dark-control);
  border-color: var(--home-dark-line);
  box-shadow: none;
}

html.dark.homepage main .faq-item summary:hover::after {
  background: var(--home-dark-control-hover);
}

/*
 * Desktop wordmark stage
 *
 * Morrow remains one continuous actor. The name paints behind the actor while
 * the byline paints in front, so the existing journey reads as walking across
 * “Morrow” and then behind “by DayAfter”. Mobile and tablet keep their current
 * compact header treatment.
 */
@media (min-width: 64rem) {
  :where(.homepage, .site-page) .site-navigation {
    --morrow-shell-arrival: 17.75rem;
    --morrow-shell-step-1: 2.5rem;
    --morrow-shell-step-2: 5rem;
    --morrow-shell-step-3: 7.5rem;
    --morrow-shell-step-4: 10rem;
    --morrow-shell-step-5: 12.5rem;
    --morrow-shell-step-6: 15rem;
    --morrow-shell-travel: 17.5rem;
  }

  :where(.homepage, .site-page) .nav-wordmark {
    isolation: isolate;
    overflow: visible;
    position: relative;
  }

  :where(.homepage, .site-page) .nav-brand-mark {
    position: relative;
    z-index: 1;
  }

  :where(.homepage, .site-page) .nav-wordmark-text {
    display: contents;
  }

  :where(.homepage, .site-page) .nav-wordmark-name,
  :where(.homepage, .site-page) .nav-wordmark-byline {
    position: relative;
    transform: translateY(calc(-1 * var(--space-1)));
  }

  :where(.homepage, .site-page) .nav-wordmark-name {
    z-index: 0;
  }

  :where(.homepage, .site-page) .nav-wordmark-byline {
    z-index: 2;
  }
}