/* ========================================================
   KNITPICKYKNITS UNIFIED DESIGN SYSTEM
   ======================================================== */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=DM+Sans:wght@400;500;700&family=Nunito:wght@400;600;700&display=swap');

:root {
  --font-display: 'Amatic SC', cursive;
  --font-body: 'Nunito', sans-serif;
   --font-ui: 'DM Sans', sans-serif;
    --bg-cream-deep: #f5ebe0;  /* Existing gradient end color, reused for table headers */
   --bg-cream: #fdfaf4;
  --bg-section: #ffffff;
  --rose-mid: #c97a7a;
  --rose-deep: #b86060; /* Added for hover states */
  --aqua-mid: #5f9090;
  --text-main: #3d3d3d;
  --text-muted: #7a8a8a;
  --border-rose: #f9c6c9;

   /* Pill component tokens */
  --pill-gold-bg: rgba(253, 230, 138, 0.40);
  --pill-gold-border: rgba(253, 230, 138, 0.70);
  --pill-gold-text: #9a8020;

  --pill-rose-bg: rgba(249, 198, 201, 0.30);
  --pill-rose-border: rgba(249, 198, 201, 0.60);
  --pill-rose-text: var(--rose-deep);

  --pill-aqua-bg: rgba(168, 218, 220, 0.30);
  --pill-aqua-border: rgba(168, 218, 220, 0.60);
  --pill-aqua-text: var(--aqua-deeper);

  
    /* Header-specific additions */
  --aqua-light: #8aabab;
  --text-muted-warm: #a89898;
  --blob-pink:   rgba(249, 198, 201, 0.25);
  --blob-teal:   rgba(168, 218, 220, 0.20);
  --blob-yellow: rgba(253, 230, 138, 0.40);

    /* Welcome + Journey section additions */
  --rose-light: #fde8e8;       /* Used in gradients */
  --aqua-light-bg: #eef8f8;    /* Used in gradient */
  --aqua-deeper: #4a8080;      /* Artisan heading */
  --text-rose-soft: #8a7070;   /* Studio paragraph */
  --text-rose-deep: #7a5c61;   /* Studio bullets */
  --text-aqua-soft: #6a8080;   /* Artisan paragraph */
  --text-aqua-deep: #2e6b70;   /* Artisan bullets */
  --aqua-dot: #a8dadc;         /* Bullet color */
  --radius-card: 1.5rem;       /* Was inline rounded-[var(--radius-card)] */

    /* Social / Hub section additions */
  --blue-mid:    #5870a8;
  --blue-soft:   #7888a8;
  --blue-bg:     #b8d4f4;

  --green-mid:   #5a8050;
  --green-soft:  #7a9870;
  --green-bg:    #a8d4b8;

  --gold-mid:    #9a8020;        /* already exists as --nexus-yellow-deep */
  --gold-bg:     #e8d870;        /* Ribblr's specific border color */

  --aqua-deep:   #4a8080;        /* TikTok heading */
  --aqua-icon-bg: rgba(168, 218, 220, 0.30);

  /* Volume Tokens (Text-Sizing) */
  --text-whisper: 0.75rem;   /* Captions/Meta */
  --text-body: 1rem;         /* Standard legibility */
  --text-talk: 1.25rem;      /* Emphasized body text */
  --text-shout: 2.5rem;      /* Secondary Headers */
  --text-roar: 4rem;         /* Hero/Brand Headers */
}

/* --- 2. BASE STYLES --- */
html, body { 
    height: 100%; 
    margin: 0; 
    scroll-behavior: smooth;
    overflow-x: hidden;     /* Belt & suspenders*/
}
body {
  font-family: var(--font-body);
  background: linear-gradient(180deg, var(--bg-cream) 0%, #f5ebe0 100%);
  color: var(--text-main);
  text-align: center; /* Applied globally for this specific page */
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Replicates min-h-screen */
  padding-left: env(safe-area-inset-left, 0);
 padding-right: env(safe-area-inset-right, 0);
}

@media (max-width: 480px) {
    body {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* --- 3. LAYOUT COMPONENTS --- */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1.5rem; /* Side padding for mobile */
}

header.container { 
    padding-top: 6rem;  /* Mimics pt-16 */
    padding-bottom: 3rem; 
}

main.container { 
    flex-grow: 1; /* Pushes the footer down */
}

footer.container { 
    padding-top: 4rem; 
    padding-bottom: 2rem; 
    font-size: 0.875rem; 
    color: var(--text-muted); 
}

.brand-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-rose);
  border-radius: 1.5rem;  /* Translates rounded-3xl */
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Translates shadow-sm */
}

