/* ===================================================================
   keyserp — main stylesheet
   Purple gradient tech aesthetic
   English-first, i18n-ready
   =================================================================== */

/* -------------------------------------------------------------------
   1. Design tokens — LIGHT THEME (white + blue + yellow accent)
   ------------------------------------------------------------------- */
:root {
	/* === 서피스 (화이트 베이스) === */
	--c-base: #ffffff;
	--c-elevated: #f7f9fc;
	--c-overlay: #eef2f7;
	--c-card: #ffffff;

	/* === 텍스트 (다크 on 화이트) === */
	--c-text: #1a1a1a;
	--c-text-secondary: #4a4a4a;
	--c-text-muted: #707070;
	--c-text-disabled: #b0b0b0;

	/* === 브랜드 블루 (primary) === */
	--c-blue-50:  #e6f0fa;
	--c-blue-100: #c2dcf3;
	--c-blue-200: #92c0e9;
	--c-blue-300: #5da3df;
	--c-blue-400: #2d83cf;
	--c-blue-500: #0055b1;
	--c-blue-600: #004a99;
	--c-blue-700: #003c7d;
	--c-blue-800: #002d61;
	--c-blue-900: #001f44;

	/* === 옐로 (accent — BEST/POPULAR/highlights) === */
	--c-yellow-300: #ffe782;
	--c-yellow-400: #ffda47;
	--c-yellow-500: #f0c020;
	--c-yellow-600: #d4a300;

	/* === 컴포넌트 색상 별칭 (Phase 1 코드 호환) === */
	--c-purple-300: #5da3df;
	--c-purple-400: #2d83cf;
	--c-purple-500: #0055b1;
	--c-purple-600: #004a99;
	--c-purple-700: #003c7d;

	/* === 보조 컬러 === */
	--c-cyan-400:   #38bdf8;
	--c-cyan-500:   #0ea5e9;
	--c-indigo-500: #1e3a8a;
	--c-pink-500:   #db2777;

	/* === 시스템 === */
	--c-success: #16a34a;
	--c-warning: #f59e0b;
	--c-error:   #dc2626;
	--c-info:    #0055b1;

	/* === 보더 (다크 화이트 컨트라스트) === */
	--border-subtle:  rgba(0, 0, 0, 0.06);
	--border-default: rgba(0, 0, 0, 0.12);
	--border-strong:  rgba(0, 0, 0, 0.20);

	/* === 그라데이션 === */
	--gradient-hero:         linear-gradient(135deg, #0055b1 0%, #0080d5 50%, #38bdf8 100%);
	--gradient-button:       linear-gradient(90deg, #0055b1 0%, #003c7d 100%);
	--gradient-button-hover: linear-gradient(90deg, #003c7d 0%, #001f44 100%);
	--gradient-card:         linear-gradient(180deg, rgba(0, 85, 177, 0.04) 0%, rgba(0, 85, 177, 0) 100%);
	--gradient-text:         linear-gradient(90deg, #0055b1 0%, #0080d5 100%);
	--gradient-border:       linear-gradient(135deg, rgba(0, 85, 177, .6), rgba(255, 218, 71, .4));
	--gradient-yellow:       linear-gradient(90deg, #ffda47 0%, #f0c020 100%);

	/* === 섀도 (소프트 라이트 톤) === */
	--shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.12);
	--shadow-glow:  0 0 24px rgba(0, 85, 177, 0.18);
	--shadow-glow-strong: 0 0 40px rgba(0, 85, 177, 0.30);

	--font-sans: 'Inter', 'Pretendard Variable', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-32: 128px;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 9999px;

	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-spring: cubic-bezier(.5, 1.6, .4, 1);
	--duration-fast: 150ms;
	--duration-normal: 250ms;
	--duration-slow: 400ms;

	--container-max: 1280px;
	--container-pad: clamp(1rem, 4vw, 2rem);
}

/* -------------------------------------------------------------------
   2. Reset / normalize
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
	margin: 0;
	background: var(--c-base);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	min-height: 100vh;
	overflow-x: hidden;
}
img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--c-purple-400); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--c-purple-300); }
:focus-visible { outline: 2px solid var(--c-purple-400); outline-offset: 3px; border-radius: 4px; }

/* -------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--c-text); }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.2; }
h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 1em; color: var(--c-text-secondary); }
small { font-size: 0.875rem; color: var(--c-text-muted); }
code, pre, kbd, samp { font-family: var(--font-mono); }
strong, b { font-weight: 700; color: var(--c-text); }

.gradient-text {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.heading { color: var(--c-text); }
.heading--xl { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.heading--lg { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 700; }
.heading--md { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; }
.subheading { color: var(--c-text-secondary); font-size: 1.125rem; font-weight: 400; max-width: 65ch; }

/* -------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------- */
.container, .wp-block-group.is-layout-constrained > .alignwide { max-width: var(--container-max); margin-inline: auto; }
/* Site main — header sits directly above hero on every page.
   The hero section is responsible for its own top padding so it never
   has a white gap between the nav band and the colored hero. */
.site-main {
    padding-block: 0;
    margin-block-start: 0 !important;  /* defeat WP :where(.wp-site-blocks) > * { margin-block-start: 24px; } */
    margin-block-end: 0 !important;
}
.site-main--front { padding-block: 0; }

/* Make every hero generous enough to fill the visual space the gap used to occupy */
.ks-apply-hero,
.page-hero {
    padding-top: 72px !important;
    padding-bottom: 56px !important;
}

section { padding-block: clamp(3rem, 8vw, 6rem); padding-inline: var(--container-pad); }
section + section { padding-block-start: 0; }

/* -------------------------------------------------------------------
   5. Site Header
   ------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--border-subtle);
	padding-inline: var(--container-pad);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.site-header__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--space-4);
}
.site-header__logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--c-text);
}
.site-header__logo:hover { color: var(--c-text); }
.site-header__logo-mark { color: var(--c-purple-400); font-size: 1.5rem; }
.site-header__nav { flex: 1; display: flex; justify-content: center; }
.site-nav { display: flex; gap: var(--space-6); }
.site-nav a {
	color: var(--c-text-secondary);
	font-weight: 500;
	font-size: 0.9375rem;
	padding: var(--space-2) 0;
	position: relative;
}
.site-nav a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--gradient-button);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--duration-normal) var(--ease-out);
}
.site-nav a:hover { color: var(--c-text); }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); }
.site-header__right { display: flex; align-items: center; gap: var(--space-3); }
.site-header__menu-toggle { display: none; width: 28px; height: 28px; position: relative; }
.site-header__menu-toggle span {
	position: absolute; left: 4px; right: 4px; height: 2px;
	background: var(--c-text); border-radius: 2px;
	transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-fast);
}
.site-header__menu-toggle span:nth-child(1) { top: 7px; }
.site-header__menu-toggle span:nth-child(2) { top: 13px; }
.site-header__menu-toggle span:nth-child(3) { top: 19px; }
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-header__mobile {
	border-top: 1px solid var(--border-subtle);
	padding: var(--space-4) var(--container-pad);
	background: var(--c-elevated);
}
.site-nav--mobile { flex-direction: column; gap: var(--space-2); }
.site-nav--mobile a { display: block; padding: var(--space-3) 0; font-size: 1rem; }

/* -------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.005em;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform var(--duration-fast) var(--ease-out),
				background var(--duration-normal) var(--ease-out),
				box-shadow var(--duration-normal) var(--ease-out),
				color var(--duration-fast) var(--ease-out);
	text-decoration: none;
	line-height: 1;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
	background: var(--gradient-button);
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 85, 177, .25);
}
.btn--primary:hover {
	background: var(--gradient-button-hover);
	color: #fff;
	box-shadow: var(--shadow-glow);
	transform: translateY(-1px);
}
.btn--ghost {
	background: transparent;
	color: var(--c-text);
	border-color: var(--border-default);
}
.btn--ghost:hover {
	background: var(--c-overlay);
	border-color: var(--border-strong);
	color: var(--c-text);
}
.btn--lg { padding: var(--space-4) var(--space-8); font-size: 1rem; }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: 0.8125rem; }
.btn--full { width: 100%; }
.btn--full-width {
	width: 100%;
	padding: var(--space-5) var(--space-6);
	font-size: 1.0625rem;
	font-weight: 600;
	background: var(--gradient-button);
	color: #fff;
	box-shadow: var(--shadow-glow);
	border-radius: var(--radius-lg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	white-space: nowrap;
	letter-spacing: -0.005em;
}

/* -------------------------------------------------------------------
   7. Hero section
   ------------------------------------------------------------------- */
.hero {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 4.5rem);
	padding-inline: var(--container-pad);
	overflow: hidden;
}
.hero__inner {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
	position: relative;
	z-index: 2;
}
.hero__eyebrow {
	display: inline-block;
	color: var(--c-purple-300);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: var(--space-2) var(--space-4);
	background: rgba(139, 92, 246, 0.1);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-6);
}
.hero__title {
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin-bottom: var(--space-6);
}
.hero__sub {
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: var(--c-text-secondary);
	max-width: 600px;
	margin: 0 auto var(--space-10);
}
.hero__cta {
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--space-6);
}
.hero__trust {
	font-size: 0.875rem;
	color: var(--c-text-muted);
	margin: 0;
}
.hero__orb {
	position: absolute;
	top: -300px;
	right: -200px;
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(0, 85, 177, 0.10) 0%, rgba(255, 218, 71, 0.06) 50%, rgba(0, 85, 177, 0) 75%);
	filter: blur(60px);
	z-index: 0;
	animation: orb-float 8s ease-in-out infinite alternate;
	pointer-events: none;
}
.hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 85, 177, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 85, 177, 0.045) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 0%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 0%, transparent 100%);
	z-index: 0;
	pointer-events: none;
}
@keyframes orb-float {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(-50px, 50px) scale(1.15); }
}

/* -------------------------------------------------------------------
   8. Stats grid
   ------------------------------------------------------------------- */
.stats {
	padding-inline: var(--container-pad);
}
.stats__grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	padding: var(--space-8);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
}
.stat { text-align: center; }
.stat__num {
	font-family: var(--font-mono);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--c-text);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.stat__label {
	color: var(--c-text-muted);
	font-size: 0.875rem;
	margin-top: var(--space-1);
}

/* -------------------------------------------------------------------
   9. Features grid
   ------------------------------------------------------------------- */
.features { padding-inline: var(--container-pad); }
.section-header { max-width: 720px; margin: 0 auto var(--space-12); text-align: center; }
.section-header h2 { margin-bottom: var(--space-3); }
.features__grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-6);
}
.feature-card {
	padding: var(--space-8);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
	transition: transform var(--duration-normal) var(--ease-out),
				border-color var(--duration-normal) var(--ease-out),
				box-shadow var(--duration-normal) var(--ease-out);
}
.feature-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--gradient-card);
	opacity: 0;
	transition: opacity var(--duration-normal) var(--ease-out);
	pointer-events: none;
}
.feature-card:hover {
	transform: translateY(-4px);
	border-color: var(--border-strong);
	box-shadow: var(--shadow-glow);
}
.feature-card:hover::before { opacity: 1; }
.feature-card__icon {
	font-size: 2rem;
	margin-bottom: var(--space-4);
}
.feature-card__title { margin-bottom: var(--space-3); }
.feature-card__body { color: var(--c-text-secondary); margin: 0; }

/* -------------------------------------------------------------------
   10. CTA section
   ------------------------------------------------------------------- */
.cta {
	padding-inline: var(--container-pad);
}
.cta__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--space-16) var(--space-8);
	text-align: center;
	background: var(--gradient-hero);
	border-radius: var(--radius-xl);
	position: relative;
	overflow: hidden;
}
.cta__inner::after {
	content: '';
	position: absolute;
	inset: 1px;
	border-radius: calc(var(--radius-xl) - 1px);
	background: var(--c-elevated);
	z-index: 0;
}
.cta__inner > * { position: relative; z-index: 1; }
.cta__inner h2, .cta__inner .subheading { color: var(--c-text); }
.cta__inner .subheading { margin: var(--space-3) auto var(--space-8); }

/* -------------------------------------------------------------------
   11. Site Footer
   ------------------------------------------------------------------- */
.site-footer {
	margin-top: var(--space-24);
	padding-inline: var(--container-pad);
	padding-block: var(--space-16) var(--space-8);
	background: var(--c-elevated);
	border-top: 1px solid var(--border-subtle);
}
.site-footer__top {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--space-12);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-bottom: var(--space-12);
}
.site-footer__brand { max-width: 320px; }
.site-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--c-text);
	margin-bottom: var(--space-4);
}
.site-footer__logo-mark { color: var(--c-purple-400); font-size: 1.5rem; }
.site-footer__tagline { color: var(--c-text-muted); font-size: 0.875rem; margin: 0; }
.site-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-8);
}
.site-footer__col h4 {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-text-muted);
	margin-bottom: var(--space-4);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__col a { color: var(--c-text-secondary); font-size: 0.875rem; }
.site-footer__col a:hover { color: var(--c-text); }
.site-footer__bottom {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-subtle);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.site-footer__copy, .site-footer__meta { margin: 0; color: var(--c-text-muted); font-size: 0.8125rem; }

/* -------------------------------------------------------------------
   12. Form elements (used by /start, /credits, /signup, etc.)
   ------------------------------------------------------------------- */
.field { margin-bottom: var(--space-5); }
.field__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-text);
	margin-bottom: var(--space-2);
}
.field__hint {
	display: block;
	font-size: 0.8125rem;
	color: var(--c-text-muted);
	margin-bottom: var(--space-2);
}
.field__control input[type="text"],
.field__control input[type="email"],
.field__control input[type="tel"],
.field__control input[type="number"],
.field__control input[type="url"],
.field__control input[type="password"],
.field__control select,
.field__control textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	/* AU-15 — empty inputs stay white so they read as "type here", not "disabled". */
	background: #fff;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	color: var(--c-text);
	font-size: 0.9375rem;
	transition: border-color var(--duration-fast) var(--ease-out),
				box-shadow var(--duration-fast) var(--ease-out),
				background var(--duration-fast) var(--ease-out);
}
.field__control input.is-error,
.field__control textarea.is-error {
	border-color: var(--c-error, #dc2626);
	background: #fff;
}
.field__control input.is-verified {
	border-color: #16a34a;
	background: #f0fdf4;
}
.field__hint--error {
	color: var(--c-error, #dc2626);
	font-size: 0.8125rem;
	margin-top: var(--space-1);
}
/* The native [hidden] attribute is normally `display:none`, but our explicit
   `.field__hint { display:block }` rule above overrides it. Re-assert it here
   so `<p hidden>` works on every hint variant. */
.field__hint[hidden],
.field__hint--error[hidden],
[hidden] {
	display: none !important;
}
.field__control input::placeholder, .field__control textarea::placeholder {
	color: var(--c-text-disabled);
}
.field__control input:focus, .field__control select:focus, .field__control textarea:focus {
	outline: none;
	border-color: var(--c-blue-500);
	box-shadow: 0 0 0 3px rgba(0, 85, 177, 0.18);
}
.field__error { display: block; color: var(--c-error); font-size: 0.8125rem; margin-top: var(--space-1); }

/* Custom switch (.toggle-btn 패턴) */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__slider {
	position: absolute; inset: 0;
	background: var(--c-overlay);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-full);
	transition: background var(--duration-fast) var(--ease-out);
}
.switch__slider::before {
	content: '';
	position: absolute;
	left: 2px; top: 2px;
	width: 18px; height: 18px;
	background: var(--c-text-secondary);
	border-radius: 50%;
	transition: transform var(--duration-normal) var(--ease-spring),
				background var(--duration-fast) var(--ease-out);
}
.switch input:checked + .switch__slider {
	background: var(--gradient-button);
	border-color: transparent;
	box-shadow: 0 0 12px rgba(0, 85, 177, 0.30);
}
.switch input:checked + .switch__slider::before {
	transform: translateX(20px);
	background: #fff;
}

/* -------------------------------------------------------------------
   13. Cards & option groups (for /start radio cards)
   ------------------------------------------------------------------- */
.option-group {
	margin-bottom: var(--space-6);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.option-group__title {
	padding: var(--space-4) var(--space-5);
	background: var(--c-overlay);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-text-secondary);
	border-bottom: 1px solid var(--border-subtle);
}
.option-group__body { padding: var(--space-2); }
.option-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-out);
}
.option-card:hover { background: var(--c-overlay); }
.option-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.option-card__radio {
	width: 20px; height: 20px;
	border: 2px solid var(--border-strong);
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	transition: border-color var(--duration-fast);
}
.option-card__radio::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--gradient-button);
	transform: scale(0);
	transition: transform var(--duration-normal) var(--ease-spring);
}
.option-card input[type="radio"]:checked ~ .option-card__radio {
	border-color: var(--c-purple-500);
}
.option-card input[type="radio"]:checked ~ .option-card__radio::after {
	transform: scale(1);
}
.option-card__label { flex: 1; }
.option-card__name { font-weight: 600; color: var(--c-text); }
.option-card__desc { font-size: 0.875rem; color: var(--c-text-muted); }
.option-card__price {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--c-purple-300);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------
   14. Pricing card
   ------------------------------------------------------------------- */
.price-card {
	padding: var(--space-8);
	background: var(--c-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	transition: transform var(--duration-normal) var(--ease-out),
				border-color var(--duration-normal) var(--ease-out),
				box-shadow var(--duration-normal) var(--ease-out);
}
.price-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.price-card--featured {
	border-color: var(--c-purple-500);
	box-shadow: var(--shadow-glow);
	background: linear-gradient(180deg, rgba(139, 92, 246, 0.12) 0%, var(--c-elevated) 50%);
}
.price-card--featured::before {
	content: 'MOST POPULAR';
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--gradient-button);
	color: #fff;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}
.price-card__name { color: var(--c-text-secondary); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; }
.price-card__amount {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
}
.price-card__currency { font-size: 1.5rem; color: var(--c-text-secondary); }
.price-card__number {
	font-family: var(--font-mono);
	font-size: 3rem;
	font-weight: 700;
	color: var(--c-text);
	letter-spacing: -0.02em;
}
.price-card__period { color: var(--c-text-muted); font-size: 0.875rem; }
.price-card__features { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.price-card__features li {
	color: var(--c-text-secondary);
	font-size: 0.9375rem;
	padding-left: 1.5em;
	position: relative;
}
.price-card__features li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--c-purple-400);
	font-weight: 700;
}

/* -------------------------------------------------------------------
   15. Badge / Pill
   ------------------------------------------------------------------- */
.badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--radius-full);
}
.badge--primary { background: var(--gradient-button); color: #fff; }
.badge--success { background: rgba(16, 185, 129, 0.15); color: var(--c-success); }
.badge--warning { background: rgba(245, 158, 11, 0.15); color: var(--c-warning); }

.balance-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	background: var(--c-overlay);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-full);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--c-purple-300);
}

/* -------------------------------------------------------------------
   16. Toast (replaces alert())
   ------------------------------------------------------------------- */
