/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --cph-pink:       #E835AC;
  --cph-pink-dark:  #D11E96;
  --cph-pink-tint:  #FFF6FB;
  --cph-pink-border:#F2DCEA;
  --cph-dark:       #1A1A2E;
  --cph-body:       #5C5866;
  --cph-muted:      #9A8FA0;
  --cph-border:     #F0EBEF;
  --cph-bg:         #FAF6F9;

  --cph-c1: #FF4D6D; --cph-t1: #FFEEF1; --cph-d1: #E11D48;
  --cph-c2: #FF9E2C; --cph-t2: #FFF3E3; --cph-d2: #D9650A;
  --cph-c3: #FFD23F; --cph-t3: #FFF9E0; --cph-d3: #B7791F;
  --cph-c4: #38D39F; --cph-t4: #E8F8F1; --cph-d4: #0E9F6E;
  --cph-c5: #4D9DE0; --cph-t5: #EAF3FC; --cph-d5: #2563C9;

  --ff-head: 'Fredoka', sans-serif;
  --ff-body: 'Nunito', sans-serif;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 16px 36px rgba(40,20,40,.10);
  --shadow-nav:  0 20px 60px rgba(40,20,40,.16);
}

/* ── Reset & base ───────────────────────────────────────────────────────────── */
.cph-page *, .cph-page *::before, .cph-page *::after { box-sizing: border-box; }
.cph-page { font-family: var(--ff-body); color: var(--cph-dark); background: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.cph-page a { text-decoration: none; color: inherit; }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.cph-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ── Animations ─────────────────────────────────────────────────────────────── */
@keyframes cphFloat  { 0%,100%{transform:translateY(0)}   50%{transform:translateY(-9px)} }
@keyframes cphFloat2 { 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-7px) rotate(-6deg)} }
@keyframes cphSpin   { 0%,100%{transform:rotate(-8deg)}   50%{transform:rotate(8deg)} }

