/* Dogful design system v2. Mobile-first at 375px, deliberate desktop treatment.
   Laws: no gradient-glass, no sparkle, no purple, no eyebrow titles, type >= 16px, tap targets >= 56px. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,900&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap');

:root {
  --bg: #F7F2E9;
  --card: #FFFFFF;
  --ink: #26251F;
  --muted: #6E6A5E;
  --green: #2F6B4F;
  --green-dark: #24543E;
  --green-deep: #1C3F30;
  --green-soft: #E4EEE6;
  --amber: #D98E2B;
  --amber-soft: #F9EFDC;
  --warn-ink: #7A5A1E;
  --line: #E5DCCB;
  --line-strong: #D8CDB8;
  --radius: 18px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(38,37,31,.05), 0 8px 24px -12px rgba(38,37,31,.14);
  --shadow-lift: 0 2px 4px rgba(38,37,31,.06), 0 16px 36px -14px rgba(38,37,31,.22);
  --shadow-btn: 0 2px 0 var(--green-deep), 0 10px 22px -10px rgba(47,107,79,.55);
  --ease: cubic-bezier(.22,.9,.35,1);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 17px; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
}
::selection { background: var(--green-soft); color: var(--green-deep); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Ambient background art: oversized paw arcs, flat color, desktop only */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle 8px at 8% 12%, var(--line) 98%, transparent) ,
    radial-gradient(circle 8px at 12% 9%, var(--line) 98%, transparent),
    radial-gradient(circle 8px at 16% 13%, var(--line) 98%, transparent),
    radial-gradient(circle 14px at 12% 18%, var(--line) 98%, transparent),
    radial-gradient(circle 8px at 88% 88%, var(--line) 98%, transparent),
    radial-gradient(circle 8px at 92% 84%, var(--line) 98%, transparent),
    radial-gradient(circle 8px at 84% 85%, var(--line) 98%, transparent),
    radial-gradient(circle 14px at 88% 92%, var(--line) 98%, transparent);
}
@media (min-width: 760px) { body::before { opacity: .8; } }

/* Layout shells. Two shells, and which one a page uses is a real decision.

   .shell is the FUNNEL shell: quiz, diagnosis, upsell, delivery, checkout,
   success, login. Deliberately narrow at every breakpoint because these are
   linear, one-thing-at-a-time flows where a wide column actively hurts
   completion. The ambient background dots fill the space at desktop instead.
   Do not widen this one.

   .shell-wide is the CONTENT shell and every non-funnel page uses it: home,
   /problems, /breeds and every generated SEO page, /dog-trainers, about,
   contact, terms, privacy. It is fluid rather than stepped, growing with the
   viewport up to a maximum, with padding that scales too. Any new content
   page should use .shell-wide, never .shell. */
.shell { max-width: 480px; margin: 0 auto; padding: 0 18px 72px; position: relative; }
@media (min-width: 760px) { .shell { max-width: 600px; padding-top: 8px; } }

.shell-wide {
  width: 100%; max-width: 1160px; margin: 0 auto; position: relative;
  padding: 0 clamp(18px, 4vw, 56px) 72px;
}
@media (min-width: 760px) { .shell-wide { padding-top: 8px; } }

/* Content-page structure. EVERY non-funnel page uses the same three parts in
   the same order inside .shell-wide: breadcrumbs, then .page-body, which is a
   reading column that stops growing at a comfortable measure while the shell
   itself keeps scaling. Generated SEO pages and hand-written pages share this,
   so /about and /problems/chewing line up to the pixel. */
.page-body { width: 100%; max-width: 780px; margin: 0 auto; }
.page-body > h1:first-child, .crumbs + .page-body > h1 { margin-top: 4px; }

.crumbs {
  width: 100%; max-width: 780px; margin: 0 auto;
  font-size: 15px; color: var(--muted); padding-top: 12px;
}
.crumbs a { color: var(--muted); font-weight: 600; text-decoration: none; }
.crumbs a:hover { color: var(--green); text-decoration: underline; }
.crumbs b { font-weight: 600; }
.crumbs span { padding: 0 6px; }

/* Brand header */
.brand {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 18px 0 10px; user-select: none;
}
.brand svg { width: 26px; height: 26px; }
.brand span { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.01em; color: var(--green); }

/* Quiz top bar: back button pinned to the true top-left, brand stays centered.
   The button never reserves layout space, so the progress bar below always
   aligns with the content edges at every width. */
