/* ============================================================
   CreatorStore — shared embeddable widget styles
   All selectors class-only. No :root, html, body, img, a, p,
   h1-h6, button, span, div, section direct selectors.
   Root wrapper: <div class="cs-creatorstore">...</div>
   ============================================================ */

/* ============================================================
   DESIGN TOKENS (on .cs-creatorstore class, NOT :root)
   ============================================================ */
.cs-creatorstore{
  --cs-bg:#f1f1ef;
  --cs-surface:#ffffff;
  --cs-ink:#1a1a1a;
  --cs-ink-soft:#5b5b57;
  --cs-line:#e7e7e3;

  --cs-green:#c9e4ad;
  --cs-pink:#f7d4cf;
  --cs-blue:#c3dde8;
  --cs-lilac:#e2c9ef;
  --cs-yellow:#f4dd57;

  --cs-r-section:28px;
  --cs-r-card:16px;
  --cs-r-pill:999px;
  --cs-shadow-card:0 18px 40px -20px rgba(0,0,0,.25);
  --cs-shadow-float:0 12px 30px -12px rgba(0,0,0,.30);

  --cs-font-display:'Bricolage Grotesque',sans-serif;
  --cs-font-heavy:'Archivo Black',sans-serif;
  --cs-font-body:'Archivo',sans-serif;

  --cs-maxw:1280px;

  background:var(--cs-bg);
  color:var(--cs-ink);
  font-family:var(--cs-font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}

/* ============================================================
   UNIVERSAL RESET (scoped to descendants of .cs-creatorstore only)
   ============================================================ */
.cs-creatorstore,
.cs-creatorstore *,
.cs-creatorstore *::before,
.cs-creatorstore *::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* ============================================================
   SVG SPRITE HIDER
   ============================================================ */
.cs-sprite{position:absolute;width:0;height:0}

/* ============================================================
   LAYOUT
   ============================================================ */
.cs-wrap{max-width:var(--cs-maxw);margin:0 auto;padding:0 24px}
@media(max-width:560px){.cs-wrap{padding:0 16px}}

/* ============================================================
   COLOR UTILITY CLASSES (apply background by class)
   ============================================================ */
.cs-bg-green{background:var(--cs-green)}
.cs-bg-blue{background:var(--cs-blue)}
.cs-bg-lilac{background:var(--cs-lilac)}
.cs-bg-pink{background:var(--cs-pink)}
.cs-bg-yellow{background:var(--cs-yellow)}

/* ============================================================
   LINKS via classes
   ============================================================ */
.cs-link{color:inherit;text-decoration:none;cursor:pointer;display:inline}
.cs-link--accent{color:var(--cs-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   PILL LABEL
   ============================================================ */
.cs-pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
     letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--cs-line);
     background:var(--cs-surface);padding:8px 14px;border-radius:var(--cs-r-pill);color:var(--cs-ink)}
.cs-pill--ghost-white{background:rgba(255,255,255,.55);border:none}
.cs-pill--ghost-white-2{background:rgba(255,255,255,.5);border:none;margin-bottom:18px}
.cs-dot{width:12px;height:12px;border-radius:3px;display:inline-block}
.cs-dot--green{background:var(--cs-green)}
.cs-dot--blue{background:var(--cs-blue)}
.cs-dot--lilac{background:var(--cs-lilac)}
.cs-dot--pink{background:var(--cs-pink)}
.cs-dot--yellow{background:var(--cs-yellow)}

/* ============================================================
   BUTTONS
   ============================================================ */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     font-family:var(--cs-font-body);font-weight:600;font-size:15px;padding:14px 26px;
     border-radius:var(--cs-r-pill);border:none;cursor:pointer;
     transition:transform .15s ease,opacity .15s ease;
     text-decoration:none;color:var(--cs-ink);background:transparent;line-height:1.2}
