/* =========================================================================
   Ambikly — flat orange design system (no gradients, anywhere)
   Premium orange (#F97316) + warm stone neutrals.
   Depth comes from soft shadows, borders, and 1 spot color — not gradients.
   ========================================================================= */

:root {
	/* Brand */
	--ak-primary:        #F97316;   /* orange-500 */
	--ak-primary-hover:  #EA580C;   /* orange-600 */
	--ak-primary-soft:   #FFEDD5;   /* orange-100 — flat tint */
	--ak-primary-50:     #FFF7ED;   /* orange-50 */
	--ak-accent:         #FBBF24;   /* amber-400 */
	--ak-accent-hover:   #F59E0B;   /* amber-500 */

	/* Surfaces — warm light, flat */
	--ak-bg:             #FFFFFF;
	--ak-bg-2:           #FAFAF7;   /* alt sections, very subtle warm cream */
	--ak-bg-deep:        #1C1917;   /* stone-900 for CTA contrast */
	--ak-surface:        #FFFFFF;
	--ak-surface-2:      #FAFAF7;
	--ak-border:         #E7E5E0;   /* warm stone-200ish */
	--ak-border-strong:  #D6D3D1;   /* warm stone-300 */

	/* Text — warm stone */
	--ak-text:           #1C1917;   /* stone-900 */
	--ak-text-muted:     #57534E;   /* stone-600 */
	--ak-text-soft:      #78716C;   /* stone-500 */
	--ak-text-dim:       #A8A29E;   /* stone-400 */
	--ak-text-invert:    #FFFFFF;

	/* States */
	--ak-success:        #16A34A;
	--ak-success-soft:   #DCFCE7;
	--ak-warn:           #D97706;
	--ak-warn-soft:      #FEF3C7;
	--ak-danger:         #DC2626;

	/* Radii */
	--ak-r-sm:           10px;
	--ak-r:              16px;
	--ak-r-lg:           24px;
	--ak-r-xl:           32px;
	--ak-r-full:         999px;

	/* Shadows — flat solid colors, no gradient overlays */
	--ak-shadow-sm:      0 1px 2px rgba(28, 25, 23, .06);
	--ak-shadow:         0 4px 16px -4px rgba(28, 25, 23, .08), 0 2px 6px rgba(28, 25, 23, .04);
	--ak-shadow-lg:      0 24px 60px -20px rgba(28, 25, 23, .18), 0 8px 24px -8px rgba(28, 25, 23, .08);
	--ak-shadow-brand:   0 12px 32px -12px rgba(249, 115, 22, .35);

	/* Typography */
	--ak-font:           'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ak-font-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Layout */
	--ak-container:      1200px;
	--ak-container-sm:   880px;
	--ak-section-y:      clamp(80px, 10vw, 140px);
	--ak-section-y-sm:   clamp(48px, 6vw, 80px);

	/* Motion */
	--ak-ease:           cubic-bezier(.22,.61,.36,1);
}

/* =========================================================================
   Reset within scope
   ========================================================================= */
.ambikly-page,
.ambikly-page *,
.ambikly-page *::before,
.ambikly-page *::after { box-sizing: border-box; }

.ambikly-page {
	font-family: var(--ak-font);
	color: var(--ak-text);
	background: var(--ak-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

.ambikly-page img,
.ambikly-page svg { max-width: 100%; height: auto; display: block; }

.ambikly-page a {
	color: var(--ak-primary);
	text-decoration: none;
	transition: color .2s var(--ak-ease);
}
.ambikly-page a:hover { color: var(--ak-primary-hover); }

.ambikly-page h1,
.ambikly-page h2,
.ambikly-page h3,
.ambikly-page h4,
.ambikly-page h5 {
	font-family: var(--ak-font);
	color: var(--ak-text);
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 .5em;
	font-weight: 700;
}
.ambikly-page h1 { font-size: clamp(2.5rem, 4vw + 1rem, 4.25rem); font-weight: 800; letter-spacing: -.04em; }
.ambikly-page h2 { font-size: clamp(1.875rem, 2vw + 1rem, 2.75rem); letter-spacing: -.03em; }
.ambikly-page h3 { font-size: clamp(1.2rem, 1vw + .8rem, 1.5rem); }
.ambikly-page h4 { font-size: 1.125rem; }

.ambikly-page p { margin: 0 0 1rem; color: var(--ak-text-muted); }
.ambikly-page .lead {
	font-size: clamp(1.05rem, .5vw + 1rem, 1.25rem);
	color: var(--ak-text-muted);
	line-height: 1.6;
}

.ambikly-page code {
	background: var(--ak-bg-2);
	border: 1px solid var(--ak-border);
	padding: 2px 8px;
	border-radius: 6px;
	font-family: var(--ak-font-mono);
	font-size: .88em;
	color: var(--ak-text);
}

.ambikly-page hr {
	border: 0;
	border-top: 1px solid var(--ak-border);
	margin: 48px 0;
}

.ambikly-page ::selection { background: var(--ak-primary-soft); color: var(--ak-text); }

/* =========================================================================
   Layout primitives
   ========================================================================= */
.ak-container {
	width: 100%;
	max-width: var(--ak-container);
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
}
.ak-container--sm { max-width: var(--ak-container-sm); }

.ak-section { padding: var(--ak-section-y) 0; position: relative; }
.ak-section--tight { padding: var(--ak-section-y-sm) 0; }
.ak-section--alt { background: var(--ak-bg-2); }
.ak-section--surface { background: var(--ak-surface); }

/* Glow classes kept as no-op (templates reference them) — gradients removed */
.ak-glow,
.ak-glow--top,
.ak-glow--bottom,
.ak-glow--purple,
.ak-glow--cyan,
.ak-glow--violet,
.ak-glow--tl,
.ak-glow--br { display: none; }

.ak-section > .ak-container,
.ak-section > .ak-container--sm { position: relative; z-index: 1; }

/* Section heading block */
.ak-section-head {
	max-width: 760px;
	margin: 0 auto clamp(48px, 6vw, 80px);
	text-align: center;
}
.ak-section-head--left { margin-left: 0; text-align: left; }

.ak-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: var(--ak-primary-50);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-full);
	color: var(--ak-primary-hover);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.ak-eyebrow::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: var(--ak-r-full);
	background: var(--ak-primary);
}

