/* ============================================================
   EDSY — The School Operating System
   Site-wide stylesheet. Every page links this one file.

   SECTIONS
     01  Design tokens
     02  Reset & base
     03  Motion system (scroll reveal + shared easings)
     04  Utility type
     05  Navigation
     06  Buttons
     07  Page headers & home hero
     08  Section primitives (headings, cards, grids, ticks)
     09  Home — hub diagram, values, origin, testimonials
     10  Solution pages — category intros, module cards, jump chips
     11  Platform — architecture layers, onboarding steps
     12  Edsy Leads — pain grid, feature grid, flow, integrations
     13  Pricing — plans, FAQ, service card
     14  Company & Contact — story, timeline, contact form
     15  CTA band
     16  Footer
     17  Responsive
     18  Reduced motion

   Page-specific rules live here too (class names are unique per
   page), so a page never needs its own <style> block.
   ============================================================ */

/* ============================================================
   01  DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand — forest green anchors Edsy's institutional trust */
  --forest:        #1B5E3B;
  --forest-deep:   #124029;
  --forest-mid:    #2E7D52;
  --forest-soft:   #E7F1EB;
  --forest-tint:   #F1F7F3;

  /* Accents */
  --gold:          #C89A3C;
  --gold-soft:     #FBF3E0;
  --coral:         #D8593F;
  --coral-soft:    #FBEBE7;
  --sky:           #3B7DC4;
  --sky-soft:      #E7F0FA;
  --violet:        #6D5AC4;
  --violet-soft:   #EEEBF9;

  /* Canvas & ink */
  --canvas:        #FAFAF8;
  --canvas-warm:   #F5F4EF;
  --white:         #FFFFFF;
  --ink:           #16211B;
  --ink-mid:       #52605A;
  --ink-soft:      #7A857F;
  --line:          #E7E6E0;
  --line-soft:     #EFEEE9;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(22,33,27,.04), 0 2px 8px rgba(22,33,27,.04);
  --shadow-md: 0 4px 16px rgba(22,33,27,.06), 0 12px 32px rgba(22,33,27,.06);
  --shadow-lg: 0 8px 30px rgba(22,33,27,.08), 0 24px 60px rgba(22,33,27,.08);

  --maxw: 1200px;
  --nav-h: 68px;

  /* Motion — one easing curve and two durations keep the whole
     site feeling like a single, calm system. */
  --ease:      cubic-bezier(.16, .84, .44, 1);
  --dur-fast:  .18s;
  --dur-base:  .28s;
  --dur-slow:  .62s;
}

/* ============================================================
   02  RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Anchor targets must clear the sticky nav, otherwise a jump link
     parks the heading underneath it. */
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.serif { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Visible keyboard focus everywhere — never remove this without a
   replacement indicator. */
:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ============================================================
   03  MOTION SYSTEM
   Scroll reveal is opt-in per element via data-reveal. The base
   (hidden) state is scoped to .js so that with JavaScript disabled
   — or if the observer never runs — every element stays visible.
   ============================================================ */
.js [data-reveal] { opacity: 0; }
.js [data-reveal="up"],
.js [data-reveal=""]      { transform: translateY(16px); }
.js [data-reveal="left"]  { transform: translateX(-18px); }
.js [data-reveal="right"] { transform: translateX(18px); }
.js [data-reveal="scale"] { transform: scale(.97); }
.js [data-reveal="fade"]  { transform: none; }

/* Revealed state. The transition lives here so the element animates
   in once and is never animated back out. --reveal-delay is written
   by edsy.js to stagger members of a [data-reveal-group]. */
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Connector lines in the diagrams draw themselves in. */
.js [data-draw] { transform: scaleY(0); transform-origin: top center; }
.js [data-draw].is-in {
  transform: scaleY(1);
  transition: transform .5s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Trailing "→" inside a button, wrapped by edsy.js so it can nudge. */
.btn-arw {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease);
}

/* ============================================================
   04  UTILITY TYPE
   ============================================================ */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--forest-mid);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 1.5px; background: var(--forest-mid);
  display: inline-block;
  /* The rule draws itself out when the eyebrow is revealed. */
  transform-origin: left center;
  transition: transform .55s var(--ease) .12s;
}
.js [data-reveal] .eyebrow::before,
.js .eyebrow[data-reveal]::before { transform: scaleX(0); }
.js [data-reveal].is-in .eyebrow::before,
.js .eyebrow[data-reveal].is-in::before { transform: scaleX(1); }
.eyebrow.center { justify-content: center; }

h1, h2, h3 { letter-spacing: -.02em; line-height: 1.1; }

/* ============================================================
   05  NAVIGATION
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 300;
  background: rgba(250,250,248,.82);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
  /* Only paint changes on scroll — the height stays fixed so the
     page never shifts under the user. */
  transition: background var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
/* Added by edsy.js once the page is scrolled past the nav. */
.nav.is-stuck {
  background: rgba(250,250,248,.94);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 3px rgba(22,33,27,.05), 0 8px 24px rgba(22,33,27,.05);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  height: var(--nav-h); padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
}
/* Vertical padding lifts the logo to a 44px tap target without
   changing the nav height (the row is centred, fixed-height). */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; padding: 7px 0; }
