/* Helper Helper for High Schools Marketing Site */

/* === Figtree (self-hosted) === */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === Caveat (self-hosted, hand-written) === */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Material Symbols === */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/assets/fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}

/* === Reset & Variables === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-primary: #0096D6;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #dbeafe;
  --color-secondary: #059669;
  --color-secondary-light: #d1fae5;
  --color-text: #1f2937;
  --color-text-light: #6b7280;
  --color-text-lighter: #9ca3af;
  --color-bg: #fff;
  --color-bg-light: #f9fafb;
  --color-bg-alt: #f3f4f6;
  --color-border: #e5e7eb;
  --color-black: #111827;
  --color-white: #fff;
  --color-success: #059669;
  --color-error: #dc2626;

  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --container: 72rem;
  --padding: 1.5rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* NHS landing page palette */
  --navy: #2B5EA7;
  --navy-mid: #1A3660;
  --navy-dark: #121F3A;
  --terra: #C75B2A;
  --cinnabar: #D64933;
  --text: #1f2937;
  --text-light: #6b7280;
  --text-lighter: #9ca3af;
  --bg: #fff;
  --bg-light: #f9fafb;
  --bg-alt: #f3f4f6;
  --border: #e5e7eb;
  --stone: #E8E0D4;
}

/* === Base === */
html {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  /* Full-bleed sections use width: 100vw, which includes the vertical scrollbar, so on desktop
     browsers with a visible scrollbar each band overhangs the right edge by ~8px and creates a
     horizontal scroll. Clip it at the root (not on body, which would break the sticky header). */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--padding);
  font-size: 1.2rem;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
li { list-style: none; }
strong, b { font-weight: 600; }

/* === Header (sticky + dropdowns) === */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--padding);
  margin-left: calc(-1 * var(--padding));
  margin-right: calc(-1 * var(--padding));
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: padding 0.3s ease;
}

.header--scrolled {
  padding: 0.75rem var(--padding);
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header--scrolled::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  z-index: -1;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-black);
}

.logo:hover {
  text-decoration: none;
}

.logo-text {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: font-size 0.3s ease;
}

.logo-tagline {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2B5EA7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: font-size 0.3s ease;
}

.header--scrolled .logo-text {
  font-size: 1.25rem;
}

.header--scrolled .logo-tagline {
  font-size: 0.7rem;
}

.menu {
  display: flex;
  align-items: center;
}

.menu-list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list > li > a,
.menu-list > li > .menu-item-link {
  padding: 0.5rem 0.75rem;
  font-size: 1.05rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background 0.15s, font-size 0.3s ease;
  display: block;
}

.header--scrolled .menu-list > li > a,
.header--scrolled .menu-list > li > .menu-item-link {
  font-size: 0.9rem;
}

.menu-list > li > a:hover,
.menu-list > li > .menu-item-link:hover,
.menu-item.is-open > .menu-item-link {
  background: var(--color-bg-alt);
  text-decoration: none;
}

.menu-list > li > a[aria-current],
.menu-list > li > .menu-item-link.is-active {
  color: #C75B2A;
  font-weight: 600;
}

/* Parents with dropdowns are links (Who We Help, Features, Technical Docs, Pricing) or, for Sign In, a
   <button>; reset the button chrome so it sits like the links. */
.menu-list > li > .menu-item-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.menu-list > li > .menu-item-link:focus-visible {
  outline: 2px solid #2B5EA7;
  outline-offset: 2px;
}

/* Arrow indicator: a small chevron on desktop (the parent is a toggle, so signal it), larger on mobile */
.dropdown-arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

@media (min-width: 60.0625rem) {
  .menu-item:hover > .menu-item-link .dropdown-arrow,
  .menu-item.is-open > .menu-item-link .dropdown-arrow {
    transform: translateY(1px) rotate(-135deg);
  }
}

/* Dropdown menus */
.menu-item {
  position: relative;
}

/* Invisible hover zone extending below the menu item */
.menu-item::after {
  content: '';
  position: absolute;
  left: -1rem;
  right: -1rem;
  top: 100%;
  height: 1rem;
}

.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: -0.5rem;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.35rem;
  z-index: 1001;
  list-style: none;
}

.menu-item:hover > .dropdown,
.menu-item.is-open > .dropdown {
  display: block;
}

.dropdown a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: calc(var(--radius) - 2px);
  transition: background 0.1s;
  white-space: nowrap;
}

.dropdown a:hover {
  background: var(--color-bg-alt);
  color: #C75B2A;
  text-decoration: none;
}

.dropdown a[aria-current] {
  color: #C75B2A;
  font-weight: 600;
}

.menu-cta-item {
  margin-left: 0.5rem;
}

.menu-cta {
  background: linear-gradient(135deg, #2B5EA7 0%, #1A3660 100%) !important;
  color: var(--color-white) !important;
  font-weight: 700 !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: var(--radius) !important;
}

.menu-cta:hover {
  background: linear-gradient(135deg, #1A3660 0%, #121F3A 100%) !important;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-black);
  transition: transform 0.2s;
}

/* Offset anchor scroll targets for sticky header */
[id] {
  scroll-margin-top: 5rem;
}

/* === Main === */
.main {
  min-height: 50vh;
}

/* === Buttons === */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* === Hero === */
.hero {
  margin: 4rem 0 3rem;
  text-align: center;
}

.hero-inner {
  max-width: 48rem;
  margin: 0 auto;
}

.hero-headline {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-black);
  margin-bottom: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hero-subheadline {
  font-size: 1.25rem;
  color: var(--color-text-light);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.hero .btn {
  font-size: 1.1rem;
  padding: 0.875rem 2rem;
}

/* === Sections === */
.section {
  margin: 4rem 0;
}

.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2.5rem;
  color: var(--color-black);
}

.section-actions {
  text-align: center;
  margin-top: 2rem;
}

/* === Grid === */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.grid > .column {
  margin-bottom: 0;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

/* === Feature Cards === */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: box-shadow 0.15s;
}

.feature-card:hover {
  box-shadow: var(--shadow-md);
}

.feature-card-icon {
  margin-bottom: 0.75rem;
  color: var(--color-primary);
}
.feature-card-icon svg {
  width: 2rem;
  height: 2rem;
}

.feature-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-black);
}

.feature-card-title a {
  color: inherit;
}

.feature-card-title a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.feature-card-desc {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

.feature-card--large {
  padding: 2rem;
}

.feature-card-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* === Testimonials === */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.testimonial-card {
  background: var(--color-bg-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: none;
  border-left: 4px solid var(--color-primary);
}

.testimonial-quote {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 1.25rem;
  font-style: italic;
}

.testimonial-attribution {
  font-style: normal;
}

.testimonial-attribution cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.testimonial-name {
  font-weight: 600;
  color: var(--color-black);
}

.testimonial-role,
.testimonial-school {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

/* === CTA Banner === */
.cta-banner {
  background:
    radial-gradient(circle at 90% 20%, rgba(199, 91, 42, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(91, 155, 213, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(250, 246, 240, 0.08) 0%, transparent 40%),
    linear-gradient(165deg, #2B5EA7 0%, #1A3660 40%, #121F3A 100%);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  margin: 3rem 0;
}

.cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem;
}

.cta-banner-text {
  font-size: 1.25rem;
  font-weight: 600;
  flex: 1;
  white-space: pre-line;
}

.cta-banner .btn-primary {
  background: var(--color-white);
  color: #C75B2A;
  white-space: nowrap;
}

.cta-banner .btn-primary:hover {
  background: #EBE4DA;
  color: #C75B2A;
}

/* === Pricing === */
.pricing-single {
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 56rem;
  margin: 0 auto;
}

.pricing-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.pricing-card--highlighted {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.pricing-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 1rem;
}

.pricing-card-price {
  margin-bottom: 1.5rem;
}

.pricing-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
}

.pricing-note {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-lighter);
  margin-top: 0.25rem;
}

.pricing-features {
  text-align: left;
  margin-bottom: 2rem;
  flex: 1;
}

.pricing-features li {
  padding: 0.4rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9rem;
  color: var(--color-text);
  list-style: none;
}

.pricing-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-secondary);
  font-weight: 600;
}

.pricing-note-section {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

/* === Demo / Forms === */
.demo-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.demo-benefits {
  margin: 1.5rem 0;
}

.demo-benefits li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  list-style: none;
}

.demo-benefits li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-secondary);
  font-weight: 600;
}

.demo-calendly-intro-wrap {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.demo-calendly-intro {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.55;
  flex: 1;
}

.demo-calendly-arrow {
  font-size: 3rem !important;
  color: #D64933;
  flex-shrink: 0;
  animation: demo-calendly-arrow-nudge 1.6s ease-in-out infinite;
}

@keyframes demo-calendly-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-calendly-arrow { animation: none; }
}

.demo-calendly-col {
  background: #EFF3EE;
  border: 1px solid #D5DDD3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.demo-calendly-col .calendly-inline-widget {
  width: 100%;
}

.demo-quick-question {
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  padding-top: 4rem;
}

.demo-quick-question-inner {
  max-width: 48rem;
  margin: 0 auto;
}

.demo-quick-question-heading {
  text-align: center;
  margin-bottom: 0.75rem;
}

.demo-quick-question-intro {
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: 2rem;
}

.demo-form {
  background: var(--color-bg-light);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group--full {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.required {
  color: var(--color-error);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-text);
  width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-actions {
  margin-top: 1.5rem;
}

.form-actions .btn {
  width: 100%;
}

/* === Collapsible Details === */
.ferpa-details {
  margin: 1.5rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.ferpa-details summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
  background: var(--color-bg-light);
  border-radius: var(--radius);
}

.ferpa-details[open] summary {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--color-border);
}

.ferpa-details summary::-webkit-details-marker {
  display: none;
}

.ferpa-details summary::before {
  content: "\25B6";
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.ferpa-details[open] summary::before {
  transform: rotate(90deg);
}

.ferpa-details-body {
  padding: 1.25rem;
}

.ferpa-details-body h4 {
  margin: 1.25rem 0 0.75rem;
  font-size: 1rem;
}

.ferpa-details-body ul {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}

.ferpa-details-body li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* === Download Form === */
.download-form-wrapper {
  background: var(--color-bg-light);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin: 2rem 0;
}

.download-description {
  margin-bottom: 1rem;
  color: var(--color-text-light);
}

.download-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.download-form-fields--stacked {
  grid-template-columns: 1fr;
}

.form-group-documents {
  display: block;
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.form-group-documents legend {
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.form-group-documents .checkbox-label {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--color-text);
}

.form-group-documents input[type="checkbox"],
.form-group-checkbox input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: revert;
  box-shadow: none;
}

.form-group-checkbox {
  margin-bottom: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-light);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* === SIS Platform Grid === */
.sis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.sis-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.sis-grid--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

.sis-card--compact {
  padding: 0.875rem 0.5rem;
  justify-content: center;
}

.sis-card--compact .sis-card-logo {
  height: 2rem;
  margin-bottom: 0;
}

.sis-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  transition: box-shadow 0.15s;
}

.sis-card:hover {
  box-shadow: var(--shadow-md);
}

.sis-card-logo {
  height: 3rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 1rem;
}

.sis-card-logo--sm {
  padding: 0.375rem 0;
}

.sis-card-logo-with-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  margin-bottom: 1rem;
}

.sis-card-logo-with-text .sis-card-logo {
  margin-bottom: 0;
}

.sis-card-logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-black);
}

.sis-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 0.25rem;
}

.sis-card-method {
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.4;
}

@media screen and (max-width: 60rem) {
  .sis-grid,
  .sis-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sis-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 40rem) {
  .sis-grid,
  .sis-grid--4 {
    grid-template-columns: 1fr;
  }
  .sis-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Compact getting-started has exactly 5 cards — hide the 5th (Clever) on
     mobile so the remaining 4 fill a clean 2x2 grid instead of leaving one
     card alone on the bottom row. The :last-child guard keeps the full,
     10-card variant unaffected. */
  .sis-grid--5 .sis-card:nth-child(5):last-child {
    display: none;
  }
}

/* === Alerts === */
.alert {
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.alert-success {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

/* === Docs === */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.doc-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: box-shadow 0.15s;
}

.doc-card:hover {
  box-shadow: var(--shadow-md);
}

.doc-card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.doc-card h2 a {
  color: var(--color-black);
}

.doc-card h2 a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.doc-card p {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.doc-card-link {
  font-weight: 600;
  font-size: 0.9rem;
}

.doc-detail {
  max-width: 48rem;
  margin: 0 auto;
}

.download-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.download-section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* === States === */
.states-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.state-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.state-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  text-decoration: none;
}

.state-card h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 0.25rem;
}

.state-count {
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.state-detail {
  max-width: 48rem;
  margin: 0 auto;
}

.state-detail > h2 {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

.state-detail > h2:first-child {
  margin-top: 40px;
}

.state-detail > p {
  margin-bottom: 1.25rem;
}

.state-stat {
  background: var(--color-primary-light);
  padding: 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.state-stat strong {
  color: var(--color-primary);
  font-size: 1.5rem;
}

.state-requirements {
  background: var(--color-bg-light);
  padding: 2rem;
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
}

.state-requirements h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.state-requirements-exception {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.state-requirements-exception h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.state-requirements-exception .text {
  font-size: 0.95rem;
  color: var(--color-text-light);
}

.state-testimonials {
  margin: 3rem 0;
}

.state-testimonials h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* === State Highlighted Customer === */
.state-customers {
  margin: 3rem 0;
}

.state-customers h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.highlighted-customer {
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border: none;
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  isolation: isolate;
}

.highlighted-customer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    rgba(43, 94, 167, 0.4),
    rgba(214, 73, 51, 0.3),
    rgba(199, 91, 42, 0.25),
    rgba(43, 94, 167, 0.15),
    rgba(214, 73, 51, 0.3),
    rgba(43, 94, 167, 0.4)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: quote-border-spin 8s linear infinite;
  z-index: -1;
}

.highlighted-customer-inner {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.highlighted-customer-logo {
  flex-shrink: 0;
}

.highlighted-customer-logo img {
  width: 7rem;
  height: auto;
  margin-top: 1rem;
}

/* Optional second logo (customer_logo_2) stacked under the first */
.highlighted-customer-logo .highlighted-customer-logo-secondary {
  display: block;
  margin-top: 1.5rem;
}

.highlighted-customer-content {
  flex: 1;
  min-width: 0;
  align-self: center;
}

.highlighted-customer-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 0.75rem;
}

.highlighted-customer-type {
  font-weight: 400;
  color: #888;
}

/* Optional chip beside the card name, e.g. the state when the card is shown out of state */
.highlighted-customer-badge {
  float: right;
  margin: 0.25rem 0 0 0.75rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #C75B2A;
  background: rgba(199, 91, 42, 0.1);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

.highlighted-customer-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}

.highlighted-customer-stat {
  display: flex;
  flex-direction: column;
}

.highlighted-customer-stat .stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #2B5EA7;
  line-height: 1.2;
}

.highlighted-customer-stat .stat-label {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes quote-border-spin {
  to {
    --border-angle: 360deg;
  }
}

.highlighted-customer-quote {
  margin: 1rem 0 0;
  padding: 0;
  border: none;
  font-style: italic;
  border-left: 3px solid rgba(43, 94, 167, 0.3);
  padding-left: 1.25rem;
}

.highlighted-customer-quote p {
  font-size: 1.1rem;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.highlighted-customer-quote footer {
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-light);
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* Prose variant of the quote slot (home spotlight "Home Card Paragraph") */
.highlighted-customer-story { margin: 1rem 0 0; }
.highlighted-customer-story p {
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}
.highlighted-customer-story p:last-child { margin-bottom: 0; }
.highlighted-customer-story footer {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-top: 0.75rem;
}

.highlighted-customer-attribution-photo {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* === State Partner Schools Grid === */
.partner-schools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.partner-school-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  transition: box-shadow 0.15s;
}

.partner-school-card:hover {
  box-shadow: var(--shadow-md);
}

.partner-school-logo {
  height: 3rem;
  width: 3rem;
  object-fit: contain;
  flex-shrink: 0;
}

.partner-school-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.partner-school-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-black);
}

.partner-school-description {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.partner-school-quote {
  margin: 0.5rem 0 0;
  padding: 0;
  border: none;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-text-light);
  line-height: 1.4;
}

.partner-school-quote p {
  margin: 0;
}

.partner-school-quote-attr {
  font-style: normal;
  font-weight: 600;
  white-space: normal;
}

/* Section label above highlighted-customer and screenshot blocks. To keep a normal large h2 directly
   above a screenshot block, write it in a text block as <h2 class="plain-heading">...</h2>. */
h2:has(+ .highlighted-customer-block),
h2:not(.plain-heading):has(+ .screenshot-block) {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #D64933;
  margin-bottom: -1.5rem;
  border-left: 3px solid #D64933;
  padding-left: 0.75rem;
  margin-left: 10px;
  overflow: hidden;
  white-space: nowrap;
  animation: label-reveal 2s ease-out forwards;
  animation-play-state: paused;
  max-width: 3px;
}

h2:not(.plain-heading):has(+ .screenshot-block) {
  width: min(100vw, 64rem);
  margin-left: calc(50% - min(50vw, 32rem) + 10px);
  animation-name: label-reveal-wide;
}

h2:has(+ .highlighted-customer-block) span,
h2:not(.plain-heading):has(+ .screenshot-block) span {
  color: var(--color-text-light);
}

@keyframes label-reveal {
  0%        { max-width: 3px; border-left-color: #D64933; }
  8%        { max-width: 3px; border-left-color: transparent; }
  16%       { max-width: 3px; border-left-color: #D64933; }
  24%       { max-width: 3px; border-left-color: transparent; }
  32%       { max-width: 3px; border-left-color: #D64933; }
  100%      { max-width: 40rem; border-left-color: #D64933; }
}

@keyframes label-reveal-wide {
  0%        { max-width: 3px; border-left-color: #D64933; }
  8%        { max-width: 3px; border-left-color: transparent; }
  16%       { max-width: 3px; border-left-color: #D64933; }
  24%       { max-width: 3px; border-left-color: transparent; }
  32%       { max-width: 3px; border-left-color: #D64933; }
  100%      { max-width: 64rem; border-left-color: #D64933; }
}

/* Block wrappers for highlighted-customer and partner-schools blocks */
.highlighted-customer-block {
  margin: 3rem 0;
}

/* Popout logo modifier — oversized logo escapes left of the box.
   Below 61.25rem (~980px), falls back to default in-box layout. */
@media screen and (min-width: 61.25rem) {
  .highlighted-customer-block--logo-popout .highlighted-customer {
    position: relative;
  }
  .highlighted-customer-block--logo-popout .highlighted-customer-logo {
    width: 7rem;
    position: relative;
  }
  .highlighted-customer-block--logo-popout .highlighted-customer-logo img {
    width: 16rem;
    max-width: none;
    position: absolute;
    left: -125px;
    top: 0;
  }
}

.partner-schools-block {
  margin: 2rem 0;
}

.partner-schools-block h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 40rem) {
  .highlighted-customer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .highlighted-customer-stats {
    justify-content: center;
  }

  .highlighted-customer-badge {
    float: none;
    display: block;
    width: fit-content;
    margin: 0 auto 0.5rem;
  }

  .partner-schools-grid {
    grid-template-columns: 1fr;
  }
}

.state-schools {
  margin: 2rem 0;
}

.state-schools h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.school-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.school-tag {
  background: var(--color-bg-alt);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--color-text);
}

/* === All States List === */
.all-states-list {
  margin: 3rem 0;
  padding: 2rem;
  background: var(--color-bg-light);
  border-radius: var(--radius-lg);
}

.all-states-list h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.all-states-list ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.4rem 1rem;
}

.all-states-list li {
  font-size: 0.9rem;
  line-height: 1.6;
}

.all-states-list li a {
  color: var(--color-primary);
  text-decoration: none;
}

.all-states-list li a:hover {
  text-decoration: underline;
}

.all-states-list li span {
  color: var(--color-text-lighter);
}

.all-states-list li strong {
  color: var(--color-text);
}

/* === Benefits Grid === */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.benefit-item {
  padding: 1.5rem;
  background: var(--color-bg-light);
  border-radius: var(--radius);
}

.benefit-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-black);
}

.benefit-item p {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

/* === Feature Detail === */
.feature-detail {
  max-width: 48rem;
  margin: 0 auto;
}

.feature-detail > .screenshot-block,
.state-detail > .screenshot-block,
.feature-detail > .cta-banner,
.state-detail > .cta-banner,
.feature-detail > .security-strip,
.state-detail > .security-strip,
.feature-detail > .support-pricing-block,
.state-detail > .support-pricing-block,
.feature-detail > .twin-quotes,
.state-detail > .twin-quotes,
.feature-detail > .screenshot-feature,
.feature-detail > .portfolio-showcase,
.feature-detail > .validation-methods,
.feature-detail > .photo-band,
.state-detail > .photo-band,
.feature-detail > .platform-comparison,
.state-detail > .platform-comparison,
.doc-detail .platform-comparison,
.feature-detail > .comparison-deep-dives,
.state-detail > .comparison-deep-dives,
.doc-detail .comparison-deep-dives,
.doc-detail .cta-banner {
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
}

.feature-detail > h2 {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

.feature-detail > h2:first-child {
  margin-top: 0;
}

.feature-detail > hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 3rem 0 0;
}

.feature-detail > hr + h2 {
  text-align: center;
  margin-top: 2rem;
}

.feature-detail > p {
  margin-bottom: 1.25rem;
}

.feature-detail > p:last-child {
  margin-bottom: 0;
}

/* Feature/state detail list — highlighted passage style.
   Excludes .pricing-features (the support-pricing checkmark list)
   and any list inside it. */
.feature-detail ul:not(.pricing-features),
.state-detail ul:not(.pricing-features) {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.5rem 0 0;
}

.feature-detail ul:not(.pricing-features) > li,
.state-detail ul:not(.pricing-features) > li {
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(43, 94, 167, 0.2);
  border-radius: 0;
  padding: 1.4rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

.feature-detail ul:not(.pricing-features) > li:last-child,
.state-detail ul:not(.pricing-features) > li:last-child {
  border-bottom: none;
}

.feature-detail ul:not(.pricing-features) > li strong,
.state-detail ul:not(.pricing-features) > li strong {
  display: inline;
  font-size: 1rem;
  color: var(--color-black);
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  background: linear-gradient(180deg, transparent 55%, rgba(214, 73, 51, 0.15) 55%);
  padding: 0 3px;
  transition: background 0.2s ease;
}

.feature-detail ul:not(.pricing-features) > li:hover strong,
.state-detail ul:not(.pricing-features) > li:hover strong {
  background: linear-gradient(180deg, transparent 55%, rgba(214, 73, 51, 0.3) 55%);
}

.admin-comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.admin-comparison-table thead {
  background: linear-gradient(135deg, #2B5EA7 0%, #1A3660 100%);
  color: #fff;
}

.admin-comparison-table th {
  padding: 0.75rem 0.75rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.admin-comparison-table th:first-child {
  text-align: left;
}

.admin-comparison-table td {
  padding: 0.65rem 0.75rem;
  text-align: center;
  border-bottom: 1px solid #E8E0D4;
}

.admin-comparison-table td:first-child {
  text-align: left;
}

.admin-comparison-table tbody tr:nth-child(even) {
  background: #FAF8F5;
}

.admin-comparison-table tbody tr:hover {
  background: #F3EDE5;
}

/* Roles & Partner Access permission table: scoped cells, legend */
.acl-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0 0.5rem;
}
.feature-detail > h2:has(+ .acl-intro),
.feature-detail > .acl-intro,
.feature-detail > .acl-table-wrap,
.feature-detail > .acl-legend {
  width: min(64rem, calc(100vw - 2 * var(--padding, 1rem)));
  margin-left: 50%;
  transform: translateX(-50%);
}
.acl-table-wrap .admin-comparison-table {
  margin: 0;
  min-width: 44rem;
}
.admin-comparison-table.acl-table th,
.admin-comparison-table.acl-table td {
  text-align: left;
  vertical-align: top;
}
.admin-comparison-table.acl-table th:first-child,
.admin-comparison-table.acl-table td:first-child {
  width: 24%;
}
.admin-comparison-table .acl-cell {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.35rem;
  text-align: left;
}
.admin-comparison-table .acl-cell .material-symbols-outlined {
  flex: none;
  font-size: 1.15rem;
  line-height: 1.15;
  font-variation-settings: 'FILL' 1;
}
.admin-comparison-table .acl-yes .material-symbols-outlined { color: #2F7D5B; }
.admin-comparison-table .acl-scoped .material-symbols-outlined { color: #D98E2B; }
.admin-comparison-table .acl-no .material-symbols-outlined { color: #D64933; }
.admin-comparison-table .acl-text {
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--color-text-light);
}
.admin-comparison-table td.acl-span {
  text-align: left;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-light);
}
.acl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0.9rem 0 2rem;
  padding: 0;
  font-size: 0.78rem;
  color: var(--color-text-light);
}
.acl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.acl-legend .material-symbols-outlined {
  font-size: 1.05rem;
  font-variation-settings: 'FILL' 1;
}
.acl-legend .acl-yes .material-symbols-outlined,
.acl-legend-item.acl-yes .material-symbols-outlined { color: #2F7D5B; }
.acl-legend-item.acl-scoped .material-symbols-outlined { color: #D98E2B; }
.acl-legend-item.acl-no .material-symbols-outlined { color: #D64933; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .admin-comparison-table {
    font-size: 0.8rem;
  }
  .admin-comparison-table th,
  .admin-comparison-table td {
    padding: 0.5rem 0.4rem;
  }
}

.benefits-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

/* === Text Content === */
.text {
  line-height: 1.7;
}

.text a { text-decoration: underline; }
.text :first-child { margin-top: 0; }
.text :last-child { margin-bottom: 0; }

.text p, .text ul, .text ol {
  margin-bottom: 1.25rem;
}

.text ul, .text ol {
  margin-left: 1.5rem;
}

.text ul > li { list-style: disc; }
.text ol > li { list-style: decimal; }

.text h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-black);
}

.text h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--color-black);
}

.text strong {
  font-weight: 600;
}

.text table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.text table th,
.text table td {
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-border);
  text-align: left;
}

.text table th {
  background: var(--color-bg-light);
  font-weight: 600;
}

.text table td:not(:first-child) {
  text-align: center;
}

.text blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--color-text-light);
}

.text code {
  font-family: var(--font-mono);
  background: var(--color-bg-alt);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9em;
}

/* === Device Mockup === */
.device-mockup {
  display: flex;
  justify-content: center;
  margin: 2rem 0 1rem;
}

.device-mockup-inner {
  position: relative;
  width: 280px;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.device-mockup-chrome {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.device-mockup-screenshot {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 252px;
  border-radius: 30px;
  z-index: 1;
}

/* Landscape: rotate the portrait phone 90° CW.
   Inner is 280×572 portrait. After rotation the visual footprint is 572×280
   but the layout box stays 280×572. We add horizontal margin equal to
   (572−280)/2 = 146px on each side so the container stretches to 572px wide,
   and negative vertical margin of the same amount to shrink height to 280px. */
.device-mockup-inner--landscape {
  transform: rotate(90deg);
  margin: -146px 146px;
}

/* === Screenshot Block === */
.screenshot-block {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: var(--container);
  margin: 3rem auto;
  background: #F3EDE5;
  border-top: 1px solid #D5CBBD;
  border-bottom: 1px solid #D5CBBD;
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
}

.screenshot-block-device {
  flex-shrink: 0;
  position: relative;
}

.screenshot-block-device--small {
  max-width: 400px;
}

/* Plain image (device_type: none) — no chrome, for artwork that already
   includes its own devices. Takes ~58% beside text, full width when alone. */
.screenshot-block-device--plain {
  flex: 0 1 58%;
  min-width: 0;
}

.screenshot-block--center .screenshot-block-device--plain {
  flex-basis: 100%;
}

.screenshot-block-device--plain img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.16));
}

.screenshot-block-device .device-mockup-inner::before {
  content: '';
  position: absolute;
  inset: -12px;
  border: 2px solid var(--device-border-color, rgba(214, 73, 51, 0.12));
  border-radius: 32px;
  pointer-events: none;
}

.screenshot-block--light {
  gap: 3rem;
  padding-left: 3rem;
  padding-right: 3rem;
}

.screenshot-block--light .device-mockup-inner::before {
  display: none;
}

.screenshot-block--no-bg {
  background: transparent;
  border: none;
}

.screenshot-block-text {
  flex: 1;
  min-width: 0;
}

.benefits-side-header {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-light);
  margin-bottom: 1.25rem;
  margin-left: 0.25rem;
  padding-left: 0.75rem;
  border-left: 3px solid #D64933;
  text-align: left;
}

