/* WOORIKINI Web Design System v2 — tokens + components.
   Spec: docs/WOORIKINI_WEB_DESIGN_SYSTEM_2026-09_v2.md (parent workspace). */

:root {
  /* primitive */
  --paper-0: #ffffff;
  --paper-50: #fbf8f1;
  --paper-100: #f4eee2;
  --paper-200: #e6ddcb;
  --ink-900: #1c1a16;
  --ink-700: #3b3730;
  --ink-500: #6a6457;
  --sun-200: #fff1bf;
  --sun-400: #ffd23f;
  --sun-700: #7a5a00;
  --coral-300: #ffb4a1;
  --coral-500: #f0694a;
  --coral-700: #a8391f;
  --lilac-200: #e9e3ff;
  --lilac-500: #9c88f0;
  --lilac-700: #4f3ca8;

  /* semantic */
  --wk-bg: var(--paper-50);
  --wk-surface: var(--paper-0);
  --wk-sunken: var(--paper-100);
  --wk-line: var(--paper-200);
  --wk-text: var(--ink-900);
  --wk-text-body: var(--ink-700);
  --wk-text-muted: var(--ink-500);
  --wk-action: var(--ink-900);
  --wk-action-text: var(--paper-0);
  --wk-action-accent: var(--sun-400);
  --wk-highlight: var(--sun-400);
  --wk-focus: var(--lilac-700);

  /* type */
  --wk-font: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --wk-display: clamp(44px, 7.2vw, 104px);
  --wk-h2: clamp(32px, 4.6vw, 64px);
  --wk-h3: clamp(20px, 1.8vw, 26px);
  --wk-lead: clamp(18px, 1.6vw, 22px);

  /* layout */
  --wk-max: 1200px;
  --wk-read: 680px;
  --wk-gutter: clamp(20px, 3.4vw, 40px);
  --wk-section: clamp(80px, 10vw, 128px);
  --wk-radius-btn: 14px;
  --wk-radius-card: 20px;
  --wk-border: 1.5px solid var(--wk-line);

  /* motion (v1.0 policy values) */
  --wk-ease: cubic-bezier(.22, 1, .36, 1);
  --wk-fast: 200ms;
  --wk-enter: 720ms;
}

/* ---------- base ---------- */
body.wk {
  margin: 0;
  background: var(--wk-bg);
  color: var(--wk-text-body);
  font-family: var(--wk-font);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.wk *, body.wk *::before, body.wk *::after { box-sizing: border-box; }
body.wk img { display: block; max-width: 100%; }
:where(body.wk) a { color: inherit; }
body.wk :focus-visible { outline: 3px solid var(--wk-focus); outline-offset: 3px; border-radius: 6px; }
:where(body.wk) :is(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
:where(body.wk) :is(ul, ol) { padding: 0; list-style: none; }
.wk .skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 10px; background: var(--ink-900); color: var(--paper-0); font-weight: 700; text-decoration: none; }
.wk .skip-link:focus { top: 12px; }

.wk-container { width: min(100% - 2 * var(--wk-gutter), var(--wk-max)); margin-inline: auto; }
.wk-section { padding-block: var(--wk-section); }
.wk-band { width: 100%; }
.wk-band--paper { background: var(--wk-bg); }
.wk-band--sunken { background: var(--wk-sunken); }
.wk-band--sun { background: var(--sun-400); color: var(--ink-900); }
.wk-band--ink { background: var(--ink-900); color: var(--paper-100); }
.wk-band--lilac { background: var(--lilac-200); }

/* ---------- type ---------- */
.wk-display, .wk-h2, .wk-h3 { color: var(--wk-text); font-weight: 800; }
.wk-display { font-size: var(--wk-display); line-height: 1.06; letter-spacing: -0.045em; }
.wk-line { display: inline-block; white-space: nowrap; }
.wk-hero .wk-display { font-size: clamp(40px, 6vw, 88px); }
.wk-h2 { font-size: var(--wk-h2); line-height: 1.1; letter-spacing: -0.04em; }
.wk-h3 { font-size: var(--wk-h3); font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; }
.wk-band--ink .wk-display, .wk-band--ink .wk-h2, .wk-band--ink .wk-h3 { color: var(--paper-0); }
.wk-lead { max-width: var(--wk-read); font-size: var(--wk-lead); font-weight: 500; line-height: 1.6; letter-spacing: -0.02em; }
.wk-lead strong { color: var(--wk-text); font-weight: 700; }
.wk-band--ink .wk-lead strong { color: var(--paper-0); }
.wk-small { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--wk-text-muted); }
.wk-band--ink .wk-small { color: #bdb6a8; }
.wk-mark { background: linear-gradient(transparent 58%, var(--wk-highlight) 58%, var(--wk-highlight) 92%, transparent 92%); padding-inline: .06em; }
.wk-band--ink .wk-mark { background: none; color: var(--sun-400); }
.wk-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--wk-text); font-size: 14px; font-weight: 700; line-height: 1.3; }
.wk-eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--coral-500); }
.wk-band--ink .wk-eyebrow { color: var(--sun-400); }
.wk-band--sun .wk-eyebrow::before { background: var(--ink-900); }

/* editorial line breaks: desktop-only / mobile-only */
.wk-br-d { display: none; }
@media (min-width: 761px) { .wk-br-d { display: inline; } .wk-br-m { display: none; } }