/* --- 4. TYPOGRAPHY --- */
h1 { 
    font-family: var(--font-display); 
    font-size: 5rem; /* 7xl equivalent */
    color: var(--rose-mid); 
    margin: 1rem 0 0 0; 
    font-weight: 700;
}
h2 { 
    font-family: var(--font-display); 
    font-size: 2.5rem; 
    color: var(--aqua-mid); 
    margin-top: 0; 
    margin-bottom: 1.5rem; 
}
p { 
    line-height: 1.6; 
    color: var(--text-muted); 
    margin: 0 0 1rem 0; 
}

.text-whisper {
  font-size: var(--text-whisper);
}
.text-body {
  font-size: var(--text-body);
}
.text-talk {
  font-size: var(--text-talk);
}
.text-shout {
  font-size: var(--text-shout);
}
.text-roar {
  font-size: var(--text-roar);
}

/* --- 5. INTERACTIVE COMPONENTS --- */
.logo { 
    width: 8rem; /* 128px */
    height: 8rem; 
    border-radius: 50%; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s;
}
.logo:hover { transform: scale(1.05); }

.btn-primary {
  display: inline-block;
  background: var(--rose-mid);
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 1.5rem;
  transition: background 0.3s;
}
.btn-primary:hover { 
    background: var(--rose-deep); 
}

.tool-form-area {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Calculator-Specific Components */
.calc-header { text-align: center; padding: 2rem 0; }
.hero-image {
    width: 140px; height: 180px; border-radius: 50%;
    object-fit: cover; border: 6px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

.input-group { display: flex; flex-direction: column; margin-bottom: 1rem; }
.input-group label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem; }

.calc-input {
    padding: 0.6rem; border: 1px solid var(--border-rose);
    border-radius: 0.5rem; background: rgba(255,255,255,0.7);
}

.result-card { background: white; border-radius: 1rem; padding: 1.5rem; margin-top: 2rem; border: 1px solid var(--border-rose); }
.result-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.result-table th, .result-table td { padding: 0.75rem; border-bottom: 1px solid #eee; text-align: left; }

.result-label {
  font-size: var(--text-body);  /* 0.75rem */
  opacity: 0.7;
  margin: 0;
}

.result-value {
  font-size: var(--text-talk);    /* 2.5rem - big & prominent */
  font-weight: 700;
  margin: 0;
}

/* Form Layout & Inputs */
/* Default: stack on mobile */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Two columns on tablet and up */
@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.form-group { display: flex; flex-direction: column; }

.input-field {
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid #d4b8a0;
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    font-family: var(--font-body);
    color: var(--text-main);
    transition: border-color 0.2s;
      max-width: 100%;
    box-sizing: border-box;    
    min-width: 0;                 /* <-- for flex/grid contexts */
}
.input-field:focus { outline: none; border-color: var(--aqua-mid); }

.btn-calculate {
    grid-column: 1 / -1; /* Spans full width */
    background: var(--aqua-mid);
    color: white;
    margin-top: 1.5rem;      /* Adds breathing room to the top */
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}
/* Result Tables */
.result-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-family: var(--font-body);
}

.result-table th {
    background-color: var(--bg-cream-deep);
    color: var(--text-main);
    padding: 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--rose-mid);
}

.result-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #eee;
    color: var(--text-main);
}

.result-table tr.total-row td {
    background-color: var(--bg-cream-deep);
    font-weight: bold;
    border-top: 2px solid var(--rose-mid);
}

.materials-content {
    background: rgba(255, 255, 255, 0.5);
    padding: 1.5rem;
    border-radius: 0.5rem;
    line-height: 1.8;
}
/* Result card — base container */
.result-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-top: 2rem;
    border: 1px solid var(--border-rose);
    max-width: 100%;          /* Stay inside the parent */
    box-sizing: border-box;   /* Include padding in width */
    overflow: hidden;         /* Clip any escaping content */
    min-width: 0;             /* Allow flex/grid shrinking */
}