.screenshot-block-text--benefits .benefit-box {
  background: #fff;
  border: 2px solid #E8E0D4;
  text-align: left;
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.4;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.screenshot-block-text--benefits .benefit-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(26, 23, 20, 0.1);
}

.screenshot-block-text--benefits .benefit-box:last-child {
  margin-bottom: 0;
}

.screenshot-block-text--benefits .benefit-header {
  padding-bottom: 0.4rem;
}

.screenshot-block-text--benefits .benefit-header strong {
  font-size: 1.1em;
  color: var(--color-black);
  vertical-align: middle;
}

.screenshot-block-text--benefits .benefit-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.screenshot-block-text--benefits .benefit-grid-2col .benefit-box {
  margin-bottom: 0;
}

@media screen and (max-width: 40rem) {
  .screenshot-block-text--benefits .benefit-grid-2col {
    grid-template-columns: 1fr;
  }
}

.screenshot-block-text--benefits .benefit-box--underline .benefit-header {
  border-bottom: 2px solid #D64933;
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
}

.screenshot-block-text--benefits .benefit-icon {
  font-size: 1.5rem;
  vertical-align: middle;
  color: #D64933;
}

.screenshot-block-text h2:first-child,
.screenshot-block-text h3:first-child {
  margin-top: 0;
}

/* Second content section within a screenshot text column */
.screenshot-block-text h2:not(:first-child),
.screenshot-block-text h3:not(:first-child) {
  margin-top: 2rem;
}

/* Per-text-block vertical alignment */
.screenshot-block-text--align-top { align-self: flex-start; }
.screenshot-block-text--align-center { align-self: center; }
.screenshot-block-text--align-bottom { align-self: flex-end; }

/* Center: phone only, no text */
.screenshot-block--center {
  justify-content: center;
}

/* Right: text left, phone right */
.screenshot-block--right {
  flex-direction: row;
}

/* Left: phone left, text right */
.screenshot-block--left {
  flex-direction: row;
}

/* Middle position: text | phone | text */
.screenshot-block--middle {
  flex-direction: row;
}

.screenshot-block--middle .screenshot-block-device {
  order: 0;
  margin: 0 auto;
}

.screenshot-block--middle .screenshot-block-text--left {
  order: -1;
  text-align: right;
}

.screenshot-block--middle .screenshot-block-text--right {
  order: 1;
}

@media (max-width: 768px) {
  .screenshot-block {
    flex-direction: column !important;
    text-align: center;
  }

  .screenshot-block-device--plain {
    flex-basis: auto;
    width: 100%;
  }

  .screenshot-block--middle .screenshot-block-text--left {
    text-align: center;
    order: 1;
  }

  .screenshot-block--middle .screenshot-block-text--right {
    order: 2;
  }

  .screenshot-block--middle .screenshot-block-text--right .benefits-side-header {
    display: none;
  }

  .screenshot-block--middle .screenshot-block-text--left {
    margin-bottom: -1rem;
  }

  .screenshot-block--middle .screenshot-block-device {
    order: 0;
  }

  .admin-text-row {
    flex-direction: column-reverse !important;
  }
}

/* === Testimonial Block === */
.testimonial-block {
  border-left: 4px solid var(--color-primary);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  background: var(--color-bg-alt);
  border-radius: 0 8px 8px 0;
}

.testimonial-block-quote {
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 1rem;
}

.testimonial-block-author {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.testimonial-block-role {
  color: var(--color-text-light);
}

/* === Hint Block === */
.hint-block {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border: 1px solid rgba(43, 94, 167, 0.15);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.hint-block-logo {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}

.hint-block--logo-large .hint-block-logo {
  width: 100px;
  height: 100px;
}

.hint-block--logo-large {
  gap: 1.5rem;
}

.hint-block-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hint-block-text {
  font-size: 0.95rem;
  line-height: 1.5;
}

.hint-block-text p {
  margin: 0;
}

.hint-block-text p + p {
  margin-top: 0.5rem;
}

@media screen and (max-width: 40rem) {
  .hint-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* === Split Section Block === */
.split-section {
  margin: 2.5rem 0;
  background: #F3EDE5;
  border-top: 1px solid #D5CBBD;
  border-bottom: 1px solid #D5CBBD;
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
}

.feature-detail > .split-section {
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
}

.split-section-heading {
  margin: 0 0 1.25rem;
}

.split-section-columns {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.split-section--left-wide .split-section-primary {
  flex: 2;
  min-width: 0;
}

.split-section--left-wide .split-section-secondary {
  flex: 1;
  min-width: 0;
}

.split-section--right-wide .split-section-primary {
  flex: 1;
  min-width: 0;
  order: 1;
}

.split-section--right-wide .split-section-secondary {
  flex: 2;
  min-width: 0;
  order: 2;
}

.split-section-primary p {
  margin-bottom: 1.25rem;
}

.split-section-primary p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 48rem) {
  .split-section-columns {
    flex-direction: column;
  }

  .split-section--right-wide .split-section-primary {
    order: 0;
  }

  .split-section--right-wide .split-section-secondary {
    order: 0;
  }
}

/* === Admin Panel Screenshot Card === */
.admin-screenshot {
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1px solid #E8E0D4;
}

.admin-screenshot-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(180deg, #f7f5f2 0%, #eee9e2 100%);
  border-bottom: 1px solid #E8E0D4;
}

.admin-screenshot-dots {
  display: flex;
  gap: 5px;
}

.admin-screenshot-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D5CBBD;
}

.admin-screenshot-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #8C7E6E;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: auto;
}

.admin-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 40rem) {
  .admin-screenshot {
    max-width: 320px;
    margin: 0 auto;
  }
}

.admin-screenshot--small {
  max-width: 520px;
  margin-top: 1.25rem;
}

/* === Document / PDF Screenshot Card === */
.document-screenshot {
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1px solid #D5CBBD;
  background: #fff;
}

.document-screenshot-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(180deg, #2B5EA7 0%, #1A3660 100%);
  border-bottom: 1px solid #15304F;
}

.document-screenshot-icon {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.document-screenshot-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.document-screenshot-badge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.document-screenshot-badge .material-symbols-outlined {
  font-size: 14px;
  color: #6dcf8a;
}

.document-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

.document-screenshot--small {
  max-width: 520px;
  margin-top: 1.25rem;
}

.screenshot-block-device--document {
  flex-shrink: 0;
}

.screenshot-block-device--document .document-screenshot {
  max-width: 380px;
}

@media screen and (max-width: 40rem) {
  .document-screenshot {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* === Featured Quote Block === */
.featured-quote-wrap {
  container-type: inline-size;
  container-name: quote-block;
}

.featured-quote-block {
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin: 2.5rem 0;
  border: 1px solid rgba(43, 94, 167, 0.15);
}

.featured-quote-top {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.featured-quote-block:not(.has-photo) .featured-quote-top {
  display: block;
}

.featured-quote-photo {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  overflow: hidden;
}

.image-is-logo .featured-quote-photo {
  border-radius: 0;
  width: auto;
  height: auto;
  max-width: 7rem;
  max-height: 5rem;
}

.image-is-logo .featured-quote-photo img {
  object-fit: contain;
}

.featured-quote-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-quote-text {
  margin: 0;
  padding: 0;
  border: none;
}

.featured-quote-text p {
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  margin: 0;
  color: var(--color-text);
}

.featured-quote-bottom {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.featured-quote-logo {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
}

.featured-quote-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.featured-quote-attribution {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.featured-quote-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-black);
  white-space: nowrap;
}

.featured-quote-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-light);
  white-space: nowrap;
}

.featured-quote-school {
  font-size: 0.85rem;
  color: var(--color-text-light);
  white-space: nowrap;
}

/* Split layout (photo-left / photo-right) */
.featured-quote-block.layout-split {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2.5rem;
}

.featured-quote-block.layout-photo-right {
  flex-direction: row-reverse;
}

.featured-quote-block.layout-split .featured-quote-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  flex-shrink: 0;
  width: auto;
  min-width: 11rem;
}

.featured-quote-block.layout-split .featured-quote-photo {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.featured-quote-block.layout-split .featured-quote-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-quote-block.layout-split.image-is-logo .featured-quote-photo {
  border-radius: 0;
  width: auto;
  height: auto;
  max-width: 7rem;
  max-height: 7rem;
}

.featured-quote-block.layout-split.image-is-logo .featured-quote-photo img {
  object-fit: contain;
}

.featured-quote-block.layout-split .featured-quote-attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.featured-quote-block.layout-split .featured-quote-logo {
  width: 3.5rem;
  height: 3.5rem;
  margin-top: 0.25rem;
}

.featured-quote-block.layout-split .featured-quote-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.featured-quote-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin: 0 2rem;
  flex-shrink: 0;
}

.featured-quote-block.layout-split .featured-quote-text {
  flex: 1;
  margin: 0;
  padding: 0;
  border: none;
}

.featured-quote-block.layout-split .featured-quote-text p {
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  margin: 0;
  color: var(--color-text);
}

/* Attribution below quote variant */
.featured-quote-block.layout-split.attribution-below {
  flex-wrap: wrap;
}

.featured-quote-block.layout-split.attribution-below .featured-quote-attribution--below {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  justify-content: flex-end;
}

.featured-quote-block.layout-split.attribution-below .featured-quote-attribution--below .featured-quote-photo,
.featured-quote-block.layout-split.attribution-below .featured-quote-attribution--below .featured-quote-logo {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
}

.featured-quote-block.layout-split.attribution-below .featured-quote-attribution--below .featured-quote-photo {
  border-radius: 50%;
  overflow: hidden;
}

.featured-quote-block.layout-split.attribution-below .featured-quote-attribution--below .featured-quote-photo img,
.featured-quote-block.layout-split.attribution-below .featured-quote-attribution--below .featured-quote-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.featured-quote-block.layout-split.attribution-below .featured-quote-attribution-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

@media screen and (max-width: 40rem) {
  .featured-quote-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .featured-quote-bottom {
    flex-direction: column;
    text-align: center;
  }

  .featured-quote-attribution {
    align-items: center;
  }

  .featured-quote-block.layout-split {
    flex-direction: column;
    text-align: center;
  }

  .featured-quote-block.layout-split .featured-quote-side {
    width: auto;
  }

  .featured-quote-divider {
    width: 100%;
    height: 1px;
    margin: 1.5rem 0;
  }
}

/* Split layout — narrow container (< 640px): quote on top, attribution below */
@container quote-block (max-width: 640px) {
  .featured-quote-block.layout-split {
    flex-direction: column;
  }

  .featured-quote-block.layout-split .featured-quote-text {
    order: -2;
  }

  .featured-quote-divider {
    order: -1;
    width: 100%;
    height: 1px;
    margin: 1.5rem 0;
  }

  .featured-quote-block.layout-split .featured-quote-side {
    flex-direction: row;
    align-items: center;
    text-align: left;
    width: auto;
    gap: 1rem;
  }

  .featured-quote-block.layout-split .featured-quote-photo {
    width: 4.5rem;
    height: 4.5rem;
  }

  .featured-quote-block.layout-split.image-is-logo .featured-quote-photo {
    width: auto;
    height: 4.5rem;
    max-width: 6.5rem;
  }

  .featured-quote-block.layout-split .featured-quote-attribution {
    align-items: flex-start;
  }

  .featured-quote-block.layout-split .featured-quote-name,
  .featured-quote-block.layout-split .featured-quote-title,
  .featured-quote-block.layout-split .featured-quote-school {
    white-space: normal;
  }
}

/* === Testimonials Mosaic === */
.doc-detail.testimonials-mosaic {
  max-width: 72rem;
}

.testimonials-mosaic {
  columns: 2;
  column-gap: 1.5rem;
}

.testimonials-mosaic .featured-quote-wrap,
.testimonials-mosaic .block {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

.testimonials-mosaic .featured-quote-block {
  margin: 0;
}

@media (max-width: 1023px) {
  .testimonials-mosaic {
    columns: 1;
  }
}

/* === Error Page === */
.error-section {
  text-align: center;
  margin: 6rem 0;
}

.error-section .hero-headline {
  margin-bottom: 1rem;
}

.error-section .text {
  margin-bottom: 2rem;
  color: var(--color-text-light);
}

/* === Footer === */
.footer {
  border-top: 1px solid var(--color-border);
  margin: 4rem 0 0;
  padding: 3rem 0 2rem;
}

.footer-inner { }

.footer-brand strong {
  font-size: 1.125rem;
}

.footer-brand p {
  color: var(--color-text-light);
  margin-top: 0.5rem;
  font-size: 0.9rem;
  max-width: 18rem;
}

.footer h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-lighter);
  margin-bottom: 0.75rem;
}

