/* =====================================================================
   Vidaara — Craft Refinement Layer  (loads LAST; purely additive)
   Goal: elevate the portal to a senior-product-team standard without
   touching markup, routes, data or SEO. Reverting = remove the <link>.
   Strategy: discipline the palette, refine typography + depth + motion,
   and unify the component look so nothing reads as a template/AI default.
   ===================================================================== */

/* ====================================================================
   MOBILE STABILITY — stop the "loose paper" feel on phones.
   Root causes addressed: (a) horizontal pan / rubber-band, (b) overscroll
   bounce in both axes, (c) iOS text auto-inflation reflow, (d) 100vh hero
   jumping as the mobile URL bar shows/hides. Uses overflow:clip (NOT hidden)
   so position:sticky is never broken; never touches pinch-zoom (a11y).
   ==================================================================== */
html{
  overflow-x:clip;                 /* lock horizontal pan (sticky-safe) */
  overscroll-behavior-x:none;      /* kill sideways rubber-band */
  -webkit-text-size-adjust:100%;   /* no iOS text inflation -> no reflow jump */
}
body{
  overflow-x:clip;
  width:100%;
  max-width:100%;
  position:relative;
  overscroll-behavior-y:contain;   /* stop scroll-chaining bounce; keeps pull-to-refresh */
}
/* Belt-and-suspenders: any stray wide child is clipped, not pannable. */
.site-main,.vedic-banner,.hero,section,footer{max-width:100%}
/* Media never forces horizontal overflow on small screens. */
img,svg,video,iframe,table{max-width:100%}
/* Stable mobile hero height: use the small/dynamic viewport so the section
   doesn't resize (and the page doesn't "shift") when the URL bar moves. */
@supports (min-height:100svh){
  .hero{min-height:calc(100svh - var(--nav-h))}
}

/* ---- 1. Token refinements (cohesive shift via the cascade) ---------- */
:root{
  /* A real, layered shadow scale (replaces ad-hoc soft glows) */
  --shadow-xs: 0 1px 2px rgba(10,22,40,.05);
  --shadow-sm: 0 1px 2px rgba(10,22,40,.05), 0 2px 6px rgba(10,22,40,.05);
  --shadow-md: 0 2px 4px rgba(10,22,40,.04), 0 8px 20px rgba(10,22,40,.07);
  --shadow-lg: 0 8px 24px rgba(10,22,40,.08), 0 24px 56px rgba(10,22,40,.10);
  /* Neutral ink ramp for disciplined, non-rainbow UI */
  --ink-900:#0A1628; --ink-700:#22303f; --ink-500:#55617022; /* (unused alpha guard) */
  --ink-600:#475569; --ink-400:#8a93a2; --ink-300:#b8c0cc;
  --hairline: rgba(10,22,40,.09);
  --hairline-strong: rgba(10,22,40,.14);
  /* Tighter, more intentional corner scale */
  --r:12px; --r-lg:18px; --r-xl:26px;
  /* Single motion curve used across interactions */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- 2. Typography: confident, editorial hierarchy ------------------ */
.hero-h1,.section-h,.vd-section-title,.learner-headline,.parent-h,.teacher-h,
.es-title{
  letter-spacing:-0.018em;
  font-feature-settings:"liga" 1,"calt" 1;
}
.hero-h1{letter-spacing:-0.028em;line-height:1.04}
/* Eyebrows / kickers: quiet, inked, wide-tracked — not shouting saffron */
.eyebrow,.vd-kicker,.es-eyebrow{
  color:var(--ink-400);
  font-weight:700;
  letter-spacing:.16em;
  font-size:.7rem;
}
/* A hairline tick before eyebrows = a small "designed" detail */
.eyebrow::before,.vd-kicker::before{
  content:"";display:inline-block;width:18px;height:1px;
  background:var(--saffron);vertical-align:middle;margin-right:.55em;
  transform:translateY(-2px);
}
.section-p{color:var(--ink-600);line-height:1.62}

/* ---- 3. Palette discipline: tame the rainbow icon tiles ------------- */
/* One tonal treatment: soft warm tile, inked glyph, saffron only as spark. */
.what-icon{
  background:#fff !important;
  border:1px solid var(--hairline);
  box-shadow:var(--shadow-xs);
  border-radius:14px;
  filter:saturate(.9);
}
.what-card:hover .what-icon{border-color:var(--saffron-mid)}
/* Quiet the multi-colour accents that read as template defaults */
.wi-blue,.wi-green,.wi-gold,.wi-purple,.wi-red,.wi-orange{
  background:linear-gradient(180deg,#fff,#fbf7f0) !important;
}

/* ---- 4. Cards: hairline + layered depth + crisp hover -------------- */
.vd-card,.what-card,.subj-card,.testi-card,.teacher-tool,.subj-tile{
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             border-color .2s var(--ease);
  will-change:transform;
}
.vd-card:hover,.what-card:hover,.subj-card:hover,.teacher-tool:hover,
.subj-tile:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--hairline-strong);
}
.es-chart{box-shadow:var(--shadow-md);border-color:var(--hairline);border-radius:var(--r-xl)}
/* The "go" link warms on hover — a small living micro-detail */
.vd-card__go{transition:gap .2s var(--ease),color .2s var(--ease)}
.vd-card:hover .vd-card__go{color:var(--saffron-d)}

