@font-face {
  font-family: "Sunghyun Sans";
  src: url("assets/fonts/SunghyunSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sunghyun Sans";
  src: url("assets/fonts/SunghyunSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sunghyun Sans";
  src: url("assets/fonts/SunghyunSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sunghyun Sans";
  src: url("assets/fonts/SunghyunSans-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HAL Timezone";
  src: url("assets/fonts/HALTimezone-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #E75619;
  --hero-cream: #faf1e0;
  --hero-green: #16382a;
  --hero-muted: #55584f;
  /* Sampled from the bottom edge of the hero artwork so the hero can fade
     into the section below it. */
  --hero-blend: #6d6219;
  --hero-blend-ink: #fdf8e8;
  --sans: "Sunghyun Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "HAL Timezone", ui-serif, Georgia, "Times New Roman", serif;
  --ink: #171717;
  --muted: #5f5a54;
  --paper: #fbfbf9;
  --panel: #fffefd;
  --soft: #fbfaf8;
  --line: #dedede;
  --field: #ffffff;
  --brand-ink: #8f4315;
  --brand-soft: rgba(231, 86, 25, 0.08);
  --brand-line: rgba(231, 86, 25, 0.32);
  --demo-bg: #f2eee8;
  --shadow: 0 18px 50px rgba(23, 23, 23, 0.08);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Smooth scrolling has to stay off the root's idle state: Chrome applies it to
   the scroll restoration it performs on reload, so the page animates up from
   the hero to the saved position instead of arriving there. Nothing is focused
   during a restore, so :focus-within keeps that instant while in-page anchors
   followed by a click or Tab still glide. Programmatic scrolls pass
   behavior: "smooth" themselves and do not rely on this. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  /* Grayscale antialiasing, so type renders as lightly as it does in Figma. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Balance the last line of body copy so paragraphs do not end on an orphan. */
p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

.page {
  width: min(calc(100% - 40px), 1060px);
  margin: 0 auto;
}

.narrow {
  width: min(calc(100% - 40px), 720px);
}

/* The copy sits high in the frame so it stays on the sky, clear of the
   horizon and the kid in the artwork. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 100svh;
  padding: clamp(96px, 14svh, 150px) 0 clamp(40px, 6vw, 72px);
  overflow: hidden;
  background-color: var(--hero-cream);
  background-image: url("assets/hero-bg.jpg");
  background-size: cover;
  background-position: center bottom;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Keeps the header legible over whatever the hero video is showing. */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(251, 251, 249, 0.92), rgba(251, 251, 249, 0));
  pointer-events: none;
}

/* White over the artwork, with a soft shadow so it survives the light sky. */
body:has(.hero) .site-header .site-nav a {
  color: #fffefd;
  text-shadow: 0 1px 10px rgba(23, 23, 23, 0.45);
}

body:has(.hero) .site-header.is-pinned .site-nav a {
  color: var(--muted);
  text-shadow: none;
}

body:has(.hero) .site-header.is-pinned .site-nav a:hover {
  color: var(--ink);
}

/* The hero carries its own signup form, so the header button only appears
   once the header pins past it, leaving About flush right over the artwork. */
body:has(.hero) .site-header:not(.is-pinned) .header-signup-button {
  display: none;
}

.hero .page {
  position: relative;
  z-index: 1;
}

/* Fades the artwork into the flat green of the section below. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  /* Eased ramp (ease-in-out sampled at 10% steps) so the artwork dissolves
     into the flat green instead of banding across a straight fade. */
  background: linear-gradient(
    180deg,
    rgba(109, 98, 25, 0) 0%,
    rgba(109, 98, 25, 0.02) 10%,
    rgba(109, 98, 25, 0.08) 20%,
    rgba(109, 98, 25, 0.18) 30%,
    rgba(109, 98, 25, 0.32) 40%,
    rgba(109, 98, 25, 0.5) 50%,
    rgba(109, 98, 25, 0.68) 60%,
    rgba(109, 98, 25, 0.82) 70%,
    rgba(109, 98, 25, 0.92) 80%,
    rgba(109, 98, 25, 0.98) 90%,
    var(--hero-blend) 100%
  );
  pointer-events: none;
}

.hero .page {
  display: grid;
  gap: clamp(38px, 7vw, 78px);
  width: min(calc(100% - 40px), 1060px);
}

.hero-layout {
  display: grid;
  gap: clamp(32px, 6vw, 62px);
  align-items: start;
}

.hero-copy {
  max-width: 620px;
  margin-top: 60px;
  align-self: start;
}

.hero h1 {
  max-width: none;
  margin-bottom: 24px;
  color: var(--hero-green);
  font-family: var(--sans);
  font-size: clamp(40px, 4.4vw, 66px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.hero .hero-subline {
  max-width: none;
  color: var(--hero-muted);
  font-size: clamp(21px, 2.1vw, 26px);
  font-weight: 500;
  line-height: 1.45;
}

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

.hero .button {
  padding: 15px 30px;
  font-weight: 600;
}

.hero-signup-form {
  max-width: 480px;
  margin-top: 38px;
}

.hero-signup-form .waitlist-row .button {
  flex-shrink: 0;
}

.hero-signup-note {
  margin: 14px 0 0;
  color: var(--hero-muted);
  font-size: 15px;
  line-height: 1.5;
}

.nevers-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  max-width: 560px;
}

.nevers-list li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.4;
}

.nevers-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.nevers-list + p {
  margin-top: 24px;
}

.faq-list {
  max-width: 680px;
  margin-top: 26px;
}

.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 640;
  line-height: 1.3;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--muted);
  font-weight: 500;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.5;
  max-width: 58ch;
}

/* Bento: uneven spans on wide screens, one column on phones. */
.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 22px;
}