/* ---------- buttons ---------- */
.wk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 40px; }
.wk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border: 1.5px solid transparent; border-radius: var(--wk-radius-btn); font: inherit; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform var(--wk-fast) var(--wk-ease), background-color var(--wk-fast) var(--wk-ease), border-color var(--wk-fast) var(--wk-ease); }
.wk-btn .wk-arrow { transition: transform var(--wk-fast) var(--wk-ease); }
.wk-btn--primary { background: var(--wk-action); color: var(--wk-action-text); }
.wk-btn--accent { background: var(--wk-action-accent); color: var(--ink-900); }
.wk-btn--ghost { border-color: currentColor; background: transparent; color: var(--wk-text); }
.wk-band--ink .wk-btn--ghost { color: var(--paper-0); }
.wk-band--sun .wk-btn--primary { background: var(--ink-900); }
.wk-btn-note { color: var(--wk-text-muted); font-size: 14px; font-weight: 500; }
.wk-textlink { color: var(--wk-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.wk-band--ink .wk-textlink { color: var(--paper-0); }
@media (hover: hover) and (pointer: fine) {
  .wk-btn:hover { transform: translateY(-2px); }
  .wk-btn:hover .wk-arrow { transform: translateX(4px); }
  .wk-btn--primary:hover { background: #000; }
  .wk-btn--accent:hover { background: #ffc814; }
  .wk-textlink:hover { text-decoration-color: var(--coral-500); }
}
@media (max-width: 520px) {
  .wk-btn { width: 100%; min-height: 52px; }
}

/* ---------- hero ---------- */
.wk-hero { padding-block: clamp(56px, 8vw, 112px) clamp(72px, 9vw, 120px); }
.wk-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(40px, 6vw, 88px); }
.wk-hero .wk-lead { margin-top: 32px; }
@media (max-width: 960px) {
  .wk-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .wk-hero-grid > * { min-width: 0; }
}

/* meal feed mock (hero visual) */
.wk-feed { position: relative; padding: 18px; border-radius: 32px; background: var(--ink-900); box-shadow: 0 30px 60px -30px rgba(28, 26, 22, .45); max-width: 440px; justify-self: end; width: 100%; }
.wk-feed-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 14px; color: var(--paper-100); font-size: 14px; font-weight: 700; }
.wk-feed-top span:last-child { color: var(--sun-400); }
.wk-feed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wk-post { overflow: hidden; border-radius: 18px; background: var(--paper-0); }
.wk-post-img { aspect-ratio: 1 / 1; background-image: url("../images/brand/home-hero-four-meals.png"); background-size: 200% 200%; }
.wk-post-img[data-q="1"] { background-position: 0 0; }
.wk-post-img[data-q="2"] { background-position: 100% 0; }
.wk-post-img[data-q="3"] { background-position: 0 100%; }
.wk-post-img[data-q="4"] { background-position: 100% 100%; }
.wk-post-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 12px 12px; color: var(--ink-900); font-size: 13px; font-weight: 700; line-height: 1.3; }
.wk-post-meta small { color: var(--ink-500); font-size: 12px; font-weight: 600; }
.wk-snack { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--sun-200); color: var(--sun-700); font-size: 12px; font-weight: 800; white-space: nowrap; }
.wk-snack::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--coral-500); box-shadow: 5px 0 0 -1px var(--sun-400); margin-right: 4px; }
.wk-feed-note { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sun-400); color: var(--ink-900); font-size: 15px; font-weight: 700; line-height: 1.4; }
@media (max-width: 960px) { .wk-feed { justify-self: start; } }

/* ---------- section heads ---------- */
.wk-head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 64px); }
.wk-head .wk-lead { margin-top: 24px; }

/* ---------- persona cards ---------- */
.wk-personas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wk-persona { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 30px; border: var(--wk-border); border-radius: var(--wk-radius-card); background: var(--wk-surface); transition: transform 300ms var(--wk-ease), border-color 300ms var(--wk-ease); }
.wk-persona-tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--wk-sunken); color: var(--ink-700); font-size: 13px; font-weight: 700; }
.wk-persona:nth-child(3n+1) .wk-persona-tag { background: var(--sun-200); color: var(--sun-700); }
.wk-persona:nth-child(3n+2) .wk-persona-tag { background: var(--lilac-200); color: var(--lilac-700); }
.wk-persona:nth-child(3n) .wk-persona-tag { background: #ffe4dc; color: var(--coral-700); }
.wk-persona-hook { color: var(--wk-text); font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; line-height: 1.38; letter-spacing: -0.03em; }
.wk-persona-sub { color: var(--wk-text-muted); font-size: 15px; line-height: 1.6; }
.wk-punch { margin-top: clamp(40px, 5vw, 56px); color: var(--wk-text); font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; line-height: 1.4; letter-spacing: -0.035em; }
@media (hover: hover) and (pointer: fine) { .wk-persona:hover { transform: translateY(-4px); border-color: var(--ink-900); } }
@media (max-width: 960px) { .wk-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wk-personas { grid-template-columns: 1fr; } .wk-persona { padding: 22px 20px 24px; } }

/* ---------- two column: copy + visual ---------- */
.wk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 960px) { .wk-split { grid-template-columns: 1fr; } }

