/* Furhaps — warm storybook design for pet lovers (Greg's directive 2026-08-28).
   Cream paper, deep warm ink, terracotta accents, soft rounded shapes. */

:root {
  --paper: #faf6ef;
  --paper-deep: #f3ead9;
  --ink: #2b2320;
  --ink-soft: #6b5f58;
  --accent: #d97742;
  --accent-deep: #c05f2c;
  --sage: #7a8b6f;
  --gold: #e9b44c;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(43, 35, 32, 0.08);
  /* The one page column the site header, the landing content and the full footer
     share (wide screens, FUR-60): their inner edges line up on it. */
  --page-max: 1120px;
  /* The large-screen type step: the root font size is the browser's default times this
     (1 below 1280px, so phones and tablets are untouched; raised in the media queries
     below). Every rem / em length therefore grows with it, which is wanted for type
     and spacing; a WIDTH CAP that is a rem / em length divides by it, so a page keeps
     the pixel measure it had before the step. */
  --type-step: 1;
}

html {
  font-size: calc(100% * var(--type-step));
}

@media (min-width: 1280px) {
  :root {
    --type-step: 1.125;
  }
}

@media (min-width: 2200px) {
  :root {
    --type-step: 1.25;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
}

h2 {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.env-badge {
  position: fixed;
  top: 8px;
  right: 8px;
  background: var(--gold);
  color: var(--ink);
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  z-index: 10;
  font-family: system-ui, sans-serif;
}

/* --- landing --- */
.hero {
  text-align: center;
  padding: 56px 0 40px;
}

.hero.bottom {
  padding: 40px 0 8px;
}

.sub {
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: calc(34em / var(--type-step));
  margin: 12px auto 24px;
}

/* FUR-279: the left-aligned tool-family pages reuse `.sub` under their H1; there it starts at
   the H1's left edge instead of the landing hero's centred block. */
main.tool .sub,
main.hub .sub,
main.scene-tool .sub,
main.quiz .sub,
main.share .sub {
  margin: 12px 0 24px;
}

.micro {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-top: 12px;
}

/* Price + what-you-get, above the hero CTA and above the photo input on
   /create (07 §4). Readable rather than loud: it is reassurance before an
   upload, not a price tag. */
.price-note {
  color: var(--ink);
  font-size: 0.95rem;
  max-width: calc(34em / var(--type-step));
  margin: 0 auto 22px;
}

.cta {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition:
    transform 0.12s ease,
    background 0.12s ease;
}

/* The `display` above beats the UA's `[hidden]` rule, so a hidden `.cta` would
   still render (FUR-284 R7: the story page's reveal button, /pay's renew button). */
.cta[hidden] {
  display: none;
}

.cta:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
}

.cta:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.proof,
.how,
.faq {
  padding: 28px 0;
}

.gallery {
  margin-top: 20px;
}

/* The sample-stories gallery (FUR-129): one card per sample book — from the
   dog's photos to the finished story. One column up to 1099px (two cards per row
   from 1100px on the landing, see the wide-screen landing block below);
   inside a card the two halves sit side by side from 600px up and stack below it. */
.sample-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 0 0 20px;
}

.sample-label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sample-step {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
}

.sample-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  align-items: center;
}

.sample-arrow {
  margin: 0;
  text-align: center;
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 1;
  transform: rotate(90deg);
}