.footer ul {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer a {
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.footer a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.footer-legal-heading {
  margin-top: 1.5rem;
}

.footer-bottom {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  text-align: right;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: var(--color-text-lighter);
  margin: 0;
}

/* === Calendly === */
.calendly-embed {
  margin-top: 2rem;
}

.calendly-embed h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* === Responsive === */
@media screen and (min-width: 60rem) {
  body {
    --padding: 2rem;
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .grid > .column {
    grid-column: span var(--columns);
  }

  .hero-headline {
    font-size: 3rem;
  }

}

@media screen and (max-width: 1030px) and (min-width: 60rem) {
  .menu-list > li > a {
    font-size: 0.9rem;
  }

  .logo-text {
    font-size: 1.25rem;
  }

  .logo-tagline {
    font-size: 0.7rem;
  }

  .header {
    padding: 0.75rem var(--padding);
  }
}

@media screen and (max-width: 64rem) {
  .screenshot-block,
  .cta-banner {
    border-radius: 0;
  }

  .main > .cta-banner {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 60rem) {
  h2:has(+ .highlighted-customer-block),
  h2:not(.plain-heading):has(+ .screenshot-block) {
    margin-left: 0;
    white-space: normal;
    overflow: visible;
    max-width: none;
    animation: none;
  }

  h2:not(.plain-heading):has(+ .screenshot-block) {
    width: auto;
    margin-left: 0;
  }

  .menu-toggle {
    display: flex;
  }

  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  .menu.is-open {
    display: block;
  }

  .menu-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0;
  }

  .menu-list > li > a,
  .menu-list > li > .menu-item-link {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0;
  }

  .menu-list > li > a:hover,
  .menu-list > li > .menu-item-link:hover {
    background: var(--color-bg-alt);
  }

  /* Reset desktop dropdown spacing hacks */
  .menu-item {
    position: static;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* Parent toggle with arrow */
  .menu-item-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }

  .dropdown-arrow {
    display: inline-block;
    opacity: 1;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-text-light);
    border-bottom: 2px solid var(--color-text-light);
    transform: translateY(-2px) rotate(45deg);
    flex-shrink: 0;
    margin-left: 0.5rem;
  }

  .menu-item.is-open .dropdown-arrow {
    transform: translateY(2px) rotate(-135deg);
  }

  /* Dropdown: hidden by default on mobile, disable hover */
  .dropdown {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    min-width: 0;
    padding: 0;
    background: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .menu-item:hover > .dropdown {
    display: none;
  }

  /* Accordion open state — this is the only way dropdowns show on mobile */
  .menu-item.is-open > .dropdown {
    display: block;
  }

  .dropdown li {
    border-bottom: 1px solid var(--color-bg-alt);
  }

  .dropdown li:last-child {
    border-bottom: none;
  }

  .dropdown a {
    font-size: 0.9rem;
    padding: 0.65rem 1.25rem 0.65rem 2.25rem;
    color: var(--color-text);
    white-space: normal;
    border-radius: 0;
  }

  .dropdown a:hover {
    background: var(--color-bg-alt);
    color: #C75B2A;
  }

  /* CTA button full width */
  .menu-cta-item {
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-border);
  }

  .menu-cta {
    display: block !important;
    text-align: center;
    padding: 0.75rem 1.25rem !important;
  }

  .hero-headline {
    font-size: 2rem;
  }

  .demo-layout {
    grid-template-columns: 1fr;
  }

  .demo-calendly-arrow {
    display: none;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .download-form-fields {
    grid-template-columns: 1fr;
  }

  .cta-banner-inner {
    flex-direction: column;
    text-align: center;
  }

  /* CTA copy written on two lines (a newline in cta_text) flows as one paragraph once the banner stacks,
     otherwise the forced break plus natural wrapping leaves four or five ragged lines on a phone */
  .cta-banner-text {
    white-space: normal;
  }

  .footer .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 58rem) {
}

@media screen and (max-width: 40rem) {

  .stat-number {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .footer .grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 32rem) {
  h2:has(+ .highlighted-customer-block) span,
  h2:not(.plain-heading):has(+ .screenshot-block) span {
    display: block;
  }

  .highlighted-customer-stat:nth-child(n+3) {
    display: none;
  }

  .highlighted-customer-quote {
    border-left: none;
    padding-left: 0;
  }
}

/* ===========================
   Customer Support Page
   =========================== */

/* Contact cards — phone, rating, email row */
.support-contact-cards {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
  margin: 1rem auto 2.5rem;
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
}

.support-contact-card {
  flex: 1;
  text-align: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border: 1px solid rgba(43, 94, 167, 0.15);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.support-contact-card .material-symbols-outlined {
  font-size: 2.5rem;
  color: #2B5EA7;
  display: block;
  margin-bottom: 0.5rem;
}

.support-contact-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6B7280;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.support-contact-value {
  font-size: 1.35rem;
  font-weight: 700;
}

.support-contact-value a {
  color: #2B5EA7;
  text-decoration: none;
}

.support-contact-value a:hover {
  text-decoration: underline;
}

/* Capterra rating block (inside contact cards row) */
.capterra-rating-block {
  text-align: center;
  padding: 1.5rem 1rem;
  background: #fff;
  border: 1px solid #E8E0D4;
  border-radius: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.capterra-rating-top {
  margin-bottom: 1rem;
}

.capterra-score {
  margin-bottom: 0.25rem;
}

.capterra-number {
  font-size: 2.25rem;
  font-weight: 700;
  color: #1A3660;
  line-height: 1;
}

.capterra-out-of {
  font-size: 1.1rem;
  color: #6B7280;
  margin-left: 0.15em;
}

.capterra-stars {
  margin-bottom: 0.35rem;
}

.capterra-star {
  font-size: 1.75rem;
  color: #F9BF3B;
  margin: 0 0.05em;
}

.capterra-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.capterra-attribution {
  padding-top: 1rem;
}

.capterra-attribution a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #2B5EA7;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.capterra-attribution a:hover {
  text-decoration: underline;
}

.capterra-logo {
  height: 1.4rem;
  width: auto;
}

/* Support features grid */
.support-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.support-feature {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #E8E0D4;
  border-radius: 10px;
}

.support-feature .material-symbols-outlined {
  font-size: 2rem;
  color: #D64933;
  display: block;
  margin-bottom: 0.5rem;
}

.support-feature h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1A3660;
  margin: 0 0 0.35rem;
}

.support-feature p {
  font-size: 0.95rem;
  color: #4B5563;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .support-contact-cards {
    flex-direction: column;
  }

  .capterra-rating-block {
    order: -1;
  }

  .support-features-grid {
    grid-template-columns: 1fr;
  }
}

/* === Admin Showcase Block — full-width admin screenshot with benefits above/below === */
.admin-showcase-block {
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 2.5rem 2rem;
  background: #F3EDE5;
  border-top: 1px solid #D5CBBD;
  border-bottom: 1px solid #D5CBBD;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.admin-showcase-device {
  margin: 0 auto;
}

.admin-showcase-text {
  max-width: 64rem;
  margin: 0 auto;
}

.admin-showcase-text--above {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.admin-showcase-text--below {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.admin-showcase-text .benefit-box {
  background: #fff;
  border: 2px solid #E8E0D4;
  text-align: left;
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.4;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-showcase-text .benefit-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(26, 23, 20, 0.1);
}

.admin-showcase-text .benefit-header {
  padding-bottom: 0.4rem;
}

.admin-showcase-text .benefit-header strong {
  font-size: 1.1em;
  color: var(--color-black);
  vertical-align: middle;
}

.admin-showcase-text .benefit-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 1.5rem;
  vertical-align: middle;
  color: #D64933;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  margin-right: 0.35rem;
}

.admin-showcase-text .benefits-side-header {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8C7E6E;
}

@media screen and (max-width: 50rem) {
  .admin-showcase-text--above,
  .admin-showcase-text--below {
    grid-template-columns: 1fr;
  }

  .admin-showcase-block {
    padding: 1.5rem 1rem;
  }
}

/* =====================================================
   NHS LANDING PAGE
   ===================================================== */

/* --- Material Icons shorthand --- */
/* Negate the body's padding so NHS sections can go full-bleed */
.nhs-hero,
.nhs-page {
  margin-left: calc(-1 * var(--padding));
  margin-right: calc(-1 * var(--padding));
}

.mi { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; }

/* --- NHS Hero --- */
.nhs-hero {
  text-align: center; padding: 5rem 1.5rem 3.5rem;
  background: linear-gradient(180deg, #fff 0%, #f8f6f3 100%);
  width: 100vw; margin-left: 50%; transform: translateX(-50%);
}
.nhs-hero-inner { max-width: 48rem; margin: 0 auto; }
.nhs-hero h1 {
  font-size: 3rem; font-weight: 800; line-height: 1.12;
  color: var(--navy-dark); margin-bottom: 1.25rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.nhs-hero-sub { font-size: 1.2rem; color: var(--text-light); line-height: 1.6; margin-bottom: 2rem; max-width: 38rem; margin-left: auto; margin-right: auto; }
.nhs-btn { display: inline-block; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius); text-decoration: none; cursor: pointer; border: 2px solid transparent; font-family: 'Figtree', sans-serif; }
.nhs-btn:hover { text-decoration: none; }
.nhs-btn-lg { font-size: 1.15rem; padding: 0.875rem 2.25rem; }
.nhs-btn-cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff; font-weight: 700;
  border-radius: var(--radius);
}
.nhs-btn-cta:hover { background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-dark) 100%); color: #fff; }
.nhs-hero-note { margin-top: 1rem; font-size: 0.9rem; color: var(--text-lighter); }

/* --- NHS Section Title --- */
.nhs-section-title {
  font-size: 1.75rem; font-weight: 700; text-align: center;
  margin-bottom: 2.5rem; color: var(--navy-dark);
}
.nhs-section-title span { color: var(--text-light); }

/* --- NHS CTA Banner --- */
.nhs-cta-banner {
  background:
    radial-gradient(circle at 90% 20%, rgba(199,91,42,0.25) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(91,155,213,0.25) 0%, transparent 50%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-mid) 40%, var(--navy-dark) 100%);
  color: #fff; border-radius: var(--radius-lg); margin: 3rem auto;
  max-width: 64rem;
}
.nhs-cta-banner-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 2.5rem 3rem;
}
.nhs-cta-banner-text { font-size: 1.2rem; font-weight: 600; flex: 1; }
.nhs-btn-white {
  display: inline-block; text-decoration: none;
  background: #fff; color: var(--terra); font-weight: 700;
  padding: 0.75rem 1.75rem; border-radius: var(--radius);
  white-space: nowrap; cursor: pointer; border: none; font-size: 1rem; font-family: 'Figtree', sans-serif;
}
.nhs-btn-white:hover { background: #EBE4DA; text-decoration: none; }

/* --- NHS Section container --- */
.nhs-section { max-width: 48rem; margin: 0 auto; padding: 4rem 1.5rem; }

/* --- Twin Quotes --- */
.twin-quotes { max-width: 64rem; margin: 4rem auto 0; padding: 0 1.5rem; }
.twin-quotes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.twin-quote-card {
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border-radius: var(--radius-lg); padding: 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; isolation: isolate;
}
.twin-quote-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); padding: 2px;
  background: conic-gradient(from var(--border-angle, 0deg), rgba(43,94,167,0.4), rgba(214,73,51,0.3), rgba(199,91,42,0.25), rgba(43,94,167,0.15), rgba(214,73,51,0.3), rgba(43,94,167,0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  animation: nhs-border-spin 8s linear infinite; z-index: -1;
}
@property --border-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes nhs-border-spin { to { --border-angle: 360deg; } }
.twin-quote-card blockquote {
  font-size: 1rem; line-height: 1.65; color: var(--text);
  font-style: italic; flex: 1; margin-bottom: 1.25rem;
}
.twin-quote-bottom { display: flex; gap: 1rem; align-items: center; }
.twin-quote-photo {
  flex-shrink: 0; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; overflow: hidden;
}
.twin-quote-photo img { width: 100%; height: 100%; object-fit: cover; }
.twin-quote-logo {
  flex-shrink: 0; width: 3.5rem; height: 3.5rem;
  display: flex; align-items: center; justify-content: center;
}
.twin-quote-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.twin-quote-attr { flex: 1; }
.twin-quote-attr strong { display: block; font-size: 0.95rem; color: var(--navy-dark); font-style: normal; }
.twin-quote-attr span { font-size: 0.85rem; color: var(--text-light); }
/* stack_attribution: role and school on their own lines (e.g. school title, then district) */
.twin-quotes--stack-attr .twin-quote-attr > span > span { display: block; }
.twin-quotes--stack-attr .twin-quote-attr .dot-sep { display: none; }

/* --- Screenshot Feature Blocks --- */
.screenshot-feature { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.screenshot-feature .nhs-section-title { text-align: center; margin-bottom: 2rem; margin-top: 3rem; }
.screenshot-feature-block {
  display: flex; align-items: center; gap: 2rem;
  background: #F3EDE5; border-top: 1px solid #D5CBBD; border-bottom: 1px solid #D5CBBD;
  padding: 2.5rem 2rem; border-radius: var(--radius-lg);
}
.screenshot-feature-text { flex: 1; min-width: 0; }
.screenshot-feature-device { flex-shrink: 0; position: relative; }
.screenshot-feature-device .device-mockup-inner {
  position: relative; width: 280px;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.25)) drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.screenshot-feature-device .device-mockup-inner::before {
  content: ''; position: absolute; inset: -12px;
  border: 2px solid rgba(214, 73, 51, 0.12);
  border-radius: 40px; pointer-events: none;
}
.screenshot-feature-device .device-mockup-chrome {
  display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none;
}
.screenshot-feature-device .device-mockup-screenshot {
  position: absolute; top: 14px; left: 14px; width: 252px; border-radius: 30px; z-index: 1;
}
.screenshot-feature-device.no-border-ring .device-mockup-inner::before { display: none; }

/* --- Benefit boxes (used in screenshot-feature, validation, portfolio) --- */
.sf-benefits-header {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-light);
  margin-bottom: 1.25rem; margin-left: 0.25rem;
  padding-left: 0.75rem; border-left: 3px solid #D64933; text-align: left;
}
.sf-benefit-box {
  background: #fff; border: 2px solid #E8E0D4; text-align: left;
  border-radius: 6px; padding: 0.85rem 1rem; margin-bottom: 0.75rem;
  font-size: 0.95rem; line-height: 1.4;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
}
.sf-benefit-box:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(26,23,20,0.1); }
.sf-benefit-box:last-child { margin-bottom: 0; }
a.sf-benefit-box { display: block; color: inherit; }
a.sf-benefit-box:hover { text-decoration: none; }
a.sf-benefit-box:focus-visible { outline: 2px solid #C75B2A; outline-offset: 2px; }
.sf-benefit-header { padding-bottom: 0.3rem; }
.sf-benefit-header strong { font-size: 1.05em; color: var(--text); vertical-align: middle; }
.sf-benefit-icon {
  font-family: 'Material Symbols Outlined'; font-size: 20px;
  vertical-align: middle; margin-right: 0.35rem;
  color: #D64933; font-weight: normal; font-style: normal;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'liga';
}
.sf-benefit-body { font-size: 0.9rem; color: var(--text-light); line-height: 1.5; }

/* --- Schools Section --- */
.schools-heading {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--cinnabar);
  border-left: 3px solid var(--cinnabar); padding-left: 0.75rem;
  margin-bottom: 1.5rem;
}
.schools-heading span { color: var(--text-light); }

/* Featured school cards (with quotes) */
.school-featured {
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border: 1px solid rgba(43,94,167,0.15);
  border-radius: var(--radius-lg); padding: 2rem;
  margin-bottom: 1.5rem;
}
.school-featured-inner { display: flex; align-items: flex-start; gap: 1.5rem; }
.school-featured-logo { flex-shrink: 0; }
.school-featured-logo img { width: 5rem; height: auto; margin-top: 0.5rem; }
.school-featured-content { flex: 1; }
.school-featured-name { font-size: 1.15rem; font-weight: 700; color: var(--navy-dark); margin-bottom: 0.25rem; }
.school-featured-type { font-weight: 400; color: #888; font-size: 0.9rem; }
.school-featured-quote {
  margin: 0.75rem 0 0; font-style: italic; font-size: 1rem;
  line-height: 1.6; color: var(--text);
  border-left: 3px solid rgba(43,94,167,0.3); padding-left: 1rem;
}
.school-featured-quote strong { font-weight: 700; }
.school-featured-quote footer {
  font-style: normal; font-weight: 600; font-size: 0.85rem;
  color: var(--text-light); margin-top: 0.75rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.school-featured-quote footer img {
  width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover;
}

/* School cards (no quotes) */
.school-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
.school-card {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem;
  transition: box-shadow 0.15s;
}
.school-card:hover { box-shadow: var(--shadow-md); }
.school-card-logo { height: 3rem; width: 3rem; object-fit: contain; flex-shrink: 0; }
.school-card-info { display: flex; flex-direction: column; gap: 0.1rem; }
.school-card-name { font-size: 0.95rem; font-weight: 600; color: var(--navy-dark); }
.school-card-desc { font-size: 0.8rem; color: var(--text-light); }
.school-card-quote {
  margin: 0.5rem 0 0; font-size: 0.8rem; font-style: italic;
  color: var(--text-light); line-height: 1.4;
}
.school-card-quote-attr { font-style: normal; font-weight: 600; }

/* --- Logo Grid --- */
.logo-grid-section { margin-top: 2.5rem; padding-top: 2rem; padding-bottom: 2.5rem; border-top: 1px solid var(--border); }
.logo-grid-title { font-size: 1rem; font-weight: 600; color: var(--text-light); text-align: center; margin-bottom: 1.5rem; }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.75rem; justify-items: center;
}
.logo-cell {
  position: relative; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid transparent;
  transition: all 0.2s; cursor: default; padding: 0.5rem;
}
.logo-cell img {
  max-width: 56px; max-height: 56px; object-fit: contain;
  filter: grayscale(100%); opacity: 0.55; transition: all 0.2s;
}
.logo-cell:hover img { filter: grayscale(0%); opacity: 1; }
.logo-cell:hover { border-color: var(--border); background: var(--bg-light); }
.logo-tooltip {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); background: var(--navy-dark); color: #fff;
  padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: 0.75rem;
  white-space: nowrap; z-index: 100; pointer-events: none;
  line-height: 1.3; text-align: center;
}
.logo-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); border: 5px solid transparent;
  border-top-color: var(--navy-dark);
}
.logo-cell:hover .logo-tooltip { display: block; }
.logo-tooltip strong { display: block; font-weight: 600; }
.logo-tooltip span { opacity: 0.7; font-size: 0.7rem; }
.logo-cell.touch-active .logo-tooltip { display: block !important; }
.logo-cell.touch-active img { filter: grayscale(0%); opacity: 1; }
.logo-cell.touch-active { border-color: var(--border); background: var(--bg-light); }

/* --- Security --- */
.security-strip {
  background: var(--bg-light); border-radius: var(--radius-lg);
  max-width: 64rem; margin: 4rem auto 2.5rem;
  padding: 0 1.5rem; /* the strip is 100vw on small screens, so the title and subhead need their own gutter */
  position: relative; z-index: 2;
}
/* Below 64rem the strip runs edge to edge and its gray band is visible, so give the title and badges room above and below */
@media (max-width: 64rem) {
  .security-strip { padding: 2.25rem 1.5rem; }
}

/* Hand-written customer quote rendered below the support-pricing 3-up grid */
.support-pricing-quote {
  max-width: 56rem;
  margin: 1.75rem auto 0;
  padding: 0 1.5rem;
  text-align: center;
}
.support-pricing-quote p {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: 1.55rem;
  line-height: 1.4;
  font-weight: 700;
  color: #C75B2A;
  margin: 0 0 0.6rem;
}
.support-pricing-quote p.support-pricing-quote-attribution {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-lighter);
  margin: 0;
}
@media (max-width: 700px) {
  .support-pricing-quote p { font-size: 1.35rem; }
}
.security-title { font-size: 1.25rem; font-weight: 700; color: var(--navy-dark); text-align: center; margin-bottom: 0.5rem; }
.security-sub { font-size: 0.95rem; color: var(--text-light); text-align: center; margin-bottom: 2rem; }
.security-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  max-width: 48rem; margin: 0 auto;
}
.security-badge {
  display: flex; align-items: center; gap: 0.5rem;
  background: #fff; border: 1px solid var(--stone);
  border-radius: var(--radius); padding: 0.6rem 1rem;
  font-size: 0.85rem; font-weight: 600; color: var(--navy-dark);
}
.security-badge .mi { font-size: 20px; color: var(--navy); }
.security-badge--has-tooltip { position: relative; cursor: pointer; }
.security-tooltip {
  display: none; position: absolute; top: calc(100% + 0.75rem); left: 50%; transform: translateX(-50%);
  width: 28rem; max-width: 90vw; background: #F3EDE5; color: var(--text-light);
  font-size: 1rem; font-weight: 400; line-height: 1.55; padding: 1.25rem;
  border: 1px solid #D5CBBD; border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.08); z-index: 100;
}
.security-tooltip::before {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 9px solid transparent; border-bottom-color: #D5CBBD;
}
.security-tooltip::after {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent; border-bottom-color: #F3EDE5; margin-bottom: -1px;
}
.security-badge--has-tooltip:hover .security-tooltip,
.security-badge--has-tooltip.is-open .security-tooltip { display: block; }
/* Invisible bridge over the gap between badge and popover so the cursor can move into the popover without it closing */
.security-badge--has-tooltip:hover::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 0.75rem;
}

/* --- Pricing box: "Skip the demo and Sign Up Now" row (support-pricing block, show_signup) --- */
.pricing-buy-row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.85rem; margin-top: 1.25rem;
}
.pricing-buy-row-prompt {
  font-size: 0.9rem; color: var(--text-lighter); font-weight: 500;
}
.pricing-buy-note {
  text-align: right; font-size: 0.78rem; color: var(--text-lighter);
  margin-top: 0.5rem;
}
@media screen and (max-width: 540px) {
  .pricing-buy-row { justify-content: center; flex-wrap: wrap; }
  .pricing-buy-note { text-align: center; }
}
/* A CTA banner directly after the support-pricing block sits tight under the quote, like the one-pager */
.support-pricing-block + .cta-banner { margin-top: 0; }

/* --- Sign Up modal (site/snippets/signup-modal.php) --- */
.signup-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.signup-modal.is-open { display: flex; }
.signup-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 31, 58, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.signup-modal-card {
  position: relative; background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  width: 100%; max-width: 32rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 2rem;
}
.signup-modal-close {
  position: absolute; top: 0.5rem; right: 0.75rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.75rem; line-height: 1; color: var(--text-light);
  padding: 0.5rem; font-family: var(--font-sans);
}
.signup-modal-close:hover { color: var(--text); }
.signup-modal-header { margin-bottom: 1.25rem; }
.signup-modal-header h2 {
  font-size: 1.5rem; font-weight: 700; color: var(--navy-dark);
  margin: 0 0 0.25rem;
}
.signup-modal-header p { color: var(--text-light); font-size: 0.95rem; margin: 0; }

.signup-billing { margin-bottom: 1.25rem; }
.signup-billing-heading { display: block; margin-bottom: 0.4rem; }
.signup-billing-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--bg-alt); border-radius: var(--radius);
  padding: 4px; border: 1px solid var(--border);
}
.signup-billing-option {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.65rem 0.5rem;
  background: transparent; border: none; cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  font-family: var(--font-sans); color: var(--text-light);
  font-weight: 600; font-size: 0.95rem;
  transition: background 0.15s, color 0.15s;
}
.signup-billing-option:hover { color: var(--navy-dark); }
.signup-billing-option.is-active {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff;
}
.signup-billing-badge {
  font-size: 0.65rem; font-weight: 700;
  background: var(--cinnabar); color: #fff;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.signup-billing-option.is-active .signup-billing-badge {
  background: rgba(255,255,255,0.22);
}
.signup-billing-badge-short { display: none; }

