/* =========================
   GLOBAL TOKENS + BASE SYSTEM
   ========================= */

:root{
  /* Fonts */
  --ff-heading: 'GranaPadano', 'Inter', sans-serif;
  --ff-base: 'Ubuntu', 'Inter', sans-serif;
  --ff-accent: 'Nemoy', sans-serif;


  /* Font sizes */
  --fs-body: clamp(0.9rem, 1.2vw, 1.1rem);
  --fs-h1: clamp(1.6rem, 3.6vw, 2.8rem);
  --fs-h2: clamp(1.0rem, 2.2vw, 1.4rem);
  --fs-h3: clamp(0.95rem, 1.8vw, 1.15rem);
  --fs-tagline: clamp(1.02rem, 0.98rem + 0.35vw, 1.22rem);
  --fs-feedback:clamp(0.9rem, 1.2vw, 1.1rem);
  --fs-footer: clamp(0.8rem, 1.1vw, 0.85rem);
  --fs-footer-meta: clamp(0.75rem, 1vw, 0.8rem);

/* Hero Section specific variables */
  --fs-hero-h2: clamp(1.2rem, 2.5vw, 1.8rem);
  --fs-hero-h1: clamp(1.1rem, 2.4vw, 1.6rem);
  --fs-herocallout: clamp(1.0rem, 1.4vw, 1.25rem);
  
  

  /* Features Section specific variables */
  --emoji-icon-size: 2.5rem;          /* desktop */
  --emoji-icon-scale-mobile: 0.65;  /* ~2/3 */
  --emoji-icon-color: var(--color-bridge);
  --emoji-icon-font: 'NotoEmoji', sans-serif;

  /* Line heights */
  --lh-body: 1.2;
  --lh-tight: 1.2;
  --lh-display: 1;

  --lh-hero-h1: 0.72;
  --lh-hero-h2: 0.85;
  --lh-footer: 1.25;

  /* UI sizes */
  --logo-size: 1.2rem;
  --nav-size: 1.2rem;
  --nav-pad-y: 0.75rem;
  --nav-pad-x: 2rem;
  --tagline-size: 1rem;
  --fs-bridge: 1.3rem; 


  /* Colors */
  --color-vividblue: #0c2085;
  --color-text: #0f184b;
  --color-white: #fff;
  --color-muted: #60636b;
  --color-softblue: #3d5385;
  --color-blue: #022255;
  --color-accent: #FFB800;
  --color-yellow-hover: #ffa500;
  --color-bridge-old: #7c9586;
  --color-lila:  #4a4b79;
  --color-bridge: #859891;

  /* Spacing */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-sm: 1.25rem; /* 20px */
  --space-m: 1.5rem;  /* 24px */
  --space-ls: 1.8rem;   /* 32px */
  --space-l: 2.5rem;
  --space-xl: 3.2rem;
  --space-p: var(--space-s); /* default paragraph spacing */

  /* Layout */
  --container: min(1100px, 92vw);
  --radius: 12px;
  
  --container-max: 1100px;

  scroll-behavior: smooth;
}




/* =========================
   TYPOGRAPHY SYSTEM (UNIFIED)
   ========================= */

h1,h2,h3{
  font-family: var(--ff-heading);
  line-height: var(--lh-display);
  margin: 0 0 var(--space-xs) 0;
}

h1{ font-size: var(--fs-h1); color: var(--color-text); }
h2{ font-size: var(--fs-h2); color: var(--color-vividblue);}
h3{ font-size: var(--fs-h3); color: var(--color-blue);}


/* ==================== SPECIAL HEADINGS ==================== */
/* hidden H2 and H3 variant for selected sections */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* stronger H3 for readability in FEATURES BenefitsHow to Join */
:where(.features, .card, .benefits, .how-to-join) h3{
  color: var(--color-blue);
  margin-bottom: var(--space-xxs);
}


/* Base paragraph = default everywhere */
p{
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0 0 var(--space-p) 0;
}

/* Only use these when you intentionally want a different “voice” */
.text-lead{
  max-width: 70%;
  margin-left:auto;
  margin-right:auto;
  font-family: var(--ff-heading); font-size: var(--fs-h3); 
  line-height: var(--lh-display); color: var(--color-softblue); 
  margin-top: 0; margin-bottom: var(--space-xxs); }

  .text-lead-challenge{
  max-width: 80%;
  margin-left:auto;
  margin-right:auto;
  font-family: var(--ff-heading); font-size: var(--fs-h3); 
  line-height: var(--lh-display); color: var(--color-softblue); 
  margin-top: 0; margin-bottom: var(--space-xxs); }

  .text-lead-bio{
  max-width:90%;
  margin-left:auto;
  margin-right:auto;
  font-family: var(--ff-heading); font-size: var(--fs-h3); 
  line-height: var(--lh-display); color: var(--color-softblue); 
  margin-top: 0; margin-bottom: var(--space-xs); }

  .text-lead-subtitle{
  max-width: 90%;
  margin-left:auto;
  margin-right:auto;
  font-family: var(--ff-heading); font-size: var(--fs-h3); 
  line-height: var(--lh-display); color: var(--color-text); 
  margin-top: 0; margin-bottom: var(--space-xxs); }

.text-kicker{
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--color-blue);
  font-weight: 400;
  max-width: 85ch;
  margin-left:auto;
  margin-right:auto;
  margin-top: var(--space-s);
  margin-bottom: var(--space-s);
}

.text-caption{
  font-family: var(--ff-heading);
  font-size: 0.8rem;
  line-height: var(--lh-tight);
  color: var(--color-lila);
  margin-top: var(--space-xxs);
}

.prose{
  max-width: 65ch;
  margin-left:auto;
  margin-right:auto;
}

.target-audience{
  max-width: 80%;
  margin: 0 auto var(--space-m) auto;

  text-align: center;
  font-family: var(--ff-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--color-vividblue);
  font-weight: 400;
}

 /* Highlight gradient background */
.highlight{display:inline-block;padding:0.1rem 0.2rem;border-radius:3px;
  background:linear-gradient(to right,rgba(255,255,255,0.2),rgba(255,255,255,0.5),rgba(255,255,255,0.9));}

/* ====================
   RESPONSIVE TOKENS
   ==================== */

/* Large tablets and down */
@media (max-width:1024px){
  :root{
    --space-l: 2rem;
    --space-xl: 3rem;
    --emoji-icon-size: 1.9rem; 
  }
}

/* Tablets */
@media (max-width:900px){
  :root{
    --logo-size: 1.05rem;
    --nav-size: 1.05rem;
    --fs-bridge: 1.05rem;
  }
}

