/* ============================================================================
   OneMediaKit — the public kit page (2026-09 redesign, package E).
   Editorial, product-first: warm paper, near-black ink, one vermilion accent,
   a reserved green that only ever means "verified". Mobile first, one column,
   a 720px reading column on desktop. Scoped under .ywf-mk with its own tokens
   (the platform's tokens.css, when present, sets the same values on :root)
   so it can neither be restyled by, nor leak into, a theme.

   Fonts come from the platform's self-hosted fonts.css (Bricolage Grotesque
   for display, Inter for text) or from the creator's chosen face; this file
   loads nothing from a third-party origin. No icon font: the few icons are
   inline SVG. Everything renders with JavaScript disabled except the charts,
   which fall back to their text list.
   ============================================================================ */

.ywf-mk {
  /* tokens (contracts §1); YWF_MK_Theme::css_vars() overrides the creator's choices */
  --ink:#141414; --charcoal:#2A2A28; --soft:#4A4A46; --mute:#7A7A74;
  --paper:#F7F4EE; --cream:#EFEAE1; --white:#FFFFFF; --line:#DAD4C8; --line-2:#C9C2B4;
  --gold:#E4572E; --babe:#FBE9E2; --babe-deep:#B83A18; --on-accent:#FFFFFF;
  --rule:1px; --page:#FFFFFF;
  --verified:#1B8A5A; --verified-bg:#E3F3EA; --verified-ink:#146B45;
  --danger:#B42318; --danger-soft:#FCEBEA;
  --sans:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --display:'Bricolage Grotesque','Bricolage Fallback',Arial,Helvetica,sans-serif;
  --r1:6px; --r2:10px; --r3:16px;
  --shadow-2:0 4px 16px rgba(20,20,20,.08);
  --ring:0 0 0 3px rgba(184,58,24,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:240ms; --dur-count:900ms;

  /* full-bleed: break out of any theme/builder content column. !important is
     required: WP core's constrained-layout styles clamp entry-content
     children with max-width + margin:auto !important. */
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:0 !important;
  background:var(--paper);
  font-family:var(--sans);
  font-size:clamp(.9375rem,.88rem + .25vw,1.0625rem);
  line-height:1.55;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.ywf-mk *, .ywf-mk *::before, .ywf-mk *::after { box-sizing:border-box; }
.ywf-mk-inner { max-width:45rem; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) clamp(2rem,6vw,4rem); }
.ywf-mk a { color:inherit; text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:.16em; }
.ywf-mk a:hover { color:var(--babe-deep); }
.ywf-mk :focus-visible { outline:2px solid var(--babe-deep); outline-offset:2px; box-shadow:var(--ring); border-radius:var(--r1); }
.ywf-mk summary { cursor:pointer; list-style:none; }
.ywf-mk summary::-webkit-details-marker { display:none; }
.ywf-mk h1, .ywf-mk h2, .ywf-mk h3, .ywf-mk h4, .ywf-mk p, .ywf-mk ul, .ywf-mk ol { margin:0; }
.ywf-mk img { max-width:100%; height:auto; }
.ywf-mk-icon { width:1em; height:1em; vertical-align:-.15em; flex:none; }

/* ---------- section rhythm ---------- */
.ywf-mk-section { padding:clamp(1.75rem,5vw,3rem) 0 0; }
.ywf-mk-section + .ywf-mk-section { border-top:var(--rule) solid var(--line); margin-top:clamp(1.75rem,5vw,3rem); }
.ywf-mk-title { font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,1.25rem + 1.2vw,2rem); line-height:1.15; letter-spacing:-.01em; color:var(--ink); margin:0 0 1rem; }
.ywf-mk-subtitle { font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin:0 0 .75rem; }
.ywf-mk-lede { color:var(--soft); max-width:40rem; margin:-.5rem 0 1.25rem; }
.ywf-mk-eyebrow { font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); }
.ywf-mk-method { margin:.75rem 0 0; font-size:.8125rem; color:var(--mute); max-width:40rem; line-height:1.5; }

/* ---------- cover photo ---------- */
.ywf-mk-hero { position:relative; width:100%; height:clamp(160px,32vw,320px); overflow:hidden; }
.ywf-mk-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.ywf-mk-hero + .ywf-mk-inner, .ywf-mk-hero ~ .ywf-mk-inner { padding-top:0; }
.ywf-mk-hero + .ywf-mk-inner .ywf-mk-head { padding-top:0; }
.ywf-mk-hero + .ywf-mk-inner .ywf-mk-avatar { margin-top:-2.5rem; }