.toast-container {
	position: fixed;
	top: var(--space-6);
	right: var(--space-6);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	pointer-events: none;
}
.toast {
	padding: var(--space-4) var(--space-5);
	background: var(--c-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	min-width: 280px;
	max-width: 380px;
	color: var(--c-text);
	font-size: 0.9375rem;
	pointer-events: auto;
	animation: toast-in var(--duration-normal) var(--ease-out);
}
.toast--success { border-left: 3px solid var(--c-success); }
.toast--error { border-left: 3px solid var(--c-error); }
.toast--warning { border-left: 3px solid var(--c-warning); }
.toast--info { border-left: 3px solid var(--c-info); }
@keyframes toast-in {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}

/* -------------------------------------------------------------------
   17. WP block adjustments (default style overrides)
   ------------------------------------------------------------------- */
.wp-block-button__link { background: var(--gradient-button); color: #fff; border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-weight: 600; }
.wp-block-button__link:hover { background: var(--gradient-button-hover); box-shadow: var(--shadow-glow); }
.wp-block-image img { border-radius: var(--radius-md); }
.wp-block-quote {
	border-left: 3px solid var(--c-purple-500);
	padding-left: var(--space-5);
	color: var(--c-text-secondary);
	font-style: italic;
}
.wp-block-code, .wp-block-preformatted {
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	font-family: var(--font-mono);
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------
   18. Utilities
   ------------------------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.text-center { text-align: center; }
.text-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.full-bleed {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* -------------------------------------------------------------------
   19. Language switcher (Phase 1 hidden, Phase 2+ active)
   ------------------------------------------------------------------- */
.keyserp-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-3);
	background: var(--c-overlay);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	font-size: 0.8125rem;
	color: var(--c-text-secondary);
	cursor: pointer;
}
.keyserp-lang-switcher::before {
	content: '🌐';
	margin-right: 4px;
	font-size: 1rem;
}
.keyserp-lang-switcher[hidden] { display: none !important; }

/* -------------------------------------------------------------------
   20. Responsive
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.site-footer__top { grid-template-columns: 1fr; }
	.site-footer__cols { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
	.site-header__nav { display: none; }
	.site-header__right .btn--ghost { display: none; }
	.site-header__menu-toggle { display: block; }
	.stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
	.site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (max-width: 480px) {
	.hero__cta { flex-direction: column; align-items: stretch; }
	.hero__cta .btn { width: 100%; }
	.site-footer__cols { grid-template-columns: 1fr; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ===================================================================
   POLISH LAYER — 디자인 한 단계 격상
   호버 효과, 마이크로 인터랙션, 타이포그래피 정밀화, 시각 무게감
   =================================================================== */

/* 31. 타이포그래피 정밀화 */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-feature-settings: "kern" 1, "calt" 1; }
.heading--xl, .hero__title, .page-hero__title {
	font-feature-settings: "kern" 1, "ss01" 1;
	font-variant-ligatures: common-ligatures;
}
.text-mono, .product-card__price, .price-card__number, .sku-row__price, .amount-card__price,
.stat__num, .credits-summary__amount, .changelog-item__date {
	font-feature-settings: "tnum" 1, "zero" 1;
	font-variant-numeric: tabular-nums slashed-zero;
}

/* 32. 그라데이션 텍스트 shimmer */
.gradient-text {
	background: linear-gradient(90deg, #0055b1 0%, #2d83cf 30%, #0080d5 50%, #2d83cf 70%, #0055b1 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: gradient-shimmer 6s ease-in-out infinite;
}
@keyframes gradient-shimmer {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* 33. 카드 호버 효과 강화 */
.product-card {
	will-change: transform;
	transition:
		transform 350ms cubic-bezier(.16, 1, .3, 1),
		border-color 300ms ease,
		box-shadow 350ms cubic-bezier(.16, 1, .3, 1);
}
.product-card::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	background: linear-gradient(135deg, transparent 40%, rgba(0,85,177,0.12) 100%);
	opacity: 0;
	transition: opacity 350ms ease;
	pointer-events: none;
	z-index: 0;
}
.product-card:hover::after { opacity: 1; }
.product-card:hover {
	transform: translateY(-6px);
	border-color: var(--c-blue-300);
	box-shadow:
		0 24px 48px -16px rgba(0, 85, 177, 0.20),
		0 8px 24px -8px rgba(0, 0, 0, 0.10);
}
.product-card--featured:hover {
	box-shadow:
		0 24px 48px -16px rgba(0, 85, 177, 0.35),
		0 8px 24px -8px rgba(0, 0, 0, 0.10),
		var(--shadow-glow);
}

/* 34. 썸네일 호버 — 블루 글로우 오버레이 */
.product-card__thumb {
	position: relative;
	overflow: hidden;
}
.product-card__thumb::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 50%);
	opacity: 0;
	transition: opacity 350ms ease;
	pointer-events: none;
	z-index: 1;
}
.product-card:hover .product-card__thumb::before { opacity: 1; }
.product-card__thumb svg { transition: transform 500ms cubic-bezier(.16, 1, .3, 1); }
.product-card:hover .product-card__thumb svg { transform: scale(1.04); }

/* 35. 가격 카드 (Pricing) — 미세 폴리시 */
.price-card {
	transition: transform 350ms cubic-bezier(.16, 1, .3, 1),
				border-color 300ms ease,
				box-shadow 350ms cubic-bezier(.16, 1, .3, 1);
}
.price-card:hover {
	transform: translateY(-6px);
	border-color: var(--c-blue-300);
	box-shadow: 0 24px 48px -16px rgba(0, 85, 177, 0.18);
}

/* 36. 버튼 마이크로 인터랙션 */
.btn {
	position: relative;
	overflow: hidden;
	will-change: transform;
}
.btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
	transform: translateX(-100%);
	transition: transform 700ms ease;
	pointer-events: none;
}
.btn--primary:hover::before { transform: translateX(100%); }
.btn--primary:active { transform: scale(0.96); }
.btn--primary {
	transition:
		background 300ms ease,
		box-shadow 300ms ease,
		transform 100ms ease;
}
.btn--lg { font-size: 0.9375rem; padding: var(--space-4) var(--space-8); letter-spacing: -0.005em; }
.btn--full-width {
	transition:
		background 300ms ease,
		box-shadow 300ms ease,
		transform 150ms ease;
}
.btn--full-width:hover {
	background: var(--gradient-button-hover);
	box-shadow: 0 8px 24px -4px rgba(0, 85, 177, 0.40);
	transform: translateY(-1px);
}
.btn--full-width:active { transform: translateY(0); }

/* 37. 폼 인풋 폴리시 */
.field__control input[type="text"],
.field__control input[type="email"],
.field__control input[type="number"],
.field__control input[type="url"],
.field__control input[type="password"],
.field__control select,
.field__control textarea,
textarea {
	transition:
		border-color 200ms ease,
		box-shadow 200ms ease,
		background 200ms ease;
}
.field__control input:hover,
.field__control select:hover,
.field__control textarea:hover {
	border-color: var(--c-blue-300);
}
.field__control input:focus,
.field__control select:focus,
.field__control textarea:focus {
	border-color: var(--c-blue-500);
	box-shadow: 0 0 0 4px rgba(0, 85, 177, 0.12);
	background: #fff;
}
/* When the browser auto-fills a password/email, Chrome paints its own yellow
   tint. Suppress it so our white-background rule wins. */
.field__control input:-webkit-autofill,
.field__control input:-webkit-autofill:hover,
.field__control input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: var(--c-text) !important;
	caret-color: var(--c-text);
	transition: background-color 9999s ease-in-out 0s;
}
.field__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-text);
	letter-spacing: -0.005em;
	margin-bottom: var(--space-2);
}

/* 38. 옵션 카드 (라디오) — 시각 무게감 */
.option-card {
	border: 1px solid transparent;
	transition:
		background 200ms ease,
		border-color 200ms ease,
		transform 200ms ease;
}
.option-card:hover {
	background: var(--c-blue-50);
	border-color: var(--c-blue-100);
	transform: translateX(2px);
}
.option-card:has(input:checked) {
	background: var(--c-blue-50);
	border-color: var(--c-blue-500);
	box-shadow: 0 0 0 1px var(--c-blue-500), 0 4px 12px -4px rgba(0,85,177,0.15);
}
.option-card__name { font-size: 0.9375rem; font-weight: 600; }
.option-card__desc { font-size: 0.8125rem; }

/* 39. 카탈로그 섹션 헤더 폴리시 */
.catalog__head {
	padding-block: var(--space-4) 0;
}
.catalog__eyebrow {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	padding: var(--space-1) var(--space-3);
	box-shadow: 0 2px 8px -2px rgba(0, 85, 177, 0.25);
	color: #fff;
}
.catalog__title {
	letter-spacing: -0.015em;
	line-height: 1.15;
}
.section-header h2,
.tier-detail__head h2,
.catalog__title {
	letter-spacing: -0.02em;
}

/* 40. 히어로 디테일 */
.hero__eyebrow,
.page-hero__eyebrow {
	box-shadow: 0 1px 4px rgba(0, 85, 177, 0.08), inset 0 0 0 1px rgba(0, 85, 177, 0.1);
	transition: transform 250ms ease;
}
.hero__title,
.page-hero__title {
	letter-spacing: -0.028em;
	line-height: 1.04;
}
.hero__trust {
	font-size: 0.8125rem;
	color: var(--c-text-muted);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: rgba(0, 85, 177, 0.04);
	border: 1px solid rgba(0, 85, 177, 0.10);
	border-radius: var(--radius-full);
}

/* 41. Sticky 탭 폴리시 */
.start-tab {
	transition:
		color 200ms ease,
		background 200ms ease,
		transform 150ms ease;
}
.start-tab.is-active {
	background: var(--gradient-button);
	color: #fff;
	box-shadow:
		0 4px 14px -2px rgba(0, 85, 177, 0.35),
		inset 0 1px 0 rgba(255,255,255,0.15);
}
.start-tab:not(.is-active):hover {
	background: var(--c-blue-50);
	color: var(--c-blue-700);
}

/* 42. Amount 카드 (Credits) 폴리시 */
.amount-card {
	transition:
		transform 250ms cubic-bezier(.16, 1, .3, 1),
		border-color 200ms ease,
		box-shadow 250ms ease;
}
.amount-card:hover:not(.is-active) {
	background: var(--c-blue-50);
	border-color: var(--c-blue-300);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px -8px rgba(0, 85, 177, 0.20);
}
.amount-card.is-active {
	transform: translateY(-2px);
}
.amount-card__ribbon {
	box-shadow: 0 4px 12px -2px rgba(0, 85, 177, 0.40);
	letter-spacing: 0.10em;
}

/* 43. 차트/통계 비주얼 무게감 */
.stat-chart {
	transition: transform 300ms ease, box-shadow 300ms ease;
}
.stat-chart:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.10);
}
.chart-svg {
	filter: drop-shadow(0 4px 12px rgba(0, 85, 177, 0.08));
}

/* 44. Stats 그리드 */
.stats__grid {
	background: linear-gradient(180deg, #fff 0%, var(--c-elevated) 100%);
	border: 1px solid var(--border-default);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.05);
}
.stat__num {
	background: linear-gradient(180deg, var(--c-text) 0%, var(--c-blue-700) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* 45. Feature 카드 폴리시 */
.feature-card {
	transition:
		transform 350ms cubic-bezier(.16, 1, .3, 1),
		border-color 300ms ease,
		box-shadow 300ms ease;
}
.feature-card:hover {
	transform: translateY(-4px);
	border-color: var(--c-blue-300);
	box-shadow: 0 16px 32px -12px rgba(0, 85, 177, 0.15);
}
.feature-card__icon {
	font-size: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--c-blue-50) 0%, rgba(255, 218, 71, 0.15) 100%);
	border: 1px solid var(--border-default);
}

/* 46. SKU row 폴리시 */
.sku-row {
	transition:
		background 200ms ease,
		border-color 200ms ease,
		transform 200ms ease;
}
.sku-row:hover {
	transform: translateX(4px);
	background: linear-gradient(90deg, var(--c-blue-50) 0%, #fff 100%);
	box-shadow: -4px 0 0 var(--c-blue-500);
}

/* 47. FAQ 폴리시 */
.faq-item {
	transition: border-color 250ms ease, box-shadow 250ms ease;
}
.faq-item[open] {
	box-shadow: 0 4px 16px -4px rgba(0, 85, 177, 0.08);
}
.faq-question::after {
	transition: transform 350ms cubic-bezier(.16, 1, .3, 1), color 200ms ease;
}
.faq-item[open] .faq-question::after { color: var(--c-blue-500); }

/* 48. 헤더 폴리시 — 스크롤시 그림자 강화 */
.site-header {
	transition: backdrop-filter 300ms ease, background 300ms ease, box-shadow 300ms ease;
}
.site-header:hover {
	background: rgba(255, 255, 255, 0.98);
}

/* 49. 푸터 톤업 */
.site-footer {
	background: linear-gradient(180deg, var(--c-elevated) 0%, #fff 100%);
}
.site-footer__col h4 {
	color: var(--c-blue-700);
	letter-spacing: 0.14em;
}

/* 50. 토스트 폴리시 */
.toast {
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, 0.96);
}
.toast--success { border-left-width: 4px; }
.toast--error { border-left-width: 4px; }

/* 51. 페이지 진입 fade-in (sticky 영역 제외) */
@keyframes page-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.site-main--front .hero,
.site-main--front .catalog,
.site-main--front .how,
.site-main--front .faq-section,
.site-main--front .cta,
.site-main--service section:not(:first-child),
.site-main--plans section:not(.page-hero),
.site-main--credits .credits-grid,
.site-main--thanks .how__grid {
	animation: page-fade-in 600ms cubic-bezier(.16, 1, .3, 1) backwards;
}
.site-main--front .catalog:nth-child(3) { animation-delay: 80ms; }
.site-main--front .catalog:nth-child(4) { animation-delay: 140ms; }
.site-main--front .catalog:nth-child(5) { animation-delay: 200ms; }
.site-main--front .catalog:nth-child(6) { animation-delay: 260ms; }
.site-main--front .how { animation-delay: 320ms; }

/* 52. 포커스 링 (접근성 + 디자인) */
:focus-visible {
	outline: 2px solid var(--c-blue-500);
	outline-offset: 3px;
	border-radius: 6px;
}
.btn:focus-visible,
.start-tab:focus-visible,
.product-card:focus-visible,
.sku-row:focus-visible,
.amount-card:focus-visible {
	outline: 2px solid var(--c-blue-500);
	outline-offset: 4px;
}

/* 53. 셀렉트 드롭다운 화살표 */
.field__control select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230055b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

/* 54. 가격 표시 변별력 */
.price-card__number,
.product-card__price {
	background: linear-gradient(180deg, var(--c-text) 0%, var(--c-blue-700) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-variant-numeric: tabular-nums;
}

/* 55. 모바일 폴리시 */
@media (max-width: 768px) {
	.hero__title, .page-hero__title { letter-spacing: -0.024em; }
	.btn--lg { width: 100%; }
	.hero__cta { flex-direction: column; gap: var(--space-3); }
	.hero__cta .btn { width: 100%; }
	.option-card { padding: var(--space-3); }
	.option-card__name { font-size: 0.875rem; }
	.amount-card { min-height: 90px; }
}
@media (max-width: 480px) {
	.product-card__name { font-size: 1rem; }
	.product-card__price { font-size: 1.25rem; }
	.tier-detail__head h2 { font-size: 1.5rem; }
	.changelog-item__body { padding: var(--space-3) var(--space-4); }
}

/* ===================================================================
   56. 헤더 — 로그인 상태별 영역 노출 토글
   =================================================================== */
.ks-logged-in,
.ks-logged-out {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
/* WP 가 body 에 'logged-in' 클래스 추가 */
body.logged-in .ks-logged-out { display: none !important; }
body:not(.logged-in) .ks-logged-in { display: none !important; }

.balance-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	background: linear-gradient(135deg, var(--c-blue-50), rgba(255, 218, 71, 0.20));
	border: 1px solid var(--border-default);
	border-radius: var(--radius-full);
	font-size: 0.8125rem;
	color: var(--c-blue-700);
	font-weight: 600;
}
.balance-pill .text-mono {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--c-text);
}

/* ===================================================================
   57. 계정 대시보드 (/my-account/)
   =================================================================== */
.site-main--account { padding-block: var(--space-12); }
.dashboard-section { padding-inline: var(--container-pad); }
.dashboard {
	max-width: var(--container-max);
	margin-inline: auto;
}

.dashboard__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--border-subtle);
}
.dashboard__greeting {
	color: var(--c-text-muted);
	font-size: 0.875rem;
	margin: 0 0 var(--space-1);
	letter-spacing: 0.04em;
}
.dashboard__name {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--c-text);
	margin: 0;
	letter-spacing: -0.02em;
}

.dashboard__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	margin-bottom: var(--space-12);
}
.dashboard-stat {
	padding: var(--space-6);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.dashboard-stat:hover {
	transform: translateY(-2px);
	border-color: var(--c-blue-300);
	box-shadow: 0 12px 24px -8px rgba(0, 85, 177, 0.10);
}
.dashboard-stat__label {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--c-text-muted);
}
.dashboard-stat__value {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	color: var(--c-text);
	letter-spacing: -0.025em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, var(--c-text) 0%, var(--c-blue-700) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.dashboard-stat__unit {
	font-size: 0.875rem;
	color: var(--c-text-muted);
	margin-top: var(--space-1);
}
.dashboard-stat__cta {
	margin-top: auto;
	padding-top: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--c-blue-500);
	transition: color 150ms;
}
.dashboard-stat__cta:hover { color: var(--c-blue-700); }

.dashboard__section {
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	margin-bottom: var(--space-6);
}
.dashboard__section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-5);
}
.dashboard__section-head h2 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--c-text);
	margin: 0;
	letter-spacing: -0.01em;
}

.dashboard-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.dashboard-table th {
	text-align: left;
	font-weight: 600;
	color: var(--c-text-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	padding: var(--space-3);
	border-bottom: 1px solid var(--border-subtle);
}
.dashboard-table td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--border-subtle);
	color: var(--c-text-secondary);
}
.dashboard-table tr:last-child td { border-bottom: 0; }
.dashboard-table tr:hover { background: var(--c-elevated); }

.empty-state {
	text-align: center;
	padding: var(--space-12) var(--space-6);
	color: var(--c-text-muted);
}
.empty-state h2 {
	margin: 0 0 var(--space-3);
	color: var(--c-text);
}
.empty-state a { color: var(--c-blue-500); font-weight: 600; }

/* myCred 기본 위젯 살짝 정리 (.mycred-log) */
.mycred-log,
table.mycred-front-history {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.mycred-log th, table.mycred-front-history th {
	text-align: left;
	font-weight: 600;
	color: var(--c-text-muted);
	padding: var(--space-3);
	border-bottom: 1px solid var(--border-subtle);
	background: var(--c-elevated);
}
.mycred-log td, table.mycred-front-history td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--border-subtle);
	color: var(--c-text-secondary);
}

/* Ultimate Member 폼 스타일 보정 */
.um {
	font-family: var(--font-sans) !important;
}
.um-form input,
.um-form textarea,
.um-form select {
	border: 1px solid var(--border-default) !important;
	border-radius: var(--radius-md) !important;
	padding: var(--space-3) var(--space-4) !important;
	background: #fff !important;
	font-size: 0.9375rem !important;
}
.um-form input:focus,
.um-form select:focus,
.um-form textarea:focus {
	border-color: var(--c-blue-500) !important;
	box-shadow: 0 0 0 4px rgba(0, 85, 177, 0.12) !important;
	background: #fff !important;
}
.um-button {
	background: var(--gradient-button) !important;
	border-radius: var(--radius-md) !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 14px rgba(0, 85, 177, 0.25) !important;
}
.um-button:hover {
	background: var(--gradient-button-hover) !important;
}

@media (max-width: 768px) {
	.dashboard__stats { grid-template-columns: 1fr; }
	.dashboard__header { flex-direction: column; gap: var(--space-4); align-items: flex-start; }
	.dashboard-table { font-size: 0.8125rem; }
	.dashboard-table th, .dashboard-table td { padding: var(--space-2); }
}

/* ===================================================================
   58. 그라데이션 축소 (기업 톤 — flat / solid 위주)
   그라데이션 유지: primary 버튼, hero 카드 SVG 썸네일만
   그라데이션 제거: 텍스트, 카드 배경, 통계 숫자, 인디케이터
   =================================================================== */

/* gradient-text → 솔리드 블루 (기업 톤) */
.gradient-text {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: initial;
	color: var(--c-blue-500);
	animation: none;
}

/* 가격 숫자 / 카드 가격 → 솔리드 다크 */
.price-card__number,
.product-card__price,
.dashboard-stat__value,
.stat__num {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: initial;
	color: var(--c-text);
}

/* hero orb → 매우 옅게 (거의 안 보이게) */
.hero__orb {
	background: radial-gradient(circle, rgba(0, 85, 177, 0.04) 0%, rgba(0, 85, 177, 0) 70%);
	animation: none;
	opacity: 0.6;
}
.hero__grid {
	background-image:
		linear-gradient(rgba(0, 85, 177, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 85, 177, 0.025) 1px, transparent 1px);
}