/* Phones */
@media (max-width:600px){
  :root{
    /* Typography */
    --fs-body: 0.9rem;
    --lh-body: 1.35;
    --lh-tight: 1.15;

    --fs-h1: clamp(1.2rem, 6.5vw, 1.75rem);
    --fs-h2: clamp(1.0rem, 4.5vw, 1.2rem);
    --fs-h3: clamp(0.95rem, 3.8vw, 1.05rem);

    --emoji-icon-size: 1.9rem; 

    /* UI */
    --logo-size: 0.85rem;
    --nav-size: 0.85rem;
    --fs-bridge: 1rem;
    --fs-tagline: 1.02rem;

    /* Spacing */
    --space-s: 0.9rem;
    --space-m: 1.2rem;
    --space-l: 1.6rem;
    --space-xl: 2.4rem;
    --space-p: 0.85rem;
  }
}

/* ====================
   iPad Pro ONLY
   ==================== */
/* iPad Pro 11" & 12.9" */
@media 
  (min-width: 834px) and (max-width: 1024px)
  and (min-height: 1194px),
  (min-width: 1024px) and (max-width: 1366px)
  and (min-height: 834px) {

  :root {
    --fs-h2: clamp(1.15rem, 2.0vw, 1.45rem);
    --fs-h3: clamp(1.05rem, 1.6vw, 1.25rem);
  }
}