.signup-form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem; margin-bottom: 1.25rem;
}
.signup-field { display: flex; flex-direction: column; gap: 0.25rem; }
.signup-field--full { grid-column: 1 / -1; }
.signup-field-label {
  font-size: 0.82rem; font-weight: 600; color: var(--text);
}
.signup-field input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 0.95rem;
  background: #fff; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.signup-field input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(43, 94, 167, 0.15);
}

.signup-pricing {
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border: 1px solid rgba(43, 94, 167, 0.15);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.signup-pricing-line {
  display: flex; align-items: baseline; gap: 0.4rem;
}
.signup-pricing-label {
  font-size: 0.9rem; font-weight: 600; color: var(--text-light);
  margin-right: auto;
}
.signup-pricing-amount {
  font-size: 1.75rem; font-weight: 800; color: var(--navy-dark);
}
.signup-pricing-period {
  font-size: 0.9rem; color: var(--text-light); font-weight: 500;
}
.signup-pricing-sub {
  font-size: 0.78rem; color: var(--text-lighter); margin-top: 0.3rem;
}

.signup-submit {
  width: 100%; padding: 0.85rem 1.5rem;
  font-size: 1rem; text-align: center;
  display: block;
}
.signup-submit:disabled { opacity: 0.65; cursor: wait; }
.signup-fineprint {
  text-align: center; font-size: 0.78rem;
  color: var(--text-lighter); margin: 0.75rem 0 0;
}
.signup-error {
  background: #FEF2F2; border: 1px solid #FECACA;
  color: #991B1B; border-radius: var(--radius);
  padding: 0.65rem 0.85rem; margin-bottom: 0.75rem;
  font-size: 0.88rem; line-height: 1.4;
}

@media screen and (max-width: 540px) {
  .signup-modal { padding: 0.75rem; align-items: flex-start; }
  .signup-modal-card { padding: 1.5rem 1.25rem; }
  .signup-form-grid { grid-template-columns: 1fr; }
  .signup-billing-badge-long { display: none; }
  .signup-billing-badge-short { display: inline; }
}

/* Sign-up form <select> (purchasing-for dropdown) matches the inputs */
.signup-field select {
  padding: 0.6rem 2.25rem 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 0.95rem;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
  color: var(--text); width: 100%;
  appearance: none; -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.signup-field select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(43, 94, 167, 0.15);
}
.signup-field select:invalid { color: var(--text-lighter); }

/* --- Buy It Now page (templates/buy.php) --- */
.buy-section { padding-top: 1rem; }
.buy-layout {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2rem; align-items: start;
  max-width: 64rem; margin: 0 auto;
}
.buy-form-card {
  background: #fff; border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
  padding: 2rem;
}
.buy-form-card h2 {
  font-size: 1.5rem; font-weight: 700; color: var(--navy-dark);
  margin: 0 0 0.35rem;
}
.buy-form-intro { color: var(--text-light); font-size: 0.95rem; margin: 0 0 1.5rem; line-height: 1.5; }
.buy-aside { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 5.5rem; }
.buy-aside .pricing-box, .buy-aside .support-box { margin: 0; }
.buy-aside .pricing-box p strong { color: var(--navy); font-size: 1.15rem; white-space: nowrap; }
.buy-demo-btn { display: block; text-align: center; margin-top: 1rem; }
@media (max-width: 60rem) {
  .buy-layout { grid-template-columns: 1fr; }
  .buy-aside { position: static; }
}
@media (max-width: 540px) {
  .buy-form-card { padding: 1.5rem 1.25rem; }
}

/* --- Welcome page after Stripe checkout (templates/welcome.php) --- */
.welcome-section { display: flex; justify-content: center; }
.welcome-card {
  max-width: 36rem; width: 100%;
  background: #fff; border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  padding: 2.5rem; text-align: center;
}
.welcome-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff; font-size: 36px; font-weight: 700;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.25);
}
.welcome-card h1 { font-size: 2rem; font-weight: 800; color: var(--navy-dark); margin: 0 0 0.5rem; text-wrap: balance; }
.welcome-subtitle { font-size: 1.1rem; color: var(--text-light); line-height: 1.5; margin: 0 0 1.75rem; }
.welcome-next-steps {
  text-align: left; background: var(--bg-light);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
.welcome-next-steps h2 { font-size: 1rem; font-weight: 700; color: var(--navy-dark); margin: 0 0 0.5rem; }
.welcome-next-steps ol { list-style: decimal; font-size: 0.95rem; line-height: 1.6; color: var(--text); padding-left: 1.25rem; margin: 0; }
/* The global `li { list-style: none }` reset would hide the step numbers. */
.welcome-next-steps li { list-style: decimal; display: list-item; margin-bottom: 0.35rem; }
.welcome-steps-note { margin: 0.85rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--border); font-size: 0.9rem; line-height: 1.55; color: var(--text-light); }
.welcome-steps-note a { color: var(--navy); font-weight: 600; text-decoration: none; }
.welcome-steps-note a:hover { text-decoration: underline; }
.welcome-contact { font-size: 0.95rem; color: var(--text-light); line-height: 1.6; margin: 0; }
.welcome-contact a { color: var(--navy); font-weight: 600; text-decoration: none; }
.welcome-contact a:hover { text-decoration: underline; }
.welcome-home-link { display: inline-block; margin-top: 1.5rem; color: var(--text-lighter); font-size: 0.85rem; text-decoration: none; }
.welcome-home-link:hover { color: var(--navy); }
@media (max-width: 540px) {
  .welcome-card { padding: 2rem 1.5rem; }
  .welcome-card h1 { font-size: 1.6rem; }
  .welcome-subtitle { font-size: 1rem; }
}

/* Requested-document list on /request-received (templates/request-received.php) */
.welcome-docs {
  text-align: left; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
.welcome-docs h2 { font-size: 1rem; font-weight: 700; color: var(--navy-dark); margin: 0 0 0.6rem; }
.welcome-docs ul { margin: 0; padding: 0; }
.welcome-docs li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.95rem; line-height: 1.5; color: var(--text);
  padding: 0.45rem 0; border-top: 1px solid var(--border);
}
.welcome-docs li:first-child { border-top: 0; padding-top: 0; }
.welcome-docs li:last-child { padding-bottom: 0; }
.welcome-docs .material-symbols-outlined { color: var(--navy); font-size: 1.25rem; flex: none; margin-top: 0.1rem; }

/* --- Support & Pricing --- */
.support-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "stack demo";
  column-gap: 2.5rem;
  max-width: 64rem; margin: 0 auto; padding: 0 1.5rem;
  align-items: start;
}
.support-pricing-block.has-quote .support-pricing {
  grid-template-areas:
    "stack demo"
    "quote quote";
  row-gap: 1.5rem;
}
.support-pricing-stack {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.support-pricing > .demo-box { grid-area: demo; align-self: stretch; }
.support-pricing > .support-pricing-quote { grid-area: quote; margin-top: 0.25rem; }
.support-box, .pricing-box {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem;
}
.support-box h3, .pricing-box h3 { font-size: 1.25rem; font-weight: 700; color: var(--navy-dark); margin-bottom: 0.75rem; }
.support-box p, .pricing-box p { font-size: 0.95rem; color: var(--text-light); line-height: 1.6; margin-bottom: 1rem; }
.support-contact { display: flex; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; }
.support-contact a {
  display: flex; align-items: center; gap: 0.4rem;
  font-weight: 600; font-size: 0.95rem; color: var(--navy);
}
.support-contact .mi { font-size: 20px; }
.support-contact a { text-decoration: none; }
.support-contact a:hover { text-decoration: none; }
.support-contact a:hover .support-contact-text { text-decoration: underline; }
/* Capterra 5-star inline pill — sits below the support contact links inside
   the support box. Ported from the NHS one-pager. */
.capterra-inline {
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
  margin-top: 1rem; font-size: 0.8rem; color: var(--color-text-light);
  background: linear-gradient(135deg, #FFFDF5 0%, #FFF9E6 100%);
  border: 1.5px solid #E8D48C;
  border-radius: 2rem; padding: 0.4rem 0.9rem;
  box-shadow: 0 1px 4px rgba(200, 170, 50, 0.1);
  position: relative; overflow: hidden;
}
.capterra-inline::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: capterra-shimmer 4s ease-in-out infinite;
}
@keyframes capterra-shimmer {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}
.capterra-inline img { height: 1.1rem; }
.capterra-inline strong { color: var(--color-black); }
.capterra-inline .capterra-stars-inline { font-size: 1rem; color: #D4A017; letter-spacing: 0.02em; line-height: 1; }
.pricing-features { margin: 1.25rem 0 0; }
.pricing-features li {
  padding: 0.35rem 0; padding-left: 1.5rem; position: relative;
  font-size: 0.9rem; color: var(--text); list-style: none;
}
.pricing-features li::before { content: "\2713"; position: absolute; left: 0; color: #059669; font-weight: 600; }
.demo-box {
  background: #EFF3EE; border: 1px solid #D5DDD3;
  border-radius: var(--radius-lg); padding: 2rem;
}
.demo-box h3 { font-size: 1.25rem; font-weight: 700; color: var(--navy-dark); margin-bottom: 1rem; }

/* --- Validation Methods --- */
.validation-methods { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.validation-block {
  background: #F3EDE5; border-top: 1px solid #D5CBBD; border-bottom: 1px solid #D5CBBD;
  padding: 2.5rem 2rem; border-radius: var(--radius-lg);
}
.validation-top { display: flex; align-items: center; gap: 2rem; }
.validation-top-cards { flex: 1; min-width: 0; }
.validation-device {
  flex-shrink: 0; position: relative; width: 160px;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.18)) drop-shadow(0 2px 6px rgba(0,0,0,0.08));
}
.validation-device .device-mockup-chrome {
  display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none;
}
.validation-device .device-mockup-screenshot {
  position: absolute; top: 8px; left: 8px; width: 144px; border-radius: 18px; z-index: 1;
}
.validation-bottom {
  display: flex; align-items: center; gap: 2rem;
  margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #D5CBBD;
}
.validation-device--landscape {
  flex-shrink: 0; width: 326px;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.18)) drop-shadow(0 2px 6px rgba(0,0,0,0.08));
}
.validation-device--landscape .device-mockup-inner {
  position: relative; width: 160px;
  transform: rotate(90deg); margin: -83px auto;
}
.validation-device--landscape .device-mockup-chrome {
  display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none;
}
.validation-device--landscape .device-mockup-screenshot {
  position: absolute; top: 8px; left: 8px; width: 144px; border-radius: 18px; z-index: 1;
}
.validation-bottom-text { flex: 1; min-width: 0; }

/* --- Portfolio Showcase --- */
.portfolio-showcase { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.portfolio-showcase-block {
  display: flex; align-items: center; gap: 2rem;
  background: #F3EDE5; border-top: 1px solid #D5CBBD; border-bottom: 1px solid #D5CBBD;
  padding: 2.5rem 2rem; border-radius: var(--radius-lg);
}
.portfolio-showcase-device { flex-shrink: 0; max-width: 320px; }
.portfolio-showcase-text { flex: 1; min-width: 0; }

/* --- NJHS Note --- */
.njhs-note {
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border: 1px solid rgba(43,94,167,0.15);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.95rem; color: var(--text); line-height: 1.5;
  max-width: 52rem; margin: 0 auto;
}
.njhs-note .mi { font-size: 2rem; color: var(--navy); flex-shrink: 0; }

.njhs-note--spaced { margin-top: 3rem; }

/* --- NHS Page Responsive --- */
@media (max-width: 60rem) {
  .support-pricing {
    grid-template-columns: 1fr;
    grid-template-areas:
      "support"
      "pricing"
      "demo";
    row-gap: 1.5rem;
  }
  .support-pricing-block.has-quote .support-pricing {
    grid-template-areas:
      "support"
      "pricing"
      "quote"
      "demo";
  }
  .support-pricing-stack { display: contents; }
  .support-pricing > .support-box { grid-area: support; }
  .support-pricing > .pricing-box { grid-area: pricing; }
}
@media (max-width: 48rem) {
  /* Hero */
  .nhs-hero h1 { font-size: 2.25rem; }
  .nhs-hero-note .dot-sep { display: none; }
  .nhs-hero-note-line2 { display: block; }

  /* Section titles */
  .nhs-section-title { padding-left: 1.5rem; padding-right: 1.5rem; }

  /* Twin quotes */
  .twin-quotes-grid { grid-template-columns: 1fr; }
  .twin-quote-card:last-child { display: none; }
  .twin-quotes--stack-both .twin-quote-card:last-child { display: flex; }
  .twin-quote-school { display: block; }
  .twin-quote-attr .dot-sep { display: none; }

  /* Screenshot feature blocks */
  .screenshot-feature { padding: 0; }
  .screenshot-feature .nhs-section-title { padding: 0 1.5rem; }
  .screenshot-feature-block { flex-direction: column; text-align: center; border-radius: 0; padding-left: 1.5rem; padding-right: 1.5rem; }
  .screenshot-feature-device .device-mockup-inner { width: 220px; }
  .screenshot-feature-device .device-mockup-screenshot { top: 11px; left: 11px; width: 198px; border-radius: 24px; }
  .sf-benefits-header { text-align: center; border-left: none; padding-left: 0; margin-left: 0; }
  .screenshot-feature-text:last-child .sf-benefits-header { display: none; }

  /* CTA banners */
  .nhs-cta-banner { border-radius: 0; margin-left: 0; margin-right: 0; max-width: 100%; }
  .nhs-cta-banner-inner { flex-direction: column; text-align: center; }

  /* Schools section */
  .school-featured-inner { flex-direction: column; align-items: center; text-align: center; }
  .school-featured-quote { border-left: none; padding-left: 0; }
  .school-featured-quote footer { justify-content: center; }
  .school-featured-type { display: block; }
  .school-featured-type .dot-sep { display: none; }
  .school-cards-grid { grid-template-columns: 1fr; }

  /* Support & pricing */
  .support-pricing { padding: 0 1rem; }
  .support-box, .pricing-box { padding: 1rem; }
  .support-contact { justify-content: center; flex-direction: column; align-items: center; gap: 0.8rem; }

  /* Admin showcase */
  .admin-showcase-block { border-radius: 0; padding: 1.5rem 1rem; }

  /* Validation methods */
  .validation-top { flex-direction: column; }
  .validation-bottom { flex-direction: column; }
  .validation-methods { padding: 0; }
  .validation-block { border-radius: 0; padding: 2rem 1.5rem; }
  .validation-device--landscape { width: auto; margin: 0 auto; }
  .validation-device--landscape .device-mockup-inner { width: 160px; margin: -83px auto; }
  .validation-device--landscape .device-mockup-screenshot { top: 8px; left: 8px; width: 144px; border-radius: 18px; }

  /* Portfolio showcase */
  .portfolio-showcase { padding: 0; }
  .portfolio-showcase-block { flex-direction: column; text-align: center; border-radius: 0; padding: 2rem 1.5rem; }
  .portfolio-showcase-device { max-width: 260px; }
}
@media (max-width: 40rem) {
  .nhs-hero { padding: 3.5rem 1.5rem 2.5rem; }
  .nhs-hero h1 { font-size: 1.8rem; }
  .logo-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.5rem; }
  .logo-cell { width: 60px; height: 60px; }
  .logo-cell img { max-width: 44px; max-height: 44px; }
  .logo-tooltip { display: none !important; }
}

/* === State Hero — creative editorial layout for state landing pages ===
   Used by snippets/state-hero.php. Activates only when the page has a
   state_svg_path field populated; otherwise the snippet falls back to
   the standard centered hero. Per-state SVG positioning is driven by
   --svg-inset-top / --svg-inset-bottom custom properties set inline. */
.state-hero {
  position: relative;
  /* Full-bleed past the body's max-width: 72rem + 1.5rem padding constraint.
     100vw + negative margins recenters the section on the viewport. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  padding: 5rem 2.5rem;
  overflow: hidden;
  /* Reset font-size so descendants without explicit sizing don't inherit
     the body's 1.2rem default (which was making the CTA button text 19px
     instead of the mockup's 16px). */
  font-size: 1rem;
  /* Match the mockup's system font stack — the live body uses Figtree,
     which renders the sub paragraph and CTA button at noticeably
     different glyph widths/heights than the mockup even when font-size
     and font-weight are identical. Setting it on .state-hero scopes
     this override to just the hero, so the rest of the site keeps
     Figtree. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.state-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(199, 91, 42, 0.18) 1px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: 0 0;
  opacity: 0.45;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.state-hero-grid {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.state-hero-headline {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  color: #111827;
  margin: 0 0 1.5rem;
  letter-spacing: -0.015em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.state-hero-headline em {
  font-style: normal;
  color: #C75B2A;
  position: relative;
  white-space: nowrap;
}
.state-hero-headline em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 0.18em;
  background: rgba(199, 91, 42, 0.22);
  border-radius: 4px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 1.6s;
}
.state-hero.is-visible .state-hero-headline em::after { transform: scaleX(1); }

.state-hero-sub {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 0 2rem;
  max-width: 32rem;
}
.state-hero-sub strong { color: #111827; font-weight: 700; }

.state-hero-cta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.state-hero-cta {
  display: inline-block;
  padding: 0.9rem 1.7rem;
  background: linear-gradient(135deg, #2B5EA7, #1A3660);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(26, 54, 96, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.state-hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(26, 54, 96, 0.34);
  text-decoration: none;
}
.state-hero-cta-meta {
  font-size: 0.85rem;
  color: #9ca3af;
}

.state-hero-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.state-hero-stage {
  position: relative;
  aspect-ratio: 1 / 0.9;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  /* The silhouette's shadow lives on this HTML wrapper, not on the <svg>: Safari clips a CSS filter
     applied to an outer <svg> to the SVG's own box (even with overflow: visible), which cut the
     shadow off in a rectangle around the map on phones. The halo's contribution to the shadow is
     a few percent alpha and sits behind the map. */
  filter: drop-shadow(0 20px 36px rgba(26, 54, 96, 0.30))
          drop-shadow(0 4px 10px rgba(199, 91, 42, 0.14));
}
.state-hero-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(199, 91, 42, 0.14), transparent 62%);
  pointer-events: none;
}

/* SVG positioning driven by inline custom properties from the snippet */
.state-hero-svg {
  position: absolute;
  top: var(--svg-inset-top, 5%);
  right: 12.5%;
  bottom: var(--svg-inset-bottom, 20%);
  left: 12.5%;
  /* Explicit width (= 100% - left - right). WebKit sizes an absolutely positioned <svg> with width:auto to
     the containing block's full width and ignores left/right, so without this Safari draws the silhouette
     oversized and off-center. The height still comes from the viewBox ratio in every engine. */
  width: 75%;
  overflow: visible;
}
.state-hero-svg .state-shape-outline {
  fill: none;
  stroke: #C75B2A;
  stroke-width: 0.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 2px rgba(199, 91, 42, 0.55));
  transition: stroke-dashoffset 2.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.state-hero.is-visible .state-hero-svg .state-shape-outline { stroke-dashoffset: 0; }

