/*
==========================================================================
SPROUT DESIGN SYSTEM · sprout.css
Loaded on every page by the Ohio-Child theme (inc/sprout-assets.php).
==========================================================================

HOW TO USE
  Wrap each page's Elementor HTML widget in one root element:
      <div class="sp" id="sp-home"> ... </div>
  Everything in this file only applies inside an element with class "sp",
  so the Ohio theme's header, footer and other widgets are untouched.

  Shared classes start with "sp-". Page-only classes start with the page's
  own prefix (for example "home-") and live in that page's widget <style>,
  scoped to the page id (for example #sp-home).

SCOPE AND SPECIFICITY
  Rules are written as  :is(#sp,.sp) .sp-btn
  :is() takes the specificity of its strongest argument (the id), so these
  rules beat the theme's own element styles while still matching any
  element with class "sp". No element needs id="sp".

CONTENTS
  1. Tokens          5. Cards and choices      9. Reviews and carousel
  2. Base            6. Dates and prices      10. FAQ
  3. Layout          7. Tabs and toggles      11. Sticky bar and dialog
  4. Type, buttons   8. Lists and people      12. Forms
                                              13. Motion
                                              14. Responsive
==========================================================================
*/

/* 1. TOKENS ============================================================ */
:root{
  /* Brand */
  --sp-lime:#70BF44;
  --sp-lime-dark:#4d8f2a;
  --sp-lime-tint:#eef6e8;
  --sp-lime-line:#d6ebc8;
  --sp-purple:#603075;
  --sp-purple-dark:#3B1F49;
  --sp-mustard:#FEC124;
  --sp-mustard-tint:#fff3d6;
  --sp-mustard-ink:#8a5d00;
  --sp-pink:#EE4A62;
  --sp-pink-tint:#fce4e8;
  --sp-whatsapp:#1d9b4f;

  /* Age tracks */
  --sp-track-spark:var(--sp-lime);
  --sp-track-teen:var(--sp-mustard);
  --sp-track-star:var(--sp-pink);

  /* Text */
  --sp-ink:#302438;
  --sp-body:#55445e;
  --sp-muted:#5f5266;
  --sp-on-dark:#ffffff;
  --sp-on-dark-body:#e2d6e8;
  --sp-on-dark-muted:#cdbbd6;
  --sp-on-dark-label:#f9d568;

  /* Surfaces (no pure white page backgrounds) */
  --sp-cream:#fffdf7;
  --sp-lilac:#f6f1f8;
  --sp-blush:#f6edf2;
  --sp-mist:#faf6f9;
  --sp-mint:#f2f8ee;
  --sp-card:#ffffff;
  --sp-placeholder:#ece5f1;

  /* Lines */
  --sp-line:#ddd6df;
  --sp-line-soft:#e3dae7;
  --sp-line-strong:#bfb2c5;
  --sp-line-on-dark:#ffffff40;

  /* Type */
  --sp-font-title:"Roboto Slab",Georgia,serif;
  --sp-font-body:Arial,Helvetica,sans-serif;
  --sp-h1:clamp(38px,4.8vw,66px);
  --sp-h2:clamp(30px,3.4vw,46px);
  --sp-h3:clamp(20px,1.9vw,25px);

  /* Shape and depth */
  --sp-radius-sm:10px;
  --sp-radius:14px;
  --sp-radius-lg:18px;
  --sp-radius-xl:28px;
  --sp-shadow-sm:0 10px 24px #3b1f4922;
  --sp-shadow:0 14px 30px #3b1f4914;
  --sp-shadow-lg:0 24px 60px #3b1f4914;
  --sp-shadow-xl:0 30px 50px #3b1f492e;

  /* Layout */
  --sp-max:1180px;
  --sp-gutter:40px;
  --sp-section:96px;

  /* Motion (see .claude/skills/sprout-motion) */
  --sp-ease:cubic-bezier(.2,.7,.2,1);
  --sp-ease-ui:cubic-bezier(.2,.8,.2,1);
  --sp-fast:.25s;
  --sp-ui:.35s;
  --sp-swap:.45s;
  --sp-reveal:.7s;
  --sp-stagger:60ms;
}