.brand-logo {
  height: 30px; width: auto; display: block;
  transition: transform var(--dur-base) var(--ease);
}
.brand:hover .brand-logo { transform: scale(1.03); }
.brand-logo-light { opacity: 1; }
.brand-name { font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }

.nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-link {
  position: relative;
  font-size: 14.5px; font-weight: 500; color: var(--ink-mid);
  text-decoration: none; padding: 8px 14px; border-radius: 8px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* Underline grows from the centre on hover / for the current page. */
.nav-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 1.5px; background: var(--forest); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-base) var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--forest-tint); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--forest); }
.nav-link.active::after { transform: scaleX(1); }

/* Dropdown ------------------------------------------------- */
.has-drop { position: relative; }
/* Invisible bridge across the gap between trigger and panel, so the
   panel does not close while the pointer travels down to it. The
   trigger is an inline link, so its box is shorter than it paints —
   18px is enough to overlap the panel's 10px offset. */
.has-drop::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 18px;
}
.drop {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 300px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility var(--dur-base);
}
.has-drop:hover .drop,
.has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Right-anchored variant, for a trigger that sits at the end of the nav
   row (the Log in menu). Centring a 300px panel there would push it past
   the viewport edge. Must follow the :hover rule above — same specificity,
   so source order decides. */
.drop-end .drop { left: auto; right: 0; transform: translateY(6px); }
.drop-end:hover .drop,
.drop-end:focus-within .drop { transform: translateY(0); }
.drop-item {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 10px; text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.drop-item:hover { background: var(--forest-tint); }
.drop-item:hover .drop-ic { transform: scale(1.08); }
.drop-ic {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  transition: transform var(--dur-base) var(--ease);
}
.drop-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.drop-d { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }

.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-ghost {
  font-size: 14.5px; font-weight: 500; color: var(--ink-mid);
  text-decoration: none; padding: 9px 14px; border-radius: 9px;
  transition: color var(--dur-fast) var(--ease);
}
.nav-ghost:hover { color: var(--ink); }

/* Hamburger: bars morph into a cross when the menu is open.
   11px padding around the 22px stack gives a 44px tap target. */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 11px; }
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink);
  border-radius: 2px; margin: 4px 0;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Shown only inside the mobile menu — the desktop nav has its own
   "Log in" dropdown in .nav-right. */
.nav-mobile-only { display: none; }

/* ============================================================
   06  BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  border-radius: 11px;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
  white-space: nowrap;
}
.btn:hover .btn-arw { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn-primary {
  background: var(--forest); color: var(--white);
  padding: 12px 22px; box-shadow: 0 2px 10px rgba(27,94,59,.22);
}
.btn-primary:hover { background: var(--forest-deep); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(27,94,59,.3); }
.btn-outline {
  background: var(--white); color: var(--ink);
  padding: 12px 22px; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover { border-color: var(--forest); color: var(--forest); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-sm { padding: 9px 16px; font-size: 14px; border-radius: 9px; }
.btn-lg { padding: 15px 30px; font-size: 16px; }

/* ============================================================
   07  PAGE HEADERS & HOME HERO
   ============================================================ */
.pagehead { padding: 84px 0 56px; position: relative; }
.pagehead .eyebrow { margin-bottom: 20px; }
.pagehead h1 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(38px, 5vw, 62px); color: var(--ink);
  max-width: 780px; margin-bottom: 22px;
}
.pagehead h1 em { font-style: italic; color: var(--forest); }
.pagehead .lede {
  font-size: clamp(17px, 2vw, 20px); color: var(--ink-mid);
  max-width: 620px; line-height: 1.6;
}
/* Centred variant — replaces the per-page inline auto margins. */
.pagehead.center { text-align: center; }
.pagehead.center .wrap { display: flex; flex-direction: column; align-items: center; }
.pagehead.center h1,
.pagehead.center .lede { margin-left: auto; margin-right: auto; }

.tint-forest { background: var(--forest-tint); }

/* Row of hero buttons — used on the home hero and on page headers. */
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pagehead .hero-actions { margin-top: 28px; }
.hero-note { font-size: 13.5px; color: var(--ink-soft); }
.pagehead .hero-note { margin-top: 16px; }

/* Home hero ------------------------------------------------ */
.hero { padding: 88px 0 64px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -240px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(27,94,59,.07), transparent 62%);
}
.hero-inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; }
.hero .hero-actions { justify-content: center; margin-bottom: 20px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 100px; padding: 7px 16px 7px 8px;
  font-size: 13px; font-weight: 500; color: var(--ink-mid);
  box-shadow: var(--shadow-sm); margin-bottom: 30px;
}
.pill b { background: var(--forest-soft); color: var(--forest); font-weight: 600; padding: 3px 9px; border-radius: 100px; font-size: 12px; }
.hero h1 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(42px, 6.4vw, 82px); line-height: 1.03;
  color: var(--ink); margin-bottom: 24px; letter-spacing: -.03em;
}
.hero h1 em { font-style: italic; color: var(--forest); }
.hero .lede { font-size: clamp(18px, 2vw, 22px); color: var(--ink-mid); max-width: 620px; margin: 0 auto 36px; line-height: 1.55; }

