/* ============================================================
   SpOki design — PART 2: remaining homepage sections
   Append after spoki_design.css (or enqueue both). All scoped
   under .sp-scope. Edit colors via the variables in part 1.
   ============================================================ */

/* photo placeholder (light tile with a caption) */
.sp-scope .spoki_photo{position:relative;background:var(--teal-wash);display:flex;align-items:center;justify-content:center;color:var(--teal-ink);font-family:var(--font-body);font-weight:700;font-size:13px;text-align:center;overflow:hidden;}
.sp-scope .spoki_photo img{width:100%;height:100%;object-fit:cover;}

/* ---- FINDER ---- */
.sp-scope .spoki_finder{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:30px;border:1px solid var(--line);}
.sp-scope .spoki_finder_grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end;}
.sp-scope .spoki_select label{display:block;font-weight:800;font-size:12.5px;color:var(--ink-soft);margin-bottom:6px;}
.sp-scope .spoki_select select{width:100%;border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:13px 16px;font-family:var(--font-body);font-weight:700;font-size:14.5px;color:var(--ink);cursor:pointer;}
@media(max-width:860px){.sp-scope .spoki_finder_grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.sp-scope .spoki_finder_grid{grid-template-columns:1fr;}}

/* ---- COLORED BAND (lead / help / registry) ---- */
.sp-scope .spoki_band{border-radius:var(--r-lg);padding:26px 30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.sp-scope .spoki_band .spoki_band_txt{flex:1;min-width:240px;}

/* ---- FAST PATHS ---- */
.sp-scope .spoki_fast{position:relative;overflow:hidden;min-height:200px;border-radius:var(--r-lg);padding:24px;border:none;display:flex;flex-direction:column;}
.sp-scope .spoki_fast .spoki_fast_bg{position:absolute;right:-16px;bottom:-16px;opacity:.22;}
.sp-scope .spoki_fast .spoki_fast_bg .sp-ic{width:104px;height:104px;}

/* ---- NEED COLLECTIONS (photo cards) ---- */
.sp-scope .spoki_needcard{background:#fff;border-radius:20px;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;text-align:left;}
.sp-scope .spoki_needcard .spoki_photo{height:132px;}
.sp-scope .spoki_needcard .spoki_need_ico{position:absolute;bottom:-18px;left:16px;width:40px;height:40px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-sm);border:2px solid #fff;}
.sp-scope .spoki_needcard .spoki_need_body{padding:24px 18px 18px;}

/* ---- HOW TO PLAY (numbered photo steps) ---- */
.sp-scope .spoki_step{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--sh-sm);border:1px solid var(--line);}
.sp-scope .spoki_step .spoki_photo{height:150px;}
.sp-scope .spoki_step_num{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:var(--r-pill);background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:16px;}

/* ---- REGISTRY ---- */
.sp-scope .spoki_registry{background:linear-gradient(160deg,#FFF1E0,#FFE7D0);border-radius:30px;overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr;align-items:stretch;}
.sp-scope .spoki_registry .spoki_photo{min-height:380px;}
.sp-scope .spoki_registry_body{padding:40px 42px;}
.sp-scope .spoki_registry_steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;}
.sp-scope .spoki_registry_step{display:flex;align-items:center;gap:11px;background:#fff;border-radius:14px;padding:13px 14px;}
.sp-scope .spoki_registry_step span.n{width:32px;height:32px;flex:none;border-radius:var(--r-pill);background:var(--teal-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;}
@media(max-width:860px){.sp-scope .spoki_registry{grid-template-columns:1fr;}.sp-scope .spoki_registry .spoki_photo{min-height:240px;}}

/* ---- MANIFESTO (teal band white cards) ---- */
.sp-scope .spoki_manifesto_card{background:#fff;border-radius:20px;padding:24px;text-align:left;}

/* ---- REVIEWS (honest placeholders) ---- */
.sp-scope .spoki_review{background:#fff;border-radius:20px;padding:26px;box-shadow:var(--sh-sm);border:1px dashed var(--line);}
.sp-scope .spoki_review_line{height:11px;border-radius:var(--r-pill);background:var(--line);margin-bottom:8px;}

/* ---- HOME STORY ---- */
.sp-scope .spoki_story{background:#fff;border-radius:28px;box-shadow:var(--sh-md);overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr;align-items:stretch;}
.sp-scope .spoki_story .spoki_photo{min-height:360px;}
.sp-scope .spoki_story_body{padding:44px 42px;}
.sp-scope .spoki_story_li{display:flex;align-items:center;gap:11px;margin-bottom:10px;}
.sp-scope .spoki_story_li span.c{width:24px;height:24px;flex:none;border-radius:var(--r-pill);background:var(--success-soft);display:flex;align-items:center;justify-content:center;color:var(--success);}
@media(max-width:860px){.sp-scope .spoki_story,.sp-scope .spoki_helpform_grid{grid-template-columns:1fr !important;}.sp-scope .spoki_story .spoki_photo{min-height:240px;}}

/* ---- HELP FORM ---- */
.sp-scope .spoki_helpform_grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;}
.sp-scope .spoki_form_card{background:#fff;border-radius:24px;padding:30px;box-shadow:var(--sh-md);}
.sp-scope .spoki_form_2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
@media(max-width:520px){.sp-scope .spoki_form_2{grid-template-columns:1fr;}}

/* ---- SEO COLUMNS ---- */
.sp-scope .spoki_seocols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
@media(max-width:760px){.sp-scope .spoki_seocols{grid-template-columns:1fr;}}

/* ============================================================
   PART 3: INNER-PAGE TEMPLATES (hub / brand / category topper)
   ============================================================ */
.sp-scope .spoki_pagehero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(170deg,#34C2C8,#19B0B6);}
.sp-scope.spoki_pagehero-coral{background:linear-gradient(170deg,#FF9C90,#FF6B5B);}
.sp-scope.spoki_pagehero-orange{background:linear-gradient(170deg,#FFB85C,#FF8A00);}
.sp-scope .spoki_pagehero .sp-container{padding:34px 0 56px;position:relative;z-index:2;}
.sp-scope .spoki_pagehero h1,.sp-scope .spoki_pagehero h2{color:#fff;margin-top:10px;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1.08;}
.sp-scope .spoki_pagehero .sp-eyebrow{color:rgba(255,255,255,.92);}
.sp-scope .spoki_pagehero .spoki_phsub{color:rgba(255,255,255,.92);margin-top:14px;max-width:600px;font-weight:600;font-size:clamp(16px,1.4vw,19px);line-height:1.55;}
.sp-scope .spoki_crumbs{font-size:13px;font-weight:700;color:rgba(255,255,255,.9);margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;}
.sp-scope .spoki_crumbs a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.sp-scope .spoki_crumbs span{opacity:.7;}

/* LongCopy */
.sp-scope .spoki_longcopy{max-width:900px;margin:0 auto;}
.sp-scope .spoki_longcopy .spoki_lc_item{margin-bottom:22px;}
.sp-scope .spoki_longcopy h3{font-family:var(--font-display);font-weight:600;font-size:19px;margin-bottom:8px;color:var(--ink);}

/* related chips row */
.sp-scope .spoki_related{display:flex;flex-wrap:wrap;gap:10px;}

/* hub age/skill cards */
.sp-scope .spoki_hubcard{background:#fff;border-radius:var(--r-lg);padding:24px;border:1px solid var(--line);box-shadow:var(--sh-sm);text-align:left;display:block;}
.sp-scope .spoki_hubcard .badge{display:inline-flex;align-items:center;font-weight:800;font-size:11px;padding:5px 11px;border-radius:var(--r-pill);background:var(--sky-wash);color:var(--teal-ink);margin:0 6px 6px 0;}

/* category topper (no H1, goes above Woo products) */
.sp-scope .spoki_topper{background:var(--teal-wash);border-radius:var(--r-lg);padding:24px 26px;margin-bottom:20px;}