/* H2 inside result cards */
.result-card h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    margin-top: 0;            /* Reset nested h2 margin (we moved it to the card) */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-rose);
}

/* Spacing between sibling result cards */
.result-card + .result-card {
    margin-top: 2rem;
}

/* Make sure the armature/stuffing notes look like helpful advice */
.italic-note {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.5);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}
/* ========================================================
   SITE HEADER (index page)
   ======================================================== */
.site-header {
  position: relative;
  width: 100%;
  padding: 2rem 1rem 1.25rem;
}

/* --- Watercolor background blobs --- */
.header-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.header-bg__blob {
  position: absolute;
  border-radius: 50%;
}

.header-bg__blob--pink {
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 11rem;
  background: var(--blob-pink);
  filter: blur(60px);
}

.header-bg__blob--teal {
  top: -1rem;
  left: 25%;
  width: 400px;
  height: 8rem;
  background: var(--blob-teal);
  filter: blur(40px);
}

.header-bg__blob--yellow {
  top: -1rem;
  right: 25%;
  width: 300px;
  height: 7rem;
  background: var(--blob-yellow);
  filter: blur(40px);
}

/* --- Centered content wrapper --- */
.header-content {
  position: relative;
  max-width: 64rem;  /* matches max-w-5xl */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Tagline (replaces p override) --- */
.header-tagline {
  font-family: var(--font-body);
  font-size: var(--text-whisper);
  color: var(--text-muted-warm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0.25rem 0 0;
}

/* --- Navigation --- */
.header-nav {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.header-nav__link {
  color: var(--aqua-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.header-nav__link:hover {
  color: var(--aqua-mid);
}

/* --- Brand name hover glow (additive to existing h1) --- */
.header-brand {
  cursor: default;
}

.header-brand__name {
  display: inline-block;
  transition: all 0.5s ease;
}

.header-brand:hover .header-brand__name {
  animation: heartGlow 1.4s ease-in-out infinite;
}

/* --- Logo float (additive to existing .logo) --- */
.header-logo {
  animation: floatGentle 4s ease-in-out infinite;
}

/* ========================================================
   HEADER ANIMATIONS
   ======================================================== */
@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes heartGlow {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 12px rgba(201, 122, 122, 0.6);
    transform: scale(1.03);
  }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .header-logo,
  .header-brand__name {
    animation: none !important;
  }
}
/* ========================================================
   PRINT 
   ======================================================== */
@media print {
    /* Hide the interactive UI, show the Print section */
    header, form, .btn-primary, footer, .back-link { display: none !important; }
    .print-logo { display: block !important; }
    
    /* 1. Reset flexbox and heights for clean page breaks */
    html, body {
        height: auto !important;
        overflow: visible !important;
    }
    body {
        display: block !important; /* Turn off flexbox for print */
        min-height: 0 !important;  /* Remove 100vh constraint */
        background: white !important; 
        padding: 1.5rem !important;
    }

    #results { display: block !important; }
    
    /* 2. Turn off overflow hidden so cards can flow across pages */
    .result-card { 
        border: none !important; 
        overflow: visible !important; 
    }
    
    /* 3. Prevent images from splitting awkwardly across a page break */
    .print-logo img {
        break-inside: avoid;
    }

    /* 4. Shrink the maker stickers image to fit page 1 */
    .print-logo img[src*="images/maker-stickers.png"] {
        max-height: 250px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 1rem auto !important;
        display: block !important;
    }
    
    /* Ensure tables print nicely */
    .result-table { border: 1px solid #ccc; }
    .result-table th { background: #f5ebe0 !important; }

    /* Print-specific heading adjustments */
    .print-section-heading {
        text-align: left !important;
        margin-top: 1.5rem !important;
    }

    .print-bonus-heading {
        margin-top: 3rem !important;
    }
}


/* ============================================
   JOURNEY CHOOSER — clickable left/right zones
   ============================================ */
.journey-chooser {
  position: relative;
  display: inline-block;  /* Shrinks-wrap to image size */
}

/* The image */
.journey-chooser__img {
  display: block;
  max-width: 100%;
  height: auto;
  /* We can re-add responsive scaling here when ready! */
}

/* Shared styles for both click zones */
.journey-chooser__hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
  /* Uncomment the next line temporarily to SEE the zones while developing */
  /* background: rgba(201, 122, 122, 0.2); */
}

/* Left half → Studio */
.journey-chooser__hit--left {
  left: 0;
}

/* Right half → Artisan */
.journey-chooser__hit--right {
  right: 0;
}

/* Optional: subtle hover affordance on the image (entire image area) */
.journey-chooser:hover .journey-chooser__img {
  filter: brightness(0.97);
  transition: filter 0.3s ease;
}

/* Keyboard focus visibility (accessibility win) */
.journey-chooser__hit:focus {
  outline: 3px solid var(--aqua-mid);
  outline-offset: -3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ========================================================
   WELCOME SECTION
   ======================================================== */
.welcome-section {
  max-width: 48rem;       /* matches max-w-3xl */
  margin: 0 auto;
  padding: 1.5rem 1rem 0.5rem;
  text-align: center;
  animation: riseIn 1s ease 0.3s both;
}

/* Overrides base h2 color to rose for this section only */
.welcome-section__heading {
  font-family: var(--font-display);
  font-size: 3rem;        /* mobile (text-5xl) */
  font-weight: 700;
  color: var(--rose-mid);
  line-height: 1.1;
  margin: 0;
}

@media (min-width: 768px) {
  .welcome-section__heading {
    font-size: 4.5rem;    /* desktop (md:text-7xl) */
  }
}

/* Overrides base p margin/max-width for this section only */
.welcome-section__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 36rem;
  margin: 0.75rem auto 0;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .welcome-section__intro {
    font-size: 1.125rem;
  }
}

/* ========================================================
   JOURNEY MAP — Interactive 3-Scene Chooser
   ======================================================== */
.journey-map {
  max-width: 64rem;
  margin: 2rem auto;
  padding: 0 1rem;
  text-align: center;
}

.journey-map__heading {
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--aqua-mid);
  margin: 0 0 1.5rem;
  /* Reuses the floatGentle keyframe already defined in header section! */
  animation: floatGentle 4s infinite;
}

.journey-map__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(249, 198, 201, 0.2);
  background: #f9f0d8;  /* Fallback while image loads */
}

.journey-map__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- The clickable zones overlay --- */
.journey-map__zones {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
}


.journey-zone {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: background 0.3s ease;
}

.journey-zone--middle {
  pointer-events: none;  /* decorative center, not clickable */
}

.journey-zone--left:hover,
.journey-zone--right:hover {
  background: rgba(0, 0, 0, 0.02);
}

.journey-zone:focus {
  outline: none;
}

/* The dashed border that appears on hover */
.journey-zone__border {
  position: absolute;
  inset: 0.5rem;
  border: 2px dashed transparent;
  border-radius: 0.75rem;
  transition: border-color 0.3s ease;
}

@media (min-width: 768px) {
  .journey-zone__border {
    inset: 1rem;
  }
}

.journey-zone--left:hover .journey-zone__border {
  border-color: rgba(201, 122, 122, 0.4);
}

.journey-zone--right:hover .journey-zone__border {
  border-color: rgba(95, 144, 144, 0.4);
}

/* Keyboard focus ring (accessibility) */
.journey-zone:focus-visible .journey-zone__border {
  border-color: var(--aqua-mid);
}

/* ========================================================
   PATH CARDS — Studio & Artisan
   ======================================================== */
.path-stack {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.path-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.5s ease;
  max-width: 100%;           /* Don't exceed parent */
  box-sizing: border-box;    /* Include padding in width */
  min-width: 0;              /* Allow flex/grid shrinking */
}

.path-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Color themes */
.path-card--studio {
  background: linear-gradient(135deg, #fef3ee 0%, var(--rose-light) 50%, #f9f0d8 100%);
}

.path-card--artisan {
  background: linear-gradient(135deg, var(--aqua-light-bg) 0%, #e4f2f4 50%, #eef3fb 100%);
}

/* Path cards: stretch children to full width on mobile */
.path-card__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;    /* <-- New: include padding in width */
  min-width: 0;              /* <-- New: allow shrinking */
}

@media (min-width: 768px) {
  .path-card__row {
    flex-direction: row;
    align-items: center;
  }
  .path-card__row--reverse {
    flex-direction: row-reverse;
  }
}

/* Media block */
.path-card__media {
  width: 100%;
  height: 18rem;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;    /* <-- New */
  min-width: 0;              /* <-- New */
}

@media (min-width: 768px) {
  .path-card__media {
    width: 50%;
    height: auto;
  }
}

.path-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.path-card:hover .path-card__image {
  transform: scale(1.05);
}

/* Text half — RESPONSIVE PADDING */
.path-card__body {
  width: 100%;
  padding: 2rem 1.5rem;       /* <-- Reduced right padding on mobile */
  text-align: left;
  box-sizing: border-box;     /* <-- New */
  min-width: 0;               /* <-- New */
  overflow-wrap: break-word;  /* <-- New: wrap long words if any */
}

@media (min-width: 768px) {
  .path-card__body {
    width: 50%;
    padding: 2.5rem 2rem;     /* <-- Restore larger padding on desktop */
  }
}

/* Level tag (e.g., "Beginner to Intermediate") */
.path-card__level {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.path-card__level--rose { color: var(--rose-mid); }
.path-card__level--aqua { color: var(--aqua-mid); }

/* Card heading */
.path-card__heading {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.path-card__heading--rose { color: var(--rose-deep); }
.path-card__heading--aqua { color: var(--aqua-deeper); }

/* Description paragraph */
.path-card__text {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

.path-card__text--rose { color: var(--text-rose-soft); }
.path-card__text--aqua { color: var(--text-aqua-soft); }

/* Bullet list */
.path-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.path-card__list--rose { color: var(--text-rose-deep); }
.path-card__list--aqua { color: var(--text-aqua-deep); }

.path-card__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;              /* <-- New: allow flex children to shrink */
}

.path-card__list li::before {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.path-card__list--rose li::before { background: var(--border-rose); }
.path-card__list--aqua li::before { background: var(--aqua-dot); }

/* ========================================================
   RISE-IN ANIMATION (used by welcome section)
   ======================================================== */
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Extend motion preferences to all new animated elements */
@media (prefers-reduced-motion: reduce) {
  .welcome-section,
  .journey-map__heading,
  .path-card__image {
    animation: none !important;
    transition: none !important;
  }
}
/* ========================================================
   PILL COMPONENT (reusable label/badge)
   ======================================================== */
.pill-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;      /* Adds breathing room to the top */
  margin-bottom: 1.25rem; /* Keeps the spacing you already have below */
}


.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  background: var(--pill-gold-bg);
  border: 1px solid var(--pill-gold-border);
  color: var(--pill-gold-text);
}

/* Theme variants */
.pill--gold { background: var(--pill-gold-bg);   border-color: var(--pill-gold-border);   color: var(--pill-gold-text); }
.pill--rose { background: var(--pill-rose-bg);   border-color: var(--pill-rose-border);   color: var(--pill-rose-text); }
.pill--aqua { background: var(--pill-aqua-bg);   border-color: var(--pill-aqua-border);   color: var(--pill-aqua-text); }

/* ========================================================
   NEXUS SECTION
   ======================================================== */
.nexus-section__inner {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.nexus-card {
  position: relative;
  border-radius: 2.5rem;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.nexus-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nexus-card__wash--gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fef9ee 0%, #eef8f4 50%, #eef3fb 100%);
}

.nexus-card__wash--glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20rem;
  height: 20rem;
  background: rgba(253, 230, 138, 0.30);
  border-radius: 50%;
  filter: blur(60px);
}

.nexus-card__content {
  position: relative;
  padding: 2rem 1rem;
}

@media (min-width: 768px) {
  .nexus-card__content { padding: 3rem; }
}

.nexus-intro {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 2rem;
}

.nexus-intro__heading {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: #6a7a60;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
  .nexus-intro__heading { font-size: 3rem; }
}

.nexus-intro__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #7a8a7a;
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 768px) {
  .nexus-intro__text { font-size: 1.125rem; }
}

/* Tool container (the embed wrapper) */
.tool-container {
  overflow: hidden;
  background: linear-gradient(135deg, #fdfaf4 0%, #eef8f4 100%);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/* ========================================================
   HUB SECTION — Find Me in the Wild
   ======================================================== */
.hub-section {
    position: relative;
    width: 100%;
    padding: 3rem 1rem 5rem; /* <-- added 5rem of bottom padding */
    overflow: visible;
    background: linear-gradient(180deg, #fdfaf4 0%, #f4f8f8 50%, #fdf4f0 100%);
    margin-bottom: 2rem;     /* <-- added to push the form further down */
}

@media (min-width: 768px) {
  .hub-section { padding: 4rem 1rem; }
}

.hub-section__inner {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.hub-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.hub-header__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: #9aaa9a;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.hub-header__title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--rose-mid);
  margin: 0;
}

@media (min-width: 768px) {
  .hub-header__title { font-size: 3.75rem; }
}

.hub-header__sub {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #8a9898;
  max-width: 28rem;
  margin: 0.5rem auto 0;
}

/* Tier wrapper */
.hub-tier {
  margin-bottom: 2rem;
}

.hub-tier__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.75rem;
}

.hub-tier__label--aqua { color: #a8b8b8; }
.hub-tier__label--rose { color: #b8a8a8; }
.hub-tier__label--gold { color: #a89888; }

.hub-tier__grid {
  display: grid;
  gap: 1rem;
  margin: 0 auto;
}

.hub-tier__grid--three { grid-template-columns: repeat(3, 1fr); max-width: 28rem; }
.hub-tier__grid--deep  { grid-template-columns: repeat(3, 1fr); max-width: 36rem; }
.hub-tier__grid--two   { grid-template-columns: repeat(2, 1fr); max-width: 28rem; }

@media (max-width: 480px) {
  .hub-tier__grid--three,
  .hub-tier__grid--deep,
  .hub-tier__grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Social card (themed variants) --- */
.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.social-card:hover { transform: translateY(-2px); }

.social-card__icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--aqua-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.social-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.social-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.social-card__caption {
  font-size: 0.625rem;
  margin: 0;
  text-align: center;
}

/* Theme variants */
.social-card--aqua {
  background: linear-gradient(135deg, #f0fafa 0%, #e8f4f4 100%);
  border-color: rgba(168, 218, 220, 0.30);
}
.social-card--aqua:hover { border-color: rgba(168, 218, 220, 0.70); }
.social-card--aqua .social-card__name { color: var(--aqua-deep); }
.social-card--aqua .social-card__caption { color: #7a9898; }

.social-card--rose {
  background: linear-gradient(135deg, #fef4f0 0%, #fde8e8 100%);
  border-color: rgba(249, 198, 201, 0.30);
}
.social-card--rose:hover { border-color: rgba(249, 198, 201, 0.70); }
.social-card--rose .social-card__name { color: var(--rose-mid); }
.social-card--rose .social-card__caption { color: #9a7878; }

.social-card--rose-deep {
  background: linear-gradient(135deg, #fef2f2 0%, #fce8e8 100%);
  border-color: rgba(249, 198, 201, 0.30);
}
.social-card--rose-deep:hover { border-color: rgba(249, 198, 201, 0.60); }
.social-card--rose-deep .social-card__name { color: var(--rose-deep); }
.social-card--rose-deep .social-card__caption { color: #9a7070; }

.social-card--gold {
  background: linear-gradient(135deg, #fdf8ee 0%, #faf0d8 100%);
  border-color: rgba(253, 230, 138, 0.40);
}
.social-card--gold:hover { border-color: rgba(253, 230, 138, 0.70); }
.social-card--gold .social-card__name { color: var(--gold-mid); }
.social-card--gold .social-card__caption { color: #9a8838; }

.social-card--gold-shop {
  background: linear-gradient(135deg, #fdf8ee 0%, #faf0d8 100%);
  border-color: rgba(232, 216, 112, 0.30);
}
.social-card--gold-shop:hover { border-color: rgba(232, 216, 112, 0.60); }
.social-card--gold-shop .social-card__name { color: var(--gold-mid); }
.social-card--gold-shop .social-card__caption { color: #9a8838; }

.social-card--blue {
  background: linear-gradient(135deg, #eef4fc 0%, #e4eef8 100%);
  border-color: rgba(184, 212, 244, 0.30);
}
.social-card--blue:hover { border-color: rgba(184, 212, 244, 0.70); }
.social-card--blue .social-card__name { color: var(--blue-mid); }
.social-card--blue .social-card__caption { color: var(--blue-soft); }

.social-card--green {
  background: linear-gradient(135deg, #f0faf4 0%, #e4f4e8 100%);
  border-color: rgba(168, 212, 184, 0.30);
}
.social-card--green:hover { border-color: rgba(168, 212, 184, 0.60); }
.social-card--green .social-card__name { color: var(--green-mid); }
.social-card--green .social-card__caption { color: var(--green-soft); }

/* ========================================================
   "GET LOOPED IN" CALLOUT
   ======================================================== */
.loop-callout {
  text-align: center;
  max-width: 64rem;
  margin: 3rem auto 0;
  padding: 0 1rem;
}

.loop-callout__heading {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--rose-mid);
  margin: 0 0 1rem;
}

.loop-callout__tools {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.loop-callout__cta {
  display: inline-block;
  font-size: 1.5rem;
  color: var(--aqua-mid);
  text-decoration: underline;
  margin-bottom: 1.5rem;
}

.loop-callout__doll {
  display: inline-block;
  animation: floatGentle 4s ease-in-out infinite;
}

.loop-callout__doll img {
  width: 6rem;
  height: 6rem;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .loop-callout__doll img {
    width: 7rem;
    height: 7rem;
  }
}

.loop-callout__description {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 1.5rem auto 0;
  max-width: 36rem;
}

/* ========================================================
   NEWSLETTER SIGNUP CARD
   ======================================================== */
.signup-section {
  position: relative;
  max-width: 42rem;
  margin: 2rem auto 0;     /* <-- changed from "0 auto" to push it down */
  padding: 2.5rem 1.25rem;
  text-align: center;
}
/* Larger screens — let it tighten up */
@media (min-width: 768px) {
    .signup-section {
        padding: 3rem 1rem;
    }
}


.signup-card {
  position: relative;
  border-radius: 1.5rem;
  background: linear-gradient(135deg,
    rgba(253, 232, 232, 0.60) 0%,
    rgba(232, 244, 244, 0.60) 100%);
  border: 1px solid rgba(249, 198, 201, 0.20);
  padding: 2rem;
}

@media (min-width: 768px) {
  .signup-card { padding: 2.5rem; }
}

.signup-card__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.signup-card__icon-bubble {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(249, 198, 201, 0.30);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-card__icon-bubble img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.signup-card__heading {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--rose-mid);
  margin: 0 0 0.5rem;
}

.signup-card__text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #8a9898;
  margin: 0 0 1.25rem;
}

.signup-card__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
  max-width: 24rem;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .signup-card__form { flex-direction: row; }
}

.signup-card__input {
  flex: 1;
  padding: 0.625rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(249, 198, 201, 0.50);
  background: rgba(255, 255, 255, 0.70);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-main);
  transition: border-color 0.2s;
}

.signup-card__input:focus {
  outline: none;
  border-color: var(--aqua-mid);
}

.signup-card__submit {
  padding: 0.625rem 1.25rem;
  background: linear-gradient(90deg, #f9c6c9 0%, #e8a0a0 100%);
  color: white;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.signup-card__submit:hover {
  background: linear-gradient(90deg, #e8a0a0 0%, #d88888 100%);
}

/* ========================================================
   FOOTER
   ======================================================== */
.site-footer {
  position: relative;
  width: 100%;
  border-top: 1px solid rgba(240, 230, 214, 0.60);
  padding: 2rem 0;
}

.site-footer__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 768px) {
  .site-footer__inner { flex-direction: row; }
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-footer__brand-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(249, 198, 201, 0.30);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer__brand-icon img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.site-footer__brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rose-mid);
  margin: 0;
}

.site-footer__brand-url {
  font-family: var(--font-body);
  font-size: 0.625rem;
  color: #a89898;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.25rem;
  row-gap: 0.375rem;
  font-size: 0.75rem;
  color: #9aabab;
}

.site-footer__nav a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__nav a:hover { color: var(--aqua-mid); }

.site-footer__copy {
  font-family: var(--font-body);
  font-size: 0.625rem;
  color: #b8c8c8;
  margin: 0;
}

/* ========================================================
   SHOW / HIDE UTILITIES (used by calculator JS)
   ======================================================== */
.hide  { display: none !important; }
.show  { display: block !important; }
/* Stack label text above its input in the form-grid */


.form-grid > label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    text-align: left;
}

.form-grid > label .input-field {
    width: 100%;
}