/* Trust strip */
.trust { margin-top: 64px; text-align: center; }
.trust-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 22px; }
.trust-row { display: flex; gap: 40px; justify-content: center; align-items: center; flex-wrap: wrap; }
.trust-item {
  font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500;
  color: var(--forest); font-style: italic;
  transition: transform var(--dur-base) var(--ease);
}
.trust-item:hover { transform: translateY(-2px); }

/* ============================================================
   08  SECTION PRIMITIVES
   ============================================================ */
section { position: relative; }
.section { padding: 88px 0; }
.section-sm { padding: 60px 0; }
/* Second and subsequent blocks of one category run straight on from
   the previous section without doubling the vertical rhythm. */
.section-flush-top { padding-top: 0; }

.sec-head { max-width: 680px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head h2 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(30px, 3.6vw, 46px); color: var(--ink); margin-bottom: 16px;
}
.sec-head h2 em { font-style: italic; color: var(--forest); }
.sec-head p { font-size: 18px; color: var(--ink-mid); line-height: 1.6; }

/* Cards ---------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dcdbd4; }
a.card { text-decoration: none; }
.card-ic {
  width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px;
  transition: transform var(--dur-base) var(--ease);
}
.card:hover .card-ic { transform: scale(1.08) rotate(-3deg); }
.card h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 9px; letter-spacing: -.01em; }
.card p { font-size: 14.5px; color: var(--ink-mid); line-height: 1.6; }
/* "Explore … →" line at the foot of a linked card. */
.card-cta {
  margin-top: 14px; color: var(--forest); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.card-cta .btn-arw { transition: transform var(--dur-base) var(--ease); }
.card:hover .card-cta .btn-arw { transform: translateX(4px); }

/* Icon tints */
.t-forest { background: var(--forest-soft); color: var(--forest); }
.t-gold   { background: var(--gold-soft);   color: var(--gold); }
.t-sky    { background: var(--sky-soft);    color: var(--sky); }
.t-violet { background: var(--violet-soft); color: var(--violet); }
.t-coral  { background: var(--coral-soft);  color: var(--coral); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Tick list */
.ticks { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-mid); }
.ticks li::before {
  content: ''; width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%; background: var(--forest-soft);
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4.5L4 7L9.5 1.5' stroke='%231B5E3B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* Pull-quote card, shared by the solution pages. */
.quote-card { max-width: 820px; margin: 0 auto; text-align: center; padding: 44px; background: var(--white); }
.quote-stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; font-size: 14px; }
.quote-card blockquote {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.5;
  color: var(--ink); margin-bottom: 22px; font-weight: 400;
}
.quote-name { font-weight: 600; }
.quote-role { font-size: 13.5px; color: var(--ink-soft); }

/* ============================================================
   09  HOME — HUB DIAGRAM, VALUES, ORIGIN, TESTIMONIALS
   ============================================================ */
.journey { padding: 96px 0; background: var(--white); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

/* Hub: entry product on top, one shared core, two concurrent pillars.
   The connector is drawn with four pieces that must line up:
     .hub-stem            gold line, entry card  -> core pill
     .hub-forks::after    green line, core pill  -> horizontal rail
     .hub-forks::before   the horizontal rail
     .hub-fork-l/-r       the two legs, rail     -> pillar cards
   The rail ends and the legs sit at the horizontal centre of each
   pillar card: with a 20px grid gap that is (100% - 20px) / 4,
   i.e. calc(25% - 5px) in from each edge. */
.hub { max-width: 940px; margin: 56px auto 0; }
.hub-entry { max-width: 520px; margin: 0 auto; }
.hub-card {
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 26px;
  box-shadow: var(--shadow-sm); position: relative;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hub-card .hub-k { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; display: flex; align-items: center; gap: 9px; }
.hub-card .hub-ic {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease);
}
.hub-card:hover .hub-ic { transform: scale(1.08); }
.hub-card h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-family: 'Fraunces', serif; letter-spacing: -.01em; }
.hub-card p { font-size: 13.5px; color: var(--ink-mid); line-height: 1.55; }
.hub-entry .hub-card { border-color: var(--gold); }
.k-gold { color: var(--gold); } .k-forest { color: var(--forest); } .k-sky { color: var(--sky); }

.hub-connect { display: flex; flex-direction: column; align-items: center; }
.hub-stem { width: 2px; height: 30px; background: var(--gold); }
.hub-core {
  background: var(--forest); color: #fff; border-radius: 100px;
  padding: 11px 26px; font-size: 13.5px; font-weight: 600;
  text-align: center; box-shadow: var(--shadow-sm);
}
.hub-core b { color: #F2E4C3; }

/* Fork block: 16px stem, then the rail, then 18px legs. */
.hub-forks { position: relative; width: 100%; height: 34px; }
.hub-forks::after {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 2px; height: 16px; background: var(--forest);
  transform: translateX(-50%);
}
.hub-forks::before {
  content: ''; position: absolute; top: 16px;
  left: calc(25% - 5px); right: calc(25% - 5px); height: 2px;
  background: linear-gradient(90deg, var(--forest), var(--sky));
}
.hub-fork-l, .hub-fork-r { position: absolute; top: 16px; width: 2px; height: 18px; }
.hub-fork-l { left: calc(25% - 5px); background: var(--forest); }
.hub-fork-r { right: calc(25% - 5px); background: var(--sky); }

/* Connector draw-in, triggered when .hub scrolls into view. */
.js .hub .hub-stem,
.js .hub .hub-fork-l,
.js .hub .hub-fork-r { transform: scaleY(0); transform-origin: top center; }
.js .hub .hub-forks::after { transform: translateX(-50%) scaleY(0); transform-origin: top center; }
.js .hub .hub-forks::before { transform: scaleX(0); transform-origin: center; }
.js .hub.is-in .hub-stem { transform: scaleY(1); transition: transform .45s var(--ease); }
.js .hub.is-in .hub-forks::after { transform: translateX(-50%) scaleY(1); transition: transform .35s var(--ease) .35s; }
.js .hub.is-in .hub-forks::before { transform: scaleX(1); transition: transform .45s var(--ease) .6s; }
.js .hub.is-in .hub-fork-l,
.js .hub.is-in .hub-fork-r { transform: scaleY(1); transition: transform .3s var(--ease) 1s; }

.hub-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hub-pillars .hub-card.pillar-a { border-color: var(--forest-soft); border-top: 3px solid var(--forest); }
.hub-pillars .hub-card.pillar-b { border-color: var(--sky-soft); border-top: 3px solid var(--sky); }
.hub-concurrent {
  text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 6px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.hub-concurrent::before, .hub-concurrent::after { content: ''; width: 40px; height: 1px; background: var(--line); }

/* Value props */
.values { background: var(--canvas-warm); }
.value-item {
  border-top: 2px solid var(--ink); padding-top: 18px;
  transition: transform var(--dur-base) var(--ease);
}
.value-item:hover { transform: translateY(-3px); }
.value-item h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.value-item p { font-size: 14.5px; color: var(--ink-mid); line-height: 1.6; }

/* Origin story */
.origin { padding: 100px 0; }
.origin-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.origin blockquote {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: clamp(24px, 3vw, 36px); line-height: 1.4; color: var(--ink);
  margin: 24px 0 28px;
}
.origin blockquote span { color: var(--forest); }
.origin p { font-size: 16.5px; color: var(--ink-mid); line-height: 1.75; }
.origin-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 32px;
  background: var(--forest-tint); border: 1px solid var(--forest-soft);
  border-radius: 100px; padding: 11px 20px; font-size: 14px; color: var(--ink-mid);
}
.origin-badge b { color: var(--forest); }

/* Testimonials on the dark band */
.tests { background: var(--forest-deep); color: var(--white); }
.tests .sec-head h2 { color: var(--white); }
/* Body copy on the dark band must lighten too, or it renders
   near-black on near-black. */
.tests .sec-head p { color: rgba(255,255,255,.72); }
.tests .eyebrow { color: #E9C877; } .tests .eyebrow::before { background: #E9C877; }
.test-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg); padding: 30px;
  transition: transform var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.test-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.test-stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; font-size: 13px; }
.test-text { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.85); margin-bottom: 22px; }
.test-who { display: flex; align-items: center; gap: 12px; }
.test-av { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: #E9C877; flex-shrink: 0; }
.test-name { font-size: 14px; font-weight: 600; color: var(--white); }
.test-role { font-size: 12.5px; color: rgba(255,255,255,.55); }

/* ============================================================
   10  SOLUTION PAGES — CATEGORY INTROS & MODULE CARDS
   ============================================================ */
.cat { margin: 0 0 32px; }
.cat-lead { max-width: 720px; margin-bottom: 28px; }
.cat-lead .cat-kicker {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest-mid); margin-bottom: 14px;
}
.cat-lead .cat-kicker .num {
  width: 26px; height: 26px; border-radius: 8px; background: var(--forest);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 14px; font-weight: 600;
}
.cat-lead h2 { font-family: 'Fraunces', serif; font-size: clamp(26px, 3vw, 34px); font-weight: 500; color: var(--ink); margin-bottom: 10px; letter-spacing: -.01em; }
.cat-lead h2 em { font-style: italic; color: var(--forest); }
.cat-lead p { font-size: 16.5px; color: var(--ink-mid); line-height: 1.6; }
.cat-sky .cat-kicker { color: var(--sky); }
.cat-sky .cat-kicker .num { background: var(--sky); }