.sample-photos,
.sample-art {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sample-photos img,
.sample-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.sample-photos img {
  aspect-ratio: 1;
  object-fit: cover;
}

.sample-name {
  margin: 16px 0 6px;
  font-size: 1.15rem;
}

.sample-name cite {
  font-style: italic;
  font-weight: 400;
}

.sample-quote {
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 3px solid var(--gold);
  color: var(--ink);
  font-style: italic;
}

.sample-quote p {
  margin: 0;
}

.sample-read {
  color: var(--accent-deep);
  font-weight: 700;
}

.gallery-note {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

@media (min-width: 600px) {
  .sample-flow {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
  }

  .sample-arrow {
    transform: none;
  }
}

@media (max-width: 480px) {
  .sample-card {
    padding: 16px;
    margin-bottom: 16px;
  }
}

.how ol {
  padding-left: 1.2em;
}

.how li {
  margin: 10px 0;
}

.faq details {
  background: #fff;
  border-radius: 12px;
  padding: 12px 18px;
  margin: 10px 0;
  box-shadow: var(--shadow);
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
}

/* --- funnel --- */
.steps-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 8px 0 20px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd0ba;
}

.dot.active {
  background: var(--accent);
}

.step.hidden {
  display: none;
}

form label {
  display: block;
  margin: 16px 0;
  font-weight: 700;
}

/* Text fields ONLY. A checkbox caught by this rule is stretched to the full
   width of its row and padded like a text box, which in the flex `.consent-choice`
   row pushes the label out of sight — the consent ask becomes an unreadable
   control. Scoped here rather than undone per block so every checkbox on the
   site (the FUR-4 banner's two, the FUR-74 opt-in) keeps its native box. */
input:not([type='checkbox']):not([type='radio']),
textarea,
select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  border: 1.5px solid #d8c9ae;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.mockup-wrap {
  display: flex;
  justify-content: center;
  margin: 18px 0;
}

#mockup {
  width: min(320px, 80vw);
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow);
  transform: rotate(-1.2deg);
}

.offer-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  margin-top: 16px;
}

.offer-name {
  font-weight: 700;
  font-size: 1.1rem;
}

.offer-points {
  color: var(--ink-soft);
  padding-left: 1.2em;
}

.offer-points li {
  margin: 6px 0;
}

.price {
  font-size: 2rem;
  font-weight: 700;
  margin: 12px 0;
}

/* FUR-136 T1: the promise line under the checkout button. */
.promise {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: 12px;
}

/* FUR-136 T2: the buyer's own words shown back — the step-4 story notes and
   the /q "you already told us" block. Notes, not prose: a quiet card, the
   label small above each answer. Neither sets `display`, so the UA [hidden]
   rule still hides the story notes until funnel.js fills them. */
.story-notes,
.told-us {
  background: #fdf8ef;
  border: 1px solid #e8dcc6;
  border-radius: var(--radius);
  margin: 16px 0;
  padding: 18px 22px;
  text-align: left;
}

.told-us {
  max-width: calc(34em / var(--type-step));
  margin: 16px auto;
}

.story-notes h2,
.told-us h2 {
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.story-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-notes-list li {
  margin: 10px 0;
}

.note-label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.note-text {
  white-space: pre-wrap;
}

/* FUR-191: the step-4 card reads as ONE finished page — the beginning of the
   story in the buyer's own words, quoted — never a list of gaps. Scoped to
   section.story-notes: /q's "you already told us" block shares the list,
   label and text classes and is unchanged. funnel.js hides the item of an
   unanswered memory; nothing here sets `display` on an item, so the UA
   [hidden] rule still applies. */
section.story-notes {
  background: #fffdf8;
  border: 1px solid #e3d3b8;
  box-shadow:
    0 1px 0 #efe3cf,
    0 6px 18px rgba(43, 35, 32, 0.08);
  padding: 22px 20px 18px;
}

section.story-notes h2 {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

section.story-notes .story-notes-list li {
  margin: 14px 0;
}

section.story-notes .note-text {
  display: block;
  border-left: 3px solid #e8c9a8;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.5;
  margin-top: 4px;
  padding-left: 12px;
}

section.story-notes .note-text::before {
  content: '\201C';
}

section.story-notes .note-text::after {
  content: '\201D';
}

section.story-notes .notes-closing {
  font-family: Georgia, serif;
  font-style: italic;
  margin: 16px 0 8px;
}

@media (min-width: 600px) {
  section.story-notes {
    padding: 28px 32px 22px;
  }
}

/* --- thanks / misc --- */
.thanks {
  text-align: center;
  padding-top: 48px;
}

/* Payment still settling, or a blocked checkout script — informational, never
   alarming: nothing here means the buyer lost money. */
.notice {
  background: #fdf3e3;
  border: 1px solid #e8dcc6;
  border-radius: 8px;
  color: var(--ink-soft);
  max-width: calc(34em / var(--type-step));
  margin: 16px auto;
  padding: 12px 16px;
}

.notice[hidden] {
  display: none;
}

/* The private story link (FUR-170, the mail-free delivery path) — the one link
   the buyer must keep, in the same quiet card as `.notice`. The copy button
   sets no `display`, so the UA `[hidden]` rule keeps it out of sight until
   `story-link.js` reveals it. */
.story-link {
  background: #fdf3e3;
  border: 1px solid #e8dcc6;
  border-radius: 8px;
  max-width: calc(34em / var(--type-step));
  margin: 24px auto;
  padding: 16px;
  text-align: left;
}

.story-link h2 {
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.story-link-copy {
  margin-top: 10px;
  padding: 8px 16px;
  font: inherit;
  border: 1.5px solid #d8c9ae;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.site-footer {
  text-align: center;
  color: var(--ink-soft);
  padding: 32px 20px 40px;
  border-top: 1px solid #e8dcc6;
}

.site-footer .fine {
  font-size: 0.8rem;
  max-width: calc(40em / var(--type-step));
  margin: 8px auto 0;
}

/* Policy links (FUR-4) — on every page, wrapping to one link per row on a
   narrow screen rather than overflowing. */
.policy-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 16px auto 0;
  font-size: 0.85rem;
}

.policy-links a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 2px;
  border-radius: 6px;
}

.policy-links a:hover {
  color: var(--accent-deep);
}

.policy-links a:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  color: var(--accent-deep);
}

