/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: custom-garden · enrichment: Tier C generated stills (Grok Imagine) · nav: N9 · footer: Ft2
 * tone: editorial botanical · anchor hue: leaf green 150
 * vibe: "vintage natural-history plates, Bay Area morning" · paper oklch(93.1% 0.046 88) · accent oklch(45% 0.1 150)
 * axes: light / roman-serif / chromatic-other (green)
 * #45: product specimen (sample care card + visit report) in HTML/CSS; plates I–II regenerated (ChatGPT, Grok)
 * #74: half the words; section shapes vary: split hero, specimen stage, price ledger, dark sitter band, statement, map
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  font-optical-sizing: auto;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* N9 · edge-aligned */
.nav-edge {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--page-gutter);
}
.wordmark {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  text-decoration: none; letter-spacing: -0.01em; white-space: nowrap;
}
.nav-chip {
  min-height: 44px; display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-sm);
  color: var(--color-accent); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-chip:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.nav-chip:active { transform: translateY(1px); }
.nav-chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Split Studio rows */
.split {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl); align-items: center;
  padding: var(--space-2xl) var(--page-gutter);
  max-width: 78rem; margin-inline: auto;
}
.split__text { min-width: 0; max-width: var(--measure); }
.split--hero { padding-top: var(--space-xl); }
.kicker {
  margin: 0 0 var(--space-md); font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-sm); color: var(--color-terracotta);
}

.plate { margin: 0; min-width: 0; }
.plate img {
  width: 100%;
  --fade-x: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  --fade-y: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: var(--fade-x), var(--fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-x), var(--fade-y);
  mask-composite: intersect;
}
.plate--print img { -webkit-mask-image: none; mask-image: none; }
.plate figcaption {
  margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2);
  text-align: center; font-variant-numeric: oldstyle-nums;
}

/* Specimen stage: the sample care card and visit report, set large on a paper-2 table */
.stage { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.stage__inner {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-2xl); align-items: center;
  padding: var(--space-3xl) var(--page-gutter); max-width: 78rem; margin-inline: auto;
}
.stage__text { min-width: 0; }
.specimen {
  margin: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start;
}
.care-card, .report {
  min-width: 0; padding: var(--space-lg);
  background: var(--color-card); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  font-size: var(--text-md); line-height: 1.45;
}
.care-card { grid-column: 1 / 7; grid-row: 1; margin-top: var(--space-2xl); rotate: calc(var(--tilt) * -1); }
.report { grid-column: 7 / 13; grid-row: 1; margin-left: calc(var(--space-sm) * -1); rotate: var(--tilt); }
.specimen figcaption {
  grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-xl);
  font-size: var(--text-sm); color: var(--color-ink-2); text-align: center;
}
.paper-tag {
  margin: 0; font-size: var(--text-sm); color: var(--color-terracotta);
  font-family: var(--font-display); font-weight: 600;
}
.care-card h3 {
  margin: var(--space-xs) 0 0; font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); line-height: 1.15;
}
.care-card__where { margin: var(--space-xs) 0 0; color: var(--color-ink-2); }
.care-card dl { margin: var(--space-md) 0 0; }
.care-card dl div {
  display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--space-sm);
  padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule);
}
.care-card dt { font-family: var(--font-display); font-weight: 600; }
.care-card dd { margin: 0; color: var(--color-ink-2); }
.report__photo { position: relative; margin-top: var(--space-sm); }
.report__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.report__stamp {
  position: absolute; left: var(--space-sm); bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm);
  background: var(--color-stamp); color: var(--color-accent-ink);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.report__visit { margin: var(--space-sm) 0 0; font-family: var(--font-display); font-weight: 600; }
.report__checks { list-style: none; margin: var(--space-xs) 0 0; padding: 0; color: var(--color-ink-2); }
.report__checks li { padding-left: 1.4em; text-indent: -1.4em; }
.report__checks li::before { content: "✓"; display: inline-block; width: 1.4em; text-indent: 0; color: var(--color-accent); font-weight: 600; }
.report__note { margin: var(--space-sm) 0 0; }

h1, h2 {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.04; margin: 0;
  overflow-wrap: anywhere; min-width: 0;
}
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-xl); line-height: 1.12; }
h1 .stay { color: var(--color-accent); }
.lede { font-size: var(--text-lg); line-height: 1.45; margin: var(--space-lg) 0 var(--space-xl); color: var(--color-ink-2); }
.split__text p { margin: var(--space-md) 0 0; }