.quiz-top { position: relative; }
.back-fab {
  position: absolute; top: 6px; left: 0; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--card); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .18s var(--ease), transform .18s var(--ease), border-color .15s var(--ease);
}
.back-fab:hover { border-color: var(--green); transform: translateX(-2px); }
.back-fab.hidden { opacity: 0; transform: translateX(-6px); pointer-events: none; }
.back-fab svg { width: 22px; height: 22px; }

/* Typography */
/* One H1 treatment for the whole site. Size scales fluidly with the viewport
   rather than stepping at a breakpoint, and text-transform handles the title
   casing so page copy does not have to be written in it by hand. Per-section
   H1 size overrides were removed on purpose; do not add new ones. */
h1, .display {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(27px, 3.4vw, 42px); line-height: 1.15; margin-bottom: 10px;
  text-transform: capitalize;
}
.display { text-transform: none; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; margin-bottom: 8px; letter-spacing: -0.01em; }
p { font-size: 17px; margin-bottom: 10px; }
.muted { color: var(--muted); font-size: 15.5px; }
.lead { font-size: 18.5px; text-transform: none; font-weight: 400; margin-bottom: 16px; }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
@media (min-width: 760px) { .card { padding: 28px 26px; } }

/* Buttons */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 60px; border: none; border-radius: 999px;
  font-family: var(--font-body); font-size: 18px; font-weight: 800; cursor: pointer;
  text-decoration: none; margin-top: 14px;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 0 0 var(--green-deep), 0 4px 10px -6px rgba(47,107,79,.5); }
.btn-ghost { background: transparent; color: var(--muted); font-weight: 700; font-size: 16px; min-height: 56px; }
.btn-ghost:hover { color: var(--ink); }
.btn[disabled] { opacity: .35; pointer-events: none; box-shadow: none; }
/* Last word on button text colour. Declared after every scoped link rule so a
   container's `a { color }` can never win and render the label invisible
   against its own background. */
a.btn-primary, a.btn-primary:hover, a.btn-primary:visited,
button.btn-primary, .btn-primary { color: #fff; }

/* Answer options (single choice) */
.opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 62px; padding: 14px 18px; margin-bottom: 12px;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 17.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: left; box-shadow: var(--shadow);
  transition: transform .12s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.opt:hover { border-color: var(--green); transform: translateY(-1px); }
.opt:active { transform: scale(.985); }
.opt.on { border-color: var(--green); background: var(--green-soft); }
.opt .tick {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--line); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 800; transition: all .15s var(--ease);
}
.opt.on .tick { background: var(--green); border-color: var(--green); animation: pop .25s var(--ease); }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Tile grid (Q5a categories) */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  min-height: 92px; padding: 14px 12px; background: var(--card);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 700; color: var(--ink); text-align: center;
  cursor: pointer; box-shadow: var(--shadow); text-decoration: none;
  transition: transform .12s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.tile:hover { border-color: var(--green); transform: translateY(-2px); }
.tile:active { transform: scale(.97); }
.tile.on { border-color: var(--green); background: var(--green-soft); }
.tile svg { width: 30px; height: 30px; stroke: var(--green); }
.tile.on svg { animation: pop .25s var(--ease); }

/* Text inputs */
.field { position: relative; margin-bottom: 6px; }
input[type=text], input[type=email] {
  width: 100%; min-height: 64px; padding: 0 18px;
  font-family: var(--font-body); font-size: 19px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-sm);
  outline: none; box-shadow: var(--shadow); transition: border-color .15s var(--ease);
}
input[type=text]:focus, input[type=email]:focus { border-color: var(--green); }
input::placeholder { color: #B9BFC7; font-weight: 500; }

/* Typeahead dropdown */
.ta-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift); max-height: 260px; overflow-y: auto;
}
.ta-list button {
  display: block; width: 100%; text-align: left; padding: 15px 18px; min-height: 52px;
  background: none; border: none; border-bottom: 1px solid var(--line);
  font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.ta-list button:hover { background: var(--green-soft); }
.ta-list button:last-child { border-bottom: none; }

/* Progress header */
.progress-wrap { padding: 4px 0 18px; }
.progress-label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 800; color: var(--muted); margin-bottom: 7px; }
.progress-label b { color: var(--green); font-family: var(--font-display); font-size: 15px; letter-spacing: .01em; }
.progress-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.progress-bar div { height: 100%; background: var(--green); border-radius: 4px; transition: width .45s var(--ease); }