/* 2. BASE ============================================================== */
:is(#sp,.sp){font:400 17px/1.65 var(--sp-font-body);color:var(--sp-ink);background:var(--sp-cream);text-align:left;isolation:isolate;overflow-x:clip;-webkit-font-smoothing:antialiased}
:is(#sp,.sp) *,:is(#sp,.sp) *::before,:is(#sp,.sp) *::after{box-sizing:border-box}
:is(#sp,.sp) :is(h1,h2,h3,h4,p,ul,ol,figure,blockquote){margin:0;padding:0;color:inherit}
:is(#sp,.sp) :is(h1,h2,h3,h4){font-family:var(--sp-font-title);font-weight:500;line-height:1.15;letter-spacing:-.03em;text-transform:none;color:var(--sp-purple-dark)}
:is(#sp,.sp) h1{font-size:var(--sp-h1)}
:is(#sp,.sp) h2{font-size:var(--sp-h2)}
:is(#sp,.sp) h3{font-size:var(--sp-h3)}
:is(#sp,.sp) h4{font-size:19px}
:is(#sp,.sp) :is(button,input,select,textarea){font:inherit;text-transform:none;letter-spacing:normal}
:is(#sp,.sp) button{cursor:pointer}
:is(#sp,.sp) a{color:inherit;text-decoration:none}
:is(#sp,.sp) img{display:block;max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
:is(#sp,.sp) [hidden]{display:none!important}
:is(#sp,.sp) :is(button,a,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--sp-purple);outline-offset:4px}
:is(#sp,.sp) [id]{scroll-margin-top:90px}
:is(#sp,.sp) .sp-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 3. LAYOUT ============================================================ */
:is(#sp,.sp) .sp-wrap{width:min(var(--sp-max),calc(100% - var(--sp-gutter)*2));margin-inline:auto;position:relative}
:is(#sp,.sp) .sp-section{padding-block:var(--sp-section);position:relative}
:is(#sp,.sp) .sp-section.is-tight{padding-block:52px}

/* Section backgrounds */
:is(#sp,.sp) .sp-bg-cream{background:var(--sp-cream)}
:is(#sp,.sp) .sp-bg-lilac{background:linear-gradient(180deg,var(--sp-lilac) 0%,var(--sp-cream) 60%)}
:is(#sp,.sp) .sp-bg-mint{background:linear-gradient(170deg,var(--sp-mint) 0%,var(--sp-cream) 70%)}
:is(#sp,.sp) .sp-bg-blush{background:var(--sp-blush)}
:is(#sp,.sp) .sp-bg-mist{background:var(--sp-mist)}
:is(#sp,.sp) .sp-dark{background:var(--sp-purple-dark);color:var(--sp-on-dark)}
:is(#sp,.sp) .sp-dark :is(h1,h2,h3,h4){color:var(--sp-on-dark)}

/* Slow drifting color glow behind a section. Add to any section. */
:is(#sp,.sp) .sp-glow{position:relative;overflow:hidden}
:is(#sp,.sp) .sp-glow::before{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 88% 18%,#ee4a6230,transparent 30%),radial-gradient(ellipse at 30% 100%,#603075aa,transparent 36%);animation:sp-drift 48s ease-in-out infinite alternate}
:is(#sp,.sp) .sp-glow:not(.sp-dark)::before{background:radial-gradient(ellipse at 72% 18%,#fec12440,transparent 24%),radial-gradient(ellipse at 92% 64%,#ee4a6220,transparent 25%),radial-gradient(ellipse at 30% 92%,#70bf441c,transparent 27%)}
:is(#sp,.sp) .sp-glow>*{position:relative;z-index:1}

/* Two-column layouts */
:is(#sp,.sp) .sp-split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
:is(#sp,.sp) .sp-split.is-wide-left{grid-template-columns:1.1fr .9fr}
:is(#sp,.sp) .sp-split.is-narrow-left{grid-template-columns:.75fr 1.25fr;align-items:start}
/* Section heading with a short note on the right */
:is(#sp,.sp) .sp-head-row{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;margin-bottom:36px}
:is(#sp,.sp) .sp-head-row>p{font-size:16px;color:var(--sp-body);max-width:440px}

/* 4. TYPE AND BUTTONS ================================================== */
/* Small uppercase label above a heading, with a pink dash */
:is(#sp,.sp) .sp-label{display:block;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1.4;margin-bottom:16px;color:var(--sp-purple)}
:is(#sp,.sp) .sp-label::before{content:"";display:inline-block;width:21px;height:3px;background:var(--sp-pink);vertical-align:middle;margin-right:10px}
:is(#sp,.sp) .sp-dark .sp-label{color:var(--sp-on-dark-label)}
:is(#sp,.sp) .sp-lead{font-size:18px;line-height:1.65;max-width:640px;margin-top:20px;color:var(--sp-body)}
:is(#sp,.sp) .sp-dark .sp-lead,:is(#sp,.sp) .sp-dark p{color:var(--sp-on-dark-body)}
:is(#sp,.sp) .sp-note{font-size:14px;line-height:1.55;color:var(--sp-body)}
:is(#sp,.sp) .sp-muted{color:var(--sp-muted)}
:is(#sp,.sp) .sp-stars{color:#e3a400;letter-spacing:1px}

:is(#sp,.sp) .sp-btn{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:54px;padding:14px 24px;border:1px solid var(--sp-purple-dark);border-radius:var(--sp-radius-sm);background:var(--sp-purple-dark);color:#fff;font-size:16px;font-weight:700;line-height:1.3;text-align:center;transition:transform var(--sp-fast),box-shadow var(--sp-fast),background var(--sp-fast)}
@media (hover:hover){
  :is(#sp,.sp) .sp-btn:hover{transform:translateY(-2px);box-shadow:var(--sp-shadow-sm)}
  :is(#sp,.sp) .sp-btn:hover span[aria-hidden]{transform:translate(3px,-2px)}
}
:is(#sp,.sp) .sp-btn:active{transform:translateY(0) scale(.98)}
:is(#sp,.sp) .sp-btn span[aria-hidden]{transition:transform var(--sp-fast)}
:is(#sp,.sp) .sp-btn-lime{background:var(--sp-lime);border-color:var(--sp-lime);color:var(--sp-purple-dark)}
:is(#sp,.sp) .sp-btn-ghost{background:transparent;color:var(--sp-purple-dark);border-color:var(--sp-line-strong)}
:is(#sp,.sp) .sp-btn-wa{background:var(--sp-whatsapp);border-color:var(--sp-whatsapp);color:#fff}
:is(#sp,.sp) .sp-btn.is-full{width:100%}
:is(#sp,.sp) .sp-dark .sp-btn-ghost{color:#fff;border-color:#ffffff59}
:is(#sp,.sp) .sp-dark .sp-btn:not(.sp-btn-lime,.sp-btn-wa,.sp-btn-ghost){background:#fff;border-color:#fff;color:var(--sp-purple-dark)}

/* Text link that is still a 44px tap target */
:is(#sp,.sp) .sp-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:16px;font-weight:700;color:var(--sp-purple-dark);text-decoration:underline;text-underline-offset:5px;text-decoration-color:#60307566;background:none;border:0;padding:0}
:is(#sp,.sp) .sp-dark .sp-link{color:#fff;text-decoration-color:#ffffff66}
:is(#sp,.sp) .sp-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:28px}
:is(#sp,.sp) .sp-actions.is-stack{flex-direction:column;align-items:stretch;gap:12px}

/* 5. CARDS AND CHOICES ================================================= */
/* White panel that holds a flow (finder, checkout step) */
:is(#sp,.sp) .sp-panel{padding:clamp(20px,3.4vw,40px);border:1px solid var(--sp-line-soft);border-radius:var(--sp-radius-xl);background:var(--sp-card);box-shadow:var(--sp-shadow-lg)}
:is(#sp,.sp) .sp-card{padding:24px;border:1px solid var(--sp-line-soft);border-radius:var(--sp-radius-lg);background:var(--sp-card)}

/* Step question heading inside a panel */
:is(#sp,.sp) .sp-step{animation:sp-in var(--sp-swap) var(--sp-ease) both}
:is(#sp,.sp) .sp-step-q{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:10px 0 18px}
:is(#sp,.sp) .sp-step-q h3{font-size:clamp(22px,2.2vw,28px);outline:none}
:is(#sp,.sp) .sp-step-q span{flex-shrink:0;font-size:13px;font-weight:700;color:var(--sp-muted)}

/* Choice tiles (one tap answers a question) */
:is(#sp,.sp) .sp-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
:is(#sp,.sp) .sp-tiles.is-3{grid-template-columns:repeat(3,1fr)}
:is(#sp,.sp) .sp-tiles.is-4{grid-template-columns:repeat(4,1fr)}
:is(#sp,.sp) .sp-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:118px;padding:20px;border:1.5px solid var(--sp-line);border-radius:var(--sp-radius);background:var(--sp-card);color:var(--sp-ink);text-align:left;transition:border-color var(--sp-fast),transform var(--sp-fast),box-shadow var(--sp-fast);animation:sp-in var(--sp-swap) var(--sp-ease) both;animation-delay:calc(var(--i,0)*var(--sp-stagger))}
@media (hover:hover){
  :is(#sp,.sp) .sp-tile:hover{border-color:var(--sp-lime);transform:translateY(-3px);box-shadow:var(--sp-shadow)}
  :is(#sp,.sp) .sp-tile:hover .sp-tile-arrow{background:var(--sp-lime);border-color:var(--sp-lime)}
  :is(#sp,.sp) .sp-tile.has-image:hover img{transform:scale(1.05)}
}
:is(#sp,.sp) .sp-tile:active{transform:scale(.98)}
:is(#sp,.sp) .sp-tile[aria-pressed=true],:is(#sp,.sp) .sp-tile.is-selected{border-color:var(--sp-lime);background:var(--sp-lime-tint)}
:is(#sp,.sp) .sp-tile strong{font:500 20px/1.25 var(--sp-font-title);color:var(--sp-purple-dark)}
:is(#sp,.sp) .sp-tile-sub{font-size:15px;color:var(--sp-muted);line-height:1.45}
:is(#sp,.sp) .sp-tile-price{margin-top:6px;font-size:15px;font-weight:700;color:var(--sp-purple-dark)}
:is(#sp,.sp) .sp-tile-tag{display:inline-block;margin-top:auto;padding-top:10px;font-size:13px;font-weight:700;color:var(--sp-lime-dark)}
:is(#sp,.sp) .sp-tile-tag.is-warn{color:var(--sp-mustard-ink)}
:is(#sp,.sp) .sp-tile-arrow{position:absolute;right:18px;top:18px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--sp-line);display:grid;place-items:center;color:var(--sp-purple-dark);font-size:15px;transition:background var(--sp-fast),border-color var(--sp-fast)}
:is(#sp,.sp) .sp-tile.has-image{padding:0;overflow:hidden;min-height:0}
:is(#sp,.sp) .sp-tile-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,var(--sp-placeholder),var(--sp-lime-tint))}
:is(#sp,.sp) .sp-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--sp-ease)}
:is(#sp,.sp) .sp-tile-body{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px;width:100%;flex:1}

/* An answer already chosen, with a Change button */
:is(#sp,.sp) .sp-picked{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:12px;border:1px solid var(--sp-lime-line);border-radius:12px;background:var(--sp-lime-tint);animation:sp-in var(--sp-ui) ease both}
:is(#sp,.sp) .sp-picked i{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--sp-lime);display:grid;place-items:center}
:is(#sp,.sp) .sp-picked i svg{width:12px;height:12px}
:is(#sp,.sp) .sp-picked div{flex:1;min-width:0}
:is(#sp,.sp) .sp-picked small{display:block;font-size:12px;color:var(--sp-muted)}
:is(#sp,.sp) .sp-picked strong{display:block;font:500 17px/1.3 var(--sp-font-title);color:var(--sp-purple-dark)}
:is(#sp,.sp) .sp-picked button{flex-shrink:0;min-height:44px;border:0;background:none;color:var(--sp-purple);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:4px}

/* Summary card at the end of a flow: details left, price and buttons right */
:is(#sp,.sp) .sp-summary{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:start;padding:26px;border-radius:var(--sp-radius-lg);background:linear-gradient(140deg,#f4faef,#fbf7fd);border:1px solid var(--sp-lime-line);animation:sp-in var(--sp-swap) ease both}
:is(#sp,.sp) .sp-summary .sp-label{margin-bottom:10px}
:is(#sp,.sp) .sp-summary h3{font-size:clamp(23px,2.3vw,30px);outline:none}
:is(#sp,.sp) .sp-summary .sp-checklist{margin-top:16px}
:is(#sp,.sp) .sp-summary-side{display:grid;gap:12px}
:is(#sp,.sp) .sp-summary-side .sp-btn{width:100%}

/* 6. DATES AND PRICES ================================================== */
/* Calendar-style date badge: <span class="sp-date"><small>Nov</small><strong>9</strong><small>Mon</small></span> */
:is(#sp,.sp) .sp-date{display:grid;justify-items:center;padding:10px 6px;border-radius:12px;background:#fff;color:var(--sp-purple-dark);line-height:1.1}
:is(#sp,.sp) .sp-date small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sp-purple)}
:is(#sp,.sp) .sp-date strong{font:500 30px/1.05 var(--sp-font-title)}
:is(#sp,.sp) .sp-date.is-adult{background:var(--sp-mustard)}
:is(#sp,.sp) .sp-date.is-child{background:#dff0d3}

/* Class listing card: date badge + title, details and a tag line */
:is(#sp,.sp) .sp-event{display:grid;grid-template-columns:78px 1fr;gap:18px;align-items:start;height:100%;padding:20px;border-radius:16px;background:var(--sp-card);border:1px solid var(--sp-line-soft);color:var(--sp-ink);transition:background var(--sp-ui),transform var(--sp-ui),border-color var(--sp-ui);animation:sp-rise .55s var(--sp-ease) both;animation-delay:calc(var(--i,0)*70ms)}
:is(#sp,.sp) .sp-event .sp-date{border:1px solid var(--sp-line-soft)}
:is(#sp,.sp) .sp-event b{display:block;font:500 19px/1.3 var(--sp-font-title);color:var(--sp-purple-dark)}
:is(#sp,.sp) .sp-event-sub{display:block;margin-top:4px;font-size:14px;color:var(--sp-body);line-height:1.5}
:is(#sp,.sp) .sp-event em{display:inline-block;margin-top:10px;font-style:normal;font-size:14px;font-weight:700;color:var(--sp-lime-dark)}
@media (hover:hover){:is(#sp,.sp) a.sp-event:hover{transform:translateY(-3px);border-color:var(--sp-lime)}}
:is(#sp,.sp) .sp-dark .sp-event{background:#ffffff0f;border-color:#ffffff26;color:#fff}
:is(#sp,.sp) .sp-dark .sp-event .sp-date{border:0}
:is(#sp,.sp) .sp-dark .sp-event b{color:#fff}
:is(#sp,.sp) .sp-dark .sp-event-sub{color:var(--sp-on-dark-body)}
:is(#sp,.sp) .sp-dark .sp-event em{color:#bfe6a6}
@media (hover:hover){:is(#sp,.sp) .sp-dark a.sp-event:hover{background:#ffffff1c;border-color:#ffffff4d}}
:is(#sp,.sp) .sp-events{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none}

/* Price box */
:is(#sp,.sp) .sp-price{padding:16px 18px;border-radius:var(--sp-radius);background:#fff;border:1px solid var(--sp-line-soft)}
:is(#sp,.sp) .sp-price small{display:block;font-size:13px;color:var(--sp-muted)}
:is(#sp,.sp) .sp-price strong{display:block;font:500 26px/1.25 var(--sp-font-title);color:var(--sp-purple-dark)}

/* Small status pill */
:is(#sp,.sp) .sp-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--sp-lime-tint);color:var(--sp-lime-dark);font-size:13px;font-weight:700;line-height:1.4}
:is(#sp,.sp) .sp-badge.is-warn{background:var(--sp-mustard-tint);color:var(--sp-mustard-ink)}
:is(#sp,.sp) .sp-badge.is-alert{background:var(--sp-pink-tint);color:#b0233a}
:is(#sp,.sp) .sp-badge.is-spark{background:var(--sp-lime-tint);color:var(--sp-lime-dark)}
:is(#sp,.sp) .sp-badge.is-teen{background:var(--sp-mustard-tint);color:var(--sp-mustard-ink)}
:is(#sp,.sp) .sp-badge.is-star{background:var(--sp-pink-tint);color:#b0233a}

/* 7. TABS AND TOGGLES ================================================== */
/* Underline tabs. Use with data-sp-tabs (sprout.js). Add data-sp-autoplay="9000" to rotate. */
:is(#sp,.sp) .sp-tabs{display:flex;gap:26px;border-bottom:1px solid var(--sp-line);margin:30px 0 26px}
:is(#sp,.sp) .sp-tabs [role=tab]{position:relative;min-height:48px;padding:8px 0 14px;border:0;background:transparent;color:var(--sp-muted);font-size:16px}
:is(#sp,.sp) .sp-tabs [role=tab][aria-selected=true]{color:var(--sp-purple-dark);font-weight:700}
:is(#sp,.sp) .sp-tabs [role=tab][aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--sp-pink);transform-origin:left;animation:sp-bar var(--sp-tab-time,0s) linear both}
:is(#sp,.sp) .sp-dark .sp-tabs{border-color:var(--sp-line-on-dark)}
:is(#sp,.sp) .sp-dark .sp-tabs [role=tab]{color:var(--sp-on-dark-body)}
:is(#sp,.sp) .sp-dark .sp-tabs [role=tab][aria-selected=true]{color:var(--sp-mustard)}
:is(#sp,.sp) .sp-dark .sp-tabs [role=tab][aria-selected=true]::after{background:var(--sp-mustard)}
:is(#sp,.sp) .sp-tabs.is-manual [role=tab]::after{animation:none!important}
:is(#sp,.sp) [role=tabpanel]:not([hidden]){animation:sp-in .55s ease both}

/* Pill toggle (two or three short choices) */
:is(#sp,.sp) .sp-pills{display:flex;gap:6px;padding:5px;border:1px solid #d6cbdc;border-radius:999px;background:#fffdf7e6;width:max-content;max-width:100%}
:is(#sp,.sp) .sp-pills button{min-height:44px;padding:8px 18px;border:0;border-radius:999px;background:transparent;color:var(--sp-purple-dark);font-size:14px;font-weight:700;transition:background var(--sp-fast),color var(--sp-fast)}
:is(#sp,.sp) .sp-pills button:is([aria-pressed=true],[aria-selected=true]){background:var(--sp-purple-dark);color:#fff}

/* 8. LISTS AND PEOPLE ================================================== */
/* Bulleted list with lime dots and dividers */
:is(#sp,.sp) .sp-checklist{list-style:none}
:is(#sp,.sp) .sp-checklist li{position:relative;padding:9px 0 9px 26px;border-top:1px solid #e1d8e5;font-size:16px}
:is(#sp,.sp) .sp-checklist li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--sp-lime)}

/* Numbered steps */
:is(#sp,.sp) .sp-steps{list-style:none;margin-top:28px;counter-reset:sp-step}
:is(#sp,.sp) .sp-steps li{counter-increment:sp-step;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--sp-line)}
:is(#sp,.sp) .sp-steps li::before{content:counter(sp-step);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--sp-purple-dark);color:#fff;font:500 17px var(--sp-font-title)}
:is(#sp,.sp) .sp-steps strong{display:block;font-size:17px;color:var(--sp-purple-dark)}
:is(#sp,.sp) .sp-steps p{font-size:15px;color:var(--sp-muted)}

/* Person card (coach, founder) */
:is(#sp,.sp) .sp-person{display:flex;flex-direction:column}
:is(#sp,.sp) .sp-person-img{aspect-ratio:4/5;overflow:hidden;border-radius:12px 12px 70px 12px;background:var(--sp-placeholder)}
:is(#sp,.sp) .sp-person.is-flip .sp-person-img{border-radius:70px 12px 12px 12px;background:#ffe5e9}
:is(#sp,.sp) .sp-person-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1s var(--sp-ease)}
@media (hover:hover){:is(#sp,.sp) .sp-person:hover img{transform:scale(1.04)}}
:is(#sp,.sp) .sp-person h3{margin-top:18px}
:is(#sp,.sp) .sp-person small{display:block;margin-top:4px;font-size:14px;font-weight:700;color:var(--sp-purple)}
:is(#sp,.sp) .sp-person p{margin-top:10px;font-size:15px;color:var(--sp-muted)}

/* Rounded image with one large corner, the Sprout shape */
:is(#sp,.sp) .sp-shape{border-radius:80px 12px 12px 12px;overflow:hidden}
:is(#sp,.sp) .sp-shape.is-right{border-radius:12px 80px 12px 12px}

/* 9. REVIEWS AND CAROUSEL ============================================== */
:is(#sp,.sp) .sp-score{display:flex;align-items:center;gap:16px}
:is(#sp,.sp) .sp-score b{font:500 52px/1 var(--sp-font-title);color:var(--sp-purple-dark)}
:is(#sp,.sp) .sp-score span{font-size:15px;color:var(--sp-body)}

/* Horizontal scroll track. Use with data-sp-track (sprout.js) */
:is(#sp,.sp) .sp-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/3);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px}
:is(#sp,.sp) .sp-track::-webkit-scrollbar{display:none}
:is(#sp,.sp) .sp-track>*{scroll-snap-align:start}
:is(#sp,.sp) .sp-track-controls{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:22px}
:is(#sp,.sp) .sp-arrows{display:flex;gap:10px}
:is(#sp,.sp) .sp-arrows button{width:50px;height:50px;border-radius:50%;border:1px solid #cdbfd1;background:#fff;color:var(--sp-purple-dark);font-size:20px;transition:border-color var(--sp-fast),transform var(--sp-fast)}
@media (hover:hover){:is(#sp,.sp) .sp-arrows button:hover{border-color:var(--sp-purple-dark)}}

:is(#sp,.sp) .sp-review{display:flex;flex-direction:column;min-height:280px;padding:24px;border-radius:var(--sp-radius-lg);background:#fff;border:1px solid #e8dde6}
:is(#sp,.sp) .sp-review header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
:is(#sp,.sp) .sp-review header strong{display:block;font-size:16px;color:var(--sp-purple-dark)}
:is(#sp,.sp) .sp-review header small{font-size:13px;color:var(--sp-muted)}
:is(#sp,.sp) .sp-review p{font-size:16px;line-height:1.6;color:#4a3c51;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
:is(#sp,.sp) .sp-review footer{margin-top:auto;padding-top:16px;font-size:13px;color:var(--sp-muted)}
:is(#sp,.sp) .sp-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--sp-purple);color:#fff;font-weight:700}
:is(#sp,.sp) .sp-avatar.is-pink{background:#d32069}
:is(#sp,.sp) .sp-avatar.is-lime{background:var(--sp-lime-dark)}
:is(#sp,.sp) .sp-avatar.is-mustard{background:#b97800}

/* 10. FAQ ============================================================== */
/* <div class="sp-faq" data-sp-accordion> <details><summary>Q</summary><p>A</p></details> ... */
:is(#sp,.sp) .sp-faq{border-top:1px solid var(--sp-line)}
:is(#sp,.sp) .sp-faq details{border-bottom:1px solid var(--sp-line)}
:is(#sp,.sp) .sp-faq summary{list-style:none;cursor:pointer;position:relative;padding:22px 44px 22px 0;font-weight:700;font-size:17px;color:var(--sp-purple-dark)}
:is(#sp,.sp) .sp-faq summary::-webkit-details-marker{display:none}
:is(#sp,.sp) .sp-faq summary::after{content:"+";position:absolute;right:0;top:16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--sp-lime-tint);color:var(--sp-purple-dark);font-size:22px;font-weight:400}
:is(#sp,.sp) .sp-faq details[open] summary::after{content:"\2212"}
:is(#sp,.sp) .sp-faq details>:not(summary){padding:0 40px 22px 0;font-size:16px;color:var(--sp-body);animation:sp-in var(--sp-ui) ease both}

/* 11. STICKY BAR AND DIALOG ============================================ */
/* Bottom action bar. Use with data-sp-sticky (sprout.js) */
:is(#sp,.sp) .sp-sticky{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));z-index:60;width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--sp-purple-dark);box-shadow:0 10px 30px #24112f40;transform:translate(-50%,140%);transition:transform var(--sp-ui) var(--sp-ease-ui)}
:is(#sp,.sp) .sp-sticky.is-on{transform:translate(-50%,0)}
:is(#sp,.sp) .sp-sticky .sp-btn{flex:1;min-height:50px;padding:10px 14px;font-size:15px}
:is(#sp,.sp) .sp-sticky .sp-btn-wa{flex:0 0 auto}

/* Full-screen video dialog. Opened by Sprout.video.open() or [data-sp-video] */
:is(#sp,.sp) .sp-vd{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
:is(#sp,.sp) .sp-vd::backdrop{background:#1c0f24e0}
:is(#sp,.sp) .sp-vd[open]{display:grid;place-items:center}
:is(#sp,.sp) .sp-vd-shell{position:relative;width:min(960px,calc(100% - 32px),calc((100dvh - 130px)*16/9))}
:is(#sp,.sp) .sp-vd-frame{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #0009;animation:sp-in .4s ease both}
:is(#sp,.sp) .sp-vd-frame iframe{display:block;width:100%;height:100%;border:0}
:is(#sp,.sp) .sp-vd-close{position:absolute;right:0;top:-56px;width:46px;height:46px;border:0;border-radius:50%;background:#ffffff26;color:#fff;font-size:28px;line-height:1}

/* Play button */
:is(#sp,.sp) .sp-play{flex:0 0 62px;width:62px;height:62px;border:0;border-radius:50%;background:var(--sp-mustard);color:var(--sp-purple-dark);display:grid;place-items:center;font-size:21px;animation:sp-pulse 2.8s ease-out infinite}

/* 12. FORMS ============================================================ */
:is(#sp,.sp) .sp-field{display:grid;gap:6px}
:is(#sp,.sp) .sp-field label{font-size:15px;font-weight:700;color:var(--sp-purple-dark)}
:is(#sp,.sp) .sp-field .sp-req{color:var(--sp-pink)}
:is(#sp,.sp) .sp-field :is(input,select,textarea){width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--sp-line);border-radius:var(--sp-radius-sm);background:#fff;color:var(--sp-ink);font-size:16px;transition:border-color var(--sp-fast),box-shadow var(--sp-fast)}
:is(#sp,.sp) .sp-field textarea{min-height:120px;resize:vertical}
:is(#sp,.sp) .sp-field :is(input,select,textarea):focus{border-color:var(--sp-purple);box-shadow:0 0 0 3px #60307526;outline:none}
:is(#sp,.sp) .sp-field.is-error :is(input,select,textarea){border-color:#c8243d}
:is(#sp,.sp) .sp-field-hint{font-size:14px;color:var(--sp-muted)}
:is(#sp,.sp) .sp-field-error{font-size:14px;font-weight:700;color:#b0233a}
:is(#sp,.sp) .sp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
:is(#sp,.sp) .sp-form-grid .is-wide{grid-column:1/-1}
:is(#sp,.sp) .sp-check{display:flex;align-items:flex-start;gap:12px;font-size:16px}
:is(#sp,.sp) .sp-check input{width:22px;height:22px;margin-top:2px;accent-color:var(--sp-lime-dark);flex-shrink:0}

/* 13. MOTION =========================================================== */
/* Reveal once on scroll. JS adds .is-pending, so content stays visible if JS fails. */
:is(#sp,.sp) .sp-reveal{transition:opacity var(--sp-reveal) ease,transform var(--sp-reveal) var(--sp-ease)}
:is(#sp,.sp) .sp-reveal.is-pending{opacity:0;transform:translateY(16px)}
/* Entrance on load: children rise one after another */
:is(#sp,.sp) .sp-rise>*{animation:sp-rise .8s var(--sp-ease) both}
:is(#sp,.sp) .sp-rise>:nth-child(2){animation-delay:.08s}
:is(#sp,.sp) .sp-rise>:nth-child(3){animation-delay:.16s}
:is(#sp,.sp) .sp-rise>:nth-child(4){animation-delay:.24s}
:is(#sp,.sp) .sp-rise>:nth-child(n+5){animation-delay:.32s}
:is(#sp,.sp) .sp-float{animation:sp-float 8s ease-in-out infinite}

@keyframes sp-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sp-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sp-float{50%{transform:translateY(-8px)}}
@keyframes sp-drift{to{transform:translate3d(-3%,3%,0) scale(1.08)}}
@keyframes sp-pulse{0%{box-shadow:0 0 0 0 #fec124b3,0 0 0 9px #ffffff14}70%,100%{box-shadow:0 0 0 22px #fec12400,0 0 0 9px #ffffff14}}
@keyframes sp-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 14. RESPONSIVE ======================================================= */
@media (max-width:1060px){
  :root{--sp-gutter:24px}
  :is(#sp,.sp) .sp-tiles.is-4{grid-template-columns:repeat(2,1fr)}
  :is(#sp,.sp) .sp-events{grid-template-columns:1fr 1fr}
  :is(#sp,.sp) :is(.sp-split,.sp-head-row){gap:44px}
}
@media (max-width:780px){
  :root{--sp-gutter:18px;--sp-section:66px}
  :is(#sp,.sp) :is(.sp-split,.sp-split.is-wide-left,.sp-split.is-narrow-left,.sp-head-row){grid-template-columns:1fr;gap:28px}
  :is(#sp,.sp) .sp-actions .sp-btn{width:100%}
  :is(#sp,.sp) .sp-events{grid-template-columns:1fr}
  :is(#sp,.sp) :is(.sp-tiles,.sp-tiles.is-3){grid-template-columns:1fr}
  :is(#sp,.sp) .sp-tiles.is-4{grid-template-columns:1fr 1fr;gap:10px}
  /* Picture tiles become one row each on phones: picture left, text right */
  :is(#sp,.sp) .sp-tiles:has(.sp-tile.has-image){grid-template-columns:1fr;gap:10px}
  :is(#sp,.sp) .sp-tile.has-image{flex-direction:row;align-items:stretch}
  :is(#sp,.sp) .sp-tile.has-image .sp-tile-img{flex:0 0 104px;width:104px;aspect-ratio:auto;min-height:118px;border-radius:0}
  :is(#sp,.sp) .sp-tile.has-image .sp-tile-body{padding:12px 14px 14px;gap:3px}
  :is(#sp,.sp) .sp-tile.has-image strong{font-size:18px}
  :is(#sp,.sp) .sp-tile.has-image .sp-tile-sub{font-size:14px;line-height:1.4}
  :is(#sp,.sp) .sp-tile.has-image .sp-tile-tag{font-size:13px;padding-top:6px}
  :is(#sp,.sp) .sp-panel{border-radius:20px;padding:16px}
  :is(#sp,.sp) .sp-summary{grid-template-columns:1fr;padding:20px}
  :is(#sp,.sp) .sp-step-q{flex-direction:column;gap:2px}
  :is(#sp,.sp) .sp-track{grid-auto-columns:min(86vw,340px)}
  :is(#sp,.sp) .sp-form-grid{grid-template-columns:1fr}
  :is(#sp,.sp) .sp-faq details>:not(summary){padding-right:0}
  :is(#sp,.sp) .sp-shape{border-radius:50px 12px 12px 12px}
  :is(#sp,.sp) .sp-shape.is-right{border-radius:12px 50px 12px 12px}
}
@media (prefers-reduced-motion:reduce){
  :is(#sp,.sp) *,:is(#sp,.sp) *::before,:is(#sp,.sp) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  :is(#sp,.sp) .sp-reveal.is-pending{opacity:1;transform:none}
}