/* Layout/type overrides on top of Bootstrap 5.3 (loaded via CDN) and
   assets/css/theme.css.php (loaded first in header.php - see there for
   the actual brand colour custom properties, --theme-button-body etc,
   and the --bs-* remap that makes Bootstrap's own utility classes pick
   them up automatically). This file only carries layout/type and the
   handful of custom components (stat cards, step circles, compare
   cards, logo strip) - never a hardcoded colour, always var(--theme-*)
   so a future theme change (see core/Theme.php, unified 2026-09-06)
   reaches every page without editing CSS. */

/* Local neutral palette (2026-08-11) - not tied to system.theme_tokens
   (a proper "light neutral grey" token doesn't exist there, and adding
   one is a real design decision, not a cleanup-pass call to make
   solo) - just consolidating what used to be #f6f6f7/#e3e3e3/#8a8a8a/
   #d8d8d8 repeated as separate literals throughout this file into one
   named source of truth each, so they can't drift from each other. */
:root {
  --landing-neutral-bg: #f6f6f7;
  --landing-neutral-border: #e3e3e3;
  --landing-neutral-muted: #8a8a8a;
}

.btn { border-radius: 10px; padding: 0.7rem 1.6rem; }

/* ---------- hero ---------- */
/* Ambient drifting gradient blobs (2026-08-21, same technique as
   includes/maintenance-page.php's pass 3) - purely atmospheric, behind
   everything, theme-driven so it stays correct on any palette. */
.hero { position: relative; overflow: hidden; background: var(--theme-accent-tint); padding: 4rem 0 2.5rem; text-align: center; }
.hero-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4; }
.hero-blob-a {
  width: 460px; height: 460px; top: -140px; left: -100px;
  background: radial-gradient(circle, var(--theme-button-border) 0%, transparent 70%);
  animation: hero-drift-a 24s ease-in-out infinite;
}
.hero-blob-b {
  width: 400px; height: 400px; bottom: -160px; right: -120px;
  background: radial-gradient(circle, var(--theme-accent-3) 0%, transparent 70%);
  animation: hero-drift-b 30s ease-in-out infinite;
}
@keyframes hero-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, 30px) scale(1.1); }
}
@keyframes hero-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, -25px) scale(1.06); }
}
.hero .container { position: relative; z-index: 1; }

/* Two-column hero (2026-08-21, landing-hero.png) - text left,
   illustration right, same pattern as includes/maintenance-page.php's
   pass 3. Stacks to text-above-image below 960px. */
.hero-columns { display: flex; align-items: center; gap: 3rem; text-align: left; }
.hero-text { flex: 1 1 460px; }
.hero-illustration { flex: 1 1 420px; display: flex; justify-content: center; }
.hero-illustration img {
  width: 100%;
  max-width: 520px;
  height: auto;
  animation: hero-img-float 6s ease-in-out infinite;
}
@keyframes hero-img-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.hero h1 { font-weight: 700; line-height: 1.25; margin: 0 0 1rem; }
.hero h1 span { color: var(--theme-button-border); }
.hero p.lead { max-width: 520px; margin: 0 0 1.75rem; color: var(--theme-text-muted); }
.hero-btn-row { justify-content: flex-start; }