@media (min-width: 700px) {
  .tool-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
  }

  .tool-card {
    grid-column: span 2;
  }

  .tool-card-wide {
    grid-column: span 4;
  }
}

.tool-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--soft);
}

.tool-card img {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
}

.tool-card figcaption {
  padding: 16px 12px 10px;
}

.tool-card h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.tool-card figcaption p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.share-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.share-copied {
  color: var(--muted);
  font-size: 15px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

h1 {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: clamp(50px, 8vw, 76px);
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(32px, 5.8vw, 54px);
}

.hero-subline {
  max-width: 600px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin-top: 30px;
}

.hero-secondary-actions {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}

.hero-trust-line {
  max-width: 520px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.hero-quote {
  max-width: 520px;
  margin: 24px 0 0;
  color: var(--ink);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.45;
}

.hero-quote .quote-source {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fffefd;
  font: inherit;
  font-weight: 720;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  filter: saturate(1.05);
}

.secondary-button {
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(231, 86, 25, 0.28);
  outline-offset: 3px;
}

.hero-visual {
  display: grid;
  gap: 14px;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.section {
  padding: clamp(52px, 7vw, 92px) 0;
  border-top: 1px solid var(--line);
}

.section-kicker {
  width: fit-content;
  margin-bottom: 20px;
  padding-top: 14px;
  border-top: 2px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  font-weight: 760;
}

.section-intro {
  max-width: 760px;
}

/* Lets a long heading run the full page width on one line; body copy
   stays at reading width. */
.section-intro.wide-title {
  max-width: none;
}

.section-intro.wide-title h2 {
  white-space: nowrap;
  font-size: clamp(26px, 4.7vw, 50px);
}

.section-intro.wide-title > p:not(.section-kicker) {
  max-width: 760px;
}

@media (max-width: 640px) {
  .section-intro.wide-title h2 {
    white-space: normal;
  }
}

.feature-photo {
  margin: clamp(28px, 4vw, 40px) 0 0;
}

.feature-photo img,
.feature-photo video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.feature-video video {
  border: 1px solid var(--line);
  background: var(--demo-bg);
}

/* Stand-in until the real artwork lands. */
.media-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #e3e1dc;
}

.feature-photo figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.45;
}

.section-intro > p:not(.section-kicker):not(.talk-link),
.final-cta-layout > div > p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.55;
}

.copy-stack {
  display: grid;
  gap: 22px;
  max-width: 720px;
}

.copy-stack p,
.about p,
.talk p,
.help-intro p,
.questionnaire-intro {
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.52;
}

.help-options,
.parent-quotes,
.questionnaire,
.final-cta,
.talk,
.what-is {
  background: var(--panel);
}

/* The first section picks up the hero's green so the two read as one image. */
.what-is[data-below-hero] {
  border-top: 0;
  background: var(--hero-blend);
  color: var(--hero-blend-ink);
}

.what-is[data-below-hero] h2 {
  color: var(--hero-blend-ink);
}

.what-is[data-below-hero] .section-intro > p:not(.section-kicker) {
  color: rgba(253, 248, 232, 0.84);
}

.help-options {
  background: var(--soft);
}

.help-intro {
  max-width: 760px;
}

