/* ============================================================
   Hero Personas — landing page hero with 4 persona cards
   Tuned to match the Figma proto:
   - Big H1 (~clamp 2.75rem .. 5.25rem)
   - Larger persona cards with prominent illustrations
   - Real arc swooshes via SVG-filling pseudo elements
   ============================================================ */

/* The theme renders .site-header transparently with white nav text — designed
   for a dark hero slide image behind it. With the persona-card hero (mostly
   white), restore the dark-navy header bar so the existing white logo and
   white nav text stay readable.
   The Figma proto shows a white header but the brand logo SVG is
   fill="white" — switching to white-bg requires uploading a colored
   logo SVG. Tracked as a follow-up; dark navy here keeps the brand
   readable in the meantime. */
body.page-id-2 .site-header,
.has-hero-personas .site-header {
  background-color: #1a1f3a;
}

/* No footer on landing per Figma (the dark purple footer with logo +
   contact + newsletter is irrelevant on the persona-driven landing page). */
body.page-id-2 .site-footer {
  display: none !important;
}
/* Hide the "Schedule a call" purple pill that sits below the trust strip
   — not present in the Figma landing flow. */
body.page-id-2 .hero-personas__schedule {
  display: none !important;
}

/* When the colored-fill logo SVG (/images/svg/logo-color.svg) is present,
   PHP adds body.has-color-logo. Flip the header to the Figma white-bg
   design. Override stays scoped to pages that would otherwise force navy. */
body.has-color-logo.page-id-2 .site-header,
body.has-color-logo .has-hero-personas .site-header {
  background-color: #ffffff;
}
body.has-color-logo .site-header .main-navigation a,
body.has-color-logo .site-header .login,
body.has-color-logo .site-header .menu-item a {
  color: #1a1f3a;
}

