/* =========================================================
   Deefa — About page (MOBILE-FIRST)
   Designed for a 390px screen, scrollable marketing page.
   Built on colors_and_type.css tokens. No new hues.
   ========================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  overflow-x: hidden;
}
img { max-width: 100%; }

/* content column — keeps a mobile measure even if opened wide */
.wrap { width: 100%; max-width: 430px; margin: 0 auto; padding: 0 22px; }

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--deefa-blue); z-index: 200;
  transition: width 90ms linear;
}

/* ---------- Header ---------- */
.nav-shell {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.nav-shell.scrolled { box-shadow: 0 1px 0 rgba(0,24,81,0.06), var(--shadow-sm); }
.nav-shell { display: flex; justify-content: center; padding: 14px 18px; }
.nav__logo { display: flex; }
.nav__logo img { height: 28px; width: auto; display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  border-radius: var(--radius-pill); border: 0; cursor: pointer;
  padding: 16px 24px; text-decoration: none; line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn:active { transform: scale(0.985); }
.btn svg { transition: transform var(--dur-base) var(--ease-out); }
.btn:active svg { transform: translateX(3px); }
.btn--block { width: 100%; }
.btn--blue { background: var(--deefa-blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn--blue:hover { background: var(--deefa-navy); }
.btn--blue:active { background: var(--deefa-navy); }
.btn--yellow { background: var(--deefa-yellow); color: var(--deefa-navy); }
.btn--yellow:hover { background: var(--deefa-navy); color: var(--deefa-yellow); }
.btn--ghost { background: transparent; color: var(--deefa-navy); border: 1.5px solid rgba(0,24,81,0.22); }
.btn--ghost:hover { background: var(--deefa-navy); color: #fff; border-color: var(--deefa-navy); }
.btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); }
.btn--ghost-light:hover { background: #fff; color: var(--deefa-navy); border-color: #fff; }

/* ---------- Eyebrow ---------- */
.eyebrow-pill { margin-bottom: 18px; }
.flod { font-family: var(--font-serif); font-weight: 700; letter-spacing: 0; }

/* ---------- Curve device ---------- */
.curve { position: absolute; pointer-events: none; display: block; color: var(--deefa-blue-tint); }
.curve--yellow { color: var(--deefa-yellow-tint); }
.curve svg { display: block; width: 100%; height: 100%; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; overflow: hidden; background: #fff; padding: 8px 0 40px; }
.hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(44px, 13vw, 56px); line-height: 0.94;
  letter-spacing: -0.03em; color: var(--deefa-navy);
  margin: 0 0 16px; text-wrap: balance;
}
.hero__title .accent { color: var(--deefa-blue); }

/* character art block, sits below the waitlist button */
.hero__art {
  position: relative; margin: 22px -6px 6px;
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 250px;
}
.hero__art-cradle { position: absolute; inset: 18% -6% 0 -6%; z-index: 0; overflow: hidden; }
.hero__char {
  position: relative; z-index: 1; width: 90%; max-width: 360px;
}
.hero__char img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .hero__char img { animation: floaty 7s var(--ease-inout) infinite; }
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero__lead {
  font-size: 17px; line-height: 1.55; color: var(--fg-muted); margin: 0 0 18px;
}

/* ---------- Social proof line ---------- */
.wl-social {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
}
.wl-social-dots { display: flex; }
.wl-social-dots span {
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  border: 2px solid #fff; margin-left: -7px;
  background: var(--deefa-yellow);
}
.wl-social-dots span:first-child { margin-left: 0; background: var(--deefa-blue); }
.wl-social-dots span:nth-child(2) { background: var(--deefa-yellow); }
.wl-social-dots span:nth-child(3) { background: var(--deefa-navy); }
.wl-social-text { font-size: 14px; color: var(--fg-muted); white-space: nowrap; }
.wl-social-text b { color: var(--deefa-navy); font-weight: 600; }

/* ---------- Waitlist form (entry point, matches live site) ---------- */
.wl-form { margin: 0 0 22px; }
.wl-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.wl-label { display: block; margin-bottom: 12px; }
.wl-label-text { display: block; font-size: 12px; font-weight: 600; color: var(--deefa-navy); margin-bottom: 6px; }
.wl-req { color: var(--deefa-blue); font-weight: 700; }
.wl-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-sans); font-size: 16px; padding: 14px 16px;
  border: 1.5px solid var(--border-strong); border-radius: 14px;
  background: #fff; color: var(--deefa-navy); outline: none;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.wl-input::placeholder { color: var(--fg-subtle); }
.wl-input:focus { border-color: var(--deefa-blue); box-shadow: var(--ring-focus); }
.wl-submit {
  width: 100%; margin-top: 4px;
  background: var(--deefa-blue); color: #fff; border: 0;
  padding: 16px 24px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 16px; font-family: var(--font-sans);
  cursor: pointer; box-shadow: var(--shadow-blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wl-submit svg { transition: transform var(--dur-base) var(--ease-out); }
.wl-submit:hover { background: var(--deefa-navy); }
.wl-submit:hover svg { transform: translateX(3px); }
.wl-submit:active { transform: scale(0.985); }
.wl-submit:disabled {
  background: var(--deefa-cool-gray); color: var(--fg-subtle);
  box-shadow: none; cursor: not-allowed;
}
.wl-submit:disabled svg { transform: none; }
.wl-fineprint { font-size: 12px; color: var(--fg-subtle); margin: 12px 0 0; line-height: 1.5; }
.wl-error { font-size: 12px; color: #B22222; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.wl-add-dog {
  align-self: flex-start; background: none; border: 0; padding: 0;
  color: var(--deefa-blue); font-weight: 600; font-size: 14px;
  cursor: pointer; font-family: var(--font-sans); margin-bottom: 12px;
}

/* confirmation card (replaces form on submit) */
.wl-confirm {
  background: var(--deefa-yellow-tint); border-radius: var(--radius-xl);
  padding: 22px 24px; margin: 0 0 22px;
  border: 1px solid rgba(255, 205, 56, 0.45);
  animation: deefaPop 320ms var(--ease-out);
}
@keyframes deefaPop { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
.wl-confirm-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--deefa-navy); color: #fff; padding: 6px 12px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px;
}
.wl-confirm-h {
  font-family: var(--font-display); font-weight: 500; font-size: 28px;
  line-height: 1.1; letter-spacing: -0.015em; color: var(--deefa-navy); margin: 0 0 10px;
}
.wl-confirm-p { font-size: 15px; color: var(--fg-muted); line-height: 1.55; margin: 0; }
.wl-confirm-p b { color: var(--deefa-navy); }

/* perks */
.wl-perks { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
.wl-perk {
  background: var(--deefa-blue-tint); border-radius: 18px; padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.wl-perk-icon {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--deefa-yellow); color: var(--deefa-navy);
  display: flex; align-items: center; justify-content: center;
}
.wl-perk-title { font-size: 14px; font-weight: 600; color: var(--deefa-navy); margin-bottom: 4px; }
.wl-perk-body { font-size: 13px; color: var(--fg-muted); line-height: 1.5; }
.wl-perk-body b { color: var(--deefa-navy); }

/* scroll cue into the story below */
.hero__scrollcue {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px; text-decoration: none;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--deefa-navy);
}
.hero__scrollcue svg { color: var(--deefa-blue); }
@media (prefers-reduced-motion: no-preference) {
  .hero__scrollcue svg { animation: nudge 1.8s var(--ease-inout) infinite; }
}
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
.section { position: relative; padding: clamp(44px, 11vw, 60px) 0; }
.section--soft { background: var(--deefa-blue-tint); }
.section--warm { background: var(--deefa-yellow-tint); }
.section--navy { background: var(--deefa-navy); color: #fff; }

/* Collapse the gap where two same-coloured sections meet — with no
   colour change to mark the seam, doubled padding reads as dead space.
   The hero is white and flows straight into the (white) mission. */
.hero + .section { padding-top: clamp(18px, 5vw, 28px); }

.eyebrow { color: var(--deefa-blue); display: block; margin-bottom: 14px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 8.5vw, 40px); line-height: 1.06;
  letter-spacing: -0.022em; color: var(--deefa-navy); margin: 0;
}
.section--soft .eyebrow, .section--warm .eyebrow { color: var(--deefa-blue); }
.section--navy .eyebrow { color: var(--deefa-yellow); }
.section--navy .section-head h2 { color: #fff; }

/* Section labels use the brand's yellow-pill eyebrow device.
   (The hero "Join the waitlist" stays plain blue text, matching the live waitlist site.) */
.section-head .eyebrow,
.mission__label .eyebrow {
  display: inline-flex; align-items: center;
  color: var(--deefa-navy); background: var(--deefa-yellow);
  padding: 6px 12px; border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

/* =========================================================
   MISSION
   ========================================================= */
.mission__label .eyebrow { margin-bottom: 14px; }
.mission__label h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(27px, 7.6vw, 36px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--deefa-navy); margin: 0 0 32px;
}
.mission__statement {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(23px, 6.4vw, 30px); line-height: 1.24;
  letter-spacing: -0.012em; color: var(--deefa-navy);
  margin: 0 0 32px; text-wrap: pretty;
}
.mission__statement .line { display: block; }
.mission__statement .line + .line { margin-top: 0.42em; }
.mission__statement em { font-style: normal; color: var(--deefa-blue); }
.mission__body p { font-size: 17px; line-height: 1.62; color: var(--fg-muted); margin: 0 0 18px; }
.mission__body p:last-child { margin-bottom: 0; }
.mission__body strong { color: var(--deefa-navy); font-weight: 600; }
.mission__body em { font-style: normal; color: var(--deefa-blue); font-weight: 500; }

/* =========================================================
   PULL QUOTE
   ========================================================= */
.quote {
  position: relative; overflow: hidden;
  border-radius: var(--radius-2xl); background: #fff;
  border: 1px solid var(--border); padding: 36px 28px 34px;
  box-shadow: var(--shadow-sm);
}
.quote__mark { font-family: var(--font-display); font-weight: 700;
  font-size: 92px; line-height: 0.6; color: var(--deefa-yellow);
  display: block; height: 42px; }
.quote blockquote {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(22px, 6.2vw, 28px); line-height: 1.32;
  letter-spacing: -0.01em; color: var(--deefa-navy);
  margin: 6px 0 22px; position: relative; z-index: 2;
}
.quote figcaption { font-size: 14px; color: var(--fg-muted); font-weight: 500; position: relative; z-index: 2; }
.quote__curve { inset: auto -4% -14% auto; width: 110%; height: 130%; z-index: 0; }

/* =========================================================
   WHAT MAKES US DIFFERENT — cards
   ========================================================= */
.diff-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.diff-card {
  position: relative; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 26px 26px 28px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.diff-card:active { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.diff-card__disc {
  width: 50px; height: 50px; border-radius: var(--radius-pill);
  background: var(--deefa-yellow); color: var(--deefa-navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.diff-card__n { font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--deefa-blue); letter-spacing: 0.1em; display: block; margin-bottom: 8px; }
.diff-card h3 { font-family: var(--font-sans); font-weight: 600; font-size: 20px;
  line-height: 1.22; letter-spacing: -0.01em; color: var(--deefa-navy); margin: 0 0 10px; }
.diff-card p { font-size: 16px; line-height: 1.58; color: var(--fg-muted); margin: 0; }

/* =========================================================
   MEET THE PACK — switcher
   ========================================================= */
.pack__card {
  margin-top: 28px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.pack__stage { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.pack__count {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  font-size: 12px; font-weight: 600; color: var(--deefa-navy);
  background: rgba(255,255,255,0.92); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 5px 12px;
}
.pack__slide {
  position: absolute; inset: 0;
  display: flex; align-items: stretch; justify-content: center;
  opacity: 0; transform: scale(0.98);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.pack__slide.active { opacity: 1; transform: scale(1); }
.pack__slide img,
.pack__slide video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (prefers-reduced-motion: no-preference) {
  .pack__slide.active img { animation: floaty 7s var(--ease-inout) infinite; }
}

.pack__thumbs { display: flex; gap: 9px; margin-top: 14px; }
.pack__thumb {
  flex: 1; aspect-ratio: 1 / 1; border-radius: var(--radius-md);
  background: var(--deefa-blue-tint); border: 2px solid transparent;
  overflow: hidden; cursor: pointer; padding: 0;
  transition: border-color var(--dur-base) var(--ease-out);
}
.pack__thumb img { width: 150%; height: 150%; object-fit: cover; object-position: top center; transform: translate(-16%, 4%); }
.pack__thumb.active { border-color: var(--deefa-blue); }

.pack__detail { padding: 20px 24px 26px; border-top: 1px solid var(--border); }
.pack__detail-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 14px;
}
.pack__name { font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 6.8vw, 30px); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--deefa-navy); margin: 0 0 10px; }
.pack__breed { display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--deefa-navy);
  background: var(--deefa-yellow); border-radius: var(--radius-pill);
  padding: 6px 13px; }
.pack__nav { display: flex; gap: 8px; flex: 0 0 auto; }
.pack__navbtn {
  width: 44px; height: 44px; border-radius: var(--radius-pill); padding: 0;
  border: 1.5px solid rgba(0,24,81,0.22); background: #fff; color: var(--deefa-navy);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pack__navbtn:hover { background: var(--deefa-navy); color: #fff; border-color: var(--deefa-navy); }
.pack__navbtn:active { transform: scale(0.95); }
.pack__story { font-size: 16px; line-height: 1.6; color: var(--fg-muted); margin: 0; min-height: 4.8em; }

/* =========================================================
   CLOSING + FOOTER
   ========================================================= */
.closing { position: relative; overflow: hidden; text-align: center; }
.closing__inner { position: relative; z-index: 2; }
.closing .flod-big { font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(38px, 11vw, 52px); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--deefa-yellow); margin: 0 0 18px; }
.closing__sub { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(19px, 5.4vw, 24px); line-height: 1.36; color: #fff;
  margin: 0 auto 30px; max-width: 22ch; }
.closing__cta { display: flex; flex-direction: column; gap: 12px; }

/* Closing is navy and runs straight into the navy footer — trim the top
   so the two don't stack into a navy void. */
.footer { background: var(--deefa-navy); color: #fff; padding: 8px 0 38px; }
.footer__wordmark { text-align: center; }
.footer__wordmark img {
  width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto;
  background: #fff; padding: 18px 22px; border-radius: var(--radius-xl); box-sizing: border-box;
}
.footer__base { font-size: 12px; color: var(--fg-on-dark-muted); padding-top: 26px; text-align: center; }
.footer__base .flod { color: var(--deefa-yellow); font-size: 14px; display: block; margin-bottom: 6px; }

/* =========================================================
   SCROLL REVEAL
   Uses an animation (not a bare transition) so the end state
   commits reliably even in embedded/throttled render contexts.
   ========================================================= */
@keyframes deefaRevealIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal].is-visible {
  opacity: 1; transform: none;
  animation: deefaRevealIn 0.6s var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* Hard safety net: if reveal logic ever fails to run, force everything
   visible with no animation so the page can never stay blank. */
html.reveal-fallback [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; animation: none; }
}