/* Solid orange "emphasis" text (was gradient text). Templates still use .ak-grad-text. */
.ak-grad-text { color: var(--ak-primary); }

/* =========================================================================
   Buttons
   ========================================================================= */
.ak-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: var(--ak-r-sm);
	font-family: var(--ak-font);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .2s var(--ak-ease), background .2s var(--ak-ease), color .2s var(--ak-ease), border-color .2s var(--ak-ease), box-shadow .2s var(--ak-ease);
	white-space: nowrap;
}
.ak-btn:focus-visible {
	outline: 2px solid var(--ak-primary);
	outline-offset: 3px;
}
.ak-btn--primary {
	background: var(--ak-primary);
	color: #fff;
	border-color: var(--ak-primary);
	box-shadow: var(--ak-shadow-brand);
}
.ak-btn--primary:hover {
	background: var(--ak-primary-hover);
	color: #fff;
	border-color: var(--ak-primary-hover);
	transform: translateY(-1px);
}
.ak-btn--ghost {
	background: var(--ak-surface);
	color: var(--ak-text);
	border-color: var(--ak-border-strong);
}
.ak-btn--ghost:hover {
	background: var(--ak-bg-2);
	color: var(--ak-text);
	border-color: var(--ak-text-soft);
	transform: translateY(-1px);
}
.ak-btn--ghost.is-active {
	background: var(--ak-primary);
	color: #fff;
	border-color: var(--ak-primary);
	box-shadow: var(--ak-shadow-brand);
}
.ak-btn--ghost.is-active:hover {
	background: var(--ak-primary-hover);
	border-color: var(--ak-primary-hover);
	color: #fff;
}
.ak-btn--accent {
	background: var(--ak-text);
	color: #fff;
	border-color: var(--ak-text);
}
.ak-btn--accent:hover {
	background: #000;
	color: #fff;
	border-color: #000;
	transform: translateY(-1px);
}

/* ── Button text colour override ──────────────────────────────────────────────
   .ambikly-page a { color: var(--ak-primary) } has specificity 0-1-1, which
   beats .ak-btn--primary { color:#fff } at 0-1-0. Adding .ambikly-page as a
   prefix raises button rules to 0-2-0, restoring the correct text colours.
   ──────────────────────────────────────────────────────────────────────────── */
.ambikly-page .ak-btn--primary,
.ambikly-page .ak-btn--primary:hover,
.ambikly-page .ak-btn--primary:focus,
.ambikly-page .ak-btn--ghost.is-active,
.ambikly-page .ak-btn--ghost.is-active:hover { color: #fff; }

.ambikly-page .ak-btn--ghost,
.ambikly-page .ak-btn--ghost:hover           { color: var(--ak-text); }

.ambikly-page .ak-btn--accent,
.ambikly-page .ak-btn--accent:hover          { color: #fff; }

/* CTA block: primary is white-bg/dark-text on dark background */
.ambikly-page .ak-cta-block .ak-btn--primary,
.ambikly-page .ak-cta-block .ak-btn--primary:hover { color: var(--ak-text); }
.ambikly-page .ak-cta-block .ak-btn--ghost,
.ambikly-page .ak-cta-block .ak-btn--ghost:hover   { color: #fff; }
.ak-btn--lg { padding: 16px 28px; font-size: 16px; border-radius: var(--ak-r-sm); }
.ak-btn--sm { padding: 9px 14px; font-size: 13px; border-radius: 8px; }

.ak-btn-row {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}
.ak-btn-row--center { display: flex; justify-content: center; }
.ak-btn-row--block { display: flex; }
.ak-btn-row--block .ak-btn { width: 100%; }

.ak-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ak-primary);
	font-weight: 600;
	transition: gap .2s var(--ak-ease), color .2s var(--ak-ease);
}
.ak-link-arrow:hover { color: var(--ak-primary-hover); gap: 10px; }

/* =========================================================================
   Hero
   ========================================================================= */
.ak-hero {
	position: relative;
	padding: clamp(80px, 10vw, 140px) 0 clamp(48px, 6vw, 80px);
	background: var(--ak-bg);
}
.ak-hero--center { text-align: center; }
.ak-hero--center .ak-section-head { margin-bottom: 56px; }
.ak-hero h1 { max-width: 18ch; }
.ak-hero--center h1 { margin-inline: auto; }
.ak-hero .lead { max-width: 60ch; margin-bottom: 32px; }
.ak-hero--center .lead { margin-inline: auto; }

.ak-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 64px;
	align-items: center;
}
@media (min-width: 1024px) {
	.ak-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 72px; }
}