/* ==================== FONT-FACES ==================== */
@font-face{font-family:'Nemoy';src:url('../fonts/NemoyLight.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Nemoy';src:url('../fonts/NemoyBold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'GranaPadano';src:url('../fonts/GranaPadano.woff2') format('woff2'),url('../fonts/GranaPadano.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'NotoEmoji';src:url('../fonts/NotoEmoji-Regular.woff2') format('woff2'),url('../fonts/NotoEmoji-Regular.woff') format('woff');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Ubuntu';src:url('../fonts/Ubuntu-Regular.woff2') format('woff2'),url('../fonts/Ubuntu-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}

/* ==================== GLOBAL RESET ==================== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--ff-base);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--color-white);

  /* ADD these: */
  display: flex;
  flex-direction: column;
  min-height: 100vh;   /* fallback */
  min-height: 100svh;  /* mobile Safari stable viewport */
  min-height: 100dvh;  /* modern dynamic viewport */
}


img{ max-width:100%; height:auto; display:block; }
body.menu-open { overflow: hidden; }


 
/* ==================== GLOBAL ELEMENTS ==================== */
/* --- Main content padding --- */
main {
  flex: 1 0 auto;
  width: 100%;
  padding-bottom: 0; 
}


/* ==================== HEADER ==================== */
.header-fixed { position: sticky; top: 0; width: 100%; z-index: 100; background: transparent; backdrop-filter: blur(4px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.nav-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: var(--nav-pad-y) var(--nav-pad-x); }
.logo { font-family: var(--ff-accent); font-weight: 700;font-size: var(--logo-size);  color: var(--color-lila); white-space: nowrap; }
.menu-toggle { display: none; font-size: 1.8rem; background: none; border: none; 
  cursor: pointer;  color: var(--color-lila);          /* IMPORTANT */
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.main-nav { display: flex; }
.main-nav ul { display: flex; gap: 1.25rem; list-style: none; }

.main-nav a {
  font-family: 'Nemoy', sans-serif;
  font-size: var(--nav-size); 
  color:var(--color-lila);           
  font-weight: 700;          
  text-decoration: none;    
  padding: 0.5rem 1rem;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}


.main-nav a.active {
  background: var(--color-bridge);
  color: var(--color-white);
}

/* Press/tap feedback (keep it consistent with hover = yellow) */
.main-nav a:active {
  background: var(--color-yellow-hover);
  color: var(--color-white);
}

/* Keyboard accessibility (Tab key) */
.main-nav a:focus-visible {
  outline: 2px solid var(--color-yellow-hover);
  outline-offset: 2px;
}

/* Match hover styling for keyboard focus on non-active links */
.main-nav a:focus-visible:not(.active) {
  background: var(--color-yellow-hover);
  color: var(--color-white);
}

/* Hover only where hover exists (prevents sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover {
    background: var(--color-yellow-hover);
    color: var(--color-white);
  }
}


/* Keyboard accessibility (Tab key) */
.main-nav a:focus-visible {
  outline: 2px solid var(--color-yellow-hover);
  outline-offset: 2px;
  background: var(--color-yellow-hover);
  color: var(--color-white);
}


/* Responsive Nav */
@media (max-width:900px) {
  .menu-toggle { display: block; }
  .main-nav { display: none; flex-direction: column; width: 100%; }
  .main-nav.open { display: flex;   
    background: transparent;
  backdrop-filter: blur(16px);}
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav li { width: 100%; }
  .main-nav a { display: block; width: 100%; padding: 1rem; text-align: left; }
}

.main-nav a,
.menu-toggle {
  -webkit-tap-highlight-color: transparent;
}


/* Hover only where hover exists */
@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover {
    background: var(--color-yellow-hover);
    color: var(--color-white);
  }
}
/* Keyboard focus */
.menu-toggle:focus-visible {
  outline: 2px solid var(--color-yellow-hover);
  outline-offset: 2px;
}

/* Hover only on devices that actually have hover (desktop/laptop) */

@media (hover: hover) and (pointer: fine) {

      /* Tap feedback (phones/tablets) */
.main-nav a:active {
  background: var(--color-bridge);
  color: var(--color-white);
}
  .main-nav a:hover {
    background: var(--color-yellow-hover);
    color: var(--color-white);
  }
}


/* ==================== TAGLINE ==================== */
.tagline-bar{
  background-color: var(--color-bridge);
  padding: 0.3rem 0;
  text-align: center;
  color:var(--color-white);
}

.tagline{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  flex-wrap: nowrap;
}

.tagline-text{
  font-family: var(--ff-heading), sans-serif;
  font-size: var(--fs-tagline);
  line-height: var(--lh-body);
  color: var(--color-white);
  margin: 0;
  white-space: normal;
}

/* Tablet + desktop: keep to one line */
@media (min-width:600px){
  .tagline{
    flex-wrap: nowrap;
  }
  .tagline-text{
    white-space: nowrap;
  }
}

/* ==================== CONTAINERS ==================== */
.intro, .intro-hero { background-color:rgba(174,236,222,0.8);  }
.intro.intro.shufflebody { background-color:rgba(176, 226, 214, 0.5);  }

/* ==================== SECTION / INTRO PADDING TOKENS ==================== */
:root{
  /* Default (desktop) section box sizing */
  --section-width: 80%;
  --section-max: var(--container-max);

  /* Default margins */
  --section-mt: var(--space-s);
  --section-mb: var(--space-xl);

  /* Default padding: keep TOP a bit larger than BOTTOM (your intent) */
  --section-pad-x: var(--space-ls);
  --section-pad-top: calc(var(--space-ls) * 0.8);
  --section-pad-bottom: calc(var(--space-s) * 0.7);
}

/* Applies to all “intro box” variants */
.intro,
.intro-hero,
.intro-transparent{
  width: var(--section-width);
  max-width: var(--section-max);

  margin: var(--section-mt) auto var(--section-mb);

  /* top | left-right | bottom (keeps your “top > bottom” rule) */
  padding: var(--section-pad-top) var(--section-pad-x) var(--section-pad-bottom);

  text-align: center;
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
}

.intro-transparent{
  margin-bottom: var(--space-s);
}

/* ==================== iPad / tablet ==================== */
@media (max-width: 1024px){
  :root{
    --section-mt: var(--space-xs);
    --section-mb: var(--space-l);

    /* default section padding on tablet */
    --section-pad-x: var(--space-s);
    --section-pad-top: calc(var(--space-s) * 0.9);
    --section-pad-bottom: calc(var(--space-s) * 0.5);
  }

  /* Only what differs for hero (still keeps top > bottom) */
  .intro-hero{
    --section-pad-x: var(--space-xs);
    --section-pad-top: var(--space-m);
    --section-pad-bottom: calc(var(--space-s) * 0.3);
  }

  .intro, .intro-hero { background-color:rgba(174,236,222,0.9);  }
}

/* ==================== phones ==================== */
@media (max-width: 480px){
  :root{
    --section-mt: var(--space-xs);
    --section-mb: var(--space-m);

    /* default (intro) phone padding */
    --section-pad-x: var(--space-m);
    --section-pad-top: calc(var(--space-s) * 0.85);
    --section-pad-bottom: calc(var(--space-s) * 0.75);
  }

  /* Hero differs on phones */
  .intro-hero{
    --section-pad-x: var(--space-s);
    --section-pad-top: calc(var(--space-s) * 0.65);
    --section-pad-bottom: calc(var(--space-s) * 0.55);
  }
}


/* ==================== BRIDGE ==================== */
.bridge{
  width: 60%;
  max-width: var(--container-max);
  margin: 1.5rem auto 0.5rem;
  padding: 0.3rem;
  text-align: center;

  box-sizing: border-box;
  border-radius: 0;
  box-shadow: var(--color-accent);
  color: var(--color-white);
  font-family: var(--ff-heading);
  font-weight: 400;
  background-color: transparent; /* empty inside */

  position: relative;
  border: none; /* lines drawn with pseudo-elements */

  /* desktop line proportions */
  --bridge-line-bottom: 80%;
  --bridge-line-top: 60%;

  transition: background-color 0.3s ease;
}

/* hover effect: fill with semi-transparent gradient */
.bridge:hover{
  background: linear-gradient(
    38deg,
    rgba(124,149,134,0) 0%,
    rgba(124,149,134,0.8) 35%,
    rgba(124,149,134,0.4) 50%,
    rgba(124,149,134,0.8) 75%,
    rgba(124,149,134,0) 100%
  );
  transition: background 0.3s ease;
}

/* controlled top + bottom lines */
.bridge::before,
.bridge::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background-color: var(--color-bridge);
  opacity: 1;
}

.bridge::before{
  top: 0;
  width: var(--bridge-line-top);
  height: 1px;
}

.bridge::after{
  bottom: 0;
  width: var(--bridge-line-bottom);
  height: 2px;
}

/* hide lines on hover (matches your previous behavior) */
.bridge:hover::before,
.bridge:hover::after{
  opacity: 0;
}

/* White text in Bridge sections */
.bridge-line{
  color: var(--color-white);
  font-family: var(--ff-heading);
  font-size: var(--fs-bridge, 1.2rem);
  line-height: var(--lh-display);
  margin: 0.5rem 0;
}


/* ==================== BRIDGE: MOBILE + TABLET TUNING ==================== */
@media (max-width: 1024px){
  .bridge{
    width: 80%;
    margin: 1rem auto 0.6rem;
    padding: 0.2rem 0.6rem;

    /* keep top shorter than bottom */
    --bridge-line-bottom: 78%;
    --bridge-line-top: 58%;
  }

  .bridge::after{
  height: 1px;
  }

  .bridge-line{
    margin: 0.25rem 0;
    font-size: 1.15rem;
    line-height: 1.13;
  }
}

@media (max-width: 768px){
  .bridge{
    width: 80%;
    margin: 0.85rem auto 0.5rem;
    padding: 0.18rem 0.55rem;

    --bridge-line-bottom: 76%;
    --bridge-line-top: 56%;
  }

  .bridge-line{
    font-size: 1.05rem;
    margin: 0.2rem 0;
    line-height: 1.12;
  }
  .bridge::after{
  height: 1px;
  }
}



/* ==================== CTA Global + Hero ==================== */

.cta-container,
.cta-wrapper{
  text-align: center;
  margin: var(--space-s) 0;
  margin-top: var(--space-xs);
}

.cta-button,
.cta-button--hero {
  font-family: 'Nemoy', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 1.05rem;
  padding: 16px 34px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;

  line-height: 1.15;
  box-sizing: border-box;
  max-width: 100%;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.3s ease;
}

.cta-button {
  background: var(--color-yellow-hover);
  color: var(--color-lila);
}

.cta-button:hover{
  background: var(--color-bridge);
  transform: translateY(-2px);
  color: var(--color-white);
}


.cta-button--hero {
  background: var(--color-bridge);
  color: var(--color-white);
}

.cta-button--hero:hover{
  background: var(--color-yellow-hover);
  transform: translateY(-2px);
  color: var(--color-lila);
}



/* ====================
   Phones (keep as-is)
   ==================== */
@media (max-width: 480px){
  .cta-button{
    width: 60%;
    max-width: 340px;
    font-size: 0.90rem;
    padding: 12px 12px;
  }

  .cta-button--hero{
    width: 60%;
    max-width: 340px;
    font-size: 0.80rem;
    padding: 6px 8px;
  }

  .cta-button,
  .cta-button--hero{

    /* Allow wrapping to 2 lines */
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;

    margin-left: auto;
    margin-right: auto;
  }
}

/* ====================
   Tablets / iPads (narrower than desktop)
   ==================== */
@media (min-width: 481px) and (max-width: 1024px){
  .cta-button,
  .cta-button--hero{
    font-size: 1rem;
    padding: 14px 22px; /* narrower than 16px 34px */
  }
}

/* ====================
   iPad Pro ONLY (even narrower; placed LAST so it wins)
   ==================== */
@media 
  (min-width: 834px) and (max-width: 1024px) and (min-height: 1194px),
  (min-width: 1024px) and (max-width: 1366px) and (min-height: 834px) {
  .cta-button,
  .cta-button--hero{
    font-size: 1rem;
    padding: 10px 15px; /* your original iPad Pro target */
  }
}

/* ==================== HERO ==================== */
/* ==================== HERO ==================== */
.intro.hero { margin-top: 2.5rem; }

.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 1rem;
  padding: var(--space-m) 0;
  width:100%;
}