/* Module cards — two up. A lone card on the final row stretches to
   the full width so the grid never ends on a half-empty row. */
.mcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.mcards.one { grid-template-columns: 1fr; max-width: 760px; }
.mcards > .mcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mcard {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
  display: flex; flex-direction: column;
}
.mcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dcdbd4; }
.mcard-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mcard-ic {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 23px;
  transition: transform var(--dur-base) var(--ease);
}
.mcard:hover .mcard-ic { transform: scale(1.08) rotate(-3deg); }
.mcard-tt { flex: 1; min-width: 0; }
.mcard-tt h3 { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; }
.prog-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; margin-top: 5px; }
.prog-dp  { background: var(--violet-soft); color: var(--violet); }
.prog-myp { background: var(--gold-soft); color: var(--gold); }
.prog-all { background: var(--forest-soft); color: var(--forest); }
.mcard-desc { font-size: 14px; color: var(--ink-mid); line-height: 1.6; margin-bottom: 18px; }
.mcard-feats {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 9px 18px; margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.mcard-feats.single { grid-template-columns: 1fr; }
.mcard-feats li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-mid); line-height: 1.4; }
.mcard-feats li::before {
  content: ''; width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px;
  border-radius: 5px; background: var(--forest-soft);
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4.5L4 7L9.5 1.5' stroke='%231B5E3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
/* Every feature line is marked up inside <b>. Rendering all of them
   heavy removes the hierarchy, so the emphasis is dialled back to a
   readable medium weight. */
.mcard-feats li b { color: var(--ink); font-weight: 500; }
.mcard-sky .mcard-feats li::before {
  background: var(--sky-soft);
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4.5L4 7L9.5 1.5' stroke='%233B7DC4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Jump chips */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jump a {
  font-size: 13px; font-weight: 500; color: var(--ink-mid);
  background: var(--white); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 100px; text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.jump a:hover { border-color: var(--forest); color: var(--forest); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.jump.sky a:hover { border-color: var(--sky); color: var(--sky); }

/* Stat band */
.statband {
  background: var(--forest); color: #fff; border-radius: var(--radius-xl);
  padding: 44px; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; text-align: center;
}
.statband .n { font-family: 'Fraunces', serif; font-size: 40px; font-weight: 500; color: #F2E4C3; }
.statband .l { font-size: 14px; color: rgba(255,255,255,.8); margin-top: 4px; }

/* ============================================================
   11  PLATFORM — ARCHITECTURE LAYERS & ONBOARDING STEPS
   ============================================================ */
.ph-hero { padding: 84px 0 40px; }
.arch { background: var(--white); border-top: 1px solid var(--line-soft); }
.arch-layers { display: flex; flex-direction: column; gap: 14px; max-width: 900px; margin: 48px auto 0; }
.layer {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 30px;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.layer:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #dcdbd4; }
.layer-head { display: flex; align-items: center; gap: 14px; }
.layer-ic {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  transition: transform var(--dur-base) var(--ease);
}
.layer:hover .layer-ic { transform: scale(1.08); }
.layer-name { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--ink); }
.layer-sub { font-size: 11px; font-weight: 500; color: var(--ink-soft); }
.layer-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.layer-tags span {
  font-size: 13px; background: var(--white); border: 1px solid var(--line);
  color: var(--ink-mid); padding: 5px 12px; border-radius: 100px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.layer:hover .layer-tags span { border-color: #dcdbd4; }
.data-bar {
  max-width: 900px; margin: 14px auto 0; text-align: center;
  background: var(--forest); color: #fff; border-radius: var(--radius-md);
  padding: 16px; font-size: 14.5px; font-weight: 500; letter-spacing: .01em;
}
.data-bar b { color: #F2E4C3; }

.proc { background: var(--canvas-warm); }
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proc-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 26px; position: relative;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.proc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.proc-num {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 30px;
  color: var(--forest); opacity: .5; margin-bottom: 8px;
  transition: opacity var(--dur-base) var(--ease);
}
.proc-card:hover .proc-num { opacity: .85; }
.proc-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.proc-card p { font-size: 13.5px; color: var(--ink-mid); line-height: 1.55; }

/* ============================================================
   12  EDSY LEADS — PAIN GRID, FEATURES, FLOW, INTEGRATIONS
   ============================================================ */
/* Pain points read as problems, so the marker uses the coral accent —
   a green tick-coloured cross reads as a positive. */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pain {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 24px;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.pain:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #e4d3cd; }
.pain-x {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--coral-soft); color: var(--coral);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 14px;
  transition: transform var(--dur-base) var(--ease);
}
.pain:hover .pain-x { transform: scale(1.08) rotate(90deg); }
.pain h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 6px; }
.pain p { font-size: 13.5px; color: var(--ink-mid); line-height: 1.55; }

.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.feat {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dcdbd4; }
.feat-ic {
  width: 52px; height: 52px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  transition: transform var(--dur-base) var(--ease);
}
.feat:hover .feat-ic { transform: scale(1.08) rotate(-3deg); }
.feat h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.feat p { font-size: 14px; color: var(--ink-mid); line-height: 1.55; }

/* Four-step flow. The arrow is centred on the circle, not on the
   text block below it. */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 960px; margin: 48px auto 0; }
.flow-step { text-align: center; position: relative; padding: 0 12px; }
.flow-step:not(:last-child)::after {
  content: '\2192'; position: absolute; right: -8px; top: 30px;
  transform: translateY(-50%); line-height: 1;
  color: var(--forest); font-size: 22px;
  transition: transform var(--dur-base) var(--ease);
}
.flow-dot {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--forest-soft); border: 2px solid var(--forest);
  color: var(--forest); display: flex; align-items: center;
  justify-content: center; font-size: 26px; margin: 0 auto 14px;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.flow-step:hover .flow-dot { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(27,94,59,.18); }
.flow-step h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.flow-step p { font-size: 13px; color: var(--ink-mid); line-height: 1.5; }

.integ { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.integ span {
  background: var(--white); border: 1px solid var(--line); border-radius: 100px;
  padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--ink-mid);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.integ span:hover { transform: translateY(-2px); border-color: var(--forest); color: var(--forest); }

/* Callout that separates Edsy Leads from the Admissions module. */
.distinct {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--radius-md);
  padding: 18px 22px; max-width: 760px; margin: 28px auto 0; box-shadow: var(--shadow-sm);
}
.distinct .di-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--gold-soft); color: var(--gold); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.distinct p { font-size: 14px; color: var(--ink-mid); line-height: 1.55; margin: 0; }
.distinct b { color: var(--ink); }
.distinct a { color: var(--forest); font-weight: 600; text-decoration: none; }

/* ============================================================
   13  PRICING — PLANS, FAQ, SERVICE CARD
   ============================================================ */
/* Billing-period switch (pricing.html) ---------------------
   The toggle is scoped to .js: without scripting it is absent rather
   than dead, and the monthly prices — the markup default — still read
   correctly. Same principle as the reveal system's hidden start state. */
.bill-bar { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 34px; }
.bill-toggle { display: none; }
.js .bill-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--canvas-warm); border: 1px solid var(--line);
  border-radius: 100px;
}
.bill-opt {
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--ink-mid); background: none; border: none; cursor: pointer;
  padding: 13px 24px; border-radius: 100px;   /* 44px tall — thumb-sized */
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.bill-opt:hover { color: var(--ink); }
.bill-opt.is-on { background: var(--white); color: var(--forest); box-shadow: var(--shadow-sm); }
.bill-note { font-size: 13.5px; color: var(--ink-soft); text-align: center; }
.bill-note b { color: var(--gold); }

/* Cards stretch to a shared height (the grid default — never set
   align-items:start here). Equal card heights do NOT align the content
   inside them, which is what the .plan-desc / .plan-per / .plan-nowas
   reservations below are for. */
/* minmax(0,…) not 1fr: a plain 1fr floors each column at its content's
   min-content width, so one wide row (the cancelled price + its tag) silently
   pulled the paid columns wider and squeezed Starter. This pins all three
   columns equal, and anything too wide now shows as overflow instead of
   quietly skewing the row. */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
/* Each paid card carries both cost blocks; data-billing on the grid picks
   which one shows. No price strings live in JS — it only flips this. */
.price-grid[data-billing="monthly"] .plan-cost-y,
.price-grid[data-billing="yearly"]  .plan-cost-m { display: none; }
.plan {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dcdbd4; }
.plan.pop { border: 2px solid var(--forest); box-shadow: var(--shadow-md); }
.plan.pop:hover { border-color: var(--forest); box-shadow: var(--shadow-lg); }
.pop-tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--forest); color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; padding: 5px 16px; border-radius: 100px;
}
.plan-name { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); margin-bottom: 6px; }
/* Two lines reserved — the longest plan description wraps at three columns,
   and a short one next to it would otherwise lift its whole card's price,
   CTA and feature list out of line with its neighbours'. */