.help-grid {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.help-card,
.share-link-list a {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.help-card:hover,
.share-link-list a:hover {
  border-color: var(--brand-line);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.help-card span,
.share-link-list span,
.detail-label {
  color: var(--brand);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.35;
}

.help-card strong,
.share-link-list strong {
  color: var(--ink);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.22;
}

.help-card strong::after {
  content: "→";
  margin-left: 7px;
  display: inline-block;
  color: var(--brand);
  transition: transform 160ms ease;
}

.help-card:hover strong::after {
  transform: translateX(3px);
}

.help-primary {
  display: grid;
  gap: 10px;
  margin-top: 30px;
  padding: clamp(24px, 4.4vw, 38px);
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  background: var(--brand-soft);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.help-primary:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.help-primary-tag {
  color: var(--brand);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.35;
}

.help-primary strong {
  color: var(--ink);
  font-size: clamp(27px, 4.6vw, 40px);
  font-weight: 760;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.help-primary-meta {
  color: var(--muted);
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 600;
  line-height: 1.4;
}

.help-primary-arrow {
  display: inline-block;
  color: var(--brand);
  font-weight: 760;
  transition: transform 160ms ease;
}

.help-primary:hover .help-primary-arrow {
  transform: translateX(4px);
}

.help-primary + .help-grid {
  margin-top: 14px;
}

.principle-grid {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

.principle-grid > div {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.principle-grid h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: clamp(20px, 2.8vw, 25px);
  font-weight: 720;
  line-height: 1.14;
}

.principle-grid p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.45;
}

.essay-copy {
  max-width: 680px;
  margin-top: 26px;
}

.essay-copy p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: clamp(17px, 2.1vw, 19px);
  line-height: 1.62;
}

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

.essay-copy strong {
  color: var(--ink);
  font-weight: 640;
}

.compact-grid > div {
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.compact-grid h3 {
  max-width: 23ch;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.2;
}

.questionnaire-form {
  gap: 18px;
  margin-top: 30px;
}

.questionnaire-page {
  min-height: calc(100svh - 92px);
  border-top: 0;
  background: var(--paper);
}

.wordmark-link {
  display: inline-flex;
  align-items: center;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}

.wordmark-link .wordmark {
  display: block;
  height: 22px;
  width: auto;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  /* Matches the 20px gutter .page leaves on either side. */
  padding: 20px 0;
}

/* Past the hero the header detaches and rides along on a solid bar. */
.site-header.is-pinned {
  position: fixed;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 251, 249, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* The bare nav link and the signup pill share height and type so they sit
   on one baseline. */
.site-header .site-nav a,
.header-signup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.header-signup-button {
  padding: 0 22px;
  border-radius: 999px;
}


.wordmark-link {
  text-decoration: none;
}

.site-nav a {
  color: var(--hero-green);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--brand-ink);
}

.site-header .page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-nav {
  display: flex;
  gap: clamp(20px, 4vw, 44px);
  font-size: 16px;
  font-weight: 500;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

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

.secondary-intro {
  margin-top: 16px;
}

.form-section-label {
  margin: 8px 0 0;
  color: var(--brand);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.35;
}

.privacy-note {
  padding-top: 4px;
}

.questionnaire-form .form-field textarea {
  min-height: 132px;
}

.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.checkbox-row input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--brand);
}

.talk-instead {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.talk-instead a {
  color: var(--ink);
  font-weight: 760;
  text-decoration-color: var(--brand-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.q-block {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.q-label {
  padding: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.4;
}

.q-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.q-subhead {
  margin: 16px 0 0;
  color: var(--brand);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 11px;
}

.choice {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.choice:hover {
  border-color: var(--brand-line);
}

.choice:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 720;
}

.choice:has(input:focus-visible) {
  outline: 3px solid rgba(231, 86, 25, 0.28);
  outline-offset: 2px;
}

.q-progress {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.q-progress-bar {
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
}

.q-progress-fill {
  width: 20%;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 260ms ease;
}

.q-progress-label {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 760;
}

.q-step {
  display: grid;
  gap: 18px;
}

.q-step[hidden] {
  display: none;
}

.q-nav {
  display: flex;
  gap: 12px;
}

.q-nav .button {
  flex: 1 1 auto;
}

.q-partial {
  margin: 0;
  text-align: center;
}

.q-partial-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 640;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.share-options {
  background: var(--paper);
}

.share-link-list {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.form-status a {
  color: var(--ink);
  font-weight: 640;
  overflow-wrap: anywhere;
}

.share-link-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.share-copy-inline {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.share-copy-inline:hover {
  background: var(--brand);
  color: #fffefd;
}

.share-copy-inline[data-state="copied"] {
  background: var(--brand);
  color: #fffefd;
}

.demos {
  background: var(--paper);
}

.demos-intro {
  max-width: 720px;
}

.demos-intro p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.52;
}

.demo-carousel-shell {
  position: relative;
  margin-top: 36px;
}

.demo-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 2px 0 18px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.demo-carousel::-webkit-scrollbar {
  display: none;
}

.demo-item {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}

.demo-media {
  position: relative;
  border-radius: 8px;
  cursor: zoom-in;
}

.demo-item video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--demo-bg);
  box-shadow: var(--shadow);
  cursor: zoom-in;
  object-fit: cover;
  pointer-events: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.demo-media:hover video {
  border-color: rgba(231, 86, 25, 0.55);
  box-shadow: 0 20px 54px rgba(23, 23, 23, 0.13);
}

.demo-media:focus-visible {
  outline: 3px solid rgba(231, 86, 25, 0.28);
  outline-offset: 3px;
}

.demo-item figcaption {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.demo-item strong {
  color: var(--ink);
}

.demo-nav {
  display: none;
}

.demo-nav[hidden] {
  display: none;
}

.demo-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
}

.demo-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d8d2ca;
  cursor: pointer;
  transition: width 160ms ease, background 160ms ease, transform 160ms ease;
}

.demo-dot[aria-current="true"] {
  width: 30px;
  background: var(--brand);
}

.demo-dot:focus-visible {
  outline: 3px solid rgba(231, 86, 25, 0.28);
  outline-offset: 3px;
}

.demo-viewer {
  width: min(calc(100% - 32px), 1120px);
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: zoom-out;
}

.demo-viewer::backdrop {
  background: rgba(23, 23, 23, 0.76);
}

.demo-viewer-inner {
  position: relative;
  cursor: auto;
}

.demo-viewer-video {
  width: 100%;
  max-height: calc(100svh - 80px);
  display: block;
  border-radius: 8px;
  background: #111;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.quotes-intro {
  max-width: 720px;
}

.quote-grid {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.quote-grid figure {
  margin: 0;
  padding: 20px 0 0;
  border-top: 2px solid var(--ink);
}

.quote-grid blockquote {
  margin: 0;
}

.quote-grid p {
  margin-bottom: 12px;
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 720;
  line-height: 1.16;
}

.quote-grid figcaption {
  margin-bottom: 12px;
  color: var(--brand);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.35;
}

.quote-grid .quote-source {
  margin: 0;
  color: var(--muted);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}

.press-copy-grid p {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.24;
}

.subscribe-form {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.form-field {
  display: grid;
  gap: 7px;
}

.field-label {
  color: var(--ink);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.35;
}

.field-label span {
  color: var(--muted);
  font-weight: 640;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
}

.discover-pullquote {
  margin-top: 18px;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}

.choice-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 9px 14px;
  border: 1px dashed var(--brand-line);
  border-radius: 999px;
  background: var(--field);
  color: var(--brand-ink);
  font-size: 17px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.choice-add:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}

.q-other {
  margin-top: 12px;
}

.q-other input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px dashed var(--brand-line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
}

.q-other input::placeholder {
  color: #9a948d;
}

.q-error {
  margin: 8px 0 0;
  color: #b3401b;
  font-size: 14px;
  font-weight: 500;
}

.form-field input[aria-invalid="true"] {
  border-color: #b3401b;
}

.book-now-reveal {
  margin: 14px 0 0;
  padding: 12px 15px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.4;
}

.book-now-reveal a {
  font-weight: 600;
}

.quote-marquee {
  margin-top: 36px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.quote-marquee-track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  animation: quote-marquee 40s linear infinite;
}

.quote-marquee:hover .quote-marquee-track,
.quote-marquee:focus-within .quote-marquee-track {
  animation-play-state: paused;
}

.quote-chip {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  max-width: 260px;
  margin: 0;
  padding: 30px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.quote-chip::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  left: 14px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: 1;
  color: var(--brand);
  opacity: 0.3;
}

.quote-chip blockquote {
  margin: 0;
}

.quote-chip blockquote p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.quote-chip .quote-source {
  /* Pinned to the bottom, so the gap under the quote absorbs the height
     difference between cards. */
  margin: auto 0 0;
  padding-top: 10px;
  color: var(--muted);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-style: italic;
}

@keyframes quote-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-marquee {
    overflow-x: auto;
  }
  .quote-marquee-track {
    animation: none;
  }
}

@media (max-width: 640px) {
  .quote-marquee-track {
    gap: 12px;
  }
  .quote-chip {
    max-width: 300px;
    padding: 34px 20px 18px;
    border-radius: 14px;
  }
  .quote-chip::before {
    font-size: 46px;
    top: 4px;
    left: 14px;
  }
  .quote-chip blockquote p {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .quote-chip .quote-source {
    /* auto keeps the author pinned to the bottom of the card. */
    margin-top: auto;
    font-size: 12px;
  }
}

.form-field textarea {
  min-height: 76px;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #9a948d;
}

.optional-field .field-label {
  color: var(--muted);
}

.optional-field input,
.optional-field textarea {
  background: var(--soft);
}

.subscribe-form .button {
  min-height: 52px;
}

.subscribe-form .button:disabled {
  cursor: wait;
  filter: saturate(0.72);
  opacity: 0.72;
  transform: none;
}

.form-note,
.form-status {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.form-status {
  min-height: 22px;
  font-weight: 720;
}

.form-status[data-state="success"] {
  color: #2d7145;
}

.subscribe-form[data-complete="true"] .waitlist-row,
.subscribe-form[data-complete="true"] .form-field,
.subscribe-form[data-complete="true"] > .button {
  display: none;
}

.subscribe-form[data-complete="true"] .form-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 52px;
}

.form-status[data-state="error"] {
  color: #9c3a16;
}

.about {
  background: var(--panel);
}

.entity-page {
  min-height: 72svh;
  border-top: 0;
  background: var(--paper);
}

.entity-page h1 {
  font-size: clamp(44px, 7vw, 70px);
}

.entity-copy a,
.about-link a,
.hero-secondary-actions a,
.text-link-list a,
.fact-list a {
  color: var(--ink);
  font-weight: 760;
  text-decoration-color: rgba(231, 86, 25, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.hero-secondary-actions a {
  font-weight: 700;
  text-underline-offset: 5px;
}

.entity-detail {
  background: var(--paper);
}

.fact-list {
  display: grid;
  gap: 0;
  margin: 30px 0 0;
}

.fact-list div {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.fact-list dt {
  color: var(--brand);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.35;
}

.fact-list dd {
  margin: 0;
  color: var(--ink);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 640;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.text-link-list {
  display: grid;
  gap: 12px;
  max-width: 540px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.text-link-list button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 760;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(231, 86, 25, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.text-link-list li {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.45;
}

.comparison-table-wrap {
  margin-top: 30px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.comparison-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.comparison-table tr:last-child th,
.comparison-table tr:last-child td {
  border-bottom: 0;
}

.comparison-table thead th {
  color: var(--brand);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.35;
}

.comparison-table tbody th {
  width: 22%;
  color: var(--ink);
  font-size: 16px;
  font-weight: 760;
  line-height: 1.35;
}

.comparison-table td {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

@media (max-width: 800px) {
  .comparison-table {
    min-width: 0;
  }

  .comparison-table thead {
    display: none;
  }

  .comparison-table tbody,
  .comparison-table tbody tr,
  .comparison-table tbody th,
  .comparison-table tbody td {
    display: block;
  }

  .comparison-table tbody tr {
    padding: 6px 16px 18px;
    border-bottom: 1px solid var(--line);
  }

  .comparison-table tbody tr:last-child {
    border-bottom: 0;
  }

  .comparison-table tbody th,
  .comparison-table tbody td {
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  .comparison-table tbody th {
    margin: 14px 0 10px;
    font-size: 17px;
  }

  .comparison-table tbody td {
    margin-top: 10px;
  }

  .comparison-table tbody td::before {
    display: block;
    margin-bottom: 2px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 760;
  }

  .comparison-table tbody td:first-of-type::before {
    content: "Kale";
  }

  .comparison-table tbody td:last-of-type::before {
    content: "Typical feed-first device";
  }
}

.faq-list {
  display: grid;
  gap: 0;
  max-width: 720px;
  margin-top: 30px;
}

.faq-list > div {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.faq-list h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 720;
  line-height: 1.16;
}

.faq-list p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
}

.about-link {
  margin-top: 18px;
}

.about-layout {
  display: grid;
  gap: 28px;
  max-width: 880px;
}

.about-layout h2 {
  text-wrap: balance;
}

.about-photo {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.talk h2 {
  margin-bottom: 16px;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.05;
}

.talk a {
  color: var(--ink);
  font-weight: 760;
  text-decoration-color: rgba(231, 86, 25, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.final-cta-layout {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
  align-items: start;
}

.signup-panel {
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.panel-title {
  margin: 0;
  font-size: 21px;
  font-weight: 760;
  line-height: 1.25;
}

.hero-signup .subscribe-form {
  margin-top: 0;
}

.talk-link {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.talk-link a {
  color: var(--ink);
  font-weight: 760;
  text-decoration-color: rgba(231, 86, 25, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.signup-dialog {
  width: min(calc(100% - 32px), 480px);
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  overflow-y: auto;
  background: transparent;
  color: var(--ink);
}

.signup-dialog::backdrop {
  background: rgba(23, 23, 23, 0);
  transition: background 260ms ease;
}

/* Slides up and fades in on open; `allow-discrete` keeps the dialog painted
   long enough for the transition to run. */
.signup-dialog {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 260ms ease,
    translate 320ms cubic-bezier(0.22, 1, 0.36, 1),
    overlay 320ms ease allow-discrete,
    display 320ms ease allow-discrete;
}

.signup-dialog[open] {
  opacity: 1;
  translate: 0 0;
}

.signup-dialog[open]::backdrop {
  background: rgba(23, 23, 23, 0.38);
}

@starting-style {
  .signup-dialog[open] {
    opacity: 0;
    translate: 0 24px;
  }

  .signup-dialog[open]::backdrop {
    background: rgba(23, 23, 23, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .signup-dialog {
    transition: none;
    translate: none;
  }
}

.signup-dialog-panel {
  position: relative;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(23, 23, 23, 0.2);
}

.signup-dialog-panel .section-kicker {
  margin-bottom: 14px;
}

.signup-dialog-panel h2 {
  margin-bottom: 12px;
  padding-right: 36px;
  font-size: clamp(23px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Keeps the bottom padding equal to the sides until a status message appears. */
.signup-dialog-panel .form-status:empty {
  display: none;
}

.signup-dialog-panel > p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.signup-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #eeece7;
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Contact dialog: intro on the left, note form on the right. Mirrors the
   signup dialog's open/close motion. */
.contact-dialog {
  width: min(calc(100% - 32px), 820px);
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  overflow-y: auto;
  background: transparent;
  color: var(--ink);
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 260ms ease,
    translate 320ms cubic-bezier(0.22, 1, 0.36, 1),
    overlay 320ms ease allow-discrete,
    display 320ms ease allow-discrete;
}

.contact-dialog::backdrop {
  background: rgba(23, 23, 23, 0);
  transition: background 260ms ease;
}

.contact-dialog[open] {
  opacity: 1;
  translate: 0 0;
}

.contact-dialog[open]::backdrop {
  background: rgba(23, 23, 23, 0.38);
}

@starting-style {
  .contact-dialog[open] {
    opacity: 0;
    translate: 0 24px;
  }

  .contact-dialog[open]::backdrop {
    background: rgba(23, 23, 23, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-dialog {
    transition: none;
    translate: none;
  }
}

/* The postcard: photo on the left, a handwritten side on the right with ruled
   lines, a small stamp, and a quiet Send in the corner. Carries the signup
   dialog's palette — panel over line, ink on light, orange for the send — so
   the two modals read as one family. */
.contact-dialog-panel {
  /* The handwriting rules have to sit darker than --line to read as ruled
     paper rather than as another panel edge. */
  --pc-line: rgba(23, 23, 23, 0.28);
  position: relative;
  display: grid;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(23, 23, 23, 0.2);
}

.contact-photo {
  display: none;
}

.contact-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.contact-form {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 4px 6px 2px;
}

/* A real stamp's anatomy at 56px: white paper, perforations bitten out of every
   edge, a thin frame, and the mascot printed on cream.
   The notches are painted in the panel colour rather than masked out, so the
   shape does not depend on mask-composite support. Each notch carries its own
   hairline arc because #fff paper on the near-white panel has no edge of its
   own to read against; the border supplies that hairline between notches.
   Inset from the corner like a real stamp, and far enough in that it never
   reaches the close button, which is 34px wide and sits 16px from the panel's
   right edge. */
.contact-stamp {
  /* Notch radius and centre-to-centre pitch. The pitch has to divide the 56px
     edge close to evenly or the corners lose their perforation. */
  --perf-r: 2.6px;
  --perf-pitch: 8px;
  --perf-edge: rgba(23, 23, 23, 0.16);

  justify-self: end;
  width: 56px;
  margin-right: 40px;
  padding: 8px;
  /* Pale green paper, the same pastel as the homepage draw card. White paper
     would vanish into the panel and take the perforated edge with it; the
     literal value is used because home.css is not loaded on every page that
     carries this dialog. */
  background-color: #e1eadc;
  /* Two tiers: the notches sit above the paper's hairline edge and are opaque,
     so they bite straight through it. A real border cannot be used for that
     edge — borders paint above the background and would run flat across every
     notch. */
  background-image:
    radial-gradient(circle, var(--panel) var(--perf-r), var(--perf-edge) calc(var(--perf-r) + 0.7px), transparent calc(var(--perf-r) + 0.8px)),
    radial-gradient(circle, var(--panel) var(--perf-r), var(--perf-edge) calc(var(--perf-r) + 0.7px), transparent calc(var(--perf-r) + 0.8px)),
    radial-gradient(circle, var(--panel) var(--perf-r), var(--perf-edge) calc(var(--perf-r) + 0.7px), transparent calc(var(--perf-r) + 0.8px)),
    radial-gradient(circle, var(--panel) var(--perf-r), var(--perf-edge) calc(var(--perf-r) + 0.7px), transparent calc(var(--perf-r) + 0.8px)),
    linear-gradient(var(--perf-edge), var(--perf-edge)),
    linear-gradient(var(--perf-edge), var(--perf-edge)),
    linear-gradient(var(--perf-edge), var(--perf-edge)),
    linear-gradient(var(--perf-edge), var(--perf-edge));
  background-repeat:
    repeat-x, repeat-x, repeat-y, repeat-y,
    no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:
    var(--perf-pitch) var(--perf-pitch),
    var(--perf-pitch) var(--perf-pitch),
    var(--perf-pitch) var(--perf-pitch),
    var(--perf-pitch) var(--perf-pitch),
    100% 1px, 100% 1px, 1px 100%, 1px 100%;
  /* Half-pitch offsets put each circle's centre exactly on its edge, so only
     the inner half bites into the paper. */
  background-position:
    center calc(var(--perf-pitch) / -2),
    center calc(100% + var(--perf-pitch) / 2),
    calc(var(--perf-pitch) / -2) center,
    calc(100% + var(--perf-pitch) / 2) center,
    left top, left bottom, left top, right top;
  background-origin: border-box;
}

/* The printed area: mascot on the cream ground inside a thin frame. */
.contact-stamp img {
  display: block;
  width: 100%;
  height: 42px;
  padding: 5px;
  border: 1px solid rgba(23, 23, 23, 0.22);
  background: var(--hero-cream);
  object-fit: contain;
}

.contact-label {
  color: var(--muted);
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.01em;
}

.contact-note {
  display: grid;
  gap: 4px;
}

/* Ruled handwriting lines; `local` keeps them scrolling with the text. */
.contact-note textarea {
  width: 100%;
  min-height: 180px;
  padding: 0;
  border: 0;
  border-radius: 0;
  resize: none;
  background: repeating-linear-gradient(
      to bottom,
      transparent 0 35px,
      var(--pc-line) 35px 36px
    )
    local;
  /* What the sender writes is set like handwriting, not like form input: the
     display serif in brand orange, upright — the italic belongs to the labels
     and Send, not to the sender's own words. line-height stays locked to the
     36px rule spacing above — changing one without the other lifts the text
     off the lines. */
  color: var(--brand);
  caret-color: var(--brand);
  font-family: var(--display);
  font-style: normal;
  font-size: 19px;
  line-height: 36px;
}

.contact-signature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 24px;
}

.contact-underfield {
  display: grid;
  gap: 6px;
}

.contact-underfield-role {
  grid-column: 1 / -1;
}

/* Signature fields write on lines; their labels sit under the line. */
.contact-underfield input,
.contact-underfield select {
  width: 100%;
  padding: 4px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--pc-line);
  border-radius: 0;
  background: transparent;
  /* Upright, matching the note above; the label under each line keeps italic. */
  color: var(--brand);
  caret-color: var(--brand);
  font-family: var(--display);
  font-style: normal;
  font-size: 19px;
}

.contact-underfield .contact-label {
  font-size: 16px;
}

.contact-actions {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 4px;
}

.contact-send {
  margin-left: auto;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--brand);
  cursor: pointer;
  font-family: var(--display);
  font-style: italic;
  font-size: 21px;
}

.contact-send:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.contact-form .form-status {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.contact-form .form-status:empty {
  display: none;
}

/* Buttons keep a ring. The written fields must not: a box drawn around the
   handwriting fights the postcard, so they show focus in the rules they are
   written on instead — never by removing the indicator altogether. */
.contact-dialog-panel button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 2px;
}

.contact-dialog-panel :is(textarea, input, select):focus-visible {
  outline: none;
}

/* The ruled lines themselves take the brand colour while the note is active. */
.contact-note textarea:focus-visible {
  --pc-line: rgba(231, 86, 25, 0.7);
}

/* Signature lines thicken and warm up; the padding drops by the same pixel the
   border gains so the baseline does not move. */
.contact-underfield :is(input, select):focus-visible {
  padding-bottom: 7px;
  border-bottom: 2px solid var(--brand);
}

@media (min-width: 720px) {
  .contact-dialog-panel {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 28px;
    padding: 26px;
  }

  .contact-photo {
    display: block;
  }

  .contact-form {
    padding: 6px 10px 4px 0;
  }
}

.share-dialog {
  width: min(calc(100% - 32px), 480px);
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  overflow-y: auto;
  background: transparent;
  color: var(--ink);
}

.share-dialog::backdrop {
  background: rgba(23, 23, 23, 0.32);
}

.share-preview {
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.share-preview-message {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.share-preview-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.share-preview-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 9px;
}

.share-preview-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.share-preview-meta strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.share-preview-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.share-preview-site {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.share-dialog-actions .button {
  flex: 1 1 140px;
  min-height: 48px;
}

.share-dialog-status {
  margin: 10px 0 0;
  min-height: 20px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 720;
}

.share-dialog-status[data-state="success"] {
  color: #2d7145;
}

.footer {
  padding: 44px 0 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.footer .page {
  display: grid;
  gap: 28px;
  color: var(--muted);
  font-size: 15px;
}

.footer-blurb {
  max-width: 420px;
  margin: 0;
  line-height: 1.55;
}

.footer-brand {
  display: grid;
  gap: 18px;
  justify-items: start;
  align-content: start;
  padding-bottom: 30px;
}

.footer-tagline,
.footer-copyright {
  margin: 0;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50%;
  color: var(--hero-green);
}

.footer-social a:hover {
  border-color: currentColor;
}

.footer-social svg {
  display: block;
}

.footer-nav-title {
  margin: 0 0 4px;
  font-weight: 600;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 44px;
  align-items: start;
  justify-content: start;
}

.footer-nav-group {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-nav a {
  color: var(--hero-green);
  font-weight: 500;
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  justify-content: space-between;
  align-items: center;
}

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

.footer-wordmark {
  display: block;
  width: min(34vw, 110px);
  height: auto;
  margin: 0;
  user-select: none;
}

@media (min-width: 860px) {
  .footer .page {
    grid-template-columns: auto auto;
    grid-template-rows: auto 1fr;
    justify-content: start;
    gap: 30px clamp(64px, 12vw, 160px);
  }

  .footer-wordmark {
    width: min(14vw, 130px);
  }

  .footer-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .footer .page > .footer-nav {
    grid-column: 2;
    grid-row: 1;
    gap: 10px 56px;
  }

  .footer-bar {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-content: flex-start;
    gap: 12px 28px;
    padding-bottom: 30px;
  }

}

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

.footer p {
  margin: 0;
}

@media (min-width: 760px) {
  .page,
  .narrow {
    width: min(calc(100% - 80px), 1060px);
  }

  .narrow {
    width: min(calc(100% - 80px), 720px);
  }

  .help-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .principle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }

  .quote-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }

  .fact-list div {
    grid-template-columns: minmax(140px, 0.32fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 24px;
  }

  .demo-carousel {
    gap: 24px;
  }

  .demo-dots {
    display: none;
  }

  .demo-nav {
    position: absolute;
    top: clamp(180px, 24vw, 260px);
    z-index: 3;
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(23, 23, 23, 0.08);
    border-radius: 50%;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 16px 38px rgba(23, 23, 23, 0.18);
    color: var(--brand);
    cursor: pointer;
    font: inherit;
    font-size: 28px;
    font-weight: 760;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  .demo-nav[hidden] {
    display: none;
  }

  .demo-nav-prev {
    left: 18px;
  }

  .demo-nav-next {
    right: 18px;
  }

  .demo-nav:hover {
    background: var(--panel);
    box-shadow: 0 18px 44px rgba(23, 23, 23, 0.22);
  }

  .demo-nav-prev:hover {
    transform: translate(-2px, -50%);
  }

  .demo-nav-next:hover {
    transform: translate(2px, -50%);
  }

  .demo-nav:focus-visible {
    outline: 3px solid rgba(231, 86, 25, 0.28);
    outline-offset: 3px;
  }

  .demo-item {
    flex-basis: min(84vw, 920px);
  }

  .subscribe-form .button {
    min-width: 150px;
  }

  .about-layout {
    grid-template-columns: 178px minmax(0, 1fr);
    align-items: start;
    gap: 40px;
  }

  .about-photo {
    width: 178px;
    height: 178px;
  }
}

@media (min-width: 920px) {
  .final-cta-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  }
}

@media (max-width: 640px) {
  .site-nav {
    flex-wrap: wrap;
    gap: 14px 20px;
  }

  /* Phones keep the layered hero, but the copy drops to the bottom so the top
     of the frame stays reserved for the artwork. */
  .hero {
    align-items: flex-end;
    padding-top: 104px;
    padding-bottom: 44px;
  }

  .hero-copy {
    margin-top: 0;
  }

  /* The subline's sentence-per-line breaks orphan words at phone widths;
     let it flow as a paragraph instead. */
  .hero-subline br {
    display: none;
  }

  .hero-subline {
    font-size: 20px;
  }

  .demo-viewer {
    width: calc(100% - 20px);
  }

  .demo-viewer-video {
    max-height: calc(100svh - 64px);
  }

  .sticky-signup-tab {
    right: 15px;
    bottom: 15px;
  }

  .signup-dialog[open] {
    inset: auto 15px 15px 15px;
    width: auto;
  }

}

@media (max-width: 430px) {
  .page,
  .narrow {
    width: min(calc(100% - 30px), 1060px);
  }

  h1 {
    font-size: clamp(36px, 11vw, 46px);
    line-height: 1.04;
    letter-spacing: -0.02em;
  }

  .hero-subline {
    margin-top: 14px;
  }

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

  .hero-secondary-actions {
    font-size: 18px;
    line-height: 1.45;
    font-weight: 650;
  }

  .button {
    width: 100%;
  }
}

/* Product page */
.product-body {
  background: var(--hero-cream);
}

.product-header {
  position: static;
  padding-bottom: 8px;
}

.product {
  padding: clamp(36px, 6vw, 72px) 0 clamp(56px, 8vw, 104px);
}

.product-layout {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.product-media {
  border-radius: 14px;
  overflow: hidden;
  background: #ede7dc;
}

.product-media img {
  display: block;
  width: 100%;
  height: auto;
}

.product-kicker {
  margin-bottom: 12px;
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-panel h1 {
  max-width: none;
  margin-bottom: 18px;
  color: var(--hero-green);
  font-family: var(--sans);
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.1;
}

.product-blurb {
  margin-bottom: 20px;
  color: var(--hero-muted);
  font-size: 18px;
  line-height: 1.55;
}

.product-availability {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(22, 56, 42, 0.14);
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.availability-badge svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.availability-note {
  margin: 0;
  color: var(--hero-muted);
  font-size: 15px;
}

.waitlist-card {
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid rgba(22, 56, 42, 0.14);
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 12px 36px rgba(22, 56, 42, 0.08);
}

.waitlist-title {
  margin-bottom: 4px;
  color: var(--hero-green);
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
}

.product-waitlist-form {
  margin-top: 14px;
}

.waitlist-card:has(.waitlist-joined:not([hidden])) .waitlist-title {
  display: none;
}

.waitlist-row {
  display: flex;
  gap: 10px;
}

.waitlist-row input {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 54px;
  padding: 12px 20px;
  border: 1px solid rgba(22, 56, 42, 0.22);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
}

.waitlist-row input::placeholder {
  color: #9a948d;
}

.waitlist-row input:focus-visible {
  outline: 3px solid rgba(231, 86, 25, 0.28);
  outline-offset: 2px;
}

.product-waitlist-form .button {
  flex: 0 0 auto;
  min-width: 0;
  border-radius: 8px;
  padding: 14px 26px;
  font-weight: 600;
  white-space: nowrap;
}

.waitlist-fields {
  min-width: 0;
}

.waitlist-perks {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.waitlist-perks li {
  position: relative;
  padding-left: 26px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.waitlist-perks .perk-icon {
  position: absolute;
  top: 1px;
  left: 0;
  width: 16px;
  height: 16px;
  color: var(--hero-green);
}

.product-waitlist-form .form-note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--hero-muted);
}

.product-waitlist-form .form-status {
  min-height: 0;
}

.product-waitlist-form .form-status:empty {
  display: none;
}

@media (max-width: 560px) {
  .waitlist-row {
    flex-direction: column;
  }

  .product-waitlist-form .button {
    width: 100%;
  }
}

.waitlist-joined {
  padding: 4px 0 0;
}

.waitlist-joined-title {
  margin-bottom: 8px;
  color: var(--hero-green);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
}

.waitlist-joined-note {
  margin-bottom: 12px;
  color: var(--hero-muted);
  font-size: 16px;
  line-height: 1.5;
}

.waitlist-switch {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (min-width: 860px) {
  .product-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
    align-items: center;
  }
}

/* Legal / policy pages */
.legal-copy {
  display: grid;
  gap: 30px;
  max-width: 720px;
}

.legal-effective {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.8vw, 17px);
}

.legal-section h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 28px);
}

.legal-section p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: clamp(17px, 2.1vw, 19px);
  line-height: 1.56;
}

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

.legal-section a,
.legal-section strong {
  color: var(--ink);
  font-weight: 760;
}

.legal-section a {
  text-decoration-color: rgba(231, 86, 25, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.legal-list {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: 18px;
  max-width: 720px;
}

.legal-list li {
  color: var(--muted);
  font-size: clamp(17px, 2.1vw, 19px);
  line-height: 1.56;
  padding-left: 6px;
}

.legal-list li::marker {
  color: var(--ink);
  font-weight: 760;
}

.legal-list a,
.legal-list strong {
  color: var(--ink);
  font-weight: 760;
}

.legal-list a {
  text-decoration-color: rgba(231, 86, 25, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  word-break: break-word;
}