.callout{
  font-size: var(--fs-herocallout);
  color: var(--color-softblue);
  text-align:center;
  max-width: 60ch;
  margin-inline: auto;
}

.hero-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--space-s);
  width:100%;
  padding-inline: var(--space-s);
  box-sizing: border-box;
  flex-wrap: wrap;
}

.hero-left,
.hero-right{
  flex: 1 1 0;
  min-width: 0;
  margin: 0; 
}

.hero-left{
  display:flex;
  flex-direction:column;
  gap: 0.5rem;
  align-items:center;
  text-align:center;
}

.hero-right{
  display:flex;
  justify-content:center;
}

h2.headline{
  font-size: var(--fs-hero-h2);
  line-height: var(--lh-hero-h2);
  max-width: 40ch;
  margin-inline: auto;
  text-wrap: balance;
  margin-top: var(--space-m);
  margin-bottom: 0.25rem; 
}

h1.site-title{
  font-size: var(--fs-hero-h1);
  line-height: var(--lh-hero-h1);
  max-width: 150ch;
  margin-inline: auto;    
  text-wrap: balance;
  color: var(--color-text);
}

/* ✅ Image: prevent it from becoming tiny */
.hero-right img{
  width: 100%;
  height: auto;
  max-width: min(420px, 92vw);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.hero .separator{
  width:60%;
  height:1px;
  margin:2px auto;
  background: var(--color-bridge);
}

/* ====================
   Range-based type scale (doesn't overlap with <=600)
   ==================== */
@media (min-width: 601px) and (max-width: 1366px){
  .intro.hero{
    --fs-hero-h2: clamp(1.25rem, 2.6vw, 1.85rem);
    --fs-hero-h1: clamp(1.15rem, 2.5vw, 1.65rem);
    --fs-herocallout: clamp(1.00rem, 1.5vw, 1.28rem);
  }

  .text-lead-challenge{
    max-width: 85%;
  }

  h2.headline{
    max-width: 90%;
  }

  .intro.hero h1.site-title{
    max-width: 80%;
  }
}

/* ====================
   iPad Pro ONLY (override the general range rules)
   ==================== */
@media 
  (min-width: 834px) and (max-width: 1024px) and (min-height: 1194px),
  (min-width: 1024px) and (max-width: 1366px) and (min-height: 834px) {
  .intro.hero{
    --fs-hero-h2: clamp(1rem, 2.3vw, 1.85rem);
    --fs-hero-h1: clamp(1rem, 2.1vw, 1.65rem);
  }
}

/* ====================
   Max-width breakpoints (largest -> smallest)
   ==================== */

@media (max-width: 1024px){
  .text-lead-subtitle{
    max-width: 85%;
  }
}

.desktop-only{ display: inline; }
@media (max-width: 900px){
  .desktop-only{ display: none; }
}

/* ✅ Only one stacking breakpoint */
@media (max-width: 650px){
  .hero-content{
    flex-direction: column;
  }

  .hero-right{ order: 1; }
  .hero-left { order: 2; margin-top: var(--space-s); }
}

@media (max-width: 600px){
  .intro.hero{
    --fs-hero-h2: clamp(1.25rem, 4.2vw, 1.60rem);
    --fs-hero-h1: clamp(1.15rem, 3.9vw, 1.45rem);
    --fs-herocallout: clamp(1.00rem, 3.0vw, 1.15rem);
  }

  h2.headline,
  .intro.hero h1.site-title{
    max-width: 100%;
    margin-inline: 0;
  }

  h1.site-title{
    margin-bottom: 0.1rem;
  }

  .text-lead-subtitle{
    max-width: 80%;
  }
}

@media (max-width: 480px){
  .text-lead-subtitle{
    max-width: 90%;
  }
  .text-lead-challenge{
    max-width: 90%;
  }
}

@media (max-width: 375px){
  .text-lead-subtitle{
    max-width: 100%;
  }

  h2.headline{
    margin-top: 0; /* only the delta from the 600px rule */
  }
}

/* ==================== CHALLENGE SECTION ==================== */
.challenge-list { list-style: none; padding-left: 0; margin: 0; }
.challenge-list li { text-align: center; margin-bottom: 0.5rem; display: flex; flex-direction: column; align-items: center; }
.challenge-list li p { margin: 0; margin-top: 0.2rem; line-height: var(--lh-body);max-width:85%; }
.challenge-bullet { font-family: var(--ff-base); font-size: 2em; margin-top: 0.2rem; line-height: 1; 
  vertical-align: middle; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-yellow-hover); }

@media (max-width: 1024px){
  .challenge-list li p{
    max-width: 85%;
  }
}
@media (max-width: 480px){
  .challenge-list li p{
    max-width: 100%;
  }
}


/* ==================== FEEDBACK SECTION ==================== */
/* ===========================
   FEEDBACK CAROUSEL (INTRO VARIANT)
   =========================== */
.intro.feedback-carousel { position:relative; margin:var(--space-xs) auto; margin-top:var(--space-xs);  padding:1rem 0 1rem; 
  text-align:center; font-family:var(--ff-heading); color:var(--color-text); box-sizing:border-box; 
  display:block; flex-direction:column; align-items:center; justify-content:center; background: transparent; }

/* Narrow inner "sheet" */
.intro.feedback-carousel .feedback-inner { 
  position: relative; margin: 0 auto;  width: min(560px, 92%);
  max-width: 100%;

  /* reduce the top padding so the quote doesn't start too low */
  padding: 1rem 1.5rem 1.1rem;

  background: linear-gradient(
    to right,
    rgba(255,255,255,0.5),
    rgba(255,255,255,0.7),
    rgba(255,255,255,0.9)
  );
  border-radius: 4px;
  box-sizing: border-box; }