@media (max-width: 960px) {
  .hero-columns { flex-direction: column; text-align: center; gap: 2rem; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero-illustration img { max-width: 380px; }
  .hero-btn-row { justify-content: center; }
}

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

/* ---------- scroll-reveal (2026-08-21, "as many as we can to make it
   look alive") - fade+rise on scroll, staggered via nth-child delay.
   JS toggles .is-visible via IntersectionObserver (see index.php). */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-group > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-group > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-group > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-group > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-group > *:nth-child(5) { transition-delay: 0.33s; }

@media (prefers-reduced-motion: reduce) {
  .hero-blob-a, .hero-blob-b { animation: none; }
  .reveal, .reveal-group > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- stats ---------- */
.stats-card {
  margin-top: -2.5rem;
  background: var(--theme-body-background);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 1.5rem 1rem;
}
/* tabular-nums (2026-08-21) - counts up via JS on scroll-in (see
   index.php), digit widths must stay fixed or the count "jitters"
   sideways as it climbs. */
.stat-num { font-size: 1.7rem; font-weight: 700; color: var(--theme-button-border); margin: 0; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.8rem; color: var(--theme-text-muted); margin: 0; }

.section-sub { max-width: 560px; margin: 0 auto 2rem; color: var(--theme-text-muted); }

/* ---------- how it works ---------- */
/* step-badge-1..5.png (2026-08-21) - replaced the plain numbered
   circles with matching icon badges (own number + colour baked in by
   Allie in Photoshop, not CSS-driven like the rest of this file). */
.step-badge {
  width: 72px; height: 72px;
  margin: 0 auto 0.85rem;
  display: block;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.step-badge:hover { transform: scale(1.12); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18)); }

@media (prefers-reduced-motion: reduce) {
  .step-badge:hover { transform: none; }
}

/* ---------- capabilities (2026-08-21, Todoist "Add capability
   showcase to landing page") - 6 named finishes + a deliberate
   catch-all 7th tile (Allie: "I don't want this section to limit
   orders... but I don't want to look over the top either") so the
   grid never reads as an exhaustive list. */
.capability-tile { padding: 1.25rem 1rem; border-radius: 12px; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; }
.capability-tile img { width: 100%; max-width: 130px; height: auto; margin: 0 auto; display: block; }
.capability-tile:hover { transform: translateY(-6px); box-shadow: 0 16px 32px -14px rgba(0,0,0,0.18); background: var(--landing-neutral-bg); }
.capability-tile-more { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed var(--landing-neutral-border); color: var(--landing-neutral-muted); }
.capability-tile-more i { font-size: 2rem; color: var(--theme-button-border); }
.capability-tile-more:hover { border-color: var(--theme-button-border); background: var(--theme-accent-tint); }

@media (prefers-reduced-motion: reduce) {
  .capability-tile:hover { transform: none; }
}

/* ---------- checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 0.4rem 0; }
.checklist li i { margin-right: 0.6rem; width: 1em; }

/* ---------- feature icons (What your customers get) ---------- */
.feature-icon { font-size: 1.75rem; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.feature-col:hover .feature-icon { transform: scale(1.2) rotate(-6deg); }

/* ---------- store preview mockup ---------- */
/* landing-mockup.png (2026-08-21) - replaced the drawn CSS placeholder
   that carried a "swap for a real screenshot" TODO. Same gentle float
   as the hero illustration. */
.mockup-illustration { text-align: center; }
.mockup-illustration img { width: 100%; max-width: 460px; height: auto; animation: preview-float 6s ease-in-out infinite; }
@keyframes preview-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.preview-caption { font-size: 0.75rem; color: var(--landing-neutral-muted); text-align: center; margin: 10px 0 0; }

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

/* ---------- payment / shipping logo strip ---------- */
.logo-strip { background: var(--landing-neutral-bg); border-radius: 12px; padding: 1.25rem; }
.logo-strip img { height: 30px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease; }
.logo-strip img.tall { height: 38px; }
.logo-strip img:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }

/* ---------- us vs diy vs pod (2026-08-22) ---------- */
/* Real CSS Grid, not 3 independent flex cards - Allie: "we need the
   information to line up.. like the table did". grid-auto-flow:column
   + grid-template-rows: repeat(14, auto) fills DOWN each column first
   (header + 13 rows per column, in DOM order - see the HTML comment),
   so the SAME row index across all 3 columns lands in the SAME grid
   row, and a grid row auto-sizes to its tallest cell - genuine table-
   style alignment with plain HTML, no JS. Falls back to a single
   column below `lg` (see the media query at the bottom of this block) -
   because the DOM is grouped by column (all of DIY, then all of POD,
   then all of Us), collapsing to one column just stacks them in that
   same correct reading order, not interleaved row-by-row. */
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(15, auto);
  grid-auto-flow: column;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px -10px rgba(0,0,0,0.15);
}
.options-cell { padding: 0.85rem 1.5rem; display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.8rem; }
.options-cell i { flex-shrink: 0; margin-top: 0.25rem; }
.options-head { flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.5rem 1.25rem; position: relative; }
.options-col-diy { background: var(--landing-neutral-bg); }
.options-col-pod { background: color-mix(in srgb, var(--theme-accent-3) 8%, transparent); }
.options-col-us { background: var(--theme-accent-tint); font-weight: 500; }
/* landing-diy.png / landing-calm.png / landing-pod.png (2026-08-21/22)
   - deliberately small/muted here so the illustration sets the tone
   without crowding out the comparison rows beneath it. Fixed height +
   object-fit:contain (not just max-width) so all three crop to the
   exact same height regardless of each PNG's own aspect ratio - Allie:
   "make all 3 picture the same height - so the text lines up below". */