.ak-hero-meta {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 28px;
	color: var(--ak-text-soft);
	font-size: 14px;
}
.ak-hero-meta strong { color: var(--ak-text); font-weight: 600; }
.ak-hero-meta .ak-tick {
	color: var(--ak-success);
	display: inline-flex;
	align-items: center;
	margin-right: 6px;
}

/* =========================================================================
   Cards
   ========================================================================= */
.ak-card {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r);
	padding: 28px;
	transition: transform .25s var(--ak-ease), border-color .25s var(--ak-ease), box-shadow .25s var(--ak-ease);
}
.ak-card:hover {
	transform: translateY(-2px);
	border-color: var(--ak-border-strong);
	box-shadow: var(--ak-shadow);
}
.ak-card h3 { font-size: 1.125rem; margin-bottom: 8px; }
.ak-card p { margin: 0; font-size: .95rem; color: var(--ak-text-muted); }

.ak-card--featured {
	border-color: var(--ak-primary);
	border-width: 2px;
	padding: 27px;
}

.ak-icon-tile {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--ak-primary-50);
	color: var(--ak-primary);
	margin-bottom: 20px;
}
/* Variants kept for template stability — all flat orange-family */
.ak-icon-tile--purple  { background: var(--ak-primary-soft); color: var(--ak-primary-hover); }
.ak-icon-tile--cyan    { background: var(--ak-warn-soft);    color: var(--ak-warn); }
.ak-icon-tile--success { background: var(--ak-success-soft); color: var(--ak-success); }
.ak-icon-tile--warn    { background: var(--ak-warn-soft);    color: var(--ak-warn); }
.ak-icon-tile--gradient {
	background: var(--ak-primary);
	color: #fff;
	box-shadow: var(--ak-shadow-brand);
}
.ak-icon { display: inline-block; vertical-align: middle; }

/* =========================================================================
   Grids
   ========================================================================= */
.ak-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.ak-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .ak-grid--2 { grid-template-columns: 1fr 1fr; } }
.ak-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .ak-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ak-grid--3 { grid-template-columns: 1fr 1fr 1fr; } }
.ak-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .ak-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ak-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   Bento grid
   ========================================================================= */
.ak-bento {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.ak-bento {
		grid-template-columns: repeat(6, 1fr);
		grid-auto-rows: minmax(200px, auto);
	}
	.ak-bento-cell--lg  { grid-column: span 4; grid-row: span 2; }
	.ak-bento-cell--md  { grid-column: span 3; }
	.ak-bento-cell--sm  { grid-column: span 2; }
	.ak-bento-cell--tall { grid-row: span 2; }
}
.ak-bento-cell {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-lg);
	padding: 28px;
	transition: border-color .25s var(--ak-ease), transform .25s var(--ak-ease), box-shadow .25s var(--ak-ease);
}
.ak-bento-cell:hover { border-color: var(--ak-border-strong); transform: translateY(-2px); box-shadow: var(--ak-shadow); }
.ak-bento-cell h3 { font-size: 1.25rem; margin-bottom: 10px; }
.ak-bento-cell p  { color: var(--ak-text-muted); margin: 0; }

/* =========================================================================
   Dashboard mock
   ========================================================================= */