/* ── Shared MoMo motion (from the animations handoff): peek (404), bob, success pop, loading dots ── */
@keyframes cphPeek { 0%,8%{transform:translateY(96px)} 22%,45%{transform:translateY(0) rotate(-3deg)} 58%,80%{transform:translateY(0) rotate(3deg)} 92%,100%{transform:translateY(96px)} }
@keyframes cphBob  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes cphPop  { 0%{transform:scale(.4);opacity:0} 55%{transform:scale(1.12)} 75%{transform:scale(.96)} 100%{transform:scale(1);opacity:1} }
@keyframes cphDot  { 0%,80%,100%{transform:scale(.55);opacity:.4} 40%{transform:scale(1);opacity:1} }
@keyframes cphConfetti { 0%{transform:translate(0,0) rotate(0);opacity:1} 100%{transform:translate(var(--cx,0),72px) rotate(300deg);opacity:0} }
.cph-bob  { animation:cphBob 3.6s ease-in-out infinite; }
.cph-pop  { animation:cphPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.cph-peek-stage { overflow:hidden; }
.cph-peek { animation:cphPeek 4.4s ease-in-out infinite; }
.cph-load-dots { display:inline-flex; gap:6px; align-items:center; }
.cph-load-dots i { width:8px; height:8px; border-radius:50%; background:#E835AC; animation:cphDot 1.2s ease-in-out infinite; }
.cph-load-dots i:nth-child(2){ animation-delay:.15s; background:#FF9E2C; }
.cph-load-dots i:nth-child(3){ animation-delay:.3s;  background:#38D39F; }
.cph-confetti span { position:absolute; top:0; width:9px; height:9px; border-radius:2px; animation:cphConfetti .9s ease-out forwards; }
@media (prefers-reduced-motion: reduce){
  .cph-bob,.cph-pop,.cph-peek,.cph-load-dots i,.cph-confetti span{ animation:none!important; }
  .cph-peek{ transform:translateY(0)!important; } .cph-pop{ opacity:1!important; transform:none!important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--cph-border);
}
.cph-nav__inner {
  display: flex; align-items: center; gap: 6px; height: 74px;
}
.cph-nav__inner > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Logo */
.cph-logo {
  display: flex; align-items: center; gap: 9px; flex: none;
}
.cph-logo__text {
  font-family: var(--ff-head); font-weight: 600; font-size: 23px;
  letter-spacing: -0.6px; color: var(--cph-dark); text-transform: none !important;
}
.cph-logo__text span { color: var(--cph-pink); }

/* Desktop links */
.cph-navlinks {
  display: flex; align-items: center; gap: 4px; margin-left: 8px;
}
.cph-navlink {
  font-family: var(--ff-body) !important; font-weight: 700; font-size: 15px;
  color: var(--cph-dark) !important; padding: 9px 13px; border-radius: var(--radius-sm);
  transition: background .15s; white-space: nowrap; position: relative;
  text-transform: none !important; letter-spacing: normal !important;
}
.cph-navlink:hover { background: var(--cph-bg); color: var(--cph-dark) !important; }
.cph-navlink--new::after {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: #FF4D6D;
}
.cph-browse-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; margin: 0; box-shadow: none;
  font-family: var(--ff-body) !important; font-weight: 700; font-size: 15px;
  color: var(--cph-dark) !important; padding: 9px 13px; border-radius: var(--radius-sm);
  transition: background .15s; text-transform: none !important; letter-spacing: normal !important;
  line-height: 1; align-self: center;
}
.cph-browse-btn:hover { background: var(--cph-bg); }
.cph-browse-caret {
  transition: transform .18s;
  color: var(--cph-muted);
}
.cph-browse-wrap { position: relative; }
.cph-browse-wrap.is-open .cph-browse-caret,
.cph-browse-wrap:hover .cph-browse-caret { transform: rotate(180deg); }

/* Search */
.cph-nav .cph-search,
.cph-search {
  display: flex !important; align-items: center !important; gap: 8px;
  background: #F6F2F5 !important;
  border: 1.5px solid #EFE9EE !important;
  border-radius: 22px !important;
  padding: 0 14px !important;
  width: 210px; flex: none;
  transition: border-color .15s;
  box-shadow: none !important; outline: none !important;
  height: 38px; align-self: center; margin-left: 10px;
  margin-top: 0 !important; margin-bottom: 0 !important;
  vertical-align: middle;
}
.cph-nav .cph-search:focus-within,
.cph-search:focus-within {
  border-color: var(--cph-pink) !important;
  box-shadow: 0 0 0 3px rgba(232,53,172,.08) !important;
}
.cph-search input, .cph-nav .cph-search input {
  border: none !important; background: none !important; outline: none !important;
  font-family: var(--ff-body) !important; font-size: 14px !important; color: var(--cph-dark) !important;
  width: 100%; text-transform: none !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; height: 100% !important; line-height: 38px;
}
.cph-search input::placeholder { color: var(--cph-muted); }

/* Pinterest btn */
.cph-pinterest {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: #E60023; display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
.cph-pinterest:hover { opacity: .85; }

/* Spacer */
.cph-nav__spacer { flex: 1; }

/* Burger */
.cph-burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid #EFE9EE;
  border-radius: var(--radius-sm); background: #fff; cursor: pointer; flex: none;
}
/* Force the icon size — Flatsome's button/svg normalize otherwise shrinks the inline
   icon to a dot (bare width/height attrs lose to inherited font sizing). */
.cph-burger svg { width: 22px !important; height: 22px !important; flex: none; display: block; }

/* ── Mega menu ──────────────────────────────────────────────────────────────── */
.cph-mega {
  position: absolute; top: 100%; left: 0;
  width: min(880px, 86vw);
  background: #fff; border: 1px solid #EFEAEE;
  border-radius: 0 0 20px 20px; box-shadow: var(--shadow-nav);
  padding: 18px; display: none; z-index: 100;
  /* Bridge gap so mouse can move from button to panel without closing */
  padding-top: 24px;
}
/* Keep open on hover of wrapper or panel */
.cph-browse-wrap:hover .cph-mega { display: block; }
.cph-browse-wrap.is-open .cph-mega { display: block; }

.cph-mega__tabs {
  display: flex; gap: 6px;
  border-bottom: 1px solid #F3EEF2; padding-bottom: 12px; margin-bottom: 14px;
}
.cph-mega__tab {
  background: transparent; color: #6A6573;
  border: none; cursor: pointer;
  font-family: var(--ff-head); font-weight: 500; font-size: 14px;
  padding: 9px 16px; border-radius: var(--radius-sm); transition: background .15s, color .15s;
}
.cph-mega__tab.is-active,
.cph-mega__tab:hover { background: #FBF1F7; color: var(--cph-pink); }

.cph-mega__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px;
}
.cph-mega__item {
  display: flex; gap: 11px; padding: 9px; border-radius: var(--radius-sm);
  transition: background .15s;
}
.cph-mega__item:hover { background: var(--cph-bg); }
.cph-mega__icon {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.cph-mega__item-name {
  font-family: var(--ff-head); font-weight: 500; font-size: 14.5px; color: var(--cph-dark);
  display: flex; align-items: center; gap: 5px;
}
.cph-mega__item-sub { display: block; font-size: 12px; color: #94909B; margin-top: 2px; line-height: 1.45; }
.cph-mega__footer {
  border-top: 1px solid #F3EEF2; margin-top: 12px; padding-top: 12px; text-align: right;
}
.cph-mega__footer a { font-family: var(--ff-head); font-weight: 600; font-size: 13.5px; color: var(--cph-pink); }

/* ── Mobile menu ────────────────────────────────────────────────────────────── */
.cph-mobile-panel {
  border-top: 1px solid var(--cph-border);
  background: #fff; padding: 14px 24px 22px;
  display: none;
}
.cph-mobile-panel.is-open { display: block; }
.cph-mobile-search {
  display: flex; align-items: center; gap: 8px;
  background: #F6F2F5; border: 1px solid #EFE9EE;
  border-radius: var(--radius-sm); padding: 15px 14px; margin-bottom: 12px;
}
.cph-mobile-search input {
  border: none; background: none; outline: none;
  font-family: var(--ff-body); font-size: 15px; width: 100%;
  /* Reset Flatsome's input margin/height so it sits centered in the pill (mirrors .cph-search input). */
  margin: 0 !important; padding: 0 !important; box-shadow: none !important;
  height: auto !important; min-height: 0 !important; line-height: 1.3;
}
.cph-mobile-group { border-bottom: 1px solid #F3EEF2; }
.cph-mobile-group__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer;
  font-family: var(--ff-head); font-weight: 600; font-size: 16px; color: var(--cph-dark);
  padding: 5px 2px; margin: 0 !important; /* kill Flatsome's button margin-bottom:1em */
}
.cph-mobile-group__cats {
  padding: 0 2px 14px; display: flex; flex-wrap: wrap; gap: 8px; display: none;
}
.cph-mobile-group__cats.is-open { display: flex; }
.cph-mobile-group__cat {
  font-size: 13.5px; font-weight: 600; color: #5A5560;
  background: #F6F2F5; border-radius: 9px; padding: 7px 11px;
}
.cph-mobile-links { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.cph-mobile-links a {
  font-family: var(--ff-head); font-weight: 600; font-size: 16px;
  color: var(--cph-dark); padding: 12px 2px; display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-hero {
  position: relative;
  background: linear-gradient(180deg, #FFF6FB 0%, #FFFFFF 78%);
  overflow: hidden;
}
.cph-hero__decor-dot {
  position: absolute; border-radius: 50%;
  animation: cphFloat 5s ease-in-out infinite;
}
.cph-hero__grid {
  display: grid; grid-template-columns: 1.06fr 0.94fr;
  gap: 44px; align-items: center;
  padding: 62px 0 70px; position: relative; z-index: 1;
}
.cph-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--cph-pink-border);
  border-radius: var(--radius-pill); padding: 6px 14px; margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(232,53,172,.08);
}
.cph-hero__badge-dots { display: flex; gap: 3px; }
.cph-hero__badge-dot { width: 9px; height: 9px; border-radius: 50%; }
.cph-hero__badge-text { font-weight: 700; font-size: 12.5px; letter-spacing: .3px; color: #A23C7C; }
.cph-hero h1 {
  font-family: var(--ff-head); font-weight: 600;
  font-size: clamp(36px, 5.2vw, 58px); line-height: 1.02;
  letter-spacing: -1.5px; color: var(--cph-dark); margin: 0 0 18px;
}
.cph-hero h1 span { color: var(--cph-pink); }
.cph-hero__lead {
  font-size: 18px; line-height: 1.6; color: #5C5866; margin: 0 0 30px; max-width: 480px;
}
.cph-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.cph-btn-primary,
a.cph-btn-primary,
.cph-page a.cph-btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cph-pink); color: #fff !important;
  font-family: var(--ff-head) !important; font-weight: 600; font-size: 16.5px;
  padding: 15px 26px; border-radius: var(--radius-md);
  box-shadow: 0 8px 22px rgba(232,53,172,.32);
  transition: background .15s, transform .15s;
}
.cph-btn-primary:hover,
a.cph-btn-primary:hover { background: var(--cph-pink-dark); transform: translateY(-2px); color: #fff !important; }
.cph-btn-secondary {
  display: inline-flex; align-items: center;
  background: #fff; color: var(--cph-dark);
  font-family: var(--ff-head); font-weight: 600; font-size: 16.5px;
  padding: 15px 26px; border-radius: var(--radius-md);
  border: 2px solid #EBD9E5; transition: border-color .15s, color .15s;
}
.cph-btn-secondary:hover { border-color: var(--cph-pink); color: var(--cph-pink); }
.cph-btn-dark,
a.cph-btn-dark,
.cph-page a.cph-btn-dark {
  background: #1A1A2E; color: #fff !important;
  font-family: var(--ff-head); font-weight: 600; font-size: 15.5px;
  padding: 14px 28px; border-radius: 13px; border: none;
  transition: background .15s;
}
.cph-btn-dark:hover,
a.cph-btn-dark:hover { background: #2A2A44; color: #fff !important; }
.cph-hero__social-proof {
  display: flex; align-items: center; gap: 16px;
  font-size: 14px; color: #86808C; font-weight: 600;
  position: relative; z-index: 2;
}
.cph-avatar-stack { display: flex; flex: none; }
.cph-avatar {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
}
.cph-avatar + .cph-avatar { margin-left: -9px; }

/* Momo area */
.cph-hero__momo {
  position: relative; display: flex; align-items: center;
  justify-content: center; min-height: 340px;
}
.cph-hero__momo-glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, #FCE3F1 0%, rgba(252,227,241,0) 68%);
}
#cph-momo-static { position: relative; z-index: 1; }
#cph-momo-lottie {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AD ZONE
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Placeholder ad styling removed — ads are now plugin-managed (.cph-adunit, cph-ads plugin).
   .cph-ad-wrap stays: it's the spacing wrapper around the plugin slots on the homepage. */
.cph-ad-wrap { padding: 8px 0 6px; }
/* Self-contained ad band — drop <div class="cph-adband"><?php cph_ad_zone('leaderboard'); ?></div>
   into any standalone template; centers + spaces the slot regardless of the page's own wrapper. */
.cph-adband { max-width: 1160px; margin: 0 auto; padding: 22px 24px; box-sizing: border-box; }
/* Difficulty badge (little top-right level badge on cards) — interactive: styled tooltip on hover, click → guide */
.cph-diffbadge { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.cph-diffbadge:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(40,20,40,.24) !important; }
.cph-diffbadge:focus-visible { outline: 2px solid #E835AC; outline-offset: 2px; }
/* Styled difficulty tooltip — rendered on <body> (position:fixed) so it is never clipped by the card overflow */
.cph-difftip { position: fixed; z-index: 99999; background: #1A1A2E; color: #fff; font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12.5px; font-weight: 700; line-height: 1.25; letter-spacing: .1px; padding: 7px 12px; border-radius: 10px; white-space: nowrap; box-shadow: 0 10px 28px rgba(26,18,28,.34); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
.cph-difftip.show { opacity: 1; transform: translateY(0); }
.cph-difftip::after { content: ""; position: absolute; top: 100%; left: var(--tip-arrow, 50%); transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1A1A2E; }
.cph-difftip.cph-difftip--below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1A1A2E; }
/* Small "Advertisement" caption above every ad slot (via cph_ad_zone()). */
.cph-ad-label { display:block; text-align:center; font:700 10px/1.4 'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:1.4px; text-transform:uppercase; color:#B4B4BE; margin:0 0 4px; }
/* Visible reserved ad placeholder (shown when no real ad renders yet) — sized to the real unit via
   --adw/--adh (desktop) and --adwm/--adhm (mobile) so the owner can see each slot's footprint. */
.cph-adph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; box-sizing:border-box; width:100%; max-width:var(--adwm,320px); min-height:var(--adhm,90px); margin:0 auto; border:1px dashed #D8D2DE; border-radius:10px; background:#FAF8FB; }
.cph-adph .cph-ad-label { margin:0; }
.cph-adph-size { font:800 11px/1 'Nunito',sans-serif; letter-spacing:.5px; color:#CFC8D5; }
@media (min-width:769px) { .cph-adph { max-width:var(--adw,728px); min-height:var(--adh,90px); } }

/* Pin It on image hover (internal, replaces the Weblizar plugin — see assets/js/cph-pinit.js) */
.cph-pinit { z-index: 9999; display: inline-flex; align-items: center; gap: 6px; background: #E60023; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 13px; line-height: 1; padding: 7px 12px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.28); cursor: pointer; text-decoration: none !important; transition: background .15s; }
/* !important + states: Flatsome sets a global link colour that otherwise turns "Save" black. */
.cph-pinit, .cph-pinit:link, .cph-pinit:visited, .cph-pinit:hover, .cph-pinit:focus, .cph-pinit:active { color: #fff !important; }
.cph-pinit:hover { background: #C8001E; }
.cph-pinit svg { flex: none; fill: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-section { padding: 54px 0 20px; }
.cph-section--first { padding-top: 64px; }
.cph-label {
  font-family: var(--ff-head); font-weight: 600; font-size: 13px;
  letter-spacing: 1.6px; color: var(--cph-pink); text-transform: uppercase;
}
.cph-section-title {
  font-family: var(--ff-head); font-weight: 600;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08;
  letter-spacing: -1px; color: var(--cph-dark); margin: 10px 0 0;
}
.cph-section-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.cph-section-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 30px;
}
.cph-see-all { font-family: var(--ff-head); font-weight: 600; font-size: 15px; color: var(--cph-pink); flex: none; }
.cph-see-all:hover { color: var(--cph-pink-dark); }

/* ── Grids ──────────────────────────────────────────────────────────────────── */
.cph-g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.cph-g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.cph-g2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.cph-g5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════════
   WHO IS THIS FOR
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-audience-card {
  border-radius: var(--radius-xl); padding: 26px 24px 24px;
  display: flex; flex-direction: column;
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s;
}
.cph-audience-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(40,20,40,.08); }
.cph-audience-card__icon {
  width: 70px; height: 70px; border-radius: 18px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(40,20,40,.06); margin-bottom: 16px; flex: none;
  align-self: center;                 /* center the icon box within the card */
}
.cph-audience-card h3 {
  font-family: var(--ff-head); font-weight: 600; font-size: 21px;
  color: var(--cph-dark); margin: 0 0 8px; letter-spacing: -0.3px;
  text-align: center;                 /* center the heading under the icon */
}
.cph-audience-card p { font-size: 14.5px; line-height: 1.6; color: #6A6573; margin: 0; }
.cph-audience-card__stat {
  display: flex; align-items: center; gap: 8px; margin-top: 13px;
}
.cph-audience-card__stat-dot {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cph-audience-card__stat-text { font-size: 13px; font-weight: 700; line-height: 1.35; }
.cph-audience-card__diff {
  margin-top: auto; padding-top: 18px;
}
.cph-audience-card__diff-inner {
  background: #fff; border-radius: 15px; padding: 12px 14px;
  border: 1px solid transparent;
}
.cph-audience-card__diff-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
}
.cph-audience-card__diff-level {
  font-family: var(--ff-head); font-weight: 600; font-size: 12.5px; color: #6A6573;
}
.cph-diff-icons { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.cph-diff-icon { width: 30px; height: 30px; flex: none; }

/* ═══════════════════════════════════════════════════════════════════════════════
   PRODUCT CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-product-card {
  background: #fff; border: 1px solid #EEE9EC;
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: block; color: inherit;
}
.cph-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: #E8DDE5;
  color: inherit;
}
.cph-product-card__thumb {
  position: relative; aspect-ratio: 210/297; overflow: hidden;
}
.cph-product-card__thumb > img {
  /* DIRECT child only — a descendant selector here also hit the difficulty badge's
     nested <img>, stretching it over the badge and hiding the border + number. */
  /* contain (not cover) so landscape coloring pages show whole, not cropped */
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.cph-product-card__thumb-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: .35;
}
.cph-product-card__cat-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: #fff; border-radius: var(--radius-pill);
  padding: 4px 10px; font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(40,20,40,.10);
}
/* difficulty badge: rendered with inline styles in template-parts/home/popular.php —
   byte-identical to the category/tag/search card badge (the site-wide design), so no
   shared class is needed (and no risk of a stale combined stylesheet hiding it). */
.cph-product-card__body { padding: 13px 14px 15px; }
.cph-product-card__title {
  display: block; font-family: var(--ff-head); font-weight: 500; font-size: 15.5px;
  color: var(--cph-dark); line-height: 1.2; transition: color .15s;
}
.cph-product-card:hover .cph-product-card__title { color: var(--cph-pink); }
.cph-product-card__meta { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.cph-product-card__format {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800;
  border-radius: var(--radius-pill); padding: 3px 9px;
}
.cph-product-card__free {
  font-size: 12px; font-weight: 700; color: #1E9E63;
  display: inline-flex; align-items: center; gap: 5px;
}
.cph-product-card__free-dot { width: 6px; height: 6px; border-radius: 50%; background: #38D39F; }


/* ═══════════════════════════════════════════════════════════════════════════════
   CATEGORY CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-cat-card {
  display: block; background: #fff; border: 1px solid #EEE9EC;
  border-bottom-width: 4px; border-radius: var(--radius-lg); padding: 20px;
  transition: transform .2s, box-shadow .2s; color: inherit;
}
.cph-cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); color: inherit; }
.cph-cat-card__thumb {
  display: flex; align-items: center; justify-content: center;
  height: 96px; border-radius: var(--radius-md); margin-bottom: 14px; overflow: hidden;
}
.cph-cat-card__thumb img { width: 64px; height: 64px; object-fit: contain; }
.cph-cat-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cph-cat-card__name {
  font-family: var(--ff-head); font-weight: 600; font-size: 17px;
  color: var(--cph-dark); letter-spacing: -0.3px;
}
.cph-cat-card__count {
  font-size: 12px; font-weight: 800; border-radius: var(--radius-pill);
  padding: 3px 9px; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BRAND STORY
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-story {
  background: #FBF7FA; margin-top: 54px;
}
.cph-story__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap; padding: 58px 0;
}
.cph-story__text { max-width: 600px; }
.cph-story__text h2 {
  font-family: var(--ff-head); font-weight: 600;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.15;
  letter-spacing: -0.6px; color: var(--cph-dark); margin: 10px 0 16px;
}
.cph-story__text p { font-size: 16px; line-height: 1.7; color: #5C5866; margin: 0 0 14px; }
.cph-story__text p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════
   DIFFICULTY SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-diff-head { display: flex; align-items: center; gap: 14px; }
.cph-diff-card {
  background: #fff; border: 1px solid #ECECF1; border-top-width: 4px;
  border-radius: var(--radius-lg); padding: 22px 16px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.cph-diff-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(40,20,40,.09); }
.cph-diff-card__icon-wrap { position: relative; width: 64px; height: 64px; }
.cph-diff-card__icon-wrap img { width: 64px; height: 64px; }
.cph-diff-card__num {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 8px; color: #fff;
  font-family: var(--ff-head); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.cph-diff-card__name {
  font-family: var(--ff-head); font-weight: 600; font-size: 16px;
  color: var(--cph-dark); margin-top: 14px; letter-spacing: -0.2px;
}
.cph-diff-card__ages {
  margin-top: 8px; padding: 3px 11px; border-radius: var(--radius-pill);
  font-weight: 800; font-size: 12px;
}
.cph-diff-desc {
  text-align: center; max-width: 560px; margin: 26px auto 0;
}
.cph-diff-desc p { font-size: 15px; line-height: 1.6; color: #6A6573; margin: 0 0 16px; }
.cph-diff-desc a { font-family: var(--ff-head); font-weight: 600; font-size: 15px; color: var(--cph-pink); }

/* ═══════════════════════════════════════════════════════════════════════════════
   GUIDES
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-guide-card {
  display: flex; align-items: center; gap: 20px;
  border-radius: var(--radius-xl); padding: 24px 26px;
  transition: transform .2s, box-shadow .2s; border: 1px solid transparent;
  color: inherit;
}
.cph-guide-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(40,20,40,.08); color: inherit; }
.cph-guide-card__icon {
  flex: none; width: 88px; height: 88px; border-radius: 18px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(40,20,40,.06);
}
.cph-guide-card h3 {
  font-family: var(--ff-head); font-weight: 600; font-size: 19px;
  color: var(--cph-dark); margin: 0 0 6px; letter-spacing: -0.3px;
}
.cph-guide-card p { font-size: 14px; line-height: 1.55; color: #6A6573; margin: 0 0 10px; }
.cph-guide-card__link { font-family: var(--ff-head); font-weight: 600; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-nl { border-radius: 28px; padding: 42px 40px; overflow: hidden; }
.cph-nl__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 30px; align-items: center; }
.cph-nl__momo { display: flex; justify-content: center; }
.cph-nl h2 {
  font-family: var(--ff-head); font-weight: 600;
  font-size: clamp(24px, 3vw, 33px); line-height: 1.1;
  letter-spacing: -0.6px; color: var(--cph-dark); margin: 0 0 10px;
}
.cph-nl p { font-size: 16px; line-height: 1.6; color: #5C5866; margin: 0 0 22px; }
.cph-nl__form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 480px; }
.cph-nl__input {
  flex: 1; min-width: 180px; border: 1px solid; background: #fff;
  border-radius: 13px; padding: 14px 16px;
  font-family: var(--ff-body); font-size: 15px; outline: none; color: var(--cph-dark);
}
.cph-nl__btn {
  background: var(--cph-pink); color: #fff; border: none; cursor: pointer;
  font-family: var(--ff-head); font-weight: 600; font-size: 15.5px;
  padding: 14px 26px; border-radius: 13px;
  box-shadow: 0 8px 20px rgba(232,53,172,.28); transition: background .15s;
}
.cph-nl__btn:hover { background: var(--cph-pink-dark); }
.cph-nl__social-proof {
  display: flex; align-items: center; gap: 9px; margin-top: 16px;
  font-size: 13.5px; color: #7A7480; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SEO TEXT
   ═══════════════════════════════════════════════════════════════════════════════ */
.cph-seo {
  background: #FAFAFA; border-top: 1px solid #F0F0F2;
}
.cph-seo__inner {
  max-width: 860px; margin: 0 auto; padding: 46px 28px; text-align: center;
}
.cph-seo h2 {
  font-family: var(--ff-head); font-weight: 600; font-size: 20px;
  color: var(--cph-dark); margin: 0 0 16px; letter-spacing: -0.3px;
}
.cph-seo p { font-size: 13.5px; line-height: 1.75; color: #8A858F; margin: 0 0 12px; }
.cph-seo p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════════ */
/* "Soft & light" (handoff 1a): pale-pink band, ink text, magenta accents. Markup: cph-footer.php */
.cph-footer { font-family: var(--ff-body); line-height: 1.5; }
.cph-footer__wave { display: block; width: 100%; height: 42px; margin-bottom: -1px; }
.cph-footer__band { background: #FFF4F9; padding: 16px 0 34px; }
.cph-footer__grid {
  max-width: 1140px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1.55fr 1fr 1fr 1.45fr; gap: 44px; align-items: start;
}
/* brand */
.cph-footer__logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-bottom: 18px; }
.cph-footer__logo .t { font-family: var(--ff-head); font-weight: 600; font-size: 21px; letter-spacing: -.5px; color: #2A2433; }
.cph-footer__logo .t span { color: #C9197A; }
.cph-footer__trust { display: flex; align-items: flex-start; gap: 14px; }
.cph-footer__momo { flex: none; overflow: visible; margin-top: 2px; }
.cph-footer__trust h4 { font-family: var(--ff-head); font-weight: 500; font-size: 17px; line-height: 1.3; color: #2A2433; margin: 0 0 8px; }
.cph-footer__trust p { font-size: 14px; line-height: 1.55; color: #6E6470; margin: 0; }
.cph-footer__brandnav { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.cph-footer__brandnav a { padding: 4px 0; font-size: 15px; font-weight: 700; color: #5E5560; text-decoration: none; transition: color .15s; }
.cph-footer__brandnav a:hover { color: #C9197A; }
/* explore / help columns — real <h3> heading + <button> (ARIA accordion); desktop = always shown */
.cph-footer__coltitle { margin: 0 0 15px; }
.cph-footer__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: none; padding: 0; margin: 0; font-family: var(--ff-head); font-weight: 600; font-size: 16px; color: #2A2433; text-align: left; cursor: default; }
.cph-footer__toggle:focus-visible { outline: 2px solid #C9197A; outline-offset: 3px; border-radius: 6px; }
.cph-footer__chev { display: none; flex: none; transition: transform .2s; }
.cph-footer__panel { display: block; }
.cph-footer__panel[hidden] { display: none; }
.cph-footer__links { list-style: none; margin: 0; padding: 0; }
.cph-footer__links a { display: inline-block; padding: 1px 0; line-height: 1.4; font-size: 15px; font-weight: 600; color: #5E5560; text-decoration: none; transition: color .15s; }
.cph-footer__links a:hover { color: #C9197A; }
/* stay in touch */
.cph-footer__stay h3 { font-family: var(--ff-head); font-weight: 600; font-size: 16px; color: #2A2433; margin: 0 0 8px; }
.cph-footer__stay .blurb { font-size: 14px; line-height: 1.55; color: #6E6470; margin: 0 0 16px; }
.cph-footer__social { margin-top: 20px; }
.cph-footer__social > p { font-size: 13px; font-weight: 700; color: #6E6470; margin: 0 0 10px; }
.cph-footer__social ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.cph-footer__social a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: #fff; border: 1.5px solid #F0DCE6; color: #C9197A; text-decoration: none; transition: background .15s, color .15s, transform .15s, border-color .15s; }
.cph-footer__social a:hover { background: #C9197A; color: #fff; border-color: #C9197A; transform: translateY(-2px); }
/* footer subscribe form — stacked + labeled. flex:none so the input keeps its 50px height in a column
   (base .cph-sub-email is flex:1, which collapses height in column flow → shorter than the button).
   Keep base 50px height + 12px radius so it matches the form used elsewhere (homepage/popup). */
.cph-footer .cph-sub-form { max-width: none; }
.cph-footer .cph-sub-row { flex-direction: column; gap: 11px; }
.cph-footer .cph-sub-email, .cph-footer .cph-sub-btn { width: 100%; flex: none; }
.cph-footer .cph-sub-email { border-color: #E3CDDA; }
.cph-footer .cph-sub-btn { background: #C9197A; }
.cph-footer .cph-sub-btn:hover { background: #A8125F; }
.cph-footer .cph-sub-label { color: #6E6470; }
/* bottom bar */
.cph-footer__bar { background: #FBE4EF; }
.cph-footer__bar-inner { max-width: 1140px; margin: 0 auto; padding: 18px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.cph-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.cph-footer__legal li { display: flex; align-items: center; gap: 14px; }
.cph-footer__legal a { font-size: 13px; font-weight: 600; color: #5E5560; text-decoration: none; transition: color .15s; }
.cph-footer__legal a:hover { color: #A8125F; } /* darker magenta — AA on the #FBE4EF bar (#C9197A is only 4.47:1 there) */
.cph-footer__sep { color: #C29DB3; }
.cph-footer__top { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-head); font-weight: 500; font-size: 13px; color: #5E5560; text-decoration: none; transition: color .15s; }
.cph-footer__top:hover { color: #A8125F; }
.cph-footer__copy { flex-basis: 100%; margin: 0; font-size: 12.5px; color: #5E5560; }
@keyframes cphFootWave { 0%,12%,100% { transform: rotate(0); } 5% { transform: rotate(16deg); } 9% { transform: rotate(2deg); } }
.cph-footer__hand { animation: cphFootWave 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 100%; }
@media (prefers-reduced-motion: reduce) { .cph-footer__hand { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  /* .cph-nav .cph-search: base search rule uses that 2-class selector + !important, so the
     mobile hide must match its specificity (a bare .cph-search !important loses the tie). */
  .cph-navlinks, .cph-search, .cph-nav .cph-search, .cph-pinterest { display: none !important; }
  .cph-burger { display: flex !important; }
  .cph-hero__grid { grid-template-columns: 1fr !important; gap: 24px; }
  .cph-g4 { grid-template-columns: repeat(2,1fr) !important; }
  .cph-g3 { grid-template-columns: 1fr !important; }
  .cph-g5 { grid-template-columns: repeat(2,1fr) !important; }
  .cph-nl__grid { grid-template-columns: 1fr !important; }
  /* Footer: 1-col + Explore/Help postaju accordioni (native <details>) */
  .cph-footer__grid { grid-template-columns: 1fr !important; gap: 0; }
  .cph-footer__brand { padding-bottom: 22px; }
  .cph-footer__col, .cph-footer__stay { border-top: 1px solid #F1DDE8; }
  .cph-footer__stay { padding-top: 22px; }
  .cph-footer__coltitle { margin: 0; }
  .cph-footer__toggle { cursor: pointer; padding: 18px 0; }
  .cph-footer__chev { display: block; }
  .cph-footer__toggle[aria-expanded="true"] .cph-footer__chev { transform: rotate(180deg); }
  .cph-footer__panel { padding-bottom: 12px; }
}
@media (max-width: 560px) {
  .cph-g2 { grid-template-columns: 1fr !important; }
  .cph-nl { padding: 28px 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DIFFICULTY GUIDE PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.gd-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.gd-section { padding: 64px 0; }
.gd-section--grey { background: #FAF6F9; }
.gd-section--pink { background: var(--cph-pink); }
.gd-section-head { text-align: center; max-width: 680px; margin: 0 auto 42px; }
.gd-sub { font-size: 16px; color: var(--cph-body); margin: 12px 0 0; line-height: 1.6; }

/* Hero */
.gd-hero-section { background: linear-gradient(160deg,#FFF6FB 0%,#fff 65%); padding: 72px 0 60px; }
.gd-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 52px; align-items: center; }
.gd-eyebrow { font-family: var(--ff-head); font-weight: 600; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cph-pink); margin-bottom: 14px; }
.gd-h1 { font-family: var(--ff-head); font-weight: 600; font-size: clamp(34px,4.8vw,56px); line-height: 1.04; letter-spacing: -1.4px; color: var(--cph-dark); margin: 0 0 20px; }
.gd-h1 span { color: var(--cph-pink); }
.gd-lead { font-size: 17px; line-height: 1.65; color: var(--cph-body); margin: 0 0 32px; max-width: 500px; }
.gd-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.gd-hero__badges { display: flex; flex-direction: column; gap: 12px; }
.gd-badge {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid; border-radius: 14px; padding: 12px 18px;
  transition: transform .15s, box-shadow .15s;
}
.gd-badge:hover { transform: translateX(4px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.gd-badge strong { display: block; font-family: var(--ff-head); font-size: 15px; }
.gd-badge small { font-size: 12.5px; color: #8A8490; font-weight: 600; }

/* Quick reference table */
.gd-table { border-radius: 16px; overflow: hidden; border: 1.5px solid #EFE9EE; }
.gd-table__head {
  display: grid; grid-template-columns: 1.2fr 0.8fr 1.2fr 0.8fr;
  padding: 12px 20px; background: var(--cph-dark); gap: 12px;
  font-family: var(--ff-head); font-size: 13px; font-weight: 600; letter-spacing: .5px;
  color: rgba(255,255,255,.7); text-transform: uppercase;
}
.gd-table__row {
  display: grid; grid-template-columns: 1.2fr 0.8fr 1.2fr 0.8fr;
  padding: 14px 20px; border-bottom: 1px solid #F3EEF2; gap: 12px;
  align-items: center; background: #fff; transition: background .12s;
}
.gd-table__row:last-child { border-bottom: none; }
.gd-table__row:hover { background: #FAF6F9; }
.gd-table__age { font-size: 14px; font-weight: 700; color: var(--cph-body); }
.gd-table__num {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-head); font-weight: 700; font-size: 14px;
  padding: 4px 10px; border-radius: 20px;
}
.gd-table__name { font-family: var(--ff-head); font-weight: 600; font-size: 15px; }
.gd-table__link { font-family: var(--ff-head); font-weight: 700; font-size: 14px; }
.gd-table__link:hover { text-decoration: underline; }

/* Level rows */
.gd-lvl-section { padding: 72px 0; }
.gd-lvl { display: flex; gap: 56px; align-items: center; }
/* Template emitira hyphenated klase (.gd-lvl-text/.gd-lvl-vis), ne BEM __ varijante ispod. */
.gd-lvl-text { flex: 1; min-width: 0; }
.gd-lvl-vis { flex: none; width: 360px; }
.gd-lvl--rev { flex-direction: row-reverse; }
.gd-lvl__text { flex: 1; min-width: 0; }
.gd-lvl__vis {
  flex: none; width: 340px; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 40px 28px; position: relative; overflow: hidden; min-height: 300px;
}
.gd-lvl__vis-glow { position: absolute; inset: 0; }
.gd-lvl__vis-label { text-align: center; position: relative; z-index: 1; }
.gd-lvl__vis-label strong { display: block; font-family: var(--ff-head); font-size: 18px; }
.gd-lvl__vis-label span { font-size: 13px; color: #8A8490; font-weight: 600; }
.gd-lvl__badge {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid; border-radius: 20px; padding: 7px 16px; margin-bottom: 14px;
  font-family: var(--ff-head); font-size: 14px; font-weight: 600;
}
.gd-lvl__name { font-family: var(--ff-head); font-weight: 600; font-size: clamp(28px,3.4vw,40px); margin: 0 0 10px; letter-spacing: -.8px; }
.gd-lvl__tagline { font-size: 16px; line-height: 1.55; color: var(--cph-body); margin: 0 0 22px; }
.gd-lvl__bullets { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 11px; }
.gd-lvl__bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; }
.gd-bullet-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.gd-lvl__cta {
  display: inline-flex; align-items: center;
  color: #fff !important; font-family: var(--ff-head); font-weight: 600; font-size: 15.5px;
  padding: 13px 26px; border-radius: 13px; transition: opacity .15s;
}
.gd-lvl__cta:hover { opacity: .88; }

/* How to choose steps */
.gd-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.gd-step { border-radius: 16px; padding: 26px 22px; }
.gd-step__num {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head); font-weight: 700; font-size: 16px; color: #fff;
  margin-bottom: 16px;
}
.gd-step__title { font-family: var(--ff-head); font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.gd-step__desc { font-size: 14px; line-height: 1.6; color: var(--cph-body); margin: 0; }

/* Reviews */
.gd-reviews { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.gd-review { border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.gd-review__level {
  display: inline-block; border-radius: 20px; padding: 4px 12px;
  font-family: var(--ff-head); font-size: 12.5px; font-weight: 700; align-self: flex-start;
}
.gd-review__quote { font-size: 14px; line-height: 1.6; color: var(--cph-body); margin: 0; flex: 1; }
.gd-review__author { display: flex; align-items: center; gap: 10px; }
.gd-review__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head); font-weight: 700; font-size: 14px; color: #fff; flex: none;
}
.gd-review__author strong { font-size: 13.5px; display: block; }
.gd-review__author small { font-size: 12px; }

/* FAQ */
.gd-faq-wrap { max-width: 780px; }
.gd-faq { display: flex; flex-direction: column; gap: 10px; }
.gd-faq__item { border: 1.5px solid #EFE9EE; border-radius: 14px; overflow: hidden; }
.gd-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: none; cursor: pointer; text-align: left;
  font-family: var(--ff-head); font-weight: 600; font-size: 16px; color: var(--cph-dark);
  padding: 18px 20px; transition: background .12s;
}
.gd-faq__q:hover { background: #FAF6F9; }
.gd-faq__sign {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff; transition: transform .2s;
}
.gd-faq__a { padding: 0 20px 18px; }
.gd-faq__a p { font-size: 15px; line-height: 1.65; color: var(--cph-body); margin: 0; }

/* Bottom CTA cards */
.gd-bottom { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.gd-bottom-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1.5px solid; border-radius: 18px; padding: 24px 16px; text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.gd-bottom-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.gd-bottom-card strong { font-family: var(--ff-head); font-size: 15px; display: block; }
.gd-bottom-card small { font-size: 12.5px; font-weight: 600; }
.gd-bottom-link { font-family: var(--ff-head); font-size: 13.5px; font-weight: 700; margin-top: 6px; }

/* ── Difficulty Guide responsive ── */
@media (max-width: 980px) {
  .gd-hero { grid-template-columns: 1fr; gap: 32px; }
  .gd-lvl, .gd-lvl--rev { flex-direction: column !important; gap: 32px; }
  .gd-lvl__vis, .gd-lvl-vis { width: 100%; max-width: 420px; align-self: center; }
  .gd-steps { grid-template-columns: repeat(2,1fr); }
  .gd-reviews { grid-template-columns: repeat(2,1fr); }
  .gd-bottom { grid-template-columns: repeat(2,1fr); }
  .gd-table__head, .gd-table__row { grid-template-columns: 1fr 0.7fr 1fr 0.7fr; }
}
@media (max-width: 560px) {
  .gd-steps { grid-template-columns: 1fr; }
  .gd-reviews { grid-template-columns: 1fr; }
  .gd-bottom { grid-template-columns: repeat(2,1fr); }
  .gd-table__head, .gd-table__row { grid-template-columns: 1fr 1fr; }
  .gd-table__head span:nth-child(3),
  .gd-table__head span:nth-child(4),
  .gd-table__row span:nth-child(3),
  .gd-table__row a:nth-child(4) { display: none; }
}

/* FAQ button override (Flatsome button reset) */
.gd-faq-btn {
  display: flex !important;
  align-items: center !important;
  padding: 14px 22px !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  vertical-align: top !important;
}
.gd-faq-sign {
  flex-shrink: 0 !important;
  align-self: center !important;
  transition: transform .5s ease-in-out, background .15s !important;
}

/* Smooth scroll globally */
html { scroll-behavior: smooth; }

/* ── Average-difficulty meter (cph_difficulty_meter) ─────────────────────────
   icon + fractional grade + "≈ level" + colour-filling gradient bar.
   The .cph-dm-fill trick: the fill is `fill%` wide, and its gradient is sized to
   `500/avg %` so the visible slice shows exactly 0→avg of the full red→blue scale. */
.cph-diffmeter { display: flex; flex-direction: column; gap: 8px; font-family: 'Nunito', sans-serif; max-width: 420px; }
.cph-dm-head { display: flex; align-items: center; gap: 12px; }
.cph-dm-icon { flex: none; display: block; }
.cph-dm-grade { font-family: 'Fredoka', sans-serif; font-weight: 600; line-height: 1; letter-spacing: -1px; display: inline-flex; align-items: baseline; gap: 6px; }
.cph-dm-max { font-size: .4em; font-weight: 600; color: #B6B0BA; letter-spacing: 0; }
.cph-dm-level { font-family: 'Fredoka', sans-serif; font-weight: 500; color: #1A1A2E; }
.cph-dm-track { position: relative; width: 100%; background: #ECE7EE; border-radius: 999px; overflow: hidden; }
.cph-dm-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background-repeat: no-repeat; background-position: left center; min-width: 5px; }
.cph-dm-labels { display: flex; justify-content: space-between; font-family: 'Fredoka', sans-serif; font-weight: 500; color: #A8A2B0; }
.cph-dm-labels span { flex: 1; }
.cph-dm-labels span:not(:first-child):not(:last-child) { text-align: center; }
.cph-dm-labels span:last-child { text-align: right; }
/* sizes */
.cph-diffmeter--lg .cph-dm-grade { font-size: clamp(30px, 4vw, 40px); }
.cph-diffmeter--lg .cph-dm-icon { width: 44px; height: 44px; }
.cph-diffmeter--lg .cph-dm-level { font-size: 17px; }
.cph-diffmeter--lg .cph-dm-track { height: 11px; }
.cph-diffmeter--lg .cph-dm-labels { font-size: 12px; margin-top: 2px; }
.cph-diffmeter--md .cph-dm-grade { font-size: 28px; }
.cph-diffmeter--md .cph-dm-icon { width: 36px; height: 36px; }
.cph-diffmeter--md .cph-dm-level { font-size: 15px; }
.cph-diffmeter--md .cph-dm-track { height: 9px; }
.cph-diffmeter--md .cph-dm-labels { font-size: 11px; }
.cph-diffmeter--sm { gap: 6px; }
.cph-diffmeter--sm .cph-dm-head { gap: 9px; }
.cph-diffmeter--sm .cph-dm-grade { font-size: 21px; letter-spacing: -.5px; }
.cph-diffmeter--sm .cph-dm-icon { width: 26px; height: 26px; }
.cph-diffmeter--sm .cph-dm-level { font-size: 13px; }
.cph-diffmeter--sm .cph-dm-track { height: 7px; }
.cph-diffmeter--sm .cph-dm-labels { font-size: 10px; }

/* ── Difficulty Guide: "Average for a category" showcase ─────────────────── */
.gd-catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.gd-catcard { display: flex; gap: 22px; align-items: center; background: #fff; border: 1px solid #EEE9EC; border-radius: 22px; padding: 22px 26px; box-shadow: 0 10px 30px rgba(40,20,40,.05); transition: transform .18s, box-shadow .18s; }
.gd-catcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(40,20,40,.1); }
.gd-catthumb { flex: none; width: 130px; aspect-ratio: 210/297; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* A4 portrait, matches the pages (not a clipped square) */
.gd-catthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-catcard__body { flex: 1; min-width: 0; }
.gd-catcard__name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: #9A949E; }
.gd-catcard__meta { font-size: 13.5px; font-weight: 600; color: #857F8C; margin: 2px 0 13px; }
@media (max-width: 720px) {
  .gd-catgrid { grid-template-columns: 1fr; }
  .gd-catcard { flex-direction: column; align-items: flex-start; gap: 16px; }
  .gd-catthumb { width: 88px; aspect-ratio: 210/297; }
}

/* ── Category archive hero: info (left) + difficulty meter (right); intro full-width below ── */
.lf-herotop { display: flex; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.lf-herotop__info { flex: 1 1 420px; min-width: 0; display: flex; align-items: flex-start; gap: 20px; }
.lf-herotop__diff { flex: 0 1 344px; }
.lf-herotop__diff > * { width: 100%; }
@media (max-width: 800px) { .lf-herotop__diff { flex-basis: 100%; } }

/* ═══ BLOG (home.php / single.php / category.php) ════════════════════════════ */
.cph-blog-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.cph-blog-wrap--narrow { max-width: 1160px; }
.cph-blog-main { display: grid; grid-template-columns: 1fr 340px; gap: 46px; align-items: start; }
.cph-blog-main--post { grid-template-columns: 1fr 332px; gap: 50px; }
.cph-blog-feat { display: grid; grid-template-columns: 1.04fr 0.96fr; }
.cph-blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cph-blog-rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cph-blog-side { display: flex; flex-direction: column; gap: 22px; }
.cph-blog-side--sticky { position: sticky; top: 90px; }
.cph-blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #EEE9EC; border-radius: 18px; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.cph-blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(40,20,40,.1); border-color: #E8DDE5; }
.cph-blog-card:hover .cph-blog-card__t { color: #E835AC; }
.cph-blog-card__t { transition: color .15s; }
@media (max-width: 980px) {
  .cph-blog-main, .cph-blog-main--post { grid-template-columns: 1fr; gap: 34px; }
  .cph-blog-feat { grid-template-columns: 1fr; }
  .cph-blog-rel { grid-template-columns: 1fr; }
  .cph-blog-side--sticky { position: static; }
}
@media (max-width: 560px) { .cph-blog-grid { grid-template-columns: 1fr; } }

/* Article typography — styles real post content from the editor to match the design */
.cph-article, .cph-article-col { font-family: 'Nunito', sans-serif; }
.cph-article > p { font-size: 18px; line-height: 1.78; color: #3A3543; margin: 0 0 22px; }
.cph-article h2 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 27px; line-height: 1.18; letter-spacing: -0.5px; color: #1A1A2E; margin: 36px 0 14px; scroll-margin-top: 90px; }
.cph-article h3 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -0.2px; color: #1A1A2E; margin: 28px 0 10px; scroll-margin-top: 90px; }

/* ── Blog "On this page" TOC — colorful card; nested h3 indented under their h2 ── */
.cph-toc { position: relative; background: #FBFAFC; border: 1px solid #EEE9EC; border-radius: 22px; padding: 22px 24px 24px; margin: 0 0 30px; box-shadow: 0 10px 30px rgba(40,20,40,.05); overflow: hidden; }
.cph-toc-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.cph-toc-blob--1 { top: -24px; right: -18px; width: 96px; height: 96px; background: #FFF3E3; }
.cph-toc-blob--2 { top: 20px; right: 34px; width: 34px; height: 34px; background: #EAF3FC; }
.cph-toc-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.cph-toc-titlerow { display: flex; align-items: center; gap: 11px; }
.cph-toc-dots { display: flex; gap: 5px; }
.cph-toc-dots i { width: 10px; height: 10px; border-radius: 50%; }
.cph-toc-dots i:nth-child(1){ background:#FF4D6D; } .cph-toc-dots i:nth-child(2){ background:#FFD23F; } .cph-toc-dots i:nth-child(3){ background:#38D39F; } .cph-toc-dots i:nth-child(4){ background:#4D9DE0; }
.cph-toc-h { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 18px; color: #1A1A2E; letter-spacing: -0.3px; }
.cph-toc-count { font-size: 12.5px; font-weight: 800; color: #94909B; text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; }
.cph-toc-grid { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; align-items: start; }
.cph-toc-grid > li { margin: 0; }
.cph-toc-row { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 10px 12px; border-radius: 14px; transition: background .15s; }
.cph-toc-row:hover { background: #F3EEF2; }
.cph-toc-row.is-active { background: var(--tint); }
.cph-toc-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 14.5px; color: #fff; }
.cph-toc-label { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.3; color: #3A3543; }
.cph-toc-row.is-active .cph-toc-label { font-weight: 800; color: #1A1A2E; }
.cph-toc-kids { margin: 1px 0 0 27px; padding: 2px 0 2px 15px; border-left: 2px dashed #E0D8DE; display: flex; flex-direction: column; gap: 1px; }
.cph-toc-sub { display: flex; align-items: center; gap: 9px; text-decoration: none; padding: 6px 10px; border-radius: 11px; transition: background .15s; }
.cph-toc-sub:hover { background: #F3EEF2; }
.cph-toc-sub.is-active { background: var(--tint); }
.cph-toc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.cph-toc-sublabel { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.3; color: #6A6573; }
.cph-toc-sub.is-active .cph-toc-sublabel { font-weight: 800; color: #1A1A2E; }
@media (max-width: 640px){ .cph-toc-grid { grid-template-columns: 1fr; } }

/* ── Blog reading progress bar (fixed, rainbow fill revealed as you read) ── */
.cph-progress { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 80; background: #F0EBEF; }
.cph-progress__fill { position: relative; height: 100%; width: 0; background: linear-gradient(90deg,#FF4D6D 0%,#FF9E2C 22%,#FFD23F 42%,#38D39F 62%,#4D9DE0 82%,#E835AC 100%); background-size: 100vw 100%; background-attachment: fixed; transition: width .12s ease-out; }
.cph-progress__knob { position: absolute; top: 50%; right: -1px; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(232,53,172,.35), 0 2px 6px rgba(40,20,40,.25); }
@media (prefers-reduced-motion: reduce){ .cph-progress__fill { transition: none; } }

/* ── Blog post FAQ accordion (per-post, from the edit screen; native <details>) ── */
.cph-bfaq { margin: 40px 0 0; }
.cph-bfaq-head { display: flex; align-items: center; gap: 11px; margin: 0 0 16px; }
.cph-bfaq-dots { display: flex; gap: 5px; flex: none; }
.cph-bfaq-dots i { width: 10px; height: 10px; border-radius: 50%; }
.cph-bfaq-dots i:nth-child(1){ background:#FF4D6D; } .cph-bfaq-dots i:nth-child(2){ background:#FFD23F; }
.cph-bfaq-dots i:nth-child(3){ background:#38D39F; } .cph-bfaq-dots i:nth-child(4){ background:#4D9DE0; }
.cph-bfaq-title { font-family: var(--ff-head); font-weight: 600; font-size: 22px; letter-spacing: -0.3px; color: #1A1A2E; margin: 0; }
/* .cph-bfaq-item / -btn / -sign / -ans are styled INLINE + driven by the accordion JS in
   cph-core/modules/post-extras.php (colored open state, matching the category FAQ). */

/* ── "Sources I drew on" card (per-post, numbered colored badges) ── */
.cph-sources { margin: 34px 0 0; background: #fff; border: 1px solid #EEE9EC; border-radius: 20px; padding: 20px 22px; box-shadow: 0 10px 30px rgba(40,20,40,.05); }
.cph-sources-head { display: flex; align-items: center; gap: 11px; margin: 0 0 14px; }
.cph-sources-dots { display: flex; gap: 5px; flex: none; }
.cph-sources-dots i { width: 10px; height: 10px; border-radius: 50%; }
.cph-sources-dots i:nth-child(1){ background:#FF4D6D; } .cph-sources-dots i:nth-child(2){ background:#FFD23F; }
.cph-sources-dots i:nth-child(3){ background:#38D39F; } .cph-sources-dots i:nth-child(4){ background:#4D9DE0; }
.cph-sources-title { font-family: var(--ff-head); font-weight: 600; font-size: 18px; letter-spacing: -0.3px; color: #1A1A2E; }
.cph-sources-list { list-style: none; margin: 0; padding: 0; }
.cph-sources-list > li { margin: 0; }
.cph-source { display: flex; align-items: flex-start; gap: 13px; padding: 11px 10px; border-radius: 12px; text-decoration: none; transition: background .15s; }
a.cph-source:hover { background: #FBF7FA; }
.cph-source-num { flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--ff-head); font-weight: 600; font-size: 13px; margin-top: 1px; }
.cph-source-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cph-source-title { font-family: var(--ff-body); font-weight: 800; font-size: 15px; line-height: 1.3; color: #1A1A2E; display: inline-flex; align-items: center; gap: 5px; }
.cph-source-ext { color: #B4ACBA; flex: none; }
a.cph-source:hover .cph-source-title, a.cph-source:hover .cph-source-ext { color: #E835AC; }
.cph-source-sub { font-size: 13px; font-weight: 600; color: #94909B; line-height: 1.4; }
.cph-article h4 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 18px; color: #1A1A2E; margin: 24px 0 8px; }
.cph-article a { color: #E835AC; text-decoration: underline; text-underline-offset: 2px; }
.cph-article strong, .cph-article b { color: #1A1A2E; font-weight: 800; }
.cph-article ul, .cph-article ol { font-size: 18px; line-height: 1.7; color: #3A3543; margin: 0 0 22px; padding-left: 26px; }
.cph-article li { margin-bottom: 9px; }
.cph-article ul > li::marker { color: #E835AC; }
.cph-article blockquote { border-left: 4px solid #E835AC; background: #FBF1F7; padding: 18px 24px; border-radius: 0 14px 14px 0; margin: 28px 0; }
.cph-article blockquote p { font-size: 18.5px; line-height: 1.65; font-style: italic; color: #5A3450; margin: 0; font-weight: 600; }
.cph-article img { max-width: 100%; height: auto; border-radius: 16px; display: block; }
.cph-article figure { margin: 30px 0; }
.cph-article figure img { width: 100%; }
.cph-article figcaption { text-align: center; font-size: 13.5px; color: #94909B; font-style: italic; margin-top: 11px; }
.cph-article h2:first-child, .cph-article h3:first-child, .cph-article > p:first-child { margin-top: 0; }
/* .cph-article .wp-block-table … (specificity 0,2,1) beats core block-library's .wp-block-table td (0,1,1, padding:.5em). */
.cph-article figure.wp-block-table { margin: 26px 0; overflow-x: auto; }
.cph-article .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.cph-article .wp-block-table th, .cph-article .wp-block-table td { border: 1px solid #EAE3EC; padding: 14px 20px; text-align: left; vertical-align: top; color: #3A3543; }
.cph-article .wp-block-table thead th, .cph-article .wp-block-table thead td { background: #FBF1F7; font-weight: 800; color: #1A1A2E; border-bottom: 2px solid #E7D3DF; }
.cph-article .wp-block-table tbody td > strong:first-child { color: #1A1A2E; }
.cph-article .wp-block-table br { line-height: 2; }
.cph-article .wp-block-button { margin: 20px 0; }
.cph-article .wp-block-button__link { display: inline-block; background: #C9197A; color: #fff; font-family: var(--ff-head); font-weight: 600; padding: 11px 22px; border-radius: 12px; text-decoration: none; }
.cph-article .wp-block-button__link:hover { background: #A8125F; }

/* ── Category / tag archive SEO body (formatted description below the grid) ──
   The description body now ships light HTML (h2 subheadings, short paragraphs,
   an optional list, some <strong>) instead of a wall of <p>. Style it on-brand
   so those tags don't fall back to raw browser defaults. */
.cph-cat-seo h2 { font-family: var(--ff-head); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -.2px; color: #1A1A2E; margin: 26px 0 10px; }
.cph-cat-seo h2:first-child { margin-top: 0; }
.cph-cat-seo p { margin: 0 0 14px; }
.cph-cat-seo p:last-child { margin-bottom: 0; }
.cph-cat-seo ul, .cph-cat-seo ol { margin: 4px 0 16px; padding-left: 26px; list-style-position: outside; }
.cph-cat-seo ul { list-style-type: disc; }
.cph-cat-seo ol { list-style-type: decimal; }
.cph-cat-seo li { margin: 0 0 7px; padding-left: 3px; }
.cph-cat-seo strong { color: #5E5560; font-weight: 700; }
.cph-cat-seo a { color: #C9197A; font-weight: 600; text-decoration: none; }
.cph-cat-seo a:hover { text-decoration: underline; }

/* ── Category / tag hero: subtitle + quick-fact chips ── */
.lf-herosub { font-family: var(--ff-head); font-weight: 500; font-size: clamp(16px,1.7vw,19px); line-height: 1.4; color: #5C5866; margin: 0; }
.lf-herosub__n { color: #E835AC; font-weight: 600; }
.lf-herointro { margin-top: 18px; font-size: 16px; line-height: 1.68; color: #857F8C; font-weight: 500; max-width: 720px; }
.lf-herochips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lf-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip-t, #fff); border: 1.5px solid var(--chip-b, #F0E1EA); border-radius: 999px; padding: 6px 13px 6px 11px; font-size: 13px; font-weight: 600; color: #4A4550; white-space: nowrap; }
.lf-chip svg { color: var(--chip-c, #E835AC); flex: none; }
.lf-chip strong { color: #1A1A2E; font-weight: 800; }

/* ── Category hero MoMo greeter (fills the space under the difficulty card) ── */
.lf-hero-momo { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.lf-hero-momo:first-child { margin-top: 0; }
.lf-hero-momo__bubble { position: relative; background: #fff; border: 1.5px solid #F0E1EA; border-radius: 14px; padding: 10px 14px; font-family: var(--ff-head); font-weight: 500; font-size: 13.5px; line-height: 1.35; color: #5C5866; text-align: center; box-shadow: 0 6px 16px rgba(40,20,40,.05); max-width: 240px; }
.lf-hero-momo__bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
.lf-hero-momo__img { width: 118px; height: 148px; display: block; }
@media (max-width: 800px) { .lf-hero-momo { display: none; } }

/* ── Category / tag SEO block: 2-col text + MoMo "at a glance" side card ── */
.cph-seo-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 40px; align-items: start; }
@media (max-width: 860px) { .cph-seo-grid { grid-template-columns: 1fr; gap: 26px; } }
.cph-seo-aside { position: sticky; top: 24px; background: linear-gradient(180deg,#FFF4F9,#FFFFFF); border: 1px solid #F4DEEC; border-radius: 20px; padding: 20px 22px 24px; text-align: center; box-shadow: 0 10px 26px rgba(40,20,40,.05); }
@media (max-width: 860px) { .cph-seo-aside { position: static; max-width: 460px; margin: 0 auto; } }
.cph-seo-aside__momo { width: 92px; height: 115px; display: block; margin: 0 auto 10px; }
.cph-seo-aside__msg { font-size: 14.5px; line-height: 1.6; color: #6E6470; font-weight: 500; margin: 0 0 16px; }
.cph-seo-aside__btn { display: inline-block; background: #C9197A; color: #fff !important; font-family: var(--ff-head); font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: 12px; text-decoration: none; }
.cph-seo-aside__btn:hover { background: #A8125F; color: #fff !important; }

/* ===== Side motion: "Color drift" (wide-screen gutter animation) =====
   Fixed rails in the empty margins outside the 1200px content column. Small
   brand-colour sprites drift top→bottom (smDrift). z-index:0 + output last in
   the DOM = painted above section backgrounds but below the sticky header,
   and only ever in the side margins (never over content; pointer-events off). */
.sm-gutter { position: fixed; top: 0; bottom: 0; width: calc((100vw - 1200px) / 2); z-index: 0; pointer-events: none; overflow: hidden; }
.sm-gutter--left { left: 0; }
.sm-gutter--right { right: 0; }
.sm-sprite { position: absolute; transform-origin: center; will-change: transform, opacity; }
@keyframes smDrift {
  0%   { transform: translate(var(--x, -50%), -70px) rotate(0deg); opacity: 0; }
  14%  { opacity: var(--o, .5); }
  86%  { opacity: var(--o, .5); }
  100% { transform: translate(var(--x2, -50%), calc(100vh + 60px)) rotate(var(--r, 90deg)); opacity: 0; }
}
/* Below ~1340px the gutters are too narrow to look good — hide them. */
@media (max-width: 1340px) { .sm-gutter { display: none; } }
@media (prefers-reduced-motion: reduce) { .sm-gutter { display: none; } }

/* MoMo easter egg — JS drops ONE of these down a gutter now and then (cph-side-momo.js).
   Single play (no `infinite`); the element is removed on animationend. */
.sm-momo { position: absolute; left: 50%; top: 0; will-change: transform, opacity; }
.sm-momo--fall  { animation: cphMomoFall 6.8s cubic-bezier(.5, 0, .5, 1) forwards; }
.sm-momo--chute { transform-origin: 50% 8%; animation: cphMomoChute 14s ease-in-out forwards; }
@keyframes cphMomoFall {
  0%   { transform: translate(calc(-50% - 8px), -180px) rotate(-13deg); opacity: 0; }
  7%   { opacity: .96; }
  22%  { transform: translate(calc(-50% + 12px), 20vh) rotate(11deg); }
  40%  { transform: translate(calc(-50% - 10px), 40vh) rotate(-12deg); }
  60%  { transform: translate(calc(-50% + 10px), 62vh) rotate(9deg); }
  85%  { opacity: .96; }
  100% { transform: translate(calc(-50% - 6px), calc(100vh + 160px)) rotate(-7deg); opacity: 0; }
}
@keyframes cphMomoChute {
  0%   { transform: translate(-50%, -220px) rotate(-7deg); opacity: 0; }
  7%   { opacity: .96; }
  30%  { transform: translate(calc(-50% + 14px), 22vh) rotate(7deg); }
  58%  { transform: translate(calc(-50% - 14px), 50vh) rotate(-7deg); }
  84%  { transform: translate(calc(-50% + 12px), 78vh) rotate(6deg); opacity: .96; }
  100% { transform: translate(-50%, calc(100vh + 170px)) rotate(0deg); opacity: 0; }
}