.compare-illustration { display: block; width: auto; max-width: 100%; height: 160px; object-fit: contain; margin: 0 auto 1.25rem; }
/* "Recommended" ribbon on the Us column (2026-08-22) - same convention
   squarespace.com/pricing uses to flag its own highlighted plan. */
.compare-badge {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: var(--theme-button-border); color: #fff; font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px; padding: 0.3rem 0.9rem;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.25);
}

@media (max-width: 991px) {
  .options-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  /* Divider before the POD and Us sections when stacked to one column -
     NOT before DIY's own header, which is already the first thing shown. */
  .options-head.options-col-pod, .options-head.options-col-us {
    border-top: 2px solid rgba(0,0,0,0.08); margin-top: 0.5rem;
  }
}

/* ---------- free box ---------- */
.free-box { background: var(--landing-neutral-bg); border-radius: 12px; padding: 2.25rem 2rem; }
.free-grid div i { margin-right: 0.5rem; width: 1em; }

/* ---------- hero earn-note (2026-08-22) ---------- */
/* Plain inline text, NOT display:flex - flex turns each text run
   (before/after the <strong>) into its own anonymous flex item with no
   gap between them, which visually swallowed the spaces around "you"
   (found via a live screenshot check, "we payyoua commission"). Centring
   on mobile just needs text-align, same as .hero p.lead already does. */
.hero-note { text-align: left; }
@media (max-width: 960px) { .hero-note { text-align: center; } }

/* ---------- "we pay you" section (2026-08-22) ---------- */
.earn-visual { display: flex; flex-direction: column; gap: 1.5rem; }
.earn-step { display: flex; align-items: flex-start; gap: 1rem; }
.earn-step-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.earn-step-icon.tone-primary { background: var(--theme-accent-tint); color: var(--theme-button-border); }
.earn-step-icon.tone-blue { background: color-mix(in srgb, var(--theme-accent-3) 16%, transparent); color: var(--theme-accent-3); }
.earn-step-icon.tone-green { background: color-mix(in srgb, var(--theme-accent-1) 16%, transparent); color: var(--theme-accent-1); }

/* ---------- FAQ accordion (2026-08-22) ---------- */
.faq-accordion { max-width: 760px; margin: 0 auto; }
.faq-accordion .accordion-item { border: 1px solid var(--landing-neutral-border); border-radius: 10px !important; margin-bottom: 0.75rem; overflow: hidden; }
.faq-accordion .accordion-button { font-weight: 600; }
.faq-accordion .accordion-button:not(.collapsed) { background: var(--theme-accent-tint); color: var(--theme-button-border); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: none; }
/* Tab filter (2026-08-22) - pill buttons above the accordion, filters
   which .accordion-item shows via JS (see index.php). Opacity
   transition on the item itself softens the swap instead of a hard
   cut - the item's own height still changes instantly (display:none),
   but that reads as tidy rather than jarring at this list length. */
.faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 1.75rem; }
.faq-tab-btn {
  border: 1px solid var(--landing-neutral-border); background: var(--theme-body-background); color: var(--theme-text-muted);
  border-radius: 999px; padding: 0.45rem 1.1rem; font-size: 0.85rem; font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.faq-tab-btn:hover { border-color: var(--theme-button-border); color: var(--theme-button-border); }
.faq-tab-btn.active { background: var(--theme-button-border); border-color: var(--theme-button-border); color: #fff; }
.faq-accordion .accordion-item { transition: opacity 0.2s ease; }
.faq-item-hidden { display: none; }

/* ---------- trust strip ---------- */
.trust-label { text-align: center; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--landing-neutral-muted); margin: 0 0 1rem; }

/* ---------- final cta ---------- */
.cta-final { background: var(--theme-accent-tint); text-align: center; padding: 3rem 1.5rem 4.5rem; }
.cta-final .btn-primary { animation: cta-pulse 2.4s ease-in-out infinite; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.35); }
  50% { box-shadow: 0 0 0 12px rgba(var(--bs-primary-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-final .btn-primary { animation: none; }
  .feature-col:hover .feature-icon, .compare-col:hover, .logo-strip img:hover { transform: none; }
}

footer { border-top: 1px solid var(--landing-neutral-border); padding: 1.75rem 0; text-align: center; font-size: 0.8rem; color: var(--landing-neutral-muted); }

/* ---------- public site footer (2026-08-22) ---------- */
/* Dark bar, same simple shape as the Noun Project screenshot Allie
   referenced (logo+socials, link row, copyright bar) - deliberately a
   flat neutral charcoal, not a theme-tinted dark, so it reads
   as a footer rather than another themed content section. mms2025.png
   has its own black outline + yellow glow baked in, so it holds up
   fine straight on a dark background with no separate light variant
   needed. */
footer.site-footer-public { border-top: none; padding: 0; text-align: left; background: #1a1a1a; color: rgba(255,255,255,0.7); }
.site-footer-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 2.5rem 0;
}
.site-footer-brand { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.site-footer-brand img { height: 32px; width: auto; }
.site-footer-social { display: flex; gap: 0.75rem; }
.site-footer-social a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.1);
  color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.site-footer-social a:hover { background: var(--theme-button-border); transform: translateY(-2px); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-footer-links a { color: rgba(255,255,255,0.7); font-size: 0.85rem; text-decoration: none; }
.site-footer-links a:hover { color: #fff; text-decoration: underline; }
.site-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding: 1.25rem 0; text-align: center;
  font-size: 0.75rem; color: rgba(255,255,255,0.5);
}

/* ---------- back-to-top button (2026-08-22) ---------- */
.back-to-top-btn {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1030;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--theme-button-border); color: #fff; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.back-to-top-btn.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top-btn:hover { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .back-to-top-btn { transition: opacity 0.25s ease, visibility 0.25s; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-social a:hover { transform: none; }
}

/* ---------- about page (2026-08-22) ---------- */
.about-body { font-size: 1.05rem; line-height: 1.75; color: var(--theme-text-muted); }
.about-body p { margin-bottom: 1.25rem; }
.about-body h2 { color: var(--theme-body-text, inherit); }
.about-quote {
  border-left: 3px solid var(--theme-button-border); padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 1.75rem 0; font-style: italic; color: var(--theme-body-text, inherit);
}
.about-pull-quote {
  background: var(--theme-accent-tint); border-radius: 12px; padding: 1.75rem 2rem;
  font-size: 1.1rem; line-height: 1.7; text-align: center; margin: 0 0 2.5rem;
}
/* Real photos (2026-08-22, Allie: "i added a few photos in Z:/About
   Photos") - resized/compressed server-side before this (originals up
   to 4.9MB), rotated one that had its EXIF orientation ignored by the
   resize step (System.Drawing reads raw pixels, not the orientation
   tag - the Superwoman photo needed a manual 90deg fix, the others
   happened to already be upright). */
.about-figure { margin: 2rem auto; text-align: center; }
.about-figure img { max-width: 100%; border-radius: 12px; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.2); }
.about-figure figcaption { font-size: 0.8rem; color: var(--landing-neutral-muted); margin-top: 0.6rem; font-style: italic; }
.about-figure-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 2rem 0; }
.about-figure-row .about-figure { flex: 1 1 260px; margin: 0; }
.about-figure-badge { max-width: 130px; margin: 2rem auto; }
.about-figure-badge img { box-shadow: none; }