/* ---------- KitHeader: who ---------- */
.ywf-mk-head { padding:clamp(1.5rem,5vw,3rem) 0 0; }
.ywf-mk-head-row { display:flex; align-items:flex-end; gap:1rem; }
.ywf-mk-avatar { flex:none; width:clamp(72px,18vw,96px); height:clamp(72px,18vw,96px); border-radius:var(--r3); background:var(--white); border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow-2); display:flex; align-items:center; justify-content:center; }
.ywf-mk-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
/* 18 Oct 2026 (fix-ui, DECISIONS 191): a wide or tall logo (a wordmark) is contained in the tile, never cropped */
.ywf-mk-avatar.is-wide img, .ywf-mk-avatar.is-tall img { object-fit:contain; padding:8%; box-sizing:border-box; }
/* 19 Oct 2026 (review of fix-ui): a logo whose shape the server could not read (a picture on another site) is fitted whole in the same tile — a square one looks the same */
.ywf-mk-avatar.is-fit img { object-fit:contain; }
.ywf-mk-avatar-initials { font-family:var(--display); font-weight:600; font-size:1.75rem; color:var(--ink); background:var(--cream); letter-spacing:-.02em; }
.ywf-mk-head-id { min-width:0; }
.ywf-mk-head-id .ywf-mk-eyebrow { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.ywf-mk-name { font-family:var(--display); font-weight:600; font-size:clamp(2rem,1.5rem + 3vw,3.25rem); line-height:1.05; letter-spacing:-.02em; color:var(--ink); overflow-wrap:anywhere; }
.ywf-mk-meta { display:flex; flex-wrap:wrap; gap:.35rem 1rem; margin-top:.5rem; font-size:.875rem; color:var(--soft); }
.ywf-mk-meta-item { display:inline-flex; align-items:center; gap:.35rem; }
.ywf-mk-badge { display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:0; text-transform:none; line-height:1.4; }
.ywf-mk-badge-sample { background:var(--cream); color:var(--soft); border:1px solid var(--line); }
.ywf-mk-badge-founder { background:var(--ink); color:var(--paper); font-variant-numeric:tabular-nums; }
.ywf-mk-handles { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.ywf-mk-handle-chip, .ywf-mk a.ywf-mk-handle-chip { display:inline-flex; align-items:baseline; gap:.4rem; padding:.4rem .75rem; border:1px solid var(--line); border-radius:var(--r2); background:var(--white); font-size:.875rem; font-weight:500; color:var(--ink); text-decoration:none; }
.ywf-mk a.ywf-mk-handle-chip:hover { border-color:var(--line-2); color:var(--ink); }
.ywf-mk-handle-platform { font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.ywf-mk-about { margin-top:1.25rem; }
.ywf-mk-about-text { color:var(--charcoal); line-height:1.65; max-width:40rem; font-size:clamp(1rem,.95rem + .35vw,1.125rem); }
.ywf-mk-about-chips { margin-top:.75rem; }
.ywf-mk-head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin-top:1.5rem; }

/* ---------- buttons ---------- */
.ywf-mk-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.8rem 1.25rem; border-radius:var(--r2); font:inherit; font-weight:600; font-size:1rem; line-height:1.2; text-decoration:none !important; cursor:pointer; border:1px solid transparent; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ywf-mk-btn-primary { background:var(--babe-deep); color:var(--on-accent) !important; }
.ywf-mk-btn-primary:hover { background:var(--gold); color:var(--on-accent) !important; }
.ywf-mk-btn-ghost { background:var(--white); color:var(--ink) !important; border-color:var(--line-2); }
.ywf-mk-btn-sm { padding:.55rem .9rem; font-size:.875rem; }

/* ---------- Verified pill + explanation ---------- */
.ywf-mk-verified { position:relative; }
.ywf-mk-verified-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border-radius:var(--r1); background:var(--verified-bg); color:var(--verified-ink); font-size:.8125rem; font-weight:600; line-height:1.2; }
.ywf-mk-verified-pill .ywf-mk-icon { color:var(--verified); width:1.05em; height:1.05em; }
.ywf-mk-verified-ask { font-weight:500; text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:.16em; }
.ywf-mk-verified[open] .ywf-mk-verified-pill { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.ywf-mk-verified-panel { margin-top:0; padding:1rem 1.1rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r2); border-top-left-radius:0; max-width:34rem; font-size:.9rem; color:var(--charcoal); line-height:1.55; }
.ywf-mk-verified-panel p + p { margin-top:.6rem; }
.ywf-mk-certified { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .7rem; border-radius:999px; background:var(--verified-bg); color:var(--verified-ink); font-weight:700; }

/* ---------- SyncStamp ---------- */
.ywf-mk-stamp { display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:500; line-height:1.3; font-variant-numeric:tabular-nums; color:var(--mute); white-space:nowrap; margin-top:.4rem; }
.ywf-mk-stamp-dot { width:.5rem; height:.5rem; border-radius:50%; background:currentColor; flex:none; }
.ywf-mk-stamp-verified { color:var(--verified-ink); }
.ywf-mk-stamp-verified .ywf-mk-stamp-dot { background:var(--verified); }
.ywf-mk-stamp-manual { color:var(--mute); }
.ywf-mk-stamp-manual .ywf-mk-stamp-dot { background:var(--line-2); }
.ywf-mk-stamp-lg { font-size:.8125rem; margin-top:.6rem; }
/* 17 Oct 2026: an "Other (manual)" account's numbers are self-reported — a plain outlined tag, never the verified green */
.ywf-mk-stamp-self { color:var(--charcoal); }
.ywf-mk-stamp-self .ywf-mk-stamp-dot { background:transparent; border:1px solid currentColor; }
.ywf-mk-self-tag { display:inline-block; margin-left:.5rem; padding:.1rem .45rem; border:1px solid var(--line-2); border-radius:var(--r1); font-size:.6875rem; font-weight:600; letter-spacing:.01em; color:var(--charcoal); background:var(--white); white-space:nowrap; vertical-align:middle; }
.ywf-mk-self-note { margin:0 0 .6rem; font-size:.8125rem; color:var(--mute); line-height:1.45; }
.ywf-mk-self-legend { font-size:.75rem; color:var(--mute); line-height:1.45; }
.ywf-mk-self-legend .ywf-mk-self-tag { margin-left:0; }

/* ---------- KitTotals: how big ---------- */
.ywf-mk-total { display:flex; flex-direction:column; }
.ywf-mk-total-num { font-family:var(--display); font-weight:600; font-size:clamp(3rem,2rem + 6vw,6rem); line-height:1; letter-spacing:-.02em; color:var(--ink); }
.ywf-mk-total-label { margin-top:.5rem; font-size:clamp(1rem,.95rem + .35vw,1.125rem); color:var(--soft); }
.ywf-mk-blended { margin-top:1.5rem; display:grid; gap:.5rem 1.5rem; }
.ywf-mk-stat-blended { max-width:22rem; }
.ywf-mk-row-sums { margin-top:1.25rem; }
@media (min-width:640px) { .ywf-mk-blended { grid-template-columns:auto 1fr; align-items:center; } .ywf-mk-blended .ywf-mk-method { margin-top:0; } }

/* ---------- rows: tiles and charts ----------
   Mobile: two tiles per line; desktop: three (data-cols keeps a short last
   row filling the line, DECISIONS n° 38). The wide countries block goes last
   in its row and data-cols counts only the blocks beside it (rows() in PHP),
   so chart groups share one grid: halves, and a full line below them for the
   countries, in the same row, so one panel (E-44 / E-49 / F-2, 18 Oct 2026). */
.ywf-mk-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-bottom:.75rem; }
.ywf-mk-row[data-cols="1"] { grid-template-columns:minmax(0,1fr); }
.ywf-mk-row-stats { margin-top:1rem; }
.ywf-mk-row-charts { gap:1rem; margin-top:.5rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.ywf-mk-row-charts > .ywf-mk-block-wide { grid-column:1 / -1; }
@media (min-width:640px) {
  .ywf-mk-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ywf-mk-row[data-cols="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ywf-mk-row[data-cols="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ywf-mk-row-charts[data-cols="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---------- StatTile ---------- */
.ywf-mk-stat { display:flex; flex-direction:column; padding:.9rem 1rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r3); min-width:0; }
.ywf-mk-stat-num { font-weight:600; font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem); line-height:1.1; color:var(--ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ywf-mk-stat-label { margin-top:.3rem; font-size:.8125rem; color:var(--soft); line-height:1.35; }
.ywf-mk-stat .ywf-mk-stamp { margin-top:auto; padding-top:.5rem; }
.ywf-mk-global .ywf-mk-stat { background:var(--white); }

/* ---------- charts ---------- */
.ywf-mk-block { display:flex; flex-direction:column; min-width:0; padding:.9rem 1rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r3); }
.ywf-mk-block-title { margin:0 0 .6rem; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); }
.ywf-mk-block > .ywf-mk-stamp { margin-top:.6rem; }
.ywf-mk-block-niches { background:transparent; border:0; padding:0; margin-top:1rem; }
.ywf-mk-chart { display:flex; justify-content:center; }
/* Chart.js (responsive:false) writes an inline height — !important keeps the
   scale uniform when the width is capped: circles stay circles. */
.ywf-mk-chart canvas { max-width:100%; height:auto !important; }
.ywf-mk-chart-text { list-style:none; padding:0; margin:0; font-size:.875rem; color:var(--charcoal); line-height:1.6; }
.ywf-mk.is-js .ywf-mk-chart-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ywf-mk:not(.is-js) .ywf-mk-chart canvas { display:none; }
.ywf-mk-charts-group-title { margin:1.5rem 0 .6rem; font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); }
.ywf-mk-row-grouped { margin-top:0; }

/* ---------- top countries: name + share bar + %, two columns of five ---------- */
.ywf-mk-countries { display:flex; flex-direction:column; gap:0; }
.ywf-mk-countries-col { flex:1 1 0; min-width:0; margin:0; padding:0; list-style:none; }
.ywf-mk-country { display:flex; align-items:center; gap:.6rem; padding:.3rem 0; }
/* a country name is never cut (kit DECISIONS 192, review fix-up: "United Arab E…"): it wraps at its spaces, and a one-word
   name longer than the column widens it; a one-line row keeps its height (1.25 + .15em above and below = the kit's 1.55) */
.ywf-mk-country-name { flex:0 0 clamp(96px,34%,140px); font-size:.8125rem; font-weight:500; color:var(--charcoal); line-height:1.25; padding:.15em 0; }
.ywf-mk-country-track { flex:1 1 auto; height:6px; background:var(--cream); border-radius:999px; overflow:hidden; }
.ywf-mk-country-bar { display:block; height:100%; background:var(--ink); border-radius:999px; transition:width var(--dur-count) var(--ease); }
.ywf-mk.is-js .ywf-mk-country-bar:not(.is-in) { width:0 !important; }
.ywf-mk-country-pct { flex:0 0 auto; font-size:.8125rem; font-weight:600; color:var(--soft); min-width:2.8em; text-align:right; font-variant-numeric:tabular-nums; }
.ywf-mk-countries-note { margin:.5rem 0 0; font-size:.75rem; color:var(--mute); }
@media (min-width:640px) { .ywf-mk-countries { flex-direction:row; gap:clamp(1rem,3vw,2rem); } }

/* ---------- top posts: a swipeable strip on every width ---------- */
.ywf-mk-posts-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem 1rem; margin:0 0 .75rem; }
.ywf-mk-posts-head .ywf-mk-subtitle, .ywf-mk-posts-head .ywf-mk-stamp { margin:0; }
.ywf-mk-platform-body .ywf-mk-posts-head { margin-top:1.5rem; }
.ywf-mk-row-posts { display:flex; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:.25rem; margin-left:calc(-1 * clamp(1rem,4vw,2rem)); margin-right:calc(-1 * clamp(1rem,4vw,2rem)); padding-left:clamp(1rem,4vw,2rem); padding-right:clamp(1rem,4vw,2rem); }
.ywf-mk-row-posts::-webkit-scrollbar { display:none; }
.ywf-mk-post { flex:0 0 min(62vw,13.5rem); scroll-snap-align:start; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; text-decoration:none !important; color:var(--ink) !important; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.ywf-mk-post:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
.ywf-mk-post-img { display:block; width:100%; aspect-ratio:4/5; background:var(--cream); overflow:hidden; }
.ywf-mk-post-img img { width:100%; height:100%; object-fit:cover; display:block; }
.ywf-mk-post-img picture { display:contents; }
.ywf-mk-post-img-flat { background:linear-gradient(150deg,var(--cream),var(--paper)); }
.ywf-mk-post-body { display:flex; flex-direction:column; gap:.3rem; padding:.7rem .8rem .8rem; flex:1; }
.ywf-mk-post-meta { display:flex; align-items:center; gap:.5rem; }
.ywf-mk-post-platform { font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.ywf-mk-post-date { font-size:.6875rem; color:var(--mute); font-variant-numeric:tabular-nums; }
.ywf-mk-post-title { font-size:.8125rem; line-height:1.4; color:var(--charcoal); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ywf-mk-post-stats { display:flex; flex-wrap:wrap; gap:.2rem .6rem; margin-top:auto; padding-top:.45rem; border-top:1px solid var(--line); }
.ywf-mk-post-stat { font-size:.6875rem; color:var(--mute); white-space:nowrap; }
.ywf-mk-post-stat b { font-size:.8125rem; color:var(--ink); font-weight:600; }
@media (min-width:640px) { .ywf-mk-post { flex-basis:12rem; } }

/* ---------- chips ---------- */
.ywf-mk-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.ywf-mk-chip { padding:.3rem .75rem; background:var(--cream); color:var(--charcoal); font-size:.8125rem; font-weight:500; border-radius:999px; white-space:nowrap; }

/* ---------- PlatformSection ---------- */
.ywf-mk-platform { margin-top:clamp(1.75rem,5vw,3rem); border-top:var(--rule) solid var(--line); padding-top:clamp(1.25rem,4vw,2rem); }
.ywf-mk-platform-head { display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; }
.ywf-mk-platform-name { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.ywf-mk-platform-name .ywf-mk-eyebrow { color:var(--ink); }
.ywf-mk-handle { font-size:.9375rem; font-weight:500; color:var(--soft); }
.ywf-mk-platform-followers { display:flex; align-items:baseline; gap:.5rem; margin-left:auto; }
.ywf-mk-platform-followers .ywf-mk-stat-num { font-family:var(--display); font-size:clamp(2rem,1.5rem + 2.5vw,3rem); letter-spacing:-.02em; }
.ywf-mk-platform-followers small { font-size:.8125rem; font-weight:500; color:var(--soft); }
.ywf-mk-acc-arrow { display:inline-flex; color:var(--mute); transition:transform var(--dur) var(--ease); }
.ywf-mk-fold[open] > summary .ywf-mk-acc-arrow, .ywf-mk-acc-item[open] > summary .ywf-mk-acc-arrow { transform:rotate(180deg); }
.ywf-mk-platform-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; margin-top:.5rem; font-size:.8125rem; }
.ywf-mk-platform-meta .ywf-mk-stamp { margin:0; }
.ywf-mk-growth { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.ywf-mk-growth.is-down { color:var(--soft); }
.ywf-mk-platform-link { font-size:.8125rem; color:var(--soft); }
.ywf-mk a.ywf-mk-post, .ywf-mk a.ywf-mk-logo, .ywf-mk a.ywf-mk-btn { text-decoration:none; }

/* ---------- locks (owner only) ---------- */
.ywf-mk-lock { display:flex; gap:.9rem; align-items:flex-start; margin-top:1.25rem; padding:1rem 1.1rem; background:var(--white); border:1px dashed var(--line-2); border-radius:var(--r3); color:var(--charcoal); }
.ywf-mk-lock-icon { flex:none; display:inline-flex; width:2rem; height:2rem; align-items:center; justify-content:center; border-radius:50%; background:var(--cream); color:var(--ink); }
.ywf-mk-lock-title { font-weight:600; color:var(--ink); }
.ywf-mk-lock-body { margin-top:.25rem; font-size:.9rem; color:var(--soft); line-height:1.5; }
.ywf-mk-lock-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; margin-top:.75rem; }
.ywf-mk-lock-note { font-size:.75rem; color:var(--mute); }
.ywf-mk-locked-platforms { padding-top:0; }

/* ---------- Worked with ---------- */
.ywf-mk-logos { overflow-x:auto; overflow-y:hidden; -ms-overflow-style:none; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ywf-mk-logos::-webkit-scrollbar { display:none; }
.ywf-mk-logos[data-ywf-mk-carousel] { cursor:grab; }
.ywf-mk-logos.is-dragging { cursor:grabbing; }
.ywf-mk-logos-track { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; padding:.25rem 0; }
.ywf-mk-logos[data-ywf-mk-carousel] .ywf-mk-logos-track { flex-wrap:nowrap; width:max-content; gap:clamp(1.5rem,4vw,3rem); }
.ywf-mk-logo { display:inline-flex; align-items:center; min-height:44px; text-decoration:none !important; flex:none; user-select:none; color:var(--charcoal); }
.ywf-mk-logo-img { max-height:44px; max-width:140px; width:auto; height:auto; object-fit:contain; display:block; pointer-events:none; filter:grayscale(1); opacity:.8; transition:filter var(--dur), opacity var(--dur); }
.ywf-mk-logo:hover .ywf-mk-logo-img { filter:none; opacity:1; }
.ywf-mk-logo-name { font-family:var(--display); font-weight:600; font-size:1.125rem; letter-spacing:-.01em; color:var(--charcoal); white-space:nowrap; }

/* ---------- accordion items (portfolio categories, terms) ---------- */
.ywf-mk-acc-item { border:1px solid var(--line); border-radius:var(--r3); margin-bottom:.6rem; background:var(--white); }
.ywf-mk-acc-head { display:flex; align-items:center; gap:.6rem; padding:.9rem 1.1rem; font-weight:600; font-size:1rem; }
.ywf-mk-acc-head .ywf-mk-acc-arrow { margin-left:auto; }
.ywf-mk-acc-icon { display:inline-flex; color:var(--soft); }
.ywf-mk-acc-body { padding:0 1.1rem 1.1rem; }
.ywf-mk-acc-desc { margin:0 0 1rem; color:var(--soft); max-width:40rem; font-size:.9375rem; }
.ywf-mk-cases { display:flex; flex-wrap:nowrap; gap:.75rem; align-items:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x mandatory; }
.ywf-mk-cases::-webkit-scrollbar { display:none; }
.ywf-mk-cases > .ywf-mk-case { flex:0 0 min(80%,16rem); min-width:0; scroll-snap-align:start; }
.ywf-mk-cases > .ywf-mk-case-embedded { flex-basis:min(88vw,20rem); }
.ywf-mk-cases-carousel { overflow-x:auto; overflow-y:hidden; -ms-overflow-style:none; scrollbar-width:none; cursor:grab; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
.ywf-mk-cases-carousel::-webkit-scrollbar { display:none; }
.ywf-mk-cases-carousel.is-dragging { cursor:grabbing; }
.ywf-mk-cases-track { flex-wrap:nowrap !important; width:max-content; align-items:flex-start !important; gap:.75rem !important; padding:.2rem 0 !important; }
.ywf-mk-cases-track > .ywf-mk-case { width:min(80%,16rem); min-width:0; flex:0 0 auto; scroll-snap-align:start; }
.ywf-mk-case { border:1px solid var(--line); border-radius:var(--r3); background:var(--white); padding:0 0 .9rem; display:flex; flex-direction:column; gap:.35rem; overflow:hidden; }
.ywf-mk-case-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.ywf-mk-case-embed { padding:.5rem .5rem 0; }
.ywf-mk-embed-ask { margin:.5rem 0 0; font-size:.8125rem; color:var(--mute); }
.ywf-mk-embed-ask .ywf-mk-embed-load { font:inherit; font-weight:600; color:inherit; background:none; border:1px solid currentColor; border-radius:999px; padding:.25rem .75rem; margin-right:.375rem; cursor:pointer; }
.ywf-mk-case-embed .instagram-media, .ywf-mk-case-embed .tiktok-embed { margin:0 auto !important; min-width:0 !important; width:100% !important; max-width:100% !important; }
.ywf-mk-yt { display:block; width:100%; aspect-ratio:16/9; border:0; }
.ywf-mk-case-brand { margin:.6rem .9rem 0; font-size:.9375rem; font-weight:600; color:var(--ink); }
.ywf-mk-case-year { font-weight:400; color:var(--mute); font-size:.85em; font-variant-numeric:tabular-nums; }
.ywf-mk-case-results { display:flex; flex-wrap:wrap; gap:.25rem .7rem; margin:0 .9rem; font-size:.8125rem; color:var(--soft); }
.ywf-mk-case-metric::before { content:'·'; margin-right:.35rem; color:var(--mute); }
.ywf-mk-case-metric:first-child::before { content:''; margin:0; }
.ywf-mk-case-live { display:inline-flex; align-items:center; gap:.3rem; font-weight:600; color:var(--ink); }
.ywf-mk-case-live .ywf-mk-icon { color:var(--soft); }
.ywf-mk-case-link { margin:.2rem .9rem 0; align-self:flex-start; font-size:.8125rem; font-weight:600; }

/* ---------- rates + bundles ---------- */
.ywf-mk-rates-layout { display:grid; gap:1.5rem; }
@media (min-width:640px) { .ywf-mk-rates-layout { grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); } }
.ywf-mk-rates-list { width:100%; }
.ywf-mk-rate-row { display:flex; align-items:baseline; gap:.6rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.ywf-mk-rate-name { font-weight:500; font-size:.9375rem; color:var(--ink); }
.ywf-mk-rate-lead { flex:1 1 auto; min-width:1rem; border-bottom:1px dotted var(--line-2); transform:translateY(-.3em); }
.ywf-mk-rate-price { font-weight:600; font-size:.9375rem; white-space:nowrap; color:var(--ink); font-variant-numeric:tabular-nums; }
.ywf-mk-rates-note { margin-top:1rem; font-size:.8125rem; color:var(--mute); }
.ywf-mk-bundles { display:grid; gap:.75rem; }
.ywf-mk-bundle { background:var(--white); border:1px solid var(--line); border-radius:var(--r3); padding:1rem 1.1rem; }
.ywf-mk-bundle-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.35rem; }
.ywf-mk-bundle-title { font-weight:600; font-size:1rem; color:var(--ink); }
.ywf-mk-bundle-price { font-weight:600; font-size:1.125rem; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ywf-mk-bundle-desc { margin:0 0 .5rem; font-size:.875rem; color:var(--soft); }
.ywf-mk-bundle-items { margin:0; padding:0; list-style:none; display:grid; gap:.25rem; }
.ywf-mk-bundle-items li { display:flex; align-items:baseline; gap:.4rem; font-size:.875rem; color:var(--charcoal); }
.ywf-mk-bundle-items .ywf-mk-icon { color:var(--ink); }

/* ---------- Request rates ---------- */
.ywf-mk-request { margin-top:1.5rem; }
.ywf-mk-request-compact { margin-top:0; }
.ywf-mk-request-open { display:inline-flex; }
.ywf-mk-request-details[open] .ywf-mk-request-open { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.ywf-mk-request-panel { background:var(--white); border:1px solid var(--line); border-radius:var(--r3); border-top-left-radius:0; padding:1.1rem; max-width:40rem; }
.ywf-mk-request-title { font-weight:600; font-size:1rem; margin-bottom:.25rem; }
.ywf-mk-request-lede { font-size:.875rem; color:var(--soft); margin-bottom:1rem; }
.ywf-mk-request-grid { display:grid; gap:.75rem; }
@media (min-width:480px) { .ywf-mk-request-grid { grid-template-columns:1fr 1fr; } .ywf-mk-field-wide { grid-column:1 / -1; } }
.ywf-mk-field { display:flex; flex-direction:column; gap:.3rem; font-size:.8125rem; font-weight:600; color:var(--soft); }
.ywf-mk-field input, .ywf-mk-field textarea { width:100%; min-height:2.9rem; padding:.7rem .85rem; font:inherit; font-size:1rem; font-weight:400; color:var(--ink); background:var(--white); border:1px solid var(--line-2); border-radius:var(--r2); }
.ywf-mk-field textarea { min-height:6rem; resize:vertical; }
.ywf-mk-field input:focus, .ywf-mk-field textarea:focus { outline:none; border-color:var(--babe-deep); box-shadow:var(--ring); }
.ywf-mk-field.is-invalid input, .ywf-mk-field.is-invalid textarea { border-color:var(--danger); background:var(--danger-soft); }
.ywf-mk-field-error { font-size:.75rem; font-weight:500; color:var(--danger); }
.ywf-mk-check { display:flex; align-items:flex-start; gap:.5rem; margin-top:.75rem; font-size:.8125rem; color:var(--soft); }
.ywf-mk-check input { margin:.2rem 0 0; }
.ywf-mk-hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ywf-mk-request-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-top:1rem; }
.ywf-mk-request-fine { font-size:.75rem; color:var(--mute); }
.ywf-mk-request-status { margin-top:.75rem; font-size:.9rem; font-weight:500; }
.ywf-mk-request-status.is-ok { color:var(--ink); }
.ywf-mk-request-status.is-err { color:var(--danger); }

/* ---------- Creator Network: the follow control and the count (F3) ----------
   The control is the platform's own markup (button.omk-follow), dressed here
   with the kit's tokens so it fits every preset; the count is a quiet line. */
.ywf-mk-follow-row { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-top:.75rem; }
.ywf-mk-foot .ywf-mk-follow-row { margin-top:.25rem; }
/* The pill, as a follow button on a social network (3 Oct 2026): off = a solid accent pill, white text, the user-plus icon, "Follow";
   on = an outlined pill on white, ink text, a check, "Following" that reads "Unfollow" with the border in the accent while the pointer is over it.
   2.5rem tall, pill radius. Every colour is a theme token, so it sits right on all five presets. */
.ywf-mk .omk-follow { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; height:2.5rem; padding:0 1.05rem 0 .9rem; border-radius:999px; font:inherit; font-weight:600; font-size:.875rem; line-height:1; cursor:pointer; white-space:nowrap; -webkit-appearance:none; appearance:none; background:var(--babe-deep); color:var(--on-accent); border:1px solid var(--babe-deep); transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ywf-mk .omk-follow:hover { background:var(--ink); border-color:var(--ink); color:var(--on-accent); }
.ywf-mk .omk-follow:focus-visible { outline:2px solid var(--babe-deep); outline-offset:2px; }
.ywf-mk .omk-follow[aria-busy="true"] { opacity:.7; cursor:progress; }
.ywf-mk .omk-follow[aria-pressed="true"], .ywf-mk .omk-follow[data-on="1"] { background:var(--white); color:var(--ink); border-color:var(--ink); }
.ywf-mk .omk-follow[data-on="1"]:hover, .ywf-mk .omk-follow[aria-pressed="true"]:hover { background:var(--white); color:var(--babe-deep); border-color:var(--babe-deep); }
/* the icon (the platform's inline SVG, user-plus or check): 16px, drawn on currentColor */
.ywf-mk .omk-follow-ico { width:16px; height:16px; flex:none; display:block; color:currentColor; stroke:currentColor; fill:none; transform-origin:50% 50%; }
/* the two labels share one cell: "Following" shows, "Unfollow" takes its place on hover; the pill keeps the width of the wider word */
.ywf-mk .omk-follow-text { display:grid; text-align:center; }
.ywf-mk .omk-follow-label, .ywf-mk .omk-follow-alt { grid-area:1 / 1; }
.ywf-mk .omk-follow-alt { display:none; }
.ywf-mk .omk-follow[data-on="1"] .omk-follow-alt, .ywf-mk .omk-follow[aria-pressed="true"] .omk-follow-alt { display:block; visibility:hidden; }
.ywf-mk .omk-follow[data-on="1"]:hover .omk-follow-alt, .ywf-mk .omk-follow[aria-pressed="true"]:hover .omk-follow-alt { visibility:visible; }
.ywf-mk .omk-follow[data-on="1"]:hover .omk-follow-label, .ywf-mk .omk-follow[aria-pressed="true"]:hover .omk-follow-label { visibility:hidden; }
/* the pop on click (public.js adds .is-pop for 240 ms): scale 1 → 1.2 → 1 on the icon only */
@keyframes ywf-mk-pop { 0% { transform:scale(1); } 50% { transform:scale(1.2); } 100% { transform:scale(1); } }
.ywf-mk .omk-follow.is-pop .omk-follow-ico { animation:ywf-mk-pop 240ms var(--ease); }
.ywf-mk-followers { font-size:.8125rem; font-weight:500; color:var(--soft); font-variant-numeric:tabular-nums; }
.ywf-mk-followers-short { white-space:nowrap; }
/* the message button, a quiet twin of the pill (the platform's a.omk-message) */
.ywf-mk .omk-message { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; height:2.5rem; padding:0 1rem 0 .85rem; border-radius:999px; font:inherit; font-weight:600; font-size:.875rem; line-height:1; white-space:nowrap; background:var(--white); color:var(--ink); border:1px solid var(--line-2); transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ywf-mk a.omk-message { color:var(--ink); text-decoration:none !important; }
.ywf-mk a.omk-message:hover { border-color:var(--ink); background:var(--cream); color:var(--ink); }
.ywf-mk a.omk-message:focus-visible { outline:2px solid var(--babe-deep); outline-offset:2px; }
.ywf-mk .omk-message svg { width:16px; height:16px; flex:none; display:block; }
/* the identity cluster: right of the name on a wide screen, under it when the row has to wrap */
/* I3: the name row — line 1 is the title group (the name, then the meta cluster "★ 4.8 (12) · 12 brands" right next to it),
   line 2 the buttons [Follow] [Message]. space-between puts the buttons at the right when they fit on the name's line;
   when they wrap they sit alone on the next line and, as the only item there, fall back to the left, under the name. */
.ywf-mk-head-name-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem; }
.ywf-mk-head-name-row .ywf-mk-name { margin:0; }
.ywf-mk-head-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .65rem; min-width:0; }
.ywf-mk-head-meta { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .45rem; min-width:0; white-space:nowrap; }
.ywf-mk-head-cluster { display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:none; }
/* one baseline for the name, the rating and the count: the star (no baseline of its own) sits on it, nudged down a hair */
.ywf-mk-head-meta .ywf-mk-rating-inline { align-items:baseline; }
.ywf-mk-head-meta .ywf-mk-rating-inline .ywf-mk-star { transform:translateY(1.5px); }
/* the envelope mark (the kit's own inline SVG, added to the platform's button when it carries none) */
.ywf-mk-envelope { width:16px; height:16px; flex:none; display:block; }
/* the inline rating "★ 4.8 (12)", a link to the section */
.ywf-mk-rating-inline { display:inline-flex; align-items:center; gap:.3rem; font-size:.875rem; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.2; }
.ywf-mk a.ywf-mk-rating-inline { color:var(--ink); text-decoration:none; }
.ywf-mk a.ywf-mk-rating-inline:hover { text-decoration:underline; text-underline-offset:.15em; }
.ywf-mk-rating-inline .ywf-mk-star { width:14px; height:14px; }
.ywf-mk-rating-inline b { font-weight:600; }
.ywf-mk-rating-count { color:var(--soft); }

/* ---------- Reviews from brands (H3): five marks, the score, tags as pills, the latest three as quotes ---------- */
.ywf-mk-reviews-head { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; margin-bottom:1rem; }
.ywf-mk-stars { display:inline-flex; align-items:center; gap:2px; color:var(--ink); }
.ywf-mk-star { width:18px; height:18px; flex:none; display:block; color:currentColor; }
.ywf-mk-stars-sm .ywf-mk-star { width:14px; height:14px; }
.ywf-mk-reviews-score { font-size:1rem; color:var(--soft); font-variant-numeric:tabular-nums; }
.ywf-mk-reviews-score b { font-family:var(--display); font-weight:600; font-size:1.375rem; color:var(--ink); letter-spacing:-.01em; }
.ywf-mk-review-tags { margin-bottom:1.25rem; }
.ywf-mk-review-tag b { font-weight:600; color:var(--mute); margin-left:.1rem; font-variant-numeric:tabular-nums; }
.ywf-mk-review-list { display:grid; grid-template-columns:1fr; gap:.75rem; }
.ywf-mk-review { margin:0; padding:1.1rem 1.2rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r3); display:flex; flex-direction:column; gap:.6rem; min-width:0; }
.ywf-mk-review-text { margin:0; font-size:.9375rem; line-height:1.6; color:var(--charcoal); text-wrap:pretty; }
.ywf-mk-review-meta { font-size:.8125rem; color:var(--soft); }
.ywf-mk-review-meta b { font-weight:600; color:var(--ink); }
.ywf-mk-review-reply { margin:0; padding:.6rem .8rem; border-left:2px solid var(--line-2); background:var(--cream); border-radius:0 var(--r1) var(--r1) 0; font-size:.875rem; line-height:1.55; color:var(--charcoal); }
.ywf-mk-review-reply-who { display:block; font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-bottom:.15rem; }
@media (min-width:720px) { .ywf-mk-review-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------- terms ---------- */
.ywf-mk-terms-intro { margin:0 0 1rem; color:var(--soft); max-width:40rem; }
.ywf-mk-term-item .ywf-mk-acc-head { font-weight:600; font-size:.9375rem; }
.ywf-mk-term-text { margin:0; font-size:.9375rem; color:var(--charcoal); max-width:40rem; line-height:1.6; }

/* ---------- KitFooter ---------- */
.ywf-mk-foot { margin-top:clamp(2rem,6vw,3.5rem); padding-top:1.25rem; border-top:var(--rule) solid var(--line); display:grid; gap:.5rem; font-size:.8125rem; color:var(--mute); }
.ywf-mk-verified-line { display:flex; align-items:center; gap:.45rem; color:var(--verified-ink); font-weight:500; }
.ywf-mk-verified-dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--verified); flex:none; }
.ywf-mk-period { font-variant-numeric:tabular-nums; }
.ywf-mk-sample-note { max-width:40rem; }
.ywf-mk-mark a { color:var(--mute); text-decoration-color:var(--line-2); }

/* ---------- PasswordGate (WordPress's own form, restyled) ---------- */
.ywf-mk-gate { max-width:28rem; margin:clamp(2rem,8vw,5rem) auto; padding:0 clamp(1rem,4vw,2rem); font-family:var(--sans); color:var(--ink); }
.ywf-mk-gate .ywf-mk-eyebrow { margin-bottom:.5rem; }
.ywf-mk-gate h1 { font-family:var(--display); font-weight:600; font-size:clamp(1.75rem,1.4rem + 2vw,2.5rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 .5rem; }
.ywf-mk-gate p { color:var(--soft); margin:0 0 1.25rem; }
.ywf-mk-gate-row { display:flex; gap:.5rem; }
.ywf-mk-gate-row input { flex:1 1 auto; min-width:0; min-height:3rem; padding:.7rem .9rem; font:inherit; font-size:1rem; border:1px solid var(--line-2); border-radius:var(--r2); background:var(--white); color:var(--ink); }
.ywf-mk-gate-row input:focus { outline:none; border-color:var(--babe-deep); box-shadow:var(--ring); }
.ywf-mk-gate-hint { margin-top:1rem; font-size:.8125rem; color:var(--mute); }
@media (max-width:420px) { .ywf-mk-gate-row { flex-direction:column; } }

/* ============================================================================
   DESIGN AXES (YWF_MK_Theme::root_attrs writes these on .ywf-mk)
   Seven switches a preset sets and a creator can override, one attribute
   each. They move type, spacing, fills and rules — never the markup, so
   every reveal, count-up, chart and country bar keeps working identically.
   ============================================================================ */

/* ---------- display_case: uppercase display type ---------- */
.ywf-mk[data-case="upper"] .ywf-mk-name,
.ywf-mk[data-case="upper"] .ywf-mk-title,
.ywf-mk[data-case="upper"] .ywf-mk-acc-head,
.ywf-mk[data-case="upper"] .ywf-mk-logo-name,
.ywf-mk[data-case="upper"] .ywf-mk-gate h1 { text-transform:uppercase; }
.ywf-mk[data-case="upper"] .ywf-mk-name { font-weight:700; letter-spacing:0; }
.ywf-mk[data-case="upper"] .ywf-mk-title { font-weight:700; letter-spacing:.01em; }

/* ---------- display_tracking: wide tracking on display type ---------- */
.ywf-mk[data-track="wide"] .ywf-mk-name { letter-spacing:.06em; }
.ywf-mk[data-track="wide"] .ywf-mk-title,
.ywf-mk[data-track="wide"] .ywf-mk-gate h1 { letter-spacing:.05em; }
.ywf-mk[data-track="wide"] .ywf-mk-total-num,
.ywf-mk[data-track="wide"] .ywf-mk-platform-followers .ywf-mk-stat-num { letter-spacing:.01em; }
.ywf-mk[data-track="wide"] .ywf-mk-eyebrow,
.ywf-mk[data-track="wide"] .ywf-mk-subtitle,
.ywf-mk[data-track="wide"] .ywf-mk-block-title { letter-spacing:.18em; }

/* ---------- density: compact ---------- */
.ywf-mk[data-density="compact"] { --r3:10px; }
.ywf-mk[data-density="compact"] .ywf-mk-section { padding-top:clamp(1.1rem,3.2vw,1.9rem); }
.ywf-mk[data-density="compact"] .ywf-mk-section + .ywf-mk-section { margin-top:clamp(1.1rem,3.2vw,1.9rem); }
.ywf-mk[data-density="compact"] .ywf-mk-head { padding-top:clamp(1rem,3.2vw,1.9rem); }
.ywf-mk[data-density="compact"] .ywf-mk-stat,
.ywf-mk[data-density="compact"] .ywf-mk-block { padding:.7rem .8rem; }
.ywf-mk[data-density="compact"] .ywf-mk-row { gap:.55rem; margin-bottom:.55rem; }
.ywf-mk[data-density="compact"] .ywf-mk-platform { margin-top:clamp(1.1rem,3.2vw,1.9rem); padding-top:clamp(.9rem,2.6vw,1.4rem); }
.ywf-mk[data-density="compact"] .ywf-mk-acc-head { padding:.7rem .9rem; }
.ywf-mk[data-density="compact"] .ywf-mk-acc-body { padding:0 .9rem .9rem; }

/* ---------- header_style: a filled banner behind the identity ----------
   Full-bleed inside the reading column, so the name sits on its own field. */
.ywf-mk[data-header="banner"] .ywf-mk-head {
  background:var(--cream);
  margin-left:calc(-1 * clamp(1rem,4vw,2rem));
  margin-right:calc(-1 * clamp(1rem,4vw,2rem));
  padding:clamp(1.5rem,5vw,3rem) clamp(1rem,4vw,2rem) clamp(1.25rem,4vw,2rem);
  border-bottom:var(--rule) solid var(--line);
}
.ywf-mk[data-header="banner"] .ywf-mk-head-actions { margin-bottom:0; }

/* ---------- stats_style: one full-width band instead of tiles ---------- */
.ywf-mk[data-stats="band"] .ywf-mk-row-stats,
.ywf-mk[data-stats="band"] .ywf-mk-row-sums {
  gap:0;
  background:var(--cream);
  border-top:var(--rule) solid var(--line);
  border-bottom:var(--rule) solid var(--line);
  margin-left:calc(-1 * clamp(1rem,4vw,2rem));
  margin-right:calc(-1 * clamp(1rem,4vw,2rem));
  padding:0 clamp(1rem,4vw,2rem);
}
.ywf-mk[data-stats="band"] .ywf-mk-row-stats > .ywf-mk-stat,
.ywf-mk[data-stats="band"] .ywf-mk-row-sums > .ywf-mk-stat {
  background:transparent; border:0; border-radius:0;
  padding:1rem .9rem;
  border-left:var(--rule) solid var(--line);
}
.ywf-mk[data-stats="band"] .ywf-mk-row-stats > .ywf-mk-stat:first-child,
.ywf-mk[data-stats="band"] .ywf-mk-row-sums > .ywf-mk-stat:first-child { border-left:0; padding-left:0; }

/* ---------- demographics_style: a filled panel behind the audience ---------- */
.ywf-mk[data-demo="panel"] .ywf-mk-audience .ywf-mk-row-charts,
.ywf-mk[data-demo="panel"] .ywf-mk-platform-body .ywf-mk-row-charts {
  background:var(--cream);
  border-radius:var(--r3);
  padding:clamp(.85rem,2.5vw,1.25rem);
}
.ywf-mk[data-demo="panel"][data-corner="square"] .ywf-mk-audience .ywf-mk-row-charts,
.ywf-mk[data-demo="panel"][data-corner="square"] .ywf-mk-platform-body .ywf-mk-row-charts { border-radius:0; }
.ywf-mk[data-demo="panel"] .ywf-mk-audience .ywf-mk-method { margin-top:1rem; }

/* ---------- rule_weight: bold rules read as printed rules ---------- */
.ywf-mk[data-rule="bold"] .ywf-mk-title { padding-bottom:.5rem; border-bottom:var(--rule) solid var(--ink); }
.ywf-mk[data-rule="bold"] .ywf-mk-platform-head { padding-bottom:.5rem; }
.ywf-mk[data-rule="bold"] .ywf-mk-rate-row { border-bottom-width:var(--rule); }

/* ---------- motion (public.js flips the .is-in classes) ---------- */
.ywf-mk.is-js [data-ywf-mk-reveal] { opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.ywf-mk.is-js [data-ywf-mk-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .ywf-mk { --dur:0ms; --dur-count:0ms; }
  .ywf-mk.is-js [data-ywf-mk-reveal] { opacity:1; transform:none; transition:none; }
  .ywf-mk-country-bar { transition:none; }
  .ywf-mk.is-js .ywf-mk-country-bar:not(.is-in) { width:auto !important; }
  .ywf-mk .omk-follow.is-pop .omk-follow-ico { animation:none; }
}

/* ---------- print ---------- */
/* ---- Agency page (G3): identity, honest totals, the roster as cards. Same tokens, all five presets. ---- */
.ywf-mk-agency-services { margin-top:1rem; }
.ywf-mk-agency-totals .ywf-mk-total + .ywf-mk-blended { margin-top:1.25rem; }
.ywf-mk-agency-cards { display:grid; grid-template-columns:1fr; gap:.75rem; }
.ywf-mk-creator { display:flex; flex-direction:column; gap:.6rem; padding:1rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r3); min-width:0; }
.ywf-mk-creator-head { display:flex; align-items:center; gap:.75rem; }
.ywf-mk-creator-head .ywf-mk-avatar { width:56px; height:56px; box-shadow:none; }
.ywf-mk-creator-head .ywf-mk-avatar-initials { font-size:1.125rem; }
.ywf-mk-creator-id { min-width:0; }
.ywf-mk-creator-name { font-family:var(--display); font-weight:600; font-size:1.125rem; line-height:1.2; margin:0; color:var(--ink); overflow-wrap:anywhere; }
.ywf-mk-creator-sub { margin:.2rem 0 0; font-size:.8125rem; color:var(--soft); }
.ywf-mk-creator-stats { display:flex; flex-wrap:wrap; gap:.35rem 1rem; font-size:.875rem; color:var(--soft); }
.ywf-mk-creator-stat b { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.ywf-mk-creator-platforms { margin:0; font-size:.8125rem; color:var(--soft); }
.ywf-mk-creator-verified { display:inline-flex; align-items:center; gap:.3rem; margin-left:.5rem; font-weight:600; color:var(--verified-ink); }
.ywf-mk-creator-bio { margin:0; font-size:.875rem; line-height:1.5; color:var(--charcoal); }
.ywf-mk-creator-open { align-self:flex-start; margin-top:auto; }
.ywf-mk-managed { margin:.4rem 0 0; font-size:.875rem; color:var(--soft); }
.ywf-mk-managed a { color:var(--ink); }
/* G2b: "Works with brands on…" under the name, on the theme tokens (every preset) */
.ywf-mk-work { margin:.4rem 0 0; font-size:.875rem; line-height:1.5; color:var(--soft); text-wrap:pretty; }
/* 11 Oct 2026 (calendar-spec §6): the computed availability line, a dot in the state's colour */
.ywf-mk-avail { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .5rem; margin:.35rem 0 0; font-size:.875rem; line-height:1.5; color:var(--ink); }
.ywf-mk-avail-label { font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--soft); }
.ywf-mk-avail-state::before { content:""; display:inline-block; width:.5rem; height:.5rem; margin-right:.35rem; border-radius:50%; background:currentColor; opacity:.55; vertical-align:.05em; }
.ywf-mk-avail.is-available .ywf-mk-avail-state::before { background:var(--gold); opacity:1; }
.ywf-mk-avail.is-busy .ywf-mk-avail-state::before { background:var(--danger); opacity:1; }
@media (min-width:600px) { .ywf-mk-agency-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px) { .ywf-mk-agency-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---- K1: fit at every width ----------------------------------------------
   The kit is embedded in device frames on the marketing site — the phone
   frame gives it a 348px viewport, the small "example" frame 244px — so it
   has to read as deliberate well below 320px. Everything here is additive:
   each rule overrides an earlier one by cascade order, none replaces it, and
   no token, class or animation changes. The five presets ride on the same
   rules because they only re-declare tokens and data-* variants. */

/* The identity stacks under 480px. Side by side, a 72px avatar leaves the
   name, the rating cluster and the location line 255px on a 375px phone,
   which is what made them look cramped; stacked they get the full column. */
.ywf-mk-head-row { flex-direction:column; align-items:flex-start; gap:.85rem; }
@media (min-width:480px) { .ywf-mk-head-row { flex-direction:row; align-items:flex-end; gap:1rem; } }

/* SyncStamp. It was white-space:nowrap inside a min-width:0 grid cell, so
   "Synced today, 05:58" ran straight through the card's right edge. It now
   loses a fraction of a point on a narrow screen and, only when even that is
   not enough, wraps between its own words. The dot keeps the first line. */
.ywf-mk-stamp { max-width:100%; align-items:flex-start; white-space:normal; overflow-wrap:break-word;
  font-size:clamp(.6875rem,.61rem + .28vw,.75rem); }
.ywf-mk-stamp-dot { margin-top:calc((1.3em - .5rem) / 2); }
.ywf-mk-stamp-lg { font-size:clamp(.75rem,.68rem + .25vw,.8125rem); }

/* Two donuts side by side stop being legible long before 320px, and their
   labels and stamps have nowhere to go. One chart per line under 440px. */
.ywf-mk-row-charts { grid-template-columns:minmax(0,1fr); }
@media (min-width:440px) { .ywf-mk-row-charts { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Two to a line on a phone: an odd last tile or chart takes the whole line
   instead of leaving half of it empty (E-44, DECISIONS n° 38: no hole). */
@media (min-width:300px) and (max-width:639px) {
  .ywf-mk-row:not(.ywf-mk-row-posts) > :last-child:nth-child(odd) { grid-column:1 / -1; }
}

/* Two tiles per line stay (the band preset is built on them), but nothing
   inside a tile or a card may push past its own edge. */
.ywf-mk-stat, .ywf-mk-block { overflow-wrap:break-word; }
.ywf-mk-stat-label, .ywf-mk-block-title { min-width:0; overflow-wrap:break-word; }
.ywf-mk-head-meta, .ywf-mk-head-title { max-width:100%; }

/* Rates and bundles sat in implicit "auto" grid tracks, so the track sized
   itself to the widest price row's min-content and pushed the whole column
   past the page — 243px of content in a 212px column at 244px wide. The
   tracks may now shrink, and the names wrap instead of the column growing. */
.ywf-mk-rates-layout, .ywf-mk-bundles { grid-template-columns:minmax(0,1fr); }
@media (min-width:640px) { .ywf-mk-rates-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); } }
.ywf-mk-rates-col, .ywf-mk-bundles-col, .ywf-mk-rates-list,
.ywf-mk-bundle, .ywf-mk-rate-row, .ywf-mk-bundle-head { min-width:0; }
.ywf-mk-rate-name, .ywf-mk-bundle-title { min-width:0; overflow-wrap:break-word; }
/* a bundle title and its price share a line while both fit, and take one each
   when they do not — "Ambassador" is not a word to hyphenate by accident. */
.ywf-mk-bundle-head { flex-wrap:wrap; }

/* Below 300px — the marketing site's small "example" frame is a 244px
   viewport — two tiles to a line leave 68px of text and the sync stamp breaks
   into three. One tile to a line there, and the band preset drops the rules
   between the tiles with it, since stacked tiles have no gutter to rule.
   A max-width query on purpose: the 640px block above owns .ywf-mk-row's
   column counts, and a mobile-first base here would override it. */
@media (max-width:299px) {
  .ywf-mk-row { grid-template-columns:minmax(0,1fr); }
  .ywf-mk[data-stats="band"] .ywf-mk-row-stats > .ywf-mk-stat,
  .ywf-mk[data-stats="band"] .ywf-mk-row-sums > .ywf-mk-stat { border-left:0; padding-left:0; }
}

@media print {
  .ywf-mk { background:#fff; color:#000; width:auto !important; margin:0 !important; }
  .ywf-mk-inner { max-width:none; padding:0; }
  .ywf-mk-section, .ywf-mk-platform { page-break-inside:avoid; }
  .ywf-mk-acc-arrow, .ywf-mk-case-link, .ywf-mk-request, .ywf-mk-header-cta, .ywf-mk-lock, .ywf-mk-platform-link { display:none !important; }
  .ywf-mk .omk-follow, .ywf-mk .omk-message, .ywf-mk-follow-row { display:none !important; }
  .ywf-mk-case-embed { display:none; }
  .ywf-mk-row-posts { overflow:visible; flex-wrap:wrap; }
  .ywf-mk.is-js [data-ywf-mk-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
  .ywf-mk.is-js .ywf-mk-country-bar:not(.is-in) { width:auto !important; }
}

/* show/hide on the kit's password gate */
.ywf-mk-eye-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.ywf-mk-eye-wrap > input { width: 100%; padding-right: 2.6rem; }
.ywf-mk-eye { position: absolute; top: 50%; right: .45rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; color: var(--mute); cursor: pointer; border-radius: 6px; }
.ywf-mk-eye:hover { color: var(--ink); }
.ywf-mk-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--ink); }

/* A mouse can drag these rows, and sees a scrollbar; a finger keeps the swipe. */
[data-ywf-mk-dragscroll] { cursor:grab; }
[data-ywf-mk-dragscroll].is-dragging { cursor:grabbing; scroll-snap-type:none; }
[data-ywf-mk-dragscroll].is-dragging a { pointer-events:none; }
@media (hover:hover) and (pointer:fine) {
  .ywf-mk-row-posts, .ywf-mk-cases { scrollbar-width:thin; }
  .ywf-mk-row-posts::-webkit-scrollbar, .ywf-mk-cases::-webkit-scrollbar { display:block; height:6px; }
  .ywf-mk-row-posts::-webkit-scrollbar-thumb, .ywf-mk-cases::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
}

/* 7 Oct 2026: a locked section, for the owner previewing their own kit only — the title and one line, never a number */
.ywf-mk-lock-line { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0; font-size:.9rem; color:var(--soft); }
.ywf-mk-lock-line .ywf-mk-lock-icon { width:1.6rem; height:1.6rem; }
.ywf-mk-lock-line a { color:var(--babe-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.ywf-mk-section-locked .ywf-mk-lock { margin-top:.9rem; }