.plan-desc { font-size: 14px; color: var(--ink-mid); margin-bottom: 20px; min-height: 45px; }
.plan-price { font-family: 'Fraunces', serif; font-size: 44px; font-weight: 500; color: var(--ink); line-height: 1; }
.plan-price small { font-size: 15px; color: var(--ink-soft); font-family: 'Inter', sans-serif; font-weight: 400; }
/* Two lines are always reserved: the annual variant needs both once the
   cards narrow, and without the reservation the CTAs below would fall out
   of line with each other and shift every time the billing toggle flips.
   The bottom margin is trimmed to keep the overall spacing unchanged. */
.plan-per { font-size: 13px; color: var(--ink-soft); margin: 6px 0 12px; min-height: 42px; }

/* Standard rate, shown cancelled above the inaugural price. Fixed height
   rather than min-height so the row is exactly as tall as .plan-nowas
   reserves below — the two must stay in step (44 + 4 = 48px). */
.plan-was { display: flex; align-items: center; gap: 10px; height: 44px; margin-bottom: 4px; }
/* A corner-to-corner diagonal reads as "cancelled" far more strongly than
   text-decoration's horizontal line. Drawn as a hard-stop gradient rather
   than a rotated pseudo-element so it spans the box at any price width:
   for a corner keyword the gradient axis is perpendicular to that diagonal,
   so a thin band at 50% lands exactly on it. */