/* --- policy pages (FUR-4) --- */
.legal h2 {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  margin: 32px 0 8px;
}

.legal p,
.legal li {
  font-size: 0.98rem;
}

.legal ul {
  padding-left: 1.2em;
}

.legal li {
  margin-bottom: 6px;
}

.legal .effective {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-top: 4px;
}

.legal .operator {
  font-style: normal;
  line-height: 1.5;
}

.legal a {
  color: var(--accent-deep);
}

/* Wide content inside a policy page (the Paddle entity table, the cookie table,
   the transfer table) scrolls inside its own wrapper. The PAGE must never
   scroll sideways — a horizontally shifted policy page on a phone is how a
   customer misses the column that names the seller. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 12px 0;
}

.legal-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 0.9rem;
}

.legal-table th,
.legal-table td {
  border: 1px solid var(--paper-deep);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: var(--paper-deep);
  font-weight: 700;
}

/* The statutory model withdrawal form is pre-formatted text a consumer may copy
   verbatim, so its line breaks matter — but it must wrap rather than force the
   page wide. */
.model-form {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--paper-deep);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* --- consent banner + privacy settings (FUR-4) --- */
/* A bottom sheet, deliberately not a modal wall: the visitor must be able to
   read the Privacy Notice while deciding, and nothing here is designed to make
   one answer easier than the other — the three buttons carry equal weight. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--paper);
  border-top: 2px solid var(--paper-deep);
  box-shadow: 0 -6px 24px rgba(43, 35, 32, 0.1);
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  font-size: 0.92rem;
}

.consent-inline {
  position: static;
  box-shadow: none;
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
}

.consent .consent-intro {
  margin: 0 0 10px;
  max-width: 720px;
}

.consent-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

/* An author `display` beats the UA `[hidden]` rule on ORIGIN, before
   specificity is considered — so without this the checkbox panel renders on
   every first visit and "Choose" is a dead control (same-family review SF-1).
   Same pattern as `.notice[hidden]` above; required beside every `display`
   rule on an element the consent UI toggles with the hidden attribute. */
.consent-detail[hidden] {
  display: none;
}

.consent-choice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.consent-choice input {
  margin-top: 6px;
  flex: 0 0 auto;
}