/* Screen transitions */
.screen { animation: rise .32s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.screen.leaving { animation: sink .18s var(--ease) forwards; }
@keyframes sink { to { opacity: 0; transform: translateY(-10px); } }

/* Interstitial styling */
.inter { text-align: center; padding-top: 12px; }
.inter .art { margin: 4px auto 18px; width: 132px; height: 132px; }

/* Stat number */
.stat { font-family: var(--font-display); font-weight: 900; font-size: 44px; color: var(--green); line-height: 1; margin: 8px 0 2px; }

/* Loader */
.loader-ring { width: 92px; height: 92px; margin: 12px auto 20px; position: relative; }
.loader-ring svg { transform: rotate(-90deg); }
.loader-ring circle.track { stroke: var(--line); }
.loader-ring circle.fill { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset .3s linear; }
.loader-steps { text-align: left; max-width: 330px; margin: 0 auto; }
.loader-step { display: flex; gap: 12px; align-items: center; padding: 9px 0; font-size: 16.5px; color: var(--muted); transition: color .3s; }
.loader-step .dot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800;
  transition: all .3s var(--ease);
}
.loader-step.done { color: var(--ink); }
.loader-step.done .dot { background: var(--green); border-color: var(--green); animation: pop .3s var(--ease); }

/* Trust and guarantee */
.guarantee {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--green-soft); border-radius: var(--radius-sm); padding: 15px 16px; font-size: 16px;
}
.guarantee svg { width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px; }
.guarantee p { margin: 0; font-size: 16px; }
.guarantee b { color: var(--green); }

.care-note { background: var(--amber-soft); color: var(--warn-ink); border-radius: var(--radius-sm); padding: 15px 16px; font-size: 16px; margin-bottom: 16px; }

/* Price block */
.price-line { font-family: var(--font-display); font-size: 46px; font-weight: 900; line-height: 1; margin: 6px 0 2px; }
.price-line .once { display: block; font-family: var(--font-body); font-size: 16.5px; font-weight: 800; color: var(--green); margin-top: 8px; }

ul.included { list-style: none; margin: 14px 0 6px; }
ul.included li { padding: 8px 0 8px 32px; position: relative; font-size: 16.5px; font-weight: 600; }
ul.included li::before {
  content: ""; position: absolute; left: 2px; top: 12px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green);
}
ul.included li::after {
  content: ""; position: absolute; left: 7px; top: 16.5px; width: 7px; height: 4.5px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg);
}

/* Dog chip */
.dog-chip { display: flex; align-items: center; gap: 14px; }
.dog-photo {
  width: 68px; height: 68px; border-radius: 50%; background: var(--green); color: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 30px; font-weight: 900; flex-shrink: 0;
}
.dog-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Week roadmap */
.week-strip { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; position: relative; }
.week-strip .wk {
  display: flex; align-items: center; gap: 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 16px; font-weight: 600;
}
.week-strip .wk b {
  font-family: var(--font-display); color: var(--green); font-size: 15px; min-width: 76px; font-weight: 700;
}