/* Sized close to .plan-price (34 vs 44px) and in the same serif, so the two
   figures read as one before/after pair rather than a footnote and a price. */
.was-fig {
  display: inline-block; padding: 1px 4px;
  font-family: 'Fraunces', serif; font-size: 34px; font-weight: 500;
  line-height: 1.1; color: var(--ink-soft);
  text-decoration: none;
  background-image: linear-gradient(to top right,
    transparent calc(50% - .75px), currentColor calc(50% - .75px),
    currentColor calc(50% + .75px), transparent calc(50% + .75px));
}
.plan-save {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-soft);
  padding: 4px 9px; border-radius: 100px; white-space: nowrap;
}
/* The ₹0 plan has no standard rate to cancel, so its cost block is padded by
   the exact height of that row instead (.plan-was height + margin = 48px),
   which keeps all three prices on one line. Stretching the cards to a shared
   height does not do this — it aligns the card edges, not their contents. */
.plan-nowas .plan-cost { padding-top: 48px; }
.plan .btn { width: 100%; justify-content: center; margin-bottom: 22px; }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.plan-feats li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-mid); align-items: flex-start; }
.plan-feats li::before {
  content: ''; width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%; background: var(--forest-soft);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4.5L4 7L9.5 1.5' stroke='%231B5E3B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.plan-feats .head { font-weight: 600; color: var(--ink); font-size: 13px; margin-top: 6px; }
.plan-feats .head::before { display: none; }

.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; transition: border-color var(--dur-base) var(--ease); }
.faq-item:hover { border-bottom-color: var(--forest-soft); }
.faq-item h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.faq-item p { font-size: 15px; color: var(--ink-mid); line-height: 1.6; }