.state-hero-svg .state-hero-marker {
  fill: #fff;
  stroke: #D64933;
  stroke-width: 0.5;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.45s ease,
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0.4px 1.2px rgba(214, 73, 51, 0.55))
          drop-shadow(0 0 1.8px rgba(214, 73, 51, 0.30));
}
.state-hero.is-visible .state-hero-svg .state-hero-marker {
  opacity: 1;
  transform: scale(1);
}
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(1) { transition-delay: 2.55s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(2) { transition-delay: 2.7s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(3) { transition-delay: 2.85s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(4) { transition-delay: 3.0s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(5) { transition-delay: 3.15s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(6) { transition-delay: 3.3s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(7) { transition-delay: 3.45s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(8) { transition-delay: 3.6s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(9) { transition-delay: 3.75s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(10) { transition-delay: 3.9s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(11) { transition-delay: 4.05s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(12) { transition-delay: 4.20s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(13) { transition-delay: 4.35s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(14) { transition-delay: 4.50s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(15) { transition-delay: 4.65s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(16) { transition-delay: 4.80s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(17) { transition-delay: 4.95s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(18) { transition-delay: 5.10s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(19) { transition-delay: 5.25s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(20) { transition-delay: 5.40s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(21) { transition-delay: 5.55s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(22) { transition-delay: 5.70s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(23) { transition-delay: 5.85s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(24) { transition-delay: 6.00s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(25) { transition-delay: 6.15s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(26) { transition-delay: 6.30s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(27) { transition-delay: 6.45s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(28) { transition-delay: 6.60s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(29) { transition-delay: 6.75s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(30) { transition-delay: 6.90s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(31) { transition-delay: 7.05s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(32) { transition-delay: 7.20s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(33) { transition-delay: 7.35s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(34) { transition-delay: 7.50s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(35) { transition-delay: 7.65s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(36) { transition-delay: 7.80s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(37) { transition-delay: 7.95s; }
.state-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(38) { transition-delay: 8.10s; }

/* Audience map hero — many more markers (41+) on the packed US map.
   Tighter cadence (0.05s) so the whole population finishes within ~3.5s
   instead of dragging out ~9s like the per-state default. */
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker {
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(n)  { transition-delay: 2.4s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(2)  { transition-delay: 2.45s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(3)  { transition-delay: 2.50s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(4)  { transition-delay: 2.55s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(5)  { transition-delay: 2.60s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(6)  { transition-delay: 2.65s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(7)  { transition-delay: 2.70s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(8)  { transition-delay: 2.75s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(9)  { transition-delay: 2.80s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(10) { transition-delay: 2.85s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(11) { transition-delay: 2.90s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(12) { transition-delay: 2.95s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(13) { transition-delay: 3.00s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(14) { transition-delay: 3.05s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(15) { transition-delay: 3.10s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(16) { transition-delay: 3.15s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(17) { transition-delay: 3.20s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(18) { transition-delay: 3.25s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(19) { transition-delay: 3.30s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(20) { transition-delay: 3.35s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(21) { transition-delay: 3.40s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(22) { transition-delay: 3.45s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(23) { transition-delay: 3.50s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(24) { transition-delay: 3.55s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(25) { transition-delay: 3.60s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(26) { transition-delay: 3.65s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(27) { transition-delay: 3.70s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(28) { transition-delay: 3.75s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(29) { transition-delay: 3.80s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(30) { transition-delay: 3.85s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(31) { transition-delay: 3.90s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(32) { transition-delay: 3.95s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(33) { transition-delay: 4.00s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(34) { transition-delay: 4.05s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(35) { transition-delay: 4.10s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(36) { transition-delay: 4.15s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(37) { transition-delay: 4.20s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(38) { transition-delay: 4.25s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(39) { transition-delay: 4.30s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(40) { transition-delay: 4.35s; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(41) { transition-delay: 4.40s; }
/* Smaller markers + tighter outline for the packed US map view. */
.audience-map-hero .state-hero-svg .state-hero-marker { stroke-width: 0.3; }
.audience-map-hero .state-hero-svg .state-shape-outline { stroke-width: 0.4; }
/* USA silhouette is much wider than a single state — let it use the full
   stage width instead of the 12.5% side insets that frame state shapes. */
/* The <svg> box is 20% wider than the stage and its viewBox is padded to match (see map-hero.php), so the
   map keeps its size and position while its shadow, an SVG filter on the fill path, renders inside the SVG's
   own viewport. The vertical shift is half the added height as a share of the 1 / 0.9 stage: 0.1 / 0.9. */
.audience-map-hero .state-hero-svg { left: -10%; right: auto; width: 120%; top: calc(var(--svg-inset-top, 5%) - 11.111%); }
.audience-map-hero .state-hero-stage { filter: none; }

.state-hero-caption {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* California-specific override — pulls the caption out toward the page's
   left text column instead of centering it under the silhouette. */
#state-hero-ca .state-hero-caption {
  left: -10rem;
  right: auto;
}
/* Illinois — the silhouette is tall and narrow, so push it toward the
   upper-left of the stage and let the caption sit to its left like CA. */
#state-hero-il .state-hero-svg {
  top: -7%;
  right: 25%;
  left: 10%;
  width: 65%;
}
#state-hero-il .state-hero-caption {
  left: -10rem;
  right: auto;
}
/* Indiana: the silhouette is tall and its viewBox is padded to a square, so the <svg> (height from
   width) reaches the bottom band where the caption sits. A square stage instead of 1 / 0.9 adds
   ~10% of the width below the map so the caption clears the southern tip and its drop shadow. */
#state-hero-in .state-hero-stage {
  aspect-ratio: 1 / 1;
}
/* Texas: nearly square viewBox, so the silhouette ran down to the caption. Same square stage as
   Indiana, with the content-file insets biased upward, to clear the southern tip and its shadow. */
#state-hero-tx .state-hero-stage {
  aspect-ratio: 1 / 1;
}
/* Minnesota — tall and narrow like Illinois, but kept centered. With an explicit height the
   viewBox scales to fit the box (xMidYMid meet) instead of running down into the caption;
   the caption then drops below the stage like FL and MI. */
#state-hero-mn .state-hero-svg {
  top: 0;
  bottom: auto;
  height: 90%;
}
.state-hero.is-visible .state-hero-caption {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}
.state-hero-caption-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 0.65rem;
}
.state-hero-caption-eyebrow::before,
.state-hero-caption-eyebrow::after {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: #d1d5db;
  vertical-align: middle;
  margin: 0 0.7rem;
}
.state-hero-caption-stats {
  font-size: 1rem;
  color: #6b7280;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.state-hero-caption-stats strong {
  color: #C75B2A;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.state-hero-caption-stat { white-space: nowrap; }
/* The Who We Help captions ("Coast to Coast" + school / state stats) fit on one
   row even on phones, so never let the row break before a divider. */
.audience-map-hero .state-hero-caption-stats { white-space: nowrap; }
/* Small phones (360px Android, iPhone SE): the row is borderline at full size, so
   tighten the type and divider spacing instead of letting it wrap or get clipped. */
@media (max-width: 24rem) {
  .audience-map-hero .state-hero-caption-stats { font-size: 0.88rem; letter-spacing: 0; }
  .audience-map-hero .state-hero-caption-stats strong { font-size: 1.05rem; }
  .audience-map-hero .state-hero-caption-divider { margin: 0 0.45rem; }
}
.state-hero-caption-divider {
  display: inline-block;
  width: 1px;
  height: 0.9em;
  background: #d1d5db;
  margin: 0 0.95rem;
  vertical-align: -2px;
}

@media (max-width: 950px) {
  .state-hero { padding: 3rem 1.5rem; }
  /* minmax(0, 1fr), not 1fr: a bare 1fr track has an auto minimum, so any nowrap
     content (the caption stats row, a long <em> in the headline) would widen the
     column past the viewport and push the whole hero off screen. */
  .state-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .state-hero-headline { font-size: 2.2rem; }
  .state-hero-stage { max-width: 360px; }
  .state-hero-right { gap: 1.25rem; }
  .state-hero-caption {
    position: static;
    order: -1;
  }
  /* With the caption moved above the map, the bottom ~27% of the stage box (the band the
     desktop caption sits in, below the USA silhouette) is empty. Pull the rest of the page
     up by most of it. The stage is min(column, 360px) wide, so size the pull the same way. */
  .audience-map-hero .state-hero-stage { margin-bottom: calc(-0.25 * min(100%, 360px)); }
  /* Drop the "Helper Helper " prefix from the eyebrow so the line fits
     on a single row at narrow widths. The eyebrow has horizontal hr lines
     on either side via ::before/::after, so the shorter text still
     renders centered with the same visual frame. The Who We Help heroes are
     the exception: their eyebrow is the short "Helper Helper Coast to Coast",
     which keeps the brand name at every width (tightened below on small
     phones instead of trimmed). */
  .state-hero-caption-eyebrow .state-hero-caption-prefix { display: none; }
  .audience-map-hero .state-hero-caption-eyebrow .state-hero-caption-prefix { display: inline; }
  /* Long <em> phrases ("every school in your district") cannot fit on one line
     at phone widths, so let them wrap here. The ::after sweep cannot follow a
     line break (an absolutely positioned box on a wrapped inline stretches
     from the first fragment to the last), so the underline becomes a background
     strip, which is painted under every line fragment, and sweeps in by growing
     background-size instead. Same color, thickness, timing, and easing. */
  .state-hero-headline em {
    white-space: normal;
    background-image: linear-gradient(rgba(199, 91, 42, 0.22), rgba(199, 91, 42, 0.22));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 0.18em;
    transition: background-size 0.9s cubic-bezier(0.65, 0, 0.35, 1) 1.6s;
  }
  .state-hero-headline em::after { display: none; }
  .state-hero.is-visible .state-hero-headline em { background-size: 100% 0.18em; }
}

/* Small-phone tightening for the audience-map-hero eyebrow: "Helper Helper
   Coast to Coast" keeps its prefix at every width, so at ~360-400px the 0.22em
   tracking and the 1.5rem hr dashes would push it onto a second line. Tighten
   the type and the dashes so the full line still fits on one row. */
@media (max-width: 30rem) {
  .audience-map-hero .state-hero-caption-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
  }
  .audience-map-hero .state-hero-caption-eyebrow::before,
  .audience-map-hero .state-hero-caption-eyebrow::after {
    width: 0.6rem;
    margin: 0 0.35rem;
  }
}

@media (min-width: 951px) {
  #state-hero-fl .state-hero-caption,
  #state-hero-mi .state-hero-caption,
  #state-hero-mn .state-hero-caption { bottom: -1.5rem; }
}

/* Who We Help heroes between the stacked layout and full desktop (951-1190px). Their <em> phrases
   are long ("every school in your district"), and at 3.2rem the nowrap em made the text column's
   min-content wider than its 1.3fr share, so the grid squeezed the map column to ~100px and the
   nowrap caption spilled over the text. Here minmax(0, ...) tracks hold the split no matter what,
   the headline steps down, and the em wraps with the same background-strip underline as phones
   (the ::after sweep cannot follow a line break). The home hero shares these classes but its em
   is one short word, so it is left alone. */
@media (min-width: 951px) and (max-width: 1190px) {
  .audience-map-hero:not(.home-hero) .state-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; }
  .audience-map-hero:not(.home-hero) .state-hero-headline { font-size: 2.5rem; text-wrap: balance; }
  .audience-map-hero:not(.home-hero) .state-hero-sub { font-size: 1.05rem; margin-bottom: 1.75rem; }
  .audience-map-hero:not(.home-hero) .state-hero-headline em {
    white-space: normal;
    background-image: linear-gradient(rgba(199, 91, 42, 0.22), rgba(199, 91, 42, 0.22));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 0.18em;
    transition: background-size 0.9s cubic-bezier(0.65, 0, 0.35, 1) 1.6s;
  }
  .audience-map-hero:not(.home-hero) .state-hero-headline em::after { display: none; }
  .audience-map-hero:not(.home-hero).is-visible .state-hero-headline em { background-size: 100% 0.18em; }
}

.problem-solution {
  margin: 3rem 0;
}

.problem-solution h2 {
  margin: 0 0 1.5rem;
}

.problem-solution p + p {
  margin-top: 1.25rem;
}

/* === Photo Band Block === */
/* Two marquee rows of photos on a navy panel. Each track holds its photo set
   twice; the -50% translate loops seamlessly because every image carries the
   inter-photo spacing as margin-right (a flex gap would leave one un-paired
   gap at the seam and cause a visible jump). */
.photo-band {
  background: #16243F;
  border-radius: 20px;
  padding: 2.125rem 0 2.75rem;
  overflow: hidden;
  margin: 2.5rem 0;
}

.photo-band-head {
  margin: 0 2.5rem 1.625rem;
}

.photo-band-eyebrow {
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F2955F;
  margin-bottom: 0.5rem;
}

.photo-band-title {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0;
}

.photo-band-sub {
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0.55rem 0 0;
  max-width: 44rem;
}

.photo-band-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.photo-band-row + .photo-band-row {
  margin-top: 1rem;
}

.photo-band-track {
  display: flex;
  width: max-content;
}

.photo-band-track--left {
  animation: photo-band-scroll-left 44s linear infinite;
}

.photo-band-track--right {
  animation: photo-band-scroll-right 50s linear infinite;
}

.photo-band-img {
  height: 210px;
  width: var(--photo-w, 300px);
  margin-right: 1rem;
  object-fit: cover;
  object-position: var(--photo-pos, center);
  border-radius: 14px;
  display: block;
  flex: none;
}

@keyframes photo-band-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes photo-band-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .photo-band-track--left,
  .photo-band-track--right {
    animation: none;
  }
}

@media screen and (max-width: 40rem) {
  .photo-band {
    border-radius: 0;
    padding: 1.75rem 0 2.25rem;
  }
  .photo-band-head {
    margin: 0 1.25rem 1.25rem;
  }
  .photo-band-title {
    font-size: 1.35rem;
  }
  .photo-band-sub {
    font-size: 0.95rem;
  }
  .photo-band-img {
    height: 150px;
    width: calc(var(--photo-w, 300px) * 0.72);
    margin-right: 0.75rem;
    border-radius: 10px;
  }
}

/* ============================================================================
   Home page (2026-09 redesign)
   Hero extras, stat rule, state spotlight, how it works, audience ledger,
   feature index, states strip, CTA extras. Everything else on the home page
   reuses the block styles above.
   ============================================================================ */

/* Section label as an explicit class (same look as the h2:has(+ .highlighted-customer-block) pattern,
   for labels that sit inside a grid rather than directly before a card). */
h2.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #D64933;
  border-left: 3px solid #D64933;
  padding-left: 0.75rem;
  margin: 0 0 1rem;
  line-height: 1.5;
  overflow: hidden;
  white-space: nowrap;
  max-width: 3px;
  animation: label-reveal-wide 2s ease-out forwards;
  animation-play-state: paused;
}
h2.section-label span { color: var(--color-text-light); }

/* Width lanes inside the home article (which is the 48rem .feature-detail) */
.home-detail > .stat-rule,
.home-detail > .home-states {
  width: 100vw;
  max-width: 72rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.home-detail > .how-it-works,
.home-detail > .sales-index {
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.home-detail > .state-spotlight,
.home-detail > .audience-ledger {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.home-detail > .cta-banner { margin-top: 3.5rem; margin-bottom: 3.5rem; }
.home-detail > .state-spotlight + .cta-banner,
.home-detail > .state-spotlight + script + .cta-banner { margin-top: 0; }
.home-detail > .twin-quotes { margin-top: 3.5rem; }

/* --- Hero extras --- */
.home-hero-capterra { margin: 1.4rem 0 0; }
.home-hero-capterra .capterra-inline { margin-top: 0; font-size: 0.9rem; padding: 0.5rem 1.1rem; }
.home-hero-capterra .capterra-inline .capterra-stars-inline { font-size: 1.1rem; }
.home-hero-capterra .capterra-inline img { height: 1.2rem; }
.home-hero-capterra .capterra-inline a { position: relative; top: 3px; }
@media (max-width: 40rem) {
  .home-hero-capterra .capterra-inline { white-space: normal; justify-content: center; text-align: center; }
  /* "1,000+ schools | 47 states | 20M+ hours" needs two rows on a phone; drop the third stat there */
  .home-hero .state-hero-caption-stat:nth-child(3) { display: none; }
}

/* Visitor's own cities on the USA map */
.state-hero-svg .state-hero-marker.is-home { fill: #D64933; stroke: #fff; stroke-width: 0.35; }
.audience-map-hero.is-visible .state-hero-svg .state-hero-marker.is-home {
  animation: home-pulse 2.6s ease-in-out 4.8s infinite;
}
@keyframes home-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.45); }
}
/* Home hero: the 79 NHS one-pager markers pop in index order 0.025s apart (same pace as the
   one-pager's paired rules), so the last one lands around 4.35s. :nth-of-type(n) lifts the
   specificity above the paired .audience-map-hero rules and works for any marker count. */
.home-hero.is-visible .state-hero-svg .state-hero-marker:nth-of-type(n) {
  transition-delay: calc(2.4s + var(--i, 0) * 0.025s);
}
@media (max-width: 40rem) {
  .home-hero .state-hero-svg .state-hero-marker:nth-of-type(n+42):not(.is-home) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .audience-map-hero.is-visible .state-hero-svg .state-hero-marker.is-home { animation: none; }
}
/* Dense map heroes (49+ markers, e.g. the K-12 districts page): the home hero's faster
   pop-in cadence and its phone rule that keeps only the first 41 plain markers plus
   every highlighted one. map-hero.php adds the class from the marker count. */
.audience-map-hero.map-hero--dense.is-visible .state-hero-svg .state-hero-marker:nth-of-type(n) {
  transition-delay: calc(2.4s + var(--i, 0) * 0.025s);
}
@media (max-width: 40rem) {
  .map-hero--dense .state-hero-svg .state-hero-marker:nth-of-type(n+42):not(.is-home) { display: none; }
}

/* --- Stat rule --- */
.stat-rule {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 4), 1fr) auto;
  align-items: center;
  gap: 0 0.5rem;
  margin: 3rem 0 0;
  padding: 1.6rem 1rem;
  border-top: 1px solid #E8E0D4;
  border-bottom: 1px solid #E8E0D4;
}
.stat-rule-cell { text-align: center; padding: 0.25rem 1rem; border-left: 1px solid #E8E0D4; }
.stat-rule-cell:first-child { border-left: none; }
.stat-rule-number {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 2.3rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em;
  color: #1A3660;
}
.stat-rule-label {
  display: block; margin-top: 0.35rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #6b7280;
}
.stat-rule-cell--capterra .capterra-inline { margin-top: 0; }
.stat-rule--no-capterra { grid-template-columns: repeat(var(--stat-cols, 4), 1fr); }
@media (max-width: 64rem) {
  .stat-rule { grid-template-columns: repeat(var(--stat-cols, 4), 1fr); row-gap: 1.25rem; }
  .stat-rule-cell--capterra { grid-column: 1 / -1; border-left: none; padding-top: 0.5rem; }
}
@media (max-width: 40rem) {
  .stat-rule { grid-template-columns: 1fr 1fr; padding: 1.25rem 0.5rem; }
  .stat-rule-cell { border-left: none; padding: 0.25rem 0.5rem; }
  .stat-rule-cell:nth-child(2) { border-left: 1px solid #E8E0D4; }
  .stat-rule-cell:nth-child(4) { border-left: 1px solid #E8E0D4; }
  .stat-rule-number { font-size: 1.9rem; }
  .stat-rule-cell--capterra .capterra-inline { white-space: normal; text-align: center; justify-content: center; }
}

/* --- State spotlight --- */
.state-spotlight { position: relative; padding: 4.5rem 1.5rem 4rem; background: #fff; }
.state-spotlight-inner { max-width: 72rem; margin: 0 auto; }
.state-spotlight-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 3.5rem;
  align-items: start;
}
.state-spotlight-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 0.95;
  margin: 0 auto;
  background: #F3EDE5;
  border: 1px solid #D5CBBD;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Column layout: the caption keeps its natural height at the bottom (it wraps on phones and for
     long state names) and the silhouette stage gets whatever is left above it. */
  display: flex; flex-direction: column;
}
.state-spotlight-stage::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(199, 91, 42, 0.18) 1px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 0.35;
  pointer-events: none;
}
.state-spotlight-stage .state-hero-stage { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; max-width: none; aspect-ratio: auto; }
/* Explicit width AND height. An absolutely positioned SVG with height:auto takes its height from the
   viewBox ratio and ignores `bottom`, which let square-ish states (Florida) run down into the caption.
   With a fixed box the viewBox scales to fit (xMidYMid meet) and stays centered. */
.state-spotlight-stage .state-hero-svg {
  top: 6%; left: 12%; width: 76%; height: 88%;
  right: auto; bottom: auto;
}
.state-spotlight--usa .state-spotlight-stage .state-hero-svg { top: 4%; left: 3%; width: 94%; height: 92%; }
.state-spotlight-stage .state-hero-caption {
  position: relative; bottom: auto; left: auto; right: auto;
  flex: 0 0 auto; margin-top: auto; padding: 0.25rem 0.75rem 1rem;
  opacity: 1; transform: none; order: 0;
}
/* Draw-on and marker pop are gated on JS (will-animate) and viewport entry (is-visible) */
.state-spotlight:not(.will-animate) .state-hero-svg .state-shape-outline { stroke-dashoffset: 0; transition: none; }
.state-spotlight:not(.will-animate) .state-hero-svg .state-hero-marker { opacity: 1; transform: scale(1); transition: none; }
.state-spotlight.is-visible .state-hero-svg .state-shape-outline { stroke-dashoffset: 0; }
.state-spotlight.is-visible .state-hero-svg .state-hero-marker {
  opacity: 1; transform: scale(1);
  transition-delay: calc(2.1s + var(--i, 0) * 0.08s);
}
.state-spotlight--usa.is-visible .state-hero-svg .state-hero-marker { transition-delay: calc(2.1s + var(--i, 0) * 0.025s); }
.state-spotlight--usa .state-hero-svg .state-hero-marker { stroke-width: 0.3; }
.state-spotlight--usa .state-hero-svg .state-shape-outline { stroke-width: 0.4; }

/* National mode: short quotes from around the country stand in for the USA map (the hero already shows it) */
.state-spotlight--voices .state-spotlight-stage {
  aspect-ratio: auto;
  max-width: 480px;
  padding: 1.2rem 1.2rem 1.3rem;
}
.state-spotlight-voices { position: relative; display: flex; flex-direction: column; gap: 0.8rem; }
.state-spotlight-voices-eyebrow { text-align: center; margin-bottom: 0.2rem; }
.state-spotlight-voice {
  margin: 0;
  padding: 1rem 1.15rem 0.9rem;
  background: #fff;
  border: 1px solid #E8E0D4;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(26, 54, 96, 0.05);
}
.state-spotlight-voice blockquote { margin: 0 0 0.75rem; padding: 0; border: 0; }
.state-spotlight-voice blockquote p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
}
.state-spotlight-voice blockquote strong { color: var(--navy-dark); }
.state-spotlight-voice-bottom { display: flex; align-items: center; gap: 0.7rem; }
.state-spotlight-voice-photo,
.state-spotlight-voice-logo {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
}
.state-spotlight-voice-photo { border-radius: 50%; overflow: hidden; }
.state-spotlight-voice-photo img { width: 100%; height: 100%; object-fit: cover; }
.state-spotlight-voice-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.state-spotlight-voice-attr { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.state-spotlight-voice-attr strong { display: block; font-size: 0.86rem; color: var(--navy-dark); font-style: normal; }
.state-spotlight-voice-attr span { display: block; font-size: 0.76rem; color: var(--text-light); }
.state-spotlight-voice-state {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C75B2A;
  background: rgba(199, 91, 42, 0.1);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  white-space: nowrap;
}
/* Cards fade up one by one once the section scrolls into view (same gating as the map draw-on) */
.state-spotlight.will-animate .state-spotlight-voice {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.state-spotlight.will-animate.is-visible .state-spotlight-voice {
  opacity: 1; transform: none;
  transition-delay: calc(0.15s + var(--i, 0) * 0.18s);
}
@media (max-width: 950px) {
  /* On phones the copy and customer card come first; the quote stack follows */
  .state-spotlight--voices .state-spotlight-stage { max-width: none; order: 2; }
}

.state-spotlight-monogram {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 3.25rem;
}
.state-spotlight-monogram-code {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(6rem, 22vw, 11rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px #C9B9A6;
  text-shadow: 0 18px 30px rgba(26, 54, 96, 0.12);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.state-spotlight.will-animate:not(.is-visible) .state-spotlight-monogram-code { opacity: 0; transform: scale(0.85); }
.state-spotlight-monogram-name {
  margin-top: 0.6rem;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #C75B2A;
}

.state-spotlight-body { min-width: 0; }
.state-spotlight-hook {
  font-size: 1.7rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em;
  color: #111827;
  margin: 0.25rem 0 0.9rem;
  max-width: 30ch;
}
.state-spotlight-tagline {
  font-size: 1.1rem; line-height: 1.55; color: #374151;
  margin: 0 0 1.5rem;
  max-width: 54ch;
}
.state-spotlight-card .highlighted-customer { margin-bottom: 0; }
.state-spotlight-card .highlighted-customer-logo img { width: 5.5rem; margin-top: 0.5rem; }
.state-spotlight-reqcard { padding: 1.75rem 2rem; }
.state-spotlight-reqcard-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #D64933; margin-bottom: 0.5rem;
}
.state-spotlight-reqcard h3 { font-size: 1.15rem; font-weight: 700; color: #111827; margin: 0 0 0.6rem; }
.state-spotlight-reqcard p { font-size: 1rem; line-height: 1.6; color: #374151; margin: 0 0 0.9rem; }
.state-spotlight-reqcard a { font-weight: 700; color: #2B5EA7; text-decoration: none; }
.state-spotlight-reqcard a:hover { text-decoration: underline; }
.state-spotlight-note { margin: 0.6rem 0 0; font-size: 0.78rem; color: #9ca3af; }
.state-spotlight-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.5rem; }
.state-spotlight-demo { font-weight: 600; color: #2B5EA7; text-decoration: none; }
.state-spotlight-demo:hover { text-decoration: underline; }
.state-spotlight-geo-note { margin: 1rem 0 0; font-size: 0.8rem; color: #9ca3af; }
.state-spotlight-geo-note a { color: #6b7280; }

.state-spotlight-schools { margin-top: 3rem; }
.state-spotlight-schools .sf-benefits-header { margin-left: 0; }
.state-spotlight-schools-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.state-spotlight-schools .partner-school-card { align-items: center; padding: 1rem 1.25rem; }
.state-spotlight-schools .partner-school-card:focus-visible { outline: 2px solid #2B5EA7; outline-offset: 2px; }

@media (max-width: 950px) {
  .state-spotlight { padding: 3rem 1.25rem; }
  .state-spotlight-grid { grid-template-columns: 1fr; gap: 2rem; }
  .state-spotlight-stage { max-width: 300px; }
  /* Caption without the decorative rules and with tighter stats so it fits the 300px stage one line per row */
  .state-spotlight-stage .state-hero-caption { padding: 0.25rem 0.5rem 0.9rem; }
  .state-spotlight-stage .state-hero-caption-eyebrow { margin-bottom: 0.4rem; }
  .state-spotlight-stage .state-hero-caption-eyebrow::before,
  .state-spotlight-stage .state-hero-caption-eyebrow::after { display: none; }
  .state-spotlight-stage .state-hero-caption-stats { font-size: 0.92rem; }
  .state-spotlight-stage .state-hero-caption-stats strong { font-size: 1.1rem; }
  .state-spotlight-stage .state-hero-caption-divider { margin: 0 0.6rem; }
  .state-spotlight-hook { font-size: 1.4rem; max-width: none; }
  .state-spotlight-actions .state-hero-cta { width: 100%; text-align: center; }
  /* The CTA is full width here, so the demo link and the geo note center under it */
  .state-spotlight-actions { justify-content: center; }
  .state-spotlight-geo-note { text-align: center; }
  .state-spotlight-schools-row {
    display: flex; overflow-x: auto; gap: 0.85rem; padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
            mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .state-spotlight-schools .partner-school-card { flex: 0 0 260px; scroll-snap-align: start; }
}

/* --- How it works --- */
.how-it-works { margin-top: 3.5rem; padding: 0 1.5rem; }
.how-it-works .nhs-section-title { margin-bottom: 1.75rem; }
.how-it-works-inner {
  background: #EBF0F6;
  border-top: 1px solid #CEDAE9; border-bottom: 1px solid #CEDAE9;
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem 2rem;
}
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.how-step { position: relative; margin: 0; padding: 1.25rem; display: flex; flex-direction: column; border-color: #D8E1EC; }
.how-step-number {
  position: absolute; top: 0.55rem; right: 0.9rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 2.1rem; font-weight: 800; line-height: 1;
  color: rgba(214, 73, 51, 0.2);
}
.how-step .sf-benefit-header { padding-right: 2.5rem; display: flex; align-items: flex-start; gap: 0.4rem; }
.how-step .sf-benefit-header .sf-benefit-icon { flex: 0 0 auto; margin-right: 0; line-height: 1.35; }
.how-step .sf-benefit-header strong { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.how-step-media { margin-top: 1.25rem; display: flex; justify-content: center; align-items: flex-start; flex: 1; }
.how-step-media--phone {
  max-height: 300px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.how-step-media--phone .device-mockup-inner { position: relative; width: 200px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22)); }
.how-step-media--phone .device-mockup-chrome { display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none; }
.how-step-media--phone .device-mockup-screenshot { position: absolute; top: 10px; left: 10px; width: 180px; border-radius: 22px; z-index: 1; }
.how-step-media--admin { align-items: center; }
.how-step-media--admin .admin-screenshot { width: 100%; }
.how-step-media--admin .admin-screenshot img { display: block; width: 100%; height: auto; }
.how-it-works-note { text-align: center; margin: 1.5rem 0 0; font-size: 1.02rem; color: #374151; }
@media (max-width: 60rem) {
  .how-it-works { padding: 0 1.25rem; }
  .how-it-works-inner { padding: 1.5rem 1.25rem; }
  .how-steps { grid-template-columns: 1fr; }
  .how-step-media--phone { max-height: 260px; }
}

/* --- Audience ledger (Who We Help) --- */
.audience-ledger { position: relative; padding: 4.5rem 1.5rem; background: #FAF6F0; overflow: hidden; }
.audience-ledger::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(199, 91, 42, 0.18) 1px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 0.25;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}
.audience-ledger-inner {
  position: relative;
  max-width: 72rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start;
}
.audience-ledger-intro { position: sticky; top: 6rem; }
.audience-ledger-heading {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 2.1rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.015em;
  color: #111827; margin: 0.5rem 0 1rem;
}
.audience-ledger-text { font-size: 1.05rem; line-height: 1.6; color: #4b5563; margin: 0 0 1.25rem; }
.audience-ledger-all { font-weight: 700; color: #2B5EA7; text-decoration: none; }
.audience-ledger-all:hover { text-decoration: underline; }
.audience-ledger-rows { display: flex; flex-direction: column; border-top: 1px solid #E8E0D4; }
.audience-ledger-row {
  display: grid; grid-template-columns: 2.75rem 1fr auto; gap: 1rem; align-items: center;
  padding: 1.1rem 1rem;
  border-bottom: 1px solid #E8E0D4;
  text-decoration: none; color: inherit;
  transition: background 0.2s ease;
}
.audience-ledger-row:hover { background: #FAF0ED; text-decoration: none; }
.audience-ledger-icon { font-size: 28px; color: #D64933; }
.audience-ledger-copy { min-width: 0; }
.audience-ledger-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 1.1rem; font-weight: 700; color: #1A3660; }
.audience-ledger-hook { display: block; margin-top: 0.2rem; font-size: 0.95rem; line-height: 1.45; color: #4b5563; }
.audience-ledger-pill {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: #2B5EA7; border-radius: 999px; padding: 0.22rem 0.55rem;
}
.audience-ledger-arrow { color: #C75B2A; font-weight: 700; transition: transform 0.2s ease; }
.audience-ledger-row:hover .audience-ledger-arrow { transform: translateX(4px); }
@media (max-width: 60rem) {
  .audience-ledger { padding: 3rem 1.25rem; }
  /* minmax(0, …): the nowrap section label would otherwise set the track's minimum width and, once its
     reveal animation lifts max-width, push the whole grid (rows and arrows) past the viewport */
  .audience-ledger-inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .audience-ledger-intro { position: static; }
  .audience-ledger-heading { font-size: 1.7rem; }
  .audience-ledger-row { padding: 1rem 0.5rem; }
}
@media (max-width: 40rem) {
  /* Section labels are nowrap and reveal by width, so on phones the gray half ("Student Groups or
     District-Wide", "Ten helpful ways…", "30+ Colorado schools") would be cut off mid-word: show only the red part */
  h2.section-label span { display: none; }
}

/* --- Feature index --- */
.feature-index { margin: 3rem 0 0; }
.feature-index-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; border-top: 1px solid #E8E0D4; }
.feature-index-item {
  display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.75rem; align-items: center;
  padding: 0.8rem 0.35rem;
  border-bottom: 1px solid #E8E0D4;
  text-decoration: none; color: inherit;
}
.feature-index-item:hover { text-decoration: none; background: #FAF6F0; }
.feature-index-icon { font-size: 20px; color: #D64933; }
.feature-index-copy { min-width: 0; }
.feature-index-title { display: block; font-weight: 600; color: #1A3660; font-size: 0.98rem; }
.feature-index-summary { display: block; font-size: 0.82rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-index-arrow { color: #C75B2A; transition: transform 0.2s ease; }
.feature-index-item:hover .feature-index-arrow { transform: translateX(4px); }
@media (max-width: 40rem) { .feature-index-list { grid-template-columns: 1fr; } }

/* --- Twin quotes: single card fallback (home dedupe) --- */
.twin-quotes--single .twin-quotes-grid { grid-template-columns: minmax(0, 36rem); justify-content: center; }

/* --- States strip (home block and the bottom of every state page) ---
   Scoped to both wrappers on purpose: the home block sits inside the .feature-detail article,
   whose generic "ul > li" rule (dashed rows, column flex) would otherwise outrank these chips. */
.home-states,
.states-strip { margin-top: 3.5rem; padding: 2rem 1.5rem 0; border-top: 1px solid #E8E0D4; }
.states-strip { max-width: 72rem; margin-left: auto; margin-right: auto; margin-bottom: 4rem; }
:is(.home-states, .states-strip) .all-states-list--compact { margin: 0; padding: 0; background: none; border-radius: 0; }
:is(.home-states, .states-strip) .all-states-list--compact h2 {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: #6b7280; margin-bottom: 1rem;
}
:is(.home-states, .states-strip) .all-states-list--compact ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.45rem 0.5rem; margin: 0; padding: 0; list-style: none; }
:is(.home-states, .states-strip) .all-states-list--compact ul > li { border: none; padding: 0; margin: 0; font-size: 0.82rem; line-height: 1; color: inherit; }
:is(.home-states, .states-strip) .all-states-list--compact ul > li a {
  display: inline-block; padding: 0.4rem 0.75rem; border-radius: 999px;
  background: #EDF2F9; color: #1A3660; font-weight: 600; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
:is(.home-states, .states-strip) .all-states-list--compact ul > li a:hover { background: #2B5EA7; color: #fff; text-decoration: none; }
:is(.home-states, .states-strip) .all-states-list--compact ul > li a.is-current { background: #C75B2A; color: #fff; }
:is(.home-states, .states-strip) .all-states-list--compact ul > li span { display: inline-block; padding: 0.4rem 0.5rem; color: #9ca3af; }

/* --- CTA banner: optional secondary link --- */
.cta-banner-actions { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.cta-banner-secondary { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cta-banner-secondary:hover { color: #fff; }

/* --- Retire strip (what you can retire) --- */
.home-detail > .retire-strip {
  width: 100vw;
  max-width: 72rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.retire-strip { margin: 0; }
.home-detail > .retire-strip:first-child { margin-top: 1.5rem; }
.retire-strip + .retire-strip { margin-top: 2.75rem; }
.retire-strip .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.retire-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #D64933; border-left: 3px solid #D64933; padding-left: 0.75rem; line-height: 1.3; margin: 0;
}

/* Strike style: one sentence, each phrase crossed off in turn */
.retire-strip--strike {
  padding: 1.5rem 1.5rem 1.65rem;
  border-top: 1px solid #E8E0D4;
  border-bottom: 1px solid #E8E0D4;
}
.retire-strip--strike .retire-strip-inner { max-width: 66rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.retire-sentence {
  margin: 0; text-align: center; text-wrap: balance;
  font-size: 1.5rem; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; color: #1A3660;
}
.retire-phrase {
  position: relative; display: inline-block; padding: 0 0.12em; white-space: nowrap;
  transition: color 0.45s ease; transition-delay: calc(0.4s + var(--i, 0) * 0.24s);
}
.retire-unit { white-space: nowrap; }
.retire-sep { color: #b8bdc7; margin-right: 0.1em; }
.retire-strike { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.retire-strike path {
  fill: none; stroke: #D64933; stroke-width: 1.05; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.42s cubic-bezier(0.55, 0, 0.3, 1);
  transition-delay: calc(0.4s + var(--i, 0) * 0.24s);
}
.retire-strip.is-visible .retire-strike path { stroke-dashoffset: 0; }
.retire-strip.is-visible .retire-phrase { color: #9ca3af; }
.retire-closing {
  display: inline-flex; align-items: center; gap: 0.35em; margin-left: 0.25em; white-space: nowrap;
  font-weight: 800; color: #1A3660; opacity: 0; transform: translateY(0.35em);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  transition-delay: calc(0.55s + var(--n, 5) * 0.24s);
}
.retire-closing .material-symbols-outlined { font-size: 1.15em; color: #D64933; font-variation-settings: 'FILL' 1; }
.retire-strip.is-visible .retire-closing { opacity: 1; transform: none; }

/* Stamps style: paper slips on the desk, each one stamped RETIRED */
.retire-strip--stamps {
  padding: 2rem 1.5rem 2.4rem;
  background: #F3EDE5;
  border: 1px solid #D5CBBD;
  border-radius: var(--radius-lg);
}
.retire-strip--stamps .retire-strip-inner { display: flex; flex-direction: column; align-items: center; }
.retire-slips {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1.1rem 1.05rem;
}
.retire-slip {
  position: relative; width: 10.4rem; min-height: 8.6rem; padding: 1rem 0.9rem 2.1rem;
  background: #FFFDF8;
  background-image: repeating-linear-gradient(180deg, transparent 0 1.55rem, rgba(43, 94, 167, 0.11) 1.55rem calc(1.55rem + 1px));
  background-origin: content-box;
  border: 1px solid #E3D9CA; border-radius: 3px;
  box-shadow: 0 8px 18px rgba(18, 31, 58, 0.09), 0 1px 2px rgba(18, 31, 58, 0.08);
  transform: rotate(var(--tilt, 0deg));
}
.retire-slip::before {
  content: ""; position: absolute; left: 50%; top: -0.55rem; width: 3.2rem; height: 1.05rem; margin-left: -1.6rem;
  background: rgba(255, 246, 200, 0.75); border: 1px solid rgba(0, 0, 0, 0.06);
  transform: rotate(calc(var(--tilt, 0deg) * -1.5));
}
.retire-slip-body { display: flex; flex-direction: column; gap: 0.25rem; transition: opacity 0.4s ease; transition-delay: calc(0.62s + var(--i, 0) * 0.26s); }
.retire-slip-icon { font-size: 1.45rem; color: #6b7280; margin-bottom: 0.1rem; }
.retire-slip-title { font-size: 0.95rem; line-height: 1.2; color: #1A3660; }
.retire-slip-detail { font-family: 'Caveat', 'Brush Script MT', cursive; font-size: 1.2rem; line-height: 1.05; color: #2B5EA7; }
.retire-strip.is-visible .retire-slip:not(.retire-slip--keep) .retire-slip-body { opacity: 0.55; }
.retire-stamp {
  position: absolute; right: -0.55rem; bottom: 0.6rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.82rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
  color: #D64933; border: 3px solid #D64933; border-radius: 4px; padding: 0.32rem 0.5rem 0.28rem;
  outline: 1px solid #D64933; outline-offset: 2px;
  mix-blend-mode: multiply; opacity: 0;
  transform: rotate(-12deg) scale(2.6);
  transition: transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.16s ease-out;
  transition-delay: calc(0.45s + var(--i, 0) * 0.26s);
}
.retire-stamp--keep { color: #2B5EA7; border-color: #2B5EA7; outline-color: #2B5EA7; }
.retire-strip.is-visible .retire-stamp { opacity: 0.9; transform: rotate(-12deg) scale(1); }
.retire-strip.is-visible .retire-slip { animation: retire-thump 0.32s ease-out both; animation-delay: calc(0.6s + var(--i, 0) * 0.26s); }
@keyframes retire-thump {
  0%   { transform: rotate(var(--tilt, 0deg)); }
  40%  { transform: rotate(var(--tilt, 0deg)) translateY(3px) scale(0.985); }
  100% { transform: rotate(var(--tilt, 0deg)); }
}
.retire-slip--keep { background-color: #fff; border-color: #2B5EA7; box-shadow: 0 8px 18px rgba(43, 94, 167, 0.18), 0 1px 2px rgba(18, 31, 58, 0.08); }
.retire-slip--keep .retire-slip-icon { color: #D64933; font-variation-settings: 'FILL' 1; }
.retire-slip--keep .retire-slip-detail { color: #1A3660; }

@media (max-width: 64rem) {
  .retire-sentence { font-size: 1.3rem; }
}
@media (max-width: 40rem) {
  .retire-strip--strike { padding: 1.25rem 1rem 1.4rem; }
  .retire-sentence { font-size: 1.12rem; }
  .retire-strip--stamps { padding: 1.5rem 1rem 1.9rem; border-radius: 0; border-left: none; border-right: none; }
  .retire-slips { gap: 1rem 0.75rem; }
  .retire-slip { width: calc(50% - 0.4rem); min-height: 7.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .retire-phrase, .retire-strike path, .retire-closing, .retire-slip-body, .retire-stamp { transition: none; }
  .retire-strip.is-visible .retire-slip { animation: none; }
}

/* --- Reminder timeline + footnote (Messaging & Automated Reminders feature page) --- */
.reminder-timeline { list-style: none; margin: 2rem 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.25rem; position: relative; }
.reminder-timeline::before { content: ''; position: absolute; left: 0.6rem; right: 0; top: 0.6rem; height: 2px; background: #E8E0D4; }
.reminder-stop { position: relative; padding-top: 2.4rem; margin: 0; }
.reminder-stop::before { content: ''; position: absolute; top: 0; left: 0; width: 1.2rem; height: 1.2rem; box-sizing: border-box; border-radius: 50%; background: #D64933; border: 3px solid #fff; box-shadow: 0 0 0 2px #D64933; }
.reminder-when { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #D64933; margin-bottom: 0.3rem; }
.reminder-who { display: block; font-weight: 600; color: var(--color-black); margin-bottom: 0.4rem; }
.reminder-stop p { margin: 0; font-size: 0.93rem; line-height: 1.5; color: #374151; }
.reminder-channels { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; }
.reminder-channels span { font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; background: #E8EEF7; color: #2B5EA7; }
@media (max-width: 48rem) {
  .reminder-timeline { grid-template-columns: 1fr; gap: 1.5rem; }
  .reminder-timeline::before { top: 0.6rem; bottom: 0.6rem; left: calc(0.6rem - 1px); right: auto; width: 2px; height: auto; }
  .reminder-stop { padding: 0 0 0 2.2rem; }
}
.feature-footnote { font-size: 0.85rem; color: #6B7280; margin: -0.5rem 0 2rem; text-align: center; }

/* === Group Types Block (Student Groups page) === */
/* Wide lane like the screenshot-feature block: 64rem centered inside the 48rem article. */
.feature-detail > .group-types {
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.group-types { padding: 0 1.5rem; margin-top: 3.5rem; margin-bottom: 1rem; }
.group-types .nhs-section-title { margin-bottom: 1rem; }
.group-types-intro {
  max-width: 44rem; margin: 0 auto 2.25rem; text-align: center;
  color: var(--text-light); font-size: 1.05rem; line-height: 1.6;
}
.group-types-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.group-type-card {
  background: #fff; border: 2px solid #E8E0D4; border-radius: 6px;
  padding: 1.1rem 1.1rem 1.15rem; text-align: left;
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
}
.group-type-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(26,23,20,0.1); }
.group-type-header { display: flex; align-items: flex-start; gap: 0.5rem; }
.group-type-icon { color: #D64933; font-size: 26px; flex-shrink: 0; margin-top: 0.05rem; }
.group-type-header h3 {
  margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--navy-dark);
}
.group-type-hook { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-light); }
/* The generic .feature-detail ul rule above makes lists a flex column with dashed row
   separators; the chips need row direction, wrapping, and their own pill borders. */
.feature-detail .group-types .group-type-chips {
  list-style: none; margin: 0.15rem 0 0; padding: 0;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.35rem;
}
.feature-detail .group-types .group-type-chips li {
  display: inline-block; position: static; list-style: none;
  font-size: 0.78rem; font-weight: 600; line-height: 1.25;
  color: var(--navy-dark); background: #EDF2F9; border: 1px solid rgba(43,94,167,0.15);
  border-radius: 999px; padding: 0.28rem 0.6rem; margin: 0; text-align: left;
}
.feature-detail .group-types .group-type-chips li:last-child { border-bottom: 1px solid rgba(43,94,167,0.15); }
.feature-detail .group-types .group-type-chips li::before,
.feature-detail .group-types .group-type-chips li::after { content: none; display: none; }
.feature-detail .group-types .group-type-chips li a {
  color: #2B5EA7; text-decoration: none; border-bottom: 1px dotted rgba(43,94,167,0.5);
}
.feature-detail .group-types .group-type-chips li a:hover { color: #C75B2A; border-bottom-color: #C75B2A; }
@media (max-width: 60rem) {
  .group-types-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .group-types { margin-top: 2.5rem; }
  .group-types-grid { grid-template-columns: 1fr; }
}

/* === Platform Comparison Block === */
/* Helper Helper vs two competitors. Column "hh" is highlighted; group rows use the section-label look. */
.platform-comparison { margin: 3rem 0 2.5rem; }
.platform-comparison-heading { margin: 0 0 0.75rem; }
.platform-comparison-heading span { color: var(--color-text-light); font-weight: 500; }
.platform-comparison-intro { color: var(--color-text-light); line-height: 1.6; margin: 0 0 1.5rem; } /* spans the full 64rem chart width, matching the heading */
.platform-comparison-intro p { margin: 0 0 0.75rem; }
.platform-comparison-intro p:last-child { margin-bottom: 0; }
.pc-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.pc-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid #D5CBBD;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.pc-scroll:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pc-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  table-layout: fixed;
}
.pc-table col { width: auto; }
.pc-table thead th {
  background: linear-gradient(135deg, #2B5EA7 0%, #1A3660 100%);
  color: #fff;
  text-align: left;
  padding: 1rem 1rem 0.85rem;
  vertical-align: bottom;
  font-weight: 600;
}
.pc-table thead th.pc-col-label { width: 23%; }
.pc-table thead th.pc-col-hh {
  background: linear-gradient(135deg, #D64933 0%, #B23E1F 100%);
  position: relative;
}
.pc-table thead th.pc-col-hh::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: #D64933;
}
.pc-th-name { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; }
.pc-th-tag { display: block; font-size: 0.72rem; font-weight: 400; opacity: 0.82; margin-top: 0.2rem; line-height: 1.35; }

.pc-table tbody th,
.pc-table tbody td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #EFE9E0;
  vertical-align: top;
  text-align: left;
}
.pc-table tbody tr:last-child th,
.pc-table tbody tr:last-child td { border-bottom: none; }
.pc-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--color-black);
  background: #fff;
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 #EFE9E0;
}
.pc-row-icon { font-size: 1.15rem; color: var(--navy); vertical-align: -4px; margin-right: 0.3rem; }
.pc-table td.pc-col-hh { background: #EDF2F9; }
.pc-table tbody tr.pc-row:hover td { background: #F7F2EA; }
.pc-table tbody tr.pc-row:hover td.pc-col-hh { background: #E3EAF5; }

.pc-group th {
  background: #F3EDE5;
  color: #D64933;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.5rem 1rem;
  border-top: 1px solid #E8E0D4;
  border-bottom: 1px solid #E8E0D4;
}
.pc-group:first-child th { border-top: none; }

.pc-cell-inner { display: flex; align-items: flex-start; gap: 0.45rem; }
.pc-status { flex: none; font-size: 1.2rem; line-height: 1.15; font-variation-settings: 'FILL' 1; }
.pc-cell--yes .pc-status { color: #2F7D5B; }
.pc-cell--partial .pc-status { color: #D98E2B; }
.pc-cell--no .pc-status { color: #D64933; }
.pc-cell--na .pc-status { color: #B9AFA2; }
.pc-cell--na .pc-cell-text { color: var(--color-text-light); }
.pc-cell--soon .pc-status { color: #2B5EA7; }
.pc-cell-text .pc-muted { color: var(--color-text-light); }
.pc-cell-text a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(43, 94, 167, 0.35); text-underline-offset: 2px; }
.pc-cell-text a:hover { text-decoration-color: currentColor; }

.pc-rating { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.pc-stars { position: relative; display: inline-block; color: #E4DCCF; font-size: 1.05rem; letter-spacing: 0.04em; line-height: 1; }
.pc-stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: #D4A017; white-space: nowrap; }
.pc-score { font-weight: 700; font-size: 1.1rem; color: var(--color-black); }
.pc-detail { display: block; font-size: 0.76rem; color: var(--color-text-light); margin-top: 0.2rem; }
.pc-detail strong { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--terra); text-decoration-thickness: 2px; text-underline-offset: 2px; } /* e.g. the bolded "5.0 for customer service" callout */
.pc-none { color: var(--color-text-light); font-style: italic; }
.pc-cite { font-size: 0.62rem; line-height: 0; font-weight: 500; margin-left: 0.1rem; white-space: nowrap; }
.pc-cite a { color: var(--navy); text-decoration: none; }
.pc-cite a:hover { text-decoration: underline; }
.pc-cite span { color: var(--color-text-lighter); }

.pc-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0.9rem 0 0; padding: 0; font-size: 0.76rem; color: var(--color-text-light); }
.pc-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.pc-legend .mi { font-size: 1.05rem; vertical-align: -4px; font-variation-settings: 'FILL' 1; }
.pc-legend--yes .mi { color: #2F7D5B; }
.pc-legend--partial .mi { color: #D98E2B; }
.pc-legend--no .mi { color: #D64933; }
.pc-legend--na .mi { color: #B9AFA2; }
.pc-legend--soon .mi { color: #2B5EA7; }

/* "Beyond the Checkmarks" cards: their own block (comparison-deep-dives) so quotes can sit between them and the table. */
.comparison-deep-dives { margin: 3rem 0 2.5rem; scroll-margin-top: 6rem; } /* scroll margin clears the sticky header for #beyond-the-checkmarks links */
.comparison-deep-dives-heading { margin: 0 0 0.75rem; }
.comparison-deep-dives-heading span { color: var(--color-text-light); font-weight: 500; }
.comparison-deep-dives-intro { margin: 0 0 1.5rem; color: var(--color-text-light); line-height: 1.6; } /* spans the full 64rem block width, matching the heading and card grid (same as .platform-comparison-intro) */
.comparison-deep-dives-intro p { margin: 0 0 0.75rem; }
.comparison-deep-dives-intro p:last-child { margin-bottom: 0; }
.pc-deep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pc-deep-card { background: #fff; border: 1px solid #E8E0D4; border-left: 4px solid #D64933; border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); }
.pc-deep-title { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 700; color: var(--color-black); }
.pc-deep-text { font-size: 0.88rem; line-height: 1.55; color: var(--color-text); }
.pc-deep-text p { margin: 0 0 0.6rem; }
.pc-deep-text p:last-child { margin-bottom: 0; }
.pc-deep-text a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(43, 94, 167, 0.35); text-underline-offset: 2px; }
.pc-deep-text a:hover { text-decoration-color: currentColor; }
.pc-footer { margin-top: 0.9rem; font-size: 0.74rem; color: var(--color-text-light); line-height: 1.5; }
.pc-asof { margin: 0; font-style: italic; }
.pc-asof a { color: var(--navy); }
.pc-asof-break { display: inline; } /* desktop-only line break before the corrections sentence; hidden on phones below */
.pc-sources { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #E8E0D4; }
.pc-sources h3 { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-light); margin: 0 0 0.5rem; }
.pc-sources ol { list-style: decimal; columns: 2; column-gap: 2.5rem; margin: 0; padding-left: 1.4rem; }
/* The global `li { list-style: none }` reset would hide the numbers the citations point to. */
.pc-sources li { list-style: decimal; display: list-item; break-inside: avoid; margin-bottom: 0.3rem; padding-left: 0.2rem; scroll-margin-top: 6rem; }
.pc-sources li::marker { color: var(--color-text-lighter); font-variant-numeric: tabular-nums; }
.pc-sources li:target { color: var(--color-black); }
.pc-sources li:target a { background: linear-gradient(180deg, transparent 55%, rgba(214, 73, 51, 0.25) 55%); }
.pc-sources a { color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
.pc-sources a:hover { text-decoration: underline; }
.pc-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; margin: 1.75rem 0 0; }
.pc-more-alt { font-size: 0.92rem; color: var(--navy); text-decoration: underline; text-decoration-color: rgba(43, 94, 167, 0.35); text-underline-offset: 3px; }
.pc-more-alt:hover { text-decoration-color: currentColor; }
.pc-more .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.8rem 1.6rem; background: linear-gradient(135deg, #2B5EA7 0%, #1A3660 100%); box-shadow: var(--shadow-md); }
.pc-more .btn:hover { background: linear-gradient(135deg, #1A3660 0%, #121F3A 100%); box-shadow: var(--shadow-lg); }
.pc-more .btn .mi { font-size: 1.2rem; transition: transform 0.15s; }
.pc-more .btn:hover .mi { transform: translateX(3px); }

@media screen and (max-width: 64rem) {
  /* The block is 100vw wide here (like the other wide blocks); keep the site gutters for the text and card. */
  .platform-comparison,
  .comparison-deep-dives { padding-left: var(--padding); padding-right: var(--padding); }
}
@media (max-width: 40rem) {
  .platform-comparison,
  .comparison-deep-dives { margin: 2.5rem 0 2rem; }
  .pc-table { font-size: 0.8rem; min-width: 42rem; }
  .pc-table thead th { padding: 0.75rem 0.7rem 0.65rem; }
  .pc-table thead th.pc-col-label { width: 9.5rem; }
  .pc-table tbody th, .pc-table tbody td { padding: 0.55rem 0.7rem; }
  .pc-th-name { font-size: 0.92rem; }
  .pc-asof-break { display: none; }
  .pc-sources ol { columns: 1; }
  .pc-deep-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Pricing landing page (2026-09)
   Hero accent, width lanes, interactive calculator, guarantee cards,
   support/onboarding pair, FAQ accordion, pricing-menu index.
   Everything else on the page reuses the block styles above.
   ============================================================================ */

.pricing-hero .hero-headline em { font-style: normal; color: #C75B2A; }

/* Width lanes inside the pricing article (which is the 48rem .feature-detail) */
.pricing-detail > .pricing-calc,
.pricing-detail > .pricing-guarantees,
.pricing-detail > .support-onboarding,
.pricing-detail > .sales-index {
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.pricing-detail > .stat-rule {
  width: 100vw;
  max-width: 72rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.pricing-detail > h2 {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 3.5rem 0 0;
}
.pricing-detail > h2 span { color: var(--text-light); font-weight: 500; }
.pricing-detail > h2 + .twin-quotes { margin-top: 1.75rem; }
.state-detail > h2 + .twin-quotes { margin-top: 1.75rem; }
.pricing-detail > .feature-index { margin-top: 3.5rem; }
.pricing-detail > .security-strip { margin-top: 3rem; }
.pricing-detail > .platform-comparison { margin-top: 3.5rem; }
.pricing-detail .pricing-more-link { text-align: center; margin: 1.25rem 0 0; font-size: 0.95rem; }
.pricing-detail .pricing-more-link a { color: var(--navy); font-weight: 600; }
.pricing-detail .pricing-more-link a:hover { text-decoration: underline; }
.pricing-hero + .pricing-detail { margin-top: 0; }

/* --- Calculator --- */
.pricing-calc { margin: 0 auto; padding: 0 1.5rem; }
.pricing-calc [hidden] { display: none !important; }
.pricing-calc .nhs-section-title { margin-bottom: 0.75rem; }
.pricing-calc-intro {
  text-align: center; color: var(--text-light);
  max-width: 40rem; margin: 0 auto 2rem;
  font-size: 1.05rem; line-height: 1.6;
}
.pricing-calc-intro p { margin: 0; }
.pricing-calc-panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem;
  background: #F3EDE5; border: 1px solid #D5CBBD; border-radius: var(--radius-lg);
  padding: 2.5rem;
}
.pricing-calc-label {
  display: block; font-size: 0.82rem; font-weight: 700; color: var(--navy-dark);
  margin-bottom: 0.6rem; letter-spacing: 0.02em;
}
.pricing-calc-count-row { display: grid; grid-template-columns: 1fr 6.5rem; gap: 1rem; align-items: center; }
.pricing-calc-range { width: 100%; height: 2rem; accent-color: var(--navy); cursor: pointer; margin: 0; }
.pricing-calc-count {
  width: 100%; padding: 0.6rem 0.5rem;
  border: 1px solid #D5CBBD; border-radius: var(--radius); background: #fff;
  font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; color: var(--navy-dark); text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pricing-calc-count:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(43, 94, 167, 0.15); }
.pricing-calc-scale {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: var(--text-lighter);
  margin-top: 0.1rem; padding-right: 7.5rem;
}
.pricing-calc-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 1.5rem; }
.pricing-calc-chip {
  display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px;
  border: 1px solid #D5CBBD; background: #fff; color: var(--navy-dark);
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pricing-calc-chip:hover { background: #EDF2F9; border-color: var(--navy); text-decoration: none; }
.pricing-calc-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pricing-calc-chip--link { border-style: dashed; color: var(--terra); }
.pricing-calc-chip--link:hover { border-color: var(--terra); background: #FAF0ED; }
.pricing-calc-billing { max-width: 22rem; }
.pricing-calc-billing .signup-billing-toggle { background: #fff; border-color: #D5CBBD; }
.pricing-calc-controls { display: flex; flex-direction: column; }
.pricing-calc-notes { margin-top: auto; padding-top: 1.5rem; }
.pricing-calc-how { font-size: 0.85rem; color: var(--text-light); line-height: 1.55; margin: 0; }
.pricing-calc-how strong { color: var(--navy-dark); }
.pricing-calc-note { margin-top: 0.6rem; }
.pricing-calc-note a { color: var(--navy); font-weight: 600; }

.pricing-calc-result {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #E8E0D4; border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(26, 23, 20, 0.08);
  padding: 2rem;
}
.pricing-calc-eyebrow {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: #D64933; border-left: 3px solid #D64933; padding-left: 0.75rem; margin-bottom: 0.85rem; line-height: 1.3;
}
.pricing-calc-total { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.pricing-calc-amount {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  color: var(--navy-dark);
}
.pricing-calc-period { font-size: 1rem; font-weight: 600; color: var(--text-light); }
.pricing-calc-breakdown { font-size: 0.9rem; color: var(--text); line-height: 1.5; margin: 0.85rem 0 0; }
.pricing-calc-perstudent { font-size: 0.85rem; color: var(--text-light); line-height: 1.5; margin: 0.35rem 0 0; }
.pricing-calc-large {
  margin-top: 1rem; padding: 0.85rem 1rem;
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border: 1px solid rgba(43, 94, 167, 0.15); border-radius: var(--radius);
  font-size: 0.9rem; line-height: 1.5; color: var(--text);
}
.pricing-calc-large p { margin: 0; }
.pricing-calc-large a { color: var(--navy); font-weight: 600; }
.pricing-calc-included { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #E8E0D4; }
.pricing-calc-included .sf-benefits-header { margin: 0 0 0.5rem; }
.pricing-calc-included .pricing-features { margin: 0; }
.pricing-calc-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.pricing-calc-actions .nhs-btn { flex: 1 1 auto; text-align: center; white-space: nowrap; }
.pricing-calc-demo:not(.nhs-btn-cta) { background: #fff; border-color: var(--navy); color: var(--navy); }
.pricing-calc-demo:not(.nhs-btn-cta):hover { background: #EDF2F9; color: var(--navy); }
.pricing-calc-fineprint { font-size: 0.78rem; color: var(--text-lighter); text-align: center; margin: 0.75rem 0 0; }
.pricing-calc-compare { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed #D5CBBD; font-size: 0.82rem; color: var(--text-light); line-height: 1.5; }
.pricing-calc-compare p { margin: 0; }
.pricing-calc-compare a { color: var(--navy); font-weight: 600; }
@media (max-width: 60rem) {
  .pricing-calc-panel { grid-template-columns: 1fr; padding: 1.75rem 1.5rem; }
  .pricing-calc-billing { max-width: none; }
}
@media (max-width: 48rem) {
  .pricing-calc { padding: 0; }
  .pricing-calc .nhs-section-title, .pricing-calc-intro { padding-left: 1.5rem; padding-right: 1.5rem; }
  .pricing-calc-panel { border-radius: 0; border-left: none; border-right: none; padding: 1.5rem 1.25rem; }
  .pricing-calc-result { padding: 1.5rem 1.25rem; }
  .pricing-calc-amount { font-size: 2.75rem; }
  .pricing-calc-count-row { grid-template-columns: 1fr 5.5rem; }
  .pricing-calc-scale { padding-right: 6.5rem; }
}

/* --- Guarantee cards --- */
.pricing-guarantees { margin: 3.5rem auto 0; padding: 0 1.5rem; }
.pricing-guarantees-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.pricing-guarantees-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-guarantee {
  background: #fff; border: 2px solid #E8E0D4; border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pricing-guarantee:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(26, 23, 20, 0.1); }
.pricing-guarantee-icon { display: block; font-size: 30px; color: #D64933; margin-bottom: 0.75rem; }
.pricing-guarantee-title { font-size: 1.02rem; font-weight: 700; color: var(--navy-dark); line-height: 1.3; margin: 0 0 0.5rem; }
.pricing-guarantee-text { font-size: 0.88rem; color: var(--text-light); line-height: 1.55; }
.pricing-guarantee-text p { margin: 0; }
@media (max-width: 60rem) { .pricing-guarantees-grid:not(.pricing-guarantees-grid--3) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 48rem) { .pricing-guarantees-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .pricing-guarantees-grid:not(.pricing-guarantees-grid--3) { grid-template-columns: 1fr; } }

/* --- Support & onboarding pair --- */
.support-onboarding { margin: 3.5rem auto 0; padding: 0 1.5rem; }
.support-onboarding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
.support-onboarding-card { display: flex; flex-direction: column; margin: 0; }
.support-onboarding-card .capterra-inline { align-self: flex-start; }
.support-onboarding-card--steps p { font-size: 0.95rem; color: var(--text-light); line-height: 1.6; margin-bottom: 1rem; }
.support-onboarding-link { display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 1.25rem; font-size: 0.92rem; font-weight: 600; color: var(--navy); }
.support-onboarding-link:hover { text-decoration: underline; }
.so-steps { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; }
.so-step {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: #fff; border: 1px solid #D5DDD3; border-radius: var(--radius);
  padding: 0.8rem 0.95rem;
}
.so-step-number {
  flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff; font-weight: 800; font-size: 0.85rem;
}
.so-step-body { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; line-height: 1.45; }
.so-step-body strong { display: flex; align-items: center; gap: 0.35rem; color: var(--navy-dark); }
.so-step-icon { font-size: 18px; color: #D64933; }
.so-step-body > span { color: var(--text-light); font-size: 0.85rem; }
@media (max-width: 60rem) { .support-onboarding-grid { grid-template-columns: 1fr; } }

/* --- FAQ --- */
.faq { margin: 3.5rem 0 0; }
.faq .nhs-section-title { margin-bottom: 0.75rem; }
.faq-intro { text-align: center; color: var(--text-light); max-width: 36rem; margin: 0 auto 2rem; font-size: 1rem; line-height: 1.6; }
.faq-intro p { margin: 0; }
.faq-list { border-top: 1px solid #E8E0D4; }
.faq-item { border-bottom: 1px solid #E8E0D4; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0.25rem; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.05rem; color: var(--navy-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--navy); }
.faq-toggle { flex-shrink: 0; font-size: 22px; color: var(--terra); transition: transform 0.2s ease; }
.faq-item[open] .faq-toggle { transform: rotate(180deg); }
.faq-answer { padding: 0 0.25rem 1.25rem; max-width: 44rem; font-size: 1rem; line-height: 1.65; color: var(--text); }
.faq-answer p { margin: 0 0 0.75rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* --- Pricing menu index --- */
.sales-index { margin: 3.5rem auto 0; padding: 0 1.5rem; }
.sales-index .section-label { margin-bottom: 1.25rem; }
.sales-index-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.sales-index-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: #fff; border: 1px solid #E8E0D4; border-radius: var(--radius-lg);
  padding: 1.25rem; color: inherit; text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s;
}
.sales-index-card:hover { text-decoration: none; background: #FAF6F0; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(26, 23, 20, 0.1); }
.sales-index-icon { font-size: 26px; color: #D64933; }
.sales-index-title { display: block; font-size: 0.98rem; font-weight: 700; color: var(--navy-dark); }
.sales-index-blurb { display: block; font-size: 0.82rem; color: var(--text-light); line-height: 1.45; }
.sales-index-arrow { margin-top: auto; padding-top: 0.5rem; color: var(--terra); transition: transform 0.2s ease; }
.sales-index-card:hover .sales-index-arrow { transform: translateX(4px); }
@media (max-width: 64rem) { .sales-index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .sales-index-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  /* Single column: the card spans the screen, so lay it out as a row —
     icon beside the title, blurb under the title, arrow centered on the right. */
  .sales-index-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.85rem; row-gap: 0.2rem;
    padding: 1rem 1.15rem;
  }
  .sales-index-copy { display: contents; }
  .sales-index-icon { grid-column: 1; grid-row: 1; }
  .sales-index-title { grid-column: 2; grid-row: 1; }
  .sales-index-blurb { grid-column: 2; grid-row: 2; }
  .sales-index-arrow { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 0; padding-top: 0; padding-left: 0.5rem; }
}

/* ============================================================================
   Sales pages under /sales (template sales-page, article .doc-detail)
   sales-page.php wraps every block in .block.block-type-<type>, so the lanes
   and the text/heading rhythm below use descendant selectors.
   ============================================================================ */
.doc-detail .block-type-heading h2 { font-size: 1.5rem; font-weight: 700; color: var(--color-black); line-height: 1.25; margin: 2.5rem 0 1rem; }
.doc-detail .block-type-heading h2 span { color: var(--text-light); font-weight: 500; }
.doc-detail .block-type-heading:first-child h2 { margin-top: 0; }
.doc-detail .block-type-text { line-height: 1.7; }
.doc-detail .block-type-text > p,
.doc-detail .block-type-text > ul,
.doc-detail .block-type-text > ol { margin-bottom: 1.25rem; }
.doc-detail .block-type-text > :last-child { margin-bottom: 0; }
.doc-detail .block-type-text > ul,
.doc-detail .block-type-text > ol { margin-left: 1.5rem; }
.doc-detail .block-type-text > ul > li { list-style: disc; margin-bottom: 0.6rem; }
.doc-detail .block-type-text > ol > li { list-style: decimal; margin-bottom: 0.6rem; }
.doc-detail .block-type-text > ul > li:last-child,
.doc-detail .block-type-text > ol > li:last-child { margin-bottom: 0; }
.doc-detail .block-type-text > p a,
.doc-detail .block-type-text > ul a,
.doc-detail .block-type-text > ol a { text-decoration: underline; text-underline-offset: 2px; }
.doc-detail .block-type-text .support-features-grid { margin-bottom: 1.25rem; }
.doc-detail .twin-quotes,
.doc-detail .security-strip,
.doc-detail .pricing-guarantees,
.doc-detail .onboarding-timeline,
.doc-detail .role-resources {
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.doc-detail .security-strip { margin-top: 2.5rem; }

/* --- Onboarding timeline (Onboarding Process page) --- */
.onboarding-timeline { margin: 3rem auto 0; padding: 0 1.5rem; }
.onboarding-timeline .nhs-section-title { margin-bottom: 0.75rem; }
.ob-intro { text-align: center; color: var(--text-light); max-width: 40rem; margin: 0 auto 2.25rem; font-size: 1rem; line-height: 1.6; }
.ob-intro p { margin: 0; }
.onboarding-timeline .nhs-section-title + .ob-stops { margin-top: 2.25rem; }
.ob-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.ob-stop { position: relative; margin: 0; padding-top: 3.5rem; }
.ob-stop::before { content: ''; position: absolute; top: calc(1.25rem - 1px); left: 2.5rem; right: -1.25rem; height: 2px; background: #E8E0D4; }
.ob-stop:last-child::before { display: none; }
.ob-marker {
  position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff; box-shadow: 0 0 0 4px #fff;
}
.ob-marker .mi { font-size: 22px; }
.ob-stop--highlight .ob-marker { background: linear-gradient(135deg, #D64933 0%, #C75B2A 100%); }
.ob-when { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.3rem; }
.ob-stop--highlight .ob-when { color: #D64933; }
.ob-title { display: block; font-size: 1.02rem; font-weight: 700; color: var(--navy-dark); line-height: 1.3; margin-bottom: 0.4rem; }
.ob-text { font-size: 0.9rem; line-height: 1.55; color: var(--text-light); }
.ob-text p { margin: 0; }
.ob-text a { color: var(--navy); font-weight: 600; }
.ob-note { text-align: center; font-size: 0.85rem; color: #6B7280; max-width: 42rem; margin: 1.75rem auto 0; line-height: 1.5; }
.ob-note p { margin: 0; }
@media (max-width: 60rem) {
  .ob-stops { grid-template-columns: 1fr; gap: 1.75rem; }
  .ob-stop { padding: 0 0 0 3.5rem; min-height: 2.5rem; }
  .ob-stop::before { top: 2.5rem; bottom: -1.75rem; left: calc(1.25rem - 1px); right: auto; width: 2px; height: auto; }
  .ob-when { margin-top: 0.15rem; }
}

/* --- Role resources (Onboarding Process page) --- */
.role-resources { margin: 3.5rem auto 0; padding: 0 1.5rem; }
.role-resources .nhs-section-title { margin-bottom: 0.75rem; }
.rr-intro { text-align: center; color: var(--text-light); max-width: 40rem; margin: 0 auto 2rem; font-size: 1rem; line-height: 1.6; }
.rr-intro p { margin: 0; }
.role-resources .nhs-section-title + .role-resources-grid { margin-top: 2rem; }
.role-resources-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.role-card {
  background: #fff; border: 2px solid #E8E0D4; border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.role-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(26, 23, 20, 0.1); }
.role-card-icon { display: block; font-size: 30px; color: #D64933; margin-bottom: 0.75rem; }
.role-card-title { font-size: 1.05rem; font-weight: 700; color: var(--navy-dark); line-height: 1.3; margin: 0 0 0.25rem; }
.role-card-audience { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.65rem; line-height: 1.4; }
.role-card-text { font-size: 0.88rem; color: var(--text-light); line-height: 1.55; flex: 1; }
.role-card-text p { margin: 0; }
.role-card-text a { color: var(--navy); font-weight: 600; }
.role-card-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.rr-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.8rem; font-weight: 600; line-height: 1.2;
  padding: 0.32rem 0.7rem 0.32rem 0.5rem; border-radius: 999px;
  background: #E8EEF7; color: var(--navy); text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.rr-pill:hover { background: #D6E2F3; text-decoration: none; }
.rr-pill .mi { font-size: 18px; }
.rr-pill-meta { font-weight: 500; color: var(--text-light); margin-left: 0.1rem; }
.rr-pill--pdf { background: #FAF0ED; color: #A83A24; }
.rr-pill--pdf:hover { background: #F4E0D9; }
.rr-pill--link { background: #F3EDE5; color: var(--navy-dark); }
.rr-pill--link:hover { background: #EAE1D5; }
.rr-extras {
  margin-top: 1.5rem; padding: 1.1rem 1.4rem 1.2rem;
  background: #F3EDE5; border: 1px solid #D5CBBD; border-radius: var(--radius-lg);
}
.rr-extras-heading { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-dark); margin-bottom: 0.7rem; }
.rr-extras-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rr-extras .rr-pill { background: #fff; border: 1px solid #D5CBBD; }
.rr-extras .rr-pill:hover { background: #FAF6F0; }
.rr-note { text-align: center; font-size: 0.95rem; color: var(--text-light); max-width: 42rem; margin: 1.5rem auto 0; line-height: 1.55; }
.rr-note p { margin: 0; }
.rr-note a { color: var(--navy); font-weight: 600; }
@media (max-width: 60rem) { .role-resources-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .role-resources-grid { grid-template-columns: 1fr; } .rr-extras { padding: 1rem 1.1rem; } }

/* ===== Reading Challenges audience page (who-we-help/reading-challenges) ===== */
/* The page opens with a heading over the intro paragraph (the global rule zeroes a first h2's
   top margin); give it the same room below the hero that a first paragraph gets plus a heading's rhythm. */
.feature-detail > h2:first-child:has(+ p) {
  margin-top: 2.5rem;
}
/* Home blocks reused on audience pages get the same width lanes as on the home article */
.feature-detail > .how-it-works {
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.feature-detail > .stat-rule {
  width: 100vw;
  max-width: 72rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.reading-photo-caption { font-size: 0.85rem; font-style: italic; color: var(--text-light); margin-top: 1rem; }
.reading-fine-print { font-size: 0.8rem; line-height: 1.5; color: var(--text-light); margin: 2.5rem 0 0; }

/* Tournament rounds strip (a text block with .rounds-strip markup) */
.rounds-strip {
  margin: 2rem 0 2.5rem;
  padding: 1.6rem 1.75rem 1.5rem;
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border: 1px solid rgba(43, 94, 167, 0.15);
  border-radius: var(--radius-lg);
}
.rounds-strip-head {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #D64933; margin-bottom: 1rem;
}
.rounds-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem 0; }
/* The strip sits in a text block, so it is a direct child of .feature-detail and can take the 64rem lane */
.feature-detail > .rounds-strip {
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.rounds-list li { position: relative; display: flex; flex-direction: column; align-items: center; padding-right: 1.9rem; min-width: 0; }
.rounds-list li::after {
  content: ''; position: absolute; right: 0.7rem; top: 0.8rem;
  width: 0.5rem; height: 0.5rem; border-top: 2px solid #B8A896; border-right: 2px solid #B8A896;
  transform: rotate(45deg);
}
.rounds-list li:last-child { padding-right: 0; }
.rounds-list li:last-child::after { display: none; }
.rounds-chip {
  display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px;
  background: #fff; border: 1px solid #D5CBBD; color: var(--navy);
  font-weight: 700; font-size: 0.9rem; white-space: nowrap;
}
.rounds-list li.is-champion .rounds-chip {
  background: linear-gradient(135deg, #2B5EA7 0%, #1A3660 100%); color: #fff; border-color: transparent;
}
.rounds-meta { margin-top: 0.3rem; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-light); white-space: nowrap; }
.rounds-note { margin: 1.1rem 0 0; font-size: 0.95rem; line-height: 1.55; color: #374151; }
@media (max-width: 40rem) {
  .rounds-list { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
  .rounds-list li { flex-direction: row; align-items: center; gap: 0.6rem; padding-right: 0; }
  .rounds-list li::after { display: none; }
  .rounds-meta { margin-top: 0; }
}

/* Host city ledger (a text block with .program-ledger markup) */
.program-ledger { list-style: none; margin: 1.25rem 0 2.5rem; padding: 0; border-top: 1px solid #E8E0D4; }
.program-ledger li {
  display: grid; grid-template-columns: 11.5rem 1fr; column-gap: 1.25rem; row-gap: 0.2rem;
  align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid #E8E0D4;
}
.program-ledger-city { font-weight: 700; color: var(--navy); }
.program-ledger-name { font-weight: 600; color: #111827; }
.program-ledger-meta { grid-column: 2; font-size: 0.9rem; color: var(--text-light); }
@media (max-width: 40rem) {
  .program-ledger li { grid-template-columns: 1fr; }
  .program-ledger-meta { grid-column: 1; }
}

/* Read to the Final Four logo floated beside the section intro (a text block wrapped in .rttff-intro
   so the float is contained and cannot spill into the rounds strip below). */
.rttff-intro {
  display: flow-root;
}
.rttff-intro p {
  margin-bottom: 1.25rem;
}
.rttff-intro p:last-child {
  margin-bottom: 0;
}
.rttff-intro .rttff-logo {
  float: right;
  width: 200px;
  height: auto;
  margin: 0.25rem 0 1rem 2rem;
  filter: drop-shadow(0 6px 16px rgba(26, 23, 20, 0.14));
}
@media screen and (max-width: 40rem) {
  .rttff-intro .rttff-logo {
    float: none;
    display: block;
    width: 160px;
    margin: 0 auto 1.25rem;
  }
}

/* ============================================================================
   Overview pages: /who-we-help, /features, /technical-docs (article .overview-detail)
   The nav parents are toggles, so these pages are reached from the "… Overview" dropdown entry,
   the footer, or by typing the URL. Each one synthesizes its children with a showcase block.
   ============================================================================ */
.overview-hero .hero-headline em { font-style: normal; color: #C75B2A; }
.overview-hero + .overview-detail { margin-top: 0; }
.overview-detail > .overview-intro {
  max-width: 44rem; margin: 0 auto 0.5rem; text-align: center;
  font-size: 1.1rem; line-height: 1.6; color: #4b5563;
}
/* Width lanes inside the 48rem article (the stat-rule, security-strip, twin-quotes and cta-banner lanes
   already come from .feature-detail) */
.overview-detail > .audience-showcase,
.overview-detail > .feature-showcase,
.overview-detail > .docs-showcase {
  width: 100vw;
  max-width: 64rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.overview-detail > .home-states {
  width: 100vw;
  max-width: 72rem;
  margin-left: 50%;
  transform: translateX(-50%);
}
.overview-detail > .stat-rule { margin-top: 0.5rem; }
.overview-detail > .security-strip { margin-top: 3.5rem; }
.overview-detail > .featured-quote-wrap,
.overview-detail > .featured-quote-block { margin-top: 3rem; }
.overview-detail > .document-request-block { margin-top: 1rem; }
.overview-detail > .document-request-block .download-section { margin-top: 2.5rem; }
:is(.audience-showcase, .feature-showcase, .docs-showcase) .section-label { margin-bottom: 1.25rem; }
:is(.audience-showcase-intro, .feature-showcase-intro, .docs-showcase-intro) {
  max-width: 46rem; margin: 0 0 1.75rem; font-size: 1.05rem; line-height: 1.6; color: #4b5563;
}

/* --- Audience showcase: one case-study card per Who We Help page --- */
.audience-showcase { margin: 3.5rem auto 0; padding: 0 1.5rem; }
.audience-showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.asc-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
  background: #fff; border: 1px solid #E8E0D4; border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.35rem;
  color: inherit; text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s;
}
.asc-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #D64933 0%, #C75B2A 100%);
  opacity: 0; transition: opacity 0.2s ease;
}
.asc-card:hover { text-decoration: none; background: #FAF6F0; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(26, 23, 20, 0.1); }
.asc-card:hover::before { opacity: 1; }
.asc-head { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.asc-icon { font-size: 30px; color: #D64933; margin-top: 0.1rem; }
.asc-title { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: #1A3660; }
.asc-hook { margin: 0.25rem 0 0; font-size: 0.95rem; line-height: 1.45; color: #4b5563; }
.asc-quote {
  margin: 0; padding: 1rem 1.1rem;
  background: linear-gradient(135deg, #E8EEF7 0%, #FAF6F0 100%);
  border: 1px solid rgba(43, 94, 167, 0.15); border-radius: var(--radius);
}
.asc-quote blockquote { margin: 0; font-style: italic; font-size: 0.95rem; line-height: 1.55; color: var(--text); }
.asc-quote--story blockquote { font-style: normal; }
.asc-quote blockquote p { margin: 0; }
.asc-quote figcaption { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.8rem; font-size: 0.8rem; line-height: 1.35; color: var(--text-light); }
.asc-logo { flex-shrink: 0; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; }
.asc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.asc-logo--photo { border-radius: 50%; overflow: hidden; }
.asc-logo--photo img { width: 100%; height: 100%; object-fit: cover; }
.asc-attr { min-width: 0; }
.asc-attr strong { display: block; font-size: 0.85rem; font-weight: 700; color: #1A3660; }
.asc-school { display: block; }
/* These list selectors carry .feature-detail so they outrank the article's "highlighted passage" ul rule
   (dashed rows, 1.4rem padding), which would otherwise stack the stats, points, and chips. */
.feature-detail .audience-showcase ul.asc-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.feature-detail .audience-showcase ul.asc-stats > li { display: flex; flex-direction: column; border: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.asc-stats b {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.35rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: #1A3660;
}
.asc-stats span { margin-top: 0.15rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; }
.asc-more { margin-top: auto; padding-top: 0.25rem; font-size: 0.92rem; font-weight: 700; color: #C75B2A; }
.asc-arrow { display: inline-block; transition: transform 0.2s ease; }
.asc-card:hover .asc-arrow { transform: translateX(4px); }
@media (max-width: 48rem) {
  .audience-showcase { padding: 0 1.25rem; }
  .audience-showcase-grid { grid-template-columns: 1fr; }
}

/* --- Feature showcase: one card per Features page with a cropped device peek --- */
.feature-showcase { margin: 3.5rem auto 0; padding: 0 1.5rem; }
.feature-showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.fsc-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #E8E0D4; border-radius: var(--radius-lg);
  color: inherit; text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fsc-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(26, 23, 20, 0.1); }
.fsc-media {
  position: relative; height: 230px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 120%, rgba(43, 94, 167, 0.14) 0%, transparent 55%),
    #F3EDE5;
  border-bottom: 1px solid #D5CBBD;
}
/* Fade the crop line so the cut-off device reads as deliberate */
.fsc-media--phone::after,
.fsc-media--admin::after,
.fsc-media--document::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5rem;
  background: linear-gradient(to bottom, rgba(243, 237, 229, 0) 0%, rgba(243, 237, 229, 0.85) 100%);
  pointer-events: none;
}
.fsc-media--phone .device-mockup-inner {
  position: absolute; left: 50%; top: 26px; width: 200px; transform: translateX(-50%);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
}
.fsc-media--phone .device-mockup-screenshot { top: 10px; left: 10px; width: 180px; border-radius: 22px; }
.fsc-media--admin .admin-screenshot { position: absolute; left: 6%; right: 6%; top: 24px; }
.fsc-media--admin .admin-screenshot-titlebar { padding: 0.4rem 0.6rem; }
.fsc-media--document .document-screenshot { position: absolute; left: 20%; right: 20%; top: 24px; }
.fsc-media--document .document-screenshot-titlebar { padding: 0.4rem 0.6rem; }
/* focus: bottom anchors the framed screenshot to the bottom edge so the window shows the lower half, with the fade on top */
.fsc-media--bottom .device-mockup-inner,
.fsc-media--bottom .admin-screenshot,
.fsc-media--bottom .document-screenshot { top: auto; bottom: 26px; }
.fsc-media--bottom::after {
  top: 0; bottom: auto;
  background: linear-gradient(to top, rgba(243, 237, 229, 0) 0%, rgba(243, 237, 229, 0.85) 100%);
}
.fsc-media--none img { position: absolute; inset: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); object-fit: contain; }
.fsc-media--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fsc-media--photo-top img { object-position: center top; }
.fsc-media--photo-bottom img { object-position: center bottom; }
.fsc-media--icon { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2B5EA7 0%, #1A3660 60%, #121F3A 100%); border-bottom-color: #121F3A; }
.fsc-media--icon .mi { font-size: 88px; color: rgba(255, 255, 255, 0.92); }
.fsc-body { display: flex; flex-direction: column; gap: 0.8rem; flex: 1; padding: 1.35rem 1.5rem; }
.fsc-head { display: flex; align-items: center; gap: 0.65rem; }
.fsc-icon { font-size: 26px; color: #D64933; }
.fsc-title { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: #1A3660; }
.fsc-summary { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #4b5563; }
.feature-detail .feature-showcase ul.fsc-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.feature-detail .feature-showcase ul.fsc-points > li { position: relative; border: 0; padding: 0 0 0 1.4rem; font-size: 0.9rem; line-height: 1.45; color: var(--text); }
.fsc-points li::before {
  content: 'check'; font-family: 'Material Symbols Outlined'; font-feature-settings: 'liga';
  position: absolute; left: 0; top: 0.1rem; font-size: 17px; line-height: 1; color: #D64933;
}
.fsc-quote { margin: 0; padding-top: 0.85rem; border-top: 1px solid #E8E0D4; font-style: italic; font-size: 0.88rem; line-height: 1.5; color: var(--text-light); }
.fsc-quote p { margin: 0; }
.fsc-quote cite { display: block; margin-top: 0.35rem; font-style: normal; font-size: 0.78rem; font-weight: 600; color: #1A3660; }
.fsc-more { margin-top: auto; padding-top: 0.5rem; font-size: 0.92rem; font-weight: 700; color: #C75B2A; }
.fsc-arrow { display: inline-block; transition: transform 0.2s ease; }
.fsc-card:hover .fsc-arrow { transform: translateX(4px); }
@media (max-width: 48rem) {
  .feature-showcase { padding: 0 1.25rem; }
  .feature-showcase-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .fsc-media { height: 200px; }
}

/* --- Technical docs showcase: one card per documentation page --- */
.docs-showcase { margin: 3.5rem auto 0; padding: 0 1.5rem; }
.docs-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.dsc-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.9rem;
  background: #fff; border: 1px solid #E8E0D4; border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dsc-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(26, 23, 20, 0.1); }
.dsc-head { display: flex; align-items: center; gap: 0.65rem; }
.dsc-icon { font-size: 28px; color: #D64933; }
.dsc-title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.dsc-title a { color: #1A3660; text-decoration: none; }
/* The title link stretches over the whole card; the footer links sit above it */
.dsc-title a::after { content: ''; position: absolute; inset: 0; }
.dsc-card:hover .dsc-title a { color: #C75B2A; }
.dsc-tagline { margin: 0; font-size: 0.93rem; line-height: 1.5; color: #4b5563; }
.feature-detail .docs-showcase ul.dsc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
.feature-detail .docs-showcase ul.dsc-chips > li {
  display: inline-flex; align-items: center; gap: 0.35rem; border: 0;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  background: #EDF2F9; color: #1A3660; font-size: 0.74rem; font-weight: 600; line-height: 1;
}
.dsc-chip img { height: 14px; width: auto; max-width: 64px; }
.dsc-chip .mi { font-size: 15px; color: #2B5EA7; }
.dsc-quote { margin: 0; padding-top: 0.85rem; border-top: 1px solid #E8E0D4; font-style: italic; font-size: 0.88rem; line-height: 1.5; color: var(--text-light); }
.dsc-quote p { margin: 0; }
.dsc-quote cite { display: block; margin-top: 0.35rem; font-style: normal; font-size: 0.78rem; font-weight: 600; color: #1A3660; }
.dsc-quote-school { display: block; font-weight: 500; color: var(--text-light); }
.dsc-links { position: relative; z-index: 1; margin-top: auto; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.9rem; font-weight: 700; }
.dsc-links a { text-decoration: none; }
.dsc-links .dsc-read { color: #C75B2A; }
.dsc-links .dsc-doc { display: inline-flex; align-items: center; gap: 0.25rem; color: #2B5EA7; }
.dsc-links .dsc-doc .mi { font-size: 17px; }
.dsc-links a:hover { text-decoration: underline; }
@media (max-width: 60rem) {
  .docs-showcase { padding: 0 1.25rem; }
  .docs-showcase-grid { grid-template-columns: 1fr; }
}