.consent-note {
  display: block;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* The marketing-reuse opt-in (FUR-74): its own block, set apart from the
   twelve questions above it so it can never read as question thirteen. It
   reuses the banner's `consent-choice` / `consent-note` classes. */
.consent-optin {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e8dcc6;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Equal weight on purpose: no "accept" styled as the obvious choice and no
   refusal hidden in small grey text. */
.consent-btn {
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  padding: 9px 16px;
  border: 1px solid var(--accent-deep);
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent-deep);
}

.consent-btn:hover {
  background: var(--paper-deep);
}

.consent-btn:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

.consent-save {
  align-self: flex-start;
}

@media (max-width: 480px) {
  main {
    padding: 16px 14px 48px;
  }

  .offer-card {
    padding: 18px;
  }

  .consent-actions .consent-btn {
    flex: 1 1 auto;
  }
}

/* The Remembering tribute page and the dog-scenes tool set their own width cap and
   side padding in rem in an inline style; these are the same lengths, held at their
   pre-step pixel widths so the content width does not shrink as the text scales (the
   more specific selector wins whatever the order). */
main.tool-tribute {
  max-width: calc(40rem / var(--type-step));
  padding-left: calc(1rem / var(--type-step));
  padding-right: calc(1rem / var(--type-step));
}

main.scene-tool {
  padding-left: calc(1rem / var(--type-step));
  padding-right: calc(1rem / var(--type-step));
}

/* --- The private story page (FUR-36) --------------------------------------
   Mobile-first, one column, one thing at a time. No page-flip and no animation
   library: the reveal is a button and a `hidden` attribute, and every word of
   the book is in the HTML before any script runs. */

.story {
  max-width: calc(44rem / var(--type-step));
  margin: 0 auto;
  padding: 2.5rem calc(1.25rem / var(--type-step)) 3rem;
  overflow-wrap: anywhere;
}

.story section {
  margin-bottom: 3rem;
}

.story-reveal {
  text-align: center;
}

.story-title {
  margin-bottom: 0.25rem;
}

.story .subtitle {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-top: 0;
}

.story-cover,
.story-illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 1.5rem auto;
}

