/* ============================================================
   Hughie Fitness — hughie.app
   Palette: espresso fur, biscuit cream, park green, tennis-ball
   Display: Nunito · Body: Inter · HUD: Space Grotesk (self-hosted, see fonts/)
   ============================================================ */

/* ---------- self-hosted fonts (was render-blocking Google Fonts) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-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: 600;
  font-display: swap;
  src: url('fonts/inter-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-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: 700;
  font-display: swap;
  src: url('fonts/inter-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-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: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/nunito-800-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/nunito-800-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: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/nunito-900-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/nunito-900-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-500-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-grotesk-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-grotesk-700-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 {
  --ink: #2a1a0c;
  --ink-soft: #5a4230;
  --cream: #fdf6ee;
  --paper: #fffcf7;
  --bark: #8a5a32;
  --line: #efe2d0;
  --ball: #e8871a;
  --ball-deep: #c97a2f;
  --park: #a85f1a;
  --park-tint: #f9ebd9;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(38, 25, 15, 0.10);
  --maxw: 1120px;
  --display: "Nunito", "Arial Rounded MT Bold", sans-serif;
  --body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --hud: "Space Grotesk", "SF Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--park); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ball-deep); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 900; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }

.eyebrow {
  font-family: var(--hud);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--park);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--ball); border-radius: 2px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 246, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.site-nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.site-nav a { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; }
.site-nav a:hover { color: var(--ink); }
.nav-cta {
  background: var(--ink); color: var(--cream) !important;
  padding: 10px 18px; border-radius: 999px;
}
.nav-cta:hover { background: var(--bark); }
@media (max-width: 720px) { .site-nav a:not(.nav-cta) { display: none; } }

/* ---------- hero ---------- */
.hero { padding: 72px 0 56px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero p.lede { font-size: 1.2rem; color: var(--ink-soft); margin: 20px 0 28px; max-width: 34em; }
.hero h1 .mark { background: linear-gradient(transparent 62%, rgba(232,135,26,0.45) 62%); }

/* Store badges.
   Both official assets ship with built-in clear-space, by different amounts, so setting
   the same CSS height on each renders visibly different badges. Measured by rendering
   each at 200px and finding its black rounded-rect:
     Apple  .svg — rect is 95.5% of element height, inset 2.0%  per side
     Google .png — rect is 64.0% of element height, inset 18.0% per side
   So --badge-h means "height of the visible black rect": scale each element up by
   1/rect-ratio, then pull its own clear-space back with a negative margin on all four
   sides. Both rects then match exactly and sit flush with the container's left edge,
   and the flex gap becomes the real gap between them. Neither asset is modified. */
.badge-row { --badge-h: 54px; }
.store-badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* inline-block, not inline-flex: as a flex item the img got shrunk by its own negative
   margins while its height stayed fixed, which distorted the artwork. flex:none stops
   .store-badges from shrinking the link either. */
.store-badges a { display: inline-block; line-height: 0; flex: none; }
/* Apple's clear-space is asymmetric (L 2.0%, T 2.5%, R 3.0%, B 2.0% of element height), so
   it needs per-side compensation; Google's is a uniform 18%. The 0.940 divisor is tuned
   from rendered pixels rather than the raw asset — measuring Apple's rect at 200px gives
   0.955, but its soft vector edges render ~1.5% shorter at badge size, which left Google
   visibly taller. Verify by screenshotting .store-badges and comparing the two rects. */
/* Size by WIDTH with height:auto — never the reverse. These imgs carry intrinsic width
   attributes and inherit a global max-width:100%, so fixing the height lets the width be
   overridden independently and the artwork stretches. Driving width keeps the aspect ratio
   locked, and if max-width ever clamps on a very narrow screen the height follows
   proportionally instead of distorting. Widths below are height x the asset's aspect ratio
   (Apple 2.9916, Google 2.584). */
/* max-width:none is required: the <a> shrink-wraps to the img's MARGIN box, which the
   negative margins make narrower than the img — then the global img{max-width:100%} resolves
   against that shrunken width and clamps the badge, shrinking it circularly. */
.badge-apple, .badge-google { max-width: none; }
.badge-apple {
  width: calc(var(--badge-h) / 0.940 * 2.9916);
  height: auto;
  margin:
    calc(var(--badge-h) / 0.940 * 0.025 * -1)
    calc(var(--badge-h) / 0.940 * 0.030 * -1)
    calc(var(--badge-h) / 0.940 * 0.020 * -1)
    calc(var(--badge-h) / 0.940 * 0.020 * -1);
}
.badge-google {
  width: calc(var(--badge-h) / 0.640 * 2.584);
  height: auto;
  margin: calc(var(--badge-h) / 0.640 * 0.180 * -1);
}
.trust-line { margin-top: 16px; font-size: 0.9rem; color: var(--bark); font-family: var(--hud); }

/* the signature: live rep-counter HUD panel */
.hud-panel {
  background: var(--ink);
  border-radius: 26px;
  padding: 26px;
  box-shadow: var(--shadow);
  position: relative;
  max-width: 420px;
  justify-self: center;
}
.hud-panel .phone-shot { border-radius: 16px; border: 1px solid #4a3018; }
.hud-counter {
  /* pinned to the panel's top-right corner, clear of the headline in the store graphic */
  position: absolute; top: -18px; right: -22px;
  background: var(--ink); border: 2px solid var(--ball);
  border-radius: 14px; padding: 10px 18px;
  font-family: var(--hud); color: var(--ball);
  box-shadow: var(--shadow);
}
.hud-counter .n { font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.hud-counter .l { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #f3d3a6; }
.hud-chip {
  position: absolute; bottom: 40px; right: -18px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px;
  font-weight: 700; font-size: 0.85rem; color: var(--park);
  box-shadow: var(--shadow);
}
@media (max-width: 880px) {
  .hud-counter { right: -8px; }
  .hud-chip { right: -4px; }
}

/* ---------- generic sections ---------- */
section { padding: 72px 0; }
section.tint { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head p { color: var(--ink-soft); margin-top: 12px; }

/* downloads */
.download-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .download-cards { grid-template-columns: 1fr; } }
.download-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.download-card h3 { font-size: 1.35rem; }
.download-card p { color: var(--ink-soft); font-size: 0.98rem; }
/* download cards reuse the hero's badge row verbatim — same --badge-h, same left alignment */
/* device requirement line — same treatment on both cards so neither platform
   reads as the "real" one and the other as an afterthought */
.download-card .req {
  font-family: var(--hud); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--park); margin-bottom: 10px;
}

/* screenshots */
.shots {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(240px, 62vw);
  gap: 18px; overflow-x: auto; padding: 6px 4px 20px;
  scroll-snap-type: x mandatory;
}
.shots figure { scroll-snap-align: start; }
.shots img {
  border-radius: 22px; border: 1px solid var(--line);
  box-shadow: var(--shadow); aspect-ratio: 9 / 19.5; object-fit: cover; width: 100%;
  background: var(--paper);
}
.shots figcaption { font-size: 0.85rem; color: var(--bark); margin-top: 10px; font-family: var(--hud); }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 48px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}
.step .tick {
  font-family: var(--hud); font-weight: 700; color: var(--ink);
  background: var(--ball); border-radius: 8px; padding: 4px 10px; font-size: 0.85rem;
  display: inline-block; margin-bottom: 16px;
}
.step p { color: var(--ink-soft); font-size: 0.98rem; margin-top: 8px; }

.video-slot {
  background: var(--ink); border-radius: 26px; padding: 26px;
  box-shadow: var(--shadow);
}
/* vertical demo reel: phone-shaped player beside the copy */
.video-slot.reel { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; }
@media (max-width: 820px) {
  .video-slot.reel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .video-slot.reel .eyebrow { justify-content: center; }
}
/* aspect matches the source recording (1080x2410) so playback fills the box */
.video-slot .reel-player {
  width: 100%; max-width: 300px; aspect-ratio: 108 / 241;
  border-radius: 18px; overflow: hidden; background: #201308;
}
.video-slot .reel-player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* click-to-load facade — poster + play button, swapped for the real iframe on activation */
.video-slot .reel-play {
  display: block; position: relative; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; appearance: none;
}
.video-slot .reel-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-slot .reel-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%; background: var(--ball);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.video-slot .reel-play-btn::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  width: 0; height: 0; border-left: 20px solid var(--ink);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.video-slot .reel-play:hover .reel-play-btn,
.video-slot .reel-play:focus-visible .reel-play-btn {
  background: #ffa03a; transform: translate(-50%, -50%) scale(1.08);
}
.video-slot .reel-play:focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; }
.video-slot .reel-duration {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(20,12,6,0.82); color: var(--cream);
  font-family: var(--hud); font-size: 0.78rem; font-weight: 500;
  padding: 3px 8px; border-radius: 6px;
}
.video-slot .reel-copy { color: var(--cream); }
.video-slot .reel-copy h3 { color: var(--cream); font-size: 1.6rem; }
.video-slot .reel-copy p { color: #cbb9a2; margin-top: 14px; max-width: 34em; }
.video-slot .reel-copy .eyebrow { color: var(--ball); }
.video-slot .reel-notes { list-style: none; margin-top: 22px; display: grid; gap: 12px; max-width: 34em; }
.video-slot .reel-notes li {
  color: var(--cream); font-size: 0.95rem; line-height: 1.5;
  padding-left: 30px; position: relative;
}
.video-slot .reel-notes li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 14px; height: 3px; border-radius: 2px; background: var(--ball);
}
@media (max-width: 820px) {
  .video-slot .reel-notes { text-align: left; margin-inline: auto; }
}

/* guides grid */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .guide-grid { grid-template-columns: 1fr; } }
.guide-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.guide-card .tag { font-family: var(--hud); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--park); }
.guide-card p { color: var(--ink-soft); font-size: 0.95rem; flex: 1; }
.guide-card .go { font-weight: 700; color: var(--park); font-size: 0.95rem; }

