/* ============================================================================
   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.
   ---------------------------------------------------------------------------- */
:root {
  /* ==========================================================================
     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:  "NeueKabel", "Jost", system-ui, sans-serif;        /* headings */
  --sp-font-display-xb: "NeueKabel", "Jost", sans-serif;                 /* hero display (weight 800) */
  --sp-font-medium:   "NeueKabel", "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) {
  :root {
    /* 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-h1 { font: var(--sp-h1); color: var(--sp-text); margin: 0; }
.sp-h2 { font: var(--sp-h2); color: var(--sp-text); margin: 0; }
.sp-h3 { font: var(--sp-h3); color: var(--sp-text); margin: 0; }
.sp-h4 { font: var(--sp-h4); color: var(--sp-text); margin: 0; }
.sp-lead { font: var(--sp-body-lg); color: var(--sp-text); margin: 0; }
.sp-body { font: var(--sp-body-lg); color: var(--sp-text); margin: 0; }
.sp-muted { color: var(--sp-text-muted); }
.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-about-v2, .sp-about-v2 *, .sp-about-v2 *::before, .sp-about-v2 *::after { box-sizing: border-box; }
body.skyplanner-about-v2-page { overflow-x: clip; }   /* belt-and-suspenders: off-canvas / decorative bleed never adds page scroll width */
body.rtl.skyplanner-about-v2-page .main-navigation .wpml-ls-menu-item > .sub-menu,
body.rtl.skyplanner-about .main-navigation .wpml-ls-menu-item > .sub-menu,
body.rtl.skyplanner-about-v2-page .secondary-navigation .wpml-ls-menu-item > .sub-menu,
body.rtl.skyplanner-about .secondary-navigation .wpml-ls-menu-item > .sub-menu {
  left: 0 !important;
  right: auto !important;
}

/* Mobile-safety defaults (promoted from pricing-v2): long words wrap instead of
   forcing horizontal scroll, and media never exceeds its container. */
.sp-page { overflow-wrap: break-word; }
.sp-page img, .sp-page svg, .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-min0, .sp-min0 > * { min-width: 0; }
.v3-translation-context {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sp-about-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-container { max-width: var(--sp-container); margin-inline: auto; padding-inline: var(--sp-gutter); }
.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-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-btn:active { transform: translateY(1px); }
.sp-btn .sp-btn__chev { width: 18px; height: 18px; flex: none; }

/* Green — primary conversion ("Get started for free", "Start free") */
.sp-btn--green { background: #00824f; color: #fff; }
.sp-btn--green:hover { background: #007345; box-shadow: var(--sp-shadow-soft); transform: translateY(-2px); }

/* Blue — secondary action / "Request a demo", "Contact us" */
.sp-btn--blue { background: var(--sp-blue); color: #fff; }
.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-btn--outline { background: #fff; color: var(--sp-ink); border-color: var(--sp-border); }
.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-btn--ghost-onblue { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.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-btn--white { background: #fff; color: var(--sp-ink); }
.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-btn--nav { padding: 14px 26px; font-size: 17px; background: var(--sp-green); color: #fff; }
.sp-btn--nav:hover { background: var(--sp-green-600); box-shadow: var(--sp-shadow-soft); transform: translateY(-2px); }

/* Text link button */
.sp-btn--text {
  background: none; border: none; padding: 6px 2px; color: var(--sp-ink);
  text-decoration: underline; text-underline-offset: 4px;
}
.sp-btn--text:hover { color: var(--sp-blue); }

.sp-btn--lg { padding: 20px 38px; font-size: 19px; }
.sp-btn--sm { padding: 12px 22px; font-size: 16px; }
.sp-btn:focus-visible { outline: 3px solid rgba(48,58,242,0.45); outline-offset: 2px; }

/* WPML target pages may render CTA links through core/button wrappers.
   Keep the approved SkyPlanner button skin stronger than WordPress globals. */
.sp-about-v2 .wp-block-button__link.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sp-font-medium);
  line-height: 1;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.sp-about-v2 .wp-block-button__link.sp-btn--green {
  background: #00824f;
  color: #fff;
}
.sp-about-v2 .wp-block-button__link.sp-btn--green:hover {
  background: #007345;
  box-shadow: var(--sp-shadow-soft);
}
.sp-about-v2 .wp-block-button__link.sp-btn--blue {
  background: var(--sp-blue);
  color: #fff;
}
.sp-about-v2 .wp-block-button__link.sp-btn--blue:hover {
  background: var(--sp-blue-700);
  box-shadow: var(--sp-shadow-soft);
}
.sp-about-v2 .wp-block-button__link.sp-btn--text {
  background: transparent;
  color: var(--sp-ink);
  border-color: transparent;
  padding: 6px 2px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sp-about-v2 .wp-block-button__link.sp-btn--text:hover {
  background: transparent;
  color: var(--sp-blue);
}
.sp-about-v2 .wp-block-button__link.sp-btn--lg {
  padding: 20px 38px;
  font-size: 19px;
}

/* ============================================================================
   2. NAVIGATION — desktop header
   ============================================================================ */
.sp-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--sp-bg); 
}
/* Live header uses wide page gutters, not the narrow 1200 content container */
.sp-header .sp-container { max-width: 1600px; padding-inline: 40px; }
@media (max-width: 600px){ .sp-header .sp-container { padding-inline: 30px; } }
.sp-nav { display: flex; align-items: center; gap: 36px; height: 98px; }
.sp-nav__logo { height: 35px; flex: none; }
.sp-nav__logo img { height: 100%; display: block; }
.sp-nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.sp-nav__link {
  font-family: var(--sp-font-medium); font-size: 18px; color: var(--sp-ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0; position: relative; cursor: pointer;
}
.sp-nav__link .sp-caret { width: 11px; height: 7px; opacity: .55; flex: none; transition: transform .2s; }
.sp-nav__link:hover { color: var(--sp-blue); }
.sp-nav__link:hover .sp-caret { transform: translateY(2px); }
.sp-nav__link.is-active { color: var(--sp-blue); }
.sp-nav__link.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--sp-blue); border-radius: 2px;
}
.sp-nav__right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.sp-nav__lang { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sp-font-medium); color: var(--sp-ink); font-size: 17px; cursor: pointer; }
.sp-nav__lang .sp-flag { width: 22px; height: 16px; border-radius: 3px; background: var(--sp-surface-blue); display: inline-block; }
.sp-nav__burger { display: none; width: 44px; height: 44px; border: none; background: none; cursor: pointer; flex-direction: column; gap: 5px; justify-content: center; align-items: center; }
.sp-nav__burger span { width: 24px; height: 2px; background: var(--sp-ink); border-radius: 2px; }

/* Tablet (≤1024): collapse to hamburger — nav links + right cluster (lang + CTA)
   move into the offcanvas, matching the live GeneratePress behaviour at 768. */
@media (max-width: 1024px) {
  .sp-nav__links, .sp-nav__right { display: none; }
  .sp-nav__burger { display: flex; }
}

/* Dropdown */
.sp-nav__dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: #fff; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-card); padding: 14px; min-width: 240px;
  opacity: 0; visibility: hidden; transition: all .18s ease; z-index: 50;
}
.sp-nav__item:hover .sp-nav__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sp-nav__item { position: relative; }
.sp-nav__dropdown a { display: block; padding: 10px 14px; border-radius: var(--sp-radius-md); color: var(--sp-ink); text-decoration: none; font-size: 17px; }
.sp-nav__dropdown a:hover { background: var(--sp-surface-blue); color: var(--sp-blue); }

/* Mobile offcanvas */
.sp-offcanvas {
  position: fixed; inset: 0; background: var(--sp-bg); z-index: 60; padding: 28px var(--sp-gutter);
  display: flex; flex-direction: column; gap: 8px; transform: translateX(100%); transition: transform .28s ease;
  visibility: hidden;
}
.sp-offcanvas.is-open { transform: translateX(0); visibility: visible; }
.sp-offcanvas__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.sp-offcanvas a.sp-offcanvas__link { font-family: var(--sp-font-medium); font-size: 24px; color: var(--sp-ink); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--sp-border); }
.sp-offcanvas .sp-btn { margin-top: 24px; }

/* ============================================================================
   3. HERO
   ============================================================================ */
.sp-hero { padding-block: var(--sp-space-20) var(--sp-space-30); }
.sp-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sp-hero__title { font: var(--sp-h1); margin: 0 0 28px; color: var(--sp-text); }
.sp-hero__title .accent { color: var(--sp-blue); }
.sp-hero__sub { font: var(--sp-body-lg); color: var(--sp-text-muted); max-width: 36ch; margin: 0 0 32px; }
.sp-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.sp-hero__media img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .sp-hero__grid { grid-template-columns: 1fr; }
  .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-hero--brand {
  position: relative; overflow: hidden;
  background: var(--sp-blue) url("160e6baa-9279-4986-8b9e-aefdafb626e3") center center / cover no-repeat;
  padding-block: var(--sp-space-15) var(--sp-space-15);
}
.sp-hero--brand .sp-hero__grid { grid-template-columns: 1fr 1.04fr; align-items: center; gap: 40px; }
.sp-hero--brand .sp-hero__title,
.sp-hero--brand .sp-hero__title .accent { color: #fff; }
.sp-hero--brand .sp-hero__sub { color: rgba(255,255,255,0.92); max-width: 46ch; }
.sp-hero--brand .sp-hero__actions .sp-btn--text { color: #fff; text-decoration-color: rgba(255,255,255,0.7); }
.sp-hero--brand .sp-hero__actions .sp-btn--text:hover { color: #fff; text-decoration-color: #fff; }
.sp-hero--brand .sp-btn--green { box-shadow: 0 12px 30px rgba(12,16,60,0.32); }
.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-hero--brand {
    background-image: url("8d186663-7e6c-4276-8705-6aa9dd75610b");
    background-position: top center;
    padding-block: var(--sp-space-12) var(--sp-space-12);
  }
  .sp-hero--brand .sp-hero__media { order: 0; margin-top: 8px; }
  .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-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-card--hover:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow-soft); }

/* icon chip — pastel rounded square */
.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-chip img, .sp-chip svg { width: 32px; height: 32px; }
.sp-chip--green  { background: var(--sp-surface-green); }
.sp-chip--purple { background: var(--sp-surface-purple); }
.sp-chip--orange { background: var(--sp-surface-orange); }

.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-card__body  { font: var(--sp-body); color: var(--sp-text-muted); margin: 0; }

/* feature card — big display title (used on Features page) */
.sp-feature__title { font: var(--sp-h3); margin: 0 0 16px; }

/* stat card */
.sp-stat { background:#fff; border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-card); padding: 28px 24px; text-align:center; }
.sp-stat__num { font-family: var(--sp-font-display-xb); font-weight: 800; font-size: 44px; color: var(--sp-blue); line-height:1; }
.sp-stat__label { font: var(--sp-body-sm); color: var(--sp-text); margin-top: 14px; }

/* docs category card */
.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-doc-card:hover { box-shadow: var(--sp-shadow-soft); transform: translateY(-2px); }
.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-doc-card__title { font-family: var(--sp-font-display); font-weight:700; font-size:20px; color: var(--sp-text); margin:0 0 4px; }
.sp-doc-card__meta { font: var(--sp-caption); color: var(--sp-text-muted); }

.sp-card-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sp-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sp-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .sp-card-grid--4 { grid-template-columns: repeat(2,1fr); } .sp-card-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .sp-card-grid--4 { grid-template-columns: 1fr; } }

/* ============================================================================
   5. SECTION BANDS & PASTEL SURFACES
   ============================================================================ */
.sp-band-blue   { background: var(--sp-blue); color: #fff; }
.sp-band-blue .sp-h2, .sp-band-blue .sp-h3 { color: #fff; }
.sp-band-light  { background: var(--sp-surface-blue); }
.sp-band-soft   { background: #fff; }
.sp-panel { border-radius: var(--sp-radius-xl); padding: 56px; }
.sp-panel--blue { background: var(--sp-blue); color: #fff; box-shadow: var(--sp-shadow-soft); }
.sp-panel--light { background: var(--sp-surface-blue); }

.sp-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.sp-section-head .sp-h2 { margin-bottom: 20px; }
.sp-section-head p { font: var(--sp-body-lg); color: var(--sp-text-muted); margin: 0; }

/* logo / social proof band */
.sp-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 48px; opacity:.7; }
.sp-logos span { font-family: var(--sp-font-medium); color: var(--sp-text-muted); font-size: 22px; }

/* ============================================================================
   6. PRICING
   ============================================================================ */
.sp-price-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:start; }
@media (max-width: 600px){ .sp-price-grid { grid-template-columns:1fr; } }  /* 2-col holds through tablet (768) */
.sp-price-card { background:#fff; border-radius: var(--sp-radius-xl); box-shadow: var(--sp-shadow-card); padding: 48px 40px; }
.sp-price-card__name { font: var(--sp-h3); text-align:center; margin: 0 0 6px; }
.sp-price-card__billing { text-align:center; color: var(--sp-text-muted); font: var(--sp-body-sm); margin: 0 0 28px; }
.sp-price-box { background: var(--sp-surface-blue); border-radius: var(--sp-radius-lg); padding: 28px; text-align:center; margin-bottom: 28px; }
.sp-price-box__main { font-family: var(--sp-font-display); font-weight:700; font-size: 44px; color: var(--sp-text); }
.sp-price-box__main span { font-size: 22px; font-family: var(--sp-font-body); color: var(--sp-text-muted); }
.sp-price-box__add { font-family: var(--sp-font-display); font-weight:700; font-size: 26px; color: var(--sp-text); margin-top: 10px; }
.sp-price-box__add span { font-size: 18px; font-family: var(--sp-font-body); color: var(--sp-text-muted); }
.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-feature-list { list-style:none; margin:0; padding:0; }
.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-feature-list li::before { content:"✓"; color: var(--sp-green); font-weight:700; flex:none; }

/* ============================================================================
   7. FAQ / ACCORDION
   ============================================================================ */
.sp-faq { max-width: 920px; margin-inline:auto; display:flex; flex-direction:column; gap: 14px; }
.sp-faq__item { border-radius: var(--sp-radius-pill); background:#fff; box-shadow: var(--sp-shadow-card); overflow:hidden; transition: border-radius .2s; }
.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-faq__q .sp-faq__chev { width:18px; height:18px; flex:none; transition: transform .2s; color: var(--sp-blue); }
.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-faq__item.is-open { background: var(--sp-blue); border-radius: var(--sp-radius-lg); }
.sp-faq__item.is-open .sp-faq__q { color: #fff; }
.sp-faq__item.is-open .sp-faq__chev { transform: rotate(180deg); color:#fff; }
.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-form { display:grid; gap: 22px; }
.sp-field { display:flex; flex-direction:column; gap: 8px; }
.sp-field label { font: var(--sp-body-sm); font-family: var(--sp-font-medium); color: var(--sp-text); }
.sp-field label .req { color: #E5484D; }
.sp-input, .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-textarea { border-radius: var(--sp-radius-lg); min-height: 120px; resize: vertical; }
.sp-input::placeholder, .sp-textarea::placeholder { color: #9aa0b4; }
.sp-input:focus, .sp-textarea:focus { outline:none; border-color: var(--sp-blue); box-shadow: 0 0 0 4px rgba(48,58,242,0.12); }
.sp-form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px){ .sp-form-row { grid-template-columns: 1fr; } }
.sp-check { display:flex; gap:12px; align-items:flex-start; font: var(--sp-body-sm); color: var(--sp-text-muted); }
.sp-check input { width:20px; height:20px; flex:none; accent-color: var(--sp-blue); margin-top:2px; }

/* ============================================================================
   11. NUMBERED PROCESS STEPS  (Assisted onboarding / Customization pages)
   Light-blue rounded card, big blue NeueKabel number, title, body.
   ============================================================================ */
.sp-steps { display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 900px){ .sp-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .sp-steps { grid-template-columns: 1fr; } }
.sp-step { background: var(--sp-surface-blue); border-radius: var(--sp-radius-lg); padding: 32px 28px; }
.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-step__title { font-family: var(--sp-font-display); font-weight: 700; font-size: 19px; margin: 0 0 8px; color: var(--sp-text); }
.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-logo-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 600px){ .sp-logo-grid { grid-template-columns: 1fr 1fr; } }  /* 3-col holds through tablet (768) */
@media (max-width: 430px){ .sp-logo-grid { grid-template-columns: 1fr; } }
.sp-logo-card { background:#fff; border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-card); padding: 22px 24px; }
.sp-logo-card__logo { height: 26px; margin-bottom: 14px; display:flex; align-items:center; }
.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-logo-card__title { font-family: var(--sp-font-display); font-weight: 700; font-size: 18px; margin: 0 0 6px; color: var(--sp-text); }
.sp-logo-card__desc { font: var(--sp-caption); color: var(--sp-text-muted); margin: 0; }

/* Centered button toolbar (doc / utility page sub-nav) */
.sp-btn-toolbar { display:flex; flex-wrap:wrap; gap: 16px; justify-content:center; }

/* Big display-title feature card (Integrations / Features pages) */
.sp-feature-card { background:#fff; border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-card); padding: 40px 34px; }
.sp-feature-card .sp-chip { margin-bottom: 24px; }

/* ============================================================================
   10. UTILITIES
   ============================================================================ */
.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-divider { border:none; border-top:1px solid var(--sp-border); margin: 0; }
.sp-stack-2 > * + * { margin-top: 8px; }
.sp-stack-4 > * + * { margin-top: 16px; }
.sp-center { text-align:center; }
.sp-floating-chat { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius:50%; background: var(--sp-green); box-shadow: var(--sp-shadow-soft); display:flex; align-items:center; justify-content:center; z-index: 50; }

/* ============================================================================
   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-section { padding-block: var(--sp-space-20); }
  .sp-panel { padding: 32px 24px; border-radius: var(--sp-radius-lg); }
  .sp-section-head { margin-bottom: 36px; }

  /* CTAs become full-width, comfortably tall touch targets (≥48px) */
  .sp-hero__actions { flex-direction: column; align-items: stretch; }
  .sp-hero__actions .sp-btn,
  .sp-hero .oauth-row .sp-btn { width: 100%; }
  .sp-btn--block-m { width: 100%; }
  .sp-btn-toolbar { flex-direction: column; }
  .sp-btn-toolbar .sp-btn { width: 100%; }

  /* Hero: copy first, image below, centered */
  .sp-hero { padding-block: var(--sp-space-10) var(--sp-space-20); }
  .sp-hero__title { font: var(--sp-h1); }
  .sp-hero__sub { max-width: none; }

  /* Single-column grids */
  .sp-steps { grid-template-columns: 1fr; }
  .sp-price-grid { grid-template-columns: 1fr; }
  .sp-logo-grid { grid-template-columns: 1fr; }

  /* Cards: a touch less padding */
  .sp-card { padding: 24px; }
  .sp-price-card { padding: 32px 24px; }

  /* FAQ: tighter horizontal padding, stays pill→panel */
  .sp-faq__q { padding: 18px 22px; font-size: 17px; }
  .sp-faq__a { padding-inline: 22px; }
  .sp-faq__item.is-open .sp-faq__a { padding: 0 22px 20px; }

  /* Inputs/buttons keep ≥48px height via existing padding; nav CTA full-width in menu */
  .sp-offcanvas .sp-btn { width: 100%; }
}

/* RTL — Arabic pages mirror fully */
[dir="rtl"] .sp-nav__right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .sp-feature-list li,
[dir="rtl"] .sp-check { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .sp-nav__link .sp-caret { transform: scaleX(-1); }



  /* ============================================================
     v3 — BRAND-LINE EXPERIMENT (scoped to this page only).
     Does NOT modify the shared design system. Extends it with:
     a warm secondary accent, a deep-ink band, warm paper surfaces,
     a mono "engineering" label type, a scheduling-lane motif, and a
     differentiated elevation scale.
     ============================================================ */
  body { margin: 0; }
  html { scroll-behavior: smooth; }
  * { min-width: 0; }
  @media(max-width:1100px){ .sp-nav__links,.sp-nav__right{ display:none; } .sp-nav__burger{ display:flex; } }

  :root{
    --v3-blue:#303AF2; --v3-blue-700:#2630D6; --v3-green:#00BA70;
    --v3-ink:#1F1F33; --v3-ink-deep:#14162E;
    --v3-paper:#F6F1E9; --v3-paper-border:#E7DECF;
    --v3-blue-surf:#E5F2FE; --v3-cool:#F9FCFE;
    --v3-border:#DDEDFF; --v3-muted:#5A5A6E;
    --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  }

  /* ------------------------------------------------------------------
     PER-SECTION ACCENT SYSTEM — the ONLY thing that changes per page.
     Curated sibling hues (same chroma/lightness, hue rotates) so they
     stay a family and never fight the brand blue. Everything else —
     blue primary, green CTA, type, layout, dark band, motif — is fixed.
     Map: Product=amber · Services=teal · Company=violet · Resources=green
     ------------------------------------------------------------------ */
  body{ --ac:oklch(.64 .12 62); --ac-deep:oklch(.50 .11 58); --ac-surf:oklch(.95 .028 72); --ac-dot:oklch(.64 .12 62 / .22); --ac-line:oklch(.64 .12 62 / .30); }
  body[data-accent="amber"]{  --ac:oklch(.64 .12 62);  --ac-deep:oklch(.50 .11 58);  --ac-surf:oklch(.95 .028 72);  --ac-dot:oklch(.64 .12 62 / .22);  --ac-line:oklch(.64 .12 62 / .30); }
  body[data-accent="teal"]{   --ac:oklch(.62 .10 200); --ac-deep:oklch(.48 .09 205); --ac-surf:oklch(.95 .025 200); --ac-dot:oklch(.62 .10 200 / .22); --ac-line:oklch(.62 .10 200 / .32); }
  body[data-accent="violet"]{ --ac:oklch(.58 .14 300); --ac-deep:oklch(.47 .14 300); --ac-surf:oklch(.95 .03 305);  --ac-dot:oklch(.58 .14 300 / .22); --ac-line:oklch(.58 .14 300 / .32); }
  body[data-accent="green"]{  --ac:oklch(.62 .11 155); --ac-deep:oklch(.48 .10 158); --ac-surf:oklch(.95 .03 158);  --ac-dot:oklch(.62 .11 155 / .22); --ac-line:oklch(.62 .11 155 / .32); }

  /* DARK-BAND comparison — swaps only --v3-ink-deep.
     black = current neutral · navy = brand-hued deep indigo · blue = brand blue */
  body[data-dark="black"]{ --v3-ink-deep:oklch(.205 .006 270); }
  body[data-dark="navy"]{  --v3-ink-deep:oklch(.235 .085 268); }
  body[data-dark="blue"]{  --v3-ink-deep:#303AF2; }

  /* alias the old amber token names to the LIVE accent, so the entire
     rest of the stylesheet keeps working while only one variable changes */
  body{ --v3-amber:var(--ac); --v3-amber-deep:var(--ac-deep); --v3-amber-surf:var(--ac-surf); }

  /* ---- shared building blocks ---- */
  .v3-sec { padding-block: var(--sp-space-30); }
  @media(max-width:600px){ .v3-sec{ padding-block: var(--sp-space-20); } }
  .v3-sec--paper { background:var(--v3-paper); }
  .v3-sec--bluesurf { background:var(--v3-blue-surf); }
  .v3-sec--dark { background:var(--v3-ink-deep); color:#fff; }
  .v3-wrap { max-width:1200px; margin-inline:auto; padding-inline:var(--sp-gutter); }

  /* scheduling-lane motif */
  .v3-lanes { background-image:repeating-linear-gradient(90deg, rgba(48,58,242,.045) 0 1px, transparent 1px 72px); }
  .v3-lanes--dark { background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 72px); }
  .v3-dots { background-image:radial-gradient(var(--ac-dot) 1.3px, transparent 1.4px); background-size:22px 22px; }

  /* mono engineering kicker */
  .v3-kick { font-family:var(--mono); font-size:13px; letter-spacing:2.5px; text-transform:uppercase; color:var(--v3-amber-deep); margin:0 0 18px; display:inline-flex; align-items:center; gap:10px; }
  .v3-kick::before { content:""; width:22px; height:2px; background:var(--v3-amber); flex:none; }
  .v3-sec--dark .v3-kick { color:var(--v3-amber); }
  .v3-sec--dark .v3-kick::before { background:var(--v3-amber); }

  .v3-h2 { font-family:var(--sp-font-display); font-weight:700; font-size:clamp(28px,3.6vw,46px); line-height:1.08; margin:0; color:var(--v3-ink); text-wrap:balance; }
  .v3-sec--dark .v3-h2 { color:#fff; }
  .v3-lead { font:var(--sp-body-lg); color:var(--v3-muted); }
  .v3-sec--dark .v3-lead { color:rgba(255,255,255,.78); }
  .v3-head { max-width:680px; margin:0 0 56px; }
  .v3-head.is-center { margin-inline:auto; text-align:center; }
  .v3-head .v3-h2 { margin-bottom:18px; }
  .v3-head.is-center .v3-kick { justify-content:center; }

  /* underline accent for a single word */
  .ink-amber { color:var(--v3-amber); }
  .u-amber { background:linear-gradient(transparent 62%, var(--ac-line) 0); padding:0 .05em; }

  /* ===================== 1. HERO ===================== */
  .v3-hero { position:relative; padding-block: 52px var(--sp-space-15); overflow:hidden; }
  .v3-hero__top { max-width:820px; margin:0 auto 48px; text-align:center; }
  .v3-hero__top .v3-kick { justify-content:center; }
  @media(max-width:940px){ .v3-hero__top{ margin-bottom:34px; } }
  .v3-hero h1 { font-family:var(--sp-font-display); font-weight:700; font-size:clamp(36px,5vw,68px); line-height:1.03; margin:0 0 24px; color:var(--v3-ink); text-wrap:balance; letter-spacing:-.01em; }
  .v3-hero .sub { font:var(--sp-body-lg); color:var(--v3-muted); margin:0 auto 32px; max-width:62ch; }
  .v3-hero__cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; }
  .v3-hero__media { position:relative; max-width:1000px; margin:0 auto; }
  .v3-hero__frame { border-radius:16px; overflow:hidden; box-shadow:0 30px 70px rgba(20,22,46,.22); border:1px solid var(--v3-border); display:block; }
  .v3-hero__frame img { width:100%; display:block; }
  .v3-hero__frame--video { aspect-ratio:16/9; }
  .v3-hero__frame--video video { width:100%; height:100%; border:0; display:block; object-fit:cover; background:#07123a; }
  .sp-lazy-video { position:relative; width:100%; height:100%; background:#07123a; }
  .sp-lazy-video picture,
  .sp-lazy-video picture img { width:100%; height:100%; display:block; }
  .sp-lazy-video picture img { object-fit:cover; }
  .sp-lazy-video:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(7,18,58,.1),rgba(7,18,58,.36)); }
  .sp-lazy-video__play { position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:12px; min-height:64px; padding:12px 22px 12px 14px; border:0; border-radius:999px; background:#fff; color:var(--v3-ink); box-shadow:0 18px 45px rgba(20,22,46,.28); font:700 16px/1 var(--sp-font-body); cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; }
  .sp-lazy-video__play:hover,
  .sp-lazy-video__play:focus-visible { transform:translate(-50%,-50%) scale(1.035); box-shadow:0 24px 58px rgba(20,22,46,.34); outline:0; }
  .sp-lazy-video__icon { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--v3-green); color:#fff; flex:none; }
  .sp-lazy-video__icon svg { width:21px; height:21px; fill:currentColor; margin-left:2px; }
  .sp-lazy-video__fallback { position:absolute; left:18px; bottom:18px; z-index:3; color:#fff; font-weight:700; }
  @media(max-width:520px){ .sp-lazy-video__play{ min-height:56px; padding:10px 18px 10px 12px; font-size:15px; } .sp-lazy-video__icon{ width:34px; height:34px; } }
  .v3-hero__tag { position:absolute; left:-14px; bottom:26px; background:var(--v3-ink-deep); color:#fff; font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; padding:10px 16px; border-radius:10px; display:flex; align-items:center; gap:9px; box-shadow:0 12px 30px rgba(20,22,46,.28); }
  .v3-hero__tag .pulse { width:8px; height:8px; border-radius:50%; background:var(--v3-green); flex:none; box-shadow:0 0 0 0 rgba(0,186,112,.6); animation:v3pulse 2s infinite; }
  @keyframes v3pulse { 0%{ box-shadow:0 0 0 0 rgba(0,186,112,.5);} 70%{ box-shadow:0 0 0 9px rgba(0,186,112,0);} 100%{ box-shadow:0 0 0 0 rgba(0,186,112,0);} }
  @media(prefers-reduced-motion:reduce){ .v3-hero__tag .pulse{ animation:none; } }
  @media(max-width:520px){ .v3-hero__tag{ left:10px; } }

  /* entity strip */
  .v3-entity { margin:56px 0 0; border-top:2px solid var(--v3-ink-deep); display:grid; grid-template-columns:repeat(5,1fr); }
  @media(max-width:900px){ .v3-entity{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:480px){ .v3-entity{ grid-template-columns:1fr; } }
  .v3-entity__cell { padding:22px 26px 22px 0; border-right:1px solid var(--v3-border); margin-right:26px; }
  .v3-entity__cell:last-child { border-right:none; margin-right:0; }
  @media(max-width:900px){ .v3-entity__cell{ border-right:none; margin-right:0; padding-right:0; border-bottom:1px solid var(--v3-border); } }
  .v3-entity__k { font-family:var(--mono); font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--v3-amber-deep); display:block; margin:0 0 8px; }
  .v3-entity__v { font-family:var(--sp-font-display); font-weight:700; font-size:19px; color:var(--v3-ink); line-height:1.2; margin:0; }

  /* ===================== 2. IN BRIEF ===================== */
  .v3-brief { display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start; }
  @media(max-width:860px){ .v3-brief{ grid-template-columns:1fr; gap:30px; } }
  .v3-facts { border-top:1px solid var(--v3-paper-border); }
  .v3-facts__row { display:grid; grid-template-columns:0.85fr 1.15fr; gap:24px; padding:20px 4px; border-bottom:1px solid var(--v3-paper-border); align-items:baseline; }
  @media(max-width:520px){ .v3-facts__row{ grid-template-columns:1fr; gap:5px; } }
  .v3-facts dt { font-family:var(--mono); font-size:12.5px; letter-spacing:1px; text-transform:uppercase; color:var(--v3-amber-deep); margin:0; }
  .v3-facts dd { margin:0; font-family:var(--sp-font-display); font-weight:600; color:var(--v3-ink); font-size:19px; }
  .v3-facts__k { font-family:var(--mono); font-size:12.5px; letter-spacing:1px; text-transform:uppercase; color:var(--v3-amber-deep); margin:0; }
  .v3-facts__v { margin:0; font-family:var(--sp-font-display); font-weight:600; color:var(--v3-ink); font-size:19px; }

  /* ===================== 3. PROBLEM (dark) ===================== */
  .v3-problem__quote { font-family:var(--sp-font-display); font-weight:700; font-size:clamp(28px,4.4vw,56px); line-height:1.12; color:#fff; margin:0 0 22px; max-width:18ch; text-wrap:balance; letter-spacing:-.01em; }
  .v3-problem__cite { font:var(--sp-body-lg); color:rgba(255,255,255,.72); margin:0 0 52px; max-width:60ch; }
  .v3-split2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media(max-width:700px){ .v3-split2{ grid-template-columns:1fr; } }
  .v3-tile { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--sp-radius-lg); padding:34px 36px; display:flex; flex-direction:column; }
  .v3-tile__lab { font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; margin:0 0 14px; display:inline-flex; align-items:center; gap:9px; order:-1; }
  .v3-tile.is-human .v3-tile__lab { color:#6FE3AC; }
  .v3-tile.is-ai .v3-tile__lab { color:#9DB4FF; }
  .v3-tile__lab::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
  .v3-tile h3 { font-family:var(--sp-font-display); font-weight:700; font-size:23px; color:#fff; margin:0 0 12px; }
  .v3-tile p { font:var(--sp-body-sm); color:rgba(255,255,255,.74); margin:0; }

  /* ===================== 4. PROOF ===================== */
  .v3-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--v3-border); border-radius:var(--sp-radius-xl); overflow:hidden; background:#fff; }
  @media(max-width:760px){ .v3-proof{ grid-template-columns:1fr; } }
  .v3-proof__card { padding:48px 36px; text-align:center; border-right:1px solid var(--v3-border); }
  .v3-proof__card:last-child { border-right:none; }
  @media(max-width:760px){ .v3-proof__card{ border-right:none; border-bottom:1px solid var(--v3-border); } .v3-proof__card:last-child{ border-bottom:none; } }
  .v3-proof__num { font-family:var(--sp-font-display); font-weight:800; font-size:clamp(50px,6vw,72px); color:var(--v3-amber); line-height:1; letter-spacing:-.02em; }
  .v3-proof__num--text { font-size:clamp(34px,4vw,48px); letter-spacing:0; }
  .v3-proof__label { font:var(--sp-body); color:var(--v3-muted); margin-top:16px; }
  .v3-updated { text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--v3-muted); margin-top:28px; display:flex; align-items:center; justify-content:center; gap:9px; }
  .v3-updated .dot { width:8px; height:8px; border-radius:50%; background:var(--v3-green); flex:none; }

  /* ===================== 5. TIMELINE ===================== */
  .v3-tl-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
  @media(max-width:820px){ .v3-tl-grid{ grid-template-columns:1fr; } }
  .v3-tl { position:relative; padding:0 26px; }
  @media(max-width:820px){ .v3-tl{ padding:0 0 36px 38px; } }
  .v3-tl__line { position:absolute; top:10px; left:0; right:0; height:2px; background:var(--v3-border); }
  @media(max-width:820px){ .v3-tl__line{ top:0; bottom:0; left:9px; right:auto; width:2px; height:auto; } }
  .v3-tl:first-child .v3-tl__line { left:50%; }
  .v3-tl:last-child .v3-tl__line { right:50%; }
  @media(max-width:820px){ .v3-tl:first-child .v3-tl__line,.v3-tl:last-child .v3-tl__line{ left:9px; right:auto; } }
  .v3-tl__dot { position:absolute; top:0; left:26px; width:20px; height:20px; border-radius:50%; background:var(--v3-amber); box-shadow:0 0 0 5px var(--v3-amber-surf); }
  @media(max-width:820px){ .v3-tl__dot{ left:0; top:2px; } }
  .v3-tl__year { font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:1px; color:var(--v3-amber-deep); margin:42px 0 10px; }
  @media(max-width:820px){ .v3-tl__year{ margin:0 0 8px; } }
  .v3-tl__title { font-family:var(--sp-font-display); font-weight:700; font-size:20px; color:var(--v3-ink); margin:0 0 8px; }
  .v3-tl__body { font:var(--sp-body-sm); color:var(--v3-muted); margin:0; }

  /* ===================== 6. DIFFERENTIATORS (editorial) ===================== */
  .v3-diff { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media(max-width:900px){ .v3-diff{ grid-template-columns:1fr 1fr; } }
  @media(max-width:600px){ .v3-diff{ grid-template-columns:1fr; } }
  .v3-diff__card { background:#fff; border:1px solid var(--v3-paper-border); border-radius:var(--sp-radius-lg); padding:34px 32px; transition:transform .18s, box-shadow .18s, border-color .18s; }
  .v3-diff__card:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(20,22,46,.12); border-color:transparent; }
  .v3-diff__idx { font-family:var(--mono); font-size:13px; letter-spacing:1px; color:var(--v3-amber-deep); display:flex; align-items:center; gap:12px; margin:0 0 22px; }
  .v3-diff__idx::after { content:""; flex:1; height:1px; background:var(--v3-paper-border); }
  .v3-diff__card h3 { font-family:var(--sp-font-display); font-weight:700; font-size:21px; margin:0 0 10px; color:var(--v3-ink); }
  .v3-diff__card p { font:var(--sp-body-sm); color:var(--v3-muted); margin:0; }
  .v3-diff__card .v3-diff__idx { font-family:var(--mono); font-size:13px; letter-spacing:1px; color:var(--v3-amber-deep); display:flex; align-items:center; gap:12px; margin:0 0 22px; }

  /* ===================== 7. TRUST ===================== */
  .v3-logos { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; max-width:1040px; margin:0 auto; }
  .v3-logo-cell { flex:0 0 auto; width:198px; height:96px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--v3-border); border-radius:16px; padding:0 22px; }
  .v3-logo-cell img { max-height:40px; max-width:130px; width:auto; object-fit:contain; opacity:.72; filter:grayscale(1); transition:opacity .2s, filter .2s; }
  .v3-logo-cell:hover img { opacity:1; filter:grayscale(0); }
  @media(max-width:620px){ .v3-logo-cell{ width:calc(50% - 8px); height:84px; } }
  .v3-trust-links { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
  @media(max-width:760px){ .v3-trust-links{ grid-template-columns:1fr; } }
  .v3-trust-link { background:#fff; border:1px solid var(--v3-border); border-radius:var(--sp-radius-lg); padding:28px 30px; text-decoration:none; display:block; transition:transform .16s, box-shadow .16s; }
  .v3-trust-link:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(20,22,46,.10); }
  .v3-trust-link h4 { font-family:var(--sp-font-display); font-weight:700; font-size:19px; margin:0 0 8px; color:var(--v3-ink); display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .v3-trust-link h4 svg { width:18px; height:18px; color:var(--v3-amber); flex:none; transition:transform .16s; }
  .v3-trust-link:hover h4 svg { transform:translate(3px,-3px); }
  .v3-trust-link p { font:var(--sp-caption); color:var(--v3-muted); margin:0; }
  .v3-trust-link__title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; }
  .v3-trust-link__title svg { width:18px; height:18px; color:var(--v3-amber); flex:none; transition:transform .16s; }
  .v3-trust-link:hover .v3-trust-link__title svg { transform:translate(3px,-3px); }
  .v3-trust-link__heading { font-family:var(--sp-font-display); font-weight:700; font-size:19px; margin:0; color:var(--v3-ink); }
  .v3-trust-link__body { font:var(--sp-caption); color:var(--v3-muted); margin:0; }

  /* ===================== 8. PEOPLE ===================== */
  .v3-people { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media(max-width:860px){ .v3-people{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
  .v3-person { background:#fff; border:1px solid var(--v3-border); border-radius:var(--sp-radius-lg); padding:34px; box-shadow:0 10px 34px rgba(48,58,242,.08); }
  .v3-person__photo { width:124px; height:124px; border-radius:50%; margin:0 auto 22px; background:repeating-linear-gradient(135deg,var(--v3-paper),var(--v3-paper) 9px,var(--v3-amber-surf) 9px,var(--v3-amber-surf) 18px); display:flex; align-items:center; justify-content:center; border:1px solid var(--v3-paper-border); }
  .v3-person__photo span { font-family:var(--mono); font-size:11px; color:var(--v3-amber-deep); letter-spacing:1px; }
  .v3-person { text-align:center; }
  .v3-person__name { font-family:var(--sp-font-display); font-weight:700; font-size:21px; margin:0 0 4px; color:var(--v3-ink); }
  .v3-person__role { font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--v3-amber-deep); margin:0 0 16px; }
  .v3-person__bio { font:var(--sp-body-sm); color:var(--v3-muted); margin:0 0 18px; }
  .v3-person__contact { font-family:var(--sp-font-medium); font-weight:600; font-size:14px; color:var(--v3-blue); text-decoration:none; border-top:1px solid var(--v3-border); padding-top:16px; display:block; }
  .v3-person__contact:hover { color:var(--v3-blue-700); }

  /* ===================== 9. RESPONSIBLE AI ===================== */
  .v3-rai { display:grid; grid-template-columns:1.02fr 0.98fr; gap:52px; align-items:start; }
  @media(max-width:860px){ .v3-rai{ grid-template-columns:1fr; gap:30px; } }
  .v3-rai p { font:var(--sp-body); color:var(--v3-muted); margin:0 0 16px; }
  .v3-rai__panel { background:var(--v3-ink-deep); border-radius:var(--sp-radius-xl); padding:14px 34px; box-shadow:0 24px 56px rgba(20,22,46,.22); }
  .v3-rai__panel ul { margin:0; padding:0; list-style:none; }
  .v3-rai__panel li { display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.1); }
  .v3-rai__panel li:last-child { border-bottom:none; }
  .v3-rai__panel .ic { width:28px; height:28px; flex:none; border-radius:8px; background:var(--ac-dot); color:var(--v3-amber); display:flex; align-items:center; justify-content:center; margin-top:1px; }
  .v3-rai__panel .ic svg { width:15px; height:15px; }
  .v3-rai__panel b { font-family:var(--sp-font-medium); font-weight:700; color:#fff; font-size:16px; display:block; margin-bottom:3px; }
  .v3-rai__panel span { font:var(--sp-caption); color:rgba(255,255,255,.66); }
  .v3-list-title { font-family:var(--sp-font-medium); font-weight:700; color:#fff; font-size:16px; display:block; margin:0 0 3px; }
  .v3-list-body { font:var(--sp-caption); color:rgba(255,255,255,.66); margin:0; }
  .v3-rai__panel .v3-list-title {
    font-family: var(--sp-font-medium);
    font-weight: 700;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    display: block;
    margin: 0 0 3px;
  }
  .v3-rai__panel .v3-list-body {
    font: var(--sp-caption);
    color: rgba(255,255,255,.66);
    margin: 0;
  }

  /* ===================== 10. FAQ ===================== */
  .v3-faq { max-width:920px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
  .v3-faq__item { border:1px solid var(--v3-border); border-radius:var(--sp-radius-lg); background:#fff; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
  .v3-faq__item.is-open { border-color:transparent; box-shadow:0 16px 40px rgba(20,22,46,.10); }
  details.v3-faq__item[open] { border-color:transparent; box-shadow:0 16px 40px rgba(20,22,46,.10); }
  .v3-faq__q { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 28px; cursor:pointer; font-family:var(--sp-font-display); font-weight:700; font-size:19px; color:var(--v3-ink); }
  details.v3-faq__item > summary.v3-faq__q { list-style:none; }
  details.v3-faq__item > summary.v3-faq__q::-webkit-details-marker { display:none; }
  .v3-faq__q .chev { width:16px; height:16px; flex:none; color:var(--v3-amber); transition:transform .2s; }
  .v3-faq__item.is-open .chev { transform:rotate(180deg); }
  details.v3-faq__item[open] .chev { transform:rotate(180deg); }
  .v3-faq__a { max-height:0; overflow:hidden; transition:max-height .26s ease, padding .26s ease; padding:0 28px; }
  .v3-faq__a p { font:var(--sp-body-sm); color:var(--v3-muted); margin:0; }
  .v3-faq__item.is-open .v3-faq__a { max-height:520px; padding:0 28px 24px; }
  details.v3-faq__item[open] .v3-faq__a { max-height:520px; padding:0 28px 24px; }

  /* ===================== 11. FINAL CTA (dark) ===================== */
  .v3-final { text-align:center; }
  .v3-final h2 { font-family:var(--sp-font-display); font-weight:700; font-size:clamp(30px,4vw,52px); color:#fff; margin:0 auto 18px; max-width:20ch; text-wrap:balance; line-height:1.08; }
  .v3-final p { color:rgba(255,255,255,.8); font:var(--sp-body-lg); margin:0 auto 36px; max-width:54ch; }
  .v3-final__cta { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

  /* ---- team band (atmosphere image + capabilities) ---- */
  .v3-team { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
  @media(max-width:860px){ .v3-team{ grid-template-columns:1fr; gap:30px; } }
  .v3-team__media { border-radius:var(--sp-radius-lg); overflow:hidden; box-shadow:0 24px 56px rgba(20,22,46,.18); aspect-ratio:3/2; }
  .v3-team__media img { width:100%; height:100%; object-fit:cover; display:block; }
  .v3-team__pts { list-style:none; margin:22px 0 30px; padding:0; display:flex; flex-direction:column; gap:18px; }
  .v3-team__pts li { display:flex; gap:14px; align-items:flex-start; }
  .v3-team__pts .n { font-family:var(--mono); font-size:12px; letter-spacing:1px; color:var(--ac-deep); flex:none; margin-top:4px; }
  .v3-team__pts b { display:block; font-family:var(--sp-font-display); font-weight:700; font-size:18px; color:var(--v3-ink); margin-bottom:3px; }
  .v3-team__pts span { font:var(--sp-body-sm); color:var(--v3-muted); }
  .v3-team__pt-title { display:block; font-family:var(--sp-font-display); font-weight:700; font-size:18px; color:var(--v3-ink); margin:0 0 3px; }
  .v3-team__pt-body { font:var(--sp-body-sm); color:var(--v3-muted); margin:0; }

  /* ---- recognition / award band ---- */
  .v3-award { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
  @media(max-width:860px){ .v3-award{ grid-template-columns:1fr; gap:30px; } }
  @media(max-width:860px){ .v3-award > div:last-child{ order:-1; } }
  .v3-award__media { border-radius:var(--sp-radius-lg); overflow:hidden; box-shadow:0 24px 56px rgba(20,22,46,.18); aspect-ratio:4/3; }
  .v3-award__media img { width:100%; height:100%; object-fit:cover; display:block; }
  .v3-award__cap { font-family:var(--mono); font-size:11.5px; letter-spacing:.5px; color:var(--v3-muted); margin:12px 2px 0; }
  .v3-award p.lead { font:var(--sp-body); color:var(--v3-muted); margin:16px 0 22px; }
  .v3-award__tags { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; }
  .v3-award__tag { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:var(--ac-surf); color:var(--ac-deep); font-family:var(--sp-font-medium); font-weight:700; font-size:14px; }
  .v3-award__link { font-family:var(--sp-font-medium); font-weight:600; font-size:15px; color:var(--v3-blue); text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
  .v3-award__link:hover { text-decoration:underline; }

  /* ---- office video band ---- */
  .v3-video { max-width:1000px; margin:0 auto; border-radius:18px; overflow:hidden; box-shadow:0 30px 70px rgba(20,22,46,.22); border:1px solid var(--v3-border); aspect-ratio:16/9; }
  .v3-video iframe { width:100%; height:100%; border:0; display:block; }

  /* ---- company information + map ---- */
  .v3-company { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch; }
  @media(max-width:860px){ .v3-company{ grid-template-columns:1fr; gap:30px; } }
  .v3-coinfo { border-top:1px solid var(--v3-paper-border); margin:0; align-self:start; }
  .v3-coinfo__row { display:grid; grid-template-columns:0.8fr 1.2fr; gap:24px; padding:18px 4px; border-bottom:1px solid var(--v3-paper-border); align-items:baseline; }
  @media(max-width:520px){ .v3-coinfo__row{ grid-template-columns:1fr; gap:5px; } }
  .v3-coinfo dt { font-family:var(--mono); font-size:12.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ac-deep); margin:0; }
  .v3-coinfo dd { margin:0; font-family:var(--sp-font-display); font-weight:600; color:var(--v3-ink); font-size:18px; }
  .v3-coinfo dd a { color:var(--v3-blue); text-decoration:none; }
  .v3-coinfo dd a:hover { text-decoration:underline; }
  .v3-coinfo__k { font-family:var(--mono); font-size:12.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ac-deep); margin:0; }
  .v3-coinfo__v { margin:0; font-family:var(--sp-font-display); font-weight:600; color:var(--v3-ink); font-size:18px; }
  .v3-coinfo__v a { color:var(--v3-blue); text-decoration:none; }
  .v3-coinfo__v a:hover { text-decoration:underline; }
  .v3-map { border-radius:18px; overflow:hidden; border:1px solid var(--v3-border); min-height:380px; box-shadow:0 18px 44px rgba(20,22,46,.10); }
  .v3-map iframe { width:100%; height:100%; min-height:380px; border:0; display:block; }
  .v3-coinfo-photo { border-radius:var(--sp-radius-lg); overflow:hidden; margin-bottom:26px; box-shadow:0 18px 44px rgba(20,22,46,.16); aspect-ratio:16/10; }
  .v3-coinfo-photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* WordPress content-area integration */
body.skyplanner-about-v2-page .inside-article,
body.skyplanner-about-v2-page .entry-content,
body.skyplanner-about-v2-page .site-main {
  margin: 0;
  padding: 0;
  max-width: none;
}
body.skyplanner-about-v2-page.separate-containers .inside-article {
  padding: 0;
}
body.skyplanner-about-v2-page .entry-header {
  display: none;
}
.sp-about-v2 .wp-block-group__inner-container {
  max-width: none;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sp-about-v2 .v3-hero__frame--video video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: #07123a;
}

/* Fidelity rescue: GeneratePress global heading rules load with stronger page
   context than the design selectors. Re-assert the approved About v2 type scale
   only inside this page root. */
body.skyplanner-about-v2-page .sp-about-v2 .v3-h2 {
  font-family: var(--sp-font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.6vw, 46px) !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  color: var(--v3-ink) !important;
  text-wrap: balance;
}

body.skyplanner-about-v2-page .sp-about-v2 .v3-sec--dark .v3-h2 {
  color: #fff !important;
}

body.skyplanner-about-v2-page .sp-about-v2 .v3-diff__card h3 {
  font-family: var(--sp-font-display) !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  line-height: 30px !important;
  margin: 0 0 10px !important;
  color: var(--v3-ink) !important;
}

body.skyplanner-about-v2-page .sp-about-v2 .v3-diff__idx {
  font-size: 16px !important;
  line-height: 23px !important;
  margin: 0 !important;
}

body.skyplanner-about-v2-page .sp-about-v2 .v3-trust-link h4 {
  font-family: var(--sp-font-display) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  line-height: 30px !important;
  margin: 0 0 8px !important;
  color: var(--v3-ink) !important;
}

body.skyplanner-about-v2-page .sp-about-v2 .v3-final h2 {
  font-family: var(--sp-font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  line-height: 1.08 !important;
  color: #fff !important;
  margin: 0 auto 18px !important;
  max-width: 20ch !important;
  text-wrap: balance;
}