.ak-dashboard {
	position: relative;
	border-radius: var(--ak-r-lg);
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	box-shadow: var(--ak-shadow-lg);
	overflow: hidden;
}
.ak-dashboard-inner {
	background: var(--ak-surface);
	border-radius: var(--ak-r-lg);
	overflow: hidden;
}
.ak-dashboard-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: var(--ak-bg-2);
	border-bottom: 1px solid var(--ak-border);
}
.ak-dashboard-bar i {
	width: 11px; height: 11px;
	border-radius: var(--ak-r-full);
	background: var(--ak-border-strong);
	display: inline-block;
}
.ak-dashboard-bar i:nth-child(1) { background: #FF5F57; }
.ak-dashboard-bar i:nth-child(2) { background: #FEBC2E; }
.ak-dashboard-bar i:nth-child(3) { background: #28C840; }
.ak-dashboard-bar .ak-dashboard-url {
	margin-left: 14px;
	font-family: var(--ak-font-mono);
	font-size: 12px;
	color: var(--ak-text-soft);
}
.ak-dashboard-body {
	padding: 28px;
	display: grid;
	gap: 20px;
}
.ak-dashboard-stats {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr 1fr;
}
.ak-dashboard-stat {
	background: var(--ak-bg-2);
	border: 1px solid var(--ak-border);
	border-radius: 12px;
	padding: 16px;
}
.ak-dashboard-stat .lbl {
	font-size: 11px;
	color: var(--ak-text-soft);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.ak-dashboard-stat .val {
	font-size: 22px;
	font-weight: 800;
	color: var(--ak-text);
	letter-spacing: -.02em;
}
.ak-dashboard-stat .delta {
	font-size: 11px;
	font-weight: 600;
	color: var(--ak-success);
}
.ak-dashboard-row { display: flex; gap: 12px; align-items: center; }
.ak-dashboard-pill {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--ak-primary);
	color: #fff;
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
}
.ak-dashboard-line {
	height: 10px; border-radius: 5px;
	background: var(--ak-bg-2);
	border: 1px solid var(--ak-border);
	flex: 1;
}
.ak-dashboard-line.short { flex: 0 0 24%; }
.ak-dashboard-line.mid   { flex: 0 0 56%; }
.ak-dashboard-chart {
	height: 110px;
	background: var(--ak-bg-2);
	border: 1px solid var(--ak-border);
	border-radius: 12px;
	padding: 12px;
	display: flex;
	align-items: flex-end;
	gap: 6px;
}
.ak-dashboard-chart span {
	flex: 1;
	background: var(--ak-primary);
	border-radius: 4px 4px 0 0;
}

/* Floating UI cards */
.ak-floating {
	position: absolute;
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r);
	padding: 14px 18px;
	box-shadow: var(--ak-shadow-lg);
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 12px;
	animation: ak-float 6s var(--ak-ease) infinite;
}
.ak-floating strong { color: var(--ak-text); font-weight: 600; display: block; }
.ak-floating span   { color: var(--ak-text-soft); }
.ak-floating--tl { top: 16px;    left: -28px;  animation-delay: 0s; }
.ak-floating--br { bottom: 24px; right: -32px; animation-delay: 2s; }
.ak-floating-dot {
	width: 32px; height: 32px;
	border-radius: var(--ak-r-full);
	background: var(--ak-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
@keyframes ak-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
@media (max-width: 1023px) {
	.ak-floating { display: none; }
}

/* =========================================================================
   Stats — solid color numbers
   ========================================================================= */
.ak-stats {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr;
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-lg);
	overflow: hidden;
}
@media (min-width: 720px) { .ak-stats { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.ak-stat {
	padding: 28px;
	text-align: center;
	border-bottom: 1px solid var(--ak-border);
	border-right: 1px solid var(--ak-border);
}
@media (min-width: 720px) { .ak-stat { border-bottom: 0; } }
.ak-stat:last-child { border-right: 0; border-bottom: 0; }
.ak-stat .num {
	font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
	font-weight: 800;
	color: var(--ak-primary);
	letter-spacing: -.03em;
	display: block;
}
.ak-stat .lbl { color: var(--ak-text-muted); font-size: .9rem; margin-top: 8px; }

/* =========================================================================
   Pricing
   ========================================================================= */
.ak-pricing {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 900px)  { .ak-pricing { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ak-pricing { grid-template-columns: repeat(3, 1fr); } }

.ak-plan {
	position: relative;
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-lg);
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	transition: transform .25s var(--ak-ease), border-color .25s var(--ak-ease), box-shadow .25s var(--ak-ease);
}
.ak-plan:hover { transform: translateY(-3px); border-color: var(--ak-border-strong); box-shadow: var(--ak-shadow); }

.ak-plan--featured {
	border: 2px solid var(--ak-primary);
	padding: 35px 31px;
	box-shadow: var(--ak-shadow-lg);
	transform: translateY(-8px);
}
.ak-plan--featured:hover { transform: translateY(-10px); }

.ak-plan-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ak-primary);
	color: #fff;
	padding: 6px 14px;
	border-radius: var(--ak-r-full);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ak-plan h3 { font-size: 1.25rem; margin: 0; }
.ak-plan-tagline { color: var(--ak-text-muted); margin: 8px 0 24px; font-size: .95rem; }
.ak-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.ak-plan-price .amount {
	font-size: 3.25rem;
	font-weight: 800;
	letter-spacing: -.04em;
	color: var(--ak-text);
}
.ak-plan-price .currency { font-size: 1.25rem; font-weight: 700; color: var(--ak-text-muted); }
.ak-plan-price .period   { font-size: 1rem;    color: var(--ak-text-soft); }
.ak-plan-renewal { color: var(--ak-text-soft); font-size: 13px; margin-bottom: 24px; }
.ak-plan-cta { margin-bottom: 24px; }
.ak-plan-cta .ak-btn { width: 100%; }
.ak-plan-features { list-style: none; padding: 0; margin: 0; }
.ak-plan-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	font-size: .94rem;
	color: var(--ak-text-muted);
	text-align:left;
}
.ak-plan-features .ak-tick {
	flex: 0 0 18px;
	color: var(--ak-success);
	margin-top: 2px;
	display: inline-flex;
}
.ak-plan-features strong { color: var(--ak-text); }

/* Pricing toggle */
.ak-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--ak-bg-2);
	border: 1px solid var(--ak-border);
	padding: 4px;
	border-radius: var(--ak-r-full);
	margin-bottom: 36px;
}
.ak-toggle button {
	background: transparent;
	border: 0;
	padding: 10px 18px;
	border-radius: var(--ak-r-full);
	font-weight: 600;
	font-size: 13px;
	color: var(--ak-text-muted);
	font-family: var(--ak-font);
	cursor: pointer;
	transition: all .2s var(--ak-ease);
}
.ak-toggle button.is-active {
	background: var(--ak-primary);
	color: #fff;
}
.ak-toggle .ak-save {
	background: var(--ak-success-soft);
	color: var(--ak-success);
	font-size: 10px;
	padding: 2px 7px;
	border-radius: var(--ak-r-full);
	margin-left: 6px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* =========================================================================
   Comparison table
   ========================================================================= */
.ak-compare-wrap { overflow-x: auto; border-radius: var(--ak-r-lg); }
.ak-compare {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-lg);
	overflow: hidden;
	font-size: .94rem;
}
.ak-compare th,
.ak-compare td {
	padding: 16px 20px;
	text-align: left;
	border-bottom: 1px solid var(--ak-border);
	color: var(--ak-text-muted);
	vertical-align: middle;
}
.ak-compare th {
	background: var(--ak-bg-2);
	color: var(--ak-text);
	font-weight: 700;
	font-size: .88rem;
}
.ak-compare tr:last-child td { border-bottom: 0; }
.ak-compare .ak-feat { color: var(--ak-text); font-weight: 600; }
.ak-compare .ak-col-ours { background: var(--ak-primary-50); color: var(--ak-text); }
.ak-compare thead th.ak-col-ours { background: var(--ak-primary-soft); color: var(--ak-primary-hover); }
.ak-compare .ak-yes { color: var(--ak-success); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.ak-compare .ak-no  { color: var(--ak-text-dim); }
.ak-compare .ak-mid { color: var(--ak-warn); font-weight: 600; }

/* =========================================================================
   Logo cloud
   ========================================================================= */
.ak-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: center;
	align-items: center;
	color: var(--ak-text-soft);
}
.ak-logos span {
	font-weight: 600;
	font-size: 1rem;
	opacity: .65;
	transition: opacity .2s var(--ak-ease);
}
.ak-logos span:hover { opacity: 1; }

/* =========================================================================
   Testimonials
   ========================================================================= */
.ak-quote {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-lg);
	padding: 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: border-color .25s var(--ak-ease), box-shadow .25s var(--ak-ease);
}
.ak-quote:hover { border-color: var(--ak-border-strong); box-shadow: var(--ak-shadow); }
.ak-quote-stars {
	display: flex;
	gap: 2px;
	color: var(--ak-accent);
	margin-bottom: 16px;
}
.ak-quote blockquote {
	margin: 0 0 24px;
	font-size: 1.05rem;
	color: var(--ak-text);
	line-height: 1.6;
	border: 0;
	padding: 0;
	flex: 1;
}
.ak-quote-author { display: flex; align-items: center; gap: 14px; }
.ak-avatar {
	width: 44px; height: 44px;
	border-radius: var(--ak-r-full);
	background: var(--ak-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
}
.ak-quote-author strong { display: block; color: var(--ak-text); font-size: .95rem; font-weight: 600; }
.ak-quote-author span   { display: block; color: var(--ak-text-soft); font-size: .85rem; }

/* =========================================================================
   FAQ
   ========================================================================= */
.ak-faq { max-width: 800px; margin: 0 auto; }
.ak-faq details {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r);
	margin-bottom: 12px;
	transition: border-color .2s var(--ak-ease), box-shadow .2s var(--ak-ease);
}
.ak-faq details[open] {
	border-color: var(--ak-border-strong);
	box-shadow: var(--ak-shadow);
}
.ak-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 24px;
	font-weight: 600;
	color: var(--ak-text);
	font-size: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.ak-faq summary::-webkit-details-marker { display: none; }
