/* ── YourGuru Landing – Design System ──────────────────────── */

/* Self-hosted DM Sans (variable) — loads instantly, no font-swap flash */
@font-face{
  font-family:"DM Sans";
  font-style:normal;
  font-weight:100 1000;
  font-display:swap;
  src:url("/assets/fonts/dm-sans.woff2") format("woff2");
}

/* 1. TOKENS ─────────────────────────────────────────────────── */
:root {
  --blue-50:    #EFF6FF;
  --blue-100:   #DBEAFE;
  --blue-200:   #BFDBFE;
  --blue-500:   #3B82F6;
  --blue-600:   #2563EB;
  --blue-700:   #1D4ED8;
  --blue-brand: #1E4DB7;
  --blue-dark:  #0F2B6B;

  --orange:     #E8461C;
  --gold-400:   #FBBF24;
  --gold-500:   #F59E0B;
  --gold-600:   #D97706;

  --neutral-50:  #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;

  --bg:         #FFFFFF;
  --bg-alt:     #EDF2FF;
  --border:     #E5E7EB;
  --text:       #1F2937;
  --muted:      #6B7280;
  --white:      #FFFFFF;

  --shadow-0:   0 1px 3px rgba(0,0,0,.08);
  --shadow-1:   0 4px 16px rgba(0,0,0,.08);
  --shadow-2:   0 8px 32px rgba(0,0,0,.10);
  --shadow-3:   0 16px 48px rgba(0,0,0,.14);
  --shadow-nav: 0 4px 24px rgba(30,77,183,.16), 0 1px 4px rgba(0,0,0,.06);
  --shadow-card:      0 2px 12px rgba(30,77,183,.08);
  --shadow-card-hover:0 8px 32px rgba(30,77,183,.16);

  --font-base:     'DM Sans', system-ui, sans-serif;
  --font-emphasis: 'DM Sans', system-ui, sans-serif;
  --transition:     220ms ease;
  --transition-slow:400ms ease;
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-pill:999px;
}