/* Two-panel service card (website design) */
.service-card {
  display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-sm);
}
.service-card .sc-body { padding: 38px 36px; }
.service-card .sc-side {
  background: linear-gradient(150deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: #fff; padding: 38px 36px; display: flex; flex-direction: column;
  justify-content: center; position: relative; overflow: hidden;
}
.service-card .sc-side::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(200,154,60,.22), transparent 50%);
}
.service-card .sc-side > * { position: relative; }
.service-card .sc-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--forest-soft); color: var(--forest); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px; }
.service-card h3 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.service-card .sc-desc { font-size: 15px; color: var(--ink-mid); line-height: 1.6; margin-bottom: 20px; }
.service-card .sc-side h4 { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; margin-bottom: 16px; color: #fff; }
.sc-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,.9); line-height: 1.45; }
.sc-list li::before {
  content: ''; width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border-radius: 5px; background: rgba(255,255,255,.15);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4.5L4 7L9.5 1.5' stroke='%23F2E4C3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* Scope note above the pricing table */
.price-scope {
  background: var(--forest-tint); border: 1px solid var(--forest-soft);
  border-radius: var(--radius-md); padding: 16px 22px;
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px;
}
.price-scope .ps-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--forest); color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.price-scope p { font-size: 14.5px; color: var(--ink-mid); line-height: 1.55; margin: 0; }
.price-scope b { color: var(--forest); }

/* Custom-pricing card for the non-Leads products */
.custom-price {
  background: var(--forest); color: #fff; border-radius: var(--radius-lg);
  padding: 36px; text-align: center; position: relative; overflow: hidden;
}
.custom-price::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(200,154,60,.2), transparent 45%);
}
.custom-price > * { position: relative; }
.custom-price h3 { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; margin-bottom: 12px; }
.custom-price p { font-size: 15.5px; color: rgba(255,255,255,.85); line-height: 1.6; max-width: 540px; margin: 0 auto 22px; }

/* ============================================================
   14  COMPANY & CONTACT
   ============================================================ */
.story { max-width: 760px; margin: 0 auto; }
.story p { font-size: 17px; color: var(--ink-mid); line-height: 1.8; margin-bottom: 20px; }
.story p strong { color: var(--ink); }

/* Timeline. The spine draws downward as the list enters view. */
.tl { max-width: 640px; margin: 48px auto 0; position: relative; padding-left: 36px; }
.tl::before {
  content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--forest), var(--sky));
}
.js .tl::before { transform: scaleY(0); transform-origin: top center; }
.js .tl.is-in::before { transform: scaleY(1); transition: transform .9s var(--ease); }
.tl-item { position: relative; padding-bottom: 30px; }
/* Without this the spine runs on past the final dot. */
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -32px; top: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--forest);
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.tl-item:hover::before { transform: scale(1.25); background: var(--forest-soft); }
.tl-year { font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; color: var(--forest); font-weight: 600; margin-bottom: 3px; }
.tl-item p { font-size: 15px; color: var(--ink-mid); line-height: 1.55; }

.vals { background: var(--canvas-warm); }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-info h2 { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 500; margin-bottom: 14px; }
.contact-info .eyebrow + h2 { margin-top: 14px; }
.contact-info p { font-size: 16px; color: var(--ink-mid); line-height: 1.65; margin-bottom: 26px; }
.contact-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.contact-line .ic {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  background: var(--forest-soft); color: var(--forest);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  transition: transform var(--dur-base) var(--ease);
}
.contact-line:hover .ic { transform: scale(1.08); }
.contact-line a, .contact-line span { font-size: 15px; color: var(--ink); text-decoration: none; }
.contact-line a:hover { color: var(--forest); }
.contact-line small { display: block; font-size: 12.5px; color: var(--ink-soft); }

.form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.form label { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.form input, .form textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 14px; margin-bottom: 16px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* Focus keeps a visible indicator — a coloured ring replaces the
   default outline rather than removing it. */
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(27,94,59,.12);
}
.form textarea { resize: vertical; min-height: 96px; }
.form .btn { width: 100%; justify-content: center; }
.form-note { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin-top: 12px; }
.form-ok { color: var(--forest); font-weight: 500; }

/* ============================================================
   15  CTA BAND
   ============================================================ */