.ak-faq summary::after {
	content: "";
	width: 12px; height: 12px;
	border-right: 2px solid var(--ak-text-soft);
	border-bottom: 2px solid var(--ak-text-soft);
	transform: rotate(45deg);
	transition: transform .2s var(--ak-ease);
}
.ak-faq details[open] summary::after { transform: rotate(-135deg); }
.ak-faq-body {
	padding: 0 24px 22px;
	color: var(--ak-text-muted);
	line-height: 1.7;
}

/* =========================================================================
   CTA block — flat dark surface, no gradient overlay
   ========================================================================= */
.ak-cta-block {
	background: var(--ak-bg-deep);
	color: #fff;
	border-radius: var(--ak-r-xl);
	padding: clamp(48px, 6vw, 80px);
	text-align: center;
}
.ak-cta-block h2 { color: #fff; max-width: 24ch; margin: 0 auto 16px; }
.ak-cta-block p  { color: rgba(255,255,255,.78); max-width: 60ch; margin: 0 auto 32px; }
.ak-cta-block .ak-eyebrow {
	background: rgba(255,255,255,.10);
	border-color: rgba(255,255,255,.18);
	color: rgba(255,255,255,.85);
}
.ak-cta-block .ak-eyebrow::before { background: var(--ak-primary); }
.ak-cta-block .ak-btn--primary { background: var(--ak-primary); color: #fff; border-color: var(--ak-primary); box-shadow: none; }
.ak-cta-block .ak-btn--primary:hover { background: var(--ak-primary-hover); border-color: var(--ak-primary-hover); color: #fff; }
.ak-cta-block .ak-btn--ghost { color: #fff; background: transparent; border-color: rgba(255,255,255,.25); }
.ak-cta-block .ak-btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Sticky CTA */
.ak-sticky-cta {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(120px);
	background: var(--ak-surface);
	border: 1px solid var(--ak-border-strong);
	border-radius: var(--ak-r-full);
	padding: 8px 8px 8px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: var(--ak-shadow-lg);
	z-index: 80;
	opacity: 0;
	transition: transform .35s var(--ak-ease), opacity .35s var(--ak-ease);
	max-width: calc(100% - 32px);
}
.ak-sticky-cta.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.ak-sticky-cta-text { color: var(--ak-text-muted); font-size: 14px; }
.ak-sticky-cta-text strong { color: var(--ak-text); }
@media (max-width: 640px) { .ak-sticky-cta-text { display: none; } }

/* =========================================================================
   Pills / badges — all flat
   ========================================================================= */
.ak-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--ak-r-full);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--ak-bg-2);
	color: var(--ak-text-muted);
	border: 1px solid var(--ak-border);
}
.ak-pill--free  { color: var(--ak-success);      border-color: var(--ak-success-soft); background: var(--ak-success-soft); }
.ak-pill--pro   { color: #fff;                    border-color: var(--ak-primary);      background: var(--ak-primary); }
.ak-pill--soon  { color: var(--ak-warn);          border-color: var(--ak-warn-soft);    background: var(--ak-warn-soft); }
.ak-pill--new   { color: var(--ak-primary-hover); border-color: var(--ak-primary-soft); background: var(--ak-primary-soft); }
.ak-pill--beta  { color: var(--ak-primary-hover); border-color: var(--ak-primary-soft); background: var(--ak-primary-soft); }

/* =========================================================================
   Addon card
   ========================================================================= */
.ak-addon {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r);
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition: transform .25s var(--ak-ease), border-color .25s var(--ak-ease), box-shadow .25s var(--ak-ease);
}
.ak-addon:hover { transform: translateY(-2px); border-color: var(--ak-border-strong); box-shadow: var(--ak-shadow); }
.ak-addon-head {
	display: flex; align-items: center;
	gap: 12px; margin-bottom: 16px;
}
.ak-addon-head .ak-icon-tile { margin-bottom: 0; width: 40px; height: 40px; }
.ak-addon h3 { font-size: 1rem; margin: 0; color: var(--ak-text); }
.ak-addon p { font-size: .9rem; margin: 0 0 16px; flex: 1; }
.ak-addon-meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: auto;
}