.cs-btn:hover{transform:translateY(-2px)}
.cs-btn--dark{background:var(--cs-ink);color:#fff}
.cs-btn--ghost{background:transparent;border:1px solid #b0b0ab}
.cs-btn--ghost-white{background:#fff;border:1px solid #b0b0ab}

/* ============================================================
   HEADINGS / TEXT
   ============================================================ */
.cs-h-section{font-family:var(--cs-font-display);font-weight:800;
     font-size:clamp(30px,3.6vw,48px);line-height:1.02;letter-spacing:-.01em;color:var(--cs-ink)}
.cs-h-hero{font-family:var(--cs-font-display);font-weight:800;
     font-size:clamp(40px,6vw,60px);line-height:.95;letter-spacing:-.02em;
     margin:22px 0;color:var(--cs-ink)}
.cs-h-hero .cs-muted{color:var(--cs-ink-soft)}
.cs-h-hero__aka{font-size:.55em;font-weight:600;color:var(--cs-ink-soft);letter-spacing:-.01em;white-space:nowrap;vertical-align:.15em}
.cs-h-final{font-family:var(--cs-font-display);font-weight:800;
     font-size:clamp(32px,4.5vw,58px);line-height:.95;letter-spacing:-.01em;color:var(--cs-ink)}
.cs-h-mid{font-family:var(--cs-font-display);font-weight:800;
     font-size:clamp(26px,3vw,38px);line-height:1.02;letter-spacing:-.02em;
     margin:12px 0 6px;color:var(--cs-ink)}
.cs-h-faq{font-family:var(--cs-font-display);font-weight:800;
     font-size:clamp(26px,3vw,40px);line-height:1.05;color:var(--cs-ink)}

.cs-section-desc{color:var(--cs-ink-soft);font-size:17px;margin-top:16px}
.cs-lead{font-size:18px;color:var(--cs-ink-soft);margin-bottom:26px}
.cs-mid-desc{color:#5c4d0a;font-size:15px;margin:0;max-width:520px;line-height:1.5}
.cs-final-desc{margin:18px auto 26px;font-size:17px;color:#2c3a24;max-width:420px}
.cs-faq-sub{color:var(--cs-ink-soft);margin-top:14px;font-size:15px}
.cs-final-note{margin-top:14px;font-size:13px;color:#2c3a24}

/* Spacing after pill */
.cs-pill+.cs-h-hero,
.cs-pill+.cs-h-section,
.cs-pill+.cs-h-faq,
.cs-pill+.cs-h-final{margin-top:18px}

/* Card title / description */
.cs-h3{font-family:var(--cs-font-display);font-weight:700;font-size:18px;margin-bottom:8px}
.cs-card-desc{color:var(--cs-ink-soft);font-size:14px;line-height:1.55}

/* ============================================================
   ICON COLOR TILE / SVG
   ============================================================ */
.cs-ic-svg{width:21px;height:21px;fill:none;stroke:var(--cs-ink);stroke-width:1.75;
     stroke-linecap:round;stroke-linejoin:round}
.cs-bico .cs-ic-svg{width:22px;height:22px}

/* ============================================================
   HERO
   ============================================================ */
.cs-hero{padding:56px 0 15px}
.cs-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.cs-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.cs-hero__reassure{font-size:13px;color:var(--cs-ink-soft);margin:14px 0 0;letter-spacing:.01em}
.cs-hero__checks{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--cs-ink-soft)}
.cs-hero__checks-item{display:inline-flex;align-items:center;gap:7px}
.cs-ck{color:#3a9d4a;font-weight:700;font-style:normal}

/* ============================================================
   PERSONA SHOWCASE
   ============================================================ */
.cs-persona-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:440px;margin-left:auto}
.cs-persona-mini{background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:var(--cs-r-card);
     padding:18px 14px;text-align:center;transition:transform .2s ease}
.cs-persona-mini:hover{transform:translateY(-4px)}
.cs-pmi{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;margin-bottom:10px}
.cs-pmi .cs-ic-svg{width:22px;height:22px;color:var(--cs-ink);stroke:var(--cs-ink);stroke-width:1.8;fill:none}
.cs-persona-mini.cs-bg-blue .cs-pmi{background:var(--cs-blue)}
.cs-persona-mini.cs-bg-green .cs-pmi{background:var(--cs-green)}
.cs-persona-mini.cs-bg-lilac .cs-pmi{background:var(--cs-lilac)}
.cs-persona-mini.cs-bg-pink .cs-pmi{background:var(--cs-pink)}
.cs-persona-mini.cs-bg-yellow .cs-pmi{background:var(--cs-yellow)}
.cs-pmn{font-family:var(--cs-font-display);font-weight:700;font-size:14px;color:var(--cs-ink)}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.cs-trust-strip{padding:32px 0 8px}
.cs-trust-strip__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
     background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:var(--cs-r-section);
     padding:28px 36px;text-align:center}
.cs-trust-item__num{font-family:var(--cs-font-display);font-weight:800;font-size:clamp(24px,3vw,34px);
     line-height:1;letter-spacing:-.02em;color:var(--cs-ink);margin-bottom:6px}
.cs-trust-item__lbl{font-size:13px;color:var(--cs-ink-soft);font-weight:500}

/* ============================================================
   SECTIONS / PANEL / SECTION-HEAD
   ============================================================ */
.cs-section{padding:50px 0}
.cs-panel{background:var(--cs-surface);border-radius:var(--cs-r-section);padding:40px}
.cs-section-head{margin:0 0 40px}
.cs-section-head--center{text-align:center;margin-left:auto;margin-right:auto;padding:0 24px}
.cs-section-head--center .cs-pill{margin-left:auto;margin-right:auto}
.cs-section-head--center .cs-lead{margin-left:auto;margin-right:auto}
.cs-section-head--center .cs-hero__actions{justify-content:center}
.cs-section-head--center .cs-hero__checks{justify-content:center}

/* ============================================================
   BENEFITS GRID / CARDS
   ============================================================ */
.cs-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cs-benefit{border:1px solid var(--cs-line);border-radius:var(--cs-r-card);background:#fff;padding:20px;
     transition:transform .18s ease,box-shadow .18s ease;
     display:block;color:var(--cs-ink);text-decoration:none}
.cs-benefit:hover{transform:translateY(-4px)}
.cs-bico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px}

.cs-benefit--feat{position:relative;transition:transform .2s ease,border-color .2s ease}
.cs-benefit--feat:hover{transform:translateY(-3px);border-color:var(--cs-ink)}
.cs-benefit__img-wrap{aspect-ratio:1/1;background:var(--cs-bg);border-radius:14px;
     padding:14px;margin-bottom:16px;box-sizing:border-box;
     display:flex;align-items:center;justify-content:center}
.cs-benefit__img{display:block;max-width:100%;max-height:100%;border-radius:10px}
.cs-benefits-grid--2{grid-template-columns:repeat(3,1fr)}
@media(max-width:780px){.cs-benefits-grid--2{grid-template-columns:1fr}}
.cs-benefit__cta{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;
     color:var(--cs-ink);letter-spacing:-.01em}
.cs-benefit--feat:hover .cs-benefit__cta{text-decoration:underline}
.cs-section-foot{text-align:center;margin-top:28px;font-size:15px;color:var(--cs-ink-soft)}

/* ============================================================
   MID-PAGE CTA BANNER
   ============================================================ */
.cs-midcta{background:var(--cs-yellow);border-radius:var(--cs-r-section);padding:40px 48px;
     display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.cs-midcta__copy{position:relative;z-index:1}
.cs-midcta__cta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;position:relative;z-index:1}
.cs-midcta__cta .cs-btn{white-space:nowrap}
.cs-midcta__note{font-size:13px;color:#5c4d0a}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cs-finalcta__panel{background:var(--cs-green);border-radius:var(--cs-r-section);padding:64px;text-align:center}
.cs-finalcta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FAQ
   ============================================================ */
.cs-faq-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px}
.cs-faq-item{border-bottom:1px solid var(--cs-line)}
.cs-faq-q{padding:20px 0;font-size:16px;font-weight:500;font-family:var(--cs-font-body);color:var(--cs-ink)}
.cs-faq-a{color:var(--cs-ink-soft);font-size:14px;line-height:1.55;padding-bottom:20px}

/* ============================================================
   BENEFITS GRID — 3-column variant
   ============================================================ */
.cs-benefits-grid--3{grid-template-columns:repeat(3,1fr)}

/* ============================================================
   EYEBROW (uppercase small label)
   ============================================================ */
.cs-eyebrow{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-ink-soft)}
.cs-eyebrow--mb-sm{margin-bottom:8px}
.cs-eyebrow--mb-md{margin-bottom:14px}
.cs-eyebrow .cs-eyebrow__strong{color:var(--cs-ink);font-weight:700}

/* ============================================================
   SLIM CENTERED PANEL (social proof, etc.)
   ============================================================ */
.cs-panel--slim-center{text-align:center;padding:36px 24px}

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
.cs-social-proof-text{color:var(--cs-ink-soft);font-size:15px;max-width:520px;margin:0 auto}
.cs-social-proof-link{display:inline-block;margin-top:14px;font-weight:600;color:var(--cs-ink);text-decoration:none}
.cs-social-proof-link:hover{text-decoration:underline}

/* ============================================================
   CROSS NAV (2 cards at bottom of pages)
   ============================================================ */
.cs-cross-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cs-cross-nav-card{display:block;text-decoration:none;color:inherit;transition:transform .18s ease}
.cs-cross-nav-card:hover{transform:translateY(-3px)}
.cs-cross-nav-title{font-family:var(--cs-font-display);font-weight:700;font-size:22px;margin-bottom:8px;color:var(--cs-ink)}
.cs-cross-nav-desc{color:var(--cs-ink-soft);font-size:14px;margin-bottom:14px}
.cs-cross-nav-cta{font-weight:600;color:var(--cs-ink)}

/* ============================================================
   HERO ACTIONS — modifier for section-style hero
   ============================================================ */
.cs-hero__actions--mt{margin-top:24px}

/* ============================================================
   COLOR PLACEHOLDER BLOCKS (gradient backgrounds)
   ============================================================ */
.cs-ph{border-radius:18px;background-size:cover;background-position:center}
.cs-ph--a{background:linear-gradient(135deg,#cdeab0,#7fae6b)}
.cs-ph--b{background:linear-gradient(135deg,#f7d4cf,#d68a82)}
.cs-ph--c{background:linear-gradient(135deg,#c3dde8,#7fa9bd)}
.cs-ph--d{background:linear-gradient(135deg,#e2c9ef,#a983c4)}
.cs-ph--e{background:linear-gradient(135deg,#d9cfc0,#a89177)}

/* ============================================================
   PHONE PREVIEW (storefront mockup)
   ============================================================ */
.cs-phone-wrap{position:relative;width:330px;max-width:100%;margin:0 auto}
.cs-phone-cta{display:flex;justify-content:center;margin-top:22px}
.cs-phone-chips{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.cs-phone-chips .cs-float-chip{pointer-events:auto}
.cs-phone{background:#fff;border-radius:34px;box-shadow:var(--cs-shadow-card);padding:14px;
     max-width:330px;margin:0 auto;position:relative;border:1px solid var(--cs-line)}
.cs-phone__bar{display:flex;justify-content:space-between;align-items:center;font-size:12px;
     color:var(--cs-ink-soft);padding:2px 8px 12px}
.cs-phone__head{text-align:center}
.cs-phone__avatar{width:64px;height:64px;border-radius:50%;flex-shrink:0;overflow:hidden;margin:4px auto 14px}
.cs-phone__cat{color:#1faa59;font-weight:700;font-size:12px;letter-spacing:.04em;margin-bottom:6px}
.cs-phone__name{font-size:22px;line-height:1.1;font-family:var(--cs-font-display);font-weight:700;color:var(--cs-ink)}
.cs-phone__sub{color:var(--cs-ink-soft);font-size:13px;margin-top:4px}
.cs-phone__social{display:flex;gap:10px;margin:5px 0 15px;justify-content:center;color:#3a3a37}

/* Float chips around phone */
.cs-float-chip{position:absolute;background:#fff;border:1px solid var(--cs-line);border-radius:999px;
     padding:7px 14px 7px 7px;font-size:12.5px;font-weight:600;
     box-shadow:0 10px 28px -8px rgba(0,0,0,.22);display:flex;align-items:center;gap:9px;white-space:nowrap}
.cs-fc-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.cs-float-chip .cs-ic-svg{width:15px;height:15px}

/* Store item (secondary product in phone) */
.cs-store-item{display:flex;align-items:center;gap:12px;border:1px solid var(--cs-line);
     border-radius:999px;padding:8px;margin-bottom:10px}
.cs-store-item__thumb{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center}
.cs-store-item__body{flex:1;min-width:0}
.cs-store-item__ti{font-size:14px;font-family:var(--cs-font-display);font-weight:700;color:var(--cs-ink)}
.cs-store-item__meta{font-size:12px;color:var(--cs-ink-soft);margin-top:2px}
.cs-store-item__badge{background:var(--cs-yellow);color:#3a2f00;font-size:9px;font-weight:800;
     padding:2px 6px;border-radius:var(--cs-r-pill);margin-left:4px;
     letter-spacing:.04em;vertical-align:middle;display:inline-block}

/* Phone featured booking widget */
.cs-phone__featured{border:1px solid var(--cs-line);border-radius:14px;
     padding:14px 12px 12px;margin:8px 0 10px;position:relative}
.cs-phone__featured-badge{position:absolute;top:-7px;left:12px;background:var(--cs-yellow);
     color:#3a2f00;font-size:9px;font-weight:800;padding:2px 8px;border-radius:var(--cs-r-pill);
     letter-spacing:.05em}
.cs-phone__featured-title{font-family:var(--cs-font-display);font-weight:800;font-size:15px;margin-bottom:3px;color:var(--cs-ink)}
.cs-phone__featured-sub{font-size:11px;color:var(--cs-ink-soft);margin-bottom:10px;line-height:1.3}
.cs-phone__slots{display:flex;gap:5px;margin-bottom:10px}
.cs-phone__slot{flex:1;background:#fff;border:1px solid var(--cs-line);border-radius:8px;
     padding:6px 0;text-align:center;font-size:10px;font-weight:600;cursor:pointer;
     transition:border-color .15s ease}
.cs-phone__slot:hover{border-color:var(--cs-ink)}
.cs-phone__slot--active{background:var(--cs-ink);color:#fff;border-color:var(--cs-ink)}

/* Enhanced booking widget */
.cs-phone__bk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.cs-phone__bk-head .cs-phone__featured-title{margin-bottom:0;flex:1;line-height:1.15}
.cs-phone__bk-price{font-family:var(--cs-font-display);font-weight:800;font-size:18px;
     color:var(--cs-ink);line-height:1;letter-spacing:-.01em;flex-shrink:0}
.cs-phone__bk-meta{display:flex;gap:5px;margin-bottom:11px;flex-wrap:wrap}
.cs-phone__bk-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;
     background:#fff;border:1px solid var(--cs-line);padding:3px 8px;border-radius:999px;color:var(--cs-ink-soft)}
.cs-phone__bk-chip svg{width:11px;height:11px;flex-shrink:0;stroke:currentColor;stroke-width:2;fill:none}
.cs-phone__bk-label{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
     color:var(--cs-ink-soft);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.cs-phone__bk-label::after{content:"";flex:1;height:1px;background:var(--cs-line)}
.cs-phone__slot{padding:7px 0 6px;line-height:1.15}
.cs-phone__slot-day{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.cs-phone__slot-time{font-size:12px;font-weight:700;margin-top:2px}
.cs-phone__slot--active .cs-phone__slot-day{opacity:.7}

/* Phone tier picker (CHOOSE CALL TYPE) */
.cs-phone__tier-head{font-size:9px;font-weight:700;color:var(--cs-ink-soft);text-transform:uppercase;
     letter-spacing:.06em;margin:4px 0 8px;display:flex;align-items:center;gap:6px}
.cs-phone__tier-head-num{width:15px;height:15px;border-radius:50%;background:#dbeafe;color:#1e40af;
     display:grid;place-items:center;font-size:9px;font-weight:800;flex-shrink:0}
.cs-phone__tier-card{background:#fff;border:1.5px solid var(--cs-line);border-radius:10px;
     padding:8px 10px;margin-bottom:5px}
.cs-phone__tier-card--popular{background:#fffbe6;border-color:#f4dd57}
.cs-phone__tier-card--active{background:#eff6ff;border-color:#2563eb}
.cs-phone__tier-row{display:flex;align-items:flex-start;gap:7px}
.cs-phone__tier-radio{width:13px;height:13px;border-radius:50%;border:1.5px solid #cbd5e1;
     background:#fff;flex-shrink:0;margin-top:2px;box-sizing:border-box}
.cs-phone__tier-card--active .cs-phone__tier-radio{border:4px solid #2563eb;background:#fff}
.cs-phone__tier-body{flex:1;min-width:0}
.cs-phone__tier-title-row{display:flex;align-items:flex-start;justify-content:space-between;
     gap:5px;margin-bottom:1px}
.cs-phone__tier-title-left{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cs-phone__tier-title{font-family:var(--cs-font-display);font-weight:700;font-size:12px;
     color:var(--cs-ink);line-height:1.2}
.cs-phone__tier-badge-mini{font-size:8px;font-weight:700;padding:1px 5px;border-radius:999px;
     letter-spacing:.02em;white-space:nowrap}
.cs-phone__tier-badge-mini--popular{background:#d1fae5;color:#065f46}
.cs-phone__tier-badge-mini--value{background:#dbeafe;color:#1e40af}
.cs-phone__tier-price{font-family:var(--cs-font-display);font-weight:800;font-size:14px;
     color:var(--cs-ink);flex-shrink:0}
.cs-phone__tier-dur{font-size:10px;color:var(--cs-ink-soft);margin-bottom:2px}
.cs-phone__tier-desc{font-size:10.5px;color:var(--cs-ink-soft);line-height:1.35}

/* Button modifiers */
.cs-btn--sm{padding:10px 18px;font-size:13px}
.cs-btn--block{width:100%}
.cs-btn--green{background:#3DDC97;color:#0d3b27}

/* ============================================================
   HERO PILL-LABEL (back link variant)
   ============================================================ */
.cs-pill__back-link{color:var(--cs-ink-soft);text-decoration:none}
.cs-pill__back-link:hover{color:var(--cs-ink)}
.cs-pill__sep{color:var(--cs-ink-soft);margin:0 -2px}

/* ============================================================
   MOCKUP FRAME (used in feature pages)
   ============================================================ */
.cs-mockup-frame{border-radius:10px;margin-bottom:18px;height:320px;
     display:flex;align-items:center;justify-content:center}
.cs-mockup-card{background:#fff;border-radius:8px;width:85%;box-shadow:var(--cs-shadow-float);position:relative}
.cs-mc-badge{position:absolute;top:-9px;left:12px;background:var(--cs-yellow);color:#3a2f00;
     font-size:9px;font-weight:800;padding:3px 9px;border-radius:var(--cs-r-pill);
     letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.08)}

/* ============================================================
   ADMIN MINI-CALENDAR MOCKUP
   ============================================================ */
.cs-mini-cal{background:#fff;border-radius:8px;padding:12px 14px}
.cs-mini-cal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cs-mini-cal__title{font-family:var(--cs-font-display);font-weight:800;font-size:13px;color:var(--cs-ink)}
.cs-mini-cal__nav{display:flex;gap:4px;color:var(--cs-ink-soft);font-size:13px}
.cs-mini-cal__nav span{width:18px;height:18px;display:grid;place-items:center;border-radius:4px;background:var(--cs-bg)}
.cs-mini-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cs-mini-cal__dn{text-align:center;font-size:8px;font-weight:700;color:var(--cs-ink-soft);padding:3px 0;letter-spacing:.05em}
.cs-mini-cal__cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
     font-size:9px;color:var(--cs-ink);border-radius:4px;padding:2px;font-weight:600;background:#fafaf7}
.cs-mini-cal__cell--has{background:#eff6ff;color:#1e40af;font-weight:800}
.cs-mini-cal__cell--today{background:var(--cs-ink);color:#fff}
.cs-mini-cal__cell--out{color:#cbd5e1;background:transparent;font-weight:400}
.cs-mini-cal__dots{display:flex;gap:1.5px;margin-top:1px;min-height:5px}
.cs-mini-cal__dot{width:4px;height:4px;border-radius:50%}
.cs-mini-cal__dot--call{background:#3b82f6}
.cs-mini-cal__dot--pack{background:#8b5cf6}
.cs-mini-cal__dot--svc{background:#f59e0b}
.cs-mini-cal__legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px solid var(--cs-bg);font-size:8px;color:var(--cs-ink-soft)}
.cs-mini-cal__legend-item{display:flex;align-items:center;gap:3px}

/* ============================================================
   ADMIN MINI-INBOX MOCKUP (email notifications)
   ============================================================ */
.cs-mini-inbox{background:#fff;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.cs-mini-inbox__head{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;
     color:var(--cs-ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.cs-mini-inbox__count{background:#dc2626;color:#fff;border-radius:999px;padding:1px 7px;font-size:9px;font-weight:800}
.cs-mini-inbox__row{display:flex;align-items:flex-start;gap:7px;padding:6px 8px;border-radius:5px;
     background:#fff;border:1px solid var(--cs-line)}
.cs-mini-inbox__row--unread{background:#fffbe6;border-color:#f4dd57}
.cs-mini-inbox__ico{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
     font-size:10px;flex-shrink:0;margin-top:1px}
.cs-mini-inbox__ico--new{background:#dcfce7;color:#166534}
.cs-mini-inbox__ico--resched{background:#fef3c7;color:#92400e}
.cs-mini-inbox__ico--cancel{background:#fee2e2;color:#b91c1c}
.cs-mini-inbox__body{flex:1;min-width:0}
.cs-mini-inbox__sub{font-size:10px;font-weight:700;color:var(--cs-ink);line-height:1.25;margin-bottom:1px}
.cs-mini-inbox__from{font-size:9px;color:var(--cs-ink-soft);line-height:1.3}
.cs-mini-inbox__time{font-size:9px;color:var(--cs-ink-soft);flex-shrink:0;margin-top:1px}

/* ============================================================
   FLOW DIAGRAM (Behind one X)
   ============================================================ */
.cs-flow{display:flex;align-items:stretch;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:8px 4px 4px}
.cs-flow__step{flex:1;min-width:160px;background:var(--cs-surface);border:1px solid var(--cs-line);
     border-radius:var(--cs-r-card);padding:18px 16px;text-align:center;position:relative}
.cs-flow__num{position:absolute;top:8px;right:10px;font-family:var(--cs-font-display);
     font-weight:800;font-size:11px;color:var(--cs-ink-soft);letter-spacing:.05em}
.cs-flow__ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin:0 auto 10px}
.cs-flow__ico .cs-ic-svg{width:22px;height:22px;color:var(--cs-ink);stroke:var(--cs-ink);stroke-width:1.8;fill:none}
.cs-flow__step-title{font-family:var(--cs-font-display);font-weight:700;font-size:14px;margin-bottom:6px;color:var(--cs-ink)}
.cs-flow__step-desc{font-size:12px;color:var(--cs-ink-soft);line-height:1.4}
.cs-flow__arrow{flex:0 0 24px;display:grid;place-items:center;align-self:center;color:var(--cs-ink-soft)}
.cs-flow__arrow .cs-ic-svg{width:18px;height:18px;stroke:var(--cs-ink-soft);stroke-width:2;fill:none}

/* ============================================================
   TOOLS YOU STOP USING (replaces table)
   ============================================================ */
.cs-replaces{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cs-replaces__col{background:var(--cs-surface);border:1px solid var(--cs-line);border-radius:var(--cs-r-card);padding:22px}
.cs-replaces__lbl{font-size:11px;font-weight:700;color:var(--cs-ink-soft);text-transform:uppercase;
     letter-spacing:.08em;margin-bottom:14px}
.cs-replaces__list{display:flex;flex-direction:column;gap:8px}
.cs-replaces__strike{font-family:var(--cs-font-display);font-weight:700;font-size:18px;
     color:var(--cs-ink-soft);text-decoration:line-through;text-decoration-color:#e07c7c;
     text-decoration-thickness:2px}
.cs-replaces__col--final{background:var(--cs-green);border-color:var(--cs-green);display:flex;flex-direction:column}
.cs-replaces__col--final .cs-replaces__lbl{color:#2c3a24}
.cs-replaces__final{font-family:var(--cs-font-display);font-weight:800;font-size:clamp(22px,3vw,30px);
     color:#1a2613;line-height:1.05;letter-spacing:-.02em;margin-bottom:18px}
.cs-replaces__cta{align-self:flex-start;margin-top:auto}
.cs-replaces__note{font-size:12px;color:#2c3a24;margin-top:10px}

/* ============================================================
   2-COL MOCKUP GRID (used in Setup/Compliance/Tier sections)
   ============================================================ */
.cs-twocol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}

/* ============================================================
   TIER MOCKUPS (inside Tier your offers)
   ============================================================ */
.cs-tier-card{background:#fff;border:1px solid var(--cs-line);border-radius:8px;padding:8px 10px;margin-bottom:5px}
.cs-tier-card--active{background:#fffbe6;border:1.5px solid #f4dd57}
.cs-tier-card__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.cs-tier-card__name{font-family:var(--cs-font-display);font-weight:700;font-size:11px}
.cs-tier-card__price{font-size:10px}
.cs-tier-card__price-now{font-weight:800}
.cs-tier-card__price-was{color:var(--cs-ink-soft);text-decoration:line-through}
.cs-tier-card__price-off{color:#166534;font-weight:700;font-size:9px}
.cs-tier-badge{font-size:8px;font-weight:700;padding:2px 6px;border-radius:var(--cs-r-pill)}
.cs-tier-badge--quick{background:var(--cs-blue);color:var(--cs-ink)}
.cs-tier-badge--popular{background:#f4dd57;color:#3a2f00;font-weight:800}
.cs-tier-badge--best{background:var(--cs-lilac);color:var(--cs-ink)}

/* ============================================================
   MOCKUP UTILITIES (status boxes, labels, rows inside mockups)
   ============================================================ */
.cs-mc-label{font-size:10px;font-weight:600;color:var(--cs-ink-soft);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
.cs-mc-hint{font-size:11px;font-weight:600;color:#1e40af;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cs-mc-row{background:#fff;border:1px solid var(--cs-line);border-radius:5px;padding:6px 9px;font-size:10px;color:var(--cs-ink);margin-bottom:5px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.cs-mc-row--dashed{border:1.5px dashed #cbd5e1;font-weight:600}
.cs-mc-row--featured{background:#fffbe6;border:1.5px solid #f4dd57}
.cs-mc-row--soft-yellow{background:#fff3cd;border:1.5px solid #ffd54f}
.cs-mc-status{border-radius:5px;padding:6px 9px;font-size:10px;margin-bottom:4px}
.cs-mc-status--success{background:#f0fdf4;border:1px solid #86efac;color:#166534}
.cs-mc-status--info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
.cs-mc-status--success-strong{background:#f0fdf4;border:1px solid #86efac;color:#166534;font-weight:600}
.cs-mc-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block}
.cs-mc-dot--green{background:#22c55e}
.cs-mc-dot--blue{background:#3b82f6}
.cs-mc-step-num{background:#1e40af;color:#fff;border-radius:50%;width:18px;height:18px;display:inline-grid;place-items:center;font-size:11px;font-weight:800}
.cs-mc-step-label{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;color:var(--cs-ink);font-weight:600}
.cs-mc-toggle{width:30px;height:17px;background:#22c55e;border-radius:99px;position:relative;flex-shrink:0}
.cs-mc-toggle__knob{position:absolute;top:2px;right:2px;width:13px;height:13px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.cs-mc-platform-tile{width:14px;height:14px;border-radius:3px;flex-shrink:0;display:grid;place-items:center;color:#fff;font-size:8px;font-weight:800}
.cs-mc-platform-tile--gmeet{background:linear-gradient(135deg,#4285f4,#34a853,#fbbc04,#ea4335)}
.cs-mc-platform-tile--zoom{background:#2D8CFF}
.cs-mc-amount-row{display:flex;justify-content:space-between}
.cs-mc-amount-row--strong b{font-weight:800}

/* Inline mockup variants (without ph background frame) */
.cs-mockup-card--p10{padding:10px}
.cs-mockup-card--p12{padding:12px}
.cs-mockup-card--p14{padding:14px}
.cs-mockup-card--p18{padding:18px}

/* Featured benefit (panel-like with padding) */
.cs-benefit--p22{padding:22px}

/* Tall mockup frame */
.cs-mockup-frame--tall{height:440px}
.cs-mockup-frame--xl{height:620px}

/* Subtle text inside mockup */
.cs-mc-subtle{font-size:9px;color:var(--cs-ink-soft);line-height:1.4}

/* Refund status colors */
.cs-mc-refund-100{color:#166534;font-weight:700}
.cs-mc-refund-50{color:#a36b00;font-weight:700}
.cs-mc-refund-0{color:#9b1c1c;font-weight:700}
.cs-mc-pos-active{color:#22c55e;font-weight:700;font-size:10px}

/* Social brand colors */
.cs-social-li{color:#0A66C2}
.cs-social-ig{color:#E4405F}
.cs-social-yt{color:#FF0000}
.cs-social-fb{color:#1877F2}

/* ============================================================
   NUMBERED STEPS (used in Delivery, etc.)
   ============================================================ */
.cs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cs-step{border:1px solid var(--cs-line);border-radius:var(--cs-r-card);padding:26px;background:#fff;position:relative}
.cs-step-num{font-family:var(--cs-font-heavy);font-size:34px;color:var(--cs-ink);opacity:.12;line-height:1}
.cs-step-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cs-ink-soft);margin:10px 0 6px}
.cs-step-title{font-family:var(--cs-font-display);font-weight:700;font-size:18px;margin-bottom:8px;color:var(--cs-ink)}
.cs-step-desc{color:var(--cs-ink-soft);font-size:14px;line-height:1.55}
@media(max-width:980px){.cs-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cs-steps{grid-template-columns:1fr}}

/* ============================================================
   PLAN/PRICING CARD (Free or Paid)
   ============================================================ */
.cs-plan-card{padding:24px}
.cs-plan-list{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--cs-ink-soft)}
.cs-plan-list li{display:flex;align-items:flex-start;gap:6px}
.cs-plan-check{color:#3a9d4a;font-weight:700;flex-shrink:0}

/* ============================================================
   PHONE FEATURED PRODUCT (digital-product / link-in-bio style)
   ============================================================ */
.cs-phone__product{background:var(--cs-bg);border:1px solid var(--cs-line);border-radius:14px;padding:12px;margin:8px 0 10px}
.cs-phone__product-img{height:120px;border-radius:8px;margin-bottom:10px}
.cs-phone__product-title{font-family:var(--cs-font-display);font-weight:700;font-size:15px;margin-bottom:2px;color:var(--cs-ink)}
.cs-phone__product-sub{font-size:11px;color:var(--cs-ink-soft);margin-bottom:10px}
.cs-phone__product-row{display:flex;justify-content:space-between;align-items:center}
.cs-phone__product-price{font-family:var(--cs-font-display);font-weight:800;font-size:17px;color:var(--cs-ink)}
.cs-phone__product-price s{color:var(--cs-ink-soft);font-weight:400;font-size:11px;margin-left:4px}
.cs-phone__product-buy{background:#3DDC97;color:#0d3b27;text-align:center;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;border:none;cursor:pointer;font-family:var(--cs-font-body)}

/* More mockup utilities */
.cs-mc-title{font-family:var(--cs-font-display);font-weight:800;font-size:16px;margin-bottom:12px;color:var(--cs-ink)}
.cs-mc-meta{font-size:13px;font-weight:600;color:var(--cs-ink);line-height:1.35;margin-bottom:12px;letter-spacing:-.01em}
.cs-mc-meta b{font-weight:800;color:var(--cs-ink)}

/* ============================================================
   TESTIMONIAL CARDS
   ============================================================ */
.cs-testimonial{background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-r-card);padding:24px;
     display:flex;flex-direction:column;gap:14px;height:100%}
.cs-testimonial__rating{color:#f4b400;font-size:14px;letter-spacing:2px}
.cs-testimonial__quote{font-family:var(--cs-font-display);font-weight:700;font-size:17px;line-height:1.4;
     color:var(--cs-ink);letter-spacing:-.01em;margin:0}
.cs-testimonial__author{display:flex;align-items:center;gap:12px;margin-top:auto}
.cs-testimonial__avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.cs-testimonial__name{font-family:var(--cs-font-display);font-weight:700;font-size:14px;color:var(--cs-ink);line-height:1.2}
.cs-testimonial__title{font-size:12px;color:var(--cs-ink-soft);margin-top:2px}
.cs-testimonial__note{text-align:center;color:var(--cs-ink-soft);font-size:12px;margin-top:24px;font-style:italic}

/* ============================================================
   T&C DOCUMENT MOCKUP
   ============================================================ */
.cs-doc-mock{background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-r-card);padding:18px;
     font-family:'Courier New',ui-monospace,monospace;font-size:11px;line-height:1.55;color:var(--cs-ink);
     max-height:340px;overflow:hidden;position:relative}
.cs-doc-mock::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;
     background:linear-gradient(180deg,transparent,#fff)}
.cs-doc-mock__h{font-family:var(--cs-font-display);font-weight:800;font-size:13px;margin-bottom:10px;
     letter-spacing:.03em;color:var(--cs-ink)}
.cs-doc-mock__sec{font-weight:800;margin-top:12px;margin-bottom:4px;font-size:11px}
.cs-doc-mock__hl{background:#fffbe6;padding:0 2px;font-weight:700}

/* ============================================================
   MODE CARDS (cancel mode showcase: contact-me vs self-service)
   ============================================================ */
.cs-mode-card{background:#fff;border:1.5px solid var(--cs-line);border-radius:var(--cs-r-card);padding:24px;
     display:flex;flex-direction:column;gap:12px;height:100%;transition:border-color .15s ease}
.cs-mode-card--active{border-color:var(--cs-ink);background:#fafaf7}
.cs-mode-card__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cs-mode-card__radio{width:18px;height:18px;border-radius:50%;border:5px solid var(--cs-line);
     background:#fff;flex-shrink:0}
.cs-mode-card--active .cs-mode-card__radio{border-color:var(--cs-ink)}
.cs-mode-card__badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
     padding:3px 9px;border-radius:999px;background:var(--cs-green);color:#0d3b27}
.cs-mode-card__title{font-family:var(--cs-font-display);font-weight:800;font-size:18px;color:var(--cs-ink);letter-spacing:-.01em;line-height:1.2}
.cs-mode-card__desc{font-size:14px;color:var(--cs-ink-soft);line-height:1.5}
.cs-mode-card__best{font-size:12px;font-weight:600;color:var(--cs-ink);letter-spacing:.02em;margin-top:auto}

/* ============================================================
   PLATFORM CARDS (5 options)
   ============================================================ */
.cs-platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.cs-platform-card{background:#fff;border:1.5px solid var(--cs-line);border-radius:var(--cs-r-card);padding:20px;
     display:flex;flex-direction:column;gap:10px;transition:border-color .15s ease}
.cs-platform-card--default{border-color:var(--cs-ink);background:#fafaf7;position:relative}
.cs-platform-card__badge{position:absolute;top:-9px;left:20px;background:var(--cs-ink);color:#fff;
     font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.05em;text-transform:uppercase}
.cs-platform-card__ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center}
.cs-platform-card__title{font-family:var(--cs-font-display);font-weight:700;font-size:15px;color:var(--cs-ink);line-height:1.2}
.cs-platform-card__desc{font-size:13px;color:var(--cs-ink-soft);line-height:1.45;flex:1}
.cs-platform-card__hint{font-size:11px;color:var(--cs-ink-soft);font-style:italic;margin-top:auto}
.cs-mc-cta-dark{background:var(--cs-ink);color:#fff;text-align:center;padding:8px;border-radius:6px;font-size:11px;font-weight:600;margin-top:4px}
.cs-mc-foot{font-size:10px;color:var(--cs-ink-soft);text-align:center;margin-top:8px}
.cs-mc-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:6px}
.cs-mc-tile{background:#fff;border:1px solid var(--cs-line);border-radius:5px;padding:6px;text-align:center;font-size:9px;font-weight:600;color:var(--cs-ink)}
.cs-mc-row--dimmed{opacity:.6}
.cs-mc-notify-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cs-mc-notify-ico{width:28px;height:28px;border-radius:50%;background:#3DDC97;display:grid;place-items:center;flex-shrink:0;font-size:14px}
.cs-mc-notify-title{font-family:var(--cs-font-display);font-weight:700;font-size:12px;color:var(--cs-ink)}
.cs-mc-notify-body{background:#f5f5f3;border-radius:5px;padding:8px 10px;font-size:11px}
.cs-mc-notify-product{font-weight:600;margin-bottom:2px;color:var(--cs-ink)}

/* ============================================================
   STEP PREVIEW (how-it-works hero)
   ============================================================ */
.cs-step-preview{display:flex;flex-direction:column;gap:12px;max-width:380px;margin-left:auto}
.cs-step-preview--row{flex-direction:row;max-width:none;margin:0;gap:16px;flex-wrap:wrap}
.cs-step-preview--row .cs-sp-item{flex:1 1 220px;min-width:0}
.cs-step-preview--row .cs-sp-item:hover{transform:translateY(-4px)}
.cs-sp-item{display:flex;align-items:center;gap:16px;background:var(--cs-surface);
     border:1px solid var(--cs-line);border-radius:var(--cs-r-card);padding:16px 20px;
     transition:transform .2s ease,border-color .2s ease}
.cs-sp-item:hover{transform:translateX(-4px);border-color:var(--cs-ink)}
.cs-sp-num{font-family:var(--cs-font-display);font-weight:800;font-size:24px;
     color:var(--cs-ink-soft);min-width:36px;letter-spacing:-.02em}
.cs-sp-title{font-family:var(--cs-font-display);font-weight:700;font-size:16px;color:var(--cs-ink);line-height:1.1}
.cs-sp-time{font-size:12px;color:var(--cs-ink-soft);margin-top:2px}

/* ============================================================
   LOGO (text-based wordmark)
   ============================================================ */
.cs-logo{display:inline-block;font-family:var(--cs-font-display);font-weight:800;font-size:22px;
     letter-spacing:-.02em;color:var(--cs-ink);transition:opacity .15s ease;text-decoration:none}
.cs-logo:hover{opacity:.7}
.cs-logo__tld{opacity:.45}

/* ============================================================
   WAITLIST PAGE
   ============================================================ */
.cs-waitlist{min-height:100vh;display:flex;align-items:center;padding:48px 24px}
.cs-waitlist__grid{align-items:center;max-width:1240px;margin:0 auto;width:100%}
.cs-waitlist__inner{width:100%;text-align:left}
.cs-waitlist__logo{margin-bottom:48px;display:block}
.cs-waitlist__title{font-family:var(--cs-font-display);font-weight:800;font-size:clamp(32px,5vw,52px);
     line-height:1.02;letter-spacing:-.02em;margin:16px 0 14px;color:var(--cs-ink)}
.cs-waitlist__lead{color:var(--cs-ink-soft);font-size:17px;max-width:460px;margin:0 0 28px;line-height:1.5}
.cs-waitlist__form{display:flex;flex-direction:column;gap:10px;text-align:left;max-width:460px;margin:0}
.cs-waitlist__input,
.cs-waitlist__textarea{padding:14px 16px;border:1px solid var(--cs-line);border-radius:12px;
     font-family:var(--cs-font-body);font-size:15px;background:#fff;color:var(--cs-ink);
     transition:border-color .15s ease;width:100%}
.cs-waitlist__input:focus,
.cs-waitlist__textarea:focus{outline:none;border-color:var(--cs-ink)}
.cs-waitlist__textarea{min-height:90px;resize:vertical}
.cs-waitlist__btn{margin-top:6px;background:var(--cs-ink);color:#fff;border:none;
     padding:14px 24px;border-radius:99px;font-weight:600;font-size:15px;cursor:pointer;
     font-family:var(--cs-font-body);transition:transform .15s ease}
.cs-waitlist__btn:hover{transform:translateY(-2px)}
.cs-waitlist__note{margin-top:18px;font-size:13px;color:var(--cs-ink-soft)}
.cs-waitlist__perks{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:13px;color:var(--cs-ink-soft)}
.cs-waitlist__perk{display:inline-flex;align-items:center;gap:6px}
.cs-waitlist__visual{display:flex;align-items:center;justify-content:center}

@media(max-width:980px){
  .cs-waitlist{padding:40px 24px;min-height:auto}
  .cs-waitlist__inner{max-width:100%;text-align:center;margin:0 auto}
  .cs-waitlist__lead{margin:0 auto 28px}
  .cs-waitlist__form{margin:0 auto}
  .cs-waitlist__perks{justify-content:center}
  .cs-waitlist__visual{margin-top:24px;transform:scale(.85)}
}
@media(max-width:560px){
  .cs-waitlist{align-items:flex-start;padding:32px 16px;min-height:auto}
  .cs-waitlist__logo{margin-bottom:32px}
  .cs-waitlist__title{font-size:clamp(28px,7vw,36px);line-height:1.05}
  .cs-waitlist__lead{font-size:15px;margin-bottom:24px}
  .cs-waitlist__input,
  .cs-waitlist__textarea{padding:12px 14px;font-size:14px}
  .cs-waitlist__textarea{min-height:80px}
  .cs-waitlist__btn{padding:13px 22px;font-size:14px}
  .cs-waitlist__visual{display:none}
}
@media(max-width:380px){
  .cs-waitlist{padding:24px 14px}
  .cs-waitlist__title{font-size:26px}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .cs-hero{padding:40px 24px 12px}
  .cs-section{padding:50px 0}
  .cs-trust-strip{padding:32px 24px 8px}
  .cs-hero__grid{grid-template-columns:1fr;gap:36px}
  .cs-benefits-grid{grid-template-columns:repeat(2,1fr)}
  .cs-benefits-grid--3{grid-template-columns:repeat(2,1fr)}
  .cs-panel{padding:24px}
  .cs-finalcta__panel{padding:40px 24px}
  .cs-faq-panel{grid-template-columns:1fr;gap:28px}
  .cs-persona-showcase{max-width:none;margin:0 auto}
  .cs-cross-nav-grid{grid-template-columns:1fr}
  .cs-phone{margin:0 auto}
  .cs-flow{flex-wrap:wrap;justify-content:center}
  .cs-flow__arrow{transform:rotate(90deg);width:24px;height:24px;flex-basis:auto}
  .cs-flow__step{flex:1 1 calc(50% - 16px);min-width:0}
}
@media(max-width:780px){
  .cs-replaces{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .cs-benefits-grid{grid-template-columns:repeat(1,1fr)}
}
@media(max-width:680px){
  .cs-trust-strip{padding:20px 24px 0}
  .cs-trust-strip__inner{grid-template-columns:repeat(2,1fr);gap:20px;padding:22px 18px}
  .cs-midcta{grid-template-columns:1fr;padding:30px 24px;text-align:center;gap:20px}
  .cs-midcta__cta{align-items:center}
}
@media(max-width:780px){
  /* Hide floating chips on tablet to prevent overflow */
  .cs-phone-chips{display:none}
}
@media(max-width:560px){
  .cs-hero__checks{gap:10px;font-size:11px;flex-wrap:nowrap;justify-content:space-between}
  .cs-hero__checks-item{white-space:nowrap}
  .cs-persona-showcase{gap:10px}
  .cs-persona-mini{padding:14px 10px}
  .cs-pmi{width:38px;height:38px;margin-bottom:8px}
  .cs-pmn{font-size:12px}
  .cs-benefits-grid--3{grid-template-columns:1fr}
  .cs-flow__step{flex:1 1 100%}
  .cs-phone-wrap{width:auto;max-width:290px;margin:0 auto}
  .cs-phone{max-width:272px}
  .cs-mockup-frame{padding:0}
  /* Subcards: tighter on small mobile */
  .cs-subcard{padding:14px;gap:12px}
  .cs-subcard__ico{width:42px;height:42px;border-radius:12px}
  .cs-subcard__title{font-size:15px}
  .cs-subcard__desc{font-size:12.5px;line-height:1.45}
  /* Fblock panel: tighter padding */
  .cs-fblock__panel{padding:24px 18px}
  .cs-h-fblock{font-size:clamp(24px,7vw,32px)}
  .cs-intro{font-size:15px;margin-bottom:18px}
}
@media(max-width:480px){
  .cs-replaces{grid-template-columns:1fr}
}

/* ============================================================
   PLACEHOLDER (neutral)
   ============================================================ */
.cs-ph--neutral{background:#edebe4}
.cs-ph--blue-soft{background:#e6f1fb}

/* ============================================================
   STATS (4-col strip)
   ============================================================ */
.cs-stats{margin-top:0}
.cs-stats__row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
     background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-r-section);padding:30px}
.cs-stat{text-align:center}
.cs-stat__n{font-family:var(--cs-font-display);font-weight:800;font-size:clamp(30px,3.6vw,48px);line-height:1.02;letter-spacing:-.01em;color:var(--cs-ink)}
.cs-stat__l{font-size:13px;color:var(--cs-ink-soft);margin-top:8px}

/* ============================================================
   NUMBERED FEATURE BLOCKS (Sell / Book / Design / Convert)
   ============================================================ */
.cs-fblock{padding:50px 0}
.cs-fblock__panel{background:#fff;border-radius:var(--cs-r-section);padding:56px;
     display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cs-fblock__panel--rev{direction:rtl}
.cs-fblock__panel--rev>.cs-fblock__col,
.cs-fblock__panel--rev>.cs-fblock__visual{direction:ltr}
.cs-h-fblock{font-family:var(--cs-font-display);font-weight:800;font-size:clamp(28px,3.2vw,42px);
     line-height:1.04;margin:14px 0;color:var(--cs-ink)}
.cs-intro{color:var(--cs-ink-soft);font-size:17px;margin-bottom:24px}
.cs-subcards{display:flex;flex-direction:column;gap:12px}
.cs-subcard{display:flex;gap:14px;border:1px solid var(--cs-line);border-radius:14px;padding:16px;background:#fff;
     transition:transform .15s ease;text-decoration:none;color:inherit}
.cs-subcard:hover{transform:translateX(4px)}
.cs-subcard__ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex-shrink:0}
.cs-subcard__body{flex:1;min-width:0}
.cs-subcard__title{font-family:var(--cs-font-display);font-weight:700;font-size:16px;margin-bottom:4px;color:var(--cs-ink)}
.cs-subcard__desc{color:var(--cs-ink-soft);font-size:13px;line-height:1.5}

.cs-fblock__visual{aspect-ratio:4/5;border-radius:20px;position:relative;min-height:540px;padding:24px}

/* Floating cards */
.cs-fcard{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--cs-shadow-float);
     padding:14px;border:1px solid rgba(0,0,0,.04)}
.cs-fcard__mini-label{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
     letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;margin-bottom:9px}
.cs-ml-green{background:#cdeab0}
.cs-ml-pink{background:#f6cfc8}
.cs-ml-yellow{background:#f7e7a0}
.cs-ml-lilac{background:#e7cdf3}
.cs-ml-blue{background:var(--cs-blue)}
.cs-fcard__ttl{font-family:var(--cs-font-display);font-weight:700;font-size:15px;line-height:1.2;color:var(--cs-ink)}
.cs-fcard__sub{color:var(--cs-ink-soft);font-size:12px;margin-top:2px}
.cs-fcard__price{font-family:var(--cs-font-display);font-weight:700;font-size:15px;color:var(--cs-ink)}
.cs-fcard__price s{color:var(--cs-ink-soft);font-weight:400;font-size:11px;margin-right:4px}
.cs-fcard__row{display:flex;align-items:center;gap:10px}
.cs-fcard__thumb{width:40px;height:40px;border-radius:9px;flex-shrink:0}
.cs-fcard__sk{height:7px;border-radius:999px;background:#ededea;margin:6px 0}
.cs-fcard__sk--w70{width:70%}
.cs-fcard__sk--w45{width:45%}
.cs-fcard__av{width:38px;height:38px;border-radius:50%;flex-shrink:0}
.cs-fcard__ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.cs-fcard__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cs-fcard__chip{font-size:11px;border:1px solid var(--cs-line);border-radius:999px;padding:3px 9px}
.cs-fcard__chip--active{background:#cdeab0;border-color:#cdeab0}
.cs-fcard__chip--dark{background:var(--cs-ink);color:#fff;border:none}
.cs-fcard__price-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.cs-fcard__grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.cs-fcard__grid-3 .cs-ph{height:34px;border-radius:6px}
.cs-fcard__cta-row{display:block;text-align:center;margin-top:6px;background:var(--cs-ink);color:#fff;
     border:none;padding:8px;border-radius:9px;font-size:11px;font-weight:600}
.cs-fcard__input-row{display:block;text-align:left;margin-top:8px;padding:8px 10px;border:1px solid var(--cs-line);
     border-radius:9px;font-size:11px;color:var(--cs-ink-soft)}
.cs-fcard__rating{color:#f4b400;font-size:12px}
.cs-fcard__video-ph{height:72px;border-radius:9px}

/* ============================================================
   FCARD MICRO ELEMENTS (badges, dots, overlays for preview widgets)
   ============================================================ */
.cs-fcard__live-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
     letter-spacing:.05em;text-transform:uppercase;color:#e0533d;background:#fde3de;
     padding:3px 9px;border-radius:999px;margin-top:8px}
.cs-fcard__live-dot{width:6px;height:6px;border-radius:50%;background:#e0533d;
     box-shadow:0 0 0 3px rgba(224,83,61,.18);display:inline-block}
.cs-fcard__check-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
     color:#1a6f3c;background:#dff6e6;padding:3px 9px;border-radius:999px;margin-top:6px}
.cs-fcard__save-pill{display:inline-block;font-size:11px;font-weight:700;color:#1a6f3c;
     background:#dff6e6;padding:3px 9px;border-radius:999px}
.cs-fcard__dots{display:flex;gap:5px;margin-top:8px;align-items:center}
.cs-fcard__dot{width:8px;height:8px;border-radius:50%;background:#e7e7e3;flex-shrink:0}
.cs-fcard__dot--filled{background:var(--cs-ink)}
.cs-fcard__dot-text{font-size:10px;color:var(--cs-ink-soft);margin-left:4px;font-weight:600}
.cs-fcard__video-ph{position:relative}
.cs-fcard__play{position:absolute;top:50%;left:50%;margin:-16px 0 0 -16px;width:32px;height:32px;
     border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
     color:var(--cs-ink);font-size:11px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.cs-fcard__duration{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.65);
     color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px}
.cs-fcard__cell--more{position:relative}
.cs-fcard__more-tag{position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;
     display:grid;place-items:center;font-size:12px;font-weight:800;border-radius:6px;letter-spacing:.02em}
.cs-fcard__brand-dots{display:flex;gap:6px;margin-top:6px;align-items:center}
.cs-fcard__brand-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;display:inline-block}
.cs-fcard__brand-dot--yt{background:#FF0000}
.cs-fcard__brand-dot--spotify{background:#1ED760}
.cs-fcard__trust{font-size:10px;color:var(--cs-ink-soft);margin-top:8px;text-align:center;line-height:1.4}
.cs-fcard__author{font-size:11px;color:var(--cs-ink);margin-top:8px;font-weight:600;letter-spacing:.01em}
.cs-fcard__qa{font-size:11px;color:var(--cs-ink-soft);margin-top:8px;line-height:1.45;
     background:var(--cs-bg);border-radius:8px;padding:6px 8px}
.cs-fcard__qa b{color:var(--cs-ink);font-weight:700}
.cs-fcard__text-snippet{font-size:11px;color:var(--cs-ink-soft);line-height:1.45;margin-top:4px}
.cs-fcard__next-slot{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;
     color:var(--cs-ink-soft);background:var(--cs-bg);padding:4px 9px;border-radius:999px;margin-top:8px}
.cs-fcard__next-dot{width:6px;height:6px;border-radius:50%;background:#3a9d4a;display:inline-block}
.cs-fcard__h-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cs-fcard__duration-tag{font-size:10px;font-weight:600;color:var(--cs-ink-soft)}

/* Icon SVG sizes (colors via .cs-bg-* utility classes) */
.cs-subcard__ico .cs-ic-svg{width:22px;height:22px}
.cs-fcard__ico .cs-ic-svg{width:20px;height:20px}

/* ============================================================
   WHO IT'S FOR (creator types)
   ============================================================ */
.cs-who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cs-who-card{border:1px solid var(--cs-line);border-radius:var(--cs-r-card);background:#fff;padding:20px;
     transition:transform .18s ease,box-shadow .18s ease}
.cs-who-card:hover{transform:translateY(-4px)}
.cs-wico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px}
.cs-wico .cs-ic-svg{width:23px;height:23px;fill:none;stroke:var(--cs-ink);stroke-width:1.75}
.cs-who-card__e{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-ink-soft)}
.cs-who-card__title{font-family:var(--cs-font-display);font-weight:700;font-size:16px;margin:5px 0 6px;color:var(--cs-ink)}
.cs-who-card__desc{color:var(--cs-ink-soft);font-size:13px;line-height:1.5}
.cs-who-cta{border:1px dashed var(--cs-line);border-radius:var(--cs-r-card);padding:20px;display:flex;
     flex-direction:column;justify-content:center;background:var(--cs-bg)}
.cs-who-cta__big{font-family:var(--cs-font-heavy);font-size:40px;line-height:1;color:var(--cs-ink)}
.cs-who-cta__e{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-ink-soft);margin-top:6px}
.cs-who-cta__desc{margin:8px 0 16px;font-size:13px;color:var(--cs-ink-soft)}
.cs-who-cta__link{font-weight:600;color:var(--cs-ink);margin-top:auto;text-decoration:none}
.cs-who-cta__link:hover{text-decoration:underline}

/* ============================================================
   FEATURED STORES
   ============================================================ */
.cs-stores{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cs-store-card{border:1px solid var(--cs-line);border-radius:var(--cs-r-section);overflow:hidden;background:#fff}
.cs-store-card__hero-img{aspect-ratio:16/10;position:relative}
.cs-store-card__pill{position:absolute;top:12px;left:12px;background:#fff;font-size:11px;
     font-weight:700;padding:5px 10px;border-radius:999px;color:var(--cs-ink)}
.cs-store-card__body{padding:18px}
.cs-store-card__prod{display:flex;justify-content:space-between;align-items:center;
     border:1px solid var(--cs-line);border-radius:10px;padding:9px 12px;margin-bottom:8px;font-size:13px}
.cs-store-card__pr{font-family:var(--cs-font-display);font-weight:700}
.cs-store-card__prof{display:flex;align-items:center;gap:10px;margin-top:14px}
.cs-store-card__av{width:38px;height:38px;border-radius:50%;flex-shrink:0}
.cs-store-card__nm{font-family:var(--cs-font-display);font-weight:700;font-size:14px;color:var(--cs-ink)}
.cs-store-card__fo{font-size:11px;color:var(--cs-ink-soft)}
.cs-feat-note{text-align:center;color:var(--cs-ink-soft);font-size:13px;margin-top:24px}

/* ============================================================
   SAVINGS
   ============================================================ */
.cs-save{padding:50px 0}
.cs-save-panel{background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-r-section);
     padding:30px 36px;max-width:680px;margin:0 auto;box-shadow:var(--cs-shadow-card)}
.cs-save__row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:16px;padding:14px 0}
.cs-save__row+.cs-save__row{border-top:1px solid var(--cs-line)}
.cs-save__ri{width:42px;height:42px;border-radius:11px;display:grid;place-items:center}
.cs-save__nm{font-family:var(--cs-font-display);font-weight:700;font-size:15px;color:var(--cs-ink)}
.cs-save__rp{font-size:12px;color:var(--cs-ink-soft);margin-top:2px}
.cs-save__rp b{color:var(--cs-ink);font-weight:600}
.cs-save__amt{font-family:var(--cs-font-display);font-weight:700;font-size:18px;color:var(--cs-ink)}
.cs-save__sum{border-top:2px dashed var(--cs-line);margin-top:8px;padding-top:18px}
.cs-save__sum .cs-save__row{padding:10px 0}
.cs-save__sum .cs-save__row+.cs-save__row{border-top:none}
.cs-save__total .cs-save__nm{color:var(--cs-ink-soft);text-decoration:line-through}
.cs-save__total .cs-save__amt{color:#e0533d;text-decoration:line-through}
.cs-save__final .cs-save__nm{font-size:19px}
.cs-save__final .cs-save__amt{font-size:24px}
.cs-save__ri-x{background:#fde3de;color:#e0533d}
.cs-save__ri-now{background:#7b5cff;color:#fff}
.cs-save__ri-x .cs-ic-svg{stroke:#e0533d}
.cs-save__ri-now .cs-ic-svg{stroke:#fff}
.cs-save__btn{display:flex;justify-content:center;margin-top:34px}
.cs-save__btn .cs-btn{font-size:17px;padding:18px 44px}

/* ============================================================
   PRICING PLANS
   ============================================================ */
.cs-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:0 auto}
.cs-plan{border:1px solid var(--cs-line);border-radius:var(--cs-r-section);padding:34px;background:#fff;position:relative}
.cs-plan--pop{border:2px solid var(--cs-ink)}
.cs-plan__pop-tag{position:absolute;top:-13px;left:34px;background:var(--cs-ink);color:#fff;font-size:12px;
     font-weight:600;padding:5px 14px;border-radius:999px}
.cs-plan__name{font-family:var(--cs-font-display);font-weight:700;font-size:20px;color:var(--cs-ink)}
.cs-plan__pp{font-family:var(--cs-font-heavy);font-size:48px;line-height:1;margin:10px 0 2px;color:var(--cs-ink)}
.cs-plan__pp small{font-family:var(--cs-font-body);font-size:15px;font-weight:500;color:var(--cs-ink-soft)}
.cs-plan__fee{font-size:12px;color:var(--cs-ink-soft);margin-bottom:14px}
.cs-plan__trial{display:inline-block;font-size:12px;font-weight:600;background:#cdeab0;
     padding:5px 11px;border-radius:999px;margin-bottom:16px;color:var(--cs-ink)}
.cs-plan__desc{font-size:14px;color:var(--cs-ink-soft);margin-bottom:18px}
.cs-plan__btn{width:100%;margin-bottom:22px}
.cs-plan__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.cs-plan__list-item{font-size:14px;gap:10px;align-items:flex-start;color:var(--cs-ink-soft)}
.cs-plan__list-item b{color:var(--cs-ink);font-weight:600}
.cs-plan__check{color:#3a9d4a;font-weight:700;flex-shrink:0}
.cs-price-note{text-align:center;color:var(--cs-ink-soft);font-size:13px;max-width:620px;margin:28px auto 0}

/* ============================================================
   PRICING PAGE — FEE BREAKDOWN ($100 → $96.80)
   ============================================================ */
.cs-fee-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.cs-fee-card{background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-r-card);
     padding:30px 24px;text-align:center}
.cs-fee-card--keep{background:var(--cs-green);border-color:var(--cs-green)}
.cs-fee-card--zero{background:#fff;border:2px dashed var(--cs-ink)}
.cs-fee-card__lbl{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
     color:var(--cs-ink-soft);margin-bottom:14px}
.cs-fee-card--keep .cs-fee-card__lbl{color:#1a2613}
.cs-fee-card__amt{font-family:var(--cs-font-heavy);font-size:clamp(34px,4vw,52px);line-height:1;
     letter-spacing:-.02em;color:var(--cs-ink);margin-bottom:10px}
.cs-fee-card--keep .cs-fee-card__amt{color:#0d3b27}
.cs-fee-card__hint{font-size:13px;color:var(--cs-ink-soft)}
.cs-fee-card--keep .cs-fee-card__hint{color:#2c3a24;font-weight:600}
.cs-fee-note{text-align:center;color:var(--cs-ink-soft);font-size:14px;max-width:640px;margin:30px auto 0;line-height:1.55}
.cs-fee-note b{color:var(--cs-ink);font-weight:700}

/* ============================================================
   PRICING PAGE — FEATURE COMPARISON TABLE
   ============================================================ */
.cs-compare{border:1px solid var(--cs-line);border-radius:var(--cs-r-card);overflow:hidden;background:#fff}
.cs-compare__head{display:grid;grid-template-columns:1.4fr 1fr 1fr;background:var(--cs-bg);
     border-bottom:1px solid var(--cs-line)}
.cs-compare__head-cell{padding:20px 24px;font-family:var(--cs-font-display);font-weight:700;
     font-size:16px;color:var(--cs-ink);border-left:1px solid var(--cs-line)}
.cs-compare__head-cell:first-child{border-left:none;font-size:13px;font-weight:600;
     letter-spacing:.08em;text-transform:uppercase;color:var(--cs-ink-soft)}
.cs-compare__price{display:block;font-family:var(--cs-font-heavy);font-size:22px;color:var(--cs-ink);margin-top:4px}
.cs-compare__group{grid-column:1/-1;padding:14px 24px;background:var(--cs-bg);font-size:11px;
     font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cs-ink-soft);
     border-top:1px solid var(--cs-line)}
.cs-compare__row{display:grid;grid-template-columns:1.4fr 1fr 1fr;border-top:1px solid var(--cs-line)}
.cs-compare__cell{padding:16px 24px;font-size:14px;color:var(--cs-ink);border-left:1px solid var(--cs-line);
     display:flex;align-items:center}
.cs-compare__cell:first-child{border-left:none;color:var(--cs-ink-soft);font-weight:500}
.cs-compare__check{color:#3a9d4a;font-weight:700;margin-right:6px}
.cs-compare__dash{color:#c4c4be;font-weight:700}
.cs-compare__highlight{background:#fafaf7}

@media(max-width:780px){
  .cs-fee-breakdown{grid-template-columns:1fr;gap:14px}
  .cs-compare__head,
  .cs-compare__row{grid-template-columns:1.2fr .9fr .9fr}
  .cs-compare__head-cell,
  .cs-compare__cell{padding:12px 14px;font-size:14px}
  .cs-compare__price{font-size:18px}
}
@media(max-width:560px){
  .cs-compare__group{padding:10px 14px}
}

/* ============================================================
   LEAD BOX (phone email capture)
   ============================================================ */
.cs-lead-box{border:1px solid var(--cs-line);border-radius:16px;padding:12px;margin-top:4px;
     display:flex;gap:12px;align-items:flex-start}
.cs-lm-img{width:96px;border-radius:12px;aspect-ratio:.85;flex-shrink:0}
.cs-lm-body{flex:1;min-width:0}
.cs-lm-title{font-family:var(--cs-font-display);font-weight:700;font-size:16px;color:var(--cs-ink)}
.cs-lm-sub{font-size:12px;color:var(--cs-ink-soft);margin:4px 0 10px;line-height:1.4}
.cs-lm-input{border:1px solid var(--cs-line);border-radius:9px;padding:8px 10px;font-size:12px;
     color:var(--cs-ink-soft);margin-bottom:7px}
.cs-lm-btn{background:#3DDC97;color:#0d3b27;text-align:center;font-weight:700;font-size:13px;
     padding:10px;border-radius:999px}

/* ============================================================
   RESPONSIVE — additions for restored sections
   ============================================================ */
@media(max-width:980px){
  .cs-stats__row{grid-template-columns:repeat(2,1fr);gap:24px}
  .cs-fblock{padding:28px 0}
  .cs-fblock__panel{grid-template-columns:1fr;gap:30px;padding:32px 24px}
  .cs-fblock__panel--rev{direction:ltr}
  .cs-fblock__visual{aspect-ratio:auto;min-height:auto;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:stretch}
  .cs-fblock__visual .cs-fcard{position:static!important;width:auto!important;max-width:100%!important;
       top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
       margin-top:0!important;margin-right:0!important;margin-bottom:0!important;margin-left:0!important;
       transform:none!important}
  .cs-who-grid{grid-template-columns:repeat(2,1fr)}
  .cs-stores{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .cs-save-panel{padding:24px}
  .cs-plans{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cs-fblock__panel{padding:24px 18px}
}

/* ============================================================
   LOGO — append ".co" with zinc-400 color + size 20px
   HTML only renders "creatorstore" — we add ".co" via ::after
   ============================================================ */
a[href="/"] > span.text-zinc-950 {
  font-size: 20px;
}
a[href="/"] > span.text-zinc-950::after {
  content: ".co";
  color: #a1a1aa;
}

/* ============================================================
   NAV — 100px spacing between logo and menu (desktop only)
   Overrides Tailwind gap-6 (24px) on inner flex container
   ============================================================ */
@media (min-width: 768px) {
  nav .flex.min-w-0.items-center {
    gap: 100px !important;
  }
}

/* ============================================================
   2ND-LEVEL MENU — compact padding
   Overrides Tailwind .py-2.5 (padding-block: 10px) on dropdown items
   ============================================================ */
.py-2\.5 {
  padding: 5px 10px !important;
}

/* ============================================================
   ROTATING WORD (hero H1)
   ============================================================ */
.cs-rotate{display:inline-block;color:var(--cs-ink);position:relative;
     transition:opacity .35s ease, transform .35s ease}
.cs-rotate.is-out{opacity:0;transform:translateY(-8px)}
.cs-rotate.is-in{opacity:1;transform:translateY(0)}

/* ============================================================
   BROWSE ALL CRAFTS — compact category list
   ============================================================ */
.cs-browse{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.cs-browse-row{display:grid;grid-template-columns:240px 1fr;gap:24px;
     align-items:baseline;padding:18px 0;border-top:1px solid var(--cs-line)}
.cs-browse-row:first-child{border-top:none;padding-top:6px}
.cs-browse-row__cat{font-family:var(--cs-font-display);font-weight:700;
     font-size:16px;color:var(--cs-ink);letter-spacing:-.01em;
     display:flex;align-items:center;gap:8px}
.cs-browse-row__emo{font-size:18px;line-height:1}
.cs-browse-row__links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.cs-browse-row__links a{color:var(--cs-ink-soft);font-size:15px;text-decoration:none;
     border-bottom:1px solid transparent;padding:2px 0;
     transition:color .15s ease, border-color .15s ease}
.cs-browse-row__links a:hover{color:var(--cs-ink);border-bottom-color:var(--cs-ink)}

@media(max-width:780px){
  .cs-browse-row{grid-template-columns:1fr;gap:10px}
  .cs-browse-row__cat{font-size:15px}
  .cs-browse-row__links a{font-size:14px}
}

/* ============================================================
   PRICING PAGE — 4-TIER OVERRIDES (Free + 3 paid)
   ============================================================ */
.cs-plans{grid-template-columns:repeat(4,1fr);gap:14px}
.cs-plans .cs-plan{padding:26px}
.cs-plans .cs-plan__pop-tag{left:26px}
.cs-compare__head,
.cs-compare__row{grid-template-columns:2fr 1fr 1fr 1fr}

/* Free plan — muted / subtle styling */
.cs-plan--free{background:#fafbfc;border:1px dashed var(--cs-line)}
.cs-plan--free .cs-plan__name{color:var(--cs-ink-soft)}
.cs-plan--free .cs-plan__trial{background:#e8ebef;color:var(--cs-ink-soft)}

.cs-plan--decoy{opacity:.95}
.cs-plan--decoy .cs-plan__name{color:var(--cs-ink-soft)}

/* "Coming soon" price (smaller font than $19) */
.cs-plan__pp--soon{font-size:32px}

/* Decoy warning li */
.cs-plan__warn{color:var(--cs-ink-soft);font-style:italic}

/* Multi-line compare cell (title + subtitle) */
.cs-compare__cell--multi{flex-direction:column;align-items:flex-start;gap:3px}
.cs-compare__sub{font-size:14px;line-height:1.4}

/* "Coming soon" in compare table header */
.cs-compare__price--soon{font-size:14px;color:var(--cs-ink-soft)}

/* Universal green promise banner above compare table */
.cs-compare-banner{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:14px;
     padding:16px 20px;margin:0 0 24px;text-align:center;font-weight:600;
     color:#166534;font-size:15px}

/* "Best for" orientation row */
.cs-compare__row--bestfor{background:#fafafa;font-weight:600}

/* "Pro-only" highlighted group */
.cs-compare__group--pro{background:#fef3c7;color:#92400e;font-weight:700}

/* Hero modifiers (pricing page centered actions) */
.cs-lead--hero{max-width:620px;margin:18px auto 0}
.cs-hero__actions--center{justify-content:center;margin-top:22px}
.cs-hero__checks--center{justify-content:center;margin-top:26px}

@media(max-width:1080px){
  .cs-plans{grid-template-columns:repeat(2,1fr);gap:18px}
  .cs-plans .cs-plan{padding:32px}
  .cs-plans .cs-plan__pop-tag{left:32px}
}
@media(max-width:680px){
  .cs-plans{grid-template-columns:1fr}
}
@media(max-width:980px){
  .cs-compare__head,
  .cs-compare__row{grid-template-columns:1.5fr 1fr 1fr 1fr;font-size:14px}
}

/* ============================================================
   FOOTER — minimal legal links
   ============================================================ */
.cs-footer{padding:32px 24px;border-top:1px solid var(--cs-line);background:#fff}
.cs-footer__links{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.cs-footer__links a{font-size:14px;color:var(--cs-ink-soft);text-decoration:none;
     border-bottom:1px solid transparent;padding-bottom:1px;line-height:1.4;
     transition:color .15s ease, border-color .15s ease}
.cs-footer__links a:hover{color:var(--cs-ink);border-bottom-color:var(--cs-ink)}

@media(max-width:680px){
  .cs-footer{padding:24px 20px}
  .cs-footer__links{gap:20px}
}

/* ============================================================
   TOP NAV — brand identification + accessible links (OAuth verif)
   ============================================================ */
.cs-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
     backdrop-filter:saturate(140%) blur(10px);
     -webkit-backdrop-filter:saturate(140%) blur(10px);
     border-bottom:1px solid var(--cs-line)}
.cs-nav__inner{display:flex;align-items:center;justify-content:space-between;
     padding:14px 24px;gap:24px}
.cs-nav__brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
     color:var(--cs-ink);font-weight:700;font-size:16px;letter-spacing:-.01em}
.cs-nav__brand:hover{color:var(--cs-ink)}
.cs-nav__logo{display:inline-block;width:24px;height:24px;flex-shrink:0}
.cs-nav__links{display:flex;align-items:center;gap:26px;list-style:none;
     margin:0;padding:0}
.cs-nav__links a{color:var(--cs-ink-soft);text-decoration:none;font-size:14px;
     font-weight:500;transition:color .15s ease}
.cs-nav__links a:hover{color:var(--cs-ink)}
.cs-nav__actions{display:flex;align-items:center;gap:12px}
.cs-nav__signin{color:var(--cs-ink);text-decoration:none;font-size:14px;
     font-weight:500}
.cs-nav__signin:hover{color:var(--cs-ink)}
.cs-btn--sm{padding:8px 14px;font-size:13px}
@media(max-width:900px){
  .cs-nav__links{display:none}
  .cs-nav__inner{padding:12px 20px}
}
@media(max-width:520px){
  .cs-nav__signin{display:none}
}

/* ============================================================
   GOOGLE API DISCLOSURE — required for OAuth verification
   Prominently discloses Google Calendar API usage + privacy link
   ============================================================ */
.cs-google-disclosure{padding:0 24px;margin:24px 0 0}
.cs-gd__inner{max-width:var(--cs-maxw);margin:0 auto;
     display:flex;align-items:flex-start;gap:14px;
     padding:16px 20px;border:1px solid var(--cs-line);
     border-radius:14px;background:#fafbfc}
.cs-gd__icon{flex-shrink:0;margin-top:2px;color:#4285f4}
.cs-gd__text{margin:0;font-size:14px;line-height:1.55;color:var(--cs-ink-soft)}
.cs-gd__text b{color:var(--cs-ink);font-weight:600}
.cs-gd__text a{color:var(--cs-ink);text-decoration:underline;
     text-underline-offset:2px;font-weight:500}
.cs-gd__text a:hover{opacity:.7}
@media(max-width:680px){
  .cs-google-disclosure{padding:0 16px}
  .cs-gd__inner{padding:14px 16px;gap:10px}
  .cs-gd__text{font-size:13px}
}

/* ============================================================
   CONSOLIDATED FEATURES — sub-categories within a single panel
   ============================================================ */
.cs-features-cat{margin-top:56px;padding-top:48px;border-top:1px solid var(--cs-line)}
.cs-features-cat:first-of-type{margin-top:8px;padding-top:0;border-top:none}
.cs-features-cat__head{margin-bottom:28px}
.cs-features-cat__head .cs-pill{margin-bottom:14px}
.cs-features-cat__title{font-size:24px;font-weight:600;color:var(--cs-ink);
     letter-spacing:-.01em;margin:0 0 8px;line-height:1.25}
.cs-features-cat__desc{font-size:15px;color:var(--cs-ink-soft);margin:0;line-height:1.55}
.cs-features-cat__grid--single{max-width:440px}
@media(max-width:680px){
  .cs-features-cat{margin-top:40px;padding-top:32px}
  .cs-features-cat__title{font-size:22px}
}

/* ============================================================
   BUILDER TABS — 5-step product creation showcase
   Real screenshots of the actual admin UI, switched via tabs.
   ============================================================ */
.cs-builder-tabs{margin-top:24px}
.cs-builder-tabs__nav{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  margin-bottom:24px;padding:6px;
  background:var(--cs-bg);border:1px solid var(--cs-line);border-radius:16px;
}
.cs-builder-tab{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:transparent;border:1px solid transparent;border-radius:12px;
  padding:12px 14px;cursor:pointer;text-align:left;
  color:var(--cs-ink);font-family:inherit;
  transition:background .2s ease, border-color .2s ease;
}
.cs-builder-tab:hover{background:var(--cs-surface,#f5f5f5)}
.cs-builder-tab.is-active{background:#fff;border-color:var(--cs-line);
     box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.03)}
.cs-builder-tab__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--cs-ink-soft);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:-.02em;
  margin-bottom:6px;
}
.cs-builder-tab.is-active .cs-builder-tab__num{background:var(--cs-ink)}
.cs-builder-tab__name{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.2}
.cs-builder-tab__desc{font-size:12px;color:var(--cs-ink-soft);line-height:1.3;font-weight:500}

@media(max-width:820px){
  .cs-builder-tabs__nav{grid-template-columns:repeat(5,minmax(120px,1fr));
       overflow-x:auto;scroll-snap-type:x mandatory;
       -webkit-overflow-scrolling:touch;padding-bottom:10px}
  .cs-builder-tab{scroll-snap-align:start;min-width:120px}
  .cs-builder-tab__desc{display:none}
}

.cs-builder-panel{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start}
.cs-builder-panel[hidden]{display:none}
@media(max-width:900px){.cs-builder-panel{grid-template-columns:1fr;gap:20px}}

.cs-builder-panel__text{padding:10px 4px 0}
.cs-builder-panel__text h3{
  font-family:var(--cs-font-display,inherit);
  font-weight:700;font-size:22px;letter-spacing:-.015em;line-height:1.2;
  margin:0 0 10px;color:var(--cs-ink);
}
.cs-builder-panel__text p{
  color:var(--cs-ink-soft);font-size:15px;line-height:1.55;margin:0 0 14px;
}
.cs-builder-panel__text b{color:var(--cs-ink);font-weight:600}
.cs-builder-panel__text code{
  background:var(--cs-bg);border:1px solid var(--cs-line);border-radius:6px;
  padding:1px 6px;font-size:12.5px;font-family:ui-monospace,monospace;color:var(--cs-ink);
}
.cs-builder-panel__list{margin:6px 0 0;padding-left:18px;color:var(--cs-ink-soft);font-size:14px;line-height:1.6}
.cs-builder-panel__list li{margin-bottom:6px}
.cs-builder-panel__list li b{color:var(--cs-ink);font-weight:600}

.cs-builder-panel__shots{display:grid;gap:12px}
.cs-builder-panel__shots--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.cs-builder-panel__shots--3{grid-template-columns:1fr}}

/* Shot gallery — main image + variant thumbs (Amazon-style) */
.cs-shot-gallery{display:flex;flex-direction:column;gap:12px}
.cs-shot-gallery__main{
  border:1px solid var(--cs-line);border-radius:14px;overflow:hidden;background:#fafafa;
}
.cs-shot-gallery__main-img{
  display:block;width:100%;max-height:720px;
  object-fit:contain;object-position:top;background:#fafafa;
  transition:opacity .2s ease;
}
.cs-shot-gallery__main-lbl{
  padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--cs-ink);
  border-top:1px solid var(--cs-line);background:#fafafa;
}
.cs-shot-gallery__thumbs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.cs-shot-gallery__thumb{
  background:#fff;border:1px solid var(--cs-line);border-radius:10px;
  padding:6px 6px 8px;cursor:pointer;
  display:flex;flex-direction:column;gap:6px;
  font-family:inherit;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cs-shot-gallery__thumb:hover{transform:translateY(-1px);border-color:var(--cs-ink-soft)}
.cs-shot-gallery__thumb.is-active{
  border-color:var(--cs-ink);
  box-shadow:0 0 0 2px rgba(0,0,0,.06);
}
.cs-shot-gallery__thumb img{
  display:block;width:100%;height:78px;
  object-fit:cover;object-position:top;
  border-radius:6px;background:#f5f5f5;
}
.cs-shot-gallery__thumb-lbl{
  font-size:11.5px;font-weight:600;color:var(--cs-ink);
  text-align:center;letter-spacing:-.005em;
}
@media(max-width:520px){
  .cs-shot-gallery__thumb img{height:60px}
}

.cs-shot{
  background:var(--cs-bg);border:1px solid var(--cs-line);border-radius:14px;
  overflow:hidden;position:relative;
}
.cs-shot img{display:block;width:100%;height:auto}
.cs-shot--tall img{width:100%;max-height:640px;object-fit:contain;object-position:top;background:#fafafa}
.cs-shot__lbl{
  padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--cs-ink);
  border-top:1px solid var(--cs-line);background:#fafafa;
}

/* ============================================================
   MOCKUP FRAME — image variant (real screenshot inside benefit card)
   ============================================================ */
.cs-mockup-frame--img{padding:0;overflow:hidden}
.cs-mockup-frame--img img{display:block;width:100%;height:auto}

/* Pills — visual enumeration of components (badges, categories, formats) */
.cs-builder-panel__pills-lbl{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--cs-ink-soft);margin:14px 0 4px;
}
.cs-builder-panel__pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.cs-builder-panel__pill{
  display:inline-block;padding:4px 10px;
  background:#fff;border:1px solid var(--cs-line);border-radius:999px;
  font-size:12px;font-weight:600;color:var(--cs-ink);letter-spacing:-.01em;
  white-space:nowrap;
}
.cs-builder-panel__pill--tick::before{content:"✓ ";color:#3a9d4a;font-weight:800}

/* Quote pulled from actual UI copy — proves the builder has voice */
.cs-builder-panel__quote{
  margin-top:14px;padding:10px 14px;border-left:3px solid var(--cs-ink);
  background:#fafaf7;border-radius:0 8px 8px 0;
  font-size:13px;color:var(--cs-ink-soft);
}
.cs-builder-panel__quote b{color:var(--cs-ink);font-weight:600}

/* ============================================================
   EVERYTHING BUILT-IN — component grid section
   ============================================================ */
.cs-builtin-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;
}
@media(max-width:900px){.cs-builtin-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cs-builtin-grid{grid-template-columns:1fr}}

.cs-builtin-card{
  background:var(--cs-bg);border:1px solid var(--cs-line);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
}
.cs-builtin-card__count{
  font-family:var(--cs-font-heavy,inherit);font-weight:800;
  font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--cs-ink);
}
.cs-builtin-card__lbl{
  font-size:13px;font-weight:600;color:var(--cs-ink);letter-spacing:-.01em;
  line-height:1.3;
}
.cs-builtin-card__list{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:2px;
}
.cs-builtin-card__chip{
  display:inline-block;padding:3px 8px;
  background:#fff;border:1px solid var(--cs-line);border-radius:999px;
  font-size:11px;font-weight:500;color:var(--cs-ink-soft);letter-spacing:-.005em;
  white-space:nowrap;
}