/* F4 · step sequence, as three short numbered lines */
.steps {
  margin: var(--space-xl) 0 0; padding: 0; list-style: none; counter-reset: step;
  font-size: var(--text-lg); line-height: 1.35;
}
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: var(--space-sm);
  padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-ink);
}
.steps li::before {
  content: counter(step); font-family: var(--font-display); font-weight: 600; color: var(--color-accent);
  font-variant-numeric: lining-nums;
}

/* Trust chips: one line, said once */
.chips {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin: var(--space-lg) 0 0; padding: 0; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
}
.chips li {
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-card);
}
.chips a {
  color: var(--color-accent); text-underline-offset: 0.25em;
  transition: color var(--dur-fast) var(--ease-out);
}
.chips a:hover { color: var(--color-accent-strong); }
.chips a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-sm); }

/* C2 · inline form as CTA, filled button and boxed inputs */
.cta-form { margin-top: var(--space-lg); }
.cta-form__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.cta-form input[type="email"], .cta-form input[type="text"] {
  min-width: 0; width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md);
  background: var(--color-field); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.cta-form input::placeholder { color: var(--color-ink-2); opacity: 0.8; }
.cta-form input:hover { border-color: var(--color-ink); }
.cta-form input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.cta-form button {
  min-height: 48px; margin-top: var(--space-sm); padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent); color: var(--color-accent-ink);
  border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cta-form button:hover { background: var(--color-accent-strong); }
.cta-form button:active { transform: translateY(1px); }
.cta-form button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cta-form button:disabled { cursor: progress; background: var(--color-ink-2); }
.cta-form__next { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.cta-form__status { min-height: 1.6em; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.cta-form[data-state="error"] input[type="email"] { border-color: var(--color-error); }
.cta-form[data-state="error"] .cta-form__status { color: var(--color-error); }
.cta-form[data-state="success"] .cta-form__status { color: var(--color-accent); }
.trap { display: none; }

/* Rates: a price ledger with oversized figures */
.rates {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: end;
  padding: var(--space-3xl) var(--page-gutter); max-width: 78rem; margin-inline: auto;
}
.rates__head p { margin: var(--space-md) 0 0; color: var(--color-ink-2); }
.rates__tiers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.rates__tiers li {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: 0 var(--space-md); border-left: var(--rule-hair) solid var(--color-rule);
}
.rates__price {
  font-family: var(--font-display); font-size: var(--text-figure); line-height: 0.9; letter-spacing: -0.03em;
  color: var(--color-accent); font-variant-numeric: lining-nums;
}
.rates__price--quote { color: var(--color-ink-2); }
.rates__count { font-size: var(--text-sm); color: var(--color-ink-2); }

/* Sitters: the one dark band */
.band { background: var(--color-night); color: var(--color-night-ink); }
.band__inner {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: center;
  padding: var(--space-2xl) var(--page-gutter); max-width: 78rem; margin-inline: auto;
}
.band__text { min-width: 0; }
.band h2 { font-size: var(--text-display); }
.band__pay { margin: var(--space-md) 0 0; font-size: var(--text-lg); color: var(--color-night-ink-2); }
.band__pay strong { font-family: var(--font-display); font-weight: 600; color: var(--color-night-accent); }
.plate--band { max-width: 22rem; justify-self: end; }
.band .plate figcaption { color: var(--color-night-ink-2); }
.band .cta-form button { background: var(--color-night-accent); color: var(--color-night); }
.band .cta-form button:hover { background: var(--color-night-ink); }
.band .cta-form button:disabled { background: var(--color-night-ink-2); }
.band .cta-form input[type="email"], .band .cta-form input[type="text"] { border-color: var(--color-night-rule); }
.band .cta-form :focus-visible { outline-color: var(--color-night-accent); }
.band .cta-form__next, .band .cta-form__status { color: var(--color-night-ink-2); }
.band .cta-form[data-state="error"] input[type="email"] { border-color: var(--color-night-error); }
.band .cta-form[data-state="error"] .cta-form__status { color: var(--color-night-error); }
.band .cta-form[data-state="success"] .cta-form__status { color: var(--color-night-accent); }

/* Guarantee: one centred statement, full terms on request */
.guarantee {
  padding: var(--space-3xl) var(--page-gutter) 0; max-width: 48rem; margin-inline: auto; text-align: center;
}
.guarantee > p { margin: var(--space-md) auto 0; max-width: var(--measure); color: var(--color-ink-2); }
.guarantee__full { margin-top: var(--space-lg); text-align: left; }
.guarantee__full summary {
  display: block; width: fit-content; margin-inline: auto; min-height: 44px; padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display); font-weight: 600; color: var(--color-accent);
  cursor: pointer; list-style: none;
  border-bottom: var(--rule-hair) solid var(--color-accent);
  transition: color var(--dur-fast) var(--ease-out);
}
.guarantee__full summary::-webkit-details-marker { display: none; }
.guarantee__full summary::after { content: " +"; }
.guarantee__full[open] summary::after { content: " −"; }
.guarantee__full summary:hover { color: var(--color-accent-strong); }
.guarantee__full summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.guarantee__terms {
  display: grid; gap: var(--space-lg);
  margin: var(--space-xl) 0 0; font-size: var(--text-sm);
}
.guarantee__terms div {
  display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--space-md);
  padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-ink);
}
.guarantee__terms dt { font-family: var(--font-display); font-weight: 600; }
.guarantee__terms dd { margin: 0; color: var(--color-ink-2); }
.guarantee__note { margin: var(--space-lg) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }

/* Where: city pills that open to their neighborhoods, beside the map */
.where {
  padding: var(--space-3xl) var(--page-gutter); max-width: 78rem; margin-inline: auto;
}
.where__head { min-width: 0; max-width: var(--measure); }
.where__head > p { margin: var(--space-md) 0 0; color: var(--color-ink-2); }
.where__head a { color: var(--color-accent); text-underline-offset: 0.25em; }
.where__head a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.where__cities {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin: var(--space-xl) 0 0; padding: 0; list-style: none;
}
.where__cities li:has(details[open]) { flex-basis: 100%; }
.where__cities summary {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  min-height: 44px; padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600; cursor: pointer; list-style: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.where__cities summary::-webkit-details-marker { display: none; }
.where__cities summary:hover { background: var(--color-paper-2); }
.where__cities summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.where__cities details[open] summary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.where__count { font-size: var(--text-sm); font-weight: 400; opacity: 0.75; font-variant-numeric: lining-nums; }
.where__cities p { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: var(--space-sm) 0 var(--space-sm) var(--space-md); color: var(--color-ink-2); }
.where__cities span { white-space: nowrap; }
.where__map { margin: var(--space-xl) 0 0; }
.where__views { display: flex; gap: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-ink); }
.where__views button {
  min-height: 44px; padding: 0; margin-bottom: calc(-1 * var(--rule-hair));
  background: none; color: var(--color-ink-2); border: 0; border-bottom: 2px solid transparent;
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.where__views button:hover { color: var(--color-ink); }
.where__views button:active { transform: translateY(1px); }
.where__views button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.where__views button[aria-pressed="true"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.where__canvas {
  aspect-ratio: 4 / 5; margin-top: var(--space-md);
  background: var(--color-paper-2); border-radius: var(--radius-sm);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.where__map[data-state="ready"] .where__canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .where__canvas { transition-duration: var(--dur-fast); } }
@media (min-width: 56.01rem) {
  .where:has(.where__map:not([hidden])) {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
    column-gap: var(--space-2xl); align-items: start;
  }
  .where__map { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .where__canvas { aspect-ratio: 1; }
}
.where__map figcaption {
  margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2);
  font-variant-numeric: oldstyle-nums;
}

/* Ft2 */
.foot-line {
  margin: 0 var(--page-gutter); padding: var(--space-lg) 0 var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm); color: var(--color-ink-2);
}
.foot-line p { margin: 0; }

/* One orchestrated entrance */
@media (prefers-reduced-motion: no-preference) {
  .split--hero .split__text, .split--hero .plate {
    animation: rise var(--dur-slow) var(--ease-out) both;
  }
  .split--hero .plate { animation-delay: 120ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 30rem) {
  .cta-form button { width: 100%; }
}

@media (max-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl); }
  .plate { max-width: 26rem; margin-inline: auto; }
  .stage__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); }
  .stage__text { order: -1; }
  .specimen { max-width: 26rem; margin-inline: auto; width: 100%; }
  .care-card, .report { font-size: var(--text-sm); }
  .care-card { grid-column: 1 / 12; margin-top: 0; padding-bottom: var(--space-2xl); }
  .report { grid-column: 2 / 13; grid-row: 2; margin: calc(var(--space-lg) * -1) 0 0; }
  .specimen figcaption { grid-row: 3; }
  .steps { font-size: var(--text-md); margin-top: var(--space-lg); }
  .rates { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); }
  .rates__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .band__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); }
  .band h2 { font-size: var(--text-xl); }
  .plate--band { max-width: 16rem; justify-self: center; }
  .guarantee { padding-top: var(--space-2xl); }
  .guarantee__terms div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .where { padding-block: var(--space-2xl); }

}