/* 2. RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* the hidden attribute must always win (e.g. JS toggling "Coming soon") */
/* overflow-x:clip prevents horizontal scroll WITHOUT breaking position:sticky (overflow-x:hidden would).
   The hidden value is a fallback for older browsers that don't support clip. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip}
body{
  font-family:var(--font-base);font-size:16px;line-height:1.6;
  color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}
svg{display:block}
.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;
}

/* 3. UTILITIES ──────────────────────────────────────────────── */
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.section{padding:56px 0}
.section-alt{background:var(--bg-alt);border-top:1px solid #D8E4FF;border-bottom:1px solid #D8E4FF}

.section-header{text-align:center;margin-bottom:36px}
.section-header h2{
  font-family:var(--font-emphasis);font-size:clamp(28px,4vw,42px);
  font-weight:800;line-height:1.2;color:var(--neutral-900);margin:12px 0;
}
.section-header p{font-size:18px;color:var(--muted);max-width:560px;margin:0 auto}

.section-label{
  display:inline-block;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-brand);background:var(--blue-50);
  padding:6px 14px;border-radius:var(--radius-pill);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;border-radius:var(--radius-pill);
  font-size:15px;font-weight:700;font-family:var(--font-base);
  transition:transform var(--transition),box-shadow var(--transition),
             background var(--transition);cursor:pointer;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:var(--blue-brand);color:var(--white);
  box-shadow:0 4px 16px rgba(30,77,183,.3);
}
.btn-primary:hover{background:#1744a3;box-shadow:0 8px 24px rgba(30,77,183,.4)}

.btn-accent{
  background:var(--orange);color:var(--white);
  box-shadow:0 4px 16px rgba(232,70,28,.3);
}
.btn-accent:hover{background:#d13d17;box-shadow:0 8px 24px rgba(232,70,28,.4)}

.btn-ghost{background:transparent;color:var(--neutral-700);font-weight:600}
.btn-ghost:hover{color:var(--blue-brand);background:var(--blue-50)}

.btn-outline{
  background:transparent;color:var(--blue-brand);
  border:2px solid var(--blue-200);
}
.btn-outline:hover{border-color:var(--blue-brand);background:var(--blue-50)}

.btn-outline-white{
  background:rgba(255,255,255,.15);color:var(--white);
  border:2px solid rgba(255,255,255,.5);backdrop-filter:blur(8px);
}
.btn-outline-white:hover{background:rgba(255,255,255,.28)}

.btn-lg{padding:16px 36px;font-size:17px}
.btn-sm{padding:8px 18px;font-size:13px}

/* 4. COOKIE BANNER ──────────────────────────────────────────── */
.cookie-banner{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:9999;background:var(--neutral-900);color:var(--neutral-200);
  border-radius:var(--radius-xl);padding:16px 24px;
  display:flex;align-items:center;gap:20px;
  max-width:680px;width:calc(100% - 48px);box-shadow:var(--shadow-3);
}
.cookie-banner p{font-size:14px;color:var(--neutral-300)}
.cookie-banner a{color:var(--gold-500);text-decoration:underline}
.cookie-actions{display:flex;gap:12px;flex-shrink:0}
.btn-text{color:var(--neutral-400);font-size:14px;font-weight:500;padding:8px 12px}
.btn-text:hover{color:var(--white)}

/* 5. NAVIGATION — compact, fixed-size (industry standard ~68px) ── */
.site-nav{
  background:#fff;border-radius:16px;
  box-shadow:0 10px 30px -14px rgba(31,79,214,.22),0 1px 0 rgba(0,0,0,.02);
  display:flex;align-items:center;gap:8px;
  min-height:68px;
  padding:0 16px 0 30px;
  position:relative;z-index:3;
}
.site-nav .nav-links{
  display:flex;align-items:center;gap:28px;flex:1;
  list-style:none;margin:0;padding:0;
}
.nav-item{
  display:flex;align-items:center;gap:8px;
  font-family:"DM Sans","Segoe UI",system-ui,sans-serif;font-weight:500;font-size:16px;
  color:#1d2a4d;text-decoration:none;white-space:nowrap;
  transition:transform .2s,opacity .2s;
}
.nav-item:hover{transform:translateY(-1px);opacity:.85}
.nav-ic{width:19px;height:19px;flex:none}   /* Lucide line icons */
.nav-login{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"DM Sans","Segoe UI",system-ui,sans-serif;font-weight:500;font-size:16px;
  color:#1d2a4d;text-decoration:none;margin-right:6px;white-space:nowrap;
  transition:color .2s;
}
.nav-login:hover{color:#1f4fd6}
.nav-login-ic{display:none;width:22px;height:22px;flex:none}   /* icon shown only in the mobile drawer */
.nav-login .ic-logout{display:none}                            /* logout icon appears only when signed in */
.nav-cta{
  display:flex;align-items:center;gap:8px;
  background:#1f4fd6;color:#fff;font-family:"DM Sans","Segoe UI",system-ui,sans-serif;
  font-weight:600;font-size:15px;border:none;border-radius:12px;
  padding:11px 20px;text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 8px 18px -8px rgba(31,79,214,.55);
  transition:background .2s,transform .2s;
}
.nav-cta:hover{background:#1a44bd;transform:translateY(-2px)}
.nav-cta-ic{height:18px;width:auto}

/* Get the App — secondary nav button + popover */
.getapp{position:relative;display:flex}
.nav-getapp{
  display:inline-flex;align-items:center;gap:7px;
  background:#eef3ff;color:#1f4fd6;border:1px solid #d6e2ff;border-radius:12px;
  padding:10px 16px;font-family:"DM Sans","Segoe UI",system-ui,sans-serif;
  font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;
  transition:background .2s,transform .2s;
}
.nav-getapp:hover{background:#e2ecff;transform:translateY(-1px)}
.nav-getapp svg{width:18px;height:18px}
/* popover wrapper — anchored under the button on desktop */
.getapp-pop{position:absolute;top:calc(100% + 12px);right:0;z-index:60}
.getapp-card{
  position:relative;width:300px;
  background:#fff;border-radius:18px;padding:20px 18px 18px;text-align:center;
  box-shadow:0 26px 60px -22px rgba(31,79,214,.45),0 2px 8px rgba(0,0,0,.06);
}
.getapp-card::before{content:"";position:absolute;top:-6px;right:46px;width:13px;height:13px;
  background:#fff;transform:rotate(45deg);box-shadow:-2px -2px 4px rgba(31,79,214,.06)}
.getapp-close{
  position:absolute;top:8px;right:10px;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
  color:#8b97b5;background:none;border:none;cursor:pointer;transition:background .15s,color .15s;
}
.getapp-close:hover{background:#f0f3f9;color:#1d2a4d}
.getapp-title{font-family:"DM Sans",system-ui,sans-serif;font-weight:700;font-size:16px;color:#15327f;margin:0 0 10px}
.getapp-soon,.footer-app-soon{
  display:inline-block;background:#eef4fd;color:#1f4fd6;border-radius:999px;
  padding:6px 14px;font-family:"DM Sans",system-ui,sans-serif;font-weight:600;font-size:13px;
}
.getapp-soon{margin:0 0 12px}    /* popover: stacked above the QR */
.footer-app-soon{margin:0}       /* footer: in a row, so it stays vertically centered with the badges */
.getapp-qr{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px}
.getapp-qr img{width:124px;height:124px;border-radius:10px;display:block}
.getapp-qr span{font-family:"DM Sans",system-ui,sans-serif;font-weight:500;font-size:12px;color:#5b6b8c}
.getapp-badges{display:flex;flex-direction:column;gap:10px;align-items:center}
/* official store badges — stacked, so align by WIDTH (edges line up) */
.mini-badge{display:block;width:172px;text-decoration:none;transition:transform .2s,opacity .2s}
.mini-badge img{width:100%;height:auto;display:block}
.mini-badge:hover{transform:translateY(-1px)}
.store-badge.is-soon,.mini-badge.is-soon{opacity:.7;cursor:default}
.store-badge.is-soon:hover,.mini-badge.is-soon:hover{transform:none}

/* Mobile toggle */
.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  padding:8px;background:none;border:none;cursor:pointer;
}
.nav-toggle span{
  display:block;width:24px;height:2px;background:#1d2a4d;border-radius:2px;
  transition:transform var(--transition),opacity var(--transition);
}
/* hamburger → X when the drawer is open */
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* menu wrapper: inline on desktop (acts as the flex row), drawer on mobile */
.nav-menu{display:flex;align-items:center;gap:8px;flex:1}
.nav-applink{display:none}

/* App store badges — footer & hero */
.store-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* official App Store / Google Play badges (image artwork) */
.store-badge{
  display:inline-flex;border-radius:10px;overflow:hidden;
  transition:transform var(--transition),opacity var(--transition);
}
.store-badge img{height:48px;width:auto;display:block}
.store-badge:hover{transform:translateY(-2px)}
/* keyline so the black badges read on the dark footer */
.footer-store-badges .store-badge{border:1px solid rgba(255,255,255,.22)}
.footer-store-badges{
  display:flex;justify-content:center;align-items:center;gap:16px;
  padding:24px 0 20px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:8px;
}

/* 6. HERO BAND (nav + hero + feature cards) ──────────────────── */
.hero-band{
  position:relative;overflow:hidden;
  /* continues the hero image's bottom edge so the cards sit seamlessly:
     near-white centre, light-blue toward the right (matches the Canva render) */
  background:linear-gradient(96deg,#eef3fc 0%,#fbfbfc 42%,#f4f7fd 66%,#d6e8fb 100%);
}
.hero-band--bar{background:linear-gradient(180deg,#fefeff,#eef4fd);padding-top:18px}
.hero-band--bar .wrap{padding:0 28px 24px}

.wrap{
  position:relative;z-index:2;
  max-width:1320px;margin:0 auto;
  padding:0 28px;
}

/* Hero banner — single image WITH its own background, full-bleed from the page top */
.hero-band picture{display:block;width:100%}   /* <picture> is inline by default; make it block so width:100% on the img resolves to the viewport */
.hero-banner{display:block;width:100%;height:auto}
/* Desktop: the banner has a big empty sky band above the artwork (rocket nose starts ~9.1vw down).
   Pull the banner up (top sky clipped by .hero-band overflow:hidden) so the artwork sits just below
   the nav. Scales with width — keeps a constant ~14px gap to the nav instead of a growing one.
   The mascot's base is untouched (we only crop empty sky from the top). */
@media(min-width:1025px){.hero-banner{margin-top:calc(100px - 9.1vw)}}

/* Interactive nav — sticky: floats over the hero at the top, sticks as a solid bar on scroll */
.hero-nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:18px 20px 0;transition:padding .25s ease}
.hero-nav .wrap{max-width:none;padding:0}        /* nav pill runs nearly full-width, not capped to 1320 */
.site-nav{transition:border-radius .25s ease,box-shadow .25s ease,min-height .25s ease}

/* Logo (hidden at the top; appears once stuck, before the Home link) */
.nav-logo{display:none;align-items:center;flex:none;margin-right:14px;text-decoration:none}
.nav-logo img{height:88px;width:auto;flex:none;display:block}   /* full logo.png, not shrunk */

/* Stuck state: full-width solid bar + logo */
.hero-nav.stuck{padding:0}
.hero-nav.stuck .site-nav{border-radius:0;min-height:62px;box-shadow:0 4px 20px -6px rgba(15,23,42,.18)}
.hero-nav.stuck .nav-logo{display:flex}

/* offset anchor jumps so the fixed nav doesn't cover section headings */
.section{scroll-margin-top:84px}

/* 7. FEATURE CARDS — even 3×2 grid, horizontal cards (icon left, text right) ── */
.cards-wrap{
  position:relative;z-index:2;
  padding:0 3.6vw 2.2vw;         /* side margins (~64px) — wide cards like the design */
  margin-top:-1vw;               /* lift cards slightly over the banner's empty bottom clouds (clear of the mascot) */
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw}     /* 3-up → roomier cards, single-line headings */
.card{
  background:#fff;border-radius:2vw;                   /* ~35px */
  box-shadow:0 1.2vw 2.6vw -1.1vw rgba(31,79,214,.22);
  display:flex;align-items:center;gap:1.4vw;           /* icon → text gap */
  padding:1.8vw 1.6vw;
  transition:transform .25s,box-shadow .25s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 1.8vw 3vw -1vw rgba(31,79,214,.32)}
.ic{
  width:5vw;height:5vw;border-radius:50%;flex:none;   /* ~80px circle */
  display:flex;align-items:center;justify-content:center;
}
.ic svg{width:2.6vw;height:2.6vw;fill:#fff}
.card-tx{display:flex;flex-direction:column;gap:0.25vw;min-width:0}
.card h3{
  font-family:"DM Sans","Segoe UI",system-ui,sans-serif;
  font-size:clamp(15px,1.55vw,26px);font-weight:700;
  color:#001c70;line-height:1.16;margin:0;letter-spacing:-0.01em;
}
.card p{
  font-family:"DM Sans","Segoe UI",system-ui,sans-serif;
  font-size:clamp(12px,0.95vw,17px);color:#33457c;font-weight:500;   /* navy, lighter weight */
  line-height:1.24;margin:0.25vw 0 0;
}
.bg-yellow{background:#fdb705}
.bg-green{background:#77bd2a}
.bg-teal{background:#0fb5ae}
.bg-purple{background:#9a61d8}
.bg-sky{background:#3896f9}
.bg-pink{background:#ff5989}

/* 8a. WHY PARENTS CHOOSE ──────────────────────────────────── */
.why-parents-section{
  background:var(--bg);
  padding-top:64px;
  padding-bottom:56px;
}
.why-parents-header{margin-bottom:40px}
.why-parents-header p{
  max-width:720px;
  font-size:19px;
  line-height:1.7;
}
.why-parents-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.why-parent-card{
  min-height:260px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  padding:32px 26px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "icon title"
    "copy copy";
  column-gap:14px;
  row-gap:16px;
  align-items:center;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.why-parent-card:hover{
  transform:translateY(-6px);
  border-color:var(--blue-200);
  box-shadow:var(--shadow-card-hover);
}
.why-parent-icon{
  grid-area:icon;
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px -14px rgba(15,23,42,.28);
}
.why-parent-icon svg{width:26px;height:26px}
.why-parent-icon-sky{background:#EFF6FF;color:var(--blue-brand)}
.why-parent-icon-gold{background:#FEF3C7;color:var(--gold-600)}
.why-parent-icon-green{background:#DCFCE7;color:#16A34A}
.why-parent-card h3{
  grid-area:title;
  font-family:var(--font-emphasis);
  font-size:19px;
  font-weight:800;
  line-height:1.24;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:var(--neutral-900);
}
.why-parent-card p{
  grid-area:copy;
  margin:0;
  font-size:16px;
  color:var(--muted);
  line-height:1.75;
}

/* 8b. DAILY LEARNING FLOW ─────────────────────────────────── */
.learning-flow-section{
  background:linear-gradient(135deg,#0F2B6B 0%,#1E4DB7 58%,#2563EB 100%);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.learning-flow-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 12%,rgba(251,191,36,.18) 0%,transparent 34%),
    radial-gradient(circle at 86% 78%,rgba(255,255,255,.10) 0%,transparent 36%);
  pointer-events:none;
}
.learning-flow-section>.container{position:relative;z-index:1}
.learning-flow-header .section-label{background:rgba(255,255,255,.14);color:var(--white)}
.learning-flow-header h2{color:var(--white)}
.learning-flow-header p{max-width:760px;color:rgba(255,255,255,.82)}
.learning-flow-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.learning-flow-card{
  min-height:235px;
  background:var(--white);
  color:var(--neutral-900);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-xl);
  box-shadow:0 20px 48px -30px rgba(2,8,23,.45);
  padding:30px 28px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "number title"
    "copy copy";
  column-gap:18px;
  row-gap:24px;
  align-items:center;
  transition:transform var(--transition),box-shadow var(--transition);
}
.learning-flow-card:hover{transform:translateY(-6px);box-shadow:0 28px 58px -32px rgba(2,8,23,.55)}
.learning-flow-number{
  grid-area:number;
  width:56px;
  height:56px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-emphasis);
  font-size:24px;
  font-weight:800;
}
.learning-flow-number.flow-blue{background:var(--blue-50);color:var(--blue-brand)}
.learning-flow-number.flow-gold{background:#FEF3C7;color:var(--gold-600)}
.learning-flow-number.flow-green{background:#DCFCE7;color:#16A34A}
.learning-flow-card h3{
  grid-area:title;
  font-family:var(--font-emphasis);
  font-size:19px;
  font-weight:800;
  line-height:1.25;
  color:var(--neutral-900);
}
.learning-flow-card p{
  grid-area:copy;
  margin:0;
  font-size:16px;
  color:var(--muted);
  line-height:1.7;
}
.learning-flow-card p strong{color:var(--blue-dark);font-weight:800}

/* 8. HOW IT WORKS ──────────────────────────────────────────── */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:32px;position:relative;
}
.steps::before{
  content:'';position:absolute;
  top:28px;left:calc(16.67% + 20px);right:calc(16.67% + 20px);
  height:2px;
  background:linear-gradient(90deg,var(--blue-200),var(--blue-500),var(--blue-200));
  z-index:0;
}
.step{
  text-align:center;padding:36px 24px;
  background:var(--white);border-radius:var(--radius-lg);
  border:1px solid var(--border);box-shadow:var(--shadow-card);
  position:relative;z-index:1;
  transition:transform var(--transition),box-shadow var(--transition);
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.step-number{
  width:56px;height:56px;border-radius:50%;
  background:var(--blue-brand);color:white;
  font-family:var(--font-emphasis);font-size:22px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  box-shadow:0 4px 16px rgba(30,77,183,.4);
}
.step h3{
  font-family:var(--font-emphasis);font-size:20px;
  font-weight:800;margin-bottom:10px;color:var(--neutral-900);
}
.step p{font-size:15px;color:var(--muted);line-height:1.65}

/* 9. FEATURES ──────────────────────────────────────────────── */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{
  background:var(--white);border-radius:var(--radius-lg);
  padding:28px;border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  transition:transform var(--transition),box-shadow var(--transition);
  /* icon + heading on the same row, description spanning full width below */
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "icon title"
    "desc desc";
  column-gap:16px;row-gap:14px;align-items:center;
}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.feature-icon{
  grid-area:icon;
  width:52px;height:52px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex:none;
}
.feature-icon.gold{background:#FEF3C7}
.feature-icon.gold svg{color:var(--gold-600)}
.feature-icon.blue{background:var(--blue-50)}
.feature-icon.blue svg{color:var(--blue-brand)}
.feature-icon.green{background:#DCFCE7}
.feature-icon.green svg{color:#16A34A}
.feature-card h3{
  grid-area:title;
  font-family:var(--font-emphasis);font-size:19px;
  font-weight:800;margin:0;color:var(--neutral-900);
}
.feature-card p{grid-area:desc;margin:0;font-size:15px;color:var(--muted);line-height:1.65}

/* 10. PARENT SECTION ───────────────────────────────────────── */
.parent-section{
  background:linear-gradient(135deg,#0F2B6B 0%,#1E4DB7 60%,#2563EB 100%);
  color:var(--white);
}
.parent-section .section-label{background:rgba(255,255,255,.15);color:var(--white)}
.parent-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:64px;align-items:center;
}
.parent-content h2{
  font-family:var(--font-emphasis);
  font-size:clamp(28px,4vw,40px);font-weight:800;
  line-height:1.2;margin:12px 0 16px;
}
.parent-content>p{font-size:16px;color:rgba(255,255,255,.8);margin-bottom:24px}
.parent-checklist{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.parent-checklist li{
  display:flex;align-items:center;gap:12px;
  font-size:15px;color:rgba(255,255,255,.9);
}
.check-icon{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.parent-visual{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.parent-stat{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-lg);padding:20px;
  backdrop-filter:blur(8px);
  transition:background var(--transition);
  /* icon + label on the top row; the value spans the full tile width below so it stays on one line */
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:
    "icon label"
    "value value";
  column-gap:12px;row-gap:8px;align-items:center;
}
.parent-stat>div:not([class]){display:contents}   /* unwrap the label/value <div> into the grid */
.parent-stat:hover{background:rgba(255,255,255,.18)}
.parent-stat-icon{
  grid-area:icon;
  color:var(--gold-400);
  display:flex;
  align-items:center;
  justify-content:center;
}
.parent-stat-icon svg{width:28px;height:28px}
.parent-stat-label{grid-area:label;font-size:12px;color:rgba(255,255,255,.6);font-weight:500;margin:0}
.parent-stat-value{grid-area:value;font-family:var(--font-emphasis);font-size:18px;font-weight:800;white-space:nowrap}

/* 11. TESTIMONIALS ─────────────────────────────────────────── */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{
  background:var(--white);border-radius:var(--radius-lg);
  padding:32px;border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:16px;
  transition:transform var(--transition),box-shadow var(--transition);
}
.testimonial-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.stars{color:var(--gold-500);font-size:18px;letter-spacing:2px}
.testimonial-text{font-size:15px;line-height:1.75;color:var(--neutral-700);flex:1;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:12px}
.author-avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-200),var(--blue-500));flex-shrink:0;
}
.author-name{font-weight:700;font-size:15px}
.author-role{font-size:13px;color:var(--muted)}

/* 12. PRICING ──────────────────────────────────────────────── */
/* Billing toggle */
.billing-toggle{
  display:flex;align-items:center;justify-content:center;gap:4px;
  margin:0 auto 40px;
  background:var(--bg-alt);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:4px;width:fit-content;
}
.billing-btn{
  padding:8px 24px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;cursor:pointer;
  border:none;background:transparent;color:var(--muted);
  transition:background var(--transition),color var(--transition);
}
.billing-btn.active{background:var(--white);color:var(--neutral-900);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.save-badge{
  display:inline-block;margin-left:6px;
  background:#D1FAE5;color:#065F46;
  font-size:11px;font-weight:700;
  padding:2px 7px;border-radius:var(--radius-pill);
}
.billing-btn.active .save-badge{background:#10B981;color:white}
.pricing-yearly-note{font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:500}
.pricing-addons{
  text-align:center;margin-top:24px;font-size:15px;font-weight:600;
  color:var(--neutral-800);
  background:var(--bg-alt);border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:12px 28px;width:fit-content;margin-left:auto;margin-right:auto;
}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.pricing-card{
  background:var(--white);border-radius:var(--radius-lg);
  padding:36px 28px;border:1.5px solid var(--border);
  box-shadow:var(--shadow-card);position:relative;
  transition:transform var(--transition),box-shadow var(--transition);
  display:flex;flex-direction:column;
}
.pricing-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.pricing-card.featured{
  border-color:var(--blue-brand);
  box-shadow:0 0 0 1px var(--blue-brand),var(--shadow-2);
}
.pricing-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--blue-brand);color:white;
  font-size:12px;font-weight:700;
  padding:4px 16px;border-radius:var(--radius-pill);white-space:nowrap;
}
.pricing-name{font-family:var(--font-emphasis);font-size:22px;font-weight:800;margin-bottom:8px}
.pricing-price{
  font-family:var(--font-emphasis);font-size:40px;
  font-weight:800;color:var(--neutral-900);margin-bottom:8px;
}
.pricing-price span{font-size:16px;font-weight:500;color:var(--muted)}
.pricing-desc{font-size:14px;color:var(--muted);margin-bottom:20px}
.pricing-divider{height:1px;background:var(--border);margin-bottom:20px}
.pricing-features{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;flex:1}
.pricing-features li{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--neutral-700);
}
.pricing-features li svg{flex-shrink:0;color:var(--blue-brand)}
.pricing-features li.disabled{color:var(--neutral-400)}
.pricing-features li.disabled svg{color:var(--neutral-300)}
.pricing-cta{width:100%;justify-content:center}

/* 13. FAQ ──────────────────────────────────────────────────── */
.faq-list{
  max-width:720px;margin:0 auto;
  display:flex;flex-direction:column;gap:12px;
}
.faq-item{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;
  transition:box-shadow var(--transition);
}
.faq-item:hover{box-shadow:var(--shadow-card)}
.faq-question{
  width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:16px;
  padding:20px 24px;text-align:left;
  font-size:16px;font-weight:600;color:var(--neutral-800);
  cursor:pointer;transition:color var(--transition);
}
.faq-question[aria-expanded="true"]{color:var(--blue-brand)}
.faq-icon{
  width:28px;height:28px;border-radius:50%;
  background:var(--blue-50);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform var(--transition),background var(--transition);
}
.faq-icon svg{color:var(--blue-brand)}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(45deg);background:var(--blue-brand)}
.faq-question[aria-expanded="true"] .faq-icon svg{color:white}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--transition-slow)}
.faq-item.open .faq-answer{max-height:400px}
.faq-answer-inner{padding:0 24px 20px;font-size:15px;color:var(--muted);line-height:1.75}

/* 14. CTA SECTION ──────────────────────────────────────────── */
.cta-section{
  background:linear-gradient(135deg,#1E4DB7 0%,#0F2B6B 100%);
  padding:56px 0;text-align:center;
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 25% 50%,rgba(245,158,11,.18) 0%,transparent 60%),
    radial-gradient(circle at 75% 50%,rgba(255,255,255,.06) 0%,transparent 60%);
}
.cta-section>.container{position:relative;z-index:1}
.cta-section h2{
  font-family:var(--font-emphasis);
  font-size:clamp(28px,4vw,44px);font-weight:800;
  color:var(--white);line-height:1.2;margin-bottom:16px;
}
.cta-section>.container>p{font-size:18px;color:rgba(255,255,255,.8);margin-bottom:32px}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.cta-note{font-size:14px;color:rgba(255,255,255,.6)}

/* 15. FOOTER ────────────────────────────────────────────────── */
.footer{background:var(--neutral-900);color:var(--neutral-300);padding:48px 0 32px}
.coppa-notice{
  background:#2563EB1A;border:1px solid #60A5FA;
  border-radius:var(--radius-md);padding:20px 24px;
  font-size:13px;color:#BAC8D9;margin-bottom:48px;line-height:1.7;
}
.coppa-notice strong{color:#93C5FD}
.footer-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:48px;
  max-width:960px;margin:0 auto 48px;
}
.footer-brand .nav-logo{margin-bottom:16px}
.footer-brand .nav-logo img{height:80px}
.footer-brand p{font-size:14px;color:var(--neutral-400);line-height:1.6}
.footer-col{}
.footer-col h4{
  font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--neutral-200);margin-bottom:16px;
}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--neutral-400);transition:color var(--transition)}
.footer-col a:hover{color:var(--white)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding-top:24px;
  text-align:center;
}
.footer-copy{font-size:13px;color:var(--neutral-500)}
/* 16. LEGAL PAGES ──────────────────────────────────────────── */
.legal-page{max-width:760px;margin:48px auto 96px;padding:0 24px}
.legal-page h1{
  font-family:var(--font-emphasis);font-size:36px;
  font-weight:800;margin-bottom:8px;
}
.legal-meta{font-size:14px;color:var(--muted);margin-bottom:32px;line-height:1.8}
.legal-highlight{
  background:#FEF3C7;border:1px solid var(--gold-400);
  border-radius:var(--radius-md);padding:16px 20px;
  margin-bottom:32px;font-size:15px;line-height:1.6;
}
.legal-page h2{
  font-family:var(--font-emphasis);font-size:22px;
  font-weight:800;margin:36px 0 12px;color:var(--neutral-900);
}
.legal-page h3{font-size:17px;font-weight:700;margin:24px 0 8px;color:var(--neutral-800)}
.legal-page p{font-size:15px;color:var(--neutral-700);line-height:1.8;margin-bottom:12px}
.legal-page ul{list-style:disc;padding-left:24px;margin-bottom:16px}
.legal-page ul li{font-size:15px;color:var(--neutral-700);line-height:1.8;margin-bottom:6px}
.legal-page a{color:var(--blue-brand);text-decoration:underline}

/* 16a. CONTACT PAGE ───────────────────────────────────────── */
.contact-page{
  max-width:900px;
  margin:0 auto;
  padding:110px 24px 80px;
}
.contact-hero{
  text-align:center;
  margin-bottom:32px;
}
.contact-hero h1{
  font-family:var(--font-emphasis);
  font-size:clamp(34px,5vw,54px);
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--neutral-900);
  margin:16px 0 14px;
}
.contact-hero p{
  max-width:620px;
  margin:0 auto;
  color:var(--muted);
  font-size:18px;
}
.contact-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  padding:34px;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.form-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-field label{
  color:var(--neutral-800);
  font-weight:700;
  font-size:14px;
}
.form-field label span{
  color:var(--neutral-500);
  font-weight:500;
}
.form-field label .required-mark{
  color:#ef4444;
  font-weight:800;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  border:1px solid #dbe3f0;
  border-radius:14px;
  background:#fff;
  color:var(--neutral-900);
  font:inherit;
  padding:14px 16px;
  outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.form-field textarea{resize:vertical;min-height:170px}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--blue-brand);
  box-shadow:0 0 0 4px rgba(30,77,183,.12);
}
.form-field.has-error label{
  color:#ef4444;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{
  border-color:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.1);
}
.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus{
  border-color:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.14);
}
.form-field input[type="file"]{
  padding:12px;
  color:var(--neutral-700);
}
.form-hint{
  margin:0;
  color:var(--neutral-500);
  font-size:13px;
}
.field-error{
  margin:0;
  color:#ef4444;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
}
.contact-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.contact-status{
  position:fixed;
  top:96px;
  right:24px;
  z-index:1200;
  width:min(420px,calc(100vw - 48px));
  border-radius:14px;
  padding:14px 16px;
  font-weight:600;
  line-height:1.5;
  box-shadow:0 18px 46px rgba(15,23,42,.18);
}
.contact-status.success{
  background:#ecfdf5;
  color:#047857;
  border:1px solid #a7f3d0;
}
.contact-status.error{
  background:#fef2f2;
  color:#b91c1c;
  border:1px solid #fecaca;
}
.contact-submit{
  align-self:flex-start;
  min-width:190px;
}
.contact-submit:disabled{
  cursor:not-allowed;
  opacity:.65;
  transform:none;
}

/* 17. SCROLL REVEAL ────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity 600ms ease,transform 600ms ease;
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* 18. RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:1100px){
  .wrap{padding:18px 18px 48px}
  .wordmark-img{height:82px}
  .guru img{height:160px}
  .tagline{font-size:22px}
  .rocket{display:none}
  /* feature cards: stop the full-bleed vw sizing, flow with fixed sizes */
  .cards-wrap{padding:0 20px 22px;margin-top:8px}
  .cards{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
  .card{flex:1 1 260px;max-width:360px;border-radius:18px;padding:16px;gap:14px}
  .ic{width:54px;height:54px}
  .ic svg{width:28px;height:28px}
  .card h3{font-size:18px}
  .card p{font-size:13.5px}
  .hero{gap:16px}
  .why-parents-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }
  .why-parent-card{
    min-height:260px;
    padding:24px 18px;
    grid-template-columns:1fr;
    grid-template-areas:
      "icon"
      "title"
      "copy";
    justify-items:center;
    text-align:center;
  }
  .why-parent-icon{width:48px;height:48px}
  .why-parent-icon svg{width:24px;height:24px}
  .why-parent-card h3{
    font-size:17px;
    white-space:normal;
  }
  .why-parent-card p{
    font-size:14px;
    line-height:1.6;
  }
  .learning-flow-grid{grid-template-columns:repeat(2,1fr)}
  .learning-flow-card{min-height:0}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(4,1fr);gap:40px}   /* tablet/portrait: keep all 4 in one row */
}

/* Nav collapses to the hamburger drawer below 1024px (the desktop nav needs ~1100px to fit) */
@media(max-width:1024px){
  .hero-nav{padding:12px 12px 0}
  .site-nav{padding:10px 14px;gap:8px;justify-content:space-between;min-height:0;border-radius:18px}
  .nav-toggle{display:flex;order:-1;z-index:210}     /* left; stays above the open drawer */
  .nav-cta{font-size:13px;padding:8px 12px;gap:5px;z-index:210}   /* stays in the bar, above drawer */
  .nav-cta-ic{height:15px}
  .nav-logo img{height:34px}                          /* smaller logo for the mobile sticky bar */

  /* The fixed nav must not cover the short hero — drop the hero below it,
     and paint the strip behind the nav to match the banner's top gradient (no seam). */
  .hero-band{padding-top:70px}
  .hero-band::before{
    content:'';position:absolute;top:0;left:0;right:0;height:72px;z-index:0;
    background:linear-gradient(90deg,#fde7ab,#c7dcf3,#9dccf9);
  }
  /* Mobile uses a pre-cropped image (hero-banner-mobile.png, top sky already trimmed),
     shown at natural size so the artwork keeps the original landing proportions. */
  .hero-banner{position:relative;z-index:1}

  /* the menu becomes a full-screen slide-in drawer */
  .nav-menu{
    display:none;flex:none;
    position:fixed;inset:0;z-index:200;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:84px 22px 32px;overflow-y:auto;
  }
  .nav-menu.open{display:flex}
  .nav-menu .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;flex:none}
  .nav-menu .nav-item{font-size:18px;font-weight:600;padding:16px 6px;gap:12px;border-bottom:1px solid #eef1f7}
  .nav-menu .nav-ic{width:22px;height:22px}
  .nav-login{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;padding:16px 6px;margin:0;border-bottom:1px solid #eef1f7}
  .nav-login .ic-login{display:block}                  /* show login icon in the drawer */
  .nav-login.is-authed .ic-login{display:none}
  .nav-login.is-authed .ic-logout{display:block}       /* swap to logout icon when signed in */
  /* Get the App: labeled button in the bar (beside Get Started), label kept even when stuck */
  .getapp{display:flex;margin-left:auto;z-index:210}   /* group App + Get Started on the right; stay above the open drawer (like the X and Get Started) */
  .nav-getapp{padding:8px 11px;gap:5px;font-size:13px;font-weight:600;color:#1f4fd6;
    background:#eef3ff;border:1px solid #d6e2ff;border-radius:10px}
  .nav-getapp svg{width:16px;height:16px}
  .getapp-pop{
    position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
    background:rgba(15,23,42,.55);padding:24px;
  }
  .getapp-card{width:100%;max-width:330px}
  .getapp-card::before{display:none}     /* no arrow in modal mode */
  .getapp-qr{display:none}               /* QR is pointless on the phone itself */
}

@media(max-width:768px){
  .wrap{padding:14px 14px 40px}
  .hero{flex-direction:column;text-align:center;margin-top:12px;gap:10px}
  .guru img{height:150px}
  .brand{align-items:center}
  .wordmark-img{height:62px}
  .tagline{position:static;font-size:18px;margin:8px 0 0;justify-content:center;white-space:normal}
  .cards{margin-top:14px}

  /* tighter vertical rhythm on phones (sections were stuck at the 72px desktop padding) */
  .section{padding:40px 0}
  .cta-section{padding:44px 0}
  .section-header{margin-bottom:24px}
  .why-parents-section{padding-top:42px}
  .why-parents-header p{font-size:16px}
  .why-parents-grid{grid-template-columns:1fr;gap:16px}
  .why-parent-card{padding:24px;border-radius:var(--radius-lg);column-gap:14px;row-gap:12px}
  .why-parent-icon{width:50px;height:50px}
  .why-parent-icon svg{width:25px;height:25px}
  .why-parent-card h3{font-size:19px;white-space:normal}
  .why-parent-card p{font-size:15px;line-height:1.65}
  .learning-flow-grid{grid-template-columns:1fr;gap:16px}
  .learning-flow-card{
    padding:24px;
    border-radius:var(--radius-lg);
    row-gap:18px;
  }
  .learning-flow-number{width:50px;height:50px;border-radius:18px;font-size:22px}
  .learning-flow-card h3{font-size:20px}
  .learning-flow-card p{font-size:15px;line-height:1.65}

  .steps{grid-template-columns:1fr}
  .steps::before{display:none}
  .features-grid{grid-template-columns:1fr}
  .parent-grid{grid-template-columns:1fr}
  .parent-visual{grid-template-columns:1fr 1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .contact-page{padding:92px 18px 56px}
  .contact-card{padding:24px;border-radius:var(--radius-lg)}
  .form-grid{grid-template-columns:1fr}
  .contact-submit{width:100%}
  .contact-status{
    top:82px;
    right:16px;
    width:calc(100vw - 32px);
  }
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}   /* 2-up on phones — use the available width */
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-copy{text-align:left}
}

@media(max-width:560px){
  .card{flex-basis:100%;max-width:420px}
  .wordmark-img{height:52px}
  .guru img{height:150px}
  /* keep the value on one line in the 2-up tiles, down to the smallest phones */
  .parent-stat{padding:16px}
  .parent-stat-value{font-size:15px}
  .parent-stat-icon{font-size:24px}
}

/* Small phones (~360px Android): compact the CTAs so the sticky logo still fits beside them */
@media(max-width:374px){
  .nav-getapp{padding:7px 9px;gap:4px;font-size:12px}
  .nav-getapp svg{width:15px;height:15px}
  .nav-cta{font-size:12px;padding:7px 10px;gap:4px}
  .nav-cta-ic{height:14px}
}
/* Only the very narrowest phones drop the logo to avoid crowding */
@media(max-width:336px){
  .hero-nav.stuck .nav-logo,.hero-nav.is-solid .nav-logo{display:none}
}

/* ── Always-solid sticky header (standalone pages: legal, etc.) ──────────────
   These pages have no hero banner, so the nav is a solid, sticky bar with the
   logo shown by default (same look as the landing page's scrolled/stuck nav).
   Appended last so it wins over the .stuck / @374 logo rules. */
.hero-nav.is-solid{position:sticky;padding:0}
.hero-nav.is-solid .site-nav{border-radius:0;min-height:62px;box-shadow:0 4px 20px -6px rgba(15,23,42,.18)}
.hero-nav.is-solid .nav-logo{display:flex}