/* FAQ */
.faq-list { max-width: 780px; }
.faq-list details {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 24px; margin-bottom: 12px;
}
.faq-list summary {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--hud); font-size: 1.4rem; color: var(--park); flex-shrink: 0; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin-top: 12px; color: var(--ink-soft); }
.faq-list .learn { font-weight: 700; }

/* CTA band */
.cta-band { background: var(--ink); color: var(--cream); border-radius: 30px; padding: 60px 40px; text-align: center; }
.cta-band h2 { color: var(--cream); }
.cta-band h2 .mark { color: var(--ball); }
.cta-band p { color: #d8c9b5; margin: 14px auto 30px; max-width: 36em; }
.cta-band .store-badges { justify-content: center; }

/* footer */
.site-footer { padding: 56px 0 40px; border-top: 1px solid var(--line); margin-top: 72px; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
@media (max-width: 720px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer h3 { font-family: var(--display); font-size: 0.95rem; margin-bottom: 12px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
.site-footer a:hover { color: var(--park); text-decoration: underline; }
/* touch: footer/nav links are ~19px tall, below the ~44px tap target Google expects.
   Only widen them where there's no mouse, so the desktop footer stays compact. */
@media (max-width: 720px) {
  .site-footer li { margin-bottom: 0; }
  .site-footer li a { display: flex; align-items: center; min-height: 44px; }
  .site-nav a { display: flex; align-items: center; min-height: 44px; }
}
@media (hover: none) and (min-width: 721px) {
  .site-footer li a { display: flex; align-items: center; min-height: 44px; }
  .site-nav a:not(.nav-cta) { display: flex; align-items: center; min-height: 44px; }
}
.site-footer .legal { margin-top: 36px; font-size: 0.85rem; color: var(--bark); font-family: var(--hud); }

/* ---------- guide article pages ---------- */
.article-hero { padding: 64px 0 40px; }
.article-hero .crumbs { font-family: var(--hud); font-size: 0.82rem; margin-bottom: 18px; }
.article-hero .crumbs a { color: var(--park); text-decoration: none; }
.article-hero h1 { max-width: 18em; }
.article-hero .lede { font-size: 1.15rem; color: var(--ink-soft); margin-top: 18px; max-width: 38em; }

.article { max-width: 760px; }
.article h2 { margin: 44px 0 14px; font-size: 1.6rem; }
.article h3 { margin: 28px 0 10px; }
.article p { margin-bottom: 16px; }
.article ul, .article ol { margin: 0 0 16px 24px; }
.article li { margin-bottom: 8px; }
.article .callout {
  background: var(--park-tint); border-left: 4px solid var(--park);
  border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 24px 0;
}
.article .callout strong { color: var(--park); }
.inline-cta {
  background: var(--ink); border-radius: var(--radius); padding: 30px; margin: 40px 0;
  color: var(--cream);
}
.inline-cta h3 { color: var(--cream); margin: 0 0 8px; }
.inline-cta p { color: #d8c9b5; }
.inline-cta .store-badges { margin-top: 18px; }
.related { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 32px; }