/* =========================================================================
   Integrations (component retained for any future use)
   ========================================================================= */
.ak-integration {
	display: flex;
	flex-direction: column;
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r);
	padding: 24px;
	transition: transform .25s var(--ak-ease), border-color .25s var(--ak-ease), box-shadow .25s var(--ak-ease);
	text-align: left;
}
.ak-integration:hover { transform: translateY(-2px); border-color: var(--ak-border-strong); box-shadow: var(--ak-shadow); }
.ak-integration-logo {
	width: 56px; height: 56px;
	background: var(--ak-bg-2);
	border: 1px solid var(--ak-border);
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	color: var(--ak-text);
	font-weight: 800;
	font-size: 18px;
}
.ak-integration h3 { font-size: 1rem; margin-bottom: 6px; }
.ak-integration p  { color: var(--ak-text-muted); font-size: .9rem; margin: 0 0 14px; flex: 1; }
.ak-integration-foot {
	display: flex; align-items: center; justify-content: space-between;
	color: var(--ak-text-soft); font-size: 12px;
	border-top: 1px solid var(--ak-border);
	padding-top: 14px;
}

/* =========================================================================
   Workflow timeline
   ========================================================================= */
.ak-workflow {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) { .ak-workflow { grid-template-columns: repeat(4, 1fr); } }
.ak-workflow-step {
	position: relative;
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-lg);
	padding: 32px 28px;
	transition: border-color .2s var(--ak-ease), box-shadow .2s var(--ak-ease);
}
.ak-workflow-step:hover { border-color: var(--ak-border-strong); box-shadow: var(--ak-shadow); }
.ak-workflow-step::after {
	content: "";
	display: none;
	position: absolute;
	top: 50%;
	right: -16px;
	width: 16px;
	height: 2px;
	background: var(--ak-border-strong);
	transform: translateY(-50%);
}
@media (min-width: 900px) {
	.ak-workflow-step:not(:last-child)::after { display: block; }
}
.ak-workflow-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: var(--ak-r-full);
	background: var(--ak-primary);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 16px;
}
.ak-workflow-step h4 { margin-bottom: 8px; }
.ak-workflow-step p  { font-size: .92rem; color: var(--ak-text-muted); margin: 0; }

/* =========================================================================
   Performance / Web Vitals
   ========================================================================= */
.ak-vitals {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .ak-vitals { grid-template-columns: repeat(3, 1fr); } }
.ak-vital {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-lg);
	padding: 28px;
}
.ak-vital-gauge {
	width: 100%;
	height: 6px;
	background: var(--ak-bg-2);
	border-radius: 999px;
	overflow: hidden;
	margin: 14px 0 8px;
}
.ak-vital-gauge i {
	display: block;
	height: 100%;
	background: var(--ak-primary);
	border-radius: 999px;
}
.ak-vital .lbl { font-size: 12px; color: var(--ak-text-soft); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ak-vital .val { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--ak-text); }
.ak-vital .delta { font-size: 12px; color: var(--ak-success); font-weight: 600; }

/* =========================================================================
   Problem vs Solution
   ========================================================================= */