.hero-personas-block {
  position: relative;
  background: #fff;
  padding: 6rem 1.5rem 1rem;
  /* Always fill at least the viewport height so the swooshes can sweep
     through the entire visible area instead of cutting off when the
     content alone is shorter than the screen. */
  min-height: 100vh;
  overflow: hidden;
  /* Per Figma the persona-driven landing uses Open Sans throughout —
     overrides the theme's IBM Plex Sans default inside this block. */
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

.hero-personas-block,
.hero-personas-block h1,
.hero-personas-block h2,
.hero-personas-block p,
.hero-personas-block .persona-card,
.hero-personas-block .persona-card__label {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Sticky-header clearance + comfortable breathing room above the H1. */
body.sticky-header > #page .hero-personas-block:first-of-type,
.entry-content > .hero-personas-block:first-of-type {
  padding-top: 9.5rem;
}
@media (max-width: 900px) {
  body.sticky-header > #page .hero-personas-block:first-of-type,
  .entry-content > .hero-personas-block:first-of-type {
    padding-top: 7rem;
  }
}

.hero-personas__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Decorative swooshes (real arcs, not full circles) ---------- */
.hero-personas__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-personas__decor .swoosh {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
}

/* Purple swoosh — scales with viewport width so on wider screens the
   curve continues out past the visible area instead of stopping mid-page.
   width 40vw (clamped 720..1100) keeps the natural aspect; height
   1100..1700 ensures the bottom endpoint stays well below the hero. */
.hero-personas__decor .swoosh--purple {
  width: clamp(720px, 40vw, 1100px);
  height: clamp(1465px, 80vw, 2240px);
  left: -100px;
  top: -80px;
  right: auto;
  bottom: auto;
  transform: none;
  background-size: 100% 100%;
  background-position: top left;
}

/* Yellow swoosh — scales with viewport so the curve extends through
   more of the hero on wider screens. Width 60vw clamped; height
   scales to span deeper into the page (previously stopped at y=530
   on a 934-tall hero, leaving 400px bare). */
.hero-personas__decor .swoosh--yellow {
  width: clamp(1100px, 60vw, 1600px);
  height: clamp(610px, 50vw, 1100px);
  right: -200px;
  top: -80px;
  left: auto;
  bottom: auto;
  transform: none;
  background-size: 100% 100%;
  background-position: top left;
  opacity: 1;
}

/* Blue swoosh — anchored to the RIGHT edge so it always sweeps off
   the right side regardless of viewport width. On wider viewports the
   element widens via clamp() so the curve continues past both edges
   instead of stopping mid-page. Right-anchoring keeps the visible exit
   point flush with the right edge. */
.hero-personas__decor .swoosh--blue {
  position: absolute;
  width: clamp(1100px, 85vw, 1900px);
  height: clamp(520px, 30vw, 720px);
  right: -100px;
  top: clamp(440px, 28vw, 600px);
  bottom: auto;
  left: auto;
  transform: none;
  background-size: 100% 100%;
  background-position: top left;
  opacity: 1;
}

/* ---------- Typography ---------- */
.hero-personas__heading {
  /* Figma spec: 64px Open Sans 800, 2-line wrap at desktop. The
     pixel max-width forces the break between "personalised" and
     "AI marking assistant" without relying on ch units (which vary
     with font metrics). Below 900px the clamp shrinks the type. */
  font-size: clamp(2.25rem, 4.8vw, 4rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111;
  margin: 0 auto 1.25rem;
  max-width: 720px;
}

.hero-personas__sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  font-weight: 500;
  color: #6b6b78;
  max-width: 580px;
  margin: 0 auto 3rem;
}

.hero-personas__persona-label {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 1.5rem;
}

/* ---------- Persona card grid — proto-tuned ---------- */
.hero-personas__grid {
  list-style: none;
  padding: 0;
  margin: 0 auto 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  align-items: stretch;
  /* Cards ~25% smaller (4×190 ≈ 760) with bigger 3rem gaps (3×48 ≈ 144)
     so the total row width stays close to the previous 1060. */
  gap: 3rem;
  max-width: 920px;
}

/* Force each cell to fill the grid row's height. Without this, Chrome
   sizes the last grid cell to the row height (322px in the present
   layout) while the first three stay at content height (307px), even
   though `align-items: stretch` is the grid default. Adding explicit
   `height: 100%` on the cell makes every cell stretch, and the
   `.persona-card { height: 100% }` below then resolves cleanly. */
.hero-personas__cell {
  list-style: none;
  display: flex;
  height: 100%;
}
/* The theme's common-styles injects `ul li::before { content: "•" }` as a
   decorative bullet. Override on every list we render in this block. */
.hero-personas__cell::before,
.hero-personas__grid > li::before,
.hero-personas__trust-logos > li::before {
  content: none !important;
  display: none !important;
}

.persona-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-height: 220px;
  padding: 0.75rem 0.65rem 0.95rem;
  background: #fff;
  border: 1.5px solid #d6d6dd;
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
}

.persona-card:hover,
.persona-card:focus-visible {
  transform: translateY(-3px);
  border-color: #6b21ff;
  box-shadow: 0 10px 30px rgba(107, 33, 255, 0.14);
  outline: none;
}

/* Fixed illustration zone — locks every card to the same vertical layout
   regardless of each SVG's intrinsic aspect ratio. Without this the
   School Leader card (133/154 aspect) renders ~30px shorter than
   Student/Parent (1/1 aspect). */
.persona-card__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 150px;
  margin: 0 auto 0.75rem;
  flex: 0 0 auto;
}

/* Fill the illustration zone explicitly with object-fit:contain so the
   image's intrinsic aspect ratio has zero effect on layout — preserves
   visual fidelity (no distortion) while guaranteeing every card has
   the same vertical footprint regardless of SVG aspect (153/145 vs
   134/134 vs 140/140 vs 154/133). Overrides the global
   `img { width: auto }` from the Dux head bundle. */
.persona-card__illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

.persona-card__label {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.35rem;
}

.persona-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #6b21ff;
  line-height: 1;
}
/* When the arrow.svg is inlined into the card, size it to match the
   text-arrow it replaces — keep the rendered footprint identical so
   card heights/baselines don't shift. */
.persona-card__arrow svg {
  display: block;
  width: 18px;
  height: auto;
}

/* ---------- Trust strip ---------- */
.hero-personas__trust {
  margin-top: 3rem;
  margin-bottom: 0;
  text-align: center;
}

.hero-personas__trust-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 1.25rem;
}

/* Trust crests: spread across the full visible section width with wide
   gaps. The row breaks out of .hero-personas__inner (max-width 1240) by
   120px on each side, giving ~1480px theoretical (clipped to the hero
   block's overflow:hidden bounds ≈ 1392 at 1440 viewport). Smaller per
   crest (140 vs 180) so 8 fit with comfortable ~35px space-between
   gaps instead of being shrunk to fill the row. */