/* Track layout */
.intro.feedback-carousel .feedback-track{
  display: grid;
   min-height: clamp(8rem, 18vw, 8rem); /* stable card height across quotes */
}
/* Feedback items */
/* Each slide fills the card height, whole content hugs the bottom */
.intro.feedback-carousel .feedback-item{
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;

  display: flex;
  flex-direction: column;

  /* KEY CHANGE: push the whole content to the bottom */
  justify-content: flex-end;

  height: 100%;

  /* create "empty space" above for short quotes */
  padding-top: clamp(0.25rem, 0.8vw, 0.9rem);
}

.intro.feedback-carousel .feedback-item.is-active{
  opacity: 1;
  pointer-events: auto;
}

.intro.feedback-carousel .feedback-text{
  font-family: var(--ff-base);
  font-size: var(--fs-feedback);
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin: 0;                 /* IMPORTANT */
}

/* Author stays close to the quote, but still at the bottom area */
.intro.feedback-carousel .feedback-author{
  margin: 0;                 /* IMPORTANT */
  padding-top: var(--space-s);
  font-size: var(--fs-body);
  color: var(--color-text);
}

/* ===================================
   ARROW BUTTONS – ICON-ONLY INTERACTION
   =================================== */

.intro.feedback-carousel .feedback-arrow {  
  font-family: var(--ff-accent); position: absolute; top: 50%; transform: translateY(-50%); 
  border: none; background: transparent; 
  color: var(--color-bridge); cursor: pointer; padding: 0; font-size: 5rem; line-height: 1; width: 2rem; height: 2rem; 
  display: inline-flex; 
  align-items: center; justify-content: center; transition: transform 0.15s ease, font-size 0.15s ease; }

/* Positioning */
.intro.feedback-carousel .feedback-arrow--prev { left: -2.5rem; }
.intro.feedback-carousel .feedback-arrow--next { right: -2.5rem; }

/* Hover: ONLY icon reacts */
.intro.feedback-carousel .feedback-arrow:hover,
.intro.feedback-carousel .feedback-arrow:focus-visible{
  transform: translateY(-50%) scale(1.06); color: var(--color-yellow-hover); font-size: 6rem;
  outline: none;
}

/* Active (click) feedback */
.intro.feedback-carousel .feedback-arrow:active { transform: translateY(-50%) scale(0.95); }

/* ===========================
   DOTS – BRIDGE GREEN STATES
   =========================== */

.intro.feedback-carousel .feedback-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem;}

.intro.feedback-carousel .feedback-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 0px solid rgba(124,149,134, 0.7); 
  background: rgba(124,149,134, 0.5); cursor: pointer; padding: 0; line-height: 0; transition: 
  background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease; }

.intro.feedback-carousel .feedback-dot.is-active { background-color: var(--color-bridge); border-color: var(--color-bridge); }

.intro.feedback-carousel .feedback-dot:hover,
.intro.feedback-carousel .feedback-dot:focus-visible { transform: scale(1.1); outline: none; }

/* ===========================
   RESPONSIVE
   =========================== */
/* FEEDBACK carousel responsive – keep these together */

/* <= 1024px */
@media (max-width: 1024px){
  .intro.feedback-carousel .feedback-arrow{
    top: 60%;
  }
}

/* <= 900px */
@media (max-width: 900px){
  .intro.feedback-carousel .feedback-inner{ width:100%; max-width:100%; padding:1.25rem 1.25rem 1.5rem; }
  .intro.feedback-carousel .feedback-arrow--prev{ left:0.25rem; }
  .intro.feedback-carousel .feedback-arrow--next{ right:0.25rem; }
}

/* <= 600px */
@media (max-width: 600px){
  .intro.feedback-carousel .feedback-arrow{ font-size:1.8rem; top:80%; }

  .intro.feedback-carousel .feedback-arrow:hover,
  .intro.feedback-carousel .feedback-arrow:focus-visible{
    transform: translateY(-50%) scale(1.06);
    color: var(--color-yellow-hover);
    font-size: 2.2rem;
    outline: none;
  }
}


/* ===========================
   FEEDBACK PADDING – TABLETS (iPad)
   =========================== */

@media (max-width: 1024px) {

  /* Inner sheet: significantly reduce vertical padding */
  .intro.feedback-carousel .feedback-inner{
    padding-top: 0.6rem;
    padding-bottom: 0.7rem;
  }

  /* Slide content: reduce artificial top breathing room */
  .intro.feedback-carousel .feedback-item{
    padding-top: clamp(0.2rem, 0.6vw, 0.6rem);
  }

  /* Optional: tighten dots spacing slightly */
  .intro.feedback-carousel .feedback-dots{
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
  }
}

/* ==================== ABOUT/SOLUTION ==================== */
/* ========== bio LAYOUT for BIO ========== */
.bio-inner { display:flex; gap:var(--space-m); align-items:flex-start; flex-wrap:wrap; }
.bio-left  { flex: 2 1 0; min-width: 0; max-width: 640px; }
.bio-right { flex: 1 1 0; display:flex; justify-content:center; }
@media (max-width: 1024px){
  .bio-right { padding-right: var(--space-s); } }
/* MEDIA BLOCK */
.bio-media { display:flex; flex-direction:column; align-items:center; max-width:250px; }
.bio-photo { max-width:250px; width:100%; border-radius:12px; box-shadow:none; transition:transform 0.35s ease; cursor:zoom-in; }
.bio-photo:hover { transform:scale(1.08); }
/* Caption under photos */
.bio-caption { text-align:center; font-family:var(--ff-heading); font-size:var(--fs-body);  line-height: var(--lh-tight); color:var(--color-softblue); margin-top:0.5rem; }
.bio-caption--recap{ margin-top: 2rem; }
/* Optional clickable wrapper for "view full size" */
.bio-photo-link { display:inline-block; }
.bio-inner .text-lead { max-width: 100%; margin-left: var(--space-ls);}
.bio-inner .bio-text { max-width: 100%; margin-left: var(--space-ls);}

/* ========== BIO RESPONSIVE ========== */
@media 
  (min-width: 834px) and (max-width: 1024px)
  and (min-height: 1194px),
  (min-width: 1024px) and (max-width: 1366px)
  and (min-height: 834px) {
.bio-inner .bio-text{
max-width: 90%;
}
}

@media (max-width: 1024px){
  .bio-inner { padding-inline: var(--space-s); }
  .bio-inner .text-lead,
  .bio-inner .bio-text { margin-left: 0; }
}

/* iPads / tablets only (keep a little extra inset there if you like) */
@media (min-width: 601px) and (max-width: 1024px){
  .bio-inner .bio-text,
  .bio-inner .text-lead-bio{
    margin-inline: var(--space-s);
  }
}