/* 통계 그리드 → 솔리드 화이트 + 보더 */
.stats__grid {
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Feature 카드 아이콘 → 솔리드 톤 (그라데이션 제거) */
.feature-card__icon {
	background: var(--c-blue-50);
	border: 1px solid var(--c-blue-100);
}

/* product-card--featured 배경 → 솔리드 + 강한 보더 */
.price-card--featured {
	background: #fff;
	border-width: 2px;
}
.amount-card.is-active {
	background: var(--c-blue-50);
}
.amount-card--bonus {
	background: #fff;
}

/* sku-row hover → 솔리드 */
.sku-row:hover {
	background: var(--c-blue-50);
	box-shadow: -4px 0 0 var(--c-blue-500);
}
.sku-row--featured {
	background: #fff;
}

/* dashboard-stat 값 → 솔리드 */
.dashboard-stat__value {
	font-weight: 800;
	color: var(--c-text);
}

/* 카드 호버 hover overlay 약화 (after 의 그라데이션 거의 없게) */
.product-card::after {
	background: rgba(0, 85, 177, 0.04);
}

/* 푸터 그라데이션 제거 */
.site-footer {
	background: var(--c-elevated);
	border-top: 1px solid var(--border-default);
}

/* CTA 박스 → 솔리드 + 보더 강조 (그라데이션 제거) */
.cta__inner {
	background: var(--c-blue-500);
	border-radius: var(--radius-xl);
}
.cta__inner::after { display: none; }
.cta__inner h2, .cta__inner .heading { color: #fff; }
.cta__inner .subheading { color: rgba(255, 255, 255, 0.85); }
.cta__inner .btn--primary {
	background: #fff;
	color: var(--c-blue-700);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
.cta__inner .btn--primary:hover {
	background: var(--c-yellow-400);
	color: var(--c-blue-900);
}
/* AU-35 — Secondary "Read our methodology" button on the blue CTA box.
   The default .btn--ghost rendered text in the same blue as the CTA bg,
   making it invisible. Force white text + white outline with !important
   because the global anchor color cascade was winning otherwise. */
.cta__inner .btn--ghost,
.cta__inner a.btn--ghost,
.cta__inner .btn--ghost:link,
.cta__inner .btn--ghost:visited {
	background: transparent !important;
	color: #fff !important;
	border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
}
.cta__inner .btn--ghost:hover,
.cta__inner .btn--ghost:focus {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: #fff !important;
	color: #fff !important;
}

/* hero eyebrow / page hero eyebrow — 더 깔끔 */
.hero__eyebrow,
.page-hero__eyebrow {
	background: var(--c-blue-50);
	border: 1px solid var(--c-blue-100);
	color: var(--c-blue-700);
	box-shadow: none;
}

/* 11 카드 그리드 + 카탈로그 헤더 — 그라데이션 라벨 → 솔리드 */
.catalog__eyebrow--grow    { background: var(--c-blue-900); color: #fff; box-shadow: none; }
.catalog__eyebrow--advance { background: var(--c-blue-500); color: #fff; box-shadow: none; }
.catalog__eyebrow--starter { background: var(--c-blue-300); color: var(--c-blue-900); box-shadow: none; }
.catalog__eyebrow--free    { background: var(--c-yellow-400); color: var(--c-blue-900); box-shadow: none; }

/* 카테고리 배지 안의 톤도 솔리드 */
.product-card__category--grow    { background: var(--c-blue-100); color: var(--c-blue-900); }
.product-card__category--advance { background: var(--c-blue-100); color: var(--c-blue-700); }
.product-card__category--starter { background: var(--c-blue-50);  color: var(--c-blue-500); }
.product-card__category--free    { background: var(--c-yellow-300); color: #8a6a00; }

/* ===================================================================
   59. Trust Band — 신뢰 로고/통계 띠
   =================================================================== */
.trust-band {
	padding-inline: var(--container-pad);
	padding-block: var(--space-12) var(--space-4);
	border-top: 1px solid var(--border-subtle);
	background: #fff;
}
.trust-band__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	text-align: center;
}
.trust-band__label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--c-text-muted);
	margin: 0 0 var(--space-6);
}
.trust-band__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-10);
	align-items: center;
}
.trust-logo {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--c-text-muted);
	letter-spacing: -0.005em;
	opacity: 0.7;
	filter: grayscale(100%);
	transition: opacity 200ms ease, filter 200ms ease;
}
.trust-logo:hover {
	opacity: 1;
	filter: grayscale(0%);
	color: var(--c-blue-700);
}

/* ===================================================================
   60. Reviews 섹션
   =================================================================== */
.reviews-section {
	padding-inline: var(--container-pad);
	padding-block: clamp(3rem, 7vw, 5rem);
	background: var(--c-elevated);
	border-top: 1px solid var(--border-subtle);
}
.reviews-section__inner {
	max-width: var(--container-max);
	margin-inline: auto;
}
.reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-8);
}
.reviews-empty {
	text-align: center;
	color: var(--c-text-muted);
	padding: var(--space-12);
}

.review-card {
	padding: var(--space-6);
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
	position: relative;
}
.review-card:hover {
	transform: translateY(-2px);
	border-color: var(--c-blue-300);
	box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.06);
}
.review-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.review-card__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--c-yellow-500);
	font-size: 1.125rem;
	letter-spacing: 1px;
	line-height: 1;
}
.review-card__star-off { color: var(--border-default); }
.review-card__headline {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--c-text);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.review-card__body {
	font-size: 0.9375rem;
	color: var(--c-text-secondary);
	line-height: 1.6;
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.review-card__body::before {
	content: '“';
	font-family: Georgia, serif;
	font-size: 2.5rem;
	line-height: 0;
	color: var(--c-blue-300);
	margin-right: 4px;
	vertical-align: -0.4em;
}
.review-card__foot {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-subtle);
}
.review-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c-blue-500);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.0625rem;
	flex-shrink: 0;
	text-transform: uppercase;
}
.review-card__author { flex: 1; min-width: 0; }
.review-card__name {
	font-weight: 600;
	color: var(--c-text);
	font-size: 0.9375rem;
}
.review-card__role {
	font-size: 0.8125rem;
	color: var(--c-text-muted);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.review-card__flag {
	font-size: 1.25rem;
	line-height: 1;
}

@media (max-width: 1024px) {
	.reviews-grid { grid-template-columns: repeat(2, 1fr); }
	.trust-band__logos { gap: var(--space-6); }
}
@media (max-width: 640px) {
	.reviews-grid { grid-template-columns: 1fr; }
	.trust-band__logos { gap: var(--space-4); }
	.trust-logo { font-size: 0.8125rem; }
}

/* ===================================================================
   61. 상태 배지 variants (warning, error)
   =================================================================== */
.badge--warning {
	background: rgba(245, 158, 11, 0.15);
	color: #b45309;
}
.badge--error {
	background: rgba(220, 38, 38, 0.10);
	color: #991b1b;
}

/* 다운로드 버튼 mini variant in tables */
.dashboard-table .btn--sm {
	padding: 4px 10px;
	font-size: 0.75rem;
}

/* ===================================================================
   62. 인증 폼 (Login / Register / Password reset)
   =================================================================== */
.auth-form-wrap {
	padding: clamp(2rem, 6vw, 4rem) var(--container-pad);
	display: flex;
	justify-content: center;
}
.auth-form-card {
	width: 100%;
	max-width: 460px;
	background: #fff;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-10);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.05);
}
.auth-form__title {
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	font-weight: 700;
	color: var(--c-text);
	margin: 0 0 var(--space-2);
	letter-spacing: -0.02em;
}
.auth-form__sub {
	color: var(--c-text-secondary);
	font-size: 0.9375rem;
	margin: 0 0 var(--space-8);
	line-height: 1.5;
}
.auth-form .field { margin-bottom: var(--space-5); }
.auth-form .field--inline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8125rem;
	margin-bottom: var(--space-6);
}
.auth-form .field--inline a { color: var(--c-blue-500); font-weight: 600; }
.auth-form .field--inline a:hover { color: var(--c-blue-700); }
.auth-form__checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--c-text-secondary);
	cursor: pointer;
}
.auth-form__checkbox input { accent-color: var(--c-blue-500); width: 16px; height: 16px; }
.auth-form__legal {
	font-size: 0.75rem;
	color: var(--c-text-muted);
	margin: var(--space-4) 0 var(--space-6);
	line-height: 1.5;
}
.auth-form__legal a { color: var(--c-blue-500); }
.auth-form__alt {
	text-align: center;
	margin: var(--space-6) 0 0;
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-subtle);
	color: var(--c-text-secondary);
	font-size: 0.9375rem;
}
.auth-form__alt a { color: var(--c-blue-500); }
.auth-form__alt a:hover { color: var(--c-blue-700); }
.auth-form__error {
	padding: var(--space-3) var(--space-4);
	background: rgba(220, 38, 38, 0.08);
	border: 1px solid rgba(220, 38, 38, 0.20);
	border-radius: var(--radius-md);
	color: #991b1b;
	font-size: 0.875rem;
	margin-bottom: var(--space-5);
	line-height: 1.4;
}
.auth-form__error a { color: #991b1b; text-decoration: underline; }
.auth-form__success {
	padding: var(--space-3) var(--space-4);
	background: rgba(22, 163, 74, 0.08);
	border: 1px solid rgba(22, 163, 74, 0.20);
	border-radius: var(--radius-md);
	color: #166534;
	font-size: 0.875rem;
	margin-bottom: var(--space-5);
}
.field__optional {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--c-text-muted);
}
.auth-msg {
	max-width: 460px;
	margin: var(--space-12) auto;
	text-align: center;
	padding: var(--space-8);
	background: #fff;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
}

@media (max-width: 480px) {
	.auth-form-card { padding: var(--space-6); }
}

/* -------------------------------------------------------------------
   21. Page hero (sub-pages: plans / start / credits)
   ------------------------------------------------------------------- */
.page-hero {
	position: relative;
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
	padding-inline: var(--container-pad);
	text-align: center;
	overflow: hidden;
}
.page-hero--compact { padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 2.5vw, 1.75rem); }
.page-hero__inner { max-width: 800px; margin-inline: auto; position: relative; z-index: 2; }
.page-hero__eyebrow {
	display: inline-block;
	color: var(--c-purple-300);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: var(--space-1) var(--space-3);
	background: rgba(139, 92, 246, 0.1);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-5);
}
.page-hero__title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin-bottom: var(--space-4);
}
.page-hero__sub {
	font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
	color: var(--c-text-secondary);
	max-width: 600px;
	margin: 0 auto;
}

/* -------------------------------------------------------------------
   22. Plans page — toggle + grid + price-card extras
   ------------------------------------------------------------------- */
.plans-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-8);
	padding: var(--space-2) var(--space-5);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-full);
}
.plans-toggle__label {
	color: var(--c-text-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	transition: color var(--duration-fast);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.plans-toggle__label.is-active { color: var(--c-text); }
body.is-annual .plans-toggle__label[data-toggle-label="monthly"] { color: var(--c-text-muted); }
body.is-annual .plans-toggle__label[data-toggle-label="annual"] { color: var(--c-text); }
body:not(.is-annual) .plans-toggle__label[data-toggle-label="monthly"] { color: var(--c-text); }
body:not(.is-annual) .plans-toggle__label[data-toggle-label="annual"] { color: var(--c-text-muted); }

.plans-section { padding-inline: var(--container-pad); padding-block: var(--space-12) var(--space-16); }
.plans-grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	align-items: stretch;
}
.price-card__tagline { color: var(--c-text-muted); font-size: 0.875rem; margin: 0; }
.price-card .btn { margin-top: auto; }

/* -------------------------------------------------------------------
   23. FAQ section (details/summary)
   ------------------------------------------------------------------- */
.faq-section { padding-inline: var(--container-pad); padding-block: var(--space-12); }
.faq-section__inner { max-width: 800px; margin-inline: auto; }
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-10); }
.faq-item {
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--duration-fast);
}
.faq-item[open] { border-color: var(--border-strong); }
.faq-question {
	padding: var(--space-5);
	cursor: pointer;
	font-weight: 600;
	color: var(--c-text);
	list-style: none;
	position: relative;
	padding-right: var(--space-12);
	user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
	content: '+';
	position: absolute;
	right: var(--space-5);
	top: 50%;
	transform: translateY(-50%);
	color: var(--c-purple-400);
	font-size: 1.5rem;
	font-weight: 300;
	transition: transform var(--duration-normal) var(--ease-spring);
}
.faq-item[open] .faq-question::after { transform: translateY(-50%) rotate(45deg); }
.faq-question:hover { color: var(--c-purple-300); }
.faq-answer {
	padding: 0 var(--space-5) var(--space-5);
	color: var(--c-text-secondary);
	line-height: 1.65;
}
.faq-answer a { color: var(--c-purple-300); text-decoration: underline; }

/* -------------------------------------------------------------------
   24. Start page — sticky tabs + 2-column panel
   ------------------------------------------------------------------- */
.start-section { padding-inline: var(--container-pad); padding-block: var(--space-8) var(--space-20); }

.start-tabs {
	position: sticky;
	top: 70px; /* below header */
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-full);
	max-width: 480px;
	margin: 0 auto var(--space-10);
	padding: var(--space-1);
	box-shadow: var(--shadow-md);
}
.start-tabs__inner { display: flex; gap: var(--space-1); }
.start-tab {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-full);
	color: var(--c-text-secondary);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background var(--duration-fast), color var(--duration-fast);
}
.start-tab:hover { color: var(--c-text); }
.start-tab.is-active {
	background: var(--gradient-button);
	color: #fff;
	box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.start-tab__badge {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 2px 6px;
	border-radius: var(--radius-full);
	background: var(--c-cyan-500);
	color: #fff;
}
.start-tab.is-active .start-tab__badge { background: rgba(255, 255, 255, 0.25); }

.start-panel { display: none; }
.start-panel.is-active { display: block; animation: panel-in var(--duration-normal) var(--ease-out); }
@keyframes panel-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.start-panel__grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: var(--space-10);
	align-items: start;
}
.start-panel__left {
	padding: var(--space-8);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	position: sticky;
	top: 140px;
}
.start-panel__header { margin-bottom: var(--space-6); }
.start-panel__name { margin-bottom: var(--space-2); }
.start-panel__tagline { color: var(--c-text-secondary); margin: 0; }
.start-panel__includes { margin-bottom: var(--space-6); }
.start-panel__heading {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-text-muted);
	margin-bottom: var(--space-3);
}
.start-panel__note {
	padding: var(--space-4);
	background: var(--c-overlay);
	border-left: 3px solid var(--c-purple-500);
	border-radius: var(--radius-sm);
	color: var(--c-text-secondary);
	font-size: 0.875rem;
	line-height: 1.6;
}
.start-panel__note strong { color: var(--c-text); }

.start-panel__right {
	padding: var(--space-8);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
}

.check-list { display: flex; flex-direction: column; gap: var(--space-2); }
.check-list li {
	padding-left: 1.75em;
	position: relative;
	color: var(--c-text-secondary);
	font-size: 0.9375rem;
}
.check-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--c-purple-400);
	font-weight: 700;
	font-size: 1.05em;
}

.field__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.field__row .field__label { margin: 0; }
.field__control--with-button { display: flex; gap: var(--space-2); }
.field__control--with-button input { flex: 1; }
.field__control--with-button .btn { flex-shrink: 0; }

textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	background: #fff;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	resize: vertical;
	min-height: 100px;
}
textarea::placeholder { color: var(--c-text-disabled); }
textarea:focus {
	outline: none;
	border-color: var(--c-purple-500);
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

/* total box (콜링크 .total-box 패턴) */
.total-box { margin-top: var(--space-8); }
.total-box__note {
	font-size: 0.8125rem;
	color: var(--c-text-muted);
	text-align: center;
	margin-bottom: var(--space-4);
	line-height: 1.5;
}
.total-divider { opacity: 0.4; margin: 0 var(--space-1); }
.total-amount {
	font-family: var(--font-mono);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------
   25. Credits page — summary aside + amount grid
   ------------------------------------------------------------------- */
.credits-section { padding-inline: var(--container-pad); padding-block: var(--space-8) var(--space-20); }
.credits-grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: var(--space-8);
	align-items: start;
}

.credits-summary {
	padding: var(--space-6);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	position: sticky;
	top: 90px;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.credits-summary__label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-text-muted);
	margin-bottom: var(--space-2);
}
.credits-summary__current {
	padding-bottom: var(--space-5);
	border-bottom: 1px dashed var(--border-default);
}
.credits-summary__value {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--c-text);
}
.credits-summary__unit { font-size: 0.875rem; color: var(--c-text-muted); margin-left: var(--space-1); }
.credits-summary__amount {
	font-family: var(--font-mono);
	font-size: clamp(2.5rem, 5vw, 3rem);
	font-weight: 700;
	color: var(--c-text);
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.credits-summary__credits {
	margin-top: var(--space-2);
	color: var(--c-purple-300);
	font-size: 0.9375rem;
}
.credits-summary__heading {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--c-text);
	margin-bottom: var(--space-3);
}
.credits-summary__rules ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: 0.875rem;
}
.credits-summary__rules li {
	display: flex;
	justify-content: space-between;
	color: var(--c-text-secondary);
	padding: var(--space-1) 0;
}
.credits-summary__rules li .text-mono { color: var(--c-purple-300); }
.credits-summary__notes p {
	font-size: 0.8125rem;
	color: var(--c-text-muted);
	margin: 0 0 var(--space-2);
	line-height: 1.5;
}
.credits-summary__notes strong { color: var(--c-purple-300); }

.credits-main { display: flex; flex-direction: column; gap: var(--space-6); }
.section-header--left { text-align: left; max-width: none; margin-bottom: var(--space-4); }
.section-header--left h2 { margin-bottom: var(--space-1); }
.section-header--left .subheading { font-size: 0.9375rem; }

.amount-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}
.amount-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-5) var(--space-3);
	background: var(--c-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	color: var(--c-text);
	text-decoration: none;
	cursor: pointer;
	transition: all var(--duration-fast) var(--ease-out);
	min-height: 110px;
}
.amount-card:hover {
	background: var(--c-overlay);
	border-color: var(--border-strong);
	transform: translateY(-2px);
	color: var(--c-text);
}
.amount-card.is-active {
	border-color: var(--c-blue-500);
	background: linear-gradient(180deg, rgba(0, 85, 177, 0.08) 0%, #fff 100%);
	box-shadow: var(--shadow-glow), inset 0 0 0 1px var(--c-blue-500);
	color: var(--c-text);
}
.amount-card__price {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.amount-card__credits {
	font-size: 0.8125rem;
	color: var(--c-text-muted);
}
.amount-card.is-active .amount-card__credits { color: var(--c-purple-300); }

.amount-card--bonus {
	border-color: rgba(0, 85, 177, 0.25);
	background: linear-gradient(180deg, rgba(255, 218, 71, 0.10) 0%, #fff 100%);
}
.amount-card__ribbon {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--gradient-button);
	color: #fff;
	padding: 2px var(--space-2);
	border-radius: var(--radius-full);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* -------------------------------------------------------------------
   26. Responsive (Phase 2 pages)
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.plans-grid { grid-template-columns: repeat(2, 1fr); }
	.start-panel__grid { grid-template-columns: 1fr; }
	.start-panel__left { position: static; }
	.credits-grid { grid-template-columns: 1fr; }
	.credits-summary { position: static; }
}
@media (max-width: 640px) {
	.plans-grid { grid-template-columns: 1fr; }
	.amount-grid { grid-template-columns: repeat(2, 1fr); }
	.start-tabs { max-width: 100%; }
	.start-tab__name { font-size: 0.8125rem; }
}
@media (max-width: 420px) {
	.amount-grid { grid-template-columns: 1fr; }
	.amount-card { min-height: 80px; padding: var(--space-4); }
}

/* -------------------------------------------------------------------
   27. Hero compact + Catalog sections (메인 페이지 쇼핑몰 진열)
   ------------------------------------------------------------------- */
.hero--compact {
	padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 5vw, 3rem);
}
.hero--compact .hero__title {
	font-size: clamp(2.25rem, 5vw, 3.25rem);
}

.catalog {
	padding-inline: var(--container-pad);
	padding-block: clamp(2rem, 4vw, 3rem);
}
.catalog + .catalog { padding-block-start: 0; }
.catalog__head {
	max-width: var(--container-max);
	margin: 0 auto var(--space-6);
}
.catalog__eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-3);
	color: #fff;
}
.catalog__eyebrow--grow    { background: linear-gradient(90deg, #001f44 0%, #0055b1 100%); }
.catalog__eyebrow--advance { background: linear-gradient(90deg, #0055b1 0%, #2d83cf 100%); }
.catalog__eyebrow--starter { background: linear-gradient(90deg, #2d83cf 0%, #5da3df 100%); color: #001f44; }
.catalog__eyebrow--free    { background: linear-gradient(90deg, #ffda47 0%, #f0c020 100%); color: #001f44; }
.catalog__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	margin: 0 0 var(--space-2);
	color: var(--c-text);
	letter-spacing: -0.01em;
}
.catalog__sub {
	color: var(--c-text-secondary);
	margin: 0;
	font-size: 0.9375rem;
}

.product-grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	gap: var(--space-5);
	align-items: stretch;
}
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }
.product-grid--1 {
	grid-template-columns: minmax(0, 340px);
	justify-content: center;
}

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform var(--duration-normal) var(--ease-out),
				border-color var(--duration-normal) var(--ease-out),
				box-shadow var(--duration-normal) var(--ease-out);
}
.product-card:hover {
	transform: translateY(-4px);
	border-color: var(--border-strong);
	box-shadow: var(--shadow-lg);
	color: inherit;
}
.product-card--featured {
	border-color: var(--c-purple-500);
	box-shadow: var(--shadow-glow);
}
.product-card--featured:hover {
	box-shadow: var(--shadow-glow-strong);
}

.product-card__thumb {
	position: relative;
	overflow: hidden;
}
.product-card__thumb svg {
	width: 100%;
	height: auto;
	display: block;
}
.product-card__ribbon {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	padding: var(--space-1) var(--space-3);
	background: var(--c-yellow-400);
	color: #1a1a1a;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	border-radius: var(--radius-full);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
	border: 1px solid var(--c-yellow-500);
}
.product-card__ribbon--free {
	background: var(--c-blue-500);
	color: #fff;
	border-color: var(--c-blue-700);
}

.product-card__body {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
}

.product-card__category {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	width: fit-content;
	margin-bottom: var(--space-1);
}
.product-card__category--grow    { background: rgba(0, 31, 68, 0.10);  color: #001f44; }
.product-card__category--advance { background: rgba(0, 85, 177, 0.10); color: #0055b1; }
.product-card__category--starter { background: rgba(45, 131, 207, 0.12); color: #003c7d; }
.product-card__category--free    { background: rgba(255, 218, 71, 0.25); color: #8a6a00; }

.product-card__name {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--c-text);
	margin: 0;
	letter-spacing: -0.01em;
}
.product-card__desc {
	color: var(--c-text-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
	margin: 0;
}
.product-card__features {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	font-size: 0.8125rem;
}
.product-card__features li {
	color: var(--c-text-muted);
	padding-left: 1.25em;
	position: relative;
}
.product-card__features li::before {
	content: '·';
	position: absolute;
	left: 0.4em;
	color: var(--c-purple-400);
	font-weight: 700;
}
.product-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-3);
	border-top: 1px dashed var(--border-default);
}
.product-card__price {
	font-family: var(--font-mono);
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--c-text);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.product-card__price-range {
	color: var(--c-text-secondary);
	font-size: 0.875rem;
}
.product-card__price-range strong {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.product-card__period {
	color: var(--c-text-muted);
	font-size: 0.75rem;
}
.product-card__cta {
	color: var(--c-purple-300);
	font-weight: 600;
	font-size: 0.875rem;
	transition: transform var(--duration-fast), color var(--duration-fast);
}
.product-card:hover .product-card__cta {
	color: var(--c-purple-200);
	transform: translateX(2px);
}

/* -------------------------------------------------------------------
   28. How it works (3-step)
   ------------------------------------------------------------------- */
.how {
	padding-inline: var(--container-pad);
	padding-block: clamp(3rem, 7vw, 5rem);
}
.how__grid {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}
.how-step {
	padding: var(--space-8) var(--space-6);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
}
.how-step::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-button);
}
.how-step__num {
	font-family: var(--font-mono);
	font-size: 2.5rem;
	font-weight: 800;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: var(--space-4);
}
.how-step__title { margin-bottom: var(--space-2); color: var(--c-text); }
.how-step__body { color: var(--c-text-secondary); margin: 0; }

/* -------------------------------------------------------------------
   29. Responsive (Phase 2.5 packages — catalog grid)
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.product-grid--4,
	.product-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.how__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 560px) {
	.product-grid--4,
	.product-grid--3,
	.product-grid--1 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------
   30. Service detail page — methodology + tier specs + stats + changelog
   ------------------------------------------------------------------- */

/* Service overview — methodology grid */
.service-overview {
	padding-inline: var(--container-pad);
	padding-block: clamp(3rem, 7vw, 5rem);
	background: var(--c-elevated);
	border-block: 1px solid var(--border-subtle);
}
.service-overview__inner { max-width: var(--container-max); margin-inline: auto; }
.methodology-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-10);
}
.methodology-step {
	padding: var(--space-5);
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	position: relative;
}
.methodology-step__num {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--c-blue-300);
	margin-bottom: var(--space-3);
	letter-spacing: -0.02em;
}
.methodology-step__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--c-text);
	margin: 0 0 var(--space-2);
}
.methodology-step__body {
	font-size: 0.8125rem;
	color: var(--c-text-secondary);
	line-height: 1.55;
	margin: 0;
}