.hero-personas__trust-logos {
  list-style: none;
  padding: 0;
  width: calc(100% + 240px);
  margin-left: -120px;
  margin-right: -120px;
  max-width: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

.hero-personas__trust-logos li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

/* The WebP Express plugin auto-wraps every <img> in a <picture> element
   that prefers a WebP version generated under /wp-content/webp-express/.
   When we drop a fresh PNG into the theme, those WebPs don't exist yet
   and the picture fails to fall back to the <img>. Rendering crests as
   CSS background-images on a <span> sidesteps the plugin entirely. */
.hero-personas__trust-crest {
  display: block;
  width: 140px;
  height: 88px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.hero-personas__trust-logos img {
  display: block;
  height: 88px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .hero-personas__trust-logos {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 900px) {
  .hero-personas__trust-logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.25rem;
  }
  .hero-personas__trust-logos img,
  .hero-personas__trust-crest {
    height: 80px;
    width: 140px;
  }
  .hero-personas__trust-logos li {
    height: 92px;
  }
}

/* ---------- Schedule call pill (centered, prominent) ---------- */
.hero-personas__schedule {
  margin-top: 2.5rem;
  text-align: center;
}

.hero-personas__schedule-pill {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  background: #6b21ff;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-personas__schedule-pill:hover,
.hero-personas__schedule-pill:focus-visible {
  background: #5418d4;
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-personas__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 520px;
    gap: 1.25rem;
  }
  .persona-card {
    min-height: 200px;
  }
  .persona-card__illustration img {
    max-width: 120px;
  }
}

@media (max-width: 520px) {
  .hero-personas-block {
    padding: 2.5rem 1rem 3rem;
  }
  .hero-personas__heading {
    max-width: none;
  }
  .hero-personas__trust-logos {
    gap: 1rem 1.25rem;
  }
  .hero-personas__trust-logos img {
    height: 40px;
  }
}

/* ============================================================
   Persona popups (Popup Maker content) — kept; not affected by
   landing layout changes.
   ============================================================ */

/* The persona popups had theme_id="" in their settings, so Popup Maker
   serves them with a transparent container by default. Force a real modal
   look + the close button visible inside the white box. */
.pum-container:has(.pum-persona),
#popmake-62049,
#popmake-62050,
#popmake-62051,
#popmake-62052 {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(15, 15, 35, 0.22) !important;
  padding: 0 !important;
  border: 0 !important;
}

/* The default close button position so users can dismiss the modal */
.pum-container:has(.pum-persona) .pum-close,
#popmake-62049 .pum-close,
#popmake-62050 .pum-close,
#popmake-62051 .pum-close,
#popmake-62052 .pum-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px;
  height: 32px;
  border: 0 !important;
  background: transparent !important;
  color: #6b6b78 !important;
  font-size: 20px !important;
  cursor: pointer;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.pum-container:has(.pum-persona) .pum-close:hover,
#popmake-62049 .pum-close:hover,
#popmake-62050 .pum-close:hover,
#popmake-62051 .pum-close:hover,
#popmake-62052 .pum-close:hover {
  background: #f2f2f5 !important;
  color: #111 !important;
}

/* Dim background overlay (covers the page behind the modal) */
.pum-overlay { background: rgba(15, 15, 35, 0.55) !important; }

.pum-container .pum-persona {
  text-align: center;
  padding: 1.75rem 1.75rem 2rem;
}

.pum-container .pum-persona__icon img {
  display: block;
  margin: 0 auto 1.25rem;
  width: 120px;
  height: 120px;
  object-fit: contain;
}

/* SchoolLeader modal uses a wider "two people with laptop" sales illustration
   (working.svg, 285x262) instead of the persona character. Bump the icon
   container height so the wider aspect fits properly. */
.pum-container .pum-persona--schoolleader .pum-persona__icon img {
  width: 160px;
  height: auto;
  max-height: 120px;
}

.pum-container .pum-persona__heading {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  color: #111;
  margin: 0 auto 2rem;
  max-width: 32ch;
}

.pum-container .pum-persona__options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.pum-container .pum-persona__cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  background: #f4f0ff;
  border-radius: 16px;
  text-decoration: none;
  color: #111;
  border: 1.5px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pum-container .pum-persona__cta:hover,
.pum-container .pum-persona__cta:focus-visible {
  background: #ebe2ff;
  border-color: #6b21ff;
  outline: none;
}