.ak-vs {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) { .ak-vs { grid-template-columns: 1fr 1fr; gap: 28px; } }
.ak-vs-col {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-lg);
	padding: 36px 32px;
}
.ak-vs-col--ours {
	border: 2px solid var(--ak-primary);
	padding: 35px 31px;
	background: var(--ak-primary-50);
}
.ak-vs-col h3 { font-size: 1.25rem; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.ak-vs-col ul { list-style: none; padding: 0; margin: 0; }
.ak-vs-col li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--ak-border);
	color: var(--ak-text-muted);
	font-size: .96rem;
}
.ak-vs-col li:first-child { border-top: 0; padding-top: 0; }
.ak-vs-col li .ak-marker {
	flex: 0 0 18px;
	margin-top: 2px;
	display: inline-flex;
}
.ak-vs-col--problems li .ak-marker { color: var(--ak-danger); }
.ak-vs-col--ours li .ak-marker     { color: var(--ak-success); }
.ak-vs-col--ours li               { border-top-color: rgba(249,115,22,.18); }

/* =========================================================================
   Two-col feature — flat list bullets
   ========================================================================= */
.ak-feat {
	display: grid;
	gap: 40px;
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 960px) { .ak-feat { grid-template-columns: 1fr 1fr; gap: 64px; } }
.ak-feat--reverse > :first-child { order: 2; }
@media (max-width: 959px) { .ak-feat--reverse > :first-child { order: 0; } }
.ak-feat h2 { margin-bottom: 16px; }
.ak-feat ul { list-style: none; padding: 0; margin: 20px 0 0; }
.ak-feat ul li {
	padding: 10px 0 10px 28px;
	position: relative;
	color: var(--ak-text-muted);
	border-top: 1px solid var(--ak-border);
}
.ak-feat ul li:first-child { border-top: 0; }
.ak-feat ul li::before {
	content: "";
	position: absolute;
	left: 0; top: 14px;
	width: 12px; height: 12px;
	border-radius: var(--ak-r-full);
	background: var(--ak-primary);
}

/* =========================================================================
   Steps (How-To)
   ========================================================================= */
.ak-steps {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .ak-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ak-steps { grid-template-columns: repeat(4, 1fr); } }
.ak-step {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r);
	padding: 28px;
}
.ak-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 10px;
	background: var(--ak-primary-50);
	color: var(--ak-primary);
	font-weight: 700;
	margin-bottom: 16px;
	font-size: 14px;
}

/* =========================================================================
   Roadmap
   ========================================================================= */
.ak-roadmap {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) { .ak-roadmap { grid-template-columns: repeat(3, 1fr); } }
.ak-roadmap-col {
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r-lg);
	padding: 28px;
}
.ak-roadmap-col h3 {
	display: flex; align-items: center; gap: 8px;
	font-size: 1rem;
	margin-bottom: 24px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ak-text-soft);
	font-weight: 700;
}
.ak-roadmap-col h3::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: var(--ak-r-full);
	background: var(--ak-text-dim);
}
.ak-roadmap-col--released   h3::before { background: var(--ak-success); }
.ak-roadmap-col--progress   h3::before { background: var(--ak-primary); }
.ak-roadmap-col--planned    h3::before { background: var(--ak-warn); }
.ak-roadmap-item {
	background: var(--ak-bg-2);
	border: 1px solid var(--ak-border);
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 12px;
}
.ak-roadmap-item:last-child { margin-bottom: 0; }
.ak-roadmap-item h4 { font-size: .98rem; margin-bottom: 6px; }
.ak-roadmap-item p  { font-size: .88rem; margin: 0; }
.ak-vote {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--ak-text-soft);
	margin-top: 10px;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	cursor: pointer;
	transition: background .2s var(--ak-ease), color .2s var(--ak-ease), border-color .2s var(--ak-ease);
}
.ak-vote:hover { background: var(--ak-bg-2); color: var(--ak-text); border-color: var(--ak-border-strong); }

/* =========================================================================
   Changelog
   ========================================================================= */
.ak-changelog .ak-release {
	display: grid;
	gap: 12px;
	padding: 32px 0;
	border-top: 1px solid var(--ak-border);
	grid-template-columns: 1fr;
}
.ak-changelog .ak-release:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 768px) {
	.ak-changelog .ak-release { grid-template-columns: 200px 1fr; gap: 40px; }
}
.ak-release-meta .ak-version {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ak-text);
}
.ak-release-meta .ak-date { color: var(--ak-text-soft); font-size: 13px; }
.ak-release-tag {
	display: inline-block;
	background: var(--ak-primary-50);
	border: 1px solid var(--ak-primary-soft);
	color: var(--ak-primary-hover);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--ak-r-full);
	margin-right: 4px;
	margin-top: 8px;
}
.ak-release ul { padding-left: 22px; }
.ak-release li { color: var(--ak-text-muted); margin-bottom: 8px; }

/* =========================================================================
   Docs / doc-card
   ========================================================================= */