/* ---- 5. Buttons: confident, less pill-y, real press feedback -------- */
.btn-start,.btn-ai,.btn-test,.btn-parent-cta,.btn-teacher,.btn-signup,
.btn-white,.btn-start-ghost{
  border-radius:12px;
  letter-spacing:-0.01em;
  transition:transform .15s var(--ease),box-shadow .2s var(--ease),
             background .2s var(--ease),color .2s var(--ease);
}
.btn-start,.btn-ai,.btn-test,.btn-parent-cta,.btn-teacher{
  box-shadow:0 1px 2px rgba(232,93,4,.18),0 8px 20px rgba(232,93,4,.20);
}
.btn-start:hover,.btn-ai:hover,.btn-test:hover,.btn-parent-cta:hover,
.btn-teacher:hover,.btn-signup:hover{transform:translateY(-2px)}
.btn-start:active,.btn-ai:active,.btn-test:active,.btn-signup:active{transform:translateY(0)}

/* ---- 6. Hero polish ------------------------------------------------- */
.hero-badge{
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:var(--shadow-xs);
  letter-spacing:.01em;
}
.hero-bg-text{opacity:.04;letter-spacing:-0.04em}

/* ---- 7. Trust bar: quieter, more deliberate ------------------------- */
.trust-bar{border-block:1px solid var(--hairline);background:rgba(255,255,255,.5)}
.trust-item{color:var(--ink-600);font-weight:600;letter-spacing:.005em}
.trust-dot{background:var(--ink-300)}

/* ---- 8. Persona tabs & filters: segmented-control feel ------------- */
.persona-tabs,.subj-filter{gap:6px}
.persona-tab,.filter-btn{
  border:1px solid var(--hairline);border-radius:10px;
  transition:all .15s var(--ease);
}
.persona-tab.active,.filter-btn.active{
  border-color:var(--saffron);
  box-shadow:0 1px 2px rgba(232,93,4,.15);
}

/* ---- 9. Grade pills: tactile, consistent --------------------------- */
.grade-pill{border:1px solid var(--hairline);transition:all .15s var(--ease)}
.grade-pill:hover{border-color:var(--saffron);color:var(--saffron-d);transform:translateY(-1px)}

/* ---- 10. Testimonials: editorial quotation detail ------------------ */
.testi-card{position:relative;border-radius:var(--r-lg)}
.testi-card::before{
  content:"\201C";position:absolute;top:6px;right:18px;
  font-family:var(--font-serif);font-size:3.4rem;line-height:1;
  color:var(--saffron);opacity:.14;
}
.testi-q{color:var(--ink-700)}
.stars{letter-spacing:2px}

