/* New Puppy, What Now — shared funnel stylesheet.
   Palette read off Frank's own artwork, approved for /sleep and /start
   on Systeme August 27, 2026 (see Funnel Page Copy - DRAFT.md). Carried
   forward unchanged into the self-hosted build so the brand doesn't shift
   mid-funnel. Type scale, spacing, motion and focus treatment follow the
   banked reference in the vault's Web Design folder (visual-direction,
   typography, ui, animation, accessibility notes). */

/* Local WOFF2 files remove the render-blocking Google Fonts import and keep
   visitor IP addresses on this site rather than sending them to Google. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #1c3157;
  --rust: #b45a28;
  --rust-shadow: #8c4420;
  --teal: #2f8f8a;
  --teal-text: #24706b;
  --cream: #faf7f1;
  --ink: #23262b;
  --hairline: #ded7ca;
  --white: #ffffff;

  --content-width: 680px;
  --radius: 10px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5rem;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  color-scheme: light;
}

/* Night reading is an operating condition for this audience, not a decorative
   alternate palette. It follows the device preference so nobody has to find a
   setting while holding a restless puppy at 2 AM. */
 :root[data-theme="dark"] {
    --navy: #d9e7ff;
    --rust: #cf7040;
    --rust-shadow: #8f4324;
    --teal: #72c9c3;
    --teal-text: #8cddd7;
    --cream: #141a24;
    --ink: #e7eaf0;
    --hairline: #3c485b;
    --white: #1e2735;
    color-scheme: dark;
  }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --navy: #d9e7ff;
    --rust: #cf7040;
    --rust-shadow: #8f4324;
    --teal: #72c9c3;
    --teal-text: #8cddd7;
    --cream: #141a24;
    --ink: #e7eaf0;
    --hairline: #3c485b;
    --white: #1e2735;
    color-scheme: dark;
  }

}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--teal-text); }

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--navy); }
}

::selection { background: var(--teal); color: var(--white); }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  text-align: center;
  /* NOT text-wrap: balance. Balance equalises line lengths by deliberately
     shortening them, so a heading stops filling its box and reads narrower
     than the body copy beneath it. `pretty` keeps the anti-orphan benefit
     without that. Steve flagged the balanced version on /sleep,
     September 2, 2026. */
  text-wrap: pretty;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 600; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 700; }

p { margin: 0 0 var(--space-3); }
p strong { color: var(--navy); }

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
}

.wrap--narrow { max-width: 560px; }

/* Brand mark — the one signature element every page carries, per the
   visual-direction note: spend the boldness once, keep it recognizable. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.brand img {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 4px solid var(--navy);
  object-fit: cover;
}

.brand span {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--teal-text);
}

.eyebrow {
  display: inline-block;
  font-size: 1.3em;
  margin-right: 0.35em;
  line-height: 1;
}

.hero-audience {
  margin-bottom: var(--space-1);
  color: var(--teal-text);
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.hero-summary {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 auto var(--space-2);
  max-width: 38rem;
  text-align: center;
}

.hero-cta { margin-top: var(--space-2); }
.hero-cta .fine { color: var(--ink); opacity: 0.72; }

.rule {
  width: 56px;
  height: 3px;
  background: var(--teal);
  border: none;
  margin: var(--space-4) auto;
  border-radius: 2px;
}

/* Standing notice — a scope boundary or a caveat, not a sales paragraph.
   Deliberately the same device the transactional emails already use for the
   refund terms and the crisis signpost (a quieter panel with a teal leading
   edge), so the two channels read as one brand. White rather than cream here
   because the page ground is already cream. */
.note {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-inline-start: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}

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

/* Anchored sections keep a little air above them when jumped to. */
[id] { scroll-margin-top: var(--space-3); }

/* The line introducing the opt-in form belongs to the FORM, not to the argument
   above it, so it is spaced that way: pushed down away from the preceding copy,
   held close to the form, and centered to match it. Per the layout note, related
   things sit close and unrelated things sit apart, and the gap between groups
   should be at least twice the gap within one. */
.optin-lead {
  text-align: center;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

/* The opt-in form is the jump target for the home page's "Get the free guide"
   link. The clearance is set so the .optin-lead line above it lands on screen
   too, rather than being clipped by the top edge. Measured at 375x667 and
   390x844: the line is visible and the submit button still clears the fold. */
#optin-form { scroll-margin-top: var(--space-6); }

/* Opt-in-only content. `/sleep` is reached two ways: straight after the opt-in,
   where the visitor needs telling their free guide is on its way, and cold from
   the home page, where that line would be nonsense. Anything that assumes the
   opt-in just happened is marked data-optin-only and hidden by default, so the
   COLD reading is the safe default and the confirmation is the addition.
   The flag is set by a tiny script in each page's <head> rather than after load,
   because unhiding at DOMContentLoaded would flash the page without it first. */
[data-optin-only] { display: none; }
.npwn-from-optin [data-optin-only] { display: revert; }

/* Buttons and the checkout CTA */
.btn {
  display: inline-block;
  background: var(--rust);
  color: var(--white);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 0.9em 1.6em;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 4px 0 var(--rust-shadow);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--white); filter: brightness(1.04); }
  .btn--quiet:hover { color: var(--navy); background: rgba(28, 49, 87, 0.06); }
  .footer a:hover { color: var(--navy); }
  .consent button:hover { filter: brightness(1.08); }
}

