/*
 * SkyPlanner customization-services v2.
 * Deterministic port from approved standalone HTML. Scoped to .sp-customization-services.
 */

/* ============================================================================
   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-customization-services {
  /* ==========================================================================
     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:           #008050;   /* accessible conversion CTA green */
  --sp-green-600:       #007346;   /* 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) {
  .sp-customization-services {
    /* 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;
}

body.skyplanner-customization-v2-page { overflow-x: clip; }
body.skyplanner-customization-v2-page .site-header { overflow-x: clip; }
body.rtl.skyplanner-customization-v2-page .main-navigation:not(.toggled) ul ul { left: -99999px !important; right: auto !important; }
body.rtl.skyplanner-customization-v2-page .main-navigation:not(.toggled) ul li:hover > ul,
body.rtl.skyplanner-customization-v2-page .main-navigation:not(.toggled) ul li.sfHover > ul { left: auto !important; right: 0 !important; }
.sp-customization-services,
.sp-customization-services *,
.sp-customization-services *::before,
.sp-customization-services *::after { box-sizing: border-box; }
.sp-customization-services { overflow-wrap: break-word; margin: 0; background: var(--sp-bg); color: var(--sp-text); font: var(--sp-body-lg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.sp-customization-services .wp-block-group { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
.sp-customization-services > .wp-block-group,
.sp-customization-services section.wp-block-group { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.sp-customization-services > .wp-block-group__inner-container,
.sp-customization-services section.wp-block-group > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.sp-customization-services img,
.sp-customization-services svg,
.sp-customization-services video { max-width: 100%; }
.sp-customization-services a { color: inherit; }
.sp-customization-services .sp-container { max-width: var(--sp-container); margin-inline: auto; padding-inline: var(--sp-gutter); }
.sp-customization-services .sp-section { padding-block: var(--sp-space-30); }
.sp-customization-services .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-customization-services .sp-btn:active { transform: translateY(1px); }
.sp-customization-services .sp-btn--green { background: var(--sp-green); color: #fff; }
.sp-customization-services .sp-btn--green:hover { background: var(--sp-green-600); box-shadow: var(--sp-shadow-soft); transform: translateY(-2px); }
.sp-customization-services .sp-btn--outline { background: #fff; color: var(--sp-ink); border-color: var(--sp-border); }
.sp-customization-services .sp-btn--outline:hover { border-color: var(--sp-blue); color: var(--sp-blue); box-shadow: var(--sp-shadow-card); }
.sp-customization-services .sp-btn--lg { padding: 20px 38px; font-size: 19px; }
.sp-customization-services .sp-btn:focus-visible { outline: 3px solid rgba(48,58,242,0.45); outline-offset: 2px; }
.sp-customization-services .sp-pill-tag { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--sp-radius-full); padding: 9px 18px; background: var(--sp-surface-blue); color: var(--sp-blue); font-family: var(--sp-font-medium); font-size: 15px; white-space: nowrap; }
.sp-customization-services .sp-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.sp-customization-services .sp-section-head .sp-h2 { font: var(--sp-h2) !important; margin-bottom: 20px; }
.sp-customization-services .sp-section-head p { font: var(--sp-body-lg); color: var(--sp-text-muted); margin: 0; }
@media (max-width: 600px) { .sp-customization-services .sp-section { padding-block: var(--sp-space-20); } .sp-customization-services .sp-section-head { margin-bottom: 36px; } }

.sp-nav__burger{ display:flex; } }

  /* =========================================================================
     PAGE-SCOPED STYLES — all rules sit under .cs2 so they map cleanly to a
     GeneratePress page root class and never leak into the global system.
     ========================================================================= */
  .cs2 .breadcrumb { padding:18px 0 0; font:var(--sp-caption); color:var(--sp-text-muted); }
  .cs2 .breadcrumb a { color:var(--sp-blue-700); text-decoration:underline; text-underline-offset:3px; }

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

  /* ---- HERO -------------------------------------------------------------- */
  .cs2 .hero { padding-block: 40px var(--sp-space-20); }
  .cs2 .hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
  .cs2 .hero h1 { font-family:var(--sp-font-display) !important; font-weight:700 !important; font-size:clamp(36px,4.6vw,58px) !important; line-height:1.06 !important; color:var(--sp-text); margin:0 0 22px; }
  .cs2 .hero h1 .accent { color:var(--sp-blue); }
  .cs2 .hero__lead { font:var(--sp-body-lg); color:var(--sp-text-muted); margin:0 0 22px; max-width:52ch; }
  .cs2 .hero__points { list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:12px; }
  .cs2 .hero__points li { display:flex; gap:12px; align-items:flex-start; font:var(--sp-body); color:var(--sp-text); }
  .cs2 .hero__points li b { font-family:var(--sp-font-medium); font-weight:700; }
  .cs2 .hero__points li::before { content:"\2713"; font-family:system-ui,"Segoe UI Symbol",sans-serif; width:22px; height:22px; flex:none; margin-top:2px; border-radius:6px; background:var(--sp-surface-blue); color:var(--sp-blue); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .cs2 .hero__actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
  @media(max-width:900px){ .cs2 .hero__grid{ grid-template-columns:1fr; gap:36px; } .cs2 .hero__diagram{ order:2; } }

  /* data-flow diagram card */
  .cs2 .flow { background:#fff; border:1px solid var(--sp-border); border-radius:var(--sp-radius-xl); box-shadow:var(--sp-shadow-card); padding:30px; }
  .cs2 .flow__cap { font:var(--sp-caption); font-family:var(--sp-font-medium); color:var(--sp-text-muted); letter-spacing:.4px; margin:0 0 20px; display:flex; align-items:center; gap:10px; }
  .cs2 .flow__cap::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--sp-green); flex:none; }
  .cs2 .tailor { list-style:none; margin:0 0 20px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .cs2 .tailor__item { display:flex; align-items:center; gap:12px; background:var(--sp-bg); border:1px solid var(--sp-border); border-radius:var(--sp-radius-md); padding:11px 14px; }
  .cs2 .tailor img { width:34px; height:34px; flex:none; }
  .cs2 .tailor span { font-family:var(--sp-font-medium); font-weight:600; font-size:14px; line-height:1.25; color:var(--sp-text); }
  .cs2 .flow__foot { font:var(--sp-caption); color:var(--sp-text); margin:0; border-top:1px solid var(--sp-border); padding-top:16px; display:flex; gap:10px; align-items:flex-start; }
  .cs2 .flow__foot b { font-family:var(--sp-font-medium); font-weight:700; color:var(--sp-blue); }
  @media(max-width:420px){ .cs2 .tailor{ grid-template-columns:1fr; } }

  /* ---- SECTION HEAD (left-aligned variant) ------------------------------ */
  .cs2 .head { max-width:62ch; margin:0 0 44px; }
  .cs2 .head h2 { font:var(--sp-h2) !important; font-size:clamp(28px,3.6vw,42px) !important; margin:0 0 16px; color:var(--sp-text); }
  .cs2 .head p { font:var(--sp-body-lg); color:var(--sp-text-muted); margin:0; }

  /* ---- WHEN IT MAKES SENSE — scenario grid ------------------------------ */
  .cs2 .scn { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  @media(max-width:880px){ .cs2 .scn{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .cs2 .scn{ grid-template-columns:1fr; } }
  .cs2 .scn__card { background:#fff; border:1px solid var(--sp-border); border-radius:var(--sp-radius-lg); padding:28px 26px; box-shadow:var(--sp-shadow-card); }
  .cs2 .scn__card img { width:52px; height:52px; margin:0 0 18px; display:block; }
  .cs2 .scn__card h3 { font-family:var(--sp-font-display) !important; font-weight:700 !important; font-size:19px !important; line-height:1.25 !important; margin:0 0 10px; color:var(--sp-text); }
  .cs2 .scn__card p { font:var(--sp-body-sm); color:var(--sp-text-muted); margin:0; }

  /* ---- CONFIGURE FIRST — three layers ----------------------------------- */
  .cs2 .layers { background:var(--sp-surface-blue); }
  .cs2 .layers__note { font:var(--sp-body); color:var(--sp-text); background:#fff; border-radius:var(--sp-radius-md); padding:16px 22px; margin:0 0 32px; display:flex; gap:12px; align-items:flex-start; box-shadow:var(--sp-shadow-card); }
  .cs2 .layers__note b { font-family:var(--sp-font-medium); font-weight:700; color:var(--sp-blue); }
  .cs2 .layers__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
  @media(max-width:880px){ .cs2 .layers__grid{ grid-template-columns:1fr; } }
  .cs2 .layer { background:#fff; border:1px solid var(--sp-border); border-radius:var(--sp-radius-lg); box-shadow:var(--sp-shadow-card); overflow:hidden; display:flex; flex-direction:column; }
  .cs2 .layer__head { display:flex; align-items:center; gap:15px; padding:22px 26px; border-bottom:1px solid var(--sp-border); }
  .cs2 .layer--1 .layer__head { background:var(--sp-surface-green); }
  .cs2 .layer--2 .layer__head { background:var(--sp-surface-blue); }
  .cs2 .layer--3 .layer__head { background:var(--sp-surface-purple); }
  .cs2 .layer__idx { width:46px; height:46px; flex:none; border-radius:var(--sp-radius-md); display:flex; align-items:center; justify-content:center; font-family:var(--sp-font-display-xb); font-weight:800; font-size:22px; color:#fff; }
  .cs2 .layer--1 .layer__idx { background:var(--sp-green); }
  .cs2 .layer--2 .layer__idx { background:var(--sp-blue); }
  .cs2 .layer--3 .layer__idx { background:#7C5CD6; }
  .cs2 .layer__head em { font-style:normal; display:block; }
  .cs2 .layer__step { display:block; font-family:var(--sp-font-medium); font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--sp-text-muted); margin:0 0 2px; }
  .cs2 .layer__label { display:block; font-family:var(--sp-font-medium); font-weight:700; font-size:15px; }
  .cs2 .layer--1 .layer__label { color:#096b43; }
  .cs2 .layer--2 .layer__label { color:var(--sp-blue); }
  .cs2 .layer--3 .layer__label { color:#5b3fb0; }
  .cs2 .layer__body { padding:26px 26px 14px; flex:1; }
  .cs2 .layer h3 { font-family:var(--sp-font-display) !important; font-weight:700 !important; font-size:21px !important; line-height:1.25 !important; margin:0 0 12px; color:var(--sp-text); }
  .cs2 .layer p { font:var(--sp-body-sm); color:var(--sp-text-muted); margin:0; }
  .cs2 .layer p.layer__when { font:var(--sp-caption); color:var(--sp-text); border-top:1px solid var(--sp-border); margin:0 26px; padding:16px 0 24px; }
  .cs2 .layer p.layer__when b { font-family:var(--sp-font-medium); font-weight:700; }

  /* ---- PROCESS TIMELINE -------------------------------------------------- */
  .cs2 .tl { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
  @media(max-width:880px){ .cs2 .tl{ grid-template-columns:1fr; gap:0; } }
  .cs2 .tl__step { position:relative; padding:0 22px; }
  .cs2 .tl__step:first-child { padding-left:0; }
  .cs2 .tl__step:last-child { padding-right:0; }
  .cs2 .tl__rail { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
  .cs2 .tl__num { width:52px; height:52px; flex:none; border-radius:50%; background:var(--sp-blue); color:#fff; font-family:var(--sp-font-display-xb); font-weight:800; font-size:22px; display:flex; align-items:center; justify-content:center; box-shadow:var(--sp-shadow-card); }
  .cs2 .tl__line { height:2px; flex:1; background:var(--sp-border); }
  .cs2 .tl__step:last-child .tl__line { background:transparent; }
  .cs2 .tl h3 { font-family:var(--sp-font-display) !important; font-weight:700 !important; font-size:19px !important; line-height:1.25 !important; margin:0 0 10px; color:var(--sp-text); }
  .cs2 .tl p { font:var(--sp-body-sm); color:var(--sp-text-muted); margin:0 0 16px; }
  .cs2 .tl__out { display:block; font:var(--sp-caption); color:var(--sp-text); background:var(--sp-surface-blue); border-radius:var(--sp-radius-md); padding:12px 14px; }
  .cs2 .tl__out b,
  .cs2 .tl__out-label { display:block; font-family:var(--sp-font-medium); font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--sp-blue); margin-bottom:4px; }
  @media(max-width:880px){
    .cs2 .tl__step { padding:0 0 0 32px; margin-bottom:28px; }
    .cs2 .tl__step:last-child { margin-bottom:0; }
    .cs2 .tl__step::before { content:""; position:absolute; left:25px; top:52px; bottom:-28px; width:2px; background:var(--sp-border); }
    .cs2 .tl__step:last-child::before { display:none; }
    .cs2 .tl__rail { margin-left:-32px; }
    .cs2 .tl__line { display:none; }
  }

  /* ---- EXAMPLES — grouped categories ------------------------------------ */
  .cs2 .cat { margin-bottom:40px; }
  .cs2 .cat:last-child { margin-bottom:0; }
  .cs2 .cat__head { display:flex; align-items:center; gap:14px; margin:0 0 22px; padding-bottom:14px; border-bottom:1px solid var(--sp-border); }
  .cs2 .cat__head h3 { font-family:var(--sp-font-display) !important; font-weight:700 !important; font-size:22px !important; line-height:1.25 !important; margin:0; color:var(--sp-text); }
  .cs2 .cat__head .sp-pill-tag { margin-left:auto; }
  .cs2 .exs { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  @media(max-width:1000px){ .cs2 .exs{ grid-template-columns:repeat(3,1fr); } }
  @media(max-width:760px){ .cs2 .exs{ grid-template-columns:1fr 1fr; } }
  @media(max-width:480px){ .cs2 .exs{ grid-template-columns:1fr; } }
  .cs2 .ex { background:#fff; border:1px solid var(--sp-border); border-radius:var(--sp-radius-md); padding:22px 20px; }
  .cs2 .ex img { width:42px; height:42px; margin:0 0 14px; display:block; }
  .cs2 .ex h4 { font-family:var(--sp-font-display) !important; font-weight:700 !important; font-size:16px !important; margin:0 0 7px; color:var(--sp-text); line-height:1.25 !important; }
  .cs2 .ex p { font:var(--sp-caption); color:var(--sp-text-muted); margin:0; }

  /* ---- CONTROLLED — principles ------------------------------------------ */
  .cs2 .principles { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media(max-width:880px){ .cs2 .principles{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .cs2 .principles{ grid-template-columns:1fr; } }
  .cs2 .pr { display:flex; gap:14px; align-items:flex-start; background:var(--sp-bg); border:1px solid var(--sp-border); border-radius:var(--sp-radius-md); padding:22px 22px; }
  .cs2 .pr__n { font-family:var(--sp-font-display-xb); font-weight:800; font-size:22px; color:var(--sp-blue); line-height:1; flex:none; opacity:1; }
  .cs2 .pr h3 { font-family:var(--sp-font-display) !important; font-weight:700 !important; font-size:17px !important; line-height:1.25 !important; margin:0 0 6px; color:var(--sp-text); }
  .cs2 .pr p { font:var(--sp-caption); color:var(--sp-text-muted); margin:0; }

  /* ---- PREPARE — checklist + side CTA ----------------------------------- */
  .cs2 .prep { background:var(--sp-surface-blue); }
  .cs2 .prep__grid { display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:start; }
  @media(max-width:860px){ .cs2 .prep__grid{ grid-template-columns:1fr; gap:28px; } }
  .cs2 .checklist { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
  .cs2 .checklist li { background:#fff; border-radius:var(--sp-radius-md); padding:18px 20px; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--sp-shadow-card); }
  .cs2 .checklist li::before { content:"\2713"; font-family:system-ui,"Segoe UI Symbol",sans-serif; width:24px; height:24px; flex:none; border-radius:6px; background:var(--sp-surface-green); color:#0c7a4d; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
  .cs2 .checklist b { display:block; font-family:var(--sp-font-medium); font-weight:700; font-size:16px; color:var(--sp-text); margin-bottom:3px; }
  .cs2 .checklist span { font:var(--sp-caption); color:var(--sp-text-muted); }
  .cs2 .prep__aside { background:#fff; border-radius:var(--sp-radius-lg); padding:32px 30px; box-shadow:var(--sp-shadow-card); position:sticky; top:118px; }
  .cs2 .prep__aside h3 { font-family:var(--sp-font-display) !important; font-weight:700 !important; font-size:22px !important; line-height:1.25 !important; margin:0 0 12px; color:var(--sp-text); }
  .cs2 .prep__aside p { font:var(--sp-body-sm); color:var(--sp-text-muted); margin:0 0 22px; }
  .cs2 .prep__aside .sp-btn { width:100%; margin-bottom:12px; }
  .cs2 .prep__aside .fine { font:var(--sp-caption); color:var(--sp-text-muted); text-align:center; margin:6px 0 0; }

  /* ---- FAQ (native details) --------------------------------------------- */
  .cs2 .faq { max-width:920px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; }
  .cs2 .faq details { background:#fff; border-radius:var(--sp-radius-pill); box-shadow:var(--sp-shadow-card); overflow:hidden; transition:border-radius .2s; }
  .cs2 .faq details[open] { background:var(--sp-blue); border-radius:var(--sp-radius-lg); }
  .cs2 .faq summary { 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); list-style:none; }
  .cs2 .faq summary::-webkit-details-marker { display:none; }
  .cs2 .faq summary::after { content:"\203A"; font-family:system-ui,sans-serif; flex:none; font-size:26px; line-height:1; color:var(--sp-blue); transform:rotate(90deg); transition:transform .2s; }
  .cs2 .faq details[open] summary { color:#fff; }
  .cs2 .faq details[open] summary::after { transform:rotate(-90deg); color:#fff; }
  .cs2 .faq .faq__a { padding:0 32px 24px; font:var(--sp-body-sm); color:rgba(255,255,255,.92); }
  .cs2 .faq details:not([open]) .faq__a { display:none; }
  @media(max-width:600px){ .cs2 .faq summary{ padding:18px 22px; font-size:17px; } .cs2 .faq .faq__a{ padding:0 22px 20px; } }

  /* ---- FINAL CTA --------------------------------------------------------- */
  .cs2 .final { background:var(--sp-blue) url("/wp-content/themes/generatepress-child/assets/img/customization-v2/source/7fffa117-c488-4334-a2ac-632dc9cb4575.jpg") center/cover no-repeat; border-radius:var(--sp-radius-xl); padding:64px 56px; text-align:center; overflow:hidden; }
  .cs2 .final h2 { font:var(--sp-h2) !important; font-size:clamp(30px,4.4vw,48px) !important; color:#fff; margin:0 0 16px; }
  .cs2 .final p { font:var(--sp-body-lg); color:rgba(255,255,255,.9); margin:0 auto 30px; max-width:60ch; }
  .cs2 .final__actions { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
  .cs2 .final p.final__after { font:var(--sp-caption); color:rgba(255,255,255,.8); margin:26px auto 0; }
  @media(max-width:600px){ .cs2 .final{ padding:44px 26px; } .cs2 .final__actions{ flex-direction:column; } .cs2 .final__actions .sp-btn{ width:100%; } }