/* ---- 11. CTA band: refined, less flat ------------------------------ */
.cta-band{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cta-email{border-radius:11px}

/* ---- 12. Accessibility: a real focus-visible ring ------------------ */
a:focus-visible,button:focus-visible,input:focus-visible,
[tabindex]:focus-visible,.vd-card:focus-visible,.subj-card:focus-visible{
  outline:2px solid var(--saffron);
  outline-offset:2px;
  border-radius:8px;
}

/* ---- 13. Section rhythm: a touch more breathing room on desktop ---- */
@media(min-width:1024px){
  .what-section,.subjects-section,.ai-section,.test-section,.testi-section{
    padding-top:84px;padding-bottom:84px;
  }
}

/* ---- 14b. Inline SVG icon system (replaces emoji) ----------------- */
.vic{display:inline-block;width:1.1em;height:1.1em;vertical-align:-0.16em;
     flex:none;color:inherit}
/* Persona tabs + filters: small inked glyphs */
.persona-tab .vic{width:18px;height:18px;margin-right:7px;vertical-align:-3px;color:var(--ink-600)}
.persona-tab.active .vic{color:var(--saffron-d)}
/* Subject tiles (hero) + subject cards: saffron-on-tile */
.subj-tile .vic,.subj-card .vic{width:30px;height:30px;color:var(--saffron-d);stroke-width:1.6}
/* Explore-by-goal + what-you-get card icons: inked glyph in a soft tile */
.vd-card__icon .vic{width:26px;height:26px;color:var(--saffron-d)}
.what-icon .vic{width:26px;height:26px;color:var(--ink-700)}
.what-card:hover .what-icon .vic{color:var(--saffron-d)}
/* Trust bar: quiet inked micro-icons */
.trust-item .vic{width:16px;height:16px;margin-right:6px;vertical-align:-3px;color:var(--ink-400)}
/* Teacher tools / parent feats */
.teacher-tool .vic{width:24px;height:24px;color:var(--saffron-d)}
.parent-feat-icon .vic{width:20px;height:20px;color:var(--saffron-d)}
/* Nav dropdown icons inherit the link colour (grey to saffron on hover) */
.nav-drop-menu a .drop-icon{display:inline-flex;align-items:center;justify-content:center}
.nav-drop-menu a .drop-icon .vic{width:17px;height:17px;color:inherit}
.nav-drop-menu a{color:#475569}
/* Nav + drawer search glyph */
.nav-search-ico .vic,.nav-drawer-search .vic{width:16px;height:16px;color:var(--ink-400);vertical-align:-2px}
/* Parent feature + teacher tool glyphs */
.parent-feat-icon .vic{width:18px;height:18px}
.tool-icon .vic{width:22px;height:22px;color:var(--saffron-d)}
.report-name + * .vic,.parent-right .vic{color:var(--ink-600)}
/* Reduced glyph wobble: crisp rendering */
.vic{shape-rendering:geometricPrecision}

/* ====================================================================
   INCREMENT 4 — Home composition: hierarchy, asymmetry, editorial polish
   (CSS-only, reversible. Mobile keeps the simple stacked layout.)
   ==================================================================== */

/* 4a. Featured "bento" lead card in Explore-by-goal: the first card spans
   the full row as a wide feature, breaking the uniform grid (asymmetry)
   and giving the section a clear primary action (hierarchy). Desktop only. */
@media(min-width:760px){
  .vd-grid--2{align-items:start}
  .vd-grid--2 .vd-card:first-child{
    grid-column:1 / -1;
    background:linear-gradient(110deg,var(--saffron-light) 0%,#fff 62%);
    border-color:var(--saffron-mid);
    padding:30px 32px;
  }
  .vd-grid--2 .vd-card:first-child .vd-card__icon{
    width:52px;height:52px;background:#fff;border:1px solid var(--hairline);
  }
  .vd-grid--2 .vd-card:first-child .vd-card__icon .vic{width:30px;height:30px}
  .vd-grid--2 .vd-card:first-child .vd-card__title{font-size:1.6rem;max-width:30ch}
  .vd-grid--2 .vd-card:first-child .vd-card__desc{font-size:.98rem;max-width:60ch}
}

/* 4b. Section heading hierarchy: a consistent, confident scale + a short
   accent rule under the eyebrow gives an "art-directed" feel. */
.vd-section-title,.section-h{line-height:1.1}
.what-section .eyebrow,.subjects-section .eyebrow,.ai-section .eyebrow,
.test-section .eyebrow,.testi-section .eyebrow{display:inline-block}

/* 4c. Numbers as a designed element: tabular figures + serif display so the
   stat strips read as deliberate, not default. */
.tmi-n,.tstat-n,.rstat-n,.es-val{font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.tmi-n,.tstat-n{font-family:var(--font-serif)}

/* 4d. Testimonials: editorial card treatment (NOTE: replace the sample
   quotes with real, attributed testimonials before relying on them). */
.testi-card{
  width:340px;
  background:#fff;
  border:1px solid var(--hairline);
  border-left:3px solid var(--saffron);
  box-shadow:var(--shadow-sm);
}
.testi-q{font-size:.98rem;line-height:1.6}
.testi-name{letter-spacing:-0.01em}
.testi-av{box-shadow:var(--shadow-xs)}
/* Subtle scroll affordance: fade the track edge so it reads as a carousel */
.testi-track{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.testi-card{scroll-snap-align:start}

/* 4e. Trust bar + CTA band rhythm: a touch more vertical presence on desktop */
@media(min-width:1024px){
  .cta-band{padding-top:72px;padding-bottom:72px}
}

/* ---- 14. Honour reduced-motion globally --------------------------- */
@media(prefers-reduced-motion:reduce){
  .vd-card,.what-card,.subj-card,.teacher-tool,.subj-tile,
  .btn-start,.btn-ai,.btn-test,.grade-pill{transition:none}
  .vd-card:hover,.what-card:hover,.subj-card:hover{transform:none}
}
:root[data-reduce-motion] .vd-card:hover,
:root[data-reduce-motion] .what-card:hover,
:root[data-reduce-motion] .subj-card:hover{transform:none}