/* Home page, Oct 2026 rebuild (PLAN.md 3.0.2 and 4.1). Loaded only by src/pages/index.njk.
   Every selector is prefixed .home- (or html.home-). Colours are brand tokens from styles.css or the site's existing
   dark navy (the .final-cta gradient); fonts are the site's own, DM Serif Display and DM Sans.

   High-fidelity system (Phase H, criteria HF-01 to HF-08):
   - Type scale: 13 / 15 / 17 / 19 / 21px body steps; h3 22px; h2 clamp(30px, 3.4vw, 44px);
     h1 clamp(38px, 4.6vw, 58px); price 52px; display numerals 32px.
   - Spacing on a 4px grid; sections 96px top and bottom on desktop, 64px on phones; 20px phone gutters.
   - Radii 12 / 16 / 20 / 24px; one card shadow.

   Contrast rule for brand red (PLAN.md R7): white text on #EA493A is 3.81:1, so it is only used as WCAG large text
   (DM Sans 700 at 19px, above the 18.66px bold threshold), where 3:1 applies. Hover and active use
   --accent_pressed (8.62:1). Red is never body text on a light background. */

.home-masthead,
.home-trust,
.home-inside,
.home-proof,
.home-founders,
.home-pricing,
.home-faq,
.home-media,
.home-close,
.home-sticky {
  --home-fs-xs: 13px;
  --home-fs-sm: 15px;
  --home-fs-base: 17px;
  --home-fs-md: 19px;
  --home-fs-lg: 21px;
  --home-fs-h3: 22px;
  --home-fs-h2: clamp(30px, 3.4vw, 44px);
  --home-section-y: 96px;
  --home-gutter: 48px;
  --home-radius-sm: 12px;
  --home-radius: 16px;
  --home-radius-lg: 20px;
  --home-radius-xl: 24px;
  --home-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(40, 53, 132, 0.06);
  --home-navy: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --home-on-dark: #ffffff;
  --home-on-dark-muted: var(--brand_blue-20);
  --home-hairline: var(--gray-200);
}

@media (max-width: 767px) {
  .home-masthead,
  .home-trust,
  .home-inside,
  .home-proof,
  .home-founders,
  .home-pricing,
  .home-faq,
  .home-media,
  .home-close {
    --home-section-y: 64px;
    --home-gutter: 20px;
  }
}

.home-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;
}

/* ---------- Shared pieces ---------- */

.home-h2 {
  margin: 0 0 40px;
  max-width: 22em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--home-fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--brand_blue-100);
  text-wrap: balance;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--home-radius-sm);
  font-family: var(--font-body);
  font-size: var(--home-fs-md);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.home-btn:focus-visible {
  outline: 3px solid var(--brand_blue-100);
  outline-offset: 3px;
}

/* Primary action: brand red. */
.home-btn--red {
  background: var(--brand_red-100);
  color: var(--white);
}

.home-btn--red:hover,
.home-btn--red:active {
  background: var(--accent_pressed);
}

/* Secondary action on dark: outline. */
.home-btn--outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.72);
}

.home-btn--outline-light:hover,
.home-btn--outline-light:active {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
}

.home-btn--outline-dark {
  background: var(--white);
  color: var(--brand_blue-100);
  border-color: var(--brand_blue-100);
}

.home-btn--outline-dark:hover,
.home-btn--outline-dark:active {
  background: var(--brand_blue-10);
}

.home-masthead .home-btn:focus-visible,
.home-close .home-btn:focus-visible,
.home-masthead a:focus-visible,
.home-close a:focus-visible {
  outline-color: var(--white);
}

/* ---------- Hero ---------- */

.home-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin: 24px 24px 0;
  padding: 64px 56px;
  border-radius: var(--home-radius-xl);
  background: var(--home-navy);
  color: var(--home-on-dark);
}

/* The headline fills the copy column (Gaurav, 26 Oct): sized to the column (cqi, on .home-masthead-copy below), so
   the widest rotating word, "customer data" (6.27em in DM Serif Display with this tracking), still fits its own line
   at every width with a little to spare: 15.2cqi x 6.27 = 95% of the column. */