.cta-band { padding: 96px 0; }
.cta-box {
  position: relative; overflow: hidden;
  background: var(--forest); color: var(--white);
  border-radius: var(--radius-xl); padding: 72px 56px; text-align: center;
}
.cta-box::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(200,154,60,.18), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(46,125,82,.5), transparent 50%);
  pointer-events: none;
  /* Slow, barely-there drift keeps the band from feeling static. */
  animation: cta-drift 22s ease-in-out infinite alternate;
}
@keyframes cta-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(1.5%, -1.5%, 0); }
}
.cta-box > * { position: relative; }
.cta-box h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(30px, 4vw, 48px); margin-bottom: 18px; }
.cta-box h2 em { font-style: italic; color: #F2E4C3; }
.cta-box p { font-size: 18px; color: rgba(255,255,255,.82); max-width: 520px; margin: 0 auto 32px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-onforest { background: var(--white); color: var(--forest); padding: 15px 30px; font-size: 16px; }
.btn-onforest:hover { background: #F2E4C3; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.btn-onforest-ghost {
  background: transparent; color: var(--white); padding: 15px 26px; font-size: 16px;
  border: 1px solid rgba(255,255,255,.3);
}
.btn-onforest-ghost:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); transform: translateY(-2px); }
.cta-micro { margin-top: 24px; font-size: 13.5px; color: rgba(255,255,255,.6); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   16  FOOTER
   ============================================================ */
footer { background: var(--forest-deep); color: rgba(255,255,255,.7); padding: 72px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand .brand-name { color: var(--white); }
.foot-tag { margin-top: 16px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.55); max-width: 280px; }
.foot-col h4 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 16px; }
.foot-col a {
  display: block; font-size: 14px; color: rgba(255,255,255,.72);
  text-decoration: none; padding: 5px 0;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.foot-col a:hover { color: var(--white); transform: translateX(3px); }
.foot-bottom {
  margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.5);
}

/* ============================================================
   17  RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* .nav-right's Log in is a dropdown wrapper now, so the whole wrapper
     is hidden here — not just the .nav-ghost trigger inside it. */
  .nav-menu, .nav-right .has-drop { display: none; }
  .nav-toggle { display: block; }
  .nav-menu.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 12px 20px 20px; box-shadow: var(--shadow-md);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav-menu.open .nav-link { padding: 12px; font-size: 16px; }
  .nav-menu.open .nav-link::after { display: none; }
  .nav-menu.open .drop {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 4px 0 4px 20px; min-width: 0;
    background: transparent;
  }
  /* "Log in" is hidden from .nav-right at this width, so the mobile
     menu carries the same dropdown instead. Its trigger and panel are
     styled by the .nav-link / .drop rules above; the wrapper only needs
     to become visible and pick up a divider. */
  .nav-menu.open .nav-mobile-only {
    display: block;
    border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 6px;
  }
}
@media (max-width: 860px) {
  .price-grid { grid-template-columns: 1fr; }
  /* Stacked cards have no neighbours to line up with, so the rows reserved
     for that in the three-column layout are released — kept, they would
     read as dead space (worst on the ₹0 card, which reserves all three). */
  .plan-desc, .plan-per { min-height: 0; }
  .plan-nowas .plan-cost { padding-top: 0; }
  .pain-grid, .feat-grid { grid-template-columns: 1fr; }
  /* Two-up flow: the arrow after the second step would point at a
     wrapped row, so it is dropped. */
  .flow { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .flow-step:nth-child(2)::after { display: none; }
}
@media (max-width: 820px) {
  .mcards { grid-template-columns: 1fr; }
  .mcard-feats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .contact { grid-template-columns: 1fr; gap: 32px; }
  .service-card { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .layer { grid-template-columns: 1fr; gap: 16px; }
  .proc-grid { grid-template-columns: 1fr; }
  /* The two pillars stack, so the fork is replaced by a single stem. */
  .hub-pillars { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; position: relative; }
  .hub-forks { display: none; }
  .hub-pillars::before {
    content: ''; position: absolute; top: -20px; left: 50%;
    width: 2px; height: 20px; background: var(--forest); transform: translateX(-50%);
  }
  .hub-concurrent { margin: 14px 0 0; }
}
@media (max-width: 640px) {
  .wrap, .nav-inner { padding-left: 20px; padding-right: 20px; }
  /* Jump chips become primary navigation on a phone — give them a
     44px tap target. */
  .jump a { padding: 11px 16px; font-size: 14px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .cta-band { padding: 64px 0; }
  .cta-box { padding: 48px 24px; }
  .quote-card { padding: 32px 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; gap: 8px; }
}
@media (max-width: 520px) {
  /* Long button labels must wrap rather than overflow the viewport —
     e.g. "Book a demo for a tailored quote →" on the pricing page. */
  .btn { white-space: normal; text-align: center; }
  .flow { grid-template-columns: 1fr; }
  .flow-step::after { display: none !important; }
  .mcard-feats, .mcard-feats.single { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px; }
  .plan, .form { padding: 24px; }
}

/* ============================================================
   18  REDUCED MOTION
   Everything decorative stops. Reveal targets are forced visible so
   no content can be trapped in its hidden start state.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal].is-in,
  .js [data-draw],
  .js [data-draw].is-in,
  .js .hub .hub-stem,
  .js .hub .hub-fork-l,
  .js .hub .hub-fork-r { opacity: 1 !important; transform: none !important; }
  .js .hub .hub-forks::after { transform: translateX(-50%) !important; }
  .js .hub .hub-forks::before,
  .js .tl::before,
  .js .eyebrow::before { transform: none !important; }
}