.story-cover-card {
  background: var(--paper-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 3rem calc(1.5rem / var(--type-step));
  margin: 1.5rem auto;
}

.story-cover-name {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: 0;
}

.story .imprint {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.story-open {
  margin-top: 1rem;
}

.story-book-heading {
  font-size: 1.1rem;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-book-heading:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* The on-screen viewer for a delivery we have no manifest for: full width and
   tall enough to read from, never a thumbnail of a file. */
.story-viewer {
  display: block;
  width: 100%;
  min-height: 80vh;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper-deep);
}

.chapter {
  margin-top: 2.5rem;
}

.chapter-numeral {
  display: block;
  color: var(--ink-soft);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chapter-head {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.story-copy-note {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.story-note {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* --- The public sample page (FUR-129) ---------------------------------------
   The private story page's column and typography, plus the sample's own top:
   the label, the honesty sentence and the photos it was made from. */

.sample-story .story-reveal {
  margin-bottom: 1.5rem;
}

.sample-honesty {
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: calc(34em / var(--type-step));
  margin: 1rem auto 0;
}

.sample-source .sample-photos {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}

.sample-source h2.sample-step {
  font-size: 0.85rem;
}

.sample-credit {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 8px 0 0;
}

.sample-signoff {
  text-align: center;
  color: var(--ink-soft);
}

/* --- The example books presented like a delivered story (FUR-138) ----------
   Staging only. The private story page's column and typography unchanged; its
   sign-off, and the dog's photos after the book — the grid and thumbnails of
   `.sample-photos img`, with no label, no credit and no link. */

.story-signoff {
  text-align: center;
  color: var(--ink-soft);
}

.story-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.story-photos h2 {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.story-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  aspect-ratio: 1;
  object-fit: cover;
}

/* --- site chrome (FUR-249) ---------------------------------------------------
   The branded header (wordmark, menu, "Create their story"), the full footer and
   the quiet variant the Remembering pages use. Additions only: nothing above is
   edited, and every selector here is a chrome class (or a descendant / compound of
   one). Mobile-first: below 760px the logo sits left with a "Menu" toggle right and
   the nav drops down as a stacked list; from 760px it is one row.

   The server renders the menu OPEN. `public/site-menu.js` adds `.site-js` to the
   header and collapses it, so with no JavaScript (R24) every link is a plain,
   visible list at every width: the dropdown / toggle styling below is gated on
   `.site-js`. The header is not sticky. */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 20px;
  background: var(--paper);
  border-bottom: 1px solid #e8dcc6;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-logo img {
  display: block;
  height: 40px;
  width: auto;
}

.site-menu-toggle,
.site-tools-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e8dcc6;
  border-radius: 999px;
  cursor: pointer;
}

.site-js .site-menu-toggle,
.site-js .site-tools-toggle {
  display: inline-flex;
}

.site-tools-toggle::after {
  content: '\25BE';
  font-size: 0.85em;
}

.site-tools-toggle[aria-expanded='true']::after {
  content: '\25B4';
}

.site-nav {
  flex-basis: 100%;
}

.site-nav-list,
.site-tools-list,
.site-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-list > li > a,
.site-tools-list a,
.site-footer-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.site-nav-list > li > a:hover,
.site-tools-list a:hover,
.site-footer-col a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-nav-list a[aria-current='page'],
.site-footer-col a[aria-current='page'] {
  font-weight: 700;
}

.site-tools-list {
  padding-left: 16px;
}

.site-nav .site-cta {
  justify-content: center;
  min-height: 44px;
  margin: 6px 0 10px;
  padding: 10px 22px;
  font-size: 1rem;
  color: #fff;
}

.site-nav .site-cta:hover {
  color: #fff;
  text-decoration: none;
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer-full a:focus-visible,
.site-footer-quiet a:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Outside production the fixed `.env-badge` sits top-right: reserve its row so it
   never covers the menu toggle or the CTA (the badge is a sibling just before). */
.env-badge + .site-header {
  padding-top: 34px;
}

/* The quiet variant: a plain serif wordmark, never the furry one. */
.site-header-quiet {
  justify-content: center;
  padding: 14px 20px;
}

.site-wordmark-quiet {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* Footers. */
.site-footer-full {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  text-align: left;
  padding-left: max(20px, calc((100% - var(--page-max)) / 2));
  padding-right: max(20px, calc((100% - var(--page-max)) / 2));
}

.site-footer-brand {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 12px;
}

.site-footer-brand img {
  display: block;
  /* the mark is on white: multiply lets the paper show through. */
  mix-blend-mode: multiply;
  border-radius: 10px;
}

.site-footer-brand p {
  margin: 0;
}

.site-footer-col {
  flex: 1 1 100%;
}

.site-footer-heading {
  margin: 8px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.site-footer-full .fine {
  flex: 1 1 100%;
  max-width: none;
  margin: 8px 0 0;
}

.site-footer-full .policy-links {
  flex: 1 1 100%;
  justify-content: flex-start;
  margin: 0;
}

.site-footer-full .policy-links a,
.site-footer-quiet .policy-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-footer-quiet p {
  margin: 0;
}

.site-footer-quiet .fine a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 760px) {
  .site-header {
    flex-wrap: nowrap;
    padding: 10px 32px;
  }

  .site-js .site-menu-toggle {
    display: none;
  }

  .site-nav {
    flex-basis: auto;
  }

  .site-nav-list {
    display: flex;
    align-items: center;
    gap: 4px 22px;
  }

  .site-nav .site-cta {
    margin: 0;
  }

  .site-tools {
    position: relative;
  }

  /* No JavaScript: the tools entries are plain items of the one row. */
  .site-header:not(.site-js) .site-tools,
  .site-header:not(.site-js) .site-tools-list {
    display: contents;
  }

  .site-js .site-tools-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: calc(15rem / var(--type-step));
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e8dcc6;
    border-radius: 12px;
    box-shadow: var(--shadow);
  }

  .site-footer-brand {
    flex: 1.4 1 240px;
  }

  .site-footer-col {
    flex: 1 1 150px;
  }
}

/* Wide screens (FUR-60): from 1024px the header's inner edges sit on the same page
   column as the landing content and the full footer (`--page-max`): the logo (the quiet
   wordmark) at the column's left edge, the last control at its right edge. The column
   never gets narrower than the 20px page gutter the content and the footer use. The
   quiet header follows: its wordmark at the left edge and, on the memorial customer
   list, "Your stories" at the right edge; below 1024px it stays centred. */
@media (min-width: 1024px) {
  .site-header {
    padding-left: max(20px, calc((100% - var(--page-max)) / 2));
    padding-right: max(20px, calc((100% - var(--page-max)) / 2));
  }

  .site-header-quiet {
    justify-content: space-between;
  }
}

/* The customer area's entry (FUR-276), only while `CUSTOMER_ACCOUNT` is on: a quiet
   text link beside "Menu" (pushed right, against the button) and the same link as a menu
   item. From 760px the menu is a row and the button is gone: the beside link stays, at
   the row's right end, and the menu item is not repeated in the row. A >= 44px tap
   target at every width; the focus ring is the header's (above). */
.site-account {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 4px;
  color: var(--ink);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.site-account:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-account[aria-current='page'] {
  font-weight: 700;
}

/* FUR-280: below 1024px the memorial customer list's quiet header keeps its wordmark
   centred, the "Your stories" link beside it (the header's own gap), not pushed to the
   edge; from 1024px the wide-screen rule above puts the wordmark at the page column's
   left edge and the link at its right edge. */
.site-header-quiet .site-account {
  margin-left: 0;
}

/* The narrowest phones (logo + link + Menu on one line at 320px): the link may shrink —
   a smaller size, and its two words on two lines only where one line does not fit —
   never its 44px target. */
@media (max-width: 359px) {
  .site-header .site-account {
    max-width: 3.6em;
    padding: 0;
    font-size: 0.85rem;
  }
}

@media (min-width: 760px) {
  .site-account {
    order: 1;
    margin-left: 6px;
  }

  .site-account ~ .site-nav {
    margin-left: auto;
  }

  .site-nav-account {
    display: none;
  }
}

/* No JavaScript, from 760px (FUR-60): the full header's nav is every link in one flat
   list (the tools are plain items of the row, 16+ of them), which no single row of any
   desktop width holds. So without the script the header wraps: the logo and the account
   link on the first row (the link at the right end), the nav on its own full-width row
   below with its links wrapping inside the page column. With the script the dropdown and
   the one-row nav above apply untouched (`.site-js`). */
@media (min-width: 760px) {
  .site-header[data-site-chrome='full']:not(.site-js) {
    flex-wrap: wrap;
  }

  .site-header[data-site-chrome='full']:not(.site-js) .site-account {
    order: 0;
    margin-left: auto;
  }

  .site-header[data-site-chrome='full']:not(.site-js) .site-nav {
    flex-basis: 100%;
    margin-left: 0;
  }

  .site-header[data-site-chrome='full']:not(.site-js) .site-nav-list {
    flex-wrap: wrap;
  }
}

/* The `[hidden]` rules close the block and stay LAST: an author `display` above
   beats the UA `[hidden]` rule, so each hidden-able chrome element restates it. */
.site-header .site-nav[hidden],
.site-header .site-tools-list[hidden] {
  display: none;
}

/* --- tool page buttons (FUR-249 polish) ---------------------------------------
   The card tools' and the countdown page's secondary controls ("Another line",
   "Download", "Copy caption", "Get a link to share", the share-link and countdown
   buttons) were native unstyled buttons. They get the site's secondary button —
   a white pill with the accent outline, as the teaser chat's `.st-btn` — while the
   primary `.cta` (Share, Create link) keeps its filled style. Additions only,
   scoped to `main.tool` and `main.countdown`; no `display` is set, so the UA
   `[hidden]` rule still hides a hidden button. ≥44 px tall at every width. */
main.tool button:not(.cta),
main.countdown button:not(.cta) {
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 999px;
  background: #fff;
  color: #8a3d14;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.12s ease;
}

main.tool button:not(.cta):hover:not(:disabled),
main.countdown button:not(.cta):hover:not(:disabled) {
  background: var(--paper-deep);
}

main.tool button.cta {
  min-height: 44px;
  padding: 10px 24px;
  font-size: 1rem;
}

main.tool button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

main.tool button:focus-visible,
main.countdown button:focus-visible {
  outline: 3px solid #1f5f8b;
  outline-offset: 2px;
}

/* --- the customer area (FUR-275) ---------------------------------------------
   `/account`, `/account/sign-in` and `/account/verify` take the site's own look.
   Everything is scoped to `main.account` (src/pages/account.ts); nothing else on the
   site changes. The text inputs already inherit the email-capture field rules above
   (`input:not([type='checkbox'])…`, `input:focus`), and the submit buttons are the
   primary `.cta`; this block adds what was missing: the order list as cards, the
   links and the native sign-out buttons as the secondary pill of the tool pages
   (FUR-249, mirrored declarations: >= 44 px tall, the same focus ring), left-aligned
   text, and a focus ring on links and inputs. The orders' action row holds the
   separator " · " between two links; its font-size 0 keeps that text node (the copy
   is unchanged) out of sight while the links restore their own size. */
main.account {
  max-width: 640px;
  text-align: left;
}

main.account h1 {
  margin: 0 0 12px;
}

main.account a {
  color: #8a3d14;
  text-decoration: underline;
  text-underline-offset: 3px;
}

main.account a:hover {
  color: var(--accent-deep);
}

/* Text links in a sentence or a quiet line (the sign-in links, "Ask for a new code")
   stay quiet text but get a 44 px-tall, text-wide-plus-8px tap area: an invisible
   pseudo-element, so the line and its wrapping are untouched. The order-action
   links (in a span) and the buttons below are real 44 px boxes. */
main.account p a {
  position: relative;
}

main.account p a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -8px;
  right: -8px;
  height: 44px;
  transform: translateY(-50%);
}

main.account .notice {
  margin-left: 0;
  margin-right: 0;
}

main.account form {
  max-width: calc(28em / var(--type-step));
}

main.account .cf-turnstile {
  margin-top: 16px;
}

main.account form .cta {
  min-height: 44px;
  margin-top: 16px;
}

main.account .account-orders {
  display: grid;
  gap: 14px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

main.account .account-order {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e8dcc6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}

main.account .account-order > strong {
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.3;
}

main.account .account-order .micro {
  margin-top: 0;
}

main.account .account-order-status {
  color: var(--ink-soft);
}

main.account .account-order-actions {
  font-size: 0;
  line-height: 0;
}

main.account button:not(.cta),
main.account .account-order-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 999px;
  background: #fff;
  color: #8a3d14;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}

main.account .account-order-actions a {
  margin: 10px 10px 0 0;
}

main.account button:not(.cta):hover,
main.account .account-order-actions a:hover {
  background: var(--paper-deep);
  color: #8a3d14;
}

/* FUR-280 (ACC-7): the dog's name inside each action link, for screen readers only —
   the standard visually-hidden clip pattern. */
main.account .account-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main.account form[action^='/account/sign-out'] {
  display: inline-block;
  margin: 8px 10px 0 0;
}

main.account a:focus-visible,
main.account button:focus-visible,
main.account input:focus-visible {
  outline: 3px solid #1f5f8b;
  outline-offset: 2px;
}

/* --- The landing on wide screens (FUR-60) ----------------------------------------
   `main.landing` only (the home page and the ad landers); the funnel, thanks, legal,
   story and tool pages keep their widths. From 1024px the landing widens to the shared
   page column (`--page-max`, plus the 20px gutter `main` carries, so the CONTENT edges
   are the column's); prose keeps a 42rem measure, centred, and only the sample gallery
   uses the full column. */
@media (min-width: 1024px) {
  main.landing {
    max-width: calc(var(--page-max) + 40px);
  }

  main.landing .hero,
  main.landing .how,
  main.landing .faq,
  main.landing .proof > h2,
  main.landing .proof > p {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }

  main.landing h1 {
    font-size: clamp(3rem, 3.4vw, 3.5rem);
  }
}

/* Between 1024 and 1099px the gallery is still one column: keep the cards at the
   prose measure rather than a thousand pixels wide. */
@media (min-width: 1024px) and (max-width: 1099.98px) {
  main.landing .gallery {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* From 1100px two cards per row (equal height: grid items stretch). A card is then
   about 480px of content, too narrow for photos | arrow | art side by side, so its
   halves stack with the arrow turned down, as on a phone. The note after the cards
   spans both columns, an odd last card included. */
@media (min-width: 1100px) {
  main.landing .gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  main.landing .gallery .sample-card {
    margin: 0;
  }

  main.landing .gallery .sample-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  main.landing .gallery .sample-arrow {
    transform: rotate(90deg);
  }

  main.landing .gallery .gallery-note {
    grid-column: 1 / -1;
    margin: 0;
  }
}

/* --- Pre-payment teaser chat in /create step 3 (FUR-152) ---------------------
   Scoped under `.story-teaser` (the mount point the server renders only when
   both of the teaser's locks are open; public/story-teaser.js builds it). The
   step-3 form is untouched. The `[hidden]` rule closing this block stays LAST. */

.story-teaser {
  margin: 12px 0 20px;
}

.story-teaser .st-chips,
.story-teaser .st-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}

.story-teaser .st-btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid #a64b1c;
  background: #fff;
  color: #8a3d14;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.story-teaser .st-send,
.story-teaser .st-chip[aria-pressed='true'] {
  background: #a64b1c;
  color: #fff;
}

.story-teaser .st-link {
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
}

.story-teaser button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.story-teaser button:focus-visible,
.story-teaser .st-input:focus-visible {
  outline: 3px solid #1f5f8b;
  outline-offset: 2px;
}

.story-teaser .st-privacy,
.story-teaser .st-sub,
.story-teaser .st-status,
.story-teaser .st-sketch-label {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.story-teaser .st-ask {
  margin: 0;
  font-weight: 700;
}

.story-teaser .st-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 12px;
  border: 1.5px solid #d8c9ae;
  border-radius: 12px;
  background: var(--paper-deep);
}

.story-teaser .st-msg {
  max-width: 92%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.story-teaser .st-owner {
  align-self: flex-end;
  background: #f6e3cf;
}

.story-teaser .st-input {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.story-teaser .st-sketch {
  margin: 12px 0;
  padding: 16px;
  border: 1px solid #e8dcc6;
  border-radius: 12px;
  background: #fdf3e3;
}

.story-teaser .st-sketch-text {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}

.story-teaser .st-note {
  margin: 0 0 8px;
  color: var(--ink-soft);
}

.story-teaser [hidden] {
  display: none;
}

/* --- Story-guide chat on /q/:id (FUR-149) ------------------------------------
   Everything is scoped under `.story-guide` (the section the server renders,
   hidden until public/story-guide.js reveals it). Mobile first, readable at
   320 px; the form below it is untouched. An author `display` beats the UA
   `[hidden]` rule, so the `[hidden]` rule closing this block must stay LAST. */

.story-guide {
  margin: 20px 0 28px;
}

.story-guide .sg-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.story-guide .sg-btn,
.story-guide .sg-choice button {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid #a64b1c;
  background: #fff;
  color: #8a3d14;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.story-guide .sg-choice-chat,
.story-guide .sg-send {
  background: #a64b1c;
  color: #fff;
}

.story-guide .sg-link {
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
}

.story-guide button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.story-guide button:focus-visible,
.story-guide .sg-input:focus-visible,
.story-guide .sg-messages:focus-visible,
.story-guide .sg-notice:focus-visible {
  outline: 3px solid #1f5f8b;
  outline-offset: 2px;
}

.story-guide .sg-privacy,
.story-guide .sg-sub {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.story-guide .sg-progress {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

.story-guide .sg-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 55vh;
  min-height: 120px;
  overflow-y: auto;
  padding: 12px;
  border: 1.5px solid #d8c9ae;
  border-radius: 12px;
  background: var(--paper-deep);
}

.story-guide .sg-msg {
  max-width: 92%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.story-guide .sg-msg::before {
  content: attr(data-who);
  display: block;
  margin-bottom: 2px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.story-guide .sg-owner {
  align-self: flex-end;
  background: #f6e3cf;
}

.story-guide .sg-status {
  min-height: 1.5em;
  margin: 8px 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.story-guide .sg-label {
  display: block;
  font-weight: 700;
}

.story-guide .sg-count {
  display: block;
  margin: 4px 0 10px;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: right;
}

.story-guide .sg-actions,
.story-guide .sg-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.story-guide .sg-foot {
  margin-top: 12px;
}

.story-guide .sg-notice {
  margin: 12px 0;
  padding: 12px 16px;
  border: 1px solid #e8dcc6;
  border-radius: 8px;
  background: #fdf3e3;
  color: var(--ink);
}

@media (min-width: 480px) {
  .story-guide .sg-choice {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.story-guide [hidden] {
  display: none;
}