.home-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 15.2cqi, 96px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--home-on-dark);
  text-wrap: balance;
}

/* Headline, exactly three lines: "Secure your" / [rotating word] / "without big budgets or IT staff".
   Each part is its own block line. The third line is smaller and sized to the copy column (cqi), so it always stays on
   one line; every rotating word ("patients' data" is the longest) fits line two, so rotation never moves anything (LY-07). */
.home-masthead-copy {
  container-type: inline-size;
}

.home-h1-lead,
.home-h1-tail {
  display: block;
}

.home-h1-tail {
  margin-top: 8px;
  font-size: min(0.6em, 6.2cqi);
  line-height: 1.15;
  white-space: nowrap;
}

.home-rot {
  display: grid;
  justify-items: start;
}

.home-rot-word,
.home-rot-live {
  grid-area: 1 / 1;
}

/* Phase 3 rotation: while running, the static word stays in the DOM and the accessibility tree (opacity only) and
   the live word, drawn from data-word, shows instead. */
.home-rot-live::after {
  content: attr(data-word);
  color: var(--brand_green-60);
}

.home-h1.is-rotating .home-rot-word {
  opacity: 0;
}

.home-rot-live.is-swap {
  animation: home-word-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes home-word-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.home-rot-word {
  color: var(--brand_green-60);
}

.home-lede {
  margin: 24px 0 36px;
  max-width: 32em;
  font-size: var(--home-fs-md);
  line-height: 1.55;
  color: var(--home-on-dark-muted);
}

.home-actions {
  container-type: inline-size;
}

.home-scan-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--home-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.home-scan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.home-scan-input {
  /* The huge grow factor keeps spare width on the input while the two share a line; once the button wraps
     onto its own line it grows to the full width. */
  flex: 999 1 200px;
  min-width: 0;
  min-height: 52px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--home-radius-sm);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--home-fs-base);
  color: var(--black);
}

.home-scan-input::placeholder {
  color: var(--gray-600);
}

.home-scan-input:focus-visible {
  outline: 3px solid var(--brand_blue-100);
  outline-offset: 0;
}

.home-scan .home-btn {
  flex: 1 0 auto;
  padding: 12px 20px;
}

/* Narrow columns: the input takes the whole row so its placeholder is never clipped (HF-05); Scan drops below. */
@container (max-width: 399px) {
  .home-scan-input {
    flex-basis: 100%;
  }
}

.home-fine {
  margin: 16px 0 0;
  font-size: var(--home-fs-xs);
  line-height: 1.5;
  color: var(--home-on-dark-muted);
}

.home-fine a {
  color: var(--home-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-signup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.home-signup-note {
  margin: 0;
  font-size: var(--home-fs-xs);
  line-height: 1.5;
  color: var(--home-on-dark-muted);
}

/* Instant scan: error and the report card (PLAN.md 3.3, cut down per Gaurav 25 Oct). The card sits directly under the
   form: on phones between the form and Sign up, on wider columns across the full width under the form row. */
.home-scan-error {
  margin: 8px 0 0;
  font-size: var(--home-fs-sm);
  line-height: 1.4;
  color: var(--brand_red-60);
}

.home-report {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--home-radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--home-on-dark);
}

.home-report[hidden],
.home-report [hidden] {
  display: none;
}

.home-report-h {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--home-fs-base);
  font-weight: 700;
  line-height: 1.35;
  color: var(--home-on-dark);
}

/* Focus moves here by script after a scan (tabindex="-1", never a Tab stop), so no ring: the status region and the
   heading itself tell the reader where they are. Keyboard focus rings elsewhere are unchanged. */
.home-report-h:focus,
.home-report-h:focus-visible {
  outline: none;
}

.home-report-list {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* Severity is a filled dot (serious) or a ring (worth fixing), plus screen-reader text; no new hues. */
.home-report-item {
  position: relative;
  padding-left: 20px;
  font-size: var(--home-fs-sm);
  line-height: 1.4;
}

.home-report-item::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand_red-80);
}

.home-report-item[data-sev="medium"]::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--brand_red-80);
}

.home-report-line {
  margin: 8px 0 0;
  font-size: var(--home-fs-sm);
  line-height: 1.4;
  color: var(--home-on-dark-muted);
}

/* All clear on a phone: the heading (two lines with most names) and the button only, inside the four-line budget.
   The closing line needs three lines at any readable size there; wider screens keep it. */
@media (max-width: 767px) {
  .home-report[data-state="clear"] .home-report-line {
    display: none;
  }
}

.home-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* Scan and Sign up side by side, with a vertical divider, once the copy column is wide enough.
   .home-actions is the size container; .home-actions-grid inside it is what changes layout. */
@container (min-width: 520px) {
  .home-actions-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 168px);
    gap: 24px;
  }

  .home-scan {
    grid-column: 1;
  }

  .home-report {
    grid-column: 1 / -1;
  }

  .home-signup {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    margin-top: 0;
    padding: 28px 0 0 24px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* The castle sits straight on the hero gradient (revision 11): no box colour or shadow. The 4:3 box stays, so the
   poster and the live figure share one size and swapping them moves nothing. */
/* The stage is a square for Knight's v8 figure (revision 21), so the poster and the live square share one box and
   swapping them moves nothing. Under 1024px it runs the full width of the copy column, under the form. */
.home-stage {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 1;
}

.home-stage-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-stage-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 1024px) {
  /* Maximised figure (Gaurav, 26 Oct): two equal columns with a tighter gap and right padding, so the square gets
     the most width the headline allows (the headline is sized to the copy column, so a wider figure column would
     shrink it), and the square bleeds into the masthead's top and bottom padding to use the full hero height. */
  .home-masthead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    padding-right: 24px;
  }

  .home-stage {
    max-width: none;
    margin: -40px 0;
    align-self: center;
  }
}

@media (max-width: 767px) {
  /* The sticky nav sits 40px down, so leave room for it at rest. */
  .home-masthead {
    margin: 32px 12px 0;
    padding: 40px 20px 20px;
    border-radius: var(--home-radius-lg);
  }

  .home-lede {
    margin: 20px 0 28px;
    font-size: var(--home-fs-base);
  }

  .home-stage {
    border-radius: var(--home-radius);
  }
}

/* ---------- Trust strip: partners ---------- */

.home-trust {
  padding: 48px var(--home-gutter) 56px;
  text-align: center;
}

.home-trust-label {
  margin: 0 0 24px;
  font-family: var(--font-body);
  font-size: var(--home-fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-600);
}

/* Logos carry their own display size from the template: sized by visual area, margins trimmed (HF-04). */
.home-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-logos img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: grayscale(1);
  opacity: 0.8;
}

@media (max-width: 767px) {
  .home-trust {
    padding: 40px var(--home-gutter) 44px;
  }

  .home-logos {
    gap: 20px 28px;
  }

  /* Smaller marks on phones keep the walls to a few rows; ratios between logos stay the same. */
  .home-trust .home-logos li {
    zoom: 0.8;
  }

  .home-customers .home-logos li {
    zoom: 0.68;
  }
}

/* ---------- S1: what's inside (protections + screenshot), then the setup flow ---------- */

.home-inside {
  padding: var(--home-section-y) var(--home-gutter);
  background: var(--gray-100);
}

.home-inside-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* Five outcome-led protections: the outcome as the title (brand blue), the product named in the body. */
.home-protections {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-protection {
  padding: 20px 24px;
  border-left: 4px solid var(--brand_blue-100);
  border-radius: var(--home-radius);
  background: var(--white);
  box-shadow: var(--home-shadow);
}

.home-protection h3 {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: var(--home-fs-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand_blue-100);
}

.home-protection p {
  margin: 0;
  font-size: var(--home-fs-sm);
  line-height: 1.55;
  color: var(--gray-600);
}

/* Product screens as tabs (revision 17): one app screen at a time in a fixed 500:219 frame, so switching never
   moves anything. Screens are the previous home page's own app screens (tests/home/tools/capture-screens.mjs), staff
   the old page's own fictitious names (no "Example" label; Gaurav, 26 Oct). Without JS (.is-tabs absent) the list stands beside the first screen. */
.home-screens {
  display: grid;
  gap: 12px;
  margin: 0;
}

.home-screens-frame {
  overflow: hidden;
  border: 1px solid rgba(40, 53, 132, 0.08);
  border-radius: var(--home-radius);
  background: var(--white);
  box-shadow: var(--home-shadow);
}

/* An app-window top bar, so the screen reads as the product. Decorative. */
.home-screens-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--home-hairline);
  background: var(--background_white);
}

.home-screens-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-200);
}

.home-screens-bar b {
  margin-left: 8px;
  font-size: var(--home-fs-xs);
  font-weight: 700;
  color: var(--brand_blue-100);
}

.home-screens-stage {
  position: relative;
  aspect-ratio: 500 / 219;
}

@media (max-width: 1023px) {
  .home-screens-stage {
    aspect-ratio: 340 / 228;
  }
}

.home-screen-panel {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  transition: opacity 280ms ease;
}

.home-screen-panel.is-active {
  opacity: 1;
}

.home-screen-panel[hidden] {
  display: none;
}

.home-screen {
  margin: 0;
}

.home-screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tabs: the active card keeps the brand-blue rail and a full shadow; the others go quiet. A thin bar along the
   active card's foot fills over the 6.5s before the next screen while auto-advance runs. */
.home-inside-grid.is-tabs .home-protection {
  position: relative;
  overflow: hidden;
  border-left-color: var(--brand_blue-20);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.home-inside-grid.is-tabs .home-protection h3 {
  color: var(--gray-600);
  transition: color 200ms ease;
}

.home-inside-grid.is-tabs .home-protection:hover h3,
.home-inside-grid.is-tabs .home-protection[aria-selected="true"] h3 {
  color: var(--brand_blue-100);
}

.home-inside-grid.is-tabs .home-protection[aria-selected="true"] {
  border-left-color: var(--brand_blue-100);
  box-shadow: var(--home-shadow);
}

.home-inside-grid.is-tabs .home-protection:focus-visible {
  outline: 3px solid var(--brand_blue-100);
  outline-offset: 2px;
}

.home-tab-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  pointer-events: none;
}

.home-tab-progress::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background: var(--brand_blue-60);
}

.home-inside-grid.is-ticking .home-protection[aria-selected="true"] .home-tab-progress::after {
  animation: home-tab-progress 6.5s linear forwards;
}

.home-inside-grid[data-tabs="paused"] .home-protection[aria-selected="true"] .home-tab-progress::after {
  animation-play-state: paused;
}

@keyframes home-tab-progress {
  to {
    width: 100%;
  }
}

/* Phones and tablets: the screen frame sits above the five cards and stays in view (sticky, under the floating
   nav) while the cards scroll beneath it, so a tap on any card shows its screen without scrolling back up. */
@media (max-width: 1023px) {
  .home-inside-grid.is-tabs .home-screens {
    position: sticky;
    top: 92px;
    z-index: 1;
    order: -1;
    padding-bottom: 8px;
    background: var(--gray-100);
  }

  /* Masks the cards as they pass behind the floating nav above the frame, only once the frame is stuck (tabs.js sets
     .is-stuck). At rest the band would paint over the section heading above it (the 26 Oct phone bug). */
  .home-inside-grid.is-tabs .home-screens.is-stuck {
    box-shadow: 0 -92px 0 var(--gray-100);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-screen-panel,
  .home-inside-grid.is-tabs .home-protection,
  .home-inside-grid.is-tabs .home-protection h3 {
    transition: none;
  }

  .home-tab-progress {
    display: none;
  }
}

@media (min-width: 1024px) {
  .home-inside-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: center;
  }
}

/* Setup flow: three step cards, left to right from 768px, stacked on phones. */
.home-setup {
  margin-top: 96px;
}

.home-setup .home-h2 {
  margin-bottom: 12px;
}

.home-setup-lede {
  margin: 0 0 40px;
  font-size: var(--home-fs-md);
  line-height: 1.5;
  color: var(--black);
}

.home-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.home-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border-radius: var(--home-radius-lg);
  background: var(--white);
  box-shadow: var(--home-shadow);
}

.home-step-text {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0 0 24px;
  font-size: var(--home-fs-base);
  line-height: 1.5;
}

.home-step-n {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand_blue-100);
  font-family: var(--font-display);
  font-size: var(--home-fs-lg);
  line-height: 1;
  color: var(--white);
}

.home-step-art {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: auto auto 0;
  padding: 16px;
  border-radius: var(--home-radius);
  background: var(--background_white);
}

.home-setup-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
}

.home-setup-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--home-fs-base);
  font-weight: 600;
  color: var(--brand_blue-100);
  text-underline-offset: 3px;
}

.home-setup-note {
  margin: 0;
  font-size: var(--home-fs-base);
  line-height: 1.55;
  color: var(--gray-600);
}

/* Four steps: 2 x 2 from 600px, four across with chevrons from 1024px. */
@media (min-width: 600px) {
  .home-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .home-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-step-text {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-step + .home-step::before {
    content: "";
    position: absolute;
    top: 48px;
    left: -16px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--brand_blue-60);
    border-right: 2px solid var(--brand_blue-60);
    transform: rotate(45deg);
  }
}

@media (max-width: 767px) {
  .home-setup {
    margin-top: 64px;
  }
}

/* Phones: the four step drawings at a supporting size, so the steps read as a list rather than four posters. */
@media (max-width: 599px) {
  .home-step {
    padding: 20px;
  }

  .home-step-text {
    margin-bottom: 16px;
  }

  .home-step-art {
    max-width: 168px;
    padding: 4px 8px;
  }
}

/* ---------- S2: quotes, then customer logos ---------- */

.home-proof {
  padding: var(--home-section-y) var(--home-gutter);
  background: var(--white);
}

.home-quotes {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 24px;
  border: 1px solid var(--home-hairline);
  border-radius: var(--home-radius-lg);
  background: var(--white);
  box-shadow: var(--home-shadow);
}

.home-quote figure {
  display: flex;
  flex-direction: column;
  margin: 0;
  flex: 1;
}

.home-quote-mark {
  order: -2;
  width: 32px;
  height: 24px;
  margin-bottom: 20px;
  fill: var(--brand_red-100);
}

/* Customer logo top right, on the same line as the quote mark. */
.home-quote-logo {
  position: absolute;
  top: 28px;
  right: 28px;
  width: auto;
  height: 32px;
}

/* AZAntz has no logo file yet: its name in the body face, bold, in the logo slot's position and height. */
.home-quote-wordmark {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--home-fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gray-600);
}

.home-quote blockquote {
  margin: 0 0 24px;
}

.home-quote blockquote p {
  margin: 0;
  font-size: var(--home-fs-base);
  line-height: 1.6;
  color: var(--black);
}

/* Name and role sit at the bottom of each tile, so tiles of different quote lengths line up. */
.home-quote figcaption {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--home-hairline);
  font-size: var(--home-fs-sm);
  color: var(--gray-600);
}

.home-quote figcaption strong {
  display: block;
  font-size: var(--home-fs-base);
  color: var(--black);
}

.home-quote-result {
  margin: 16px 0 0;
  padding: 8px 12px;
  border-radius: var(--home-radius-sm);
  background: var(--brand_blue-10);
  font-size: var(--home-fs-sm);
  font-weight: 700;
  color: var(--brand_blue-100);
}

.home-quote-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  font-size: var(--home-fs-sm);
  font-weight: 600;
  color: var(--brand_blue-100);
  text-underline-offset: 3px;
}

@media (min-width: 900px) {
  .home-quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.home-proof-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 20px;
  font-size: var(--home-fs-base);
  font-weight: 600;
  color: var(--brand_blue-100);
  text-underline-offset: 3px;
}

/* Customer logos, directly under the quotes. */
.home-customers .home-logos {
  gap: 24px 40px;
}

.home-customers {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--home-hairline);
}

@media (max-width: 767px) {
  .home-customers {
    margin-top: 40px;
    padding-top: 40px;
  }
}

/* ---------- S2: founders ---------- */

.home-founders {
  padding: var(--home-section-y) var(--home-gutter);
  background: var(--gray-100);
}

.home-founder-list {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-founder {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 28px;
  border-radius: var(--home-radius-lg);
  background: var(--white);
  box-shadow: var(--home-shadow);
}

/* Founder photographs (Gaurav, 26 Oct): the same square size, radius and hairline border, so a studio portrait and
   an outdoor one sit together as a pair. */
.home-founder-photo {
  flex: none;
  display: block;
  width: 112px;
  height: 112px;
  overflow: hidden;
  border-radius: var(--home-radius);
  box-shadow: 0 0 0 1px rgba(40, 53, 132, 0.12);
}

.home-founder-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-founder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* LinkedIn link: brand-blue mark, 44px target, visible focus ring. */
.home-founder-in {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px -8px 0 0;
  border-radius: var(--home-radius-sm);
  color: var(--brand_blue-100);
}

.home-founder-in svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.home-founder-in:hover {
  background: var(--brand_blue-10);
}

.home-founder-in:focus-visible {
  outline: 3px solid var(--brand_blue-100);
  outline-offset: 2px;
}

.home-founder h3 {
  margin: 0;
  font-size: var(--home-fs-h3);
  font-weight: 400;
  line-height: 1.25;
  color: var(--black);
}

.home-founder-role {
  margin: 4px 0 12px;
  font-size: var(--home-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.home-founder p:last-child {
  margin: 0;
  font-size: var(--home-fs-sm);
  line-height: 1.6;
  color: var(--gray-600);
}

/* The two co-founders as two equal cards, side by side from 900px, stacked below (Gaurav, 26 Oct: no team photo). */
@media (min-width: 900px) {
  .home-founder-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .home-founder {
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .home-founder {
    gap: 16px;
    padding: 20px;
  }

  .home-founder-photo {
    width: 64px;
    font-size: var(--home-fs-md);
  }
}

/* ---------- S3: pricing ---------- */

.home-pricing {
  padding: var(--home-section-y) var(--home-gutter);
  background: var(--white);
}

.home-pricing .home-h2 {
  margin-bottom: 12px;
  max-width: 20em;
}

/* True italic of DM Serif Display (loaded by base.njk), never synthesised. */
.home-h2 em {
  font-style: italic;
  font-synthesis: none;
}

.home-pricing-intro {
  margin: 0 0 40px;
  font-size: var(--home-fs-base);
  color: var(--gray-600);
}

.home-plans {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 32px 32px;
  border: 1px solid var(--home-hairline);
  border-radius: var(--home-radius-xl);
  background: var(--white);
  box-shadow: var(--home-shadow);
}

/* Compliance stands out with a brand-blue outline and top band; its button stays the red primary action. */
.home-plan--featured {
  border: 2px solid var(--brand_blue-100);
  border-top-width: 8px;
}

.home-plan h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--home-fs-h3);
  font-weight: 700;
  color: var(--black);
}

.home-price {
  margin: 8px 0 0;
}

.home-price-num {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  color: var(--brand_blue-100);
}

.home-price-per,
.home-plan-billing {
  font-size: var(--home-fs-sm);
  color: var(--gray-600);
}

.home-plan-billing,
.home-plan-desc {
  margin: 0;
}

.home-plan-desc {
  padding-top: 16px;
  border-top: 1px solid var(--home-hairline);
  font-size: var(--home-fs-base);
  line-height: 1.55;
  color: var(--black);
}

/* Buttons sit on one line across both plans, however long each plan's list is: whatever comes just before the
   button takes up the spare height (a fixed margin, not an auto one, keeps spacing on the 4px grid). */
.home-plan > :nth-last-child(2) {
  flex-grow: 1;
}

.home-plan-list {
  display: grid;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.home-plan-list li {
  position: relative;
  padding-left: 28px;
  font-size: var(--home-fs-sm);
  line-height: 1.45;
  color: var(--black);
}

/* A drawn tick (two strokes), brand blue on its tint: not a shield, not an emoji. */
.home-plan-list li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand_blue-10);
}

.home-plan-list li::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 6px;
  height: 9px;
  border: solid var(--brand_blue-100);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.home-plan-proof {
  margin: 0 0 24px;
  font-size: var(--home-fs-sm);
  font-weight: 600;
  color: var(--brand_blue-100);
}

.home-plan-proof a {
  color: inherit;
  text-underline-offset: 3px;
}

.home-grants {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-left: 4px solid var(--brand_blue-100);
  border-radius: var(--home-radius-sm);
  background: var(--brand_blue-10);
  font-size: var(--home-fs-base);
  font-weight: 600;
  color: var(--brand_blue-100);
}

.home-pricing-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  font-size: var(--home-fs-base);
  font-weight: 600;
  color: var(--brand_blue-100);
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .home-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-plan {
    padding: 28px 20px 20px;
  }
}

/* ---------- FAQ (shared .faq-item accordion, home sizing) ---------- */

.home-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: var(--home-section-y) var(--home-gutter);
  background: var(--gray-100);
}

.home-faq .home-h2 {
  margin: 0;
}

.home-faq-more {
  margin: 16px 0 0;
  font-size: var(--home-fs-base);
  line-height: 1.55;
  color: var(--gray-600);
}

.home-faq-more a {
  font-weight: 600;
  color: var(--brand_blue-100);
  text-underline-offset: 3px;
}

.home-faq .faq-item {
  margin-bottom: 12px;
  border-color: var(--home-hairline);
  border-radius: var(--home-radius);
}

.home-faq .faq-item summary {
  min-height: 64px;
  padding: 20px 24px;
  font-size: var(--home-fs-base);
  font-weight: 600;
}

.home-faq .faq-answer {
  padding: 4px 24px 24px;
  font-size: var(--home-fs-base);
  color: var(--gray-600);
}

.home-faq .faq-answer p {
  margin: 0;
}

/* Desktop: heading left, questions right. */
@media (min-width: 1024px) {
  .home-faq {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 56px;
    align-items: start;
  }
}

@media (max-width: 767px) {
  .home-faq .faq-item summary {
    padding: 16px 20px;
  }

  .home-faq .faq-answer {
    padding: 4px 20px 20px;
  }
}

/* ---------- Media bar (inside the founders section, under the founder cards) ---------- */

/* Sits under the founder cards inside the founders section, the same way the customer logos sit under the quotes. */
.home-media {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--home-hairline);
  text-align: center;
}

/* Outlet names as text wordmarks in the media marquee (Gaurav, 26 Oct), until the official logo files arrive (A15).
   Text only: no imitation logos. */
.home-wordmark {
  font-family: var(--font-display);
  font-size: var(--home-fs-lg);
  line-height: 1.2;
  color: var(--gray-600);
  white-space: nowrap;
}

.home-media-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 24px;
  font-size: var(--home-fs-base);
  font-weight: 600;
  color: var(--brand_blue-100);
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .home-media {
    margin-top: 40px;
    padding-top: 40px;
  }

  .home-wordmark {
    font-size: var(--home-fs-md);
  }
}

/* ---------- Closing band (shared .final-cta container, inset like the hero) ---------- */

.home-close {
  margin: 24px 24px 40px;
  padding: var(--home-section-y) var(--home-gutter);
  border-radius: var(--home-radius-xl);
}