.btn--quiet {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  box-shadow: none;
  padding: 0.65em 1.1em;
  font-size: 0.95rem;
}

.btn:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 2px 0 var(--rust-shadow);
}

.btn-row { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; margin: var(--space-4) 0; }
.btn-row > * { margin: 0; }
.btn-row--tight { margin-top: calc(var(--space-4) * -0.5); }
.btn-row + p.fine,
.btn + p.fine { text-align: center; margin-top: var(--space-2); }

.fine { font-size: 0.9rem; color: #565b63; }

/* Table for the five debunked claims — approved as the one exception to
   "no bullet points," because a table reads as evidence, not opinion. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: 0.95rem;
}

th, td {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

th {
  background: var(--navy);
  color: var(--white);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
}

/* Feature image — used sparingly, one per page at most, to break up long
   copy on /guide rather than decorate every section. */
.feature-img {
  border-radius: var(--radius);
  margin: var(--space-4) 0;
  box-shadow: 0 8px 24px rgba(28, 49, 87, 0.12);
}

.footer {
  text-align: center;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  font-size: 0.85rem;
  color: #6b7078;
}

.footer a { color: #6b7078; display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; margin: 0 0.3em; }

#theme-toggle {
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 50;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  font-size: 1.3rem;
}

/* Squeeze-page form */
.optin { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }

.optin input[type="email"],
.optin input[type="text"] {
  width: 100%;
  max-width: 380px;
  padding: 0.85em 1em;
  font-size: 1.05rem;
  border: 2px solid var(--hairline);
  border-radius: var(--radius);
  font-family: inherit;
  transition: border-color 120ms var(--ease-out);
}

.optin input[type="email"]:focus,
.optin input[type="text"]:focus { border-color: var(--teal); }

.optin .btn { width: 100%; max-width: 380px; }

.optin-status,
.credit-status {
  min-height: 1.2em;
  font-size: 0.95rem;
}

.optin-status[data-state="error"],
.credit-status[data-state="error"] { color: var(--rust-shadow); }
.optin-status[data-state="ok"],
.credit-status[data-state="ok"] { color: var(--teal-text); }

.optin .btn:disabled { cursor: wait; opacity: 0.65; }

/* Entrance motion — fade plus a near-scale, never from zero, under 300ms
   per the banked animation note. Respects reduced motion below. */
.enter {
  animation: enter 220ms var(--ease-out) both;
}

@keyframes enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}

@media (max-width: 480px) {
  .wrap { padding: var(--space-4) var(--space-2) var(--space-5); }
  table { font-size: 0.85rem; }
  th, td { padding: 0.65rem 0.55rem; }
}
/* Consent banner. DRAFT, not deployed. Tokens are the funnel's own. */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--navy, #1c3157);
  color: #f3efe6;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
  padding: var(--space-3, 16px);
  animation: consent-in 240ms var(--ease-out, ease-out) both;
}

@media (max-width: 34rem) {
  body.has-consent-banner { padding-bottom: var(--consent-banner-height, 0); }
}

@keyframes consent-in {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

.consent-inner {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  gap: var(--space-3, 16px);
  align-items: center;
  flex-wrap: wrap;
}

.consent-copy {
  margin: 0;
  flex: 1 1 22rem;
  font-size: 0.94rem;
  line-height: 1.5;
}

.consent-copy a {
  color: #ffd9a8;
  text-decoration: underline;
}

.consent-actions {
  display: flex;
  gap: var(--space-2, 10px);
  flex: 0 0 auto;
}

.consent button {
  font: inherit;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.6em 1.15em;
  cursor: pointer;
  border: 2px solid transparent;
}

/* Neither choice is styled as the obvious one. A decline button hidden in grey
   text next to a bright accept button is a dark pattern, and on this brand it
   would cost more than the analytics are worth. */
.consent-yes {
  background: var(--rust, #b45a28);
  color: #fff;
}

.consent-no {
  background: transparent;
  color: #f3efe6;
  border-color: rgba(243, 239, 230, 0.55);
}

.consent button:focus-visible {
  outline: 3px solid #ffd9a8;
  outline-offset: 2px;
}

@media (max-width: 34rem) {
  .consent-inner { flex-direction: column; align-items: stretch; }
  .consent-copy { flex: 0 1 auto; }
  .consent-actions { justify-content: stretch; }
  .consent-actions button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) th { color: #f5f7fb; }
  :root:not([data-theme]) th,
  :root:not([data-theme]) .consent { background: #243b63; }
  :root:not([data-theme]) .footer { color: #b7c0cd; }
  :root:not([data-theme]) .footer a { color: #c7d0dc; }
  :root:not([data-theme]) .btn--quiet:hover { background: rgba(217, 231, 255, 0.12); }
}

:root[data-theme="dark"] th { color: #f5f7fb; }
:root[data-theme="dark"] th,
:root[data-theme="dark"] .consent { background: #243b63; }
:root[data-theme="dark"] .footer { color: #b7c0cd; }
:root[data-theme="dark"] .footer a { color: #c7d0dc; }
:root[data-theme="dark"] .btn--quiet:hover { background: rgba(217, 231, 255, 0.12); }