/* Naked icon on the LEFT of each option row — no white tile, no shadow,
   just the pictogram. Sits vertically centered with the text via the
   row's align-items:center on .pum-persona__cta. Matches Figma at ~72px. */
.pum-container .pum-persona__cta-icon {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.pum-container .pum-persona__cta-icon img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.pum-container .pum-persona__cta-body {
  flex: 1 1 auto;
  min-width: 0;
}

.pum-container .pum-persona__cta strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.45rem;
  letter-spacing: -0.01em;
}

.pum-container .pum-persona__cta span {
  display: block;
  font-size: 0.95rem;
  color: #6b6b78;
  line-height: 1.45;
}
/* The cta-icon container is itself a span — exempt it from the body span styles above. */
.pum-container .pum-persona__cta .pum-persona__cta-icon {
  font-size: inherit;
  color: inherit;
  line-height: 1;
}

.pum-container .pum-persona__cta--essay {
  background: #e6f5ff;
}
.pum-container .pum-persona__cta--essay:hover,
.pum-container .pum-persona__cta--essay:focus-visible {
  background: #cfedff;
  border-color: #1e9be9;
}

.pum-container .pum-persona__cta--study {
  background: #f1eaff;
}
.pum-container .pum-persona__cta--study:hover,
.pum-container .pum-persona__cta--study:focus-visible {
  background: #e0d2ff;
  border-color: #6b21ff;
}

.pum-container .pum-persona__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #b1b1bd;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.1rem 0;
}

.pum-container .pum-persona__footer {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  color: #6b6b78;
  text-align: center;
}

.pum-container .pum-persona__footer a {
  color: #6b21ff !important;
  font-weight: 700;
  text-decoration: underline;
}
/* Modal CTA option titles + subtitles: ensure consistent weights vs Figma */
.pum-container .pum-persona__cta strong {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pum-container .pum-persona__cta span {
  font-weight: 500;
}

/* SchoolLeader modal pivots from option-grid to a single sales CTA pattern. */
.pum-container .pum-persona__cta-primary {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: #6b21ff;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
  margin: 0.5rem auto 0;
}

.pum-container .pum-persona__cta-primary:hover,
.pum-container .pum-persona__cta-primary:focus-visible {
  background: #5413d6;
  transform: translateY(-1px);
  outline: none;
  color: #fff;
}

.pum-container .pum-persona--schoolleader {
  text-align: center;
}

/* ---------- "Try for free" self-id modal ----------
   Reuses the homepage hero's .persona-card markup so each card is
   visually identical to the landing's persona cards (illustration zone
   + label + arrow). Renders in a 1x4 row inside a wider 1000px modal. */
.pum-container .pum-persona--selfid {
  text-align: center;
  padding: 1.5rem 1.25rem 2rem;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
.pum-container .pum-persona--selfid .pum-persona__heading {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 auto 1.5rem;
  letter-spacing: -0.01em;
}
/* Override the landing grid's default mb so the popup keeps tight padding */
.pum-container .pum-persona--selfid .hero-personas__grid {
  margin: 0 auto;
  max-width: 100%;
  gap: 1.25rem;
}

/* SchoolLeader options are a simple LIST (icon + label, no description)
   per design — override the bigger card layout used by Teacher/Student/
   Parent and shrink the icons + padding. */
.pum-container .pum-persona--schoolleader .pum-persona__cta {
  padding: 1.1rem 1.4rem;
  gap: 1.1rem;
}
.pum-container .pum-persona--schoolleader .pum-persona__cta-icon,
.pum-container .pum-persona--schoolleader .pum-persona__cta-icon img {
  width: 36px;
  height: 36px;
}
.pum-container .pum-persona--schoolleader .pum-persona__cta strong {
  font-size: 1.05rem;
  margin-bottom: 0;
}
/* star.svg ships as #F0BB0E (yellow). Design wants brand purple to match
   the other two icons. Approximate the yellow -> purple recolor with
   a CSS filter chain (saturate + hue-rotate) since modifying the SVG
   itself is off-limits. */
.pum-container .pum-persona--schoolleader li:first-child .pum-persona__cta-icon img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(81%) saturate(6450%) hue-rotate(269deg) brightness(91%) contrast(108%);
}

.pum-container.pum-theme-default-theme {
  border-radius: 18px !important;
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.18) !important;
}

/* Mode toggle hooks (driven by JS) — kept for future use on other pages */
body.mode-ai-marking .persona-card {}
body.mode-study-guides .persona-card {}