/* Tier detail */
.tier-detail { padding-inline: var(--container-pad); padding-block: clamp(3rem, 7vw, 5rem); }
.tier-detail + .tier-detail { padding-block-start: 0; }
.tier-detail__inner { max-width: var(--container-max); margin-inline: auto; }
.tier-detail__head { max-width: 720px; margin: 0 0 var(--space-8); }
.tier-detail__head h2 { margin: var(--space-2) 0; }
.tier-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--space-8);
	align-items: start;
}
.tier-detail__specs {
	padding: var(--space-6);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	position: sticky;
	top: 90px;
}
.tier-detail__skus {
	padding: var(--space-6);
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
}
.tier-detail__heading {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--c-text-muted);
	margin: 0 0 var(--space-4);
}

/* Specs list (dl/dt/dd) */
.specs-list { margin: 0; }
.specs-row {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px dashed var(--border-default);
	font-size: 0.875rem;
}
.specs-row:last-child { border-bottom: 0; }
.specs-row dt { color: var(--c-text-muted); font-weight: 500; }
.specs-row dd { color: var(--c-text); margin: 0; font-weight: 500; }

/* SKU row list */
.sku-list { display: flex; flex-direction: column; gap: var(--space-2); }
.sku-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: all var(--duration-fast) var(--ease-out);
}
.sku-row:hover {
	border-color: var(--c-blue-500);
	background: var(--c-blue-50);
	transform: translateX(2px);
	color: inherit;
}
.sku-row--featured {
	border-color: var(--c-blue-500);
	background: linear-gradient(180deg, rgba(0, 85, 177, 0.04) 0%, #fff 100%);
}
.sku-row__main { flex: 1; min-width: 0; }
.sku-row__name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--c-text);
	margin-bottom: 2px;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.sku-row__desc {
	font-size: 0.8125rem;
	color: var(--c-text-muted);
}
.sku-row__price {
	font-family: var(--font-mono);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--c-blue-500);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* Service stats — chart grid */
.service-stats {
	padding-inline: var(--container-pad);
	padding-block: clamp(3rem, 7vw, 5rem);
	background: var(--c-elevated);
	border-block: 1px solid var(--border-subtle);
}
.service-stats__inner { max-width: var(--container-max); margin-inline: auto; }
.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-8);
}
.stat-chart {
	padding: var(--space-6);
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
}
.stat-chart--wide { grid-column: span 2; }
.stat-chart__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--c-text);
	margin: 0 0 2px;
}
.stat-chart__sub {
	font-size: 0.8125rem;
	color: var(--c-text-muted);
	margin: 0 0 var(--space-4);
}
.chart-svg {
	width: 100%;
	height: auto;
	display: block;
}
.chart-legend {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	font-size: 0.8125rem;
	color: var(--c-text-secondary);
}
.chart-legend--horizontal { flex-direction: row; gap: var(--space-5); }
.chart-legend li { display: flex; align-items: center; gap: var(--space-2); }
.chart-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

/* Changelog (methodology updates) */
.changelog { padding-inline: var(--container-pad); padding-block: clamp(3rem, 7vw, 5rem); }
.changelog__inner { max-width: var(--container-max); margin-inline: auto; }
.changelog-list {
	list-style: none;
	margin: var(--space-8) 0 0;
	padding: 0;
	position: relative;
}
.changelog-list::before {
	content: '';
	position: absolute;
	left: 90px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: linear-gradient(180deg, var(--c-blue-500), var(--c-blue-100));
}
.changelog-item {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: var(--space-6);
	padding: var(--space-4) 0;
	position: relative;
}
.changelog-item::before {
	content: '';
	position: absolute;
	left: 84px;
	top: 24px;
	width: 14px;
	height: 14px;
	background: var(--c-blue-500);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--c-blue-500);
	z-index: 1;
}
.changelog-item__date {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--c-text-muted);
	padding-top: var(--space-3);
}
.changelog-item__body {
	padding: var(--space-4) var(--space-5);
	background: var(--c-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	margin-left: var(--space-6);
}
.changelog-item__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--c-text);
	margin: 0 0 var(--space-2);
}
.changelog-item__body p {
	font-size: 0.875rem;
	color: var(--c-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* Service page responsive */
@media (max-width: 1024px) {
	.methodology-grid { grid-template-columns: repeat(2, 1fr); }
	.tier-detail__grid { grid-template-columns: 1fr; }
	.tier-detail__specs { position: static; }
	.stats-grid { grid-template-columns: 1fr; }
	.stat-chart--wide { grid-column: auto; }
}
@media (max-width: 640px) {
	.methodology-grid { grid-template-columns: 1fr; }
	.specs-row { grid-template-columns: 1fr; gap: 2px; }
	.sku-row { flex-direction: column; align-items: flex-start; }
	.sku-row__price { align-self: flex-end; }
	.changelog-item { grid-template-columns: 1fr; gap: var(--space-2); }
	.changelog-list::before, .changelog-item::before { display: none; }
	.changelog-item__body { margin-left: 0; }
}

/* ===================================================================
   CALLLINK DNA — 2026-05-14
   Front-page 11-section flow + /apply/ blue-banner + 3-tab layout
   =================================================================== */

:root {
	/* DNA tokens — direct lift from reference, used by ks-* classes below */
	--ks-primary:        #0055B1;
	--ks-primary-hover:  #004696;
	--ks-primary-deep:   #1A4596;
	--ks-primary-light:  #E6F0FA;
	--ks-yellow:         #FFDC00;
	--ks-navy:           #12263F;
	--ks-alert-red:      #D14F4F;
	--ks-alert-red-bg:   #FCE9E9;
	--ks-text:           #111111;
	--ks-text-muted:     #555555;
	--ks-bg-soft:        #F5F7FA;
	--ks-border:         #CCCCCC;
}

/* ---------- Container ---------- */
.ks-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---------- Section base ---------- */
.ks-section { padding: 80px 0; }
.ks-section--soft { background: var(--ks-bg-soft); }
.ks-section--blue { background: var(--ks-primary); color: #fff; }
.ks-section--blue h2, .ks-section--blue h3, .ks-section--blue p { color: #fff; }
.ks-section__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.ks-section__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--ks-primary); text-transform: uppercase; margin-bottom: 12px; }
.ks-section--blue .ks-section__eyebrow { color: var(--ks-yellow); }
.ks-section h2.ks-section__title { font-size: clamp(28px, 4vw, 42px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--ks-text); }
.ks-section--blue h2.ks-section__title { color: #fff; }
.ks-section__lede { font-size: 17px; line-height: 1.65; color: var(--ks-text-muted); margin: 0; }
.ks-section--blue .ks-section__lede { color: rgba(255,255,255,.85); }

/* ---------- Buttons (ks-btn family) ---------- */
.ks-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 8px; font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; transition: all 0.18s ease; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; }
.ks-btn--primary { background: var(--ks-primary); color: #fff; }
.ks-btn--primary:hover { background: var(--ks-primary-hover); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,85,177,.25); }
.ks-btn--outline { background: transparent; color: var(--ks-primary); border-color: var(--ks-primary); }
.ks-btn--outline:hover { background: var(--ks-primary-light); }
.ks-btn--ghost-white { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.ks-btn--ghost-white:hover { background: rgba(255,255,255,.2); }
.ks-btn--lg { padding: 18px 36px; font-size: 17px; }
.ks-btn--block { display: flex; width: 100%; padding: 18px 24px; font-size: 16px; height: 56px; }
.ks-btn:disabled, .ks-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ---------- Sticky header (override) ---------- */
.site-header { position: sticky; top: 0; z-index: 80; background: #fff; border-bottom: 1px solid #eee; transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.site-header__wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 24px; max-width: 1280px; margin: 0 auto; }

/* ===================================================================
   SECTION 1 — HERO
   =================================================================== */
.ks-hero { position: relative; padding: 96px 0 80px; background: linear-gradient(180deg, #FFF 0%, var(--ks-primary-light) 100%); overflow: hidden; }
.ks-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.ks-hero__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.15em; color: var(--ks-primary); text-transform: uppercase; margin: 0 0 16px; }
.ks-hero__title { font-size: clamp(36px, 5vw, 56px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 24px; color: var(--ks-text); }
.ks-hero__title em { font-style: normal; color: var(--ks-primary); }
.ks-hero__sub { font-size: 18px; line-height: 1.6; color: var(--ks-text-muted); margin: 0 0 32px; max-width: 540px; }
.ks-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ks-hero__visual { position: relative; height: 380px; display: flex; align-items: center; justify-content: center; }

/* ===================================================================
   SECTION 2 — Recent campaigns (replaces dashboard per design judgement)
   =================================================================== */
.ks-results { padding: 80px 0; }
.ks-results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ks-result-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.ks-result-card__industry { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--ks-primary); background: var(--ks-primary-light); padding: 4px 10px; border-radius: 999px; text-transform: uppercase; margin-bottom: 16px; }
.ks-result-card__url { font-family: ui-monospace, monospace; font-size: 13px; color: var(--ks-text-muted); margin: 0 0 12px; }
.ks-result-card__keyword { font-size: 18px; font-weight: 700; color: var(--ks-text); margin: 0 0 20px; }
.ks-result-card__before-after { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; background: var(--ks-bg-soft); border-radius: 8px; }
.ks-result-card__pos { text-align: center; flex: 1; }
.ks-result-card__pos-label { font-size: 11px; color: var(--ks-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 4px; }
.ks-result-card__pos-num { font-size: 28px; font-weight: 800; color: var(--ks-text); }
.ks-result-card__pos--after .ks-result-card__pos-num { color: var(--ks-primary); }
.ks-result-card__arrow { color: var(--ks-primary); font-size: 20px; }
.ks-result-card__meta { font-size: 12px; color: var(--ks-text-muted); margin: 16px 0 0; text-align: center; }

/* ===================================================================
   SECTION 3 — Backlink importance infographic (70% softened)
   =================================================================== */
.ks-importance { padding: 80px 0; }
.ks-importance__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ks-importance__chart { display: flex; flex-direction: column; gap: 8px; }
.ks-bar { display: flex; align-items: center; gap: 16px; }
.ks-bar__label { width: 200px; font-size: 14px; font-weight: 600; color: var(--ks-text); }
.ks-bar__track { flex: 1; height: 36px; background: var(--ks-bg-soft); border-radius: 6px; position: relative; overflow: hidden; }
.ks-bar__fill { height: 100%; background: var(--ks-primary); display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; color: #fff; font-weight: 700; font-size: 14px; border-radius: 6px; }
.ks-bar__fill--alt { background: var(--ks-primary-deep); }
.ks-bar__fill--muted { background: #B8C5D6; color: var(--ks-text); }

/* ===================================================================
   SECTION 4 — ROI curve
   =================================================================== */
.ks-roi { padding: 80px 0; background: var(--ks-bg-soft); }
.ks-roi__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ks-roi__svg { width: 100%; height: auto; }

/* ===================================================================
   SECTION 5 — Definition (gray full-width)
   =================================================================== */
.ks-define { padding: 80px 0; background: var(--ks-bg-soft); text-align: center; }
.ks-define__body { font-size: 18px; line-height: 1.75; color: var(--ks-text); max-width: 780px; margin: 0 auto; }

/* ===================================================================
   SECTION 6 — Risky backlinks warning (full-width blue)
   =================================================================== */
.ks-risk { padding: 90px 0; }
.ks-risk__inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center; }
.ks-risk__points { display: grid; gap: 24px; }
.ks-risk__point { display: flex; gap: 16px; align-items: start; }
.ks-risk__point-num { width: 32px; height: 32px; border-radius: 50%; background: var(--ks-yellow); color: var(--ks-primary); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.ks-risk__point p { color: rgba(255,255,255,.92); line-height: 1.6; margin: 0; font-size: 15px; }
.ks-risk__point strong { color: #fff; font-weight: 700; }

/* ===================================================================
   SECTION 7 — Safe + tier table
   =================================================================== */
.ks-safe { padding: 80px 0; }
.ks-safe__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ks-tier-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.ks-tier-table th, .ks-tier-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #eee; font-size: 14px; }
.ks-tier-table th { background: var(--ks-bg-soft); font-weight: 700; color: var(--ks-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.ks-tier-table tr:last-child td { border-bottom: none; }
.ks-tier-table .ks-tier-badge { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: var(--ks-primary); color: #fff; font-weight: 800; text-align: center; line-height: 28px; font-size: 13px; }
.ks-tier-table .ks-tier-badge--A { background: var(--ks-primary-deep); }
.ks-tier-table .ks-tier-badge--B { background: #2D83CF; }
.ks-tier-table .ks-tier-badge--C { background: #5DA3DF; }
.ks-tier-table .ks-tier-badge--D { background: #92C0E9; color: var(--ks-text); }
.ks-tier-table .ks-tier-badge--E { background: #C2DCF3; color: var(--ks-text); }

/* ===================================================================
   SECTION 8 — Vs competitors (2-col gray vs blue)
   =================================================================== */
/* ks-vs — dual-tone background that bleeds full-width on large monitors,
   while the actual text content is constrained to 1100px and centered.
   Trick: linear-gradient on the outer section paints gray/blue split,
   inner wrapper holds the two columns within max-width. */
.ks-vs {
    padding: 0;
    background: linear-gradient(to right, #eceff3 0%, #eceff3 50%, var(--ks-primary) 50%, var(--ks-primary) 100%);
}
.ks-vs__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.ks-vs__col { padding: 80px 60px; background: transparent; }
.ks-vs__col--bad { /* color comes from outer gradient now */ }
.ks-vs__col--good { color: #fff; }
.ks-vs__col h3 { font-size: 22px; font-weight: 800; margin: 0 0 32px; letter-spacing: -0.01em; }
.ks-vs__col--good h3 { color: #fff; }
.ks-vs__list { display: grid; gap: 20px; }
.ks-vs__item { display: flex; gap: 16px; align-items: start; }
.ks-vs__num { width: 36px; height: 36px; border-radius: 8px; background: #fff; color: var(--ks-text-muted); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.ks-vs__col--good .ks-vs__num { background: var(--ks-yellow); color: var(--ks-primary); }
.ks-vs__item h4 { font-size: 15px; font-weight: 700; margin: 4px 0 6px; }
.ks-vs__col--good .ks-vs__item h4 { color: #fff; }
.ks-vs__item p { font-size: 14px; line-height: 1.6; color: var(--ks-text-muted); margin: 0; }
.ks-vs__col--good .ks-vs__item p { color: rgba(255,255,255,.85); }

/* ===================================================================
   SECTION 9 — Big CTA box
   =================================================================== */
.ks-cta-big { padding: 80px 0; }
.ks-cta-big__box { background: linear-gradient(135deg, var(--ks-primary) 0%, var(--ks-primary-deep) 100%); border-radius: 16px; padding: 64px 48px; text-align: center; box-shadow: 0 12px 40px rgba(0,85,177,.18); }
.ks-cta-big__box h2 { color: #fff; font-size: clamp(28px, 4vw, 40px); margin: 0 0 16px; font-weight: 800; letter-spacing: -0.02em; }
.ks-cta-big__box p { color: rgba(255,255,255,.85); font-size: 17px; margin: 0 0 32px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ===================================================================
   Floating chat + Telegram
   =================================================================== */
.ks-floats { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 90; }
.ks-float-btn { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: all .2s; cursor: pointer; border: none; }
.ks-float-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.ks-float-btn--chat { background: var(--ks-yellow); color: var(--ks-text); }
.ks-float-btn--tg { background: var(--ks-navy); color: #fff; }
.ks-float-btn svg { width: 18px; height: 18px; }
@media (max-width: 768px) {
	.ks-floats { right: 16px; bottom: 16px; }
	.ks-float-btn { padding: 12px 16px; font-size: 12px; }
}

/* ===================================================================
   /APPLY/ PAGE
   =================================================================== */
.ks-apply-hero { background: var(--ks-primary); height: 150px; display: flex; align-items: flex-start; justify-content: center; padding-top: 32px; position: relative; }
.ks-apply-hero h1 { color: #fff; font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; margin: 0; letter-spacing: -0.02em; }

.ks-apply-tabs { display: flex; gap: 4px; max-width: 720px; margin: -1px auto 0; padding: 0 24px; position: relative; z-index: 2; }
.ks-apply-tab { flex: 1; padding: 16px 12px; background: rgba(255,255,255,.85); color: var(--ks-primary); text-align: center; font-weight: 700; font-size: 15px; cursor: pointer; border: none; border-radius: 12px 12px 0 0; position: relative; transition: all .15s; text-decoration: none; }
.ks-apply-tab:hover { background: rgba(255,255,255,.95); }
.ks-apply-tab.is-active { background: #fff; color: var(--ks-text); padding-top: 20px; padding-bottom: 22px; box-shadow: 0 -4px 12px rgba(0,0,0,.05); }
.ks-apply-tab__best { position: absolute; top: -10px; right: 12px; background: var(--ks-yellow); color: var(--ks-primary); font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 4px; letter-spacing: 0.08em; }

.ks-apply-body { background: #fff; max-width: 1200px; margin: 0 auto; padding: 56px 24px 96px; display: grid; grid-template-columns: 1fr 2fr; gap: 56px; }

/* Left — package info */
.ks-apply-info h2 { font-size: 28px; font-weight: 800; margin: 0 0 10px; color: var(--ks-text); letter-spacing: -0.02em; }
.ks-apply-info__lead { font-size: 15px; color: var(--ks-text-muted); margin: 0 0 24px; line-height: 1.65; }
.ks-apply-info__hint { background: var(--ks-primary); color: #fff; padding: 18px 20px; border-radius: 10px; font-size: 14px; line-height: 1.65; margin: 0 0 20px; }
.ks-apply-info__chip { display: inline-block; background: var(--ks-bg-soft); color: var(--ks-text-muted); padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-bottom: 28px; }
.ks-apply-info__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ks-apply-info__list li { font-size: 14px; line-height: 1.6; color: var(--ks-text); padding-left: 24px; position: relative; }
.ks-apply-info__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--ks-primary-light); border: 2px solid var(--ks-primary); }

/* Right — form */
.ks-apply-form__alert { background: var(--ks-alert-red-bg); border-left: 4px solid var(--ks-alert-red); padding: 16px 20px; border-radius: 4px; margin-bottom: 24px; }
.ks-apply-form__alert-label { font-weight: 700; color: var(--ks-alert-red); font-size: 14px; margin-bottom: 4px; }
.ks-apply-form__alert p { font-style: italic; color: var(--ks-text-muted); font-size: 13px; line-height: 1.5; margin: 0; }

.ks-apply-form__price-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
.ks-apply-form__price-label { font-size: 13px; color: var(--ks-text-muted); }
.ks-apply-form__price-value { font-size: 32px; font-weight: 800; color: var(--ks-primary); letter-spacing: -0.02em; }
.ks-apply-form__price-credits { font-size: 13px; color: var(--ks-text-muted); margin-left: 6px; font-weight: 500; }

.ks-apply-form__group { margin-bottom: 36px; }
.ks-apply-form__group-label { font-weight: 700; font-size: 14px; color: var(--ks-text); margin-bottom: 12px; display: block; letter-spacing: -0.005em; }

/* Radio cards */
.ks-radio-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1.5px solid var(--ks-border); border-radius: 10px; cursor: pointer; transition: all .15s; margin-bottom: 12px; background: #fff; }
.ks-radio-card:hover { border-color: var(--ks-primary); }
.ks-radio-card input[type="radio"] { appearance: none; width: 18px; height: 18px; border: 2px solid var(--ks-border); border-radius: 50%; position: relative; flex-shrink: 0; cursor: pointer; }
.ks-radio-card input[type="radio"]:checked { border-color: var(--ks-primary); border-width: 5px; }
.ks-radio-card.is-checked { border: 1.5px solid var(--ks-primary); background: var(--ks-primary-light); }
.ks-radio-card__body { flex: 1; }
.ks-radio-card__title { font-weight: 700; font-size: 14px; color: var(--ks-text); margin: 0 0 4px; }
.ks-radio-card__meta { font-size: 12px; color: var(--ks-text-muted); margin: 0; }
.ks-radio-card__price { font-weight: 800; font-size: 16px; color: var(--ks-primary); margin-left: auto; }

/* Inputs */
.ks-input, .ks-select { width: 100%; padding: 14px 16px; border: 1.5px solid var(--ks-border); border-radius: 8px; font-size: 15px; font-family: inherit; color: var(--ks-text); background: #fff; transition: border-color .15s; }
.ks-input:focus, .ks-select:focus { outline: none; border-color: var(--ks-primary); }
.ks-input--error { border-color: var(--ks-alert-red); }
.ks-help { font-size: 12px; color: var(--ks-text-muted); margin: 6px 0 0; line-height: 1.4; }
.ks-help--inline { display: block; margin-bottom: 8px; }

/* Toggle */
.ks-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ks-toggle__switch { width: 44px; height: 24px; background: #ccc; border-radius: 999px; position: relative; transition: background .2s; flex-shrink: 0; }
.ks-toggle__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ks-toggle input { display: none; }
.ks-toggle input:checked + .ks-toggle__switch { background: var(--ks-primary); }
.ks-toggle input:checked + .ks-toggle__switch::after { transform: translateX(20px); }
.ks-toggle__text { font-size: 14px; color: var(--ks-text); }

/* Final note */
.ks-apply-form__note { text-align: center; color: var(--ks-text-muted); font-size: 12px; line-height: 1.5; margin: 16px 0 20px; }

/* Responsive */
@media (max-width: 980px) {
	.ks-hero__grid, .ks-importance__grid, .ks-roi__grid, .ks-safe__grid, .ks-risk__inner { grid-template-columns: 1fr; gap: 40px; }
	.ks-apply-body { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 64px; }
	/* On mobile the dual-tone gradient becomes top/bottom — gray on top, blue on bottom */
	.ks-vs { background: linear-gradient(to bottom, #eceff3 0%, #eceff3 50%, var(--ks-primary) 50%, var(--ks-primary) 100%); }
	.ks-vs__inner { grid-template-columns: 1fr; }
	.ks-vs__col { padding: 60px 32px; }
	.ks-results__grid { grid-template-columns: 1fr; }
	.ks-section { padding: 60px 0; }
	.ks-hero { padding: 64px 0 48px; }
}

/* AU-17 — Mobile apply page: form first, package info below + collapsed.
   On phones the order form is the action — push it above the long package
   description and update log so the user lands on Easy/Normal/High right
   after the hero tabs. */
@media (max-width: 980px) {
	.ks-apply-body { display: flex; flex-direction: column; }
	.ks-apply-form  { order: 1; }
	.ks-apply-info  { order: 2; }
	/* Update log is noise on a phone — bury it behind a toggle. */
	.ks-update-log { margin-top: 24px; }
}
@media (max-width: 640px) {
	.ks-apply-tabs { padding: 0 12px; }
	.ks-apply-tab { font-size: 13px; padding: 14px 8px; }
	.ks-bar__label { width: 130px; font-size: 12px; }
	.ks-cta-big__box { padding: 40px 24px; }

	/* Campaign-size radio cards → 3-button segmented menu on mobile.
	   Keep the badge + qty + price visible, drop the long meta line. */
	.ks-radio-group {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
	.ks-radio-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 12px 10px;
		margin-bottom: 0;
		min-height: 92px;
	}
	.ks-radio-card input[type="radio"] {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 14px;
		height: 14px;
	}
	.ks-radio-card { position: relative; }
	.ks-radio-card__body { width: 100%; }
	.ks-radio-card__title-row { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 4px; }
	.ks-radio-card__title { font-size: 12px; line-height: 1.25; }
	.ks-radio-card__meta  { display: none; }   /* hide long meta on mobile */
	.ks-radio-card__price {
		margin-left: 0;
		font-size: 14px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.ks-radio-card__price-credits { font-size: 10px; }

	/* Bullet list + update log: collapsed inside <details> on mobile. The
	   <summary> shows package name; tapping expands the full list. */
	.ks-apply-info__list,
	.ks-update-log {
		display: none;
	}
	.ks-apply-info.is-expanded .ks-apply-info__list,
	.ks-apply-info.is-expanded .ks-update-log { display: block; }
	.ks-apply-info__toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 12px;
		padding: 8px 14px;
		background: transparent;
		border: 1px solid var(--ks-border, #e5e7eb);
		border-radius: 999px;
		color: var(--ks-primary, #1d4ed8);
		font-size: 12px;
		font-weight: 700;
		cursor: pointer;
	}
	.ks-apply-info__toggle svg { transition: transform .2s ease; }
	.ks-apply-info__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
}
/* Desktop hides the mobile-only toggle. */
@media (min-width: 641px) {
	.ks-apply-info__toggle { display: none; }
}

/* AU-18 — Block toggle layout: a richer label with sub-text underneath
   instead of a single line. Used for the rank-monitoring opt-in. */
.ks-toggle--block { align-items: flex-start; gap: 14px; }
.ks-toggle--block .ks-toggle__switch { margin-top: 3px; flex-shrink: 0; }
.ks-toggle__copy { display: flex; flex-direction: column; gap: 4px; }
.ks-toggle__sub {
	display: block;
	font-size: 12.5px;
	color: var(--ks-text-muted);
	line-height: 1.55;
}

/* ===================================================================
   Round 2 — competition badges + update log
   =================================================================== */

/* Radio card refinement — title row with competition badge */
.ks-radio-card__title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.ks-comp-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 4px; border: 1px solid; text-transform: uppercase; }

/* Update log on /apply/ left panel */
.ks-update-log { margin-top: 36px; padding-top: 24px; border-top: 1px solid #eee; }
.ks-update-log__head { margin-bottom: 14px; }
.ks-update-log__chip { display: inline-block; background: var(--ks-bg-soft); color: var(--ks-text-muted); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; }
.ks-update-log__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ks-update-log__item { display: grid; grid-template-columns: 84px 12px 1fr; gap: 6px; align-items: start; font-size: 13px; line-height: 1.5; }
.ks-update-log__date { font-weight: 700; color: var(--ks-text); font-variant-numeric: tabular-nums; }
.ks-update-log__sep { color: #B0B0B0; text-align: center; }
.ks-update-log__text { color: var(--ks-text-muted); }

@media (max-width: 640px) {
	.ks-update-log__item { grid-template-columns: 80px 12px 1fr; font-size: 12px; }
}

/* ===================================================================
   Round 3 — header user area, pay-with cards, credits guard
   =================================================================== */

/* ----- Header user area (logged in / logged out) ----- */
.ks-user-area { display: inline-flex; align-items: center; gap: 12px; }
.ks-user-area--out { display: inline-flex; gap: 8px; }

/* Balance chip */
.balance-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: 999px;
	background: var(--ks-primary-light); color: var(--ks-primary);
	font-weight: 700; font-size: 13px; text-decoration: none;
	transition: background .15s;
	white-space: nowrap;
}
.balance-chip:hover { background: #D9E8F8; color: var(--ks-primary-deep); }
.balance-chip--zero { background: #FFEBEB; color: #B33A3A; }
.balance-chip--zero:hover { background: #FCD7D7; }
.balance-chip__icon { width: 14px; height: 14px; }

/* User menu */
.ks-user-menu { position: relative; }
.ks-user-menu__trigger {
	display: inline-flex; align-items: center; gap: 6px;
	background: transparent; border: 1px solid var(--ks-border);
	padding: 8px 14px; border-radius: 8px;
	font-size: 13px; font-weight: 600; color: var(--ks-text);
	cursor: pointer;
	transition: border-color .15s;
}
.ks-user-menu__trigger:hover { border-color: var(--ks-primary); }
.ks-user-menu__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-user-menu__caret { color: var(--ks-text-muted); }
.ks-user-menu__dropdown {
	position: absolute; top: calc(100% + 6px); right: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	list-style: none; padding: 6px 0; margin: 0;
	z-index: 90;
}
.ks-user-menu__dropdown li a {
	display: block; padding: 10px 16px;
	color: var(--ks-text); text-decoration: none;
	font-size: 14px;
	transition: background .12s;
}
.ks-user-menu__dropdown li a:hover { background: var(--ks-bg-soft); color: var(--ks-primary); }
.ks-user-menu__sep { height: 1px; background: #eee; margin: 6px 0; padding: 0; }
@media (max-width: 768px) {
	.balance-chip span { display: none; }
	.balance-chip__icon { width: 16px; height: 16px; }
	.balance-chip { padding: 8px 10px; }
	.ks-user-menu__name { max-width: 80px; }
}

/* ----- Radio card price (USD + credits dual) ----- */
.ks-radio-card__price {
	display: flex; flex-direction: column; align-items: flex-end;
	font-weight: 800; font-size: 16px; color: var(--ks-primary);
	line-height: 1.2;
}
.ks-radio-card__price-credits {
	font-size: 11px; font-weight: 600; color: var(--ks-text-muted);
	margin-top: 2px;
}

/* ----- Pay-with cards ----- */
.ks-paywith-group { display: grid; gap: 10px; }
.ks-paywith-card {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 16px 18px; border: 1.5px solid var(--ks-border);
	border-radius: 8px; cursor: pointer; background: #fff;
	transition: all .15s;
}
.ks-paywith-card:hover:not(.is-disabled) { border-color: var(--ks-primary); }
.ks-paywith-card.is-checked { border-color: var(--ks-primary); background: var(--ks-primary-light); }
.ks-paywith-card.is-disabled { opacity: 0.55; cursor: not-allowed; background: var(--ks-bg-soft); }
.ks-paywith-card input[type="radio"] {
	appearance: none; width: 18px; height: 18px;
	border: 2px solid var(--ks-border); border-radius: 50%;
	flex-shrink: 0; margin-top: 2px;
	cursor: inherit;
}
.ks-paywith-card input[type="radio"]:checked { border-color: var(--ks-primary); border-width: 5px; }
.ks-paywith-card__body { flex: 1; min-width: 0; }
.ks-paywith-card__title-row {
	display: flex; align-items: center; gap: 10px;
	font-weight: 700; color: var(--ks-text);
	margin-bottom: 6px;
}
.ks-paywith-card__icon { width: 18px; height: 18px; color: var(--ks-primary); flex-shrink: 0; }
.ks-paywith-card__amount { margin-left: auto; font-size: 16px; color: var(--ks-primary); }
.ks-paywith-help { display: block; font-size: 13px; color: var(--ks-text-muted); line-height: 1.5; }
.ks-paywith-help a { color: var(--ks-primary); font-weight: 700; text-decoration: underline; }

/* ----- /credits/ anonymous guard banner ----- */
.ks-credits-guard {
	max-width: 1280px; margin: 0 auto 24px; padding: 0 24px;
}
.ks-credits-guard__inner {
	background: linear-gradient(135deg, #FFF8E0 0%, #FFF3C4 100%);
	border-left: 4px solid var(--ks-yellow);
	border-radius: 8px;
	padding: 18px 22px;
	display: flex; align-items: center; gap: 16px;
	flex-wrap: wrap;
}
.ks-credits-guard__inner svg { color: #B89500; flex-shrink: 0; }
.ks-credits-guard__inner strong { display: block; font-size: 15px; color: var(--ks-text); }
.ks-credits-guard__inner span { font-size: 13px; color: var(--ks-text-muted); }
.ks-credits-guard__ctas { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 640px) {
	.ks-credits-guard__ctas { margin-left: 0; width: 100%; }
	.ks-credits-guard__ctas a { flex: 1; text-align: center; }
}

/* ===================================================================
   Sprint 4 — Auth UI (AU-01/02/06/09)
   =================================================================== */

/* OAuth area */
.auth-oauth { display: flex; justify-content: center; margin-bottom: 16px; }
.auth-divider {
	position: relative; text-align: center; margin: 20px 0;
	font-size: 12px; color: var(--ks-text-muted); letter-spacing: 0.06em; text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after {
	content: ""; position: absolute; top: 50%;
	width: calc(50% - 28px); height: 1px; background: #e6e6e6;
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-divider span { background: #fff; padding: 0 8px; position: relative; z-index: 1; }

/* Phone field group */
.field__control--phone { display: flex; gap: 8px; align-items: stretch; }
.field__control--phone .iti { flex: 1; }
.field__control--phone input[type=tel],
.field__control--phone input[type=text] {
	flex: 1; padding: 12px 14px;
	border: 1.5px solid var(--ks-border); border-radius: 8px;
	font-size: 15px; font-family: inherit;
}
.field__control--phone input.is-error { border-color: var(--ks-alert-red); }
.field__control--phone .ks-btn { flex-shrink: 0; padding: 12px 18px; font-size: 14px; }

/* Phone status line */
.ks-phone-status {
	margin: 8px 0 0; font-size: 13px; color: var(--ks-text-muted);
	min-height: 18px;
}
.ks-phone-status.is-ok    { color: #16a34a; font-weight: 600; }
.ks-phone-status.is-error { color: var(--ks-alert-red); font-weight: 600; }

/* AU-06 password strength meter */
.ks-pw-meter {
	display: flex; align-items: center; gap: 10px;
	margin-top: 8px; font-size: 12px;
}
.ks-pw-meter[aria-hidden="true"] { opacity: 0.4; }
.ks-pw-meter__bar {
	flex: 1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden;
}
.ks-pw-meter__bar > span {
	display: block; height: 100%; width: 0;
	background: #dc2626; transition: width .2s, background .2s;
	border-radius: 3px;
}
.ks-pw-meter__label {
	min-width: 80px; text-align: right; font-weight: 700; color: var(--ks-text-muted);
}

/* AU-09 checkbox rows */
.field--checkbox { margin: 12px 0; }
.auth-form__checkbox {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 14px; line-height: 1.5; color: var(--ks-text);
	cursor: pointer;
}
.auth-form__checkbox input[type="checkbox"] {
	margin-top: 3px; width: 16px; height: 16px;
	accent-color: var(--ks-primary);
	flex-shrink: 0;
}
.auth-form__checkbox a {
	color: var(--ks-primary); text-decoration: underline; font-weight: 600;
}

/* Tighten intl-tel-input dropdown to match our theme */
.iti__country-list { font-family: inherit; font-size: 13px; }
.iti--separate-dial-code .iti__selected-flag { background: #f7f9fc; border-right: 1px solid #e6e6e6; border-radius: 8px 0 0 8px; }


/* ===================================================================
   Sprint 5-Hot — v10 P0 fixes
   =================================================================== */

/* ----- U-18 designed modal (replaces native confirm/alert) ----- */
.ks-modal { padding: 0; border: 0; max-width: 480px; width: calc(100% - 32px); border-radius: 16px; background: #fff; box-shadow: 0 24px 64px rgba(0,0,0,.25); color: var(--ks-text); }
.ks-modal::backdrop { background: rgba(17, 36, 76, .55); backdrop-filter: blur(2px); }
.ks-modal__panel { padding: 28px 28px 22px; }
.ks-modal__title { font-size: 20px; font-weight: 800; margin: 0 0 12px; color: var(--ks-text); letter-spacing: -0.01em; }
.ks-modal__body { font-size: 14px; color: var(--ks-text-muted); line-height: 1.55; margin: 0 0 16px; }
.ks-modal__body p { margin: 0 0 12px; }
.ks-modal__body p:last-child { margin-bottom: 0; }
.ks-modal__details { list-style: none; margin: 0 0 16px; padding: 14px 16px; background: var(--ks-bg-soft); border-radius: 10px; display: grid; gap: 8px; }
.ks-modal__details li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.ks-modal__details span { color: var(--ks-text-muted); flex-shrink: 0; }
.ks-modal__details strong { color: var(--ks-text); font-weight: 600; text-align: right; word-break: break-all; }
.ks-modal__actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 28px 24px; }
.ks-modal__actions .ks-btn { min-width: 110px; padding: 12px 20px; font-size: 14px; }
.ks-btn--danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.ks-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
@media (max-width: 480px) {
	.ks-modal { width: calc(100% - 24px); }
	.ks-modal__panel { padding: 22px 20px 16px; }
	.ks-modal__actions { padding: 12px 20px 20px; flex-direction: column-reverse; }
	.ks-modal__actions .ks-btn { width: 100%; }
}

/* ----- C-2 v14 /apply/ tabs — 1100px container, centered, overlap hero bottom ----- */
.ks-apply-tabs-wrap {
	max-width: 1100px;
	margin: -56px auto 0;
	padding: 0 24px;
	position: relative;
	z-index: 2;
}
.ks-apply-tabs {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	background: transparent;
	max-width: none;
}
.ks-apply-tab {
	background: rgba(255,255,255,.16);
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	padding: 14px 24px;
	border-radius: 10px 10px 0 0;
	border: 1px solid rgba(255,255,255,.42);
	border-bottom: none;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
	text-decoration: none;
	text-align: center;
	position: relative;
}
.ks-apply-tab:hover { background: rgba(255,255,255,.30); color: #fff; }
.ks-apply-tab.is-active {
	background: #ffffff;
	color: #0A2540;
	font-weight: 800;
	border-color: #ffffff;
	box-shadow: 0 -6px 16px rgba(0,0,0,.12);
	z-index: 2;
	margin-bottom: -1px;
	padding-top: 18px;
	padding-bottom: 18px;
}
.ks-apply-tab__best {
	position: absolute; top: -10px; right: 10px;
	background: #FFD400; color: #0A2540;
	font-size: 10px; font-weight: 800;
	padding: 3px 7px; border-radius: 3px;
	letter-spacing: 0.06em;
}
@media (max-width: 640px) { .ks-apply-tab { font-size: 13px; padding: 12px 14px; } }

/* ----- v14 stage progress indicator (between hero and tabs — same blue band) ----- */
.ks-stages { background: var(--ks-primary); padding: 8px 24px 18px; max-width: none; margin: 0; }
.ks-stages__list {
	display: flex; align-items: center; justify-content: space-between;
	list-style: none; padding: 0; margin: 0 auto; gap: 4px;
	max-width: 760px;
	position: relative;
}
.ks-stages__list::before {
	content: ""; position: absolute; left: 8%; right: 8%; top: 8px;
	height: 2px; background: rgba(255,255,255,.35);
	z-index: 0;
}
.ks-stage { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; position: relative; z-index: 1; }
.ks-stage__dot { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.7); }
.ks-stage__label { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.ks-stage__goal  { font-size: 10px; color: rgba(255,255,255,.7); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 640px) { .ks-stage__label { font-size: 11px; } .ks-stage__goal { display: none; } }

/* ----- v14 stage goal callout (left panel under hint) ----- */
.ks-apply-info__goal {
	margin: 12px 0 16px;
	padding: 10px 12px;
	background: var(--ks-primary-light);
	border-radius: 8px;
	font-size: 13px; color: var(--ks-primary-deep); font-weight: 600;
}
.ks-apply-info__goal span { color: var(--ks-primary); font-weight: 700; }

/* ----- v14 Update log: title + body ----- */
.ks-update-item { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px dashed rgba(0,0,0,.06); }
.ks-update-item:last-child { border-bottom: none; }
.ks-update-item__date { font-weight: 700; color: var(--ks-primary); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.ks-update-item__title { font-weight: 600; color: var(--ks-text); font-size: 13px; line-height: 1.35; }
.ks-update-item__body { color: var(--ks-text-muted); font-size: 12px; line-height: 1.55; margin-top: 2px; }

/* ----- v14 Apply hero — full-width blue, deep bottom padding so tabs overlap into it ----- */
.ks-apply-hero {
	background: var(--ks-primary);
	padding: 32px 24px 64px;
	height: auto;
	display: block;
}
.ks-apply-hero__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.ks-apply-hero h1 { color: #fff; font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; margin: 0 0 10px; letter-spacing: -0.02em; }
.ks-apply-hero__sub { color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.55; max-width: 560px; margin: 0 auto; }

/* ----- v15 Update-log collapse/expand (5 visible by default + Show more) ----- */
.ks-update-log .ks-update-item.is-collapsed { display: none; }
.ks-update-log.is-expanded .ks-update-item.is-collapsed { display: grid; }
.ks-update-log__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var(--ks-border, #e5e7eb);
	border-radius: 999px;
	color: var(--ks-primary, #1d4ed8);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .15s;
}
.ks-update-log__toggle:hover {
	background: var(--ks-primary-light, #eef2ff);
	border-color: var(--ks-primary, #1d4ed8);
}
.ks-update-log__toggle-icon { transition: transform .2s ease; }
.ks-update-log__toggle[aria-expanded="true"] .ks-update-log__toggle-icon { transform: rotate(180deg); }

/* ----- v15 Auth card — let the GSI button breathe so it never clips on the right ----- */
.auth-oauth {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-5);
}
.auth-oauth > div { max-width: 100%; }
.auth-oauth iframe { max-width: 100% !important; }

/* ----- AU-12 header z-index above translation/extension overlays ----- */
.site-header { z-index: 1000 !important; }
.ks-user-menu__dropdown { z-index: 1001; }
.ks-floats { z-index: 999; }
.ks-modal[open] { z-index: 1100; }

/* ----- U-15 disabled-state placeholder for Google/Phone (graceful degradation visible) ----- */
.ks-auth-placeholder {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 16px;
	background: var(--ks-bg-soft); border: 1px dashed var(--ks-border);
	border-radius: 8px;
	font-size: 13px; color: var(--ks-text-muted);
	margin-bottom: 12px;
}
.ks-auth-placeholder svg { width: 16px; height: 16px; opacity: 0.6; }
.ks-auth-placeholder em { font-style: italic; }

/* ----- U-14 dropdown a11y reset ----- */
.ks-user-menu__dropdown[role="menu"] li { list-style: none; }
.ks-user-menu__dropdown[role="menu"] a { display: block; outline-offset: -2px; }
.ks-user-menu__dropdown[role="menu"] a:focus-visible { outline: 2px solid var(--ks-primary); background: var(--ks-primary-light); }

/* ===================================================================
   Phase 2 — Performance dashboard
   =================================================================== */
.ks-perf { padding: 64px 0 80px; background: var(--ks-bg-soft); }
.ks-perf__cards {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
	margin-bottom: 24px;
}
.ks-perf-card {
	background: #fff; border: 1px solid #eee; border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ks-perf-card--wide { grid-column: span 2; }
.ks-perf-card__label {
	font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
	color: var(--ks-text-muted); text-transform: uppercase; margin: 0 0 10px;
}
.ks-perf-card__value {
	font-size: 28px; font-weight: 800; color: var(--ks-text);
	letter-spacing: -0.02em; margin: 0 0 4px;
}
.ks-perf-card__delta {
	font-size: 12px; font-weight: 600; margin: 0; color: var(--ks-text-muted);
}
.ks-perf-card__delta .is-up   { color: #16a34a; }
.ks-perf-card__delta .is-down { color: #dc2626; }
.ks-perf-card__delta .is-flat { color: var(--ks-text-muted); }
.ks-perf-card__chart { width: 100%; height: 80px; display: block; margin-top: 6px; }

.ks-perf-dist {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 6px;
}
.ks-perf-dist li {
	display: flex; justify-content: space-between; align-items: baseline;
	font-size: 13px;
}
.ks-perf-dist li span    { color: var(--ks-text-muted); }
.ks-perf-dist li strong  { font-size: 18px; font-weight: 800; color: var(--ks-primary); }

.ks-perf__table-wrap { overflow-x: auto; }
.ks-perf-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); border: 1px solid #eee; }
.ks-perf-table th, .ks-perf-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.ks-perf-table th { background: var(--ks-bg-soft); font-weight: 700; color: var(--ks-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
.ks-perf-table tr:last-child td { border-bottom: none; }
.ks-perf-table td.is-up   { color: #16a34a; font-weight: 600; }
.ks-perf-table td.is-down { color: #dc2626; font-weight: 600; }
.ks-perf-pill {
	display: inline-block; padding: 2px 10px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.ks-perf-pill.is-up   { background: #dcfce7; color: #166534; }
.ks-perf-pill.is-down { background: #fee2e2; color: #991b1b; }
.ks-perf-pill.is-flat { background: var(--ks-bg-soft); color: var(--ks-text-muted); }

@media (max-width: 980px) {
	.ks-perf__cards { grid-template-columns: repeat(2, 1fr); }
	.ks-perf-card--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
	.ks-perf__cards { grid-template-columns: 1fr; }
	.ks-perf-card--wide { grid-column: auto; }
}

/* ===================================================================
   Sprint 5-Full — generic a11y, perf, microcopy
   =================================================================== */

/* A-02: skip-to-content link */
.skip-to-content {
	position: absolute; top: -100px; left: 16px; z-index: 9999;
	background: var(--ks-primary); color: #fff;
	padding: 12px 20px; border-radius: 0 0 8px 8px;
	font-weight: 700; text-decoration: none;
	transition: top .15s;
}
.skip-to-content:focus { top: 0; outline: 3px solid var(--ks-yellow); }

/* A-03: focus visibility across all interactive elements */
:focus-visible {
	outline: 2px solid var(--ks-primary);
	outline-offset: 2px;
	border-radius: 4px;
}
.ks-btn:focus-visible {
	outline: 3px solid var(--ks-yellow);
	outline-offset: 1px;
}

/* A-04: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* A-05: better default link contrast.
   Exclude components that have their own color systems — they fight specificity
   battles with this rule otherwise. */
/* 리디자인(.kfr) 화면에서는 이 규칙을 통째로 끈다.
   :not() 14개가 붙어 특이도가 (0,15,1) 이라 .kfr-* 클래스가 정한 링크 색을 전부 이겨버린다.
   되돌리려면 아래 :is(body:not(:has(.kfr)):not(:has(.kfb))) 만 지우면 된다. (2026-08-14) */
:is(body:not(:has(.kfr)):not(:has(.kfb))) a:not(.ks-btn):not(.ks-apply-tab):not(.balance-chip):not(.ks-user-menu__trigger):not(.ks-blog-chip):not(.ks-blog-card):not(.ks-blog-featured):not(.ks-tier-card__size):not(.ks-method__step):not(.ks-review):not(.ks-rail__btn):not(.ks-rail__link):not(.ks-rail__share-btn):not([class*="ks-rail"]) {
	color: var(--ks-primary);
	text-underline-offset: 2px;
}
:is(body:not(:has(.kfr)):not(:has(.kfb))) a:not(.ks-btn):hover { color: var(--ks-primary-deep); }

/* P-01: font-display swap (loaded inline) — handled in <head> via theme.json */
/* P-02: image lazy + decoding hints — applied via filter in functions.php */
img { max-width: 100%; height: auto; }
img:not([loading]) { content-visibility: auto; }

/* P-03: defer non-critical animation transforms above-the-fold */
.hero__orb, .hero__grid { will-change: transform; }

/* P-04: prevent layout shift on slow images */
.ks-result-card__before-after,
.ks-perf-card,
.ks-modal {
	contain: layout style;
}

/* U-17 microcopy refinement helper (Live chat → labeled honestly) */
.ks-float-btn--chat::after {
	content: " (email)";
	font-weight: 500;
	font-size: 10px;
	opacity: 0.7;
	margin-left: 2px;
}
@media (max-width: 768px) {
	.ks-float-btn--chat::after { display: none; }
}

/* S-03 refund/legal page consistent typography */
.legal-page { max-width: 760px; margin: 0 auto; padding: 60px 24px; }
.legal-page h1 { font-size: 32px; margin: 0 0 20px; }
.legal-page h2 { font-size: 20px; margin: 36px 0 12px; }
.legal-page p,
.legal-page li { font-size: 15px; line-height: 1.7; color: var(--ks-text); }
.legal-page__updated { font-size: 13px; color: var(--ks-text-muted); margin: -10px 0 24px; }

/* ===================================================================
   V17-1 / 4-A — Credits top-up dedicated success page
   =================================================================== */
.ks-thanks { padding: 80px 24px; background: var(--ks-bg-soft); min-height: 60vh; }
.ks-thanks__inner { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 48px 40px; box-shadow: 0 8px 32px rgba(0,0,0,.06); text-align: center; }
.ks-thanks__check { display: block; margin: 0 auto 20px; }
.ks-thanks__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: #16a34a; text-transform: uppercase; margin: 0 0 8px; }
.ks-thanks__title { font-size: 28px; font-weight: 800; margin: 0 0 12px; color: var(--ks-text); letter-spacing: -0.02em; }
.ks-thanks__sub { color: var(--ks-text-muted); font-size: 15px; line-height: 1.6; margin: 0 0 32px; }

.ks-thanks__details { list-style: none; padding: 0; margin: 0 0 32px; background: var(--ks-bg-soft); border-radius: 12px; overflow: hidden; }
.ks-thanks__details li { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,.05); font-size: 14px; text-align: left; }
.ks-thanks__details li:last-child { border-bottom: none; }
.ks-thanks__details li span { color: var(--ks-text-muted); }
.ks-thanks__details li strong { font-weight: 700; color: var(--ks-text); text-align: right; }
.ks-thanks__details--total { background: var(--ks-primary-light); }
.ks-thanks__details--total strong { color: var(--ks-primary); font-size: 18px; font-weight: 800; }

.ks-thanks__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.ks-thanks__note { font-size: 12px; color: var(--ks-text-muted); margin: 0; line-height: 1.5; }

@media (max-width: 560px) {
    .ks-thanks { padding: 40px 16px; }
    .ks-thanks__inner { padding: 32px 24px; }
    .ks-thanks__details li { font-size: 13px; padding: 12px 16px; }
    .ks-thanks__actions .ks-btn { flex: 1; min-width: 0; }
}

/* ===================================================================
   AU-19 — Site-wide input fill-state polish.
   Empty inputs (no value) read as ACTIVE: white background, inviting.
   Filled inputs read as DONE: subtle gray fill, like a settled value.
   The `is-filled` class is set by inputs.js on input/change/blur events.
   We scope the gray fill broadly so it covers every input style on the
   site (.field__control, .ks-input/.ks-select, .um-form, intl-tel-input).
   =================================================================== */

/* Empty defaults — re-assert white in case any earlier rule grayed them */
.field__control input[type="text"],
.field__control input[type="email"],
.field__control input[type="tel"],
.field__control input[type="number"],
.field__control input[type="url"],
.field__control input[type="password"],
.field__control select,
.field__control textarea,
.ks-input,
.ks-select,
.field__control--with-button input,
textarea {
    background: #fff;
}

/* Filled state — soft gray fill once the user has typed something */
.field__control input.is-filled,
.field__control select.is-filled,
.field__control textarea.is-filled,
.ks-input.is-filled,
.ks-select.is-filled,
textarea.is-filled,
.um-form input.is-filled,
.um-form select.is-filled,
.um-form textarea.is-filled {
    background: var(--c-overlay, #eef2f7);
}

/* Apply page uses its own variable namespace — alias to match */
.ks-input.is-filled,
.ks-select.is-filled {
    background: #eef2f7;
}

/* intl-tel-input phone wrapper: keep parent white, the inner input owns the fill state */
.iti--allow-dropdown { background: #fff; border-radius: var(--radius-md); }
.iti__country-list { background: #fff; }

/* Stripe Elements containers (if we ever render Stripe Elements inline) — keep them white when empty too */
.StripeElement { background: #fff; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.StripeElement.StripeElement--focus { border-color: var(--c-blue-500); box-shadow: 0 0 0 4px rgba(0, 85, 177, 0.12); }

/* ===================================================================
   v20 — Brand logo image (header + footer)
   =================================================================== */
.site-header__logo,
.site-footer__logo {
	display: inline-flex; align-items: center;
	text-decoration: none;
}
.site-header__logo img,
.site-footer__logo img {
	display: block;
	height: 26px;
	width: auto;
	max-width: 200px;
	transition: opacity .15s;
}
.site-header__logo:hover img,
.site-footer__logo:hover img {
	opacity: 0.85;
}
@media (max-width: 480px) {
	.site-header__logo img,
	.site-footer__logo img { height: 22px; }
}
/* Hide legacy text/mark spans if they still exist anywhere */
.site-header__logo-mark,
.site-header__logo-text,
.site-footer__logo-mark,
.site-footer__logo-text { display: none !important; }

/* ===================================================================
   v20 — Auth/account form logo block (top of every shortcode card)
   =================================================================== */
.auth-form-logo {
	text-align: center;
	margin: 0 0 24px 0;
}
.auth-form-logo a {
	display: inline-block;
	text-decoration: none;
}
.auth-form-logo img {
	display: block;
	height: 28px;
	width: auto;
	max-width: 180px;
}

/* Dashboard / thanks page logo override (slightly smaller, left-aligned) */
.dashboard > .auth-form-logo,
.ks-thanks__inner > .auth-form-logo {
	margin-bottom: 32px;
}
.dashboard > .auth-form-logo {
	text-align: left;
}
.dashboard > .auth-form-logo img {
	height: 24px;
}
@media (max-width: 480px) {
	.auth-form-logo img { height: 24px; }
}

/* ===================================================================
   AU-20 — /register-complete/ "Check your inbox" page
   =================================================================== */
.auth-form-card--center { text-align: center; }
.auth-form__check-icon  { display: flex; justify-content: center; margin: 4px 0 18px; }
.auth-form__steps {
    margin: 24px 0 8px;
    text-align: left;
    display: grid;
    gap: 10px;
}
.auth-form__step {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-text, #1f2937);
}
.auth-form__step em { color: var(--c-text-muted, #6b7280); font-style: italic; }
.auth-form__step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--c-blue-500, #1d4ed8);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-form__alt--muted { color: var(--c-text-muted, #6b7280); font-size: 13px; margin-top: 8px; }
.auth-form-logo {
    text-align: center;
    margin: 0 auto 18px;
}
.auth-form-logo img {
    height: 26px;
    width: auto;
    display: inline-block;
}

/* ===================================================================
   AU-23 — OTP 60-second countdown styles
   =================================================================== */
.field__hint [data-otp-timer] {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    color: var(--ks-primary, #1d4ed8);
    background: rgba(29, 78, 216, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    min-width: 22px;
    text-align: center;
}
.field__hint.is-expired [data-otp-timer] {
    color: var(--c-error, #dc2626);
    background: rgba(220, 38, 38, 0.10);
}
.field__hint.is-expired { color: var(--c-error, #dc2626); }
.field__hint.is-done [data-otp-timer] {
    color: #15803d;
    background: rgba(22, 163, 74, 0.10);
}

/* =====================================================================
   Front-page merged sections — Methodology, Tier cards, Source-pool stats
   Added when /service/ was merged into front. Uses ks-* namespace.
   ===================================================================== */

/* ----- Methodology (5-step) ----- */
.ks-method { background: #fff; }
.ks-method .ks-section__head { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.ks-method__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.ks-method__step {
    background: var(--c-elevated, #f7f9fc);
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    padding: 28px 24px;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ks-method__step:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 85, 177, .08);
}
.ks-method__num {
    display: inline-block;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-blue-500, #0055b1);
    background: var(--c-blue-50, #e6f0fa);
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 14px;
}
.ks-method__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text, #1a1a1a);
    margin: 0 0 10px;
    line-height: 1.3;
}
.ks-method__step p {
    font-size: 14px;
    color: var(--c-text-secondary, #4a4a4a);
    line-height: 1.6;
    margin: 0;
}

/* ----- Tier cards (Foundation / Growth / Authority) ----- */
.ks-tiers { background: var(--c-elevated, #f7f9fc); }
.ks-tiers .ks-section__head { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.ks-tiers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}
.ks-tier-card {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ks-tier-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 85, 177, .10);
}
.ks-tier-card--featured {
    border-color: var(--c-blue-500, #0055b1);
    box-shadow: 0 8px 24px rgba(0, 85, 177, .08);
    position: relative;
}
.ks-tier-card--featured::before {
    content: "Most popular";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-blue-500, #0055b1);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 999px;
    text-transform: uppercase;
}
.ks-tier-card__head { margin-bottom: 16px; }
.ks-tier-card__stage {
    display: inline-block;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--c-blue-500, #0055b1);
    background: var(--c-blue-50, #e6f0fa);
    padding: 4px 9px;
    border-radius: 5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ks-tier-card__name {
    font-size: 28px;
    font-weight: 800;
    color: var(--c-text, #1a1a1a);
    margin: 0 0 6px;
    line-height: 1.1;
}
.ks-tier-card__goal {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-blue-500, #0055b1);
    margin: 0;
}
.ks-tier-card__desc {
    font-size: 14px;
    color: var(--c-text-secondary, #4a4a4a);
    line-height: 1.6;
    margin: 0 0 24px;
}
.ks-tier-card__specs {
    margin: 0 0 24px;
    padding: 18px 0;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
}
.ks-tier-card__specs > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    font-size: 13px;
    padding: 6px 0;
}
.ks-tier-card__specs dt { color: var(--c-text-muted, #707070); margin: 0; }
.ks-tier-card__specs dd { color: var(--c-text, #1a1a1a); font-weight: 600; margin: 0; line-height: 1.4; }
.ks-tier-card__sizes { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ks-tier-card__size {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--c-elevated, #f7f9fc);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--c-text, #1a1a1a);
    font-size: 14px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.ks-tier-card__size:hover {
    background: var(--c-blue-50, #e6f0fa);
    border-color: var(--c-blue-300, #5da3df);
    transform: translateX(2px);
}
.ks-tier-card__size strong { color: var(--c-blue-500, #0055b1); font-weight: 800; }
.ks-tier-card__size--best { background: var(--c-blue-50, #e6f0fa); border-color: var(--c-blue-300, #5da3df); }
.ks-badge {
    background: var(--c-blue-500, #0055b1);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

/* ----- Free trial strip below tier cards ----- */
.ks-tiers__trial {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px;
    background: linear-gradient(135deg, var(--c-blue-50, #e6f0fa) 0%, #fff 100%);
    border: 1px dashed var(--c-blue-300, #5da3df);
    border-radius: 16px;
    flex-wrap: wrap;
}
.ks-tiers__trial h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-text, #1a1a1a);
    margin: 8px 0 6px;
    line-height: 1.25;
}
.ks-tiers__trial p {
    font-size: 14px;
    color: var(--c-text-secondary, #4a4a4a);
    margin: 0;
    max-width: 540px;
}

/* ----- Source pool stats (3 charts) ----- */
.ks-stats { background: #fff; }
.ks-stats .ks-section__head { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.ks-stats__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.ks-stat-chart {
    background: var(--c-elevated, #f7f9fc);
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    padding: 28px;
}
.ks-stat-chart--wide { grid-column: 1 / -1; }
.ks-stat-chart__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text, #1a1a1a);
    margin: 0 0 4px;
}
.ks-stat-chart__sub {
    font-size: 12px;
    color: var(--c-text-muted, #707070);
    margin: 0 0 16px;
}
.ks-stat-chart svg { width: 100%; height: auto; display: block; }
.ks-chart-legend {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--c-text-secondary, #4a4a4a);
}
.ks-chart-legend--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    justify-content: center;
}
.ks-chart-legend li { display: flex; align-items: center; gap: 8px; }
.ks-chart-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .ks-stats__grid { grid-template-columns: 1fr; }
    .ks-stat-chart--wide { grid-column: auto; }
    .ks-tier-card__specs > div { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
    .ks-tier-card__specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
    .ks-tiers__trial { padding: 24px; }
    .ks-method__grid { gap: 16px; }
    .ks-method__step { padding: 22px 20px; }
}

/* ===================================================================
   AU-31 — Test tab ($1 sandbox) + AI auto-match toggle on /apply/
   =================================================================== */

/* Test tab with a small $1 chip */
.ks-apply-tab--test { position: relative; }
.ks-apply-tab__chip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 999px;
    letter-spacing: 0.04em;
    vertical-align: 1px;
}

/* Category header row: label on left, AI toggle on right */
.ks-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.ks-category-head .ks-apply-form__group-label { margin-bottom: 0; }

/* Pill-style AI toggle */
.ks-ai-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.ks-ai-toggle input { display: none; }
.ks-ai-toggle__switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background .18s ease;
    flex-shrink: 0;
}
.ks-ai-toggle__switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .18s ease;
}
.ks-ai-toggle input:checked + .ks-ai-toggle__switch {
    background: linear-gradient(90deg, #8b5cf6 0%, #0055B1 100%);
}
.ks-ai-toggle input:checked + .ks-ai-toggle__switch::after {
    transform: translateX(16px);
}
.ks-ai-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-text, #0f172a);
}
.ks-ai-toggle__sparkle { font-size: 14px; line-height: 1; }

/* Disabled select when AI is ON */
.ks-select:disabled {
    background: var(--c-overlay, #eef2f7) !important;
    color: var(--c-text-muted, #64748b) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* AU-31 — TEST chip on the $1 credit card */
.amount-card--test { position: relative; }
.amount-card--test .amount-card__chip {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #f59e0b;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 999px;
}

/* =====================================================================
   Reviews — modeled after the colink.kr layout (summary + breakdown + list)
   but compact: horizontal bars, 2-col list, "Show more" toggle to keep
   above-the-fold height controlled.
   ===================================================================== */

.ks-reviews { background: var(--c-elevated, #f7f9fc); }
.ks-reviews__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }

/* ----- Star block with fractional support (uses width % overlay) ----- */
.ks-stars {
    display: inline-block;
    position: relative;
    font-family: ui-monospace, monospace;
    letter-spacing: 2px;
    line-height: 1;
    color: transparent;
}
.ks-stars__off,
.ks-stars__on {
    color: #d6dbe2;
    display: block;
}
.ks-stars__on {
    color: #ffb800;
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
    white-space: nowrap;
}
.ks-stars--lg { font-size: 26px; }
.ks-stars--sm { font-size: 14px; }

/* ----- Summary block (avg score + breakdown bars side-by-side) ----- */
.ks-reviews__summary {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 40px;
    align-items: center;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 32px;
}
.ks-reviews__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-right: 32px;
    border-right: 1px solid #eef2f7;
}
.ks-reviews__avg {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.ks-reviews__avg-num {
    font-size: 56px;
    font-weight: 800;
    color: var(--c-text, #1a1a1a);
    line-height: 1;
    letter-spacing: -0.02em;
}
.ks-reviews__avg-max {
    font-size: 16px;
    color: var(--c-text-muted, #707070);
    font-weight: 600;
}
.ks-reviews__total {
    font-size: 13px;
    color: var(--c-text-muted, #707070);
    margin-top: 4px;
}
.ks-reviews__total strong { color: var(--c-text, #1a1a1a); font-weight: 700; }

.ks-reviews__breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ks-reviews__bar-row {
    display: grid;
    grid-template-columns: 36px 1fr 48px;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}
.ks-reviews__bar-label {
    color: var(--c-text-muted, #707070);
    font-weight: 600;
    font-family: ui-monospace, monospace;
}
.ks-reviews__bar-track {
    position: relative;
    background: #eef2f7;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}
.ks-reviews__bar-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--c-blue-400, #2d83cf), var(--c-blue-500, #0055b1));
    border-radius: 999px;
    transition: width .6s ease;
}
.ks-reviews__bar-pct {
    color: var(--c-text, #1a1a1a);
    font-weight: 700;
    font-family: ui-monospace, monospace;
    text-align: right;
    font-size: 12px;
}

/* ----- Review list (2-col grid on desktop, 1-col on mobile) ----- */
.ks-reviews__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ks-review {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ks-review:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 85, 177, .06);
}
.ks-review.is-hidden { display: none; }

.ks-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ks-review__date {
    font-size: 12px;
    color: var(--c-text-muted, #707070);
    font-family: ui-monospace, monospace;
}
.ks-review__headline {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text, #1a1a1a);
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.005em;
}
.ks-review__body {
    font-size: 14px;
    color: var(--c-text-secondary, #4a4a4a);
    line-height: 1.6;
    margin: 0;
    /* clamp to 4 lines to keep card height predictable */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ks-review__foot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-text-muted, #707070);
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #f0f3f7;
    flex-wrap: wrap;
}
.ks-review__author {
    color: var(--c-text, #1a1a1a);
    font-weight: 600;
}
.ks-review__role { color: var(--c-text-muted, #707070); }
.ks-review__flag { font-size: 15px; line-height: 1; margin-left: 2px; }

.ks-review__pkg {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--c-blue-50, #e6f0fa);
    color: var(--c-blue-500, #0055b1);
}
.ks-review__pkg--foundation { background: #f0f3f7; color: #4a5566; }
.ks-review__pkg--growth     { background: #e6f0fa; color: #0055b1; }
.ks-review__pkg--authority  { background: #fff4cc; color: #8a6500; }
.ks-review__pkg--free_trial { background: #f0fdf4; color: #166534; }

/* ----- Show more toggle ----- */
.ks-reviews__more { text-align: center; margin-top: 24px; }
.ks-reviews__more .ks-btn { min-width: 220px; }

.ks-reviews__empty {
    text-align: center;
    color: var(--c-text-muted, #707070);
    padding: 48px 16px;
    font-size: 15px;
}

/* ----- Responsive ----- */
@media (max-width: 860px) {
    .ks-reviews__summary {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }
    .ks-reviews__score {
        padding: 0 0 24px;
        border-right: 0;
        border-bottom: 1px solid #eef2f7;
    }
    .ks-reviews__list { grid-template-columns: 1fr; }
    .ks-reviews__bar-row { grid-template-columns: 32px 1fr 44px; }
    .ks-stars--lg { font-size: 22px; }
}

/* Smooth-scroll for in-page anchors (Reviews / Methodology / Packages nav)
   Honored by all modern browsers; reduced-motion users still get instant. */
html { scroll-behavior: smooth; }
/* Sticky header offset so #anchors don't land under the nav */
#methodology, #tiers, #reviews { scroll-margin-top: 80px; }

/* ===================================================================
   AU-33 — Replace MyCred's clunky gray notice with an animated
   balance-pill update. We hide the legacy `.notice-wrap` notice
   entirely and instead pulse the credit-balance chip in the header
   with a brief "-N" delta chip that slides out, then the count
   animates from the old balance to the new one.
   =================================================================== */

/* AU-37 — Hide MyCred's gray notification box. No animation, no chip, no
   caption — the server-rendered balance pill is the single source of truth
   for credit count on the next page load. */
.notice-wrap,
.notice-wrap .notice-item {
    display: none !important;
}

/* AU-36 — Tiny UTC-offset chip rendered next to client-localized dates */
.ks-tz-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ks-bg-soft, #f1f5f9);
    color: var(--ks-text-muted, #64748b);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
    vertical-align: 1px;
}

/* AU-38 — Contact form */
.auth-form-card--wide { max-width: 580px; }
.ks-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* =====================================================================
   Blog — index, single post, category archive, related posts
   Loosely modeled on the Ahrefs blog (large featured hero + 3-col grid)
   but in keyserp's blue/white palette with .ks-* namespace.
   ===================================================================== */

/* Narrow wrap variant for long-form reading */
.ks-wrap--narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* Force the entire blog template onto a pure-white background — overrides any
   lingering elevated/gray section backgrounds from global rules. */
.site-main--blog { background: #fff; }

/* ----- Blog hero — strong brand-blue background, white text ----- */
.ks-blog-hero {
    padding: 96px 0 88px;
    background: linear-gradient(135deg, var(--c-blue-700, #003c7d) 0%, var(--c-blue-500, #0055b1) 55%, var(--c-blue-400, #2d83cf) 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ks-blog-hero::before {
    /* Subtle radial highlight to add depth without distracting */
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
}
.ks-blog-hero > .ks-wrap { position: relative; z-index: 1; }
.ks-blog-hero__eyebrow {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 220, 0, 0.95);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.ks-blog-hero__title {
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 auto 20px;
    max-width: 820px;
}
.ks-blog-hero__sub {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto;
}
.ks-blog-hero--archive { padding: 72px 0 56px; }
.ks-blog-hero--archive .wp-block-query-title,
.ks-blog-hero--archive h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: #fff;
    margin: 0 auto 12px;
    max-width: 700px;
}
.ks-blog-hero--archive .wp-block-term-description,
.ks-blog-hero--archive .wp-block-term-description p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 620px;
    margin: 0 auto;
    font-size: 16px;
}

/* ----- Category chips nav — clean white band, no sticky behaviour ----- */
.ks-blog-nav {
    padding: 32px 0;
    background: #fff;
    border-bottom: 1px solid #eef2f7;
}
.ks-blog-nav__list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
/* Chips — explicit hex colors + .ks-blog-nav prefix for higher specificity
   so WordPress's global `a:where(...)` color rule cannot override us. */
.ks-blog-nav .ks-blog-chip,
a.ks-blog-chip {
    --ks-chip-color: #0055b1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ffffff;
    border: 1.5px solid #d8dee8;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ks-blog-nav .ks-blog-chip:hover,
a.ks-blog-chip:hover {
    border-color: #0055b1;
    color: #0055b1;
    background: #ffffff;
}
.ks-blog-nav .ks-blog-chip.is-active,
a.ks-blog-chip.is-active {
    background: #0055b1;
    border-color: #0055b1;
    color: #ffffff;
}
.ks-blog-nav .ks-blog-chip .ks-blog-chip__count,
a.ks-blog-chip .ks-blog-chip__count {
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: #9ba3ad;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: 700;
}
.ks-blog-nav .ks-blog-chip.is-active .ks-blog-chip__count,
a.ks-blog-chip.is-active .ks-blog-chip__count {
    color: rgba(255, 255, 255, 0.85);
}

/* ----- Blog index layout (white background) ----- */
.ks-blog-index { padding: 64px 0 120px; background: #fff; }

/* ----- Featured hero card — magazine layout, borderless ----- */
.ks-blog-featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 0 64px;
    margin-bottom: 64px;
    border-bottom: 1px solid #eef2f7;
    text-decoration: none;
    color: inherit;
    transition: opacity .2s ease;
}
.ks-blog-featured:hover { opacity: 0.92; }
.ks-blog-featured:hover .ks-blog-featured__title { color: var(--c-blue-500, #0055b1); }
.ks-blog-featured__media {
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    background: var(--c-elevated, #f7f9fc);
    box-shadow: 0 20px 60px rgba(0, 30, 80, 0.10);
}
.ks-blog-featured__media img,
.ks-blog-featured__media .ks-blog-card__img--placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.ks-blog-featured:hover .ks-blog-featured__media img,
.ks-blog-featured:hover .ks-blog-featured__media .ks-blog-card__img--placeholder { transform: scale(1.03); }
.ks-blog-featured__title {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--c-text, #1a1a1a);
    margin: 14px 0 14px;
    transition: color .2s ease;
}
.ks-blog-featured__excerpt {
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-text-secondary, #4a4a4a);
    margin: 0 0 24px;
    max-width: 460px;
}

/* ----- Category badge — small uppercase pill ----- */
.ks-blog-badge {
    --ks-chip-color: var(--c-blue-500, #0055b1);
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ks-chip-color);
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--ks-chip-color);
    padding-bottom: 4px;
}

/* ----- Section title between featured and grid ----- */
.ks-blog-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text-muted, #707070);
    margin: 0 0 32px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: ui-monospace, monospace;
}

/* ----- 3-col grid of cards — borderless magazine style ----- */
.ks-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 32px;
}
.ks-blog-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: opacity .2s ease;
}
.ks-blog-card:hover { opacity: 0.92; }
.ks-blog-card:hover .ks-blog-card__title { color: var(--c-blue-500, #0055b1); }
.ks-blog-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--c-elevated, #f7f9fc);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(0, 30, 80, 0.06);
    transition: box-shadow .25s ease;
}
.ks-blog-card:hover .ks-blog-card__media { box-shadow: 0 12px 32px rgba(0, 30, 80, 0.12); }
.ks-blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.ks-blog-card:hover .ks-blog-card__img { transform: scale(1.05); }
.ks-blog-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.95);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    padding: 24px;
    line-height: 1.2;
    width: 100%;
    height: 100%;
}
.ks-blog-card__body {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ks-blog-card__title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--c-text, #1a1a1a);
    margin: 10px 0 12px;
    transition: color .2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ks-blog-card__excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text-secondary, #4a4a4a);
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* ----- Author + date + reading-time meta line ----- */
.ks-blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--c-text-muted, #707070);
    margin-top: auto;
}
.ks-blog-meta__author { font-weight: 600; color: var(--c-text, #1a1a1a); }
.ks-blog-meta__sep    { color: #c0c8d2; }
.ks-blog-meta time    { font-family: ui-monospace, monospace; }
.ks-blog-meta__read   { font-family: ui-monospace, monospace; }

/* ----- Pagination ----- */
.ks-blog-pagination {
    margin: 48px 0 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ks-blog-page a,
.ks-blog-page span.current,
.ks-blog-page span.dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #e6ebf2;
    background: #fff;
    color: var(--c-text, #1a1a1a);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.ks-blog-page a:hover {
    background: var(--c-blue-50, #e6f0fa);
    border-color: var(--c-blue-300, #5da3df);
    color: var(--c-blue-500, #0055b1);
}
.ks-blog-page span.current {
    background: var(--c-blue-500, #0055b1);
    color: #fff;
    border-color: var(--c-blue-500, #0055b1);
}
.ks-blog-page span.dots { border: 0; color: var(--c-text-muted, #707070); }

/* ----- Empty state ----- */
.ks-blog-empty { padding: 96px 0; text-align: center; color: var(--c-text-muted, #707070); }

/* ===================================================================
   Single post layout
   =================================================================== */
.ks-breadcrumb {
    padding: 16px 0;
    border-bottom: 1px solid #eef2f7;
    background: var(--c-elevated, #f7f9fc);
    font-size: 13px;
}
.ks-breadcrumb ol {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--c-text-muted, #707070);
}
.ks-breadcrumb li { display: flex; align-items: center; gap: 8px; }
.ks-breadcrumb li + li::before { content: "›"; color: var(--c-text-muted, #707070); margin-right: 0; }
.ks-breadcrumb a { color: var(--c-blue-500, #0055b1); text-decoration: none; font-weight: 500; }
.ks-breadcrumb a:hover { text-decoration: underline; }
.ks-breadcrumb [aria-current="page"] { color: var(--c-text, #1a1a1a); font-weight: 500; }

.ks-post { background: #fff; }
.ks-post__header { padding: 56px 0 32px; text-align: center; }
.ks-post__cats {
    margin: 0 0 16px;
    display: inline-flex;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.ks-post__cats a {
    color: var(--c-blue-500, #0055b1);
    text-decoration: none;
    background: var(--c-blue-50, #e6f0fa);
    padding: 4px 10px;
    border-radius: 4px;
}
.ks-post__title {
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--c-text, #1a1a1a);
    max-width: 780px;
    margin: 0 auto 28px;
}

.ks-post-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--c-text-muted, #707070);
    flex-wrap: wrap;
    justify-content: center;
}
.ks-post-meta__author { display: inline-flex; align-items: center; gap: 8px; }
.ks-post-meta__avatar {
    width: 28px;
    height: 28px;
    background: var(--c-blue-500, #0055b1);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}
.ks-post-meta__author-name { font-weight: 600; color: var(--c-text, #1a1a1a); }
.ks-post-meta__sep { color: #c0c8d2; }
.ks-post-meta time { font-family: ui-monospace, monospace; }
.ks-post-meta__read { font-family: ui-monospace, monospace; }

.ks-post__featured {
    padding: 0 0 48px;
}
.ks-post__featured .wp-block-post-featured-image {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--c-elevated, #f7f9fc);
}
.ks-post__featured .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ks-post__body {
    padding: 16px 0 64px;
}
.ks-post__body .wp-block-post-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--c-text-secondary, #4a4a4a);
}
.ks-post__body h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--c-text, #1a1a1a);
    margin: 56px 0 16px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.ks-post__body h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text, #1a1a1a);
    margin: 40px 0 12px;
    letter-spacing: -0.01em;
}
.ks-post__body p { margin: 0 0 20px; }
.ks-post__body a { color: var(--c-blue-500, #0055b1); text-decoration: underline; text-underline-offset: 3px; }
.ks-post__body ul, .ks-post__body ol { padding-left: 1.4em; margin: 0 0 20px; }
.ks-post__body li { margin: 6px 0; }
.ks-post__body blockquote {
    border-left: 4px solid var(--c-blue-500, #0055b1);
    padding: 4px 0 4px 24px;
    margin: 32px 0;
    font-style: italic;
    color: var(--c-text, #1a1a1a);
}
.ks-post__body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 32px 0;
}
.ks-post__body code {
    background: var(--c-elevated, #f7f9fc);
    border: 1px solid #e6ebf2;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: ui-monospace, monospace;
}
.ks-post__body pre {
    background: #1a1a1a;
    color: #f0f0f0;
    padding: 20px 24px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 32px 0;
    font-size: 14px;
}
.ks-post__body pre code { background: none; border: 0; padding: 0; color: inherit; }

.ks-post__footer { padding: 0 0 80px; }
.ks-post__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
}
.ks-post__tags a {
    background: var(--c-elevated, #f7f9fc);
    border: 1px solid #e6ebf2;
    padding: 4px 10px;
    border-radius: 4px;
    color: var(--c-text-muted, #707070);
    text-decoration: none;
}
.ks-post__tags a:hover { background: var(--c-blue-50, #e6f0fa); color: var(--c-blue-500, #0055b1); }

/* Related posts */
.ks-related {
    background: var(--c-elevated, #f7f9fc);
    padding: 80px 0;
    border-top: 1px solid #eef2f7;
}
.ks-related__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--c-text, #1a1a1a);
    margin: 0 0 32px;
    text-align: center;
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
    .ks-blog-featured { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
    .ks-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ks-blog-hero { padding: 56px 0 24px; }
    .ks-blog-grid { grid-template-columns: 1fr; }
    .ks-blog-nav__list { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .ks-blog-nav { padding: 16px 0; }
    .ks-blog-chip { flex-shrink: 0; }
    .ks-post__header { padding: 40px 0 24px; }
}

/* =====================================================================
   Customer review submission — modal + star input
   ===================================================================== */

.ks-review-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: ks-modal-fade .15s ease;
}
.ks-review-modal[hidden] { display: none; }

@keyframes ks-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ks-review-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 25, 40, 0.55);
    backdrop-filter: blur(2px);
}

.ks-review-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 36px 36px 28px;
    box-shadow: 0 24px 64px rgba(0, 30, 80, 0.18);
    z-index: 1;
    animation: ks-modal-rise .2s ease;
}

@keyframes ks-modal-rise {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.ks-review-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--c-text-muted, #707070);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}
.ks-review-modal__close:hover { background: var(--c-elevated, #f7f9fc); color: var(--c-text, #1a1a1a); }

.ks-review-modal__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--c-text, #1a1a1a);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.ks-review-modal__sub {
    font-size: 14px;
    color: var(--c-text-muted, #707070);
    line-height: 1.55;
    margin: 0 0 24px;
}

.ks-review-modal__campaign {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--c-blue-50, #e6f0fa);
    border-left: 3px solid var(--c-blue-500, #0055b1);
    border-radius: 6px;
    margin: 0 0 24px;
    font-size: 13px;
}
.ks-review-modal__campaign-label {
    font-weight: 700;
    color: var(--c-blue-500, #0055b1);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}
.ks-review-modal__campaign-name {
    color: var(--c-text, #1a1a1a);
    font-weight: 600;
}

.ks-review-modal__rating { border: 0; padding: 0; margin: 0 0 20px; }
.ks-review-modal__rating legend {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text, #1a1a1a);
    padding: 0;
    margin-bottom: 8px;
}

/* ----- Star input (click-to-rate) ----- */
.ks-rating-input {
    display: inline-flex;
    gap: 4px;
}
.ks-rating-input__star {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    padding: 0;
    color: #d6dbe2;  /* matches .ks-stars__off — same star color system */
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s ease, transform .12s ease, background .15s ease;
}
.ks-rating-input__star:hover { background: rgba(255, 184, 0, 0.08); }
.ks-rating-input__star.is-hover,
.ks-rating-input__star.is-on   { color: #ffb800; }
.ks-rating-input__star.is-on:active { transform: scale(.94); }

.ks-review-modal__field { margin-bottom: 20px; }
.ks-review-modal__field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text, #1a1a1a);
    margin-bottom: 6px;
}
.ks-required { color: #d14f4f; font-weight: 700; }
.ks-review-modal__field input[type="text"],
.ks-review-modal__field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e1e5ec;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    color: var(--c-text, #1a1a1a);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ks-review-modal__field input[type="text"]:focus,
.ks-review-modal__field textarea:focus {
    outline: 0;
    border-color: var(--c-blue-500, #0055b1);
    box-shadow: 0 0 0 3px rgba(0, 85, 177, 0.12);
}
.ks-review-modal__field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.ks-review-modal__hint {
    font-size: 12px;
    color: var(--c-text-muted, #707070);
    text-align: right;
    margin: 6px 0 0;
    font-family: ui-monospace, monospace;
}
.ks-review-modal__error {
    font-size: 13px;
    color: #d14f4f;
    margin: 6px 0 0;
    font-weight: 500;
}

.ks-review-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #f0f3f7;
    margin-top: 24px;
    padding-top: 20px;
}
.ks-review-modal__actions .ks-btn { min-width: 120px; }

.ks-review-modal__server {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: #f0fdf4;
    border-left: 3px solid #15803d;
    color: #166534;
    font-size: 14px;
    border-radius: 6px;
}
.ks-review-modal__server.is-error {
    background: #fef2f2;
    border-left-color: #d14f4f;
    color: #991b1b;
}

@media (max-width: 600px) {
    .ks-review-modal__panel { padding: 28px 22px 22px; max-height: calc(100vh - 24px); }
    .ks-review-modal__title { font-size: 20px; }
    .ks-rating-input__star { width: 36px; height: 36px; font-size: 28px; }
    .ks-review-modal__actions .ks-btn { min-width: 0; flex: 1; }
}

/* Load-more button counter — used by AJAX pagination */
.ks-reviews__more-counter {
    margin-left: 8px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: var(--c-text-muted, #707070);
    font-weight: 600;
}
.ks-reviews__more .ks-btn[disabled] { opacity: 0.6; cursor: progress; }

/* =====================================================================
   Single-post page — 3-column layout with sticky marketing rails
   ===================================================================== */

/* Wide wrap variant — gives room for left+article+right rails (~1240px) */
.ks-wrap--wide { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.ks-post__layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 240px;
    gap: 56px;
    align-items: start;
}

.ks-post__article {
    max-width: 760px;
    margin: 0 auto;
    min-width: 0;
}

/* ----- Sticky rail base ----- */
.ks-post__rail {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 14px;
    line-height: 1.5;
}

/* ----- Rail card chrome ----- */
.ks-rail-card {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    padding: 18px 18px;
}
.ks-rail__eyebrow {
    font-family: ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #9ba3ad;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.ks-rail__eyebrow--accent { color: #0055b1; }

/* ----- Left rail: quick nav + share ----- */
.ks-rail__nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ks-rail__nav li { margin-bottom: 4px; }
.ks-rail__nav a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    transition: color .12s ease;
}
.ks-rail__nav a:hover { color: #0055b1; }

.ks-rail-card--share { padding-bottom: 14px; }
.ks-rail__share {
    display: flex;
    gap: 8px;
}
.ks-rail__share-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f7f9fc;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    color: #4a4a4a;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ks-rail__share-btn:hover {
    background: #fff;
    color: #0055b1;
    border-color: #0055b1;
}

/* ===== Right rail: FREE TRIAL hero (top, eye-catching) ===== */
/* Strong yellow + blue + animated badge to maximize free-trial click-through */
.ks-rail-card--trial {
    background: linear-gradient(160deg, #ffda47 0%, #f0c020 100%);
    border-color: transparent;
    padding: 22px 20px 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ks-rail-card--trial::before {
    /* subtle confetti spotlight */
    content: "";
    position: absolute;
    top: -60%;
    right: -30%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.ks-rail-trial__badge {
    display: inline-block;
    background: #003c7d;
    color: #ffda47;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.ks-rail-trial__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.ks-rail-trial__num {
    font-size: 56px;
    font-weight: 900;
    color: #003c7d;
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-feature-settings: "tnum";
}
.ks-rail-trial__unit {
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #003c7d;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ks-rail-trial__perks {
    list-style: none;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    text-align: left;
    font-size: 12.5px;
    color: #003c7d;
    line-height: 1.45;
    position: relative;
    z-index: 1;
}
.ks-rail-trial__perks li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 3px 0;
    font-weight: 600;
}
.ks-rail-trial__check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: #003c7d;
    color: #ffda47;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    margin-top: 1px;
}
.ks-rail-trial__btn {
    display: block;
    text-align: center;
    background: #003c7d;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 14px;
    padding: 13px 14px;
    border-radius: 10px;
    text-decoration: none;
    margin-bottom: 10px;
    box-shadow: 0 6px 16px rgba(0, 60, 125, 0.25);
    transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
    position: relative;
    z-index: 1;
}
.ks-rail-trial__btn:hover {
    background: #0055b1;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 60, 125, 0.35);
    color: #ffffff !important;
}
.ks-rail-trial__note {
    font-size: 11px;
    color: rgba(0, 60, 125, 0.75);
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: 600;
}

/* Mini tier list */
.ks-rail__tiers {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ks-rail__tiers li { margin-bottom: 6px; }
.ks-rail__tiers li:last-child { margin-bottom: 0; }
.ks-rail__tiers a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: #f7f9fc;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    color: #1a1a1a;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.ks-rail__tiers a:hover {
    background: #e6f0fa;
    border-color: #5da3df;
}
.ks-rail__tiers a span { color: #4a4a4a; font-weight: 500; }
.ks-rail__tiers a strong { color: #0055b1; font-weight: 800; font-family: ui-monospace, monospace; }

/* Trust badge — live aggregate */
.ks-rail-card--trust {
    background: #f7f9fc;
    border-color: #e6ebf2;
    text-align: center;
    padding: 16px 18px;
}
.ks-rail__rating {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.ks-rail__rating-num {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.02em;
    line-height: 1;
}
.ks-rail__rating-stars {
    color: #ffb800;
    font-size: 14px;
    letter-spacing: 1px;
}
.ks-rail__trust-text {
    font-size: 12px;
    color: #707070;
    margin: 0;
}
.ks-rail__trust-text a { color: #0055b1; text-decoration: none; font-weight: 600; }
.ks-rail__trust-text a:hover { text-decoration: underline; }

/* ----- Responsive: hide rails on tablets + below ----- */
@media (max-width: 1180px) {
    .ks-post__layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ks-post__rail {
        display: none;
    }
    .ks-post__article {
        max-width: 760px;
    }
}

/* Defense — keep the global anchor rule from re-coloring our rail links */
.ks-post__rail .ks-rail__nav a,
.ks-post__rail .ks-rail__tiers a,
.ks-post__rail .ks-rail__btn,
.ks-post__rail .ks-rail__link,
.ks-post__rail .ks-rail__share-btn,
.ks-post__rail .ks-rail__trust-text a { text-decoration: none; }

/* =====================================================================
   Blog post body — inline figure (auto-generated image wrapper)
   ===================================================================== */
.ks-post-figure {
    margin: 32px 0;
    padding: 0;
}
.ks-post-figure img {
    width: 100%;
    height: auto;
    min-height: 200px;  /* reserve box during load — prevents lazy/0-height race */
    display: block;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 30, 80, 0.08);
    background: #f0f3f7;
}
.ks-post-figure figcaption {
    font-size: 13px;
    color: var(--c-text-muted, #707070);
    text-align: center;
    margin-top: 10px;
}

/* ===================================================================
   AU-39 — Hero right-side "Google SERP climb" visual.
   Replaces the old orb SVG. All styles are scoped under .ks-serp so
   they don't collide with the rest of the site. Source: handoff doc
   at /Users/kimtaewoong/Desktop/handoff/hero-visual-snippet.html.
   =================================================================== */
.ks-serp {
    --ks-blue:    #0055B1;
    --ks-tint2:   #F2F7FD;
    --ks-tint:    #E6F0FA;
    --ks-light:   #C2DCF3;
    --ks-ink:     #111111;
    --ks-faint:   #9AA0A6;
    --ks-good-bg: #DCFCE7;
    --ks-good-tx: #166534;

    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 36px 32px 32px;
    background: #FFFFFF;
    border: 1px solid var(--ks-tint);
    border-radius: 20px;
    box-shadow:
        0 24px 60px rgba(10, 40, 90, 0.16),
        0 2px 8px rgba(10, 40, 90, 0.05);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

/* Google wordmark */
.ks-serp__logo {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 500;
    font-size: 44px;
    letter-spacing: -1.2px;
    line-height: 1;
    user-select: none;
}
.ks-serp__logo > span:nth-child(1) { color: #4285F4; }
.ks-serp__logo > span:nth-child(2) { color: #EA4335; }
.ks-serp__logo > span:nth-child(3) { color: #FBBC04; }
.ks-serp__logo > span:nth-child(4) { color: #4285F4; }
.ks-serp__logo > span:nth-child(5) { color: #34A853; }
.ks-serp__logo > span:nth-child(6) { color: #EA4335; }

/* Search bar */
.ks-serp__searchbar {
    width: 100%;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #DFE1E5;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.10);
}
.ks-serp__query {
    flex: 1;
    font-size: 15px;
    color: #202124;
    font-weight: 400;
    letter-spacing: -0.1px;
    display: flex;
    align-items: center;
}
.ks-serp__caret {
    display: inline-block;
    width: 1.5px;
    height: 17px;
    background: #1A73E8;
    margin-left: 2px;
    animation: ks-serp-caret 1.06s infinite step-end;
}
@keyframes ks-serp-caret {
    50% { opacity: 0; }
}

/* Result card */
.ks-serp__result {
    width: 100%;
    position: relative;
    margin-top: 4px;
}
.ks-serp__rank {
    position: absolute;
    top: -14px;
    left: -10px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ks-blue);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.6px;
    box-shadow:
        0 6px 16px rgba(0, 85, 177, 0.33),
        0 0 0 4px #FFFFFF;
    z-index: 2;
}
.ks-serp__chip {
    position: absolute;
    top: -12px;
    right: -10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ks-good-bg);
    color: var(--ks-good-tx);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(22, 101, 52, 0.20);
    z-index: 2;
    white-space: nowrap;
}
.ks-serp__card {
    padding: 24px 22px 22px;
    border-radius: 14px;
    background: var(--ks-tint2);
    border: 1.5px solid var(--ks-blue);
}
.ks-serp__host {
    font-size: 12px;
    color: var(--ks-blue);
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 4px;
}
.ks-serp__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ks-ink);
    line-height: 1.3;
    letter-spacing: -0.2px;
    margin: 0;
}

/* Ghost ranks 2–4 underneath */
.ks-serp__ghosts {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ks-serp__ghost {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ks-faint);
}
.ks-serp__ghost-rank {
    min-width: 14px;
    font-weight: 700;
}
.ks-serp__ghost-host {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tighter padding on small screens */
@media (max-width: 480px) {
    .ks-serp { padding: 28px 22px 24px; gap: 18px; }
    .ks-serp__logo { font-size: 36px; }
    .ks-serp__card { padding: 22px 18px 20px; }
    .ks-serp__title { font-size: 16px; }
}

/* AU-39 — Reset the old hero__visual sizing so .ks-serp fills naturally.
   The legacy 380px-tall flex centering pushed the new card visually low. */
.ks-hero__visual { height: auto; padding: 8px 0; }

/* AU-40 — "Enter ONE keyword only" rule + warning on /apply/ */
.ks-keyword-rule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin: 4px 0 12px;
    background: #fff7ed;             /* amber-50 */
    border: 1px solid #fed7aa;       /* amber-200 */
    border-radius: 10px;
    color: #9a3412;                  /* amber-900 */
    font-size: 13px;
    line-height: 1.55;
}
.ks-keyword-rule svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #c2410c;                  /* amber-700 */
}
.ks-keyword-rule strong {
    color: #7c2d12;                  /* amber-900 bold */
}
.ks-keyword-warn {
    display: block;
    margin: 6px 0 0;
    color: #b91c1c;                  /* red-700 */
    font-size: 13px;
    font-weight: 600;
}
.ks-keyword-warn[hidden] { display: none !important; }

/* ===================================================================
   AU-42 — Telegram floating CTA (site-wide)
   Bottom-right circle on desktop, slightly bigger touch target on mobile.
   Optional label slides out on hover (desktop only).
   Mounted in parts/footer.html.
   =================================================================== */
.ks-tg-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 56px;
	min-width: 56px;
	padding: 0;
	background: #229ED9;             /* Telegram brand blue */
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow:
		0 10px 25px rgba(34, 158, 217, 0.35),
		0 4px 10px rgba(0, 0, 0, 0.10);
	transition:
		min-width  0.32s cubic-bezier(.22,.61,.36,1),
		padding    0.32s cubic-bezier(.22,.61,.36,1),
		gap        0.32s cubic-bezier(.22,.61,.36,1),
		transform  0.18s ease,
		box-shadow 0.18s ease,
		background-color 0.18s ease;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ks-tg-fab:hover,
.ks-tg-fab:focus-visible {
	background: #1e8ec1;
	transform: translateY(-2px);
	box-shadow:
		0 14px 32px rgba(34, 158, 217, 0.45),
		0 6px 14px rgba(0, 0, 0, 0.12);
}
.ks-tg-fab:active {
	transform: translateY(0);
}
.ks-tg-fab:focus-visible {
	outline: 3px solid rgba(34, 158, 217, 0.45);
	outline-offset: 3px;
}

/* Icon — always visible, vertically centered */
.ks-tg-fab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}
.ks-tg-fab__icon svg {
	display: block;
	transform: translateX(-1px);     /* optical-center the paper-plane */
}

/* Label — collapsed by default, slides out on hover (desktop) */
.ks-tg-fab__label {
	display: inline-block;
	max-width: 0;
	white-space: nowrap;
	overflow: hidden;
	opacity: 0;
	transition:
		max-width 0.32s cubic-bezier(.22,.61,.36,1),
		opacity   0.20s ease 0.05s,
		padding-right 0.32s cubic-bezier(.22,.61,.36,1);
	padding-right: 0;
}
@media (hover: hover) and (min-width: 769px) {
	.ks-tg-fab:hover .ks-tg-fab__label,
	.ks-tg-fab:focus-visible .ks-tg-fab__label {
		max-width: 200px;
		opacity: 1;
		padding-right: 20px;
	}
}

/* Pulse ring — gentle attention without being obnoxious */
.ks-tg-fab__pulse {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: 0 0 0 0 rgba(34, 158, 217, 0.55);
	animation: ks-tg-pulse 2.4s ease-out infinite;
}
@keyframes ks-tg-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(34, 158, 217, 0.55); }
	70%  { box-shadow: 0 0 0 14px rgba(34, 158, 217, 0);  }
	100% { box-shadow: 0 0 0 0 rgba(34, 158, 217, 0);     }
}
@media (prefers-reduced-motion: reduce) {
	.ks-tg-fab,
	.ks-tg-fab__label,
	.ks-tg-fab__pulse { transition: none; animation: none; }
}

/* Mobile — slightly larger tap target, account for safe-area inset */
@media (max-width: 768px) {
	.ks-tg-fab {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		height: 60px;
		min-width: 60px;
		box-shadow:
			0 8px 20px rgba(34, 158, 217, 0.40),
			0 3px 8px rgba(0, 0, 0, 0.14);
	}
	.ks-tg-fab__icon {
		width: 60px;
		height: 60px;
	}
	/* On mobile we keep label hidden — circle is the entire control. */
	.ks-tg-fab__label {
		position: absolute;
		width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
	}
}

/* ===================================================================
   OD-5 — Engine heartbeat pill (Last engine check timestamp)
   Pulses a green dot to show the keyserp engine is alive. Shows
   relative time ("3 min ago") + absolute UTC timestamp side by side.
   Hidden by default; JS adds `.is-ready` once the REST response lands.
   =================================================================== */
.ks-engine-check {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	margin-top: 28px;
	margin-bottom: -6px;
	background: linear-gradient(90deg, #f0fdf4 0%, #f9fafb 100%);
	border: 1px solid #d1fae5;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.4;
	color: #374151;
	font-variant-numeric: tabular-nums;
	max-width: max-content;
}
.ks-engine-check.is-ready { display: inline-flex; }
.ks-engine-dot {
	width: 9px;
	height: 9px;
	background: #16a34a;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
	animation: ks-engine-pulse 1.8s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes ks-engine-pulse {
	0%   { box-shadow: 0 0 0 0    rgba(22, 163, 74, 0.55); }
	70%  { box-shadow: 0 0 0 8px  rgba(22, 163, 74, 0);    }
	100% { box-shadow: 0 0 0 0    rgba(22, 163, 74, 0);    }
}
.ks-engine-label { color: #1f2937; }
.ks-engine-label strong { color: #047857; font-weight: 700; }
.ks-engine-utc {
	color: #9ca3af;
	padding-left: 8px;
	border-left: 1px solid #e5e7eb;
	font-size: 11px;
	letter-spacing: 0.02em;
}
@media (max-width: 600px) {
	.ks-engine-check { flex-wrap: wrap; gap: 6px 10px; }
	.ks-engine-utc   { padding-left: 0; border-left: 0; width: 100%; }
}

/* ===================================================================
   OD-7 — Inline 5-star rating widget (Review column in campaign table)
   ===================================================================
   One click does three things at once:
     • paints stars 1..N yellow (visual ack)
     • opens the review modal
     • prefills the modal's hidden rating with N
   The cell shows nothing more than the 5 stars — no "Leave a review"
   text — so the call-to-action is the rating itself.
*/
.ks-inline-stars {
	display: inline-flex;
	gap: 2px;
	align-items: center;
	cursor: default;
}
.ks-inline-star {
	background: none;
	border: 0;
	padding: 1px;
	margin: 0;
	font-size: 19px;            /* OD-7.2 — 22px → 19px (≈ 85%) per design feedback */
	line-height: 1;
	color: #d1d5db;             /* empty-state grey */
	cursor: pointer;
	transition: color 80ms ease, transform 80ms ease;
	-webkit-text-stroke: 0.5px #b0b4ba;
}
.ks-inline-star:hover,
.ks-inline-star.is-hover,
.ks-inline-star.is-on {
	color: #fbbf24;            /* amber-400 — fully-saturated star yellow */
	-webkit-text-stroke: 0;
	transform: scale(1.08);
}
.ks-inline-star:focus {
	outline: 2px solid #0055b1;
	outline-offset: 2px;
	border-radius: 2px;
}
/* When the row is hovered, paint stars hover-on as the cursor moves */
.ks-inline-stars:hover .ks-inline-star {
	color: #d1d5db;
	-webkit-text-stroke: 0.5px #b0b4ba;
	transform: none;
}
.ks-inline-stars:hover .ks-inline-star.is-hover,
.ks-inline-stars:hover .ks-inline-star.is-hover ~ .ks-inline-star.is-on {
	color: #fbbf24;
	-webkit-text-stroke: 0;
}
/* Persisted state (after click — modal opens but inline cell keeps highlight) */
.ks-inline-star.is-on {
	color: #fbbf24 !important;
	-webkit-text-stroke: 0 !important;
}