/*
  PALETTE HISTORY
  ── OLD (purple era) ──────────────────────────
  primary:        #5B4B8A
  primary-dark:   #463a6d
  secondary:      #C17A54  (terracotta)
  bg:             #FAF3EA
  rgba primary:   rgba(91,75,138,…)
  rgba secondary: rgba(193,122,84,…)
  rgba bg:        rgba(250,243,234,…)
  ── NEW (warm red) ────────────────────────────
  primary:        #FF3737
  primary-dark:   #CC2B2B
  secondary:      #FFC193
  accent-primary: #FF8383
  bg:             #FFEDCE
  rgba primary:   rgba(255,55,55,…)
  rgba secondary: rgba(255,193,147,…)
  rgba bg:        rgba(255,237,206,…)
*/
*{box-sizing:border-box}
body{margin:0}
a{color:#FF3737}
a:hover{color:#CC2B2B}

/* landing page decorative keyframes */
@keyframes drift1{0%{transform:translate(0,0)}50%{transform:translate(8px,-6px)}100%{transform:translate(0,0)}}
@keyframes drift2{0%{transform:translate(0,0)}50%{transform:translate(-7px,5px)}100%{transform:translate(0,0)}}
@keyframes drift3{0%{transform:translate(0,0)}50%{transform:translate(6px,7px)}100%{transform:translate(0,0)}}
@keyframes bob{0%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}100%{transform:translateY(0) rotate(-3deg)}}
@keyframes drift4{0%{transform:translate(0,0)}50%{transform:translate(-6px,-7px)}100%{transform:translate(0,0)}}

/* nav dropdown hover-link background */
.nav-drop-link:hover{background:rgba(255,55,55,0.08)}

/* generic style-hover conversions used across pages */
.hover-purple-bg:hover{background:rgba(255,55,55,0.13)}
.hover-purple-dark:hover{background:#CC2B2B}
.hover-outline:hover{background:rgba(38,32,25,0.05)}
.hover-border-light:hover{border-color:rgba(255,237,206,0.4)}
.hover-border-purple:hover{border-color:rgba(255,55,55,0.4)}
.hover-border-purple-35:hover{border-color:rgba(255,55,55,0.35)}

/* form focus states */
.form-input:focus{border-color:#FF3737;outline:none;background:#fff}
.form-select:focus{border-color:#FF3737;outline:none}

/* form validation */
.form-input.invalid,.form-select.invalid{border-color:#B85A4A;background:#fff5f2}
.form-err{display:none;font-size:12px;color:#B85A4A;line-height:1.4;margin-top:-2px}
.form-err.show{display:block}

/* doubts accordion button reset */
.doubt-btn{width:100%;display:flex;align-items:center;gap:12px;padding:13px 16px;background:transparent;border:none;cursor:pointer;text-align:left;font-family:'Inter',sans-serif}

/* resources filter buttons */
.filter-btn{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:30px;cursor:pointer}

/* ------------------------------------------------------------------
   Global responsive rules.
   Pages use heavy inline styles (grid-template-columns, padding,
   font-size). These media rules override the inline values because
   inline styles lose against later declarations with equal or higher
   specificity — so we duplicate the selector (e.g. `html body section[style]`)
   and use `!important` to force the mobile layout. Keeps HTML untouched.
------------------------------------------------------------------ */

img{max-width:100%;height:auto}

/* Placeholder trust bar — hidden until real logos land post-pilot */
.trusted-by{display:none !important}

/* Side-by-side compare — desktop uses the wide table; mobile uses card-per-track. */
.compare-mobile{display:none}
.compare-mobile .cmp-card{background:#fff;border:1px solid rgba(38,32,25,0.1);border-radius:16px;overflow:hidden;margin-bottom:16px}
.compare-mobile .cmp-head{color:#ffffff;font-size:12px;font-weight:700;letter-spacing:0.06em;padding:10px 18px}
.compare-mobile dl{margin:0;padding:6px 18px 14px;display:grid;grid-template-columns:1fr;gap:0}
.compare-mobile dt{margin-top:12px;font-size:11.5px;font-weight:600;letter-spacing:0.05em;color:#8a8072;text-transform:uppercase}
.compare-mobile dd{margin:4px 0 0;font-size:14.5px;color:#262019;line-height:1.5}
@media (max-width: 900px){
  .compare-desktop{display:none !important}
  .compare-mobile{display:block !important}
}

/* --- Mobile hamburger + drawer (JS-injected) --- */
.mobile-menu-toggle{
  display:none;
  position:relative;
  width:38px;height:38px;
  background:transparent;border:1px solid rgba(38,32,25,0.15);
  border-radius:8px;padding:0;cursor:pointer;z-index:60;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.mobile-menu-toggle span{
  display:block;width:18px;height:2px;background:#262019;border-radius:2px;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
body.nav-open .mobile-menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .mobile-menu-toggle span:nth-child(2){opacity:0}
body.nav-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-menu-overlay{
  display:none;
  position:fixed;inset:70px 0 0 0;
  background:#ffffff;
  z-index:55;
  padding:24px 24px 40px;
  flex-direction:column;gap:6px;
  overflow-y:auto;
  border-top:1px solid rgba(38,32,25,0.09);
}
.mobile-menu-link{
  font-family:'Inter',sans-serif;font-size:17px;font-weight:500;
  color:#262019;text-decoration:none;
  padding:14px 6px;border-bottom:1px solid rgba(38,32,25,0.08);
  box-sizing:border-box;
}
.mobile-menu-group{
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  color:#FFC193;padding:20px 6px 6px;border-bottom:none;
}
.mobile-menu-sublink{padding-left:14px}
.mobile-menu-cta{
  margin-top:20px;background:#FF3737;color:#ffffff !important;
  font-weight:600;border-radius:8px;text-align:center;border-bottom:none;
  padding:14px 18px;box-sizing:border-box;width:100%;display:block;
}
body.nav-open{overflow:hidden}
body.nav-open .mobile-menu-overlay{display:flex}

@media (max-width: 900px){
  .mobile-menu-toggle{display:flex}
  /* Hide EVERY direct child of the header on mobile, then re-show only the logo container and the toggle. */
  header > *{display:none !important}
  header > *:first-child{display:flex !important}
  header > .mobile-menu-toggle{display:flex !important}
  /* Inside the surviving first child, hide the nav; keep logo visible. */
  header .site-nav,
  header nav.site-nav{display:none !important}
  /* Header layout tightens up */
  header{padding:14px 20px !important}
}

@media (max-width: 900px){
  /* Collapse any 2-, 3-, 4-, 5-column grid to a single column */
  html body section[style*="grid-template-columns"],
  html body div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  /* Softer horizontal padding on section wrappers */
  html body section[style*="padding"],
  html body header[style*="padding"],
  html body footer[style*="padding"],
  html body main[style*="padding"]{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  /* Big headings scale down */
  html body h1[style]{font-size:clamp(34px,8.5vw,46px) !important;line-height:1.1 !important}
  html body h2[style]{font-size:clamp(24px,5.5vw,30px) !important;line-height:1.22 !important}
  /* Header + footer wrap */
  header.site-header,
  footer.site-footer > div{flex-wrap:wrap !important;gap:14px !important}
  nav.site-nav{gap:16px !important;flex-wrap:wrap}
  /* The Brain doc sidebar collapses to top */
  .brain-sidebar{position:static !important;max-height:none !important;border-right:none !important;border-bottom:1px solid rgba(38,32,25,0.09) !important;padding:20px !important}
  /* Hero on mobile: shorten the 340vh sticky scroll track to ~200vh so the base→pro
     cub transition still plays but finishes within one comfortable scroll instead of
     leaving a big dead gap. Sticky + JS scroll effect kept intact. */
  /* Hero: shorter scroll track (was 340vh) so the base→pro swap finishes fast and
     doesn't leave a huge dead scroll gap before the next section. */
  div[data-hero-track]{height:140vh !important}
  div[data-hero-sticky]{min-height:auto !important;padding:32px 0 20px !important}
  /* Hero cub names collide at narrow widths — hide entirely on mobile */
  [data-hero-fx="label"],
  [data-hero-fx="proLabel"]{display:none !important}
  /* "It notices / It decides / It remembers" trio: stack top-down, hide vertical dividers */
  .brain-trio{flex-direction:column !important;gap:18px !important}
  .brain-trio > div[style*="width:1px"]{display:none !important}
  /* Entry steps on internships page: hide connector line entirely on mobile — steps stack clean */
  .entry-line-h,
  .entry-line-v{display:none !important}
  /* Workforce agent cards: 2-up grid on mobile instead of stacking to 1 */
  html body div.workforce-grid{grid-template-columns:1fr 1fr !important;gap:12px !important}
  /* Meeting preview mock (the fake call UI with Max/Sam/Ellie/You tiles) stays 2-up on mobile */
  html body div.meeting-preview-tiles{grid-template-columns:1fr 1fr !important}
  /* "After the call" strip: hide vertical divider bars between items on mobile */
  html body div.after-call > span[style*="width:1px"]{display:none !important}
  /* Footer: logo full-width on top, then link groups in 2-column grid.
     Higher specificity than the generic `div[style*="grid-template-columns"]` rule above. */
  html body footer div.footer-grid{grid-template-columns:1fr 1fr !important;gap:28px 20px !important}
  html body footer div.footer-grid > div:first-child{grid-column:1 / -1 !important;margin-bottom:4px}
  /* Force any 340px-locked media box to fluid */
  html body div[style*="height:340px"]{height:auto !important;min-height:220px !important;aspect-ratio:1/1}
  /* Bullet rows (disc + text via `grid-template-columns:auto 1fr`) must stay 2-col on mobile —
     the generic collapse-to-1fr rule above would stack the disc above the text. */
  html body div[style*="grid-template-columns:auto 1fr"]{
    grid-template-columns:auto 1fr !important;
    gap:10px !important;
    align-items:start !important;
  }
  /* Center the 6px disc against first text line (14.5px * 1.55 line-height). */
  html body div[style*="grid-template-columns:auto 1fr"] > span:first-child{
    margin-top:9px !important;
    flex-shrink:0;
  }
  /* Prevent side scroll from stray wide children */
  html body{overflow-x:hidden}
}

/* Hero pill (FREE PILOT badge) — keep tag inline on mobile */
a[href="#contact-sales"] > span:first-child{white-space:nowrap}
.hero-pill-short{display:none}
@media (max-width: 600px){
  .hero-pill-full{display:none !important}
  .hero-pill-short{display:inline !important}
}

/* Balance hero H1 so words don't orphan awkwardly */
h1[style]{text-wrap:balance}

@media (max-width: 600px){
  html body section[style],
  html body header[style],
  html body footer[style],
  html body main[style]{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  html body h1[style]{font-size:clamp(32px,9vw,44px) !important}
  html body h2[style]{font-size:clamp(22px,6vw,28px) !important}
  /* Hide the extra dropdown chevrons on nav to save room */
  nav.site-nav [data-nav-dropdown] span[style*="border-top:5px"]{display:none !important}
  /* Buttons full width in tight columns */
  html body a[style*="padding:11px 22px"],
  html body a[style*="padding:10px 21px"],
  html body button[style*="padding:10px 22px"]{display:block;text-align:center;width:100%}
}