/* iPad mini + most tablets (portrait & landscape) */
@media (min-width: 900px) and (max-width: 1024px) {
  .bio-left { 
    margin-left: 0;               
  }

  /* ensure the paragraphs themselves sit evenly */
  .bio-left .bio-text,
  .bio-left .text-lead-bio{
    margin-left: auto;
    margin-right: auto;
  }
}

/* Phones */
@media (max-width: 600px){
  .bio-inner .bio-text,
  .bio-inner .text-lead-bio{
    margin-inline: 0;
    max-width: 100%;
  }
}

@media (max-width:900px) {
  .bio-inner { flex-direction:column; align-items:center; }
  .bio-left { max-width:640px; margin-left: 0; }
  .bio-right { width:80%; justify-content:center; }
  .bio-photo--lg, .bio-photo--sm { max-width:80%; }
}


@media (max-width:480px){
  .bio-caption{ font-size: 0.8rem; }
}


/* ==================== GRIDS FOR ALL SECTIONS GRID3 is FEATURES GRID ==================== */
.grid-3, .grid-benefits, .grid-join { display:grid;  margin-top:var(--space-m); gap:var(--space-s); grid-template-columns:1fr;  } /* mobile = 1 */
.grid-benefits, .grid-join { margin-top:var(--space-xs);}
.grid-3 { padding-bottom:var(--space-xs);}

/* ====================  Transparent container FOR BENEFITS AND JOIN TRANSPARENT SECTIONS==================== */
.intro-transparent.benefits, 
.intro-transparent.how-to-join {padding-top: var(--space-xxs); padding-bottom: var(--space-s); }

.intro-transparent.benefits .grid-benefits, 
.intro-transparent.how-to-join .grid-join { gap:var(--space-sm); margin-bottom:0; margin-top: 0;  }

/* ==================== CARDS FOR FEATURES ==================== */
.card { background:linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.5), rgba(255,255,255,0.9)); 
  border-radius:0px; 
  padding: var(--space-m);
  padding-bottom: var(--space-xxs);
  text-align: center;
  box-shadow: none;
 transition:transform 0.3s ease, box-shadow 0.3s ease; overflow:hidden; }

 .card:hover { transform:scale(1.05); 
  box-shadow:0px -3px 4px rgba(124,149,134,0.25), 0px -1px 1px rgba(124,149,134,0.35), 6px 0px 8px rgba(124,149,134,0.8); }

.features-icon,
.benefits-icon{
  display: block;
  font-family: var(--emoji-icon-font);
  font-size: var(--emoji-icon-size);
  color: var(--emoji-icon-color);
  margin-bottom: var(--space-xs);
}
.features-text { font-family:var(--ff-base); font-size: var(--fs-h2); margin:var(--space-xs) 0; vertical-align:middle; color:var(--color-blue); }

.features .separator { width:50%;height:1px;margin:8px auto;background: var(--color-bridge);}
.features .separator-short { width:30%;height:1px;margin:8px auto;background:var(--color-bridge);}


/* ==================== CARDS FOR BENEFITS & HOW TO JOIN ==================== */
.card-benefits, .card-join { background:linear-gradient(to right, rgba(255,255,255,0.5), rgba(255,255,255,0.7), rgba(255,255,255,0.9)); 
  border-radius:3px; padding: var(--space-m);  padding-bottom: var(--space-xs); text-align:center; box-shadow:none; transition:transform 0.3s ease, box-shadow 0.3s ease; }

.card-benefits:hover, .card-join:hover { transform:scale(1.05); 
  box-shadow:0px -3px 4px rgba(61,83,133,0.25), 0px -1px 1px rgba(61,83,133,0.35), 6px 0px 8px rgba(61,83,133,0.8); }

.step {
  text-decoration: underline;
}


/* ==================== RESPONSIVE GRID MOBILE ALL SECTIONS ==================== */

/* ===========================
   RESPONSIVE
   =========================== */
/* FEEDBACK carousel responsive – keep these together */

/* <= 1024px */
@media (max-width: 1024px){
 .card { background:linear-gradient(to right, rgba(255,255,255,0.4), rgba(255,255,255,0.6), rgba(255,255,255,0.9)); 
 }
.card-benefits, .card-join { background:linear-gradient(to right, rgba(255,255,255,0.7), rgba(255,255,255,0.8), rgba(255,255,255,0.9)); 
  }


}

@media (min-width:600px){ .grid-3, .grid-benefits, .grid-join 
  { grid-template-columns:repeat(2,1fr); } }

@media (min-width:900px){ .grid-3, .grid-benefits, .grid-join { grid-template-columns:repeat(3,1fr); } }

@media (min-width: 600px) and (max-width: 1024px) {

  .card,
  .card-benefits,
  .card-join {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    padding-left: var(--space-m);
    padding-right: var(--space-m);
  }
}

@media (min-width: 600px) and (max-width: 1024px) {
  .card p,
  .card-benefits p,
  .card-join p {
    margin-top: 0.35em;
    margin-bottom: 0.45em;
  }
}

@media (min-width:600px) and (max-width:899px) {
  .grid-benefits,
  .grid-join {
    grid-template-columns: 1fr;
    max-width: 520px;     
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-s);
    padding-bottom: var(--space-xxs);
  }
}


@media (max-width:600px) {
  .card p,
  .card-benefits p,
  .card-join p {
    margin-top: 0.2em;
    margin-bottom: 0.75em;
    line-height: var(--lh-tight);
  }
}


@media (max-width:600px) {
  .features-icon, .benefits-icon {
    margin-top: 0;
    margin-bottom: 0.1em;
  }
}

@media (max-width:375px) {
  .card,
  .card-benefits,
  .card-join {
    padding: var(--space-xxs);
    padding-bottom: var(--space-xxs);
  }
}

@media (max-width:375px) {
 .features h3, .benefits h3, .card h3  {
   margin-top: 0.1rem;
  }
}


/* ==================== FEATURES: tighter spacing on mobile + iPad only ==================== */
@media (max-width: 1024px){
  /* icon -> heading spacing */
  .features .features-icon{ margin-top: 0.25rem; }

  /* remove extra wrapper spacing (if any) */
  .features .features-text{ margin: 0; }

  /* h3 -> paragraph spacing */
  .features .features-text h3{ margin: 0 0 0.3rem 0; }

  /* paragraph spacing inside cards (prevents big default p margin) */
  .features .features-text p{ margin: 0; }

  /* OPTIONAL: if the card itself feels too tall on mobile/iPad, uncomment:
  .features .features-card{ padding: 14px 14px; }
  */
}

/* If you want it *even tighter* on phones only, you can optionally add this: */
@media (max-width: 480px){
  .features .features-icon{ margin-bottom: 0.15rem; }
  .features .features-text h3{ margin-bottom: 0.2rem; }
}