/* Phone mockup (product proof) */
.phone {
  width: 240px; margin: 6px auto 12px; background: var(--ink); border-radius: 30px; padding: 10px;
  box-shadow: var(--shadow-lift);
}
.phone .ph-screen { background: var(--bg); border-radius: 22px; overflow: hidden; padding: 16px 13px 18px; }
.phone .ph-row { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.phone .ph-dot {
  width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; font-family: var(--font-display);
}
.phone .ph-name { font-weight: 800; font-size: 14px; }
.phone .ph-sub { font-size: 11px; color: var(--muted); }
.phone .ph-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.phone .ph-tag { color: var(--green); font-weight: 800; font-size: 10.5px; margin-bottom: 3px; }
.phone .ph-title { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.25; margin-bottom: 8px; }
.phone .ph-btn { background: var(--green); color: #fff; border-radius: 9px; text-align: center; font-size: 12px; font-weight: 800; padding: 9px 0; }
.phone .ph-steps { font-size: 11px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }

/* Checkout rows */
.total-row { display: flex; justify-content: space-between; font-size: 17px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.total-row.grand { font-weight: 800; font-size: 20px; border-bottom: none; padding-top: 12px; }
.total-row.grand span:last-child { font-family: var(--font-display); font-size: 24px; }

label.bump {
  display: flex; gap: 14px; align-items: flex-start; border: 2px solid var(--line); background: var(--card);
  border-radius: var(--radius-sm); padding: 16px; cursor: pointer; font-size: 16px; box-shadow: var(--shadow);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
label.bump.on { border-color: var(--green); background: var(--green-soft); }
label.bump input { width: 28px; height: 28px; margin-top: 2px; accent-color: var(--green); flex-shrink: 0; }

/* Delivery choices */
.choice {
  border: 2px solid var(--line); background: var(--card); border-radius: var(--radius);
  padding: 20px 18px; margin-bottom: 14px; cursor: pointer; box-shadow: var(--shadow);
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .12s var(--ease);
}
.choice:hover { transform: translateY(-1px); }
.choice.on { border-color: var(--green); background: var(--green-soft); }
.choice h3 { font-family: var(--font-display); font-size: 18.5px; font-weight: 700; }
.chan { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.chan button {
  flex: 1; min-height: 58px; min-width: 100px; border-radius: var(--radius-sm); border: 2px solid var(--line);
  background: var(--card); font-family: var(--font-body); font-size: 16px; font-weight: 700; cursor: pointer;
  transition: all .15s var(--ease);
}
.chan button.on { border-color: var(--green); background: var(--green); color: #fff; }
select.hour {
  width: 100%; min-height: 58px; font-size: 17px; font-weight: 600; border-radius: var(--radius-sm);
  border: 2px solid var(--line); padding: 0 14px; font-family: var(--font-body); background: var(--card); margin-top: 12px;
}

/* Footer trust */
.badge-block { text-align: center; padding: 20px 14px 6px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.badge-block b { color: var(--ink); }

/* Shared site nav + footer (public/partials/site-chrome.js). Wider than
   .shell on purpose: a full-width header/footer bar above/below a narrower
   content column is the standard pattern and looks proportionate on every
   page, including the narrow quiz/checkout flows. */
.site-nav {
  display: flex; align-items: center; justify-content: space-between; position: relative;
  max-width: 480px; margin: 0 auto; padding: 14px 18px 4px;
}
@media (min-width: 760px) { .site-nav { max-width: 900px; padding-top: 18px; } }
@media (min-width: 1100px) { .site-nav { max-width: 1160px; } }
.site-nav .brand {
  padding: 0; text-decoration: none; font-family: var(--font-display); font-weight: 900;
  font-size: 21px; letter-spacing: -0.01em; color: var(--green);
}
.nav-burger {
  width: 56px; height: 56px; border: none; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink); display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .15s var(--ease);
}
.nav-burger:hover { background: var(--green-soft); }
@media (min-width: 760px) { .nav-burger { display: none; } }
.nav-links {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift); padding: 8px; margin-top: 6px;
}
.nav-links.open { display: flex; }
.nav-links a {
  display: flex; align-items: center; min-height: 56px; padding: 0 14px;
  font-family: var(--font-body); font-weight: 700; font-size: 16.5px; color: var(--ink);
  text-decoration: none; border-radius: var(--radius-sm); transition: background .15s var(--ease);
}
.nav-links a:not(.btn):hover { background: var(--bg); }
.nav-links a.on { color: var(--green); background: var(--green-soft); }
.nav-links .btn { margin: 8px 4px 2px; }
@media (min-width: 760px) {
  .nav-links, .nav-links.open {
    display: flex; flex-direction: row; align-items: center; gap: 22px;
    position: static; background: none; border: none; box-shadow: none; padding: 0; margin: 0;
  }
  .nav-links a:not(.btn) { min-height: auto; padding: 0; font-size: 15px; font-weight: 700; color: var(--muted); border-radius: 0; }
  .nav-links a:not(.btn):hover { background: none; color: var(--ink); }
  .nav-links a.on { background: none; color: var(--green); }
  .nav-links .btn { width: auto; min-height: 46px; padding: 0 20px; margin: 0; font-size: 15px; gap: 6px; }
}
/* The nav's own link rules are scoped with :not(.btn) so the Start button
   keeps the .btn-primary treatment. Without that the menu's hover background
   (cream on mobile, transparent on desktop) beat .btn-primary:hover on
   specificity and the white button text vanished into it. These two rules
   restate the button's colours at nav specificity as a belt-and-braces. */
.nav-links a.btn-primary { color: #fff; background: var(--green); }
.nav-links a.btn-primary:hover { color: #fff; background: var(--green-dark); }
.nav-links .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.site-footer {
  max-width: 480px; margin: 40px auto 0; padding: 26px 18px calc(20px + env(safe-area-inset-bottom));
  text-align: center; border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .site-footer { max-width: 900px; } }
@media (min-width: 1100px) { .site-footer { max-width: 1160px; } }
.site-footer .brand {
  justify-content: center; padding: 0 0 14px; font-family: var(--font-display); font-weight: 900;
  font-size: 19px; letter-spacing: -0.01em; color: var(--green);
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 10px; }
.footer-links a { color: var(--green); font-weight: 700; font-size: 14px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-domains { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 4px; }
.footer-domains a { color: var(--muted); font-weight: 700; font-size: 13px; text-decoration: none; }
.footer-domains a:hover { color: var(--green); text-decoration: underline; }
.footer-domains a { display: inline-flex; align-items: center; gap: 6px; }
.footer-domains svg { width: 18px; height: 13px; border-radius: 2px; flex-shrink: 0; display: block; }
.footer-domains:empty { display: none; }

/* Site-wide legal line. Lives here and nowhere else, so it appears in exactly
   one place on every page instead of being repeated per section. */
.footer-legal {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 640px;
  margin-left: auto; margin-right: auto;
}

/* Homepage footer directory (index.html, populated from the generated
   /partials/seo-links.js).

   Grid, never CSS `columns`. Multi-column text flow wraps items wherever the
   column break happens to land, so rows never line up between one list and the
   next and a two-line label pushes everything below it out of step. An explicit
   grid puts every group in its own column with its heading on the same row.

   Every link in the block is the same weight and size on purpose. The earlier
   version bolded category hubs and left sub-issues plain inside one shared
   list, which read as broken styling rather than as a hierarchy; the grouping
   and the headings carry that distinction now. */
.seo-directory { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--line); }
.seo-directory-cols { display: grid; gap: 22px 26px; align-items: stretch; }
@media (min-width: 620px) { .seo-directory-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .seo-directory-cols { grid-template-columns: repeat(4, 1fr); gap: 26px 30px; } }

/* Column, with the "See all" link pushed to the bottom so it sits on the same
   line in every group regardless of how many items that group holds. */
.seo-directory-group { display: flex; flex-direction: column; min-width: 0; }
.seo-directory-group h3 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  line-height: 1.3; color: var(--green-deep);
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  min-height: 46px;
}
.seo-directory-group ul { list-style: none; margin: 0; padding: 0; }
.seo-directory-group li { padding: 0; }
/* Single column on phones, so these are thumb targets and take the project
   law item 3 minimum. From the two-column breakpoint up they are a dense
   mouse-driven directory and tighten to a normal list row. */
.seo-directory-group a {
  display: flex; align-items: center; min-height: 56px; padding: 6px 0;
  color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.35;
  text-decoration: none; text-transform: none;
}
@media (min-width: 620px) {
  .seo-directory-group a { display: block; min-height: 0; padding: 7px 0; font-size: 15px; }
  .seo-directory-all { display: block; min-height: 0; }
}
.seo-directory-group a:hover { color: var(--green); text-decoration: underline; }
.seo-directory-all {
  display: flex; align-items: center; min-height: 56px;
  margin-top: auto; padding-top: 14px;
  color: var(--green); font-weight: 800; font-size: 15px; text-decoration: none;
}
.seo-directory-all:hover { text-decoration: underline; }

/* Checkout/funnel steps (diagnosis, upsell, delivery, success): brand-only
   header, legal-only footer, nothing that invites browsing away mid-checkout. */
.site-nav--funnel { justify-content: flex-start; padding-bottom: 10px; }
.site-footer--funnel {
  border-top: none; margin-top: 30px; padding-top: 0; display: flex; justify-content: center; gap: 18px;
}
.site-footer--funnel a { color: var(--green); font-weight: 700; font-size: 14px; text-decoration: none; }
.site-footer--funnel a:hover { text-decoration: underline; }

/* Homepage hero + tooltip term (Task 4.2, E1.1). The tooltip-bubble is hidden
   by default and shown on :hover or :focus of its tooltip-term parent, which
   covers both desktop hover and mobile tap (a tapped/focused link receives
   :focus). The h2 reads fine standing alone if the tooltip never triggers. */
.hero { text-align: center; padding-top: 4px; max-width: 640px; margin: 0 auto; }
@media (min-width: 1100px) { .hero { max-width: 760px; } }
.hero h2 { font-size: 18px; font-weight: 600; color: var(--muted); margin: 14px 0 22px; }
@media (min-width: 1100px) { .hero h2 { font-size: 21px; margin: 18px 0 28px; } }
.hero .btn { max-width: 420px; margin-left: auto; margin-right: auto; }

/* "What can we help with?" (Task 4.2, E1.2) sits between the hero and the
   problem tile grid it introduces. */
.section-heading { text-align: center; margin: 34px 0 16px; }
@media (min-width: 1100px) { .section-heading { font-size: 25px; margin: 46px 0 20px; } }
.tooltip-term {
  position: relative; color: var(--green); font-weight: 700; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}
.tooltip-bubble {
  display: none; position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: 240px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left;
  padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); z-index: 40;
}
.tooltip-term:hover .tooltip-bubble, .tooltip-term:focus .tooltip-bubble { display: block; }

/* Homepage problem CTA grid icon caption (Task 4.2, E1.2). The tiles/tile
   classes themselves are the existing Q5a pattern from the quiz - scaling
   the grid to more columns is scoped to .shell-wide so the quiz's narrower
   Q5a step (inside plain .shell) keeps its original 2-column layout. */
.tile-icon { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
@media (min-width: 640px) { .shell-wide .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .shell-wide .tiles { grid-template-columns: repeat(5, 1fr); gap: 16px; } }

/* Trainer section (Task 4.2, E1.3) */
.trainer-section { margin: 46px 0; }
.trainer-section h2 { text-align: center; margin-bottom: 6px; }
.trainer-section > p.muted { text-align: center; margin-bottom: 18px; }
#trainerFilter { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; max-width: 560px; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) {
  #trainerFilter { flex-direction: row; }
  #trainerFilter select, #trainerFilter input { flex: 1 1 0; min-width: 0; }
  /* .btn's base width:100% becomes this item's flex-basis when flex-basis is
     "auto" (the third value in the shorthand below), so it must be
     overridden here too or the button claims the whole row's width and
     crushes the select/input next to it down to nothing. */
  #trainerFilter button { flex: 0 0 auto; width: auto; padding: 0 28px; }
}
#trainerFilter select, #trainerFilter input {
  width: 100%; min-height: 56px; padding: 0 16px; font-size: 16px; font-weight: 600;
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  font-family: var(--font-body); color: var(--ink); outline: none;
  transition: border-color .15s var(--ease);
}
#trainerFilter select:focus, #trainerFilter input:focus { border-color: var(--green); }
#trainerFilter button { margin-top: 4px; }
@media (min-width: 640px) { #trainerFilter button { margin-top: 0; } }
.trainer-grid { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 640px) { .trainer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .shell-wide .trainer-grid { grid-template-columns: repeat(3, 1fr); } }
.trainer-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.trainer-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.trainer-card .muted { font-size: 14.5px; margin-bottom: 4px; }
.trainer-card .btn { margin-top: 10px; min-height: 52px; font-size: 15.5px; }
.trainer-card .accred { font-size: 14.5px; margin-bottom: 4px; }
.trainer-card .verified { color: var(--green); font-size: 13px; font-weight: 800; white-space: nowrap; }

/* Testimonials / social proof (Task 4.2, E1.4): touch-swipeable row via CSS
   scroll-snap on mobile, a real multi-card row once there's room for one. */
.testimonials { margin: 46px 0; }
.testimonials h2 { text-align: center; margin-bottom: 14px; }
.testimonial-row {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 14px; margin: 0 -4px; -webkit-overflow-scrolling: touch;
}
.testimonial-card {
  flex: 0 0 82%; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow);
}
@media (min-width: 640px) { .testimonial-card { flex: 0 0 46%; } }
@media (min-width: 1100px) { .shell-wide .testimonial-card { flex: 0 0 31%; } }
.testimonial-card .sample-badge {
  display: inline-block; background: var(--amber-soft); color: var(--warn-ink); font-size: 12px;
  font-weight: 800; border-radius: 10px; padding: 3px 10px; margin-bottom: 10px;
}
.testimonial-card .quote { font-size: 16px; margin-bottom: 8px; }
.testimonial-card .attrib { font-size: 14.5px; color: var(--muted); font-weight: 700; margin-bottom: 0; }

/* Utility */
.center { text-align: center; }
.mt0 { margin-top: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }