/*
 * SkyPlanner homepage-v2 content-area styles.
 *
 * Verbatim transfer of the approved design CSS (page key homepage-v2).
 * Only three classes of change were applied:
 *   1. every selector is scoped under the page root class .sp-homepage-v2
 *      (html -> body.skyplanner-homepage-v2-page, body {} dropped),
 *   2. mock shell rules (.sp-header/.sp-nav/.sp-offcanvas/.sp-footer/
 *      .sp-floating-chat) are dropped because the real GeneratePress
 *      shell provides chrome,
 *   3. generated font blobs and asset ids are pointed at the real
 *      child-theme font files and repo image assets.
 * Declaration values are unchanged. Visible copy lives in Gutenberg
 * content for WPML; nothing user-facing is authored here.
 */

/* Fonts: the approved design shipped generated woff2 blobs. Per the porting
   reference we ship the real child-theme font files instead, under a
   page-unique family alias so the sitewide single-weight "NeueKabel" face used
   by the GeneratePress shell is not redefined. Weights match the design. */
@font-face {
  font-family: "SkyPlannerHomeNeueKabel";
  src: url("../../Fonts/NeueKabel.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "SkyPlannerHomeNeueKabel";
  src: url("../../Fonts/NeueKabel-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "SkyPlannerHomeNeueKabel";
  src: url("../../Fonts/NeueKabel-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "SkyPlannerHomeNeueKabel";
  src: url("../../Fonts/NeueKabelExtraBold.woff2") format("woff2");
  font-weight: 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Jost";
  src: url("../../Fonts/Jost.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
/* ============================================================================
   SkyPlanner — Colors & Typography Foundation
   Canonical tokens extracted from skyplanner.ai (GeneratePress child theme).
   Source of truth: 01_SKYPLANNER_DESIGN_SYSTEM_SOURCE.md + data/tokens.json.
   Load this FIRST, then skyplanner-ds.css for components.
   ============================================================================ */
/* ----------------------------------------------------------------------------
   Webfonts — NeueKabel (display/headings, ONE family w/ weights) + Jost (body)
   Live uses NeueKabel weight 400 for desktop headings, 700 for mobile headings.
   ---------------------------------------------------------------------------- */

.sp-homepage-v2 {
  /* ==========================================================================
     COLOR — raw brand tokens
     ========================================================================== */
  --sp-blue:            #303AF2;   /* electric brand blue — primary actions, brand surfaces */
  --sp-blue-ink:        #2F3AF1;   /* near-identical legacy variant, normalize to --sp-blue */
  --sp-ink:             #1F1F33;   /* dark navy — headings, body text, nav labels */
  --sp-ink-900:         #0C0C14;   /* deepest ink, rare */
  --sp-green:           #00BA70;   /* conversion CTA green */
  --sp-green-600:       #00A663;   /* green hover (derived) */
  --sp-blue-700:        #2630D6;   /* blue hover (derived) */

  /* Surfaces & background */
  --sp-bg:              #F9FCFE;   /* default page background (cool near-white) */
  --sp-bg-alt:         #F9F9FD;   /* faint alt background */
  --sp-white:           #FFFFFF;

  /* Tinted "pastel" surfaces — section + icon-chip backgrounds */
  --sp-surface-blue:    #E5F2FE;   /* light blue band / chip */
  --sp-surface-green:   #CEF2DD;   /* light green chip */
  --sp-surface-purple:  #EDE5FE;   /* light purple chip */
  --sp-surface-orange:  #FEF2E5;   /* light orange chip */

  /* Borders & lines */
  --sp-border:          #DDEDFF;   /* light blue hairline (inputs, dividers) */
  --sp-border-soft:     rgba(31,31,51,0.10);

  /* Text roles */
  --sp-text:            #1F1F33;   /* primary text */
  --sp-text-muted:      #5A5A6E;   /* secondary text (derived from ink) */
  --sp-text-on-blue:    #FFFFFF;
  --sp-text-on-blue-dim:rgba(255,255,255,0.85);
  --sp-link:            #303AF2;

  /* ==========================================================================
     SHADOWS — soft blue-tinted elevation
     ========================================================================== */
  --sp-shadow-card:   0px 6px 32px rgba(48,58,242,0.12);   /* default rounded card */
  --sp-shadow-soft:   0px 6px 24px rgba(48,58,242,0.30);   /* hover / floating CTA */
  --sp-shadow-faint:  0px 6px 32px rgba(48,58,242,0.12);
  --sp-shadow-pill:   0px 4px 20px rgba(46,49,65,0.18);    /* floating pill button */

  /* ==========================================================================
     RADII
     ========================================================================== */
  --sp-radius-sm:   8px;
  --sp-radius-md:   12px;    /* inputs, small cards, chips */
  --sp-radius-lg:   24px;    /* content cards, panels */
  --sp-radius-xl:   32px;    /* large feature panels, bands */
  --sp-radius-pill: 35px;    /* buttons, nav CTA */
  --sp-radius-full: 9999px;

  /* ==========================================================================
     SPACING — regularized 4px-based scale
     ========================================================================== */
  --sp-space-1:  4px;
  --sp-space-2:  8px;
  --sp-space-3:  12px;
  --sp-space-4:  16px;
  --sp-space-5:  20px;
  --sp-space-6:  24px;
  --sp-space-8:  32px;
  --sp-space-10: 40px;
  --sp-space-12: 48px;
  --sp-space-15: 60px;
  --sp-space-20: 80px;
  --sp-space-30: 120px;   /* section vertical rhythm (desktop) */

  --sp-container: 1200px; /* max content width */
  --sp-gutter:    40px;

  /* ==========================================================================
     TYPOGRAPHY — families
     ========================================================================== */
  --sp-font-display:  "SkyPlannerHomeNeueKabel", "Jost", system-ui, sans-serif;        /* headings */
  --sp-font-display-xb: "SkyPlannerHomeNeueKabel", "Jost", sans-serif;                 /* hero display (weight 800) */
  --sp-font-medium:   "SkyPlannerHomeNeueKabel", "Jost", sans-serif;                   /* nav, subheads (weight 500) */
  --sp-font-body:     "Jost", system-ui, -apple-system, sans-serif;      /* body */

  /* Type scale (weight / size / line-height) — fluid via clamp(): one token scales
     from mobile to desktop, so pages no longer need per-breakpoint heading overrides.
     Live SkyPlanner uses bold 700 display headings. */
  --sp-h1: 700 clamp(36px, 5.2vw, 80px)/1.05 var(--sp-font-display);
  --sp-h2: 700 clamp(30px, 4.4vw, 56px)/1.12 var(--sp-font-display);
  --sp-h3: 700 clamp(24px, 2.6vw, 32px)/1.25 var(--sp-font-display);
  --sp-h4: 700 clamp(20px, 2vw, 24px)/1.3 var(--sp-font-display);
  --sp-body-lg: 400 20px/30px var(--sp-font-body);
  --sp-body:    400 18px/27px var(--sp-font-body);
  --sp-body-sm: 400 16px/23px var(--sp-font-body);
  --sp-caption: 400 15px/22px var(--sp-font-body);
}

/* ----------------------------------------------------------------------------
   Mobile type scale (≤600px)
   ---------------------------------------------------------------------------- */

@media only screen and (max-width: 600px) {

.sp-homepage-v2 {
    /* headings now scale fluidly via clamp() above — only body copy needs a mobile step */
    --sp-body-lg: 400 17px/24px var(--sp-font-body);
    --sp-body:    400 17px/24px var(--sp-font-body);
    --sp-space-30: 64px;
    --sp-gutter:   20px;
  }
}

/* ----------------------------------------------------------------------------
   Semantic element defaults (opt-in via .sp-prose / utility classes)
   ---------------------------------------------------------------------------- */

.sp-homepage-v2 .sp-h1 { font: var(--sp-h1); color: var(--sp-text); margin: 0; }

.sp-homepage-v2 .sp-h2 { font: var(--sp-h2); color: var(--sp-text); margin: 0; }

.sp-homepage-v2 .sp-h3 { font: var(--sp-h3); color: var(--sp-text); margin: 0; }

.sp-homepage-v2 .sp-h4 { font: var(--sp-h4); color: var(--sp-text); margin: 0; }

.sp-homepage-v2 .sp-lead { font: var(--sp-body-lg); color: var(--sp-text); margin: 0; }

.sp-homepage-v2 .sp-body { font: var(--sp-body-lg); color: var(--sp-text); margin: 0; }

.sp-homepage-v2 .sp-muted { color: var(--sp-text-muted); }

.sp-homepage-v2 .sp-eyebrow {
  font: var(--sp-caption); font-family: var(--sp-font-medium);
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--sp-blue); margin: 0;
}

/* ============================================================================
   SkyPlanner — Component Kit (canonical, normalized)
   Requires colors_and_type.css loaded first.
   Legacy site had many one-off button/card variants; this file collapses them
   into a small canonical set. Class prefix: .sp-
   ============================================================================ */

.sp-homepage-v2 *,
.sp-homepage-v2 *::before,
.sp-homepage-v2 *::after { box-sizing: border-box; }

body.skyplanner-homepage-v2-page { overflow-x: clip; }

/* belt-and-suspenders: off-canvas / decorative bleed never adds page scroll width */

/* Mobile-safety defaults (promoted from pricing-v2): long words wrap instead of
   forcing horizontal scroll, and media never exceeds its container. */

.sp-homepage-v2.sp-page { overflow-wrap: break-word; }

.sp-homepage-v2.sp-page img,
.sp-homepage-v2.sp-page svg,
.sp-homepage-v2.sp-page video { max-width: 100%; }

/* Opt-in helper for flex/grid children that would otherwise refuse to shrink
   (the #1 cause of mobile overflow in 2-column layouts). */

.sp-homepage-v2 .sp-min0,
.sp-homepage-v2 .sp-min0 > * { min-width: 0; }

.sp-homepage-v2.sp-page {
  margin: 0;
  background: var(--sp-bg);
  color: var(--sp-text);
  font: var(--sp-body-lg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sp-homepage-v2 .sp-container { max-width: var(--sp-container); margin-inline: auto; padding-inline: var(--sp-gutter); }

.sp-homepage-v2 .sp-section { padding-block: var(--sp-space-30); }

/* ============================================================================
   1. BUTTONS  — canonical set: green primary, blue primary, outline, nav CTA, text
   Pill shape, NeueKabelMedium label, generous padding, soft lift on hover.
   ============================================================================ */

.sp-homepage-v2 .sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sp-font-medium); font-size: 18px; line-height: 1;
  padding: 18px 32px; border-radius: var(--sp-radius-pill);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .12s ease, border-color .18s ease;
  white-space: nowrap;
}

.sp-homepage-v2 .sp-btn:active { transform: translateY(1px); }

.sp-homepage-v2 .sp-btn .sp-btn__chev { width: 18px; height: 18px; flex: none; }

/* Green — primary conversion ("Get started for free", "Start free") */

.sp-homepage-v2 .sp-btn--green { background: var(--sp-green); color: #fff; }

.sp-homepage-v2 .sp-btn--green:hover { background: var(--sp-green-600); box-shadow: var(--sp-shadow-soft); transform: translateY(-2px); }

/* Blue — secondary action / "Request a demo", "Contact us" */

.sp-homepage-v2 .sp-btn--blue { background: var(--sp-blue); color: #fff; }

.sp-homepage-v2 .sp-btn--blue:hover { background: var(--sp-blue-700); box-shadow: var(--sp-shadow-soft); transform: translateY(-2px); }

/* Outline — tertiary / "Start free with Google/Microsoft", "Book a free demo" */

.sp-homepage-v2 .sp-btn--outline { background: #fff; color: var(--sp-ink); border-color: var(--sp-border); }

.sp-homepage-v2 .sp-btn--outline:hover { border-color: var(--sp-blue); color: var(--sp-blue); box-shadow: var(--sp-shadow-card); }

/* Outline on blue — for use inside blue bands */

.sp-homepage-v2 .sp-btn--ghost-onblue { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }

.sp-homepage-v2 .sp-btn--ghost-onblue:hover { background: #fff; color: var(--sp-blue); border-color: #fff; }

/* White — solid white pill for use on blue/brand surfaces (e.g. hero OAuth) */

.sp-homepage-v2 .sp-btn--white { background: #fff; color: var(--sp-ink); }

.sp-homepage-v2 .sp-btn--white:hover { box-shadow: 0 12px 30px rgba(12,16,60,0.28); transform: translateY(-2px); }

/* Nav CTA — compact green pill in header */

.sp-homepage-v2 .sp-btn--nav { padding: 14px 26px; font-size: 17px; background: var(--sp-green); color: #fff; }

.sp-homepage-v2 .sp-btn--nav:hover { background: var(--sp-green-600); box-shadow: var(--sp-shadow-soft); transform: translateY(-2px); }

/* Text link button */

.sp-homepage-v2 .sp-btn--text {
  background: none; border: none; padding: 6px 2px; color: var(--sp-ink);
  text-decoration: underline; text-underline-offset: 4px;
}

.sp-homepage-v2 .sp-btn--text:hover { color: var(--sp-blue); }

.sp-homepage-v2 .sp-btn--lg { padding: 20px 38px; font-size: 19px; }

.sp-homepage-v2 .sp-btn--sm { padding: 12px 22px; font-size: 16px; }

.sp-homepage-v2 .sp-btn:focus-visible { outline: 3px solid rgba(48,58,242,0.45); outline-offset: 2px; }

/* ============================================================================
   2. NAVIGATION — desktop header
   ============================================================================ */

/* Live header uses wide page gutters, not the narrow 1200 content container */

/* Tablet (≤1024): collapse to hamburger — nav links + right cluster (lang + CTA)
   move into the offcanvas, matching the live GeneratePress behaviour at 768. */

/* Dropdown */

/* Mobile offcanvas */

/* ============================================================================
   3. HERO
   ============================================================================ */

.sp-homepage-v2 .sp-hero { padding-block: var(--sp-space-20) var(--sp-space-30); }

.sp-homepage-v2 .sp-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

.sp-homepage-v2 .sp-hero__title { font: var(--sp-h1); margin: 0 0 28px; color: var(--sp-text); }

.sp-homepage-v2 .sp-hero__title .accent { color: var(--sp-blue); }

.sp-homepage-v2 .sp-hero__sub { font: var(--sp-body-lg); color: var(--sp-text-muted); max-width: 36ch; margin: 0 0 32px; }

.sp-homepage-v2 .sp-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.sp-homepage-v2 .sp-hero__media img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {

.sp-homepage-v2 .sp-hero__grid { grid-template-columns: 1fr; }

.sp-homepage-v2 .sp-hero__media { order: -1; }
}

/* 3b. HERO — brand (blue) variant: full-bleed electric-blue background image,
   white display copy, product screenshot right. Matches the live homepage hero.
   Background art: assets/hero-bg-desktop.jpg (desktop) / hero-bg-mobile.png (mobile). */

.sp-homepage-v2 .sp-hero--brand {
  position: relative; overflow: hidden;
  background: var(--sp-blue) url("/wp-content/themes/generatepress-child/assets/img/homepage-v2/hero-bg-desktop.jpg") center center / cover no-repeat;
  padding-block: var(--sp-space-15) var(--sp-space-15);
}

.sp-homepage-v2 .sp-hero--brand .sp-hero__grid { grid-template-columns: 1fr 1.04fr; align-items: center; gap: 40px; }

.sp-homepage-v2 .sp-hero--brand .sp-hero__title,
.sp-homepage-v2 .sp-hero--brand .sp-hero__title .accent { color: #fff; }

.sp-homepage-v2 .sp-hero--brand .sp-hero__sub { color: rgba(255,255,255,0.92); max-width: 46ch; }

.sp-homepage-v2 .sp-hero--brand .sp-hero__actions .sp-btn--text { color: #fff; text-decoration-color: rgba(255,255,255,0.7); }

.sp-homepage-v2 .sp-hero--brand .sp-hero__actions .sp-btn--text:hover { color: #fff; text-decoration-color: #fff; }

.sp-homepage-v2 .sp-hero--brand .sp-btn--green { box-shadow: 0 12px 30px rgba(12,16,60,0.32); }

.sp-homepage-v2 .sp-hero--brand .sp-hero__media img {
  width: 100%; height: auto; border-radius: 10px;
  filter: drop-shadow(0 26px 64px rgba(12,16,60,0.40));
}

@media (max-width: 900px) {

.sp-homepage-v2 .sp-hero--brand {
    background-image: url("/wp-content/themes/generatepress-child/assets/img/homepage-v2/hero-bg-mobile.jpg");
    background-position: top center;
    padding-block: var(--sp-space-12) var(--sp-space-12);
  }

.sp-homepage-v2 .sp-hero--brand .sp-hero__media { order: 0; margin-top: 8px; }

.sp-homepage-v2 .sp-hero--brand .sp-hero__sub { max-width: none; }
}

/* ============================================================================
   4. CARDS — canonical types
   a) content/problem card  b) feature card  c) pricing/service card  d) docs card
   ============================================================================ */

.sp-homepage-v2 .sp-card {
  background: #fff; border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-card); padding: 32px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.sp-homepage-v2 .sp-card--hover:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow-soft); }

/* icon chip — pastel rounded square */

.sp-homepage-v2 .sp-chip {
  width: 64px; height: 64px; border-radius: var(--sp-radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sp-surface-blue); margin-bottom: 20px;
}

.sp-homepage-v2 .sp-chip img,
.sp-homepage-v2 .sp-chip svg { width: 32px; height: 32px; }

.sp-homepage-v2 .sp-chip--green { background: var(--sp-surface-green); }

.sp-homepage-v2 .sp-chip--purple { background: var(--sp-surface-purple); }

.sp-homepage-v2 .sp-chip--orange { background: var(--sp-surface-orange); }

.sp-homepage-v2 .sp-card__title { font: var(--sp-h4); font-family: var(--sp-font-display); font-weight: 700; margin: 0 0 12px; color: var(--sp-text); }

.sp-homepage-v2 .sp-card__body { font: var(--sp-body); color: var(--sp-text-muted); margin: 0; }

/* feature card — big display title (used on Features page) */

.sp-homepage-v2 .sp-feature__title { font: var(--sp-h3); margin: 0 0 16px; }

/* stat card */

.sp-homepage-v2 .sp-stat { background:#fff; border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-card); padding: 28px 24px; text-align:center; }

.sp-homepage-v2 .sp-stat__num { font-family: var(--sp-font-display-xb); font-weight: 800; font-size: 44px; color: var(--sp-blue); line-height:1; }

.sp-homepage-v2 .sp-stat__label { font: var(--sp-body-sm); color: var(--sp-text); margin-top: 14px; }

/* docs category card */

.sp-homepage-v2 .sp-doc-card { background:#fff; border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-card); padding: 24px; display:flex; gap:16px; align-items:flex-start; text-decoration:none; }

.sp-homepage-v2 .sp-doc-card:hover { box-shadow: var(--sp-shadow-soft); transform: translateY(-2px); }

.sp-homepage-v2 .sp-doc-card__icon { width:48px; height:48px; border-radius: 12px; background: var(--sp-surface-blue); flex:none; display:flex; align-items:center; justify-content:center; }

.sp-homepage-v2 .sp-doc-card__title { font-family: var(--sp-font-display); font-weight:700; font-size:20px; color: var(--sp-text); margin:0 0 4px; }

.sp-homepage-v2 .sp-doc-card__meta { font: var(--sp-caption); color: var(--sp-text-muted); }

.sp-homepage-v2 .sp-card-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.sp-homepage-v2 .sp-card-grid--4 { grid-template-columns: repeat(4, 1fr); }

.sp-homepage-v2 .sp-card-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {

.sp-homepage-v2 .sp-card-grid--4 { grid-template-columns: repeat(2,1fr); }

.sp-homepage-v2 .sp-card-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {

.sp-homepage-v2 .sp-card-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   5. SECTION BANDS & PASTEL SURFACES
   ============================================================================ */

.sp-homepage-v2 .sp-band-blue { background: var(--sp-blue); color: #fff; }

.sp-homepage-v2 .sp-band-blue .sp-h2,
.sp-homepage-v2 .sp-band-blue .sp-h3 { color: #fff; }

.sp-homepage-v2 .sp-band-light { background: var(--sp-surface-blue); }

.sp-homepage-v2 .sp-band-soft { background: #fff; }

.sp-homepage-v2 .sp-panel { border-radius: var(--sp-radius-xl); padding: 56px; }

.sp-homepage-v2 .sp-panel--blue { background: var(--sp-blue); color: #fff; box-shadow: var(--sp-shadow-soft); }

.sp-homepage-v2 .sp-panel--light { background: var(--sp-surface-blue); }

.sp-homepage-v2 .sp-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }

.sp-homepage-v2 .sp-section-head .sp-h2 { margin-bottom: 20px; }

.sp-homepage-v2 .sp-section-head p { font: var(--sp-body-lg); color: var(--sp-text-muted); margin: 0; }

/* logo / social proof band */

.sp-homepage-v2 .sp-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 48px; opacity:.7; }

.sp-homepage-v2 .sp-logos span { font-family: var(--sp-font-medium); color: var(--sp-text-muted); font-size: 22px; }

/* ============================================================================
   6. PRICING
   ============================================================================ */

.sp-homepage-v2 .sp-price-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:start; }

@media (max-width: 600px) {

.sp-homepage-v2 .sp-price-grid { grid-template-columns:1fr; }
}

/* 2-col holds through tablet (768) */

.sp-homepage-v2 .sp-price-card { background:#fff; border-radius: var(--sp-radius-xl); box-shadow: var(--sp-shadow-card); padding: 48px 40px; }

.sp-homepage-v2 .sp-price-card__name { font: var(--sp-h3); text-align:center; margin: 0 0 6px; }

.sp-homepage-v2 .sp-price-card__billing { text-align:center; color: var(--sp-text-muted); font: var(--sp-body-sm); margin: 0 0 28px; }

.sp-homepage-v2 .sp-price-box { background: var(--sp-surface-blue); border-radius: var(--sp-radius-lg); padding: 28px; text-align:center; margin-bottom: 28px; }

.sp-homepage-v2 .sp-price-box__main { font-family: var(--sp-font-display); font-weight:700; font-size: 44px; color: var(--sp-text); }

.sp-homepage-v2 .sp-price-box__main span { font-size: 22px; font-family: var(--sp-font-body); color: var(--sp-text-muted); }

.sp-homepage-v2 .sp-price-box__add { font-family: var(--sp-font-display); font-weight:700; font-size: 26px; color: var(--sp-text); margin-top: 10px; }

.sp-homepage-v2 .sp-price-box__add span { font-size: 18px; font-family: var(--sp-font-body); color: var(--sp-text-muted); }

.sp-homepage-v2 .sp-price-box__hint { color: var(--sp-blue); font: var(--sp-body-sm); margin-top: 10px; display:inline-flex; gap:6px; align-items:center; }

.sp-homepage-v2 .sp-feature-list { list-style:none; margin:0; padding:0; }

.sp-homepage-v2 .sp-feature-list li { display:flex; gap:10px; align-items:flex-start; padding:7px 0; font: var(--sp-body-sm); color: var(--sp-text); }

.sp-homepage-v2 .sp-feature-list li::before { content:"✓"; color: var(--sp-green); font-weight:700; flex:none; }

/* ============================================================================
   7. FAQ / ACCORDION
   ============================================================================ */

.sp-homepage-v2 .sp-faq { max-width: 920px; margin-inline:auto; display:flex; flex-direction:column; gap: 14px; }

.sp-homepage-v2 .sp-faq__item { border-radius: var(--sp-radius-pill); background:#fff; box-shadow: var(--sp-shadow-card); overflow:hidden; transition: border-radius .2s; }

.sp-homepage-v2 .sp-faq__q {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 22px 32px; cursor:pointer; font-family: var(--sp-font-display);
  font-weight:700; font-size: 19px; color: var(--sp-text);
}

.sp-homepage-v2 .sp-faq__q .sp-faq__chev { width:18px; height:18px; flex:none; transition: transform .2s; color: var(--sp-blue); }

.sp-homepage-v2 .sp-faq__a { padding: 0 32px; max-height:0; overflow:hidden; transition: max-height .25s ease, padding .25s ease; font: var(--sp-body-sm); color: var(--sp-text-muted); }

.sp-homepage-v2 .sp-faq__item.is-open { background: var(--sp-blue); border-radius: var(--sp-radius-lg); }

.sp-homepage-v2 .sp-faq__item.is-open .sp-faq__q { color: #fff; }

.sp-homepage-v2 .sp-faq__item.is-open .sp-faq__chev { transform: rotate(180deg); color:#fff; }

.sp-homepage-v2 .sp-faq__item.is-open .sp-faq__a { color: rgba(255,255,255,0.9); max-height: 320px; padding: 0 32px 24px; }

/* ============================================================================
   8. FORMS
   ============================================================================ */

.sp-homepage-v2 .sp-form { display:grid; gap: 22px; }

.sp-homepage-v2 .sp-field { display:flex; flex-direction:column; gap: 8px; }

.sp-homepage-v2 .sp-field label { font: var(--sp-body-sm); font-family: var(--sp-font-medium); color: var(--sp-text); }

.sp-homepage-v2 .sp-field label .req { color: #E5484D; }

.sp-homepage-v2 .sp-input,
.sp-homepage-v2 .sp-textarea {
  font: var(--sp-body); width:100%; padding: 14px 18px; border-radius: var(--sp-radius-pill);
  border: 1px solid var(--sp-border); background:#fff; color: var(--sp-text);
  transition: border-color .15s, box-shadow .15s;
}

.sp-homepage-v2 .sp-textarea { border-radius: var(--sp-radius-lg); min-height: 120px; resize: vertical; }

.sp-homepage-v2 .sp-input::placeholder,
.sp-homepage-v2 .sp-textarea::placeholder { color: #9aa0b4; }

.sp-homepage-v2 .sp-input:focus,
.sp-homepage-v2 .sp-textarea:focus { outline:none; border-color: var(--sp-blue); box-shadow: 0 0 0 4px rgba(48,58,242,0.12); }

.sp-homepage-v2 .sp-form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }

@media (max-width: 600px) {

.sp-homepage-v2 .sp-form-row { grid-template-columns: 1fr; }
}

.sp-homepage-v2 .sp-check { display:flex; gap:12px; align-items:flex-start; font: var(--sp-body-sm); color: var(--sp-text-muted); }

.sp-homepage-v2 .sp-check input { width:20px; height:20px; flex:none; accent-color: var(--sp-blue); margin-top:2px; }

/* ============================================================================
   9. FOOTER
   ============================================================================ */

/* 4-col holds through tablet (768) */

/* ============================================================================
   11. NUMBERED PROCESS STEPS  (Assisted onboarding / Customization pages)
   Light-blue rounded card, big blue NeueKabel number, title, body.
   ============================================================================ */

.sp-homepage-v2 .sp-steps { display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }

@media (max-width: 900px) {

.sp-homepage-v2 .sp-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {

.sp-homepage-v2 .sp-steps { grid-template-columns: 1fr; }
}

.sp-homepage-v2 .sp-step { background: var(--sp-surface-blue); border-radius: var(--sp-radius-lg); padding: 32px 28px; }

.sp-homepage-v2 .sp-step__num { font-family: var(--sp-font-display-xb); font-weight: 800; font-size: 40px; line-height:1; color: var(--sp-blue); margin-bottom: 20px; }

.sp-homepage-v2 .sp-step__title { font-family: var(--sp-font-display); font-weight: 700; font-size: 19px; margin: 0 0 8px; color: var(--sp-text); }

.sp-homepage-v2 .sp-step__body { font: var(--sp-body-sm); color: var(--sp-text-muted); margin: 0; }

/* ============================================================================
   12. INTEGRATION / LOGO CARDS  (Integrations page grid)
   Small white card: logo, bold title, short description. Left-aligned.
   ============================================================================ */

.sp-homepage-v2 .sp-logo-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

@media (max-width: 600px) {

.sp-homepage-v2 .sp-logo-grid { grid-template-columns: 1fr 1fr; }
}

/* 3-col holds through tablet (768) */

@media (max-width: 430px) {

.sp-homepage-v2 .sp-logo-grid { grid-template-columns: 1fr; }
}

.sp-homepage-v2 .sp-logo-card { background:#fff; border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-card); padding: 22px 24px; }

.sp-homepage-v2 .sp-logo-card__logo { height: 26px; margin-bottom: 14px; display:flex; align-items:center; }

.sp-homepage-v2 .sp-logo-card__logo .ph { height: 22px; padding: 0 10px; border-radius:6px; background: var(--sp-surface-blue); color: var(--sp-blue); font-family: var(--sp-font-medium); font-size: 13px; display:inline-flex; align-items:center; }

.sp-homepage-v2 .sp-logo-card__title { font-family: var(--sp-font-display); font-weight: 700; font-size: 18px; margin: 0 0 6px; color: var(--sp-text); }

.sp-homepage-v2 .sp-logo-card__desc { font: var(--sp-caption); color: var(--sp-text-muted); margin: 0; }

/* Centered button toolbar (doc / utility page sub-nav) */

.sp-homepage-v2 .sp-btn-toolbar { display:flex; flex-wrap:wrap; gap: 16px; justify-content:center; }

/* Big display-title feature card (Integrations / Features pages) */

.sp-homepage-v2 .sp-feature-card { background:#fff; border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-card); padding: 40px 34px; }

.sp-homepage-v2 .sp-feature-card .sp-chip { margin-bottom: 24px; }

/* ============================================================================
   10. UTILITIES
   ============================================================================ */

.sp-homepage-v2 .sp-pill-tag { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius: var(--sp-radius-pill); background: var(--sp-surface-blue); color: var(--sp-blue); font-family: var(--sp-font-medium); font-size: 15px; }

.sp-homepage-v2 .sp-divider { border:none; border-top:1px solid var(--sp-border); margin: 0; }

.sp-homepage-v2 .sp-stack-2 > * + * { margin-top: 8px; }

.sp-homepage-v2 .sp-stack-4 > * + * { margin-top: 16px; }

.sp-homepage-v2 .sp-center { text-align:center; }

/* ============================================================================
   13. MOBILE (≤600px)  — small-screen overrides, validated against package 04 (390px)
   ============================================================================ */

@media (max-width: 600px) {

/* Section rhythm tightens; container hugs edges with 20px gutter */

.sp-homepage-v2 .sp-section { padding-block: var(--sp-space-20); }

.sp-homepage-v2 .sp-panel { padding: 32px 24px; border-radius: var(--sp-radius-lg); }

.sp-homepage-v2 .sp-section-head { margin-bottom: 36px; }

/* CTAs become full-width, comfortably tall touch targets (≥48px) */

.sp-homepage-v2 .sp-hero__actions { flex-direction: column; align-items: stretch; }

.sp-homepage-v2 .sp-hero__actions .sp-btn,
.sp-homepage-v2 .sp-hero .oauth-row .sp-btn { width: 100%; }

.sp-homepage-v2 .sp-btn--block-m { width: 100%; }

.sp-homepage-v2 .sp-btn-toolbar { flex-direction: column; }

.sp-homepage-v2 .sp-btn-toolbar .sp-btn { width: 100%; }

/* Hero: copy first, image below, centered */

.sp-homepage-v2 .sp-hero { padding-block: var(--sp-space-10) var(--sp-space-20); }

.sp-homepage-v2 .sp-hero__title { font: var(--sp-h1); }

.sp-homepage-v2 .sp-hero__sub { max-width: none; }

/* Single-column grids */

.sp-homepage-v2 .sp-steps { grid-template-columns: 1fr; }

.sp-homepage-v2 .sp-price-grid { grid-template-columns: 1fr; }

.sp-homepage-v2 .sp-logo-grid { grid-template-columns: 1fr; }

/* Cards: a touch less padding */

.sp-homepage-v2 .sp-card { padding: 24px; }

.sp-homepage-v2 .sp-price-card { padding: 32px 24px; }

/* FAQ: tighter horizontal padding, stays pill→panel */

.sp-homepage-v2 .sp-faq__q { padding: 18px 22px; font-size: 17px; }

.sp-homepage-v2 .sp-faq__a { padding-inline: 22px; }

.sp-homepage-v2 .sp-faq__item.is-open .sp-faq__a { padding: 0 22px 20px; }

/* Footer: single column, centered (matches live mobile footer) */

/* Inputs/buttons keep ≥48px height via existing padding; nav CTA full-width in menu */
}

/* RTL — Arabic pages mirror fully */

[dir="rtl"] .sp-homepage-v2 .sp-feature-list li,
[dir="rtl"] .sp-homepage-v2 .sp-check { flex-direction: row-reverse; text-align: right; }

/* Notion-style CTA corner radius (rounded rectangle, not pill) */

.sp-homepage-v2 .sp-btn { border-radius: 10px; }

.sp-homepage-v2 .oauth-row { display:flex; gap:14px; flex-wrap:wrap; }

.sp-homepage-v2 .gicon,
.sp-homepage-v2 .micon { width:20px; height:20px; flex:none; display:inline-block; }

.sp-homepage-v2 .gicon { border-radius:50%; background: conic-gradient(from -45deg, #EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0 100%); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 28%, #000 29%); mask: radial-gradient(circle at 50% 50%, transparent 28%, #000 29%); }

.sp-homepage-v2 .micon { background:
     linear-gradient(#F25022,#F25022) 0 0/9px 9px no-repeat,
     linear-gradient(#7FBA00,#7FBA00) 11px 0/9px 9px no-repeat,
     linear-gradient(#00A4EF,#00A4EF) 0 11px/9px 9px no-repeat,
     linear-gradient(#FFB900,#FFB900) 11px 11px/9px 9px no-repeat; }

/* nav responsive */

/* hero browser frame */

.sp-homepage-v2 .hero-browser {width:min(100%,980px);margin-inline:auto;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -28px rgba(6,10,45,.55);border:1px solid rgba(255,255,255,.25)}

.sp-homepage-v2 .hero-panel .sp-hero__media .hero-browser img {width:100%;aspect-ratio:auto;height:auto;object-fit:fill;border-radius:0;box-shadow:none}

.sp-homepage-v2 .hero-browser__bar {display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;background:#FBFBFD;border-bottom:1px solid #E3E6EC}

.sp-homepage-v2 .hero-browser__dots {display:flex;gap:6px;flex:none}

.sp-homepage-v2 .hero-browser__dots i {width:10px;height:10px;border-radius:50%;display:block;background:#C9CDD4}

.sp-homepage-v2 .hero-browser__dots i:nth-child(1) {background:#FF5F57}

.sp-homepage-v2 .hero-browser__dots i:nth-child(2) {background:#FEBC2E}

.sp-homepage-v2 .hero-browser__dots i:nth-child(3) {background:#28C840}

.sp-homepage-v2 .hero-browser__nav {display:flex;align-items:center;gap:14px;flex:none;color:#5F6672}

.sp-homepage-v2 .hero-browser__nav svg {width:15px;height:15px;display:block}

.sp-homepage-v2 .hero-browser__nav svg.fwd {color:#B4BAC4}

.sp-homepage-v2 .hero-browser__mid {flex:1;display:flex;align-items:center;gap:10px;justify-content:center;min-width:0}

.sp-homepage-v2 .hero-browser__mid>svg {width:15px;height:15px;flex:none;color:#3C4350}

.sp-homepage-v2 .hero-browser__url {flex:1;max-width:520px;align-self:center;height:26px;background:#EFF0F4;border-radius:9px;font-family:-apple-system,'Segoe UI',Jost,sans-serif;font-weight:400;font-size:12.5px;line-height:1;color:#1F2430;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:6px;position:relative}

.sp-homepage-v2 .hero-browser__url .lock {width:10px;height:10px;flex:none;color:#3C4350}

.sp-homepage-v2 .hero-browser__url .reload {position:absolute;right:9px;width:12px;height:12px;color:#5F6672}

.sp-homepage-v2 .hero-browser__acts {display:flex;align-items:center;gap:14px;flex:none;color:#5F6672}

.sp-homepage-v2 .hero-browser__acts svg {width:15px;height:15px;display:block}

.sp-homepage-v2 .hero-browser img {display:block;width:100%;height:auto;border-radius:0;box-shadow:none}

@media(max-width:640px) {

.sp-homepage-v2 .sp-btn--text { padding:12px 6px; }
}

/* ERP logo strip */

.sp-homepage-v2 .erp-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; align-items:center; margin-top:40px; }

.sp-homepage-v2 .erp-strip .erp-logo { height:64px; border-radius:14px; background:#fff; box-shadow:var(--sp-shadow-card); display:flex; align-items:center; justify-content:center; padding:12px; }

.sp-homepage-v2 .erp-strip .erp-logo img { max-height:34px; max-width:82%; width:auto; object-fit:contain; display:block; }

@media(max-width:900px) {

.sp-homepage-v2 .erp-strip { grid-template-columns:repeat(3,1fr); }
}

@media(max-width:520px) {

.sp-homepage-v2 .erp-strip { grid-template-columns:repeat(2,1fr); }
}

/* full-bleed blue hero panel — edge to edge, content centered */

.sp-homepage-v2 .hero-inset { padding-block: 0; }

.sp-homepage-v2 .hero-inset .sp-container { max-width: none; padding-inline: 0; }

.sp-homepage-v2 .hero-panel { border-radius:0; padding:72px 64px 72px; overflow:hidden; }

.sp-homepage-v2 .hero-panel .sp-hero__grid { grid-template-columns: 1fr; gap:8px; text-align:center; max-width:1240px; margin-inline:auto; }

.sp-homepage-v2 .hero-panel .sp-hero__title { font-size:clamp(36px,4.4vw,64px); line-height:1.06; font-weight:700; margin:0 auto 22px; max-width:22ch; overflow-wrap:break-word; text-wrap:balance; }

.sp-homepage-v2 .hero-panel .sp-hero__sub { max-width:56ch; margin:0 auto 30px; }

.sp-homepage-v2 .hero-panel .oauth-row { justify-content:center; }

.sp-homepage-v2 .hero-panel .sp-hero__actions { justify-content:center; }

.sp-homepage-v2 .hero-panel .sp-hero__media { width:100%; margin-top:48px; }

.sp-homepage-v2 .hero-panel .sp-hero__media img { display:block; margin-inline:auto;
    width:min(100%, 980px); aspect-ratio:1024 / 685; height:auto; object-fit:contain;
    border-radius:18px; box-shadow:0 40px 90px -30px rgba(6,10,45,.55); }

/* Google/Microsoft side-by-side on desktop */

.sp-homepage-v2 .oauth-row { display:flex; gap:14px; flex-wrap:wrap; }

.sp-homepage-v2 .hero-panel .sp-btn--white { padding-inline:24px; font-size:17px; }

/* hero CTA hierarchy: bold green primary that lifts off the blue, ghost secondary */

.sp-homepage-v2 .hero-cta-primary { background:#00BA70; color:#fff; font-weight:700; padding:18px 36px; font-size:18px;
    border:0; transition:all .16s ease;
    box-shadow:0 8px 18px -6px rgba(0,90,55,.50); }

.sp-homepage-v2 .hero-cta-primary:hover { background:#00A862; transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(0,90,55,.55); }

.sp-homepage-v2 .hero-cta-ghost { background:transparent; color:#fff; border:1.6px solid rgba(255,255,255,.55);
    padding:18px 30px; font-size:17px; transition:all .16s ease; }

.sp-homepage-v2 .hero-cta-ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }

.sp-homepage-v2 .hero-micro { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:20px 0 0; color:rgba(255,255,255,.82); font:var(--sp-body-sm); font-size:13px; }

.sp-homepage-v2 .hero-micro span { display:inline-flex; align-items:center; gap:7px; }

.sp-homepage-v2 .hero-micro svg { width:16px; height:16px; flex:none; color:#3FE0A0; }

.sp-homepage-v2 .hero-sso { display:flex; align-items:center; justify-content:center; gap:9px; margin:14px 0 0; color:rgba(255,255,255,.82); font:var(--sp-body-sm); font-size:13px; }

.sp-homepage-v2 .hero-sso__logos { display:inline-flex; align-items:center; gap:8px; }

.sp-homepage-v2 .hero-sso__logos svg { width:16px; height:16px; display:block; }

.sp-homepage-v2 .hero-sso__logos svg path { fill:#fff; }

.sp-homepage-v2 .hero-sso .micon { width:16px; height:16px; background:
     linear-gradient(#fff,#fff) 0 0/7px 7px no-repeat,
     linear-gradient(#fff,#fff) 9px 0/7px 7px no-repeat,
     linear-gradient(#fff,#fff) 0 9px/7px 7px no-repeat,
     linear-gradient(#fff,#fff) 9px 9px/7px 7px no-repeat; }

.sp-homepage-v2 .hero-oauth-lead { color:rgba(255,255,255,.82); font:var(--sp-body-sm); }

.sp-homepage-v2 .hero-panel .oauth-row .sp-btn--sm { font-size:15px; }

@media(max-width:900px) {

.sp-homepage-v2 .hero-panel { padding:36px 28px 32px; }

.sp-homepage-v2 .hero-panel .sp-hero__title { font-size:40px; line-height:1.2; font-weight:700; }

.sp-homepage-v2 .hero-panel .sp-hero__media { margin-top:28px; }

.sp-homepage-v2 .oauth-row { flex-wrap:wrap; justify-content:center; }
}

@media(max-width:600px) {

.sp-homepage-v2 .hero-panel { border-radius:0; padding:30px 22px 26px; }

.sp-homepage-v2 .hero-panel .sp-hero__title { font-size:36px; font-weight:700; }

.sp-homepage-v2 .hero-panel .sp-hero__media img { border-radius:12px; }
}

/* customer carousel band */

.sp-homepage-v2 .cust-band { text-align:center; }

.sp-homepage-v2 .cust-band__title { font-family:var(--sp-font-display); font-weight:700; font-size:22px; color:var(--sp-text); margin:0 0 32px; }

.sp-homepage-v2 .cust-logos { display:flex; flex-wrap:wrap; gap:32px 56px; align-items:center; justify-content:center; }

.sp-homepage-v2 .cust-logos img { height:44px; width:auto; max-width:150px; object-fit:contain; }

/* in-hero trust strip (mono-white logos on blue) */

.sp-homepage-v2 .hero-trust { margin-top:44px; text-align:center; }

.sp-homepage-v2 .hero-trust__t { font:var(--sp-body-sm); letter-spacing:.4px; color:rgba(255,255,255,.78); margin:0 0 20px; }

.sp-homepage-v2 .hero-trust__logos { display:flex; flex-wrap:wrap; gap:22px 46px; align-items:center; justify-content:center; }

.sp-homepage-v2 .hero-trust__logos img { height:30px; width:auto; max-width:128px; object-fit:contain;
    filter:brightness(0) invert(1); opacity:.82; }

/* hero secondary watch link */

.sp-homepage-v2 .hero-watch { display:inline-flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer; color:#fff; font-family:var(--sp-font-medium); font-weight:600; font-size:16px; padding:8px 4px; }

.sp-homepage-v2 .hero-watch__play { width:38px; height:38px; border-radius:50%; flex:none; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.42); display:inline-flex; align-items:center; justify-content:center; transition:background .16s ease, transform .16s ease; }

.sp-homepage-v2 .hero-watch__play svg { width:13px; height:13px; margin-left:2px; fill:#fff; }

.sp-homepage-v2 .hero-watch:hover .hero-watch__play { background:rgba(255,255,255,.24); transform:scale(1.06); }

.sp-homepage-v2 .hero-watch u { text-decoration:none; border-bottom:2px solid rgba(255,255,255,.4); padding-bottom:2px; }

.sp-homepage-v2 .hero-watch:hover u { border-color:#fff; }

/* product demo video block + lightbox */

.sp-homepage-v2 .vidblock { position:relative; max-width:1000px; margin:0 auto; border-radius:22px; overflow:hidden; box-shadow:0 40px 90px -36px rgba(6,10,45,.55); cursor:pointer; aspect-ratio:16/9; background:#0C1030; }

.sp-homepage-v2 .vidblock img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }

.sp-homepage-v2 .vidblock:hover img { transform:scale(1.03); }

.sp-homepage-v2 .vidblock__overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:radial-gradient(58% 58% at 50% 54%, rgba(12,16,48,.42), rgba(12,16,48,.04) 78%); }

.sp-homepage-v2 .vidblock__play { width:76px; height:76px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 34px -10px rgba(0,0,0,.5); transition:transform .16s ease; }

.sp-homepage-v2 .vidblock:hover .vidblock__play { transform:scale(1.08); }

.sp-homepage-v2 .vidblock__play svg { width:30px; height:30px; margin-left:4px; fill:var(--sp-blue); }

.sp-homepage-v2 .vidblock__label { color:#fff; font-family:var(--sp-font-display); font-weight:700; font-size:18px; text-shadow:0 2px 12px rgba(0,0,0,.45); }

.sp-homepage-v2 .vidblock__meta { color:rgba(255,255,255,.88); font:var(--sp-body-sm); font-size:13.5px; text-shadow:0 1px 8px rgba(0,0,0,.5); margin-top:-10px; }

.sp-homepage-v2 .vidblock__badge { position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; gap:6px; background:rgba(8,10,28,.72); color:#fff; font-family:var(--sp-font-medium); font-weight:600; font-size:13px; padding:6px 11px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

.sp-homepage-v2 .vidblock__badge svg { width:14px; height:14px; }

/* The design sized the box from width alone (`min(1040px,100%)` + 16/9), so on
   any short viewport the box grew taller than the screen and the close puck —
   which hangs above the box corner — was pushed out of the viewport. The box is
   therefore clamped on the vertical axis too: --sp-vidm-vgutter is the sum of
   the modal's top and bottom padding, which is the room reserved for the puck.
   `padding` stays symmetric so the box remains optically centred. */
.sp-homepage-v2 .vid-modal { position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:56px 24px; --sp-vidm-vgutter:112px; }

.sp-homepage-v2 .vid-modal.is-open { display:flex; }

.sp-homepage-v2 .vid-modal__scrim { position:absolute; inset:0; background:rgba(8,10,28,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* No `overflow:hidden` here: it clipped the close puck (only 30x30 of the 44px
   circle survived on desktop, and nothing at all below 520px). The iframe
   carries the rounded corners instead. */
.sp-homepage-v2 .vid-modal__box { position:relative; z-index:2; width:min(1040px,100%,calc((100vh - var(--sp-vidm-vgutter)) * 16 / 9)); width:min(1040px,100%,calc((100dvh - var(--sp-vidm-vgutter)) * 16 / 9)); aspect-ratio:16/9; border-radius:16px; background:#000; box-shadow:0 40px 100px -30px rgba(0,0,0,.8); }

.sp-homepage-v2 .vid-modal__box iframe { width:100%; height:100%; border:0; display:block; border-radius:16px; }

/* Logical inline-end so the puck mirrors to the top-left in RTL. */
.sp-homepage-v2 .vid-modal__close { position:absolute; top:-14px; inset-inline-end:-14px; z-index:3; width:44px; height:44px; border-radius:50%; border:0; background:#fff; color:#0E1230; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.5); }

.sp-homepage-v2 .vid-modal__close svg { width:22px; height:22px; }

@media(max-width:520px) {

.sp-homepage-v2 .vid-modal { padding:64px 20px; --sp-vidm-vgutter:128px; }

.sp-homepage-v2 .vid-modal__close { top:-50px; inset-inline-end:0; }
}

@media(max-width:600px) {

.sp-homepage-v2 .hero-trust__logos { gap:18px 30px; }

.sp-homepage-v2 .hero-trust__logos img { height:24px; }
}

/* Core capabilities */

.sp-homepage-v2 .capx__grid {display:grid;grid-template-columns:repeat(6,1fr);gap:22px}

.sp-homepage-v2 .capx__card {grid-column:span 2;background:#fff;border:1px solid var(--sp-border);border-radius:20px;box-shadow:var(--sp-shadow-card);display:flex;flex-direction:column;overflow:hidden}

.sp-homepage-v2 .capx__card--wide {grid-column:span 3}

.sp-homepage-v2 .capx__body {padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}

.sp-homepage-v2 .capx__body h3 {font-family:var(--sp-font-display);font-weight:700;font-size:20px;line-height:1.28;margin:0;color:var(--sp-text)}

.sp-homepage-v2 .capx__body p {font:var(--sp-body-sm);color:var(--sp-text-muted);margin:0}

.sp-homepage-v2 .capx__link {margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font-family:var(--sp-font-medium);font-weight:700;font-size:14px;color:var(--sp-blue);text-decoration:none}

.sp-homepage-v2 .capx__link:hover {text-decoration:underline}

.sp-homepage-v2 .capx__link svg {width:15px;height:15px;flex:none}

.sp-homepage-v2 .capx__vig {position:relative;height:176px;background:#F4F7FC;border-bottom:1px solid var(--sp-border);overflow:hidden;flex:none}

.sp-homepage-v2 .capx__vig img {width:100%;height:100%;object-fit:cover;display:block}

.sp-homepage-v2 .capx__devs {position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:16px}

.sp-homepage-v2 .capx-tab {position:relative;width:158px;background:linear-gradient(155deg,#232844,#0c0e1c);border-radius:14px;padding:6px;box-shadow:0 18px 40px rgba(8,11,45,.34);transform:translateY(6px)}

.sp-homepage-v2 .capx-tab span {display:block;position:relative;aspect-ratio:1692/1964;border-radius:8px;overflow:hidden;background:#fff}

.sp-homepage-v2 .capx-phone {position:relative;width:78px;margin-left:-26px;z-index:2;background:linear-gradient(155deg,#232844,#0c0e1c);border-radius:16px;padding:4px;box-shadow:0 14px 30px rgba(8,11,45,.42);transform:translateY(24px)}

.sp-homepage-v2 .capx-phone span {display:block;position:relative;aspect-ratio:1162/1964;border-radius:13px;overflow:hidden;background:#fff}

.sp-homepage-v2 .capx__devs img {position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}

@media(max-width:1080px) {

.sp-homepage-v2 .capx__card {grid-column:span 3}

.sp-homepage-v2 .capx__card--wide {grid-column:span 6}
}

@media(max-width:640px) {

.sp-homepage-v2 .capx__card,
.sp-homepage-v2 .capx__card--wide {grid-column:span 6}
}

/* Assisted onboarding cards */

.sp-homepage-v2 .onb-eyebrow {display:inline-flex;align-items:center;gap:9px;font-family:var(--sp-font-medium);font-weight:600;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--sp-blue);margin:0 0 14px}

.sp-homepage-v2 .onb-head {max-width:760px;margin:0 auto;text-align:center}

.sp-homepage-v2 .onb-head p {font:var(--sp-body-lg);color:var(--sp-text-muted);margin:14px 0 0}

.sp-homepage-v2 .onb-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}

@media(max-width:900px) {

.sp-homepage-v2 .onb-grid {grid-template-columns:1fr}
}

.sp-homepage-v2 .onb-card {display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--sp-border);border-radius:20px;box-shadow:var(--sp-shadow-card);overflow:hidden;min-height:240px}

@media(max-width:560px) {

.sp-homepage-v2 .onb-card {grid-template-columns:1fr}
}

.sp-homepage-v2 .onb-card__txt {padding:26px 26px 24px;display:flex;flex-direction:column;justify-content:center;gap:10px}

.sp-homepage-v2 .onb-card__txt h3 {font-family:var(--sp-font-display);font-weight:700;font-size:20px;line-height:1.25;color:var(--sp-text);margin:0}

.sp-homepage-v2 .onb-card__txt p {font:var(--sp-body-sm);color:var(--sp-text-muted);margin:0}

.sp-homepage-v2 .onb-vig {position:relative;background:var(--sp-surface-blue);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;overflow:hidden}

.sp-homepage-v2 .onb-chip {display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--sp-border);border-radius:999px;padding:6px 12px;font-family:var(--sp-font-medium);font-weight:600;font-size:12px;color:var(--sp-text);box-shadow:0 6px 14px -8px rgba(6,10,45,.25);max-width:100%;text-align:center}

.sp-homepage-v2 .onb-chip svg {width:13px;height:13px;flex:none;color:var(--sp-green)}

.sp-homepage-v2 .onb-chip--green {background:var(--sp-surface-green);border-color:transparent;color:#00824E}

/* expert vignette */

.sp-homepage-v2 .onb-expert {display:flex;flex-direction:column;align-items:center;gap:9px}

.sp-homepage-v2 .onb-avatar {position:relative;width:64px;height:64px;border-radius:50%;background:#D7DEE9;box-shadow:0 8px 18px -8px rgba(6,10,45,.3)}

.sp-homepage-v2 .onb-avatar::after {content:"";position:absolute;right:2px;bottom:2px;width:13px;height:13px;border-radius:50%;background:var(--sp-green);border:2.5px solid #fff}

.sp-homepage-v2 .onb-avatar svg {position:absolute;inset:0;width:100%;height:100%;border-radius:50%;color:#AAB6C6}

.sp-homepage-v2 .onb-avatar img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

.sp-homepage-v2 .onb-expert i {font-style:normal;font-family:var(--sp-font-medium);font-weight:700;font-size:12px;color:var(--sp-text)}

/* production model map vignette */

.sp-homepage-v2 .onb-map {display:flex;flex-direction:column;align-items:center;width:100%;max-width:260px}

.sp-homepage-v2 .onb-map__srcs {display:flex;flex-wrap:wrap;gap:6px;width:100%;justify-content:center}

.sp-homepage-v2 .onb-map__srcs span {display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--sp-border);border-radius:999px;padding:4px 9px;font-family:var(--sp-font-medium);font-weight:600;font-size:10px;color:var(--sp-text);box-shadow:0 4px 10px -6px rgba(6,10,45,.25);white-space:nowrap}

.sp-homepage-v2 .onb-map__srcs svg {width:12px;height:12px;flex:none;color:var(--sp-blue)}

.sp-homepage-v2 .onb-map__lines {width:200px;height:30px;display:block}

.sp-homepage-v2 .onb-map__dst {width:54px;height:54px;border-radius:16px;background:var(--sp-blue);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -10px rgba(48,58,242,.6)}

.sp-homepage-v2 .onb-map__dst img {width:34px;height:auto;display:block}

/* erp vignette */

.sp-homepage-v2 .onb-erp {position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:210px}

.sp-homepage-v2 .onb-erp span {background:#fff;border:1px solid var(--sp-border);border-radius:12px;height:44px;display:flex;align-items:center;justify-content:center;padding:8px}

.sp-homepage-v2 .onb-erp img {max-height:20px;max-width:74%;width:auto;object-fit:contain;display:block}

.sp-homepage-v2 .onb-cursor {position:absolute;right:-8px;bottom:-6px;width:28px;height:28px;filter:drop-shadow(0 3px 6px rgba(6,10,45,.4))}

/* checklist vignette */

.sp-homepage-v2 .onb-check {width:100%;max-width:230px;background:#fff;border:1px solid var(--sp-border);border-radius:14px;padding:14px 16px;box-shadow:0 10px 24px -14px rgba(6,10,45,.3)}

.sp-homepage-v2 .onb-check b {display:block;font-family:var(--sp-font-medium);font-weight:700;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--sp-text-muted);margin-bottom:10px}

.sp-homepage-v2 .onb-check div {display:flex;align-items:center;gap:8px;font-family:var(--sp-font-medium);font-weight:600;font-size:12px;color:var(--sp-text);padding:5px 0}

.sp-homepage-v2 .onb-check svg {width:14px;height:14px;flex:none;color:var(--sp-green)}

.sp-homepage-v2 .onb-check s {flex:1;height:5px;border-radius:3px;background:#E4EAF2;text-decoration:none;position:relative;overflow:hidden;margin-left:auto;max-width:64px}

.sp-homepage-v2 .onb-check s i {position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--sp-green)}

.sp-homepage-v2 .onb-check em {font-style:normal;font-size:11px;color:var(--sp-text-muted)}

.sp-homepage-v2 .onb-links {display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;margin-top:40px}

/* Arcturus signature section */

.sp-homepage-v2 .arcx { display:grid; grid-template-columns:1.02fr 1.04fr; gap:56px; align-items:center; }

@media(max-width:980px) {

.sp-homepage-v2 .arcx { grid-template-columns:1fr; gap:36px; }
}

.sp-homepage-v2 .arcx__eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--sp-font-medium); font-weight:600; font-size:13px; letter-spacing:1.4px; text-transform:uppercase; color:var(--sp-blue); margin:0 0 16px; }

.sp-homepage-v2 .arcx__eyebrow svg { width:17px; height:17px; }

.sp-homepage-v2 .arcx h2 { font-family:var(--sp-font-display); font-weight:800; font-size:clamp(38px,4vw,58px); line-height:1.02; color:var(--sp-text); margin:0 0 18px; }

.sp-homepage-v2 .arcx h2 u { text-decoration-color:var(--sp-blue); text-underline-offset:6px; text-decoration-thickness:4px; }

.sp-homepage-v2 .arcx__lead { font:var(--sp-body-lg); color:var(--sp-text-muted); margin:0; max-width:48ch; }

.sp-homepage-v2 .arcx__stats { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.sp-homepage-v2 .arcx__stat { background:#fff; border:1px solid var(--sp-border); border-radius:14px; padding:14px 18px; min-width:104px; }

.sp-homepage-v2 .arcx__stat b { display:block; font-family:var(--sp-font-display); font-weight:800; font-size:24px; color:var(--sp-blue); line-height:1; margin-bottom:5px; }

.sp-homepage-v2 .arcx__stat span { font:var(--sp-body-sm); font-size:13px; color:var(--sp-text-muted); }

.sp-homepage-v2 .arcx__facts {list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}

.sp-homepage-v2 .arcx__facts li {display:flex;align-items:baseline;gap:9px;font:var(--sp-body-sm);color:var(--sp-text)}

.sp-homepage-v2 .arcx__facts svg {width:15px;height:15px;flex:none;color:var(--sp-green);transform:translateY(2px)}

/* media + flow */

.sp-homepage-v2 .arcx__media img { width:100%; max-width:520px; display:block; border-radius:20px; box-shadow:0 30px 70px -32px rgba(6,10,45,.5); }

/* Arcturus event feed */

.sp-homepage-v2 .arcfeed {position:relative;width:100%;max-width:480px;margin-inline:auto;background:#fff;border:1px solid var(--sp-border);border-radius:24px;box-shadow:var(--sp-shadow-card);padding:26px 26px 28px;display:flex;flex-direction:column;gap:18px}

.sp-homepage-v2 .arcfeed::before {content:"";position:absolute;left:40px;top:44px;bottom:44px;width:2px;background:#E3E9F2}

.sp-homepage-v2 .arcfeed__step {position:relative;display:grid;grid-template-columns:30px 1fr;column-gap:14px}

.sp-homepage-v2 .arcfeed__dot {position:relative;z-index:1;width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #C9D6F5;display:flex;align-items:center;justify-content:center;font-family:var(--sp-font-display);font-weight:800;font-size:13px;color:var(--sp-blue);align-self:start}

.sp-homepage-v2 .arcfeed__card {background:#F7F9FC;border:1px solid var(--sp-border);border-radius:14px;padding:13px 15px}

.sp-homepage-v2 .arcfeed__row {display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.sp-homepage-v2 .arcfeed__row svg {width:16px;height:16px;flex:none;color:#5F6672}

.sp-homepage-v2 .arcfeed__row b {font-family:var(--sp-font-medium);font-weight:700;font-size:14px;color:var(--sp-text)}

.sp-homepage-v2 .arcfeed__chip {margin-left:auto;flex:none;background:#E7EBF1;color:#454C58;border-radius:20px;padding:2px 9px;font-family:var(--sp-font-medium);font-weight:600;font-size:11px;white-space:nowrap}

.sp-homepage-v2 .arcfeed__card--ai {background:var(--sp-surface-blue);border-color:#C9D6F5}

.sp-homepage-v2 .arcfeed__card--ai .arcfeed__row svg {color:var(--sp-blue)}

.sp-homepage-v2 .arcfeed__card--ai .arcfeed__chip {background:var(--sp-blue);color:#fff}

.sp-homepage-v2 .arcfeed__kwrap {display:flex;justify-content:center;margin:2px 0 12px}

.sp-homepage-v2 .kbtn {display:inline-flex;align-items:stretch;background:#fff;border-radius:999px;box-shadow:0 1px 3px rgba(20,23,58,.18),inset 0 0 0 1px rgba(20,23,58,.06);font-family:var(--sp-font-body);user-select:none}

.sp-homepage-v2 .kbtn__main {display:flex;align-items:center;gap:8px;padding:9px 15px}

.sp-homepage-v2 .kbtn__crown {width:22px;height:18px;display:block;flex:none}

.sp-homepage-v2 .kbtn__crown svg {width:100%;height:100%;display:block}

.sp-homepage-v2 .kbtn__label {font-size:15px;line-height:1;color:#3B4252;white-space:nowrap}

.sp-homepage-v2 .kbtn__sep {width:1px;background:#E4E8F2;margin:7px 0;flex:none}

.sp-homepage-v2 .kbtn__time {display:flex;align-items:center;gap:6px;padding:0 13px}

.sp-homepage-v2 .kbtn__clock {width:17px;height:17px;color:var(--sp-blue);flex:none}

.sp-homepage-v2 .kbtn__spin {width:10px;height:14px;color:#5A6072;flex:none}

.sp-homepage-v2 .kbtn__clock svg,
.sp-homepage-v2 .kbtn__spin svg {width:100%;height:100%;display:block}

.sp-homepage-v2 .arcgantt {position:relative;margin-top:12px;background:#fff;border:1px solid #D7E4FB;border-radius:10px;overflow:hidden;padding-bottom:2px}

.sp-homepage-v2 .arcgantt__head {display:grid;grid-template-columns:76px 1fr;align-items:center;height:18px;border-bottom:1px solid #EDF2FA;background:#F7F9FC}

.sp-homepage-v2 .arcgantt__times {position:relative;height:100%;font-family:var(--sp-font-medium);font-weight:600;font-size:8px;color:#8A93A3}

.sp-homepage-v2 .arcgantt__times b {position:absolute;top:50%;transform:translate(-50%,-50%);font-weight:600}

.sp-homepage-v2 .arcgantt__lane {display:grid;grid-template-columns:76px 1fr;align-items:center;height:24px;border-bottom:1px solid #EDF2FA}

.sp-homepage-v2 .arcgantt__lane:last-child {border-bottom:0}

.sp-homepage-v2 .arcgantt__rl {font-family:var(--sp-font-medium);font-weight:600;font-size:9px;color:#454C58;padding-left:8px;white-space:nowrap;overflow:hidden}

.sp-homepage-v2 .arcgantt__tr {position:relative;height:100%}

.sp-homepage-v2 .arcgantt__bar {position:absolute;top:50%;transform:translateY(-50%);height:14px;border-radius:4px;background:var(--sp-green);display:flex;align-items:center;padding:0 3px;gap:3px}

.sp-homepage-v2 .arcgantt__bar em {font-style:normal;background:#1F2430;color:#fff;border-radius:3px;padding:0 4px;font-family:var(--sp-font-medium);font-weight:600;font-size:7.5px;line-height:10px;white-space:nowrap}

.sp-homepage-v2 .arcgantt__bar--broken {background:#FBE9EA;border:1.5px solid #D9464F}

.sp-homepage-v2 .arcgantt__bar--broken em {background:#D9464F}

.sp-homepage-v2 .arcgantt__warn {width:9px;height:9px;flex:none;color:#D9464F}

.sp-homepage-v2 .arcgantt__lock {width:8px;height:8px;flex:none;color:#fff;opacity:.9}

.sp-homepage-v2 .arcgantt__ghost {position:absolute;top:50%;transform:translateY(-50%);height:14px;border-radius:4px;border:1.2px dashed #9FB3E8;background:transparent}

.sp-homepage-v2 .arcgantt__mvarrow {position:absolute;color:#5F6672}

.sp-homepage-v2 .arcgantt__now {position:absolute;top:18px;bottom:0;width:1.5px;background:#D9464F;opacity:.85;z-index:2}

.sp-homepage-v2 .arcgantt__now::before {content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);border:3.5px solid transparent;border-top-color:#D9464F}

.sp-homepage-v2 .arcfeed__btns {display:flex;align-items:center;gap:10px;margin-top:2px}

.sp-homepage-v2 .arcfeed__btn {display:inline-flex;align-items:center;border-radius:35px;padding:8px 18px;font-family:var(--sp-font-medium);font-weight:700;font-size:13px;cursor:default}

.sp-homepage-v2 .arcfeed__btn--pri {background:var(--sp-green);color:#fff;box-shadow:0 8px 18px -8px rgba(0,186,112,.6)}

.sp-homepage-v2 .arcfeed__btn--sec {border:1.5px solid var(--sp-border);color:var(--sp-text);background:#fff}

.sp-homepage-v2 .arcfeed__cap {font:var(--sp-body-sm);font-size:12.5px;color:var(--sp-text-muted);margin:8px 0 0}

.sp-homepage-v2 .arcflow { margin-top:18px; background:#fff; border:1px solid var(--sp-border); border-radius:18px; padding:18px 20px; }

.sp-homepage-v2 .arcflow__row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.sp-homepage-v2 .arcflow__inputs { display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0; }

.sp-homepage-v2 .arcchip { font-family:var(--sp-font-medium); font-weight:600; font-size:12px; padding:6px 11px; border-radius:999px; color:var(--sp-text); white-space:nowrap; }

.sp-homepage-v2 .arcchip--in { background:var(--sp-surface-blue); }

.sp-homepage-v2 .arcflow__arrow { color:var(--sp-blue); flex:none; display:flex; }

.sp-homepage-v2 .arcflow__arrow svg { width:20px; height:20px; }

.sp-homepage-v2 .arcflow__engine { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px; background:linear-gradient(90deg,#303AF2,#5663FF); color:#fff; font-family:var(--sp-font-medium); font-weight:700; font-size:13px; flex:none; box-shadow:0 10px 22px -8px rgba(48,58,242,.6); }

.sp-homepage-v2 .arcflow__engine svg { width:15px; height:15px; }

.sp-homepage-v2 .arcflow__out { margin-top:12px; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background:var(--sp-surface-green); }

.sp-homepage-v2 .arcflow__out svg { width:20px; height:20px; color:#00824E; flex:none; }

.sp-homepage-v2 .arcflow__out b { display:block; font-family:var(--sp-font-medium); font-weight:700; font-size:14px; color:#0A3D26; }

.sp-homepage-v2 .arcflow__out span { font:var(--sp-body-sm); font-size:12.5px; color:#1A6B45; display:block; }

/* benefits 3-up */

.sp-homepage-v2 .arcben { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }

@media(max-width:900px) {

.sp-homepage-v2 .arcben { grid-template-columns:1fr; gap:16px; }
}

.sp-homepage-v2 .arcben__item { background:#fff; border:1px solid var(--sp-border); border-radius:var(--sp-radius-lg); padding:28px 26px; }

.sp-homepage-v2 .arcben__ico { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }

.sp-homepage-v2 .arcben__ico svg { width:23px; height:23px; color:#fff; }

.sp-homepage-v2 .arcben__item:nth-child(1) .arcben__ico { background:var(--sp-blue); }

.sp-homepage-v2 .arcben__item:nth-child(2) .arcben__ico { background:var(--sp-green); }

.sp-homepage-v2 .arcben__item:nth-child(3) .arcben__ico { background:#E8963C; }

.sp-homepage-v2 .arcben__item h4 { font-family:var(--sp-font-display); font-weight:700; font-size:20px; color:var(--sp-text); margin:0 0 8px; }

.sp-homepage-v2 .arcben__item p { font:var(--sp-body); color:var(--sp-text-muted); margin:0; }

.sp-homepage-v2 .arcben__item p .src { display:block; margin-top:8px; font-size:12.5px; color:var(--sp-text-muted); opacity:.8; }

.sp-homepage-v2 .meet-media img { width:100%; max-width:460px; display:block; margin-inline:auto; }

/* feature switcher (accordion + sticky image) */

.sp-homepage-v2 .feat-wrap { display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:start; }

@media(max-width:900px) {

.sp-homepage-v2 .feat-wrap { grid-template-columns:1fr; }
}

.sp-homepage-v2 .acc { display:flex; flex-direction:column; gap:16px; }

.sp-homepage-v2 .acc__item { background:#fff; border-radius:var(--sp-radius-lg); box-shadow:var(--sp-shadow-card); overflow:hidden; }

.sp-homepage-v2 .acc__q { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; cursor:pointer; font-family:var(--sp-font-display); font-weight:700; font-size:20px; color:var(--sp-text); }

.sp-homepage-v2 .acc__q .chev { width:30px; height:30px; border-radius:50%; background:var(--sp-surface-blue); color:var(--sp-blue); display:flex; align-items:center; justify-content:center; flex:none; transition:transform .2s; font-size:18px; }

.sp-homepage-v2 .acc__body { max-height:0; overflow:hidden; transition:max-height .28s ease; }

.sp-homepage-v2 .acc__body-inner { padding:0 26px 24px; }

.sp-homepage-v2 .acc__body-inner p { font:var(--sp-body); color:var(--sp-text-muted); margin:0 0 18px; }

.sp-homepage-v2 .acc__cta { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; }

.sp-homepage-v2 .acc__links { display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; }

.sp-homepage-v2 .acc__links a { color:var(--sp-ink); text-decoration:underline; text-underline-offset:4px; font:var(--sp-body-sm); }

.sp-homepage-v2 .acc__links a:hover { color:var(--sp-blue); }

.sp-homepage-v2 .acc__more { display:inline-flex; align-items:center; gap:6px; margin-top:4px; color:var(--sp-blue); text-decoration:none; font:var(--sp-body-sm); font-family:var(--sp-font-medium); font-weight:600; }

.sp-homepage-v2 .acc__more:hover { text-decoration:underline; text-underline-offset:3px; }

.sp-homepage-v2 .acc__item.is-open .acc__body { max-height:280px; }

.sp-homepage-v2 .acc__item.is-open .acc__q .chev { transform:rotate(90deg); }

.sp-homepage-v2 .feat-media { align-self:center; }

/* feature tabs + large product stage */

.sp-homepage-v2 .feat-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }

.sp-homepage-v2 .feat-tab { appearance:none; cursor:pointer; border:1px solid var(--sp-border); background:#fff; color:var(--sp-text);
    font-family:var(--sp-font-display); font-weight:700; font-size:16px; padding:11px 19px; border-radius:999px;
    transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }

.sp-homepage-v2 .feat-tab:hover { border-color:#C9D6F5; }

.sp-homepage-v2 .feat-tab.is-active { background:var(--sp-blue); border-color:var(--sp-blue); color:#fff; box-shadow:0 8px 20px -8px rgba(48,58,242,.5); }

.sp-homepage-v2 .feat-shotwrap { position:relative; border-radius:var(--sp-radius-lg); overflow:hidden; border:1px solid var(--sp-border);
    box-shadow:var(--sp-shadow-soft); background:#F4F8FD; aspect-ratio:16/10; }

.sp-homepage-v2 .feat-shotwrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .25s ease; }

.sp-homepage-v2 .feat-shotwrap img.is-active { opacity:1; }

.sp-homepage-v2 .feat-cap { margin:20px auto 0; max-width:74ch; text-align:center; }

.sp-homepage-v2 .feat-cap p { display:none; margin:0; font:var(--sp-body-lg); color:var(--sp-text-muted); }

.sp-homepage-v2 .feat-cap p.is-active { display:block; }

@media(max-width:600px) {

.sp-homepage-v2 .feat-tab { font-size:14px; padding:9px 15px; }

.sp-homepage-v2 .feat-shotwrap { aspect-ratio:4/3; }
}

.sp-homepage-v2 .feat-media img { width:100%; height:auto; border-radius:var(--sp-radius-lg); box-shadow:var(--sp-shadow-soft); display:none; }

.sp-homepage-v2 .feat-media img.is-active { display:block; }

@media(max-width:900px) {

.sp-homepage-v2 .feat-media { display:none; }
}

/* request a meeting */

.sp-homepage-v2 .req-wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }

@media(max-width:900px) {

.sp-homepage-v2 .req-wrap { grid-template-columns:1fr; }
}

.sp-homepage-v2 .req-wrap img { width:100%; height:auto; display:block; }

/* problems grid */

.sp-homepage-v2 .prob-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }

@media(max-width:900px) {

.sp-homepage-v2 .prob-grid { grid-template-columns:1fr 1fr; }
}

@media(max-width:520px) {

.sp-homepage-v2 .prob-grid { grid-template-columns:1fr; }
}

.sp-homepage-v2 .prob h5 { font-family:var(--sp-font-display); font-weight:700; font-size:18px; margin:14px 0 7px; color:var(--sp-text); }

.sp-homepage-v2 .prob__ill { width:64px; height:64px; object-fit:contain; display:block; }

.sp-homepage-v2 .prob p { font:var(--sp-body-sm); color:var(--sp-text-muted); margin:0; }

/* problem -> result pairs (photo cards 2x2) */

.sp-homepage-v2 .pr-rows { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

@media(max-width:760px) {

.sp-homepage-v2 .pr-rows { grid-template-columns:1fr; }
}

.sp-homepage-v2 .pr-row { background:#fff; border:1px solid var(--sp-border); border-radius:20px; box-shadow:var(--sp-shadow-card); overflow:hidden; display:flex; flex-direction:column; }

.sp-homepage-v2 .pr-photo { position:relative; height:216px; flex:none; }

.sp-homepage-v2 .pr-photo img { width:100%; height:100%; object-fit:cover; display:block; }

.sp-homepage-v2 .pr-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,14,40,0) 55%,rgba(10,14,40,.38)); }

.sp-homepage-v2 .pr-photo .pr-chip { position:absolute; left:18px; bottom:16px; z-index:2; box-shadow:0 8px 18px -6px rgba(6,10,45,.4); }

.sp-homepage-v2 .pr-logo { position:absolute; right:18px; bottom:16px; z-index:2; background:#fff; border-radius:12px; padding:8px 12px; box-shadow:0 8px 18px -6px rgba(6,10,45,.35); display:flex; align-items:center; }

.sp-homepage-v2 .pr-logo img { height:34px; width:150px; object-fit:contain; display:block; }

.sp-homepage-v2 .pr-body { padding:22px 26px 24px; display:flex; flex-direction:column; flex:1; }

.sp-homepage-v2 .pr-arrow { display:none; }

.sp-homepage-v2 .pr-tag { margin:0; display:inline-flex; align-items:center; gap:7px; font-family:var(--sp-font-medium); font-weight:600; font-size:11px; letter-spacing:.9px; text-transform:uppercase; color:#C2761B; background:var(--sp-surface-orange); padding:5px 11px; border-radius:999px; }

.sp-homepage-v2 .pr-tag::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

.sp-homepage-v2 .pr-problem { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-bottom:18px; }

.sp-homepage-v2 .pr-problem h3 { font-family:var(--sp-font-display); font-weight:700; font-size:20px; line-height:1.25; color:var(--sp-text); margin:0; }

.sp-homepage-v2 .pr-problem p { font:var(--sp-body-sm); color:var(--sp-text-muted); margin:0; }

.sp-homepage-v2 .pr-problem p b { font-family:var(--sp-font-medium); font-weight:700; font-size:11px; letter-spacing:.9px; text-transform:uppercase; color:#C2761B; margin-right:2px; }

.sp-homepage-v2 .pr-result { border-top:1px solid var(--sp-border); padding-top:16px; margin-top:0; flex:1; display:flex; flex-direction:column; gap:10px; }

.sp-homepage-v2 .pr-chip { display:inline-flex; align-items:center; gap:7px; font-family:var(--sp-font-medium); font-weight:700; font-size:12.5px; color:#00824E; background:var(--sp-surface-green); padding:6px 12px; border-radius:999px; }

.sp-homepage-v2 .pr-chip svg { width:14px; height:14px; }

.sp-homepage-v2 .pr-result__q { font-family:var(--sp-font-display); font-weight:500; font-size:15.5px; line-height:1.45; color:var(--sp-text); margin:0; }

.sp-homepage-v2 .pr-result__by { font:var(--sp-caption); color:var(--sp-text-muted); margin:0; }

.sp-homepage-v2 .pr-result__by b { font-family:var(--sp-font-display); font-weight:700; color:var(--sp-text); }

.sp-homepage-v2 .pr-foot { display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; justify-content:space-between; margin-top:30px; }

.sp-homepage-v2 .pr-foot .note { font:var(--sp-caption); color:var(--sp-text-muted); margin:0; }

.sp-homepage-v2 .pr-foot a { font-family:var(--sp-font-medium); font-weight:600; color:var(--sp-blue); text-decoration:none; white-space:nowrap; }

/* newsletter */

.sp-homepage-v2 .news-wrap { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }

@media(max-width:820px) {

.sp-homepage-v2 .news-wrap { grid-template-columns:1fr; }
}

.sp-homepage-v2 .news-art { aspect-ratio:652/377; border-radius:var(--sp-radius-lg); background:linear-gradient(135deg,var(--sp-surface-blue),var(--sp-surface-purple)); }

/* testimonial quote band */

.sp-homepage-v2 .quote-band { text-align:center; }

.sp-homepage-v2 .quote-band .q { font-family:var(--sp-font-display); font-weight:700; font-size:34px; line-height:1.3; color:#fff; max-width:18ch; margin:0 auto 22px; }

@media(max-width:600px) {

.sp-homepage-v2 .quote-band .q { font-size:24px; }
}

.sp-homepage-v2 .quote-band .who { color:rgba(255,255,255,.85); font:var(--sp-body); margin:0 0 26px; }

/* quote wall (multi-testimonial, light) */

.sp-homepage-v2 .qwall__head { text-align:center; max-width:720px; margin:0 auto 46px; }

.sp-homepage-v2 .qwall__eyebrow { display:inline-block; font-family:var(--sp-font-medium); font-weight:600; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--sp-blue); margin:0 0 14px; }

.sp-homepage-v2 .qwall__head h2 { color:var(--sp-text); font-family:var(--sp-font-display); font-weight:800; font-size:clamp(30px,3.2vw,46px); line-height:1.08; margin:0 0 14px; }

.sp-homepage-v2 .qwall__head p { color:var(--sp-text-muted); font:var(--sp-body); margin:0; }

.sp-homepage-v2 .qwall__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; }

@media(max-width:980px) {

.sp-homepage-v2 .qwall__grid { grid-template-columns:1fr 1fr; }
}

@media(max-width:560px) {

.sp-homepage-v2 .qwall__grid { grid-template-columns:1fr; }
}

.sp-homepage-v2 .qcard { background:#fff; border:1px solid var(--sp-border); border-radius:20px; padding:26px 24px; display:flex; flex-direction:column; text-align:left; box-shadow:var(--sp-shadow-card); }

.sp-homepage-v2 .qcard__logo { height:30px; width:auto; max-width:128px; object-fit:contain; object-position:left center; display:block; margin-bottom:20px; }

.sp-homepage-v2 .qcard__metric { font-family:var(--sp-font-display-xb); font-weight:800; font-size:30px; line-height:1; color:var(--sp-blue); letter-spacing:-1px; }

.sp-homepage-v2 .qcard__metric span { display:block; font-family:var(--sp-font-body); font-weight:400; font-size:12.5px; letter-spacing:.2px; color:var(--sp-text-muted); margin-top:6px; }

.sp-homepage-v2 .qcard__q { font-family:var(--sp-font-display); font-weight:500; font-size:16px; line-height:1.45; color:var(--sp-text); margin:18px 0 0; flex:1; }

.sp-homepage-v2 .qcard__by { margin-top:18px; padding-top:16px; border-top:1px solid var(--sp-border); }

.sp-homepage-v2 .qcard__by b { display:block; font-family:var(--sp-font-display); font-weight:700; font-size:14.5px; color:var(--sp-text); }

.sp-homepage-v2 .qcard__by span { font:var(--sp-caption); color:var(--sp-text-muted); }

.sp-homepage-v2 .qwall__foot { text-align:center; margin-top:38px; }

.sp-homepage-v2 .qwall__note { color:var(--sp-text-muted); font:var(--sp-caption); margin:0 0 18px; }

/* pricing teaser */

.sp-homepage-v2 .price-teaser { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }

@media(max-width:820px) {

.sp-homepage-v2 .price-teaser { grid-template-columns:1fr; }
}

.sp-homepage-v2 .price-teaser__art { aspect-ratio:1/1; max-width:360px; margin-inline:auto; border-radius:50%; background:radial-gradient(circle at 50% 40%, var(--sp-surface-blue), #fff 70%); display:flex; align-items:center; justify-content:center; }

.sp-homepage-v2 .price-teaser__art .big { font-family:var(--sp-font-display-xb); font-weight:800; font-size:64px; color:var(--sp-blue); }

/* customer cards */

.sp-homepage-v2 .cust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

@media(max-width:900px) {

.sp-homepage-v2 .cust-grid { grid-template-columns:1fr; }
}

.sp-homepage-v2 .cust-card { background:#fff; border-radius:var(--sp-radius-lg); box-shadow:var(--sp-shadow-card); padding:28px; }

.sp-homepage-v2 .cust-card h4 { font-family:var(--sp-font-display); font-weight:700; font-size:20px; margin:0 0 2px; color:var(--sp-text); }

.sp-homepage-v2 .cust-card .role { font:var(--sp-body-sm); color:var(--sp-blue); margin:0 0 14px; }

.sp-homepage-v2 .cust-card p { font:var(--sp-body-sm); color:var(--sp-text-muted); margin:0 0 18px; }

.sp-homepage-v2 .cust-card__img { width:100%; aspect-ratio:906/522; border-radius:var(--sp-radius-md); background:var(--sp-surface-blue) center/cover; }

/* compare approaches */

.sp-homepage-v2 .cmp-sec h2 u {text-decoration-color:var(--sp-blue);text-underline-offset:6px;text-decoration-thickness:4px}

.sp-homepage-v2 .cmp-table {display:grid;grid-template-columns:172px repeat(3,1fr);column-gap:8px;grid-template-rows:minmax(84px,auto) repeat(7,minmax(72px,auto));margin-top:72px}

.sp-homepage-v2 .cmp-col {display:grid;grid-template-rows:subgrid;grid-row:1/9}

.sp-homepage-v2 .cmp-col--sky {position:relative;z-index:1}

.sp-homepage-v2 .cmp-col--sky::before {content:"";position:absolute;inset:-30px -12px;background:var(--sp-surface-blue);border-radius:24px;box-shadow:0 18px 34px -20px rgba(48,58,242,.4);z-index:-1}

.sp-homepage-v2 .cmp-colhead {display:flex;align-items:center;padding:0 20px;font-family:var(--sp-font-display);font-weight:700;font-size:17.5px;color:var(--sp-text);border-bottom:1px solid var(--sp-border)}

.sp-homepage-v2 .cmp-col--sky .cmp-colhead img {height:26px;width:auto;display:block}

.sp-homepage-v2 .cmp-lab {display:flex;align-items:center;padding:0 24px 0 0;font-family:var(--sp-font-medium);font-weight:600;font-size:15px;line-height:1.35;color:var(--sp-text);border-bottom:1px solid var(--sp-border)}

.sp-homepage-v2 .cmp-cell {display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--sp-border);font:var(--sp-body-sm);line-height:1.45;color:var(--sp-text)}

.sp-homepage-v2 .cmp-col--sky .cmp-colhead,
.sp-homepage-v2 .cmp-col--sky .cmp-cell {border-bottom-color:#D7E4FB}

.sp-homepage-v2 .cmp-col>:last-child {border-bottom:0}

.sp-homepage-v2 .cmp-lab:last-child {border-bottom:0}

.sp-homepage-v2 .cmp-b {width:23px;height:23px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center}

.sp-homepage-v2 .cmp-b svg {width:12px;height:12px;display:block}

.sp-homepage-v2 .cmp-b--y {background:var(--sp-green);color:#fff}

.sp-homepage-v2 .cmp-b--n,
.sp-homepage-v2 .cmp-b--t {background:#D5DBE4;color:#454C58}

.sp-homepage-v2 .cmp-cell small {display:none}

.sp-homepage-v2 .cmp-legend {display:flex;gap:26px;justify-content:center;margin:44px 0 0;font:var(--sp-body-sm);color:var(--sp-text-muted)}

.sp-homepage-v2 .cmp-legend span {display:inline-flex;align-items:center;gap:8px}

.sp-homepage-v2 .cmp-legend .cmp-b {width:19px;height:19px}

.sp-homepage-v2 .cmp-legend .cmp-b svg {width:10px;height:10px}

.sp-homepage-v2 .cmp-note {font:var(--sp-body-sm);color:var(--sp-text-muted);text-align:center;margin:26px 0 0}

.sp-homepage-v2 .cmp-note a {font-family:var(--sp-font-medium);font-weight:600;color:var(--sp-blue);text-decoration:none}

.sp-homepage-v2 .cmp-note a:hover {text-decoration:underline}

@media(max-width:860px) {

.sp-homepage-v2 .cmp-table {display:block;margin-top:56px}

.sp-homepage-v2 .cmp-col {display:block}

.sp-homepage-v2 .cmp-col--labels {display:none}

.sp-homepage-v2 .cmp-col--sky {margin:0 6px 46px}

.sp-homepage-v2 .cmp-col--sky::before {inset:-16px -14px}

.sp-homepage-v2 .cmp-col+.cmp-col:not(.cmp-col--sky) {margin-top:30px}

.sp-homepage-v2 .cmp-colhead {padding:14px 4px;font-size:18px}

.sp-homepage-v2 .cmp-col--sky .cmp-colhead {padding:14px 6px}

.sp-homepage-v2 .cmp-cell {padding:13px 6px;align-items:flex-start}

.sp-homepage-v2 .cmp-b {margin-top:3px}

.sp-homepage-v2 .cmp-cell small {display:block;font-family:var(--sp-font-medium);font-weight:600;font-size:11px;letter-spacing:.3px;color:var(--sp-text-muted);margin-bottom:2px}

.sp-homepage-v2 .cmp-cell>div {display:flex;flex-direction:column}
}

/* final CTA band */

.sp-homepage-v2 .cta-band {background:linear-gradient(160deg,#3A44F5 0%,var(--sp-blue) 55%,#2730C8 100%);color:#fff;text-align:center;padding:88px 24px}

.sp-homepage-v2 .cta-band h2 {font-family:var(--sp-font-display);font-weight:800;font-size:clamp(32px,3.6vw,48px);line-height:1.08;margin:0 0 14px;color:#fff}

.sp-homepage-v2 .cta-band p {font:var(--sp-body-lg);color:rgba(255,255,255,.86);margin:0 0 30px}

.sp-homepage-v2 .cta-band .sp-hero__actions {justify-content:center}

.sp-homepage-v2 .cta-band .hero-micro {justify-content:center;margin-top:22px}

/* FAQ */

.sp-homepage-v2 .faq-wrap {max-width:820px;margin:0 auto}

.sp-homepage-v2 .faq-item {border-bottom:1px solid var(--sp-border)}

.sp-homepage-v2 .faq-item:first-child {border-top:1px solid var(--sp-border)}

.sp-homepage-v2 .faq-q {width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;background:none;border:0;padding:22px 4px;cursor:pointer;text-align:left}

.sp-homepage-v2 .faq-q h3 {font-family:var(--sp-font-display);font-weight:700;font-size:19px;line-height:1.3;color:var(--sp-text);margin:0}

.sp-homepage-v2 .faq-q svg {width:18px;height:18px;flex:none;color:var(--sp-blue);transition:transform .2s ease}

.sp-homepage-v2 .faq-item.is-open .faq-q svg {transform:rotate(180deg)}

.sp-homepage-v2 .faq-a {display:none;padding:0 4px 24px;max-width:70ch}

.sp-homepage-v2 .faq-item.is-open .faq-a {display:block}

.sp-homepage-v2 .faq-a p {font:var(--sp-body);color:var(--sp-text-muted);margin:0}

/* industries strip — refined pill tiles */

.sp-homepage-v2 .ind-wrap { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:1060px; margin:0 auto; }

.sp-homepage-v2 .ind { display:flex; align-items:center; gap:13px; padding:11px 22px 11px 11px; background:#fff;
    border:1px solid var(--sp-border); border-radius:999px; box-shadow:0 2px 10px -4px rgba(48,58,242,.12);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }

.sp-homepage-v2 .ind:hover { transform:translateY(-3px); box-shadow:var(--sp-shadow-card); border-color:#C9D6F5; }

.sp-homepage-v2 .ind > svg { width:46px; height:46px; padding:11px; border-radius:50%; box-sizing:border-box; flex:none;
    background:var(--sp-surface-blue); color:var(--sp-blue); }

.sp-homepage-v2 .ind > span { font-family:var(--sp-font-display); font-weight:700; font-size:19px; color:var(--sp-ink); white-space:nowrap; }

.sp-homepage-v2 .ind:nth-child(4n+2) > svg { background:var(--sp-surface-green); color:#00955A; }

.sp-homepage-v2 .ind:nth-child(4n+3) > svg { background:var(--sp-surface-purple); color:#7A5AF0; }

.sp-homepage-v2 .ind:nth-child(4n)   > svg { background:var(--sp-surface-orange); color:#C2761B; }

@media(max-width:600px) {

.sp-homepage-v2 .ind { padding:9px 18px 9px 9px; gap:11px; }

.sp-homepage-v2 .ind > svg { width:40px; height:40px; padding:9px; }

.sp-homepage-v2 .ind > span { font-size:17px; }
}

/* ============================================================================
   GeneratePress shell adaptation — scoped to homepage-v2 only.
   These rules add no new design values. They re-assert approved design values
   where the real GeneratePress/child-theme cascade would otherwise win, and
   they undo shell wrappers that the standalone design never had.
   ============================================================================ */

/* --- Full-bleed bands -------------------------------------------------------
   GeneratePress caps #page.grid-container at 1920px, which breaks the hero and
   band backgrounds on ultrawide screens. Reset inside this page only. */
body.skyplanner-homepage-v2-page #page.grid-container {
  max-width: none;
  width: 100%;
}

body.skyplanner-homepage-v2-page.separate-containers .inside-article,
body.skyplanner-homepage-v2-page.one-container .site-content {
  padding: 0 !important;
}

body.skyplanner-homepage-v2-page .site-main > .entry-content,
body.skyplanner-homepage-v2-page .entry-content > .sp-homepage-v2 {
  margin: 0;
}

body.skyplanner-homepage-v2-page,
body.skyplanner-homepage-v2-page .site-header {
  overflow-x: clip;
}

/* GeneratePress prints the page title as a second H1 above the content. The
   approved design owns the H1 (.sp-hero__title), so hide the theme one here.
   Same treatment as about-us-v2. */
body.skyplanner-homepage-v2-page .entry-header {
  display: none;
}

/* --- Block wrappers ---------------------------------------------------------
   On the classic (non-FSE) child theme every core/group block renders as
   <div class="wp-block-group X"><div class="wp-block-group__inner-container">.
   That wrapper is invisible in the block editor but real on the frontend, and
   it gives every design grid/flex container exactly one child, collapsing all
   multi-column layouts to their first track.

   `display: contents` removes the wrapper's box so the design's children
   become the direct grid/flex items again, exactly as in the standalone
   design. The wrapper carries no styling of its own here (its theme padding
   is reset below), so nothing is lost. This changes where rules apply, never
   what the design values are. */
.sp-homepage-v2 .wp-block-group__inner-container,
.site-main .sp-homepage-v2 .wp-block-group__inner-container {
  display: contents;
  padding: 0;
  max-width: none;
}

/* The wrapper stays in the DOM tree for selector matching, so design rules
   that use a child combinator across a block boundary need the wrapper spelled
   out. Only `.cmp-col > :last-child` is affected; the value is unchanged. */
.sp-homepage-v2 .cmp-col > .wp-block-group__inner-container > :last-child {
  border-bottom: 0;
}

/* --- Heading cascade --------------------------------------------------------
   The child theme sets h1..h4 with `font: ... !important` (desktop and the
   <=768px mobile block), and `h2 u { text-underline-offset: 8px !important }`.
   The approved design values below are re-declared unchanged, with !important,
   inside the page scope only. This is the documented accepted use of
   !important from the porting reference. */
.sp-homepage-v2 .sp-h1 { font: var(--sp-h1) !important; }
.sp-homepage-v2 .sp-h2 { font: var(--sp-h2) !important; }
.sp-homepage-v2 .sp-h3 { font: var(--sp-h3) !important; }
.sp-homepage-v2 .sp-h4 { font: var(--sp-h4) !important; }

.sp-homepage-v2 .sp-hero__title { font: var(--sp-h1) !important; }

.sp-homepage-v2 .hero-panel .sp-hero__title {
  font-family: var(--sp-font-display) !important;
  font-size: clamp(36px, 4.4vw, 64px) !important;
  line-height: 1.06 !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  .sp-homepage-v2 .hero-panel .sp-hero__title {
    font-size: 40px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 600px) {
  .sp-homepage-v2 .hero-panel .sp-hero__title {
    font-size: 36px !important;
    font-weight: 700 !important;
  }
}

.sp-homepage-v2 .arcx h2 {
  font-family: var(--sp-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(38px, 4vw, 58px) !important;
  line-height: 1.02 !important;
}

.sp-homepage-v2 .cta-band h2 {
  font-family: var(--sp-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(32px, 3.6vw, 48px) !important;
  line-height: 1.08 !important;
}

.sp-homepage-v2 .capx__body h3 {
  font-family: var(--sp-font-display) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.28 !important;
}

.sp-homepage-v2 .onb-card__txt h3,
.sp-homepage-v2 .pr-problem h3 {
  font-family: var(--sp-font-display) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}

.sp-homepage-v2 .faq-q h3 {
  font-family: var(--sp-font-display) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
}

.sp-homepage-v2 .arcben__item h4 {
  font-family: var(--sp-font-display) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  /* The design sets no line-height here, so it inherits the page body value
     (30px desktop / 24px at <=600px). `inherit` reproduces that; a literal
     `normal` would not. */
  line-height: inherit !important;
}

.sp-homepage-v2 .arcx h2 u,
.sp-homepage-v2 .cmp-sec h2 u {
  text-decoration-color: var(--sp-blue) !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 4px !important;
}

/* --- Element collision surfaces --------------------------------------------
   GeneratePress styles bare `button` (grey background, white text, 10px 20px
   padding) and `a`. Neutralize inside the page scope with low specificity so
   the approved design component rules above still win. */
.sp-homepage-v2 button {
  background: none;
  border: 0;
  padding: 0;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
  /* The design leaves button font and colour at the user-agent defaults and
     styles the contents instead; the theme sets both. `revert` restores the
     UA values the design measured with, and the design's own .hero-watch /
     .vid-modal__close declarations still win on specificity. */
  font: revert;
  color: revert;
}

/* `:where()` holds this guard at the specificity of `.sp-homepage-v2` alone
   (0,1,0). The previous `.sp-homepage-v2 button:hover` form scored 0,2,1 and so
   outranked the design's own `.sp-homepage-v2 .hero-watch` (0,2,0): hovering the
   hero video link reverted its colour to the UA button colour (black) on the
   dark hero, and stripped the white background off the modal close puck. */
.sp-homepage-v2 :where(button:hover, button:focus, button:active) {
  background: none;
  color: revert;
  border: 0;
}

/* The design colours these two buttons itself; restate the colours for every
   interaction state so no theme or UA hover value can leak back in. */
.sp-homepage-v2 .hero-watch:hover,
.sp-homepage-v2 .hero-watch:focus,
.sp-homepage-v2 .hero-watch:active {
  color: #fff;
  background: none;
}

.sp-homepage-v2 .vid-modal__close:hover,
.sp-homepage-v2 .vid-modal__close:focus,
.sp-homepage-v2 .vid-modal__close:active {
  color: #0E1230;
  background: #fff;
}

/* GeneratePress sets `small { font-size: 75% }`; the design relies on the
   user-agent default. Restore it inside the page scope only. */
.sp-homepage-v2 small {
  font-size: smaller;
}

.sp-homepage-v2 .hero-watch:focus-visible,
.sp-homepage-v2 .faq-q:focus-visible,
.sp-homepage-v2 .vidblock:focus-visible,
.sp-homepage-v2 .vid-modal__close:focus-visible {
  outline: 2px solid var(--sp-blue);
  outline-offset: 3px;
}

.sp-homepage-v2 .hero-panel .hero-watch:focus-visible {
  outline-color: #fff;
}

.sp-homepage-v2 a {
  text-decoration: none;
}

.sp-homepage-v2 ul,
.sp-homepage-v2 ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-homepage-v2 img,
.sp-homepage-v2 svg {
  max-width: 100%;
}

/* --- Reduced motion ---------------------------------------------------------
   The approved design uses transition/transform hovers only; honour the user
   preference while keeping the settled end state visible. */
@media (prefers-reduced-motion: reduce) {
  .sp-homepage-v2 *,
  .sp-homepage-v2 *::before,
  .sp-homepage-v2 *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --- RTL adaptations (ar) 2026-08-14 — directional counter-rules only; design values unchanged.
   Text arrows are handled in the ar content (U+2190, since U+2192 is not Bidi_Mirrored). --- */
[dir="rtl"] .sp-homepage-v2 .capx__link svg { transform: scaleX(-1); }
[dir="rtl"] .sp-homepage-v2 .onb-check s i { left: auto; right: 0; }
[dir="rtl"] .sp-homepage-v2 .onb-check s { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sp-homepage-v2 .arcfeed__chip { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sp-homepage-v2 .arcgantt__rl { padding-left: 0; padding-right: 8px; }
[dir="rtl"] .sp-homepage-v2 .pr-problem p b { margin-right: 0; margin-left: 2px; }
[dir="rtl"] .sp-homepage-v2 .hero-watch__play svg { margin-left: 0; margin-right: 2px; }
[dir="rtl"] .sp-homepage-v2 .vidblock__play svg { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .sp-homepage-v2 .capx-phone { margin-left: 0; margin-right: -26px; }

/* --- da/no hero compound overflow (390px) 2026-08-15 ------------------------
   "produktionsplanlægning" (da) / "produksjonsplanlegging" (no) are wider than
   the hero column's available width at 390px. overflow-wrap:break-word (set
   above) only breaks at the line level; it does not reduce the grid item's
   min-content contribution, so the auto minimum of the 1fr track stretched
   .sp-hero__grid ~20px past the viewport. Fix, scoped to Danish/Norwegian only
   (WPML emits lang="da-DK" / lang="nb-NO"; nb + no both listed for safety):
   min-width:0 on the hero grid items removes the min-content floor so the
   track sizes to the viewport and break-word can wrap the compound, and
   hyphens:auto lets browsers with da/nb dictionaries break it nicely instead
   of a hard mid-word cut. Design values unchanged for all other languages. */
:lang(da) .sp-homepage-v2 .sp-hero .sp-hero__title,
:lang(nb) .sp-homepage-v2 .sp-hero .sp-hero__title,
:lang(no) .sp-homepage-v2 .sp-hero .sp-hero__title {
  hyphens: auto;
  overflow-wrap: break-word;
}

:lang(da) .sp-homepage-v2 .sp-hero__grid > *,
:lang(nb) .sp-homepage-v2 .sp-hero__grid > *,
:lang(no) .sp-homepage-v2 .sp-hero__grid > *,
:lang(da) .sp-homepage-v2 .sp-hero__grid > .wp-block-group__inner-container > *,
:lang(nb) .sp-homepage-v2 .sp-hero__grid > .wp-block-group__inner-container > *,
:lang(no) .sp-homepage-v2 .sp-hero__grid > .wp-block-group__inner-container > * {
  min-width: 0;
}