/* ==================== WHY US SECTION ==================== */
/* bullet dot */
.why-bullet { display:block; width:0.5rem; height:0.5rem; border-radius:50%; background: var(--color-yellow-hover); margin:0 auto 0.35rem auto; }
/* Main line (H3) including bullet */
.why-item h3 { font-family:var(--ff-heading); font-size:var(--fs-h3); line-height:1; color:var(--color-blue); margin-bottom:0.1rem; }
/* Supporting text – centered block, centered text */
.why-text { font-family:var(--ff-base); font-size:var(--fs-body); line-height: var(--lh-body); color:var(--color-text); max-width:60%; margin:0.1rem auto 0 auto; text-align:center; }
/* Item spacing */
.why-item{ margin-bottom:var(--space-s); }

/* iPads / tablets */
@media (min-width:600px) and (max-width:1024px) {
  .why-text {
    max-width:90%;
  }
}
/* Phones */
@media (max-width:600px) {
  .why-text {
    max-width:85%;
  }
}


/* ==================== PRICING ==================== */

.pricing-intro{
  font-size: var(--fs-h2);
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pricing-text{
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pricing .text-lead{
  max-width: 90%;
}

.pricing .separator { width:60%;height:1px;margin:8px auto;background:var(--color-bridge);}


@media (max-width: 1024px){
.pricing .text-lead{
  max-width: 95%;
}

.pricing .pricing-text{
    max-width: 90%;
    text-align: center; /* or center */
  }
}

@media (max-width: 768px){
  .pricing-intro{
    max-width: 100%;
    text-align: center; /* or center */
  }
  .pricing-text{
    max-width: 100%;
    text-align: center; /* or center */
  }
}


/* ==================== FAQ ==================== */
.faq-item { border-bottom:1px solid var(--color-bridge); padding:0.25rem 0; }
.faq-item button { font-family:var(--ff-heading); font-size:var(--fs-h2); font-weight:700; text-align:left; color:var(--color-softblue); background:none; border:0; width:100%; cursor:pointer; }
.faq-question { display:flex; gap:0.3rem; align-items:center; cursor:pointer; background:none; border:0; color:var(--color-softblue); font-size: var(--fs-h2); line-height: var(--lh-display); }
.faq-question .plus { font-size:var(--fs-h2); line-height:1; display:inline-block; color:var(--color-softblue); margin-left:0.25rem; }
.faq-answer { display:none; margin-top: var(--space-xs); text-align:left; color:var(--color-text); }
.faq-item.open .faq-answer { display:block; }

.faq-answer p {
  margin-bottom: 0.5rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}


/* === SHUFFLE === */

#shufflebanner{
  scroll-margin-top: 6rem;
}

.shufflebody { background-color:rgba(176,226,214,0.8);
  font-family:'Nemoy',sans-serif;color:#000;border-radius:0;box-shadow:none;width:80%;max-width:1100px;
  text-align:center;box-sizing:border-box; }

/* Instructions */
.shufflebody .instruction { font-family: var(--ff-heading), sans-serif; font-size:clamp(0.7rem,1vw,0.9rem); color:var(--color-white); margin:4px 0; }

/* Separator line */
.shufflebody .separator { width:60%;height:1px;margin:8px auto;background: var(--color-bridge); }

/* Word cloud */
.shufflebody .words { display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0;line-height:1.2;font-size:clamp(1rem,2vw,1.3rem); }
.shufflebody .word { font-weight:300; }

/* Highlighted (chosen) word – .choice */
.shufflebody .choice { font-weight:700;font-size:clamp(0.9rem,2vw,1.2rem);transition:transform 0.3s ease,color 0.3s ease; }
.shufflebody .choice:hover { transform:scale(1.3);color:#4a4b79;z-index:10; }

/* 🔄 Reload Section Wrapper */
.shufflebody .reload-wrapper { display:flex;flex-direction:column;align-items:center;margin-top:1rem;position:relative;box-shadow:none; }

/* 🎯 The Reload Wheel – yellow & white */
.shufflebody .reload-btn { width:60px;height:60px;margin:10px auto;border-radius:50%;background:repeating-conic-gradient(var(--color-accent) 0deg 20deg, #4a4b79 20deg 40deg);border:2px solid var(--color-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.6s ease-in-out;box-shadow:none;position:relative;z-index:2;outline:none;-webkit-tap-highlight-color:transparent; }
.shufflebody .reload-btn:hover { transform:rotate(360deg);box-shadow:none; }

/* Text under wheel – default hidden on large screens (we'll show it on narrow/mobile & touch) */
.shufflebody .reload-label { font-family: var(--ff-heading), sans-serif; font-size:0.75rem; color:var(--color-lila); margin-top:0.3rem; max-width:18rem; text-align:center; line-height:1.3; }

/* 💬 Tooltip — ONLY on true hover devices (desktop / mouse / trackpad) */
@media (hover:hover) and (pointer:fine) {
  .shufflebody .reload-wrapper::after { content:"Press the wheel to shuffle the Motivation Deck once again and pick another word.";position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(10px);
    background:var(--color-accent);color:#fff;padding:0.45rem 0.7rem;border-radius:3px;font-family: var(--ff-heading),sans-serif; font-size:0.8rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.3s ease,transform 0.3s ease;z-index:10;text-align:center; }
  .shufflebody .reload-wrapper::before { content:'';position:absolute;bottom:calc(100% - 4px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--color-accent);opacity:0;transition:opacity 0.3s ease;z-index:10; }
  .shufflebody .reload-wrapper:hover::after,
  .shufflebody .reload-wrapper:hover::before { opacity:1;transform:translateX(-50%) translateY(0); }
}

/* 📱 Mobile / narrow-screen optimization */
@media (max-width:600px) {
  .shufflebody { width:80%;padding:1.75rem 1.25rem;margin:1.5rem auto var(--space-m); }
  .shufflebody .words { gap:6px;margin:16px 0;font-size:clamp(0.9rem,3.2vw,1.1rem); }
  .shufflebody .choice:hover { transform:scale(1.15); }
  .shufflebody .reload-btn { width:52px;height:52px;margin:8px auto; }
  .shufflebody .reload-label { display:block; font-family: var(--ff-heading); font-size: 0.70rem;  color: var(--color-softblue); max-width:80%;margin:0.3rem auto 0;line-height:1.25;word-break:break-word;white-space:normal; }
}

/* 👆 Ensure touch devices (like iPad) also see the instruction text */
@media (hover:none) and (pointer:coarse) {
  .shufflebody .reload-label { display:block;font-size:0.75rem;max-width:80%;margin:0.3rem auto 0;line-height:1.25;word-break:break-word;white-space:normal; }
}

/* General spin animation for all devices */
.shufflebody .reload-btn.spin-once { animation:spinOnce 0.6s ease-in-out; }
@keyframes spinOnce { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* Force no shadow on the shuffle intro container */
.intro.shufflebody { box-shadow:none !important; }

/* Remove tap / focus outlines & highlights on the wheel (extra safety) */
.shufflebody .reload-btn:focus,
.shufflebody .reload-btn:focus-visible,
.shufflebody .reload-btn:active { outline:none;box-shadow:none; }


/* ==================== RECAP SECTION  ==================== */
/* Outer split layout*/
.recap-inner { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-m); flex-wrap:nowrap; }
.recap-left { flex:1 1 40%; max-width:420px; margin-top:var(--space-xxs); }
.recap-right { flex:1 1 60%; display:flex; justify-content:center; }
.recap-media { display:flex; flex-direction:column; align-items:center; max-width:520px;}
.recap-photo { max-width:520px; width:100%; margin-bottom: var(--space-s); border-radius:0px; box-shadow:none; 
  transition:transform 0.35s ease; cursor:zoom-in;  margin-bottom: var(--space-xxs); }
  /* RECAP photo frame */
.recap-photo{
  border-bottom: 2px solid var(--color-bridge);
}
.recap-photo:hover { transform:scale(1.04); }

/* =================== RECAP ==================== */
.recap-list{list-style:none;padding:0; margin-left: var(--space-ls); margin-top: 0;}
.recap-list li{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:var(--space-xs);}
.recap-bullet{font-family:var(--ff-base);font-size:2em; margin-bottom:var(--space-xxs);line-height:1;
  vertical-align:middle;width:0.5rem;height:0.5rem;border-radius:50%;background: var(--color-yellow-hover);
}
.recap-bullet{
  margin-top: clamp(0.15rem, 0.5vw, 0.25rem);
  margin-bottom: var(--space-xxs);
}

.recap-item h3 { font-family:var(--ff-heading); font-size:var(--fs-h3); line-height:1; color:var(--color-blue); margin-bottom:0.1rem; }
.recap-sub{
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color:var(--color-text); 
  margin:0 auto;
  max-width: 100%;
  text-align: center;
}

.recap .separator { width:50%;height:1px;margin:8px auto;background:var(--color-bridge)}


/* ==================== RECAP / MODAL STYLING ==================== */
.modal{display:none;position:fixed;z-index:9999;inset:0;background-color:rgba(124,149,134,0.7);
  align-items:center;justify-content:center;padding:20px;}

.modal.open{display:flex;}
.modal-content{max-width:95%;max-height:90vh;object-fit:contain;
  box-shadow:2px 2px 8px rgba(124,149,134,0.3),-2px 2px 5px rgba(124,149,134,0.3),2px -2px 5px rgba(124,149,134,0.3),8px 0px 20px rgba(124,149,134,0.6);}
.close{position:absolute;top:18px;right:22px;background:transparent;border:0;color:#000;font-size:32px;cursor:pointer;line-height:1;}
.close:focus{outline:2px solid var(--color-white);}



/* RECAP responsive */

/* Tablet-ish: keep columns vertically centered (only if you really want that look) */
@media (min-width:768px) and (max-width:1180px){
  .recap-inner{ align-items:center; }
}

/* <= 1024px */
@media (max-width:1024px){
  .recap-sub{ max-width:100%; }
  .recap-list{ margin-left:0; }
  .recap-media{ margin-top:0; }
}

/* <= 900px (stacked layout) */
@media (max-width:900px){
  .recap-inner{ flex-direction:column; align-items:center; gap:var(--space-xs); }
  .recap-left{ max-width:640px; width:100%; margin-top:var(--space-s); }
  .recap-right{ width:100%; justify-content:center; margin-top:0; } /* single source of truth */
  .recap-media{ max-width:520px; }
  .recap-photo{ max-width:min(520px, calc(100vw - 3rem)); }
}

/* <= 600px */
@media (max-width:600px){
  /* Decide what you want here:
     - if you want it truly centered, keep margin-left:0
     - if you want a deliberate indent, keep var(--space-m) */
  .recap-sub{ max-width:95%; text-align:center; }
  .recap-bullet{ margin-top:var(--space-xxs); }
  .recap-list{
    margin-left: 0;          /* remove the shift */
    margin-right: 0;
    padding-left: 0;         /* keep clean */
    padding-right: 0;
  }
}

/* iPad Pro 11" & 12.9" overrides (keep last so it wins) */
@media 
  (min-width:834px) and (max-width:1024px) and (min-height:1194px),
  (min-width:1024px) and (max-width:1366px) and (min-height:834px){
  .recap-list{ margin-top:0; }
  .recap-left{ margin-top:0; margin-left:var(--space-s); }
  .recap-media,
  .recap-photo{ max-width:380px; margin-top:var(--space-xxs); }
}









/* ==================== BACKGROUND SLIDESHOW ==================== */
#slideshow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.slide { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 4s ease-in-out; /* 4 sec crossfade */ }

/* ==================== FOOTER LANDING ==================== */
.footer-spacer { height: 40px; /* empty space above footer */ }
.site-footer {
  position: relative;
  background-color: var(--color-bridge);
  color: var(--color-white);
  text-align: center;
  font-size: var(--fs-footer);
  line-height: var(--lh-footer);          
  padding: 1.1rem 1rem; 
  margin-top: var(--space-l);         
}


/* Every line in the footer behaves consistently */
.site-footer .footer-line{
  margin: 0.1rem 0;
  color: var(--color-white);
  
}

/* First two lines even tighter */
.site-footer .footer-line:nth-child(1),
.site-footer .footer-line:nth-child(2){
  margin-bottom: 0.05rem;
}

/* The small “legal/meta” block */
.site-footer .footer-meta{
  font-size: var(--fs-footer-meta);
  opacity: 0.95;
  margin-top:var(--space-xs);
}

/* Link row (replaces the inline style you had) */
.site-footer .footer-actions{
  margin-top: 0.35rem;
  line-height: 1.1;
}

/* Links */
.site-footer .footer-link{
  text-decoration: underline;
  color: var(--color-white);
}

@media (max-width: 1024px) {
  :root {
    --fs-footer: 0.78rem;
    --fs-footer-meta: 0.72rem;
    --lh-footer: 1.15;
  }

  .site-footer {
    padding: 0.9rem 0.85rem;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-footer: 0.70rem;
    --fs-footer-meta: 0.68rem;
    --lh-footer: 1.2;
  }

  .site-footer {
    padding: 0.65rem 0.65rem;
  }
}