.ak-doc-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ak-doc-card a {
	display: block;
	background: var(--ak-surface);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-r);
	padding: 24px;
	color: var(--ak-text);
	transition: transform .25s var(--ak-ease), border-color .25s var(--ak-ease), box-shadow .25s var(--ak-ease);
}
.ak-doc-card a:hover { transform: translateY(-2px); border-color: var(--ak-border-strong); color: var(--ak-text); box-shadow: var(--ak-shadow); }
.ak-doc-card h4 { margin-bottom: 6px; }
.ak-doc-card p  { color: var(--ak-text-muted); font-size: .9rem; margin: 0; }
.ak-doc-card .ak-arrow { color: var(--ak-primary); font-weight: 600; font-size: .9rem; margin-top: 14px; display: inline-block; }

/* =========================================================================
   Forms
   ========================================================================= */
.ak-form { display: grid; gap: 18px; }
.ak-form .ak-row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ak-form .ak-row--2 { grid-template-columns: 1fr 1fr; } }
.ak-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	font-size: .92rem;
	color: var(--ak-text);
}
.ak-form input,
.ak-form textarea,
.ak-form select {
	width: 100%;
	padding: 13px 16px;
	border-radius: var(--ak-r-sm);
	border: 1px solid var(--ak-border-strong);
	background: var(--ak-surface);
	font-family: var(--ak-font);
	font-size: 15px;
	color: var(--ak-text);
	transition: border-color .2s var(--ak-ease), box-shadow .2s var(--ak-ease);
}
.ak-form input::placeholder,
.ak-form textarea::placeholder { color: var(--ak-text-dim); }
.ak-form input:focus,
.ak-form textarea:focus,
.ak-form select:focus {
	outline: 0;
	border-color: var(--ak-primary);
	box-shadow: 0 0 0 3px rgba(249,115,22,.18);
}
.ak-form textarea { min-height: 140px; resize: vertical; }
.ak-form-hint { font-size: .82rem; color: var(--ak-text-soft); margin-top: 6px; }

/* =========================================================================
   Code block — kept dark for legibility
   ========================================================================= */
.ak-code {
	background: #1C1917;
	border: 1px solid #292524;
	color: #D6D3D1;
	border-radius: var(--ak-r);
	padding: 24px;
	font-family: var(--ak-font-mono);
	font-size: 13px;
	line-height: 1.75;
	overflow-x: auto;
}
.ak-code .ak-c-c { color: #78716C; }
.ak-code .ak-c-k { color: #FB923C; }
.ak-code .ak-c-s { color: #FBBF24; }
.ak-code .ak-c-f { color: #FED7AA; }

/* =========================================================================
   Prose (legal pages)
   ========================================================================= */
.ak-prose { max-width: 760px; margin: 0 auto; }
.ak-prose h2 { margin-top: 48px; }
.ak-prose h3 { margin-top: 32px; }
.ak-prose p, .ak-prose li { color: var(--ak-text-muted); }
.ak-prose ul, .ak-prose ol { padding-left: 22px; margin: 0 0 1rem; }
.ak-prose li { margin-bottom: 8px; }
.ak-prose strong { color: var(--ak-text); }
.ak-prose hr { margin: 40px 0; }

/* =========================================================================
   Breadcrumbs
   ========================================================================= */
.ak-breadcrumbs {
	font-size: 13px;
	color: var(--ak-text-soft);
	margin-bottom: 28px;
}
.ak-breadcrumbs ol {
	list-style: none;
	padding: 0; margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
}
.ak-breadcrumbs a { color: var(--ak-text-soft); }
.ak-breadcrumbs a:hover { color: var(--ak-text); }
.ak-breadcrumbs .ak-bc-sep { color: var(--ak-text-dim); margin: 0 4px; }
.ak-breadcrumbs [aria-current="page"] { color: var(--ak-text); }

/* =========================================================================
   404
   ========================================================================= */
.ak-404 {
	text-align: center;
	padding: clamp(80px, 12vw, 160px) 0;
}
.ak-404 .ak-glyph {
	font-size: clamp(8rem, 18vw, 14rem);
	font-weight: 900;
	color: var(--ak-primary);
	letter-spacing: -.06em;
	line-height: .9;
	margin-bottom: 16px;
}

/* =========================================================================
   Accessibility helpers
   ========================================================================= */
.ak-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* =========================================================================
   Logo lockup
   ========================================================================= */
.ambikly-lockup {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ak-text);
	font-weight: 700;
	letter-spacing: -.01em;
}
.ambikly-lockup--lg { font-size: 1.4rem; }
.ambikly-lockup--md { font-size: 1.15rem; }
.ambikly-wordmark   { color: var(--ak-text); }

/* =========================================================================
   Reveal-on-scroll
   ========================================================================= */
.ak-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s var(--ak-ease), transform .8s var(--ak-ease);
}
.ak-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ak-reveal { opacity: 1; transform: none; transition: none; }
	.ak-floating { animation: none; }
	.ambikly-page * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =========================================================================
   Utility
   ========================================================================= */
.ak-mt-0  { margin-top: 0 !important; }
.ak-mt-24 { margin-top: 24px; }
.ak-mt-48 { margin-top: 48px; }
.ak-mb-0  { margin-bottom: 0 !important; }
.ak-mb-24 { margin-bottom: 24px; }
.ak-mb-48 { margin-bottom: 48px; }
.ak-center { text-align: center; }
.ak-muted  { color: var(--ak-text-muted); }
.ak-soft   { color: var(--ak-text-soft); }
.ak-mono   { font-family: var(--ak-font-mono); }