/* ---------- steps ---------- */
.wk-steps { counter-reset: step; border-top: 1.5px solid currentColor; }
.wk-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 8px 16px; padding: 28px 0; border-bottom: 1.5px solid rgba(255, 255, 255, .16); }
.wk-band--paper .wk-steps li, .wk-band--sunken .wk-steps li { border-bottom-color: var(--wk-line); }
.wk-steps li::before { counter-increment: step; content: "0" counter(step); grid-row: span 2; color: var(--sun-400); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.wk-band--paper .wk-steps li::before, .wk-band--sunken .wk-steps li::before { color: var(--coral-500); }
.wk-steps strong { color: inherit; font-size: clamp(19px, 1.6vw, 22px); font-weight: 800; line-height: 1.35; letter-spacing: -0.025em; }
.wk-band--ink .wk-steps strong { color: var(--paper-0); }
.wk-steps p { font-size: 16px; line-height: 1.65; opacity: .86; }

/* ---------- chat bubbles ---------- */
.wk-chat { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: #2a2721; }
.wk-chat-label { margin-bottom: 4px; color: #bdb6a8; font-size: 13px; font-weight: 700; }
.wk-bubble { max-width: 82%; padding: 13px 18px; border-radius: 20px 20px 20px 6px; background: var(--paper-0); color: var(--ink-900); font-size: 16px; font-weight: 600; line-height: 1.45; }
.wk-bubble--me { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--sun-400); }
.wk-bubble small { display: block; margin-bottom: 2px; color: var(--ink-500); font-size: 12px; font-weight: 700; }
.wk-chat-divider { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: var(--sun-400); font-size: 13px; font-weight: 800; }
.wk-chat-divider::before, .wk-chat-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 210, 63, .4); }
.wk-bubble--live { align-self: center; max-width: 100%; border-radius: 999px; background: var(--lilac-200); color: var(--lilac-700); font-weight: 800; text-align: center; }

/* ---------- rules grid ---------- */
.wk-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink-900); }
.wk-rules li { padding: 28px 24px 8px 0; }
.wk-rules li + li { padding-left: 24px; border-left: 1.5px solid rgba(28, 26, 22, .25); }
.wk-rules strong { display: block; margin-bottom: 8px; color: var(--ink-900); font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.wk-rules p { color: var(--ink-700); font-size: 16px; }
.wk-rules-foot { margin-top: 40px; font-size: 15px; font-weight: 600; }
@media (max-width: 960px) {
  .wk-rules { grid-template-columns: 1fr 1fr; }
  .wk-rules li:nth-child(3) { padding-left: 0; border-left: 0; }
  .wk-rules li:nth-child(n+3) { border-top: 1.5px solid rgba(28, 26, 22, .25); }
}
@media (max-width: 520px) {
  .wk-rules { grid-template-columns: 1fr; }
  .wk-rules li, .wk-rules li + li { padding: 22px 0 18px; border-left: 0; }
  .wk-rules li + li { border-top: 1.5px solid rgba(28, 26, 22, .25); }
}

/* ---------- CTA block ---------- */
.wk-cta { text-align: left; }
.wk-cta-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: end; padding: clamp(32px, 5vw, 72px); border-radius: 32px; background: var(--wk-surface); border: var(--wk-border); }
.wk-cta-card .wk-lead { margin-top: 24px; }
.wk-cta-side { display: flex; flex-direction: column; gap: 12px; }
.wk-cta-side .wk-btn { width: 100%; }
.wk-cta-links { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; font-size: 15px; }
.wk-share-status { min-height: 1.5em; color: var(--wk-text-muted); font-size: 14px; font-weight: 600; }
@media (max-width: 860px) { .wk-cta-card { grid-template-columns: 1fr; } }

/* ---------- org: day calendar ---------- */
.wk-days-card { padding: clamp(24px, 3vw, 36px); border-radius: 32px; background: var(--ink-900); color: var(--paper-100); max-width: 480px; width: 100%; justify-self: end; }
.wk-days-card h3 { margin-bottom: 20px; color: var(--paper-0); font-size: 17px; font-weight: 800; }
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px 8px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wk-day i { width: 100%; max-width: 48px; aspect-ratio: 1; border-radius: 50%; background: var(--sun-400); }
.wk-day:nth-child(3n) i { background: var(--coral-300); }
.wk-day:nth-child(4n) i { background: var(--lilac-500); }
.wk-day:nth-child(5n) i { background: transparent; border: 1.5px dashed #6a6457; }
.wk-day small { color: #bdb6a8; font-size: 11px; font-weight: 700; white-space: nowrap; }
.wk-day--event { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; margin-top: 6px; padding: 14px 18px; border-radius: 16px; background: var(--sun-400); }
.wk-day--event small { color: var(--ink-900); font-size: 15px; font-weight: 800; }
.wk-days-caption { margin-top: 18px; color: #d8d1c3; font-size: 15px; font-weight: 600; }
@media (max-width: 960px) { .wk-days-card { justify-self: start; } }
@media (max-width: 380px) { .wk-days { gap: 8px 5px; } .wk-day small { font-size: 9.5px; } }

/* ---------- org: problem bar ---------- */
.wk-agenda { display: grid; grid-template-columns: 1fr; gap: 10px; }
.wk-agenda-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 14px; }
.wk-agenda-row span { color: var(--ink-500); font-size: 14px; font-weight: 700; }
.wk-agenda-row b { display: block; padding: 14px 18px; border-radius: 12px; background: var(--paper-0); color: var(--ink-900); font-size: 16px; font-weight: 700; border: var(--wk-border); }
.wk-agenda-row--waste b { background: repeating-linear-gradient(-45deg, var(--paper-100) 0 10px, var(--paper-0) 10px 20px); color: var(--ink-500); text-decoration: line-through; text-decoration-color: var(--coral-500); text-decoration-thickness: 2px; }

/* ---------- org: timeline ---------- */
.wk-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid rgba(255, 255, 255, .25); }
.wk-timeline li { position: relative; padding: 36px 24px 8px 0; }
.wk-timeline li + li { padding-left: 24px; border-left: 1.5px solid rgba(255, 255, 255, .16); }
.wk-timeline-chip { display: inline-block; margin-bottom: 18px; padding: 5px 12px; border-radius: 999px; background: var(--sun-400); color: var(--ink-900); font-size: 13px; font-weight: 800; }
.wk-timeline li:last-child .wk-timeline-chip { background: var(--lilac-200); color: var(--lilac-700); }
.wk-timeline strong { display: block; margin-bottom: 10px; color: var(--paper-0); font-size: clamp(19px, 1.6vw, 22px); font-weight: 800; line-height: 1.35; letter-spacing: -0.025em; }
.wk-timeline p { color: #d8d1c3; font-size: 16px; line-height: 1.65; }
@media (max-width: 960px) {
  .wk-timeline { grid-template-columns: 1fr; border-top: 0; border-left: 1.5px solid rgba(255, 255, 255, .25); }
  .wk-timeline li, .wk-timeline li + li { padding: 0 0 36px 28px; border-left: 0; }
  .wk-timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--sun-400); }
}

/* ---------- org: duo problem cards, 3-step timeline, gains ---------- */
.wk-personas--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .wk-personas--duo { grid-template-columns: 1fr; } }
.wk-timeline--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .wk-timeline--3 { grid-template-columns: 1fr; } }
.wk-gains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.wk-gain-label { padding-bottom: 12px; border-bottom: 2px solid var(--ink-900); color: var(--ink-900); font-size: var(--wk-h3); font-weight: 800; letter-spacing: -0.03em; }
.wk-gains + .wk-statement-note { margin-top: 32px; }
@media (max-width: 720px) { .wk-gains { grid-template-columns: 1fr; } }
.wk-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 8px 14px; border-radius: 999px; background: var(--sun-200); color: var(--ink-900); font-size: 15px; font-weight: 800; }
.wk-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral-500); }
.wk-section--tight { padding-block: clamp(48px, 6vw, 72px) 0; }
.wk-class { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; padding: clamp(24px, 4vw, 40px); border: var(--wk-border); border-radius: var(--wk-radius-card); background: var(--wk-surface); }
.wk-class .wk-eyebrow { margin-bottom: 12px; }
.wk-class .wk-small { margin-top: 10px; }
.wk-class-list { display: flex; flex-wrap: wrap; gap: 10px; }
.wk-class-list li { display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--lilac-200); color: var(--lilac-700); }
.wk-class-list strong { font-size: 16px; font-weight: 800; }
.wk-class-list small { font-size: 13px; font-weight: 700; opacity: .85; }
@media (max-width: 760px) { .wk-class { grid-template-columns: 1fr; } }
/* ---------- org: example photo ---------- */
.wk-photo { margin: 0; justify-self: end; width: 100%; max-width: 560px; }
.wk-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 28px; background: var(--wk-sunken); }
.wk-photo figcaption { margin-top: 12px; color: var(--wk-text-muted); font-size: 13px; font-weight: 600; }
@media (max-width: 960px) { .wk-photo { justify-self: start; } }
/* ---------- org: process ---------- */
.wk-process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: proc; }
.wk-process li { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border: var(--wk-border); border-radius: var(--wk-radius-card); background: var(--wk-surface); }
.wk-process li.is-owner { border-color: var(--ink-900); background: var(--sun-200); }
.wk-process-who { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--wk-sunken); color: var(--ink-700); font-size: 12px; font-weight: 800; }
.wk-process li.is-owner .wk-process-who { background: var(--ink-900); color: var(--paper-0); }
.wk-process strong { color: var(--ink-900); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.wk-process strong::before { counter-increment: proc; content: counter(proc) ". "; color: var(--coral-500); }
.wk-process p { color: var(--wk-text-muted); font-size: 15px; line-height: 1.55; }
@media (max-width: 1080px) { .wk-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wk-process { grid-template-columns: 1fr; } }
/* ---------- org: faq + lab line ---------- */
.wk-faq { margin-top: 24px; padding: clamp(24px, 4vw, 40px); border: var(--wk-border); border-radius: var(--wk-radius-card); background: var(--wk-surface); }
.wk-faq h2 { margin-bottom: 8px; }
.wk-faq details { border-bottom: 1px solid var(--wk-line); }
.wk-faq details:last-child { border-bottom: 0; }
.wk-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; color: var(--ink-900); font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.wk-faq summary::-webkit-details-marker { display: none; }
.wk-faq summary::after { content: "+"; flex: 0 0 auto; color: var(--ink-500); font-size: 22px; line-height: 1; }
.wk-faq details[open] summary::after { content: "−"; }
.wk-faq details p { padding: 0 0 18px; color: var(--ink-700); font-size: 16px; line-height: 1.6; }
.wk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- org: solution scene ---------- */
.wk-solution { margin-bottom: 8px; align-items: center; }
.wk-gains--stack { grid-template-columns: 1fr; }
.wk-lab-line { margin-top: 24px; color: var(--ink-700); font-size: 15px; font-weight: 600; }
/* ---------- statement band ---------- */
.wk-statement { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.wk-checks li { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1.5px solid rgba(28, 26, 22, .2); color: var(--ink-900); font-size: 17px; font-weight: 600; line-height: 1.5; }
.wk-checks li::before { content: ""; flex: 0 0 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--ink-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.5L14 7.5' fill='none' stroke='%23FFD23F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.wk-statement-note { margin-top: 20px; color: var(--ink-900); font-size: 15px; font-weight: 600; }
@media (max-width: 860px) { .wk-statement { grid-template-columns: 1fr; } }

/* ---------- org switch ---------- */
.wk-orgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wk-org { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: var(--wk-border); border-radius: var(--wk-radius-card); background: var(--wk-surface); color: var(--ink-900); text-decoration: none; transition: transform 300ms var(--wk-ease), border-color 300ms var(--wk-ease); }
.wk-org strong { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.wk-org span { color: var(--wk-text-muted); font-size: 15px; }
.wk-org[aria-current="page"] { border-color: var(--ink-900); background: var(--sun-200); }
@media (hover: hover) and (pointer: fine) { .wk-org:hover { transform: translateY(-4px); border-color: var(--ink-900); } }
@media (max-width: 720px) { .wk-orgs { grid-template-columns: 1fr; } }

/* ---------- sticky mobile CTA ---------- */
.wk-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 12px var(--wk-gutter) max(12px, env(safe-area-inset-bottom)); background: rgba(251, 248, 241, .96); border-top: 1.5px solid var(--wk-line); backdrop-filter: blur(12px); transform: translateY(110%); transition: transform 300ms var(--wk-ease); }
.wk-sticky-cta.is-visible { transform: none; }
.wk-sticky-cta .wk-btn { width: 100%; }
@media (min-width: 761px) { .wk-sticky-cta { display: none; } }
@media (max-width: 760px) { body.wk.has-sticky-cta { padding-bottom: 84px; } }

/* ---------- reveal ---------- */
.wk-js .wk-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--wk-enter) var(--wk-ease), transform var(--wk-enter) var(--wk-ease); }
.wk-js .wk-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wk-js .wk-reveal { opacity: 1; transform: none; transition: none; }
  .wk-btn, .wk-btn .wk-arrow, .wk-persona, .wk-org, .wk-sticky-cta { transition: none; }
}

@media (max-width: 360px) { .wk-hero .wk-display { font-size: 34px; } }

/* ==========================================================================
   Org pages v0.8 — buyer-facing type scale, overview spec sheet, voices,
   storyboard, report document. Spec: docs/DECISIONS.md 2026-09-28 v0.8 row.
   ========================================================================== */
.wk-hero .wk-display--org { font-size: clamp(38px, 5.4vw, 76px); line-height: 1.1; letter-spacing: -0.04em; }
.wk-h2--org { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.22; letter-spacing: -0.035em; }

/* ---------- overview spec sheet ---------- */
.wk-overview { padding-block: 0 clamp(56px, 7vw, 96px); }
.wk-overview-card { padding: clamp(24px, 4vw, 48px); border: var(--wk-border); border-radius: 28px; background: var(--wk-surface); }
.wk-overview-head .wk-eyebrow { margin-bottom: 14px; }
.wk-overview-title { max-width: 920px; color: var(--ink-900); font-size: clamp(19px, 1.8vw, 24px); font-weight: 700; line-height: 1.55; letter-spacing: -0.025em; }
.wk-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(28px, 3.5vw, 40px) 0 0; border-top: 2px solid var(--ink-900); }
.wk-specs div { padding: 22px 20px 4px; }
.wk-specs div:first-child { padding-left: 0; }
.wk-specs div + div { border-left: 1.5px solid var(--wk-line); }
.wk-specs dt { color: var(--wk-text-muted); font-size: 13px; font-weight: 700; }
.wk-specs dd { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; }
.wk-specs b { color: var(--ink-900); font-size: clamp(36px, 4.2vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; }
.wk-specs span { color: var(--ink-700); font-size: 14px; font-weight: 600; line-height: 1.45; }
.wk-meta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, .8fr); gap: 12px 24px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--wk-line); }
.wk-meta div { display: flex; gap: 12px; align-items: baseline; }
.wk-meta dt { flex: 0 0 auto; color: var(--wk-text-muted); font-size: 13px; font-weight: 700; }
.wk-meta dd { margin: 0; color: var(--ink-900); font-size: 15px; font-weight: 700; line-height: 1.45; }
.wk-badge--inline { margin: 0; padding: 4px 10px; font-size: 13px; }
@media (max-width: 860px) {
  .wk-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-specs div:nth-child(3) { padding-left: 0; border-left: 0; }
  .wk-specs div:nth-child(n+3) { border-top: 1px solid var(--wk-line); margin-top: 18px; }
  .wk-meta { grid-template-columns: 1fr; }
}
@media (max-width: 400px) { .wk-specs div { padding-inline: 12px 0; } .wk-specs b { font-size: 32px; } }

/* ---------- voices (buyer + participant pain points) ---------- */
.wk-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wk-voice { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 36px); border-radius: var(--wk-radius-card); background: var(--wk-surface); border: var(--wk-border); }
.wk-voice--buyer { background: var(--ink-900); border-color: var(--ink-900); color: #d8d1c3; }
.wk-voice-tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--lilac-200); color: var(--lilac-700); font-size: 13px; font-weight: 800; }
.wk-voice--buyer .wk-voice-tag { background: var(--sun-400); color: var(--ink-900); }
.wk-voice-quote { color: var(--ink-900); font-size: clamp(21px, 2vw, 27px); font-weight: 800; line-height: 1.4; letter-spacing: -0.035em; }
.wk-voice--buyer .wk-voice-quote { color: var(--paper-0); }
.wk-voice-body { font-size: 16px; line-height: 1.7; }
.wk-voice-needs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--wk-line); }
.wk-voice--buyer .wk-voice-needs { border-top-color: rgba(255, 255, 255, .16); }
.wk-voice-needs small { width: 100%; color: var(--wk-text-muted); font-size: 12px; font-weight: 800; }
.wk-voice--buyer .wk-voice-needs small { color: #bdb6a8; }
.wk-voice-needs span { padding: 6px 12px; border-radius: 999px; background: var(--wk-sunken); color: var(--ink-900); font-size: 14px; font-weight: 700; }
.wk-voice--buyer .wk-voice-needs span { background: rgba(255, 255, 255, .1); color: var(--paper-0); }
@media (max-width: 860px) { .wk-voices { grid-template-columns: 1fr; } }

/* ---------- storyboard (3 scenes) ---------- */
.wk-storyboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.wk-sb { margin: 0; }
.wk-sb-frame { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; padding: 16px; overflow: hidden; border-radius: 24px; background-color: var(--ink-700); background-size: 300% auto; background-repeat: no-repeat; box-shadow: 0 24px 48px -28px rgba(28, 26, 22, .55); isolation: isolate; }
.wk-sb-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 26, 22, .05) 30%, rgba(28, 26, 22, .5) 100%); }
.wk-sb-frame--dark { justify-content: center; }
.wk-sb-frame--dark::before { background: rgba(28, 26, 22, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.wk-sb-frame--soft::before { background: rgba(251, 248, 241, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wk-sb-when { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink-700); font-size: 12px; font-weight: 700; }
.wk-sb-when b { padding: 3px 9px; border-radius: 999px; background: var(--ink-900); color: var(--sun-400); font-weight: 800; }
.wk-sb-post, .wk-sb-sheet { padding: 14px 16px; border-radius: 18px; background: var(--paper-0); color: var(--ink-900); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .45); }
.wk-sb-post-head { display: flex; justify-content: space-between; color: var(--ink-500); font-size: 12px; font-weight: 700; }
.wk-sb-post-head b { color: var(--ink-900); }
.wk-sb-post-text { margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.wk-sb-post-react { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--ink-500); font-size: 12px; font-weight: 700; }
.wk-sb-reply { margin-top: 10px; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--wk-sunken); font-size: 14px; font-weight: 600; line-height: 1.45; }
.wk-sb-reply small { display: block; color: var(--ink-500); font-size: 11px; font-weight: 700; }
.wk-sb-reply--me { margin-left: 18%; border-radius: 14px 14px 4px 14px; background: var(--sun-400); }
.wk-sb-meet { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.wk-sb-tag { padding: 5px 12px; border-radius: 6px; background: var(--paper-0); color: var(--ink-900); font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.wk-sb-meet p { position: relative; padding: 16px 22px; border-radius: 22px; background: var(--lilac-200); color: var(--lilac-700); font-size: clamp(18px, 1.7vw, 22px); font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; }
.wk-sb-meet p::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.wk-sb-sheet-title { font-size: 15px; font-weight: 800; }
.wk-sb-choice { display: flex; gap: 8px; margin-top: 12px; }
.wk-sb-choice span { flex: 1; padding: 9px 0; border-radius: 12px; background: var(--wk-sunken); color: var(--ink-500); font-size: 14px; font-weight: 800; text-align: center; }
.wk-sb-choice .is-on { background: var(--ink-900); color: var(--paper-0); }
.wk-sb figcaption { display: flex; gap: 12px; margin-top: 16px; color: var(--ink-900); font-size: 15px; font-weight: 600; line-height: 1.55; }
.wk-sb-step { flex: 0 0 auto; padding-top: 1px; font-size: 15px; font-weight: 800; }
.wk-sb-note { margin-top: 20px; color: var(--ink-700); font-size: 13px; font-weight: 600; }
@media (max-width: 900px) {
  .wk-storyboard { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(270px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--wk-gutter)); padding: 4px var(--wk-gutter) 12px; scrollbar-width: none; }
  .wk-storyboard::-webkit-scrollbar { display: none; }
  .wk-sb { scroll-snap-align: start; }
}

/* ---------- compare gains ---------- */
.wk-gains--compare { margin-top: clamp(48px, 6vw, 72px); }

/* ---------- report ---------- */
.wk-report-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.wk-report-spec { margin: 32px 0 0; border-top: 2px solid var(--ink-900); }
.wk-report-spec div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--wk-line); }
.wk-report-spec dt { padding-top: 5px; color: var(--wk-text-muted); font-size: 13px; font-weight: 700; }
.wk-report-spec dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.wk-report-spec span { padding: 5px 11px; border-radius: 8px; background: var(--wk-sunken); color: var(--ink-900); font-size: 14px; font-weight: 700; }
@media (max-width: 960px) { .wk-report-grid { grid-template-columns: 1fr; } }

.wk-px { display: inline-block; height: .95em; vertical-align: -.12em; border-radius: 3px; background: repeating-conic-gradient(#d6ccb9 0 25%, #c4b9a3 0 50%) 0 0 / 8px 8px; filter: blur(.3px); }
.wk-rpt { position: relative; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--wk-line); border-top: 6px solid var(--ink-900); border-radius: 6px 6px 14px 14px; background: var(--paper-0); color: var(--ink-900); box-shadow: 10px 12px 0 -1px var(--paper-0), 10px 12px 0 0 var(--paper-200), 0 40px 64px -36px rgba(28, 26, 22, .45); font-size: 13px; line-height: 1.45; }
.wk-rpt-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wk-rpt-brand { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.wk-rpt-brand span { display: block; margin-top: 2px; color: var(--ink-500); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.wk-rpt-stamp { flex: 0 0 auto; padding: 4px 10px; border: 1.5px solid var(--coral-700); border-radius: 6px; color: var(--coral-700); font-size: 12px; font-weight: 800; transform: rotate(-4deg); }
.wk-rpt-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; margin: 18px 0 0; padding: 12px 0; border-block: 1px solid var(--wk-line); }
.wk-rpt-meta dt { color: var(--ink-500); font-size: 11px; font-weight: 700; }
.wk-rpt-meta dd { margin: 2px 0 0; font-size: 13px; font-weight: 700; white-space: nowrap; }
.wk-rpt-sec { padding-top: 18px; }
.wk-rpt-sec h3 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 800; }
.wk-rpt-sec h3 span { color: var(--coral-500); font-size: 12px; }
.wk-rpt-sec h3 small { margin-left: auto; color: var(--ink-500); font-size: 11px; font-weight: 600; }
.wk-rpt-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wk-rpt-kpis div { padding: 12px 14px; border-radius: 10px; background: var(--paper-50); border: 1px solid var(--wk-line); }
.wk-rpt-kpis small { display: block; color: var(--ink-500); font-size: 11px; font-weight: 700; }
.wk-rpt-kpis b { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; font-size: 26px; font-weight: 800; line-height: 1; }
.wk-rpt-kpis em { color: var(--ink-500); font-size: 13px; font-style: normal; font-weight: 700; }
.wk-rpt-chart { margin-top: 10px; padding: 12px 14px 8px; border-radius: 10px; border: 1px solid var(--wk-line); }
.wk-rpt-chart small { color: var(--ink-500); font-size: 11px; font-weight: 700; }
.wk-rpt-chart ol { display: flex; align-items: flex-end; gap: 4px; height: 72px; margin-top: 8px; border-bottom: 1px solid var(--paper-200); }
.wk-rpt-chart li { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--sun-400); }
.wk-rpt-chart li.is-last { background: var(--coral-500); }
.wk-rpt-chart p { display: flex; justify-content: space-between; margin-top: 4px; color: var(--ink-500); font-size: 10px; font-weight: 700; }
.wk-rpt-survey li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 2.2em; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--paper-200); font-size: 12px; font-weight: 600; }
.wk-rpt-stack { display: flex; height: 10px; overflow: hidden; border-radius: 999px; }
.wk-rpt-stack b:nth-child(1) { background: var(--paper-200); }
.wk-rpt-stack b:nth-child(2) { background: var(--lilac-200); }
.wk-rpt-stack b:nth-child(3) { background: var(--lilac-500); }
.wk-rpt-stack b:nth-child(4) { background: var(--lilac-700); }
.wk-rpt-sec--split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }
.wk-rpt-donut { display: flex; align-items: center; gap: 14px; }
.wk-rpt-donut > i { flex: 0 0 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, var(--paper-0) 52%, transparent 53%), conic-gradient(var(--lilac-700) 0 68%, var(--paper-100) 0); }
.wk-rpt-donut p { font-size: 22px; font-weight: 800; }
.wk-rpt-donut small { display: block; margin-bottom: 6px; color: var(--ink-500); font-size: 11px; font-weight: 700; }
.wk-rpt-donut em { margin-left: 3px; color: var(--ink-500); font-size: 13px; font-style: normal; }
.wk-rpt-quote { padding: 10px 12px; border-left: 3px solid var(--sun-400); background: var(--paper-50); }
.wk-rpt-quote + .wk-rpt-quote { margin-top: 6px; }
.wk-rpt-quote .wk-px { display: block; height: 9px; }
.wk-rpt-quote .wk-px + .wk-px { margin-top: 6px; }
.wk-rpt-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--wk-line); color: var(--ink-500); font-size: 11px; font-weight: 600; }
@media (max-width: 560px) {
  .wk-rpt-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-rpt-kpis { grid-template-columns: 1fr; }
  .wk-rpt-kpis div { display: flex; justify-content: space-between; align-items: center; }
  .wk-rpt-kpis b { margin-top: 0; font-size: 22px; }
  .wk-rpt-survey li { grid-template-columns: 1fr 2.2em; }
  .wk-rpt-survey li > span { grid-column: 1 / -1; }
  .wk-rpt-sec--split { grid-template-columns: 1fr; }
}
.wk-sb-frame--photo { background-size: cover; background-position: center; }
.wk-sb-frame--photo.wk-sb-frame--soft::before { background: linear-gradient(180deg, rgba(28, 26, 22, 0) 35%, rgba(28, 26, 22, .45) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; }
.wk-sb-frame--photo.wk-sb-frame--dark::before { background: rgba(28, 26, 22, .28); backdrop-filter: none; -webkit-backdrop-filter: none; }
.wk-logline { max-width: 920px; color: var(--ink-900); font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; }
.wk-logline + .wk-overview-title { margin-top: 16px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; color: var(--ink-700); }

/* ---------- org v0.9: add-on row, strong CTA, reviews marquee ---------- */
.wk-addon { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 28px; padding: 18px 22px; border: 1.5px dashed rgba(28, 26, 22, .28); border-radius: 16px; }
.wk-addon-tag { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--lilac-200); color: var(--lilac-700); font-size: 12px; font-weight: 800; }
.wk-addon-body { flex: 1 1 360px; }
.wk-addon h3 { color: var(--ink-900); font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.wk-addon p { margin-top: 2px; color: var(--ink-700); font-size: 14px; line-height: 1.55; }

.wk-cta-card--strong { background: var(--ink-900); border-color: var(--ink-900); color: #d8d1c3; box-shadow: 0 40px 80px -40px rgba(28, 26, 22, .6); }
.wk-cta-card--strong .wk-eyebrow, .wk-cta-card--strong .wk-textlink { color: var(--sun-400); }
.wk-cta-card--strong .wk-h2 { color: var(--paper-0); }
.wk-cta-card--strong .wk-lead { color: #d8d1c3; }
.wk-cta-card--strong .wk-small { color: #bdb6a8; }
.wk-cta-card--strong .wk-btn--ghost { color: var(--paper-0); }
.wk-btn--xl { min-height: 68px; font-size: 19px; box-shadow: 0 12px 28px -12px rgba(255, 210, 63, .7); }
.wk-cta-points { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 6px; }
.wk-cta-points li { display: inline-flex; align-items: center; gap: 6px; color: var(--paper-100); font-size: 14px; font-weight: 600; }
.wk-cta-points li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--sun-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.5L14 7.5' fill='none' stroke='%231c1a16' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

.wk-reviews { margin-block: clamp(40px, 5vw, 64px) 8px; overflow: hidden; }
.wk-reviews-head { margin-bottom: 24px; }
.wk-reviews-head .wk-eyebrow { margin-bottom: 12px; }
.wk-reviews-head .wk-small { margin-top: 8px; }
.wk-marquee { display: flex; width: max-content; padding-block: 10px; }
.wk-marquee + .wk-marquee { margin-top: 4px; }
.wk-marquee-track { display: flex; gap: 16px; padding-right: 16px; animation: wk-marquee 70s linear infinite; }
.wk-marquee--right .wk-marquee-track { animation-direction: reverse; animation-duration: 80s; }
.wk-marquee:hover .wk-marquee-track { animation-play-state: paused; }
@keyframes wk-marquee { to { transform: translateX(-100%); } }
.wk-note { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; width: 300px; padding: 20px 22px 16px; border-radius: 6px; background: var(--paper-0); box-shadow: 0 1px 0 var(--paper-200), 0 14px 28px -18px rgba(28, 26, 22, .35); transform: rotate(-1deg); }
.wk-note--1 { transform: rotate(.8deg); background: #fffdf6; }
.wk-note--2 { transform: rotate(-.4deg); }
.wk-note--3 { transform: rotate(1.2deg); background: #fffdf6; }
.wk-note-text { color: #24324f; font-family: "Nanum Pen Script", var(--wk-font); font-size: 25px; line-height: 1.3; letter-spacing: 0; word-break: keep-all; }
.wk-note-by { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wk-note-name { padding: 3px 10px; border: 2px solid var(--coral-500); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--paper-0), inset 0 0 0 3.5px var(--coral-500); color: var(--ink-900); font-size: 13px; font-weight: 800; }
.wk-note-by small { color: var(--ink-500); font-size: 11px; font-weight: 700; }
@media (max-width: 600px) { .wk-note { width: 250px; } .wk-note-text { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) {
  .wk-marquee { width: auto; overflow-x: auto; padding-inline: var(--wk-gutter); }
  .wk-marquee-track { animation: none; }
  .wk-marquee-track[aria-hidden="true"] { display: none; }
}
.wk-reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.wk-reviews-stat { display: flex; align-items: center; gap: 14px; max-width: 460px; padding: 14px 18px; border-radius: 14px; background: var(--sun-200); color: var(--ink-900); font-size: 14px; font-weight: 600; line-height: 1.5; }
.wk-reviews-stat b { flex: 0 0 auto; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.wk-reviews-stat em { font-style: normal; font-weight: 800; }
.wk-reviews-note { margin-top: 14px; }
.wk-note--pre { border-top: 4px solid var(--sun-400); }
.wk-note-flow { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--lilac-200); color: var(--lilac-700); font-size: 12px; font-weight: 800; }
.wk-note-flow b { font-weight: 800; }
.wk-note-src { color: var(--ink-700); font-size: 12px; font-weight: 800; }
.wk-note--pre .wk-note-text { font-size: 23px; }
.wk-beta { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 20px 40px; align-items: center; margin-top: 24px; padding: clamp(24px, 3.5vw, 36px); border-radius: var(--wk-radius-card); background: var(--lilac-200); }
.wk-beta .wk-eyebrow { margin-bottom: 10px; }
.wk-beta .wk-small { margin-top: 8px; color: var(--ink-700); }
.wk-beta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) { .wk-beta { grid-template-columns: 1fr; } }