.home-close h2 {
  margin: 0 auto 40px;
  max-width: 16em;
  font-size: var(--home-fs-h2);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.home-close .home-actions {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  color: var(--home-on-dark);
}

@media (max-width: 767px) {
  .home-close {
    margin: 12px 12px 24px;
    padding: var(--home-section-y) 20px;
    border-radius: var(--home-radius-lg);
  }
}

/* ---------- Phase 3: motion (home.js). Every piece has a reduced-motion state. ---------- */

/* Customer logo marquee: home.js clones the list (aria-hidden) and adds .is-marquee. Without JS, or under reduced
   motion, the list stays a wrapped static grid. Pauses on hover and when off screen (.is-paused). */
/* Soft edges on all three marquees (partners, customers, media), so logos fade rather than cut off. Decorative:
   the mask only changes how the moving row ends, never the text or logos inside it. */
.home-marquee.is-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.home-marquee.is-marquee .home-marquee-track {
  display: flex;
  width: max-content;
  animation: home-marquee var(--home-marquee-dur, 36s) linear infinite;
}

.home-marquee.is-marquee .home-logos {
  flex-wrap: nowrap;
  padding-right: 48px;
}

.home-marquee.is-marquee:hover .home-marquee-track,
.home-marquee.is-marquee:focus-within .home-marquee-track,
.home-marquee.is-marquee.is-paused .home-marquee-track {
  animation-play-state: paused;
}

@keyframes home-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* S1 entrance: home.js arms each group (protections, steps) that starts below the fold, then reveals it once as it
   enters the viewport. Unarmed groups (already on screen, no JS, reduced motion) are never hidden. */
.home-protections.is-armed > li,
.home-steps.is-armed > li {
  opacity: 0;
  transform: translateY(16px);
}

.home-protections.is-in > li,
.home-steps.is-in > li {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-protections.is-in > li:nth-child(2),
.home-steps.is-in > li:nth-child(2) {
  transition-delay: 100ms;
}

.home-protections.is-in > li:nth-child(3),
.home-steps.is-in > li:nth-child(3) {
  transition-delay: 200ms;
}

.home-protections.is-in > li:nth-child(4),
.home-steps.is-in > li:nth-child(4) {
  transition-delay: 300ms;
}

.home-protections.is-in > li:nth-child(5) {
  transition-delay: 400ms;
}

/* Mobile sticky bar. */
.home-sticky {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8px 24px rgba(17, 17, 17, 0.12);
  transform: translateY(0);
  transition: transform 200ms ease;
}

.home-sticky[hidden] {
  display: none;
}

.home-sticky .home-btn {
  width: 100%;
}

@media (min-width: 768px) {
  .home-sticky {
    display: none;
  }
}

/* The bar never hides a focused element (WCAG 2.4.11). */
html {
  scroll-padding-bottom: 96px;
}

/* Nav inversion over dark sections. home.js toggles html.home-nav-on-dark; the navbar partial is not edited.
   !important beats the inline colours base.njk's GSAP hover handlers write on mouseleave. */
html.home-nav-on-dark .navbar-inner .nav-links > li > a,
html.home-nav-on-dark .navbar-inner .dropdown-trigger,
html.home-nav-on-dark .navbar-inner .btn-signin {
  color: var(--white) !important;
}

html.home-nav-on-dark .navbar-inner .btn-signin {
  border-color: rgba(255, 255, 255, 0.6) !important;
  background: transparent !important;
}

html.home-nav-on-dark .navbar-inner .nav-logo img {
  filter: brightness(0) invert(1);
}

html.home-nav-on-dark .navbar-inner .hamburger span {
  background: var(--white);
}

html.home-nav-on-dark .navbar-inner {
  background: rgba(10, 14, 42, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .home-btn,
  .home-sticky {
    transition: none;
  }

  .home-rot-live.is-swap,
  .home-marquee.is-marquee .home-marquee-track {
    animation: none;
  }

  .home-protections.is-armed > li,
  .home-steps.is-armed > li {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Currency (Gaurav, 26 Oct): every price is in the HTML in both currencies from Stripe. The inline script
   at the top of the page adds html.home-usd or html.home-sgd before any price is parsed, so only one ever paints.
   Without JS the S$ spans show (the US$ ones carry the hidden attribute). ---------- */
html.home-usd .home-cur[data-cur="sgd"] {
  display: none;
}

html.home-usd .home-cur[